Heim > Artikel > Backend-Entwicklung > PHP-Crashkurs: Einfacher Währungsumrechner

PHP-Crashkurs: Einfacher Währungsumrechner

WBOYOriginal: 2024-08-05 19:16:53888Durchsuche

PHP crash course: Simple Currency Converter

Ein PHP-basiertes Währungsumrechner-Tool, mit dem Benutzer Währungen mithilfe von Echtzeit-Wechselkursen umrechnen können, die von einer externen API abgerufen werden. Das Tool ist mit PHP, HTML, jQuery, AJAX, JSON, Bootstrap, CSS und MySQL erstellt. Die Anwendung ist so konzipiert, dass sie eine genaue Währungsumrechnung ermöglicht und Ergebnisse in einer benutzerfreundlichen Oberfläche anzeigt.

Themen: PHP, MySQL, Blog, Ajax, Bootstrap, JQuery, CSS, Währungsumrechnung, externe API-Integration, API-Integration

Schritt-für-Schritt-Lösung

1. Verzeichnisstruktur

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. Datenbankschema

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. Konfigurationsdatei

Konfigurationseinstellungen (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. Konfigurieren Sie die Datenbankverbindung

Datenbankverbindung herstellen (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- und PHP-Struktur

HTML-Struktur (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 und AJAX

AJAX-Verarbeitung (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();
            }
         }
      });
   });
});

Erklärung:

Verwendet Bootstrap für das Styling und jQuery für AJAX-Anfragen.
$('#currency-form').on('submit', ...): Verarbeitet die Formularübermittlung und sendet eine AJAX-Anfrage an src/convert.php.
$.ajax({...}): Sendet Daten an den Server und verarbeitet die Antwort.

7. Backend-PHP-Skripte

Wechselkurse abrufen (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.']);
}
?>

Erklärung:

file_get_contents($apiUrl): Ruft Daten von der API ab.
json_decode($response, true): Dekodiert JSON-Daten in ein assoziatives Array.
EINFÜGEN IN Währungskurse ... BEI DUPLICATE KEY UPDATE: Fügt Währungskurse in die Datenbank ein oder aktualisiert sie.

Währungsumrechnungslogik (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.']);
}
?>

Erklärung:

$_POST['amount'], $_POST['from_currency'], $_POST['to_currency']: Ruft Parameter von der AJAX-Anfrage ab.
SELECT Wechselkurs FROM Währungskurse WHERE Währung = ?: Ruft Wechselkurse aus der Datenbank ab.
Rechnet den Betrag um und gibt eine JSON-Antwort zurück.

Währungsname und Code (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]);
?>

Erklärung:

Code, Name AUS Währungen auswählen: Ruft Währungsnamen und -code aus der Datenbank ab.
Gibt eine JSON-Antwort zurück.

6. CSS-Styling

CSS-Styling (assets/css/style.css)

body {
   padding-top: 50px;
}

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

Dokumentation und Kommentare

include/config.php: Enthält die Datenbankkonfiguration und stellt über PDO und API-Konfiguration eine Verbindung zu MySQL her.
index.php: Hauptseite mit HTML-Struktur, inklusive Bootstrap für das Styling.
assets/js/script.js: Verarbeitet AJAX-Anfragen zum Laden und Speichern von Beiträgen. Verwendet jQuery für die DOM-Manipulation und AJAX.
- Verwendet jQuery zum Tätigen von AJAX-Aufrufen.
- Zeigt Ergebnisse im #result div an.
assets/css/style.css: Grundlegendes Styling für die Anwendung.
- Legt die Hintergrundfarbe und Containerbreite fest.
src/fetch-rates.php: Ruft Beiträge aus der Datenbank ab und gibt sie als JSON zurück.
- Ruft Wechselkurse von der API ab.
- speichert das Konvertierungsergebnis in der Datenbank.
- Gibt das Ergebnis im JSON-Format zurück.
src/get-currencies.php: Verwaltet die Erstellung und Aktualisierung von Beiträgen basierend auf dem Vorhandensein einer ID.
- Gibt das Ergebnis im JSON-Format zurück.
src/convert.php: Verarbeitet Konvertierungsanfragen und interagiert mit der API.
- Validiert Eingabedaten.
- Ruft Wechselkurse von der API ab.
- Berechnet und speichert das Konvertierungsergebnis in der Datenbank.
- Gibt das Ergebnis im JSON-Format zurück.

Dieses Setup bietet ein einfaches, aber funktionales Währungsumrechnungstool mit detaillierten Kommentaren und Erklärungen. Stellen Sie sicher, dass Sie die API-URLs und Datenbankeinstellungen entsprechend Ihren Anforderungen anpassen. Für den realen Einsatz möchten Sie möglicherweise auch Fehlerbehandlungs- und Sicherheitsmaßnahmen hinzufügen.

Verbindungslinks

Wenn Sie diese Serie hilfreich fanden, denken Sie bitte darüber nach, dem Repository einen Stern auf GitHub zu geben oder den Beitrag in Ihren bevorzugten sozialen Netzwerken zu teilen? Ihre Unterstützung würde mir sehr viel bedeuten!

Wenn Sie weitere hilfreiche Inhalte wie diesen wünschen, folgen Sie mir gerne:

LinkedIn
GitHub

Quellcode

Das obige ist der detaillierte Inhalt vonPHP-Crashkurs: Einfacher Währungsumrechner. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So laden Sie Dateien mit Vanilla-JavaScript hoch und fügen eine Ladeanimation hinzuNächster Artikel：So laden Sie Dateien mit Vanilla-JavaScript hoch und fügen eine Ladeanimation hinzu

In Verbindung stehende Artikel

Mehr sehen