Maison >développement back-end >tutoriel php >Cours accéléré PHP : Convertisseur de devises simple

Cours accéléré PHP : Convertisseur de devises simple

WBOYoriginal: 2024-08-05 19:16:53913parcourir

PHP crash course: Simple Currency Converter

Un outil de conversion de devises basé sur PHP qui permet aux utilisateurs de convertir des devises en utilisant des taux de change en temps réel récupérés à partir d'une API externe. L'outil est construit avec PHP, HTML, jQuery, AJAX, JSON, Bootstrap, CSS et MySQL. L'application est conçue pour fournir une conversion de devise précise et afficher les résultats dans une interface conviviale.

Sujets : php, mysql, blog, ajax, bootstrap, jquery, css, conversion de devises, intégration d'API externe, intégration d'API

Solution étape par étape

1. Structure des répertoires

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. Schéma de base de données

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. Fichier de configuration

Paramètres de configuration (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. Configurer la connexion à la base de données

Établissement de la connexion à la base de données (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. Structure HTML et PHP

Structure 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 et AJAX

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

Explication :

Utilise Bootstrap pour le style et jQuery pour les requêtes AJAX.
$('#currency-form').on('submit', ...) : gère la soumission du formulaire et envoie une requête AJAX à src/convert.php.
$.ajax({...}) : envoie les données au serveur et traite la réponse.

7. Scripts PHP back-end

Récupérer les taux de change (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.']);
}
?>

Explication :

file_get_contents($apiUrl) : récupère les données de l'API.
json_decode ($response, true) : décode les données JSON dans un tableau associatif.
INSERT INTO devise_rates ... ON DUPLICATE KEY UPDATE : insère ou met à jour les taux de change dans la base de données.

Logique de conversion de devises (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.']);
}
?>

Explication :

$_POST['amount'], $_POST['from_currency'], $_POST['to_currency'] : obtient les paramètres de la requête AJAX.
SELECT change_rate FROM monnaie_rates OÙ monnaie = ? : récupère les taux de change de la base de données.
Convertit le montant et renvoie la réponse JSON.

Nom et code de la devise (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]);
?>

Explication :

SELECT code, name FROM devises : récupère le nom et le code de la devise dans la base de données.
Renvoie la réponse JSON.

6. Style CSS

Style CSS (assets/css/style.css)

body {
   padding-top: 50px;
}

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

Documentation et commentaires

include/config.php : Contient la configuration de la base de données et se connecte à MySQL à l'aide de la configuration PDO et API.
index.php : Page principale avec structure HTML, inclut Bootstrap pour le style.
assets/js/script.js : Gère les requêtes AJAX pour le chargement et l'enregistrement des publications. Utilise jQuery pour la manipulation DOM et AJAX.
- Utilise jQuery pour passer des appels AJAX.
- Affiche les résultats dans la division #result.
assets/css/style.css : Style de base pour l'application.
- Définit la couleur d'arrière-plan et la largeur du conteneur.
src/fetch-rates.php : Récupère les publications de la base de données et les renvoie au format JSON.
- Récupère les taux de change à partir de l'API.
- stocke le résultat de la conversion dans la base de données.
- Renvoie le résultat au format JSON.
src/get-currencies.php : Gère la création et la mise à jour des publications en fonction de la présence d'un identifiant.
- Renvoie le résultat au format JSON.
src/convert.php : Traite les demandes de conversion et interagit avec l'API.
- Valide les données d'entrée.
- Récupère les taux de change à partir de l'API.
- Calcule et stocke le résultat de la conversion dans la base de données.
- Renvoie le résultat au format JSON.

Cette configuration fournit un outil de conversion de devises basique mais fonctionnel avec des commentaires et des explications détaillés. Assurez-vous d'ajuster les URL de l'API et les paramètres de la base de données en fonction de vos besoins. Pour une utilisation réelle, vous souhaiterez peut-être également ajouter une gestion des erreurs et des mesures de sécurité.

Liens de connexion

Si vous avez trouvé cette série utile, pensez à donner une étoile au référentiel sur GitHub ou à partager la publication sur vos réseaux sociaux préférés ?. Votre soutien signifierait beaucoup pour moi !

Si vous souhaitez du contenu plus utile comme celui-ci, n'hésitez pas à me suivre :

LinkedIn
GitHub

Code source

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment télécharger des fichiers avec Vanilla JavaScript et ajouter une animation de chargementArticle suivant：Comment télécharger des fichiers avec Vanilla JavaScript et ajouter une animation de chargement

Articles Liés

Voir plus