Rumah > Artikel > pembangunan bahagian belakang > Kursus ranap PHP: Penukar Mata Wang Mudah

Kursus ranap PHP: Penukar Mata Wang Mudah

WBOYasal: 2024-08-05 19:16:53889semak imbas

PHP crash course: Simple Currency Converter

Alat Penukar Mata Wang berasaskan PHP yang membolehkan pengguna menukar mata wang menggunakan kadar pertukaran masa nyata yang diambil daripada API luaran. Alat ini dibina dengan PHP, HTML, jQuery, AJAX, JSON, Bootstrap, CSS dan MySQL. Aplikasi ini direka untuk menyediakan penukaran mata wang yang tepat dan memaparkan hasil dalam antara muka yang mesra pengguna.

Topik: php, mysql, blog, ajax, bootstrap, jquery, css, penukaran mata wang, integrasi api luaran, integrasi api

Penyelesaian Langkah demi Langkah

1. Struktur Direktori

simple-currency-converter/
│
├── index.html
├── db/
│   └── database.sql
├── include/
│   ├── config.sample.php
│   └── db.php
├── assets/
│   ├── css/
│   │   └── style.css
│   └── js/
│   │   └── script.js
├── src/
│   ├── fetch-rates.php
│   ├── convert.php
│   └── get-currencies.php
├── README.md
└── .gitignore

2. Skema Pangkalan Data

db/database.sql:

CREATE TABLE `exchange_rates` (
   `id` int(11) NOT NULL AUTO_INCREMENT,
   `currency` varchar(3) NOT NULL,
   `rate` decimal(10, 4) NOT NULL,
   `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
   PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


CREATE TABLE currencies (
   id INT AUTO_INCREMENT PRIMARY KEY,
   code VARCHAR(3) NOT NULL,
   name VARCHAR(50) NOT NULL
);

INSERT INTO currencies (code, name) VALUES
('USD', 'United States Dollar'),
('EUR', 'Euro'),
('GBP', 'British Pound'),
('JPY', 'Japanese Yen'),
('BDT', 'Bangladesh Taka'),
('AUD', 'Australian Dollar');

3. Fail Konfigurasi

Tetapan konfigurasi (include/config.sample.php)

<?php
// Database configuration
define('DB_HOST', 'localhost'); // Database host
define('DB_NAME', 'currency_converter'); // Database name
define('DB_USER', 'root'); // Change if necessary
define('DB_PASS', ''); // Change if necessary

// API configuration
define('API_URL', 'https://api.exchangerate-api.com/v4/latest/');
define('API_KEY', 'your_api_key_here');
?>

4. Konfigurasikan Sambungan Pangkalan Data

Mewujudkan sambungan pangkalan data (termasuk/db.php)

<?php
include 'db.php';

// Database configuration
$dsn = 'mysql:host='.DB_HOST.';dbname='.DB_NAME;
$options = [
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::ATTR_EMULATE_PREPARES   => false,
];

// Create a new PDO instance
try {
    $pdo = new PDO($dsn, DB_USER, DB_PASS, $options);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // Set error mode to exception
} catch (PDOException $e) {
    echo 'Connection failed: ' . $e->getMessage(); // Display error message if connection fails
}
?>

5. Struktur HTML dan PHP

Struktur HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Currency Converter</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="container">
   <h2 class="text-center">Currency Converter</h2>
   <form id="currency-form">
      <div class="form-group">
         <label for="amount">Amount:</label>
         <input type="number" class="form-control" id="amount" placeholder="Enter amount" required>
      </div>
      <div class="form-group">
         <label for="from_currency">From:</label>
         <select class="form-control" id="from_currency">
            <!-- Options will be loaded dynamically -->
         </select>
      </div>
      <div class="form-group">
         <label for="to_currency">To:</label>
         <select class="form-control" id="to_currency">
            <!-- Options will be loaded dynamically -->
         </select>
      </div>
      <button type="submit" class="btn btn-primary">Convert</button>
   </form>
   <div id="result" class="alert alert-success" style="display:none;"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>

6. JavaScript dan AJAX

Pengendalian AJAX (aset/js/script.js)

$(document).ready(function() {
   // Fetch exchange rates and populate the select options
   $.ajax({
      url: 'src/fetch-rates.php',
      method: 'GET',
      dataType: 'json',
      success: function(data) {
         if (data.status === 'success') {
            populateCurrencyOptions();
         }
      }
   });

   function populateCurrencyOptions() {
      $.ajax({
         url: 'src/get-currencies.php',
         method: 'GET',
         dataType: 'json',
         success: function(data) {
            if (data.status === 'success') {
               var options = '';
               console.log(data.currencies)
               $.each(data.currencies, function(index, currency) {
                  options += '<option value="' + currency.code + '">' + currency.name + '</option>';
               });
               $('#from_currency, #to_currency').html(options);
            }
         }
      });
   }

   // Handle form submission
   $('#currency-form').on('submit', function(e) {
      e.preventDefault();
      var amount = $('#amount').val();
      var fromCurrency = $('#from_currency').val();
      var toCurrency = $('#to_currency').val();

      $.ajax({
         url: 'src/convert.php',
         method: 'POST',
         data: {
            amount: amount,
            from_currency: fromCurrency,
            to_currency: toCurrency
         },
         dataType: 'json',
         success: function(data) {
            if (data.status === 'success') {
               $('#result').html('Converted Amount: ' + data.converted_amount).show();
            } else {
               $('#result').html(data.message).show();
            }
         }
      });
   });
});

Penjelasan:

Menggunakan Bootstrap untuk penggayaan dan jQuery untuk permintaan AJAX.
$('#currency-form').on('submit', ...): Mengendalikan penyerahan borang dan menghantar permintaan AJAX ke src/convert.php.
$.ajax({...}): Menghantar data ke pelayan dan memproses respons.

7. Skrip PHP Bahagian Belakang

Ambil Kadar Pertukaran (src/fetch-rates.php)

<?php
require '../include/db.php';

// Fetch exchange rates from the external API
$apiUrl = API_URL . "USD"; // Replace with your API endpoint

$response = file_get_contents($apiUrl);
$data = json_decode($response, true);

if ($data) {
    // Clear existing rates
    $stmt = $pdo->prepare("TRUNCATE TABLE exchange_rates");
    $stmt->execute();

    // Insert new rates
    $stmt = $pdo->prepare("INSERT INTO exchange_rates (currency, rate) VALUES (:currency, :rate)");
    foreach ($data['rates'] as $currency => $rate) {
        $stmt->execute(['currency' => $currency, 'rate' => $rate]);
    }

    echo json_encode(['status' => 'success', 'message' => 'Exchange rates updated successfully.']);
} else {
    echo json_encode(['status' => 'error', 'message' => 'Failed to fetch exchange rates.']);
}
?>

Penjelasan:

file_get_contents($apiUrl): Mengambil data daripada API.
json_decode($response, true): Menyahkod data JSON ke dalam tatasusunan bersekutu.
INSERT INTO currency_rates ... PADA KEMASKINI KUNCI DUA: Sisipkan atau kemas kini kadar mata wang dalam pangkalan data.

Logik Penukaran Mata Wang (src/convert.php)

<?php
require '../include/db.php';

$amount = $_POST['amount'];
$fromCurrency = $_POST['from_currency'];
$toCurrency = $_POST['to_currency'];

// Fetch the exchange rate from the database
$stmt = $pdo->prepare("SELECT rate FROM exchange_rates WHERE currency = :currency");
$stmt->execute(['currency' => $fromCurrency]);
$fromRate = $stmt->fetchColumn();

$stmt->execute(['currency' => $toCurrency]);
$toRate = $stmt->fetchColumn();

if ($fromRate && $toRate) {
    // Convert the amount
    $convertedAmount = ($amount / $fromRate) * $toRate;
    echo json_encode(['status' => 'success', 'converted_amount' => number_format($convertedAmount, 2)]);
} else {
    echo json_encode(['status' => 'error', 'message' => 'Conversion failed.']);
}
?>

Penjelasan:

$_POST['amount'], $_POST['from_currency'], $_POST['to_currency']: Mendapat parameter daripada permintaan AJAX.
SELECT exchange_rate FROM currency_rates WHERE currency = ?: Mengambil kadar pertukaran daripada pangkalan data.
Menukar amaun dan mengembalikan respons JSON.

Nama dan kod Mata Wang (src/get-currencies.php)

<?php
require '../include/db.php';
$stmt = $pdo->query('SELECT code, name FROM currencies');
$data = [];
while ($row = $stmt->fetch()) {
    $data[] = ['code' => $row['code'], 'name' => $row['name']];
}
echo json_encode(['status' => 'success', 'currencies' => $data]);
?>

Penjelasan:

PILIH kod, nama DARI mata wang: Mengambil nama mata wang dan kod daripada pangkalan data.
Mengembalikan respons JSON.

6. Penggayaan CSS

Penggayaan CSS (aset/css/style.css)

body {
   padding-top: 50px;
}

.container {
   max-width: 600px;
   margin: 0 auto;
}

Dokumentasi dan Komen

include/config.php: Mengandungi konfigurasi pangkalan data dan menyambung ke MySQL menggunakan konfigurasi PDO dan API.
index.php: Halaman utama dengan struktur HTML, termasuk Bootstrap untuk penggayaan.
assets/js/script.js: Mengendalikan permintaan AJAX untuk memuatkan dan menyimpan siaran. Menggunakan jQuery untuk manipulasi DOM dan AJAX.
- Menggunakan jQuery untuk membuat panggilan AJAX.
- Memaparkan keputusan dalam div #result.
assets/css/style.css: Penggayaan asas untuk aplikasi.
- Menetapkan warna latar belakang dan lebar bekas.
src/fetch-rates.php: Mengambil siaran daripada pangkalan data dan mengembalikannya sebagai JSON.
- Mengambil kadar pertukaran daripada API.
- menyimpan hasil penukaran dalam pangkalan data.
- Mengembalikan hasil dalam format JSON.
src/get-currencies.php: Mengendalikan pembuatan dan pengemaskinian siaran berdasarkan kehadiran ID.
- Mengembalikan hasil dalam format JSON.
src/convert.php: Memproses permintaan penukaran dan berinteraksi dengan API.
- Mengesahkan data input.
- Mengambil kadar pertukaran daripada API.
- Mengira dan menyimpan hasil penukaran dalam pangkalan data.
- Mengembalikan hasil dalam format JSON.

Persediaan ini menyediakan alat penukar mata wang asas tetapi berfungsi dengan ulasan dan penjelasan terperinci. Pastikan anda melaraskan URL API dan tetapan pangkalan data mengikut keperluan anda. Untuk kegunaan dunia sebenar, anda juga mungkin mahu menambah pengendalian ralat dan langkah keselamatan.

Menyambung Pautan

Jika anda mendapati siri ini membantu, sila pertimbangkan untuk memberi repositori bintang di GitHub atau berkongsi siaran pada rangkaian sosial kegemaran anda ?. Sokongan anda amat bermakna bagi saya!

Jika anda mahukan kandungan yang lebih berguna seperti ini, sila ikuti saya:

LinkedIn
GitHub

Kod Sumber

Atas ialah kandungan terperinci Kursus ranap PHP: Penukar Mata Wang Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php JavaScript sql mysql json jquery css ajax bootstrap html Array if for select format include Directory Error pdo using Interface JS dom this display background input github database

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Cara Muat Naik Fail Dengan JavaScript Vanila dan Tambah Animasi MemuatkanArtikel seterusnya：Cara Muat Naik Fail Dengan JavaScript Vanila dan Tambah Animasi Memuatkan

Artikel berkaitan

Lihat lagi