Kursus ranap PHP: Penukar Mata Wang Mudah

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)

4.Konfigurasikan Sambungan Pangkalan Data

Mewujudkan sambungan pangkalan data (termasuk/db.php)

 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)

       
  
 
Currency Converter
 
 
 Amount:  
 
 From:    
 
 To:    
 Convert 
 
 
     

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 += '' + currency.name + ''; }); $('#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)

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)

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)

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 memberirepositoribintang 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!