基於 PHP 的貨幣轉換器工具，讓使用者可以使用從外部 API 取得的即時匯率來轉換貨幣。該工具是使用 PHP、HTML、jQuery、AJAX、JSON、Bootstrap、CSS 和 MySQL 建構的。該應用程式旨在提供準確的貨幣換算並在用戶友好的介面中顯示結果。
主題： php、mysql、部落格、ajax、bootstrap、jquery、css、貨幣換算、外部 api 整合、api 整合
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
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');
設定設定（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');
?>
建立資料庫連線（include/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
}
?>
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>
AJAX 處理 (assets/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();
}
}
});
});
});
說明：
取得匯率 (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.']);
}
?>
說明：
貨幣轉換邏輯 (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.']);
}
?>
說明：
貨幣名稱和代碼 (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]);
?>
說明：
CSS 樣式 (assets/css/style.css)
body {
padding-top: 50px;
}
.container {
max-width: 600px;
margin: 0 auto;
}
此設定提供了一個基本但實用的貨幣轉換器工具，並帶有詳細的註釋和解釋。確保根據您的需求調整 API URL 和資料庫設定。對於實際使用，您可能還需要新增錯誤處理和安全措施。
連結連結
如果您發現本系列有幫助，請考慮在 GitHub 上給 存儲庫 一個星號或在您最喜歡的社交網絡上分享該帖子？ 。您的支持對我來說意義重大！
如果您想要更多類似的有用內容，請隨時關注我：
原始碼
以上是PHP 速成課程：簡單的貨幣轉換器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
