コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > バックエンド開発 > PHPチュートリアル > PHP 短期集中コース: シンプルな通貨コンバーター

PHP 短期集中コース: シンプルな通貨コンバーター

WBOY
リリース： 2024-08-05 19:16:53
オリジナル
910 人が閲覧しました

PHP crash course: Simple Currency Converter

ユーザーが外部 API から取得したリアルタイムの為替レートを使用して通貨を換算できるようにする PHP ベースの通貨換算ツール。このツールは、PHP、HTML、jQuery、AJAX、JSON、ブートストラップ、CSS、および MySQL で構築されています。このアプリケーションは、正確な通貨換算を提供し、ユーザーフレンドリーなインターフェイスで結果を表示するように設計されています。

トピック: php、mysql、ブログ、ajax、ブートストラップ、jquery、css、通貨変換、外部 API 統合、API 統合

段階的な解決策

1. ディレクトリ構造 

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.データベーススキーマ

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.設定ファイル

構成設定 (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. データベース接続を構成します

データベース接続の確立 (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
}
?>
ログイン後にコピー

5. HTML と PHP の構造

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 と AJAX

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();
            }
         }
      });
   });
});
ログイン後にコピー

説明:

  • スタイル設定には Bootstrap を使用し、AJAX リクエストには jQuery を使用します。
  • $('#currency-form').on('submit', ...): フォームの送信を処理し、AJAX リクエストを src/convert.php に送信します。
  • $.ajax({...}): データをサーバーに送信し、応答を処理します。

7. バックエンド PHP スクリプト

為替レートの取得 (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.']);
}
?>
ログイン後にコピー

説明:

  • file_get_contents($apiUrl): API からデータを取得します。
  • json_decode($response, true): JSON データを連想配列にデコードします。
  • INSERT INTO current_rates ... ON DUPLICATE KEY UPDATE: データベースに通貨レートを挿入または更新します。

通貨変換ロジック (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.']);
}
?>
ログイン後にコピー

説明:

  • $_POST['amount']、$_POST['from_currency']、$_POST['to_currency']: AJAX リクエストからパラメータを取得します。
  • SELECT 為替レート FROM 通貨レート WHERE 通貨 = ?: データベースから為替レートを取得します。
  • 金額を変換して JSON レスポンスを返します。

通貨名と通貨コード (src/get-currency.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]);
?>
ログイン後にコピー

説明:

  • SELECT コード、名前 FROM 通貨: データベースから通貨名とコードを取得します。
  • JSON レスポンスを返します。

6. CSS スタイル

CSS スタイル (assets/css/style.css)

body {
   padding-top: 50px;
}

.container {
   max-width: 600px;
   margin: 0 auto;
}
ログイン後にコピー

ドキュメントとコメント

  • include/config.php: データベース設定が含まれており、PDO と API configur を使用して MySQL に接続します。
  • index.php: HTML 構造を備えたメイン ページ。スタイリング用のブートストラップが含まれています。
  • assets/js/script.js: 投稿の読み込みと保存のための AJAX リクエストを処理します。 DOM 操作と AJAX には jQuery を使用します。
    • AJAX 呼び出しを行うために jQuery を使用します。
    • #result div に結果を表示します。
  • assets/css/style.css: アプリケーションの基本的なスタイル。
    • 背景色とコンテナの幅を設定します。
  • src/fetch-rates.php: データベースから投稿を取得し、JSON として返します。
    • API から為替レートを取得します。
    • 変換結果をデータベースに保存します。
    • 結果を JSON 形式で返します。
  • src/get-currency.php: ID の存在に基づいて投稿の作成と更新を処理します。
    • 結果を JSON 形式で返します。
  • src/convert.php: 変換リクエストを処理し、API と対話します。
    • 入力データを検証します。
    • API から為替レートを取得します。
    • 変換結果を計算してデータベースに保存します。
    • 結果を JSON 形式で返します。

このセットアップでは、基本的でありながら機能的な通貨換算ツールと詳細なコメントと説明が提供されます。必要に応じて API URL とデータベース設定を調整してください。実際に使用する場合は、エラー処理やセキュリティ対策を追加することもできます。

リンクを接続

このシリーズが役立つと思われた場合は、GitHub で リポジトリ にスターを付けるか、お気に入りのソーシャル ネットワークで投稿を共有することを検討してください。あなたのサポートは私にとって大きな意味を持ちます!

このような役立つコンテンツがさらに必要な場合は、お気軽にフォローしてください:

  • LinkedIn
  • GitHub

ソースコード

以上がPHP 短期集中コース: シンプルな通貨コンバーターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：dev.to
前の記事：Vanilla JavaScript でファイルをアップロードし、読み込みアニメーションを追加する方法 次の記事：部分配列を反転して 2 つの配列を等しくする
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2079
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2240
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1885
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1766
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1803
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート