Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
PHP

Créer CRUD en PHP, Ajax et MySQL en utilisant Bootstrap Modal

Un cours complet pour maîtriser Créer CRUD en PHP, Ajax et MySQL en utilisant Bootstrap Modal.

0 chapitres 0 QCM Accès gratuit
Commencer Retour aux cours

  1. Objectifs

    Créer CRUD en PHP et MySQL en utilisant Bootstrap Modal

  2. Contexte et étapes à suivre

    • Contexte

  3. Installer et configurer un environnement de développement PHP et MySQL :

    • Télécharger et installer un serveur web local tel que XAMPP, WAMP ou MAMP
    • Démarrer le serveur web et les services MySQL
    • Vérifier que PHP et MySQL sont correctement installés et configurés en exécutant un fichier PHP de test.

  4. Créer une base de données MySQL et une table pour stocker les données CRUD :

    • Ouvrir un outil de gestion de base de données tel que phpMyAdmin.
    • Créer une nouvelle base de données en spécifiant un nom et un jeu de caractères.
    • Créer une table en spécifiant les noms et les types de données des colonnes, ainsi que les clés primaires et éventuellement les clés étrangères.
    • Notre base de données sera la base MySql crée dans cette application 02

  5. Connexion à la base de données MySQL

    • 1- Créer un fichier config.php qui contient les informations de connexion à la base de données, comme l'hôte, le nom d'utilisateur, le mot de passe et le nom de la base de données. 
        define('DB_HOST', 'localhost');     // l'hôte de la base de données MySQL
define('DB_NAME', 'nom_de_la_base_de_donnees');    // le nom de la base de données MySQL
define('DB_USER', 'nom_d_utilisateur');    // le nom d'utilisateur MySQL
define('DB_PASSWORD', 'mot_de_passe');    // le mot de passe MySQL
define('DB_CHARSET', 'utf8');    // le jeu de caractères pour la base de données MySQL
    • 2- Dans un autre fichier connexion.php, inclure le fichier config.php et créer une instance PDO en utilisant ces informations.
        <?php
require_once('config.php');

try {
    $dsn = "mysql:host=".DB_HOST.";dbname=".DB_NAME.";
    $pdo = new PDO($dsn, $user, $password);
    $pdo = new PDO($dsn,charset=".DB_CHARSET, DB_USER, DB_PASSWORD);
    echo "Connexion réussie à la base de données $dbname.";
} catch(PDOException $e) {
    echo "La connexion a échoué : " . $e->getMessage();
}
?>

  6. Créer les boîtes de dialogue modale

    • Pour créer une boîte de dialogue modale (modal) en utilisant Bootstrap 5, vous pouvez suivre ces étapes:
      • Tout d'abord, ajoutez les fichiers CSS et JS de Bootstrap 5 à votre projet. Vous pouvez le faire en ajoutant les liens suivants à la section head de votre fichier HTML:
        • <head>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</head>
      • Ajoutez un bouton qui déclenchera la boîte de dialogue modale. Par exemple:
        • <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Ouvrir la boîte de dialogue modale
</button>
      • Créez la boîte de dialogue modale en utilisant la balise div suivante:
        • <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Titre de la boîte de dialogue modale</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          Contenu de la boîte de dialogue modale.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
          <button type="button" class="btn btn-primary">Enregistrer les modifications</button>
        </div>
      </div>
    </div>
  </div>
      • Enfin, ajoutez les attributs data-bs-toggle="modal" et data-bs-target="#exampleModal" au bouton que vous avez créé à l'étape 2 pour déclencher la boîte de dialogue modale.

  7. Créer les fichiers PHP pour gérer les opérations CRUD

    • Le contenu idéal du dossier des opérations CRUD créées précédemment devrait inclure les fichiers suivants :
      • Le fichier "index.php"
        • Le fichier "index.php" sera responsable de récupérer les données CRUD à partir de la base de données MySQL en utilisant des requêtes SQL, et de les afficher dans une table HTML.
        • Si les données qui seront affichées sont très volumineuses, le développeur peut également inclure une fonctionnalité de pagination pour limiter le nombre de données affichées sur une seule page.
        • C'est le fichier qui contient la table HTML qui sert à afficher les données CRUD ainsi que la pagination, la zone de recherche et le bouton d'ajout.
        • C'est la page principale de l'application qui permet aux utilisateurs de visualiser et d'interagir avec les données CRUD.
        • En outre, dans cette page, il est courant d'inclure un formulaire de recherche permettant de filtrer les données en fonction de certains critères, et un bouton "Ajouter" qui ouvre un Bootstrap Modal pour permettre aux utilisateurs de créer de nouvelles entrées dans la base de données CRUD.
          • Exemple

          Créer CRUD en PHP et MySQL en utilisant Bootstrap Modal

      • Un fichier "create.php" pour créer de nouvelles entrées dans la base de données CRUD.
      • Un fichier "read.php" pour afficher les entrées de la base de données CRUD dans un tableau HTML.
      • Un fichier "update.php" pour mettre à jour les entrées existantes de la base de données CRUD.
      • Un fichier "delete.php" pour supprimer des entrées de la base de données CRUD.