formations / php / le-crud-avec-php-mysqli
Le CRUD avec PHP & MySQLi
Le CRUD est un acronyme pour Create, Read, Update, Delete. Ces quatre opérations correspondent aux quatre actions de base que l'on peut effectuer sur des données dans une base de données. Nous allons dans ce tutoriel aborder les quatre opérations que nous pouvons faire sur des données dans une base de données avec Php, MySQLi et un peu d'HTML et Bootstrap.
------WebKitFormBoundarylwmB5Lm36bhyJENI Content-Disposition: form-data; name="create_tuto[translation_fr][shortDescription]" Le CRUD (Create, Read, Update, Delete) avec PHP et MySQLi
Mise en place du projet
Dans les tutoriels sur PhpMyAdmin et SQL nous avons mis en place une base de donnés nommée "base_demo" que nous allons utiliser dans ici. Cette base de données peut être téléchargée et installée dans un émulateur ci-dessous. Il est à noter que dans cette version de la base de données, il n'y a pas de clé étrangère, dans un projet réel, il serait préférable d'en mettre en place.
Nous avons également mis en place un dossier nommé "animalerie" dans le tutoriel sur la connexion en MySQLi ou PDO. Nous ne garderons que le fichier de connexion MySQLi qui sera renommé en "connexion.php".
Pour installer la base de données, suivez les étapes suivantes :
- Créer une nouvelle base de donnée nommée "base_demo" dans PhpMyAdmin si vous ne l'avez pas.
- Récupérer le fichier base_demo.sql dans le fichier zip à télécharger
- Importer le fichier dans PhpMyAdmin
Le CRUD
Read
Nous commençons par les requêtes de lecture (Read). Nous allons créer un fichier nommé "index.php" qui va matérialiser dans une page HTML la liste des animaux présents dans la table "animaux" de notre base de données.
Dans ce fichier nous mettons en place une base html 5 et nous ajoutons les CDN de Bootstrap. Lorsque cela est fait nous avons le code suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Une fois ce code mis en place dans le fichier, on crée un dossier nommé "css" à la racine du projet "animalerie" et on crée un fichier de feuille de style nommé "style.css". On adapte le code html du fichier php en ajoutant un "header", une balise "main", un titre "h1" et quelques classes bootstrap, ce qui nous donne le code suivant pour les deux fichiers.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-secondary">
<header class="py-3 px-5 bg-dark text-light">L'animalerie</header>
<main class="container bg-white py-4">
<h1>Liste des animaux</h1>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
style.css
h1{
font-size: 1.4rem;
}
Maintenant que nous avons notre base html, nous allons mettre en place un tableau simple de deux colonnes, une avec le nom de l'animal et une avec son type, ou plus exactement le nom de son type d'animal.
Pour cela on ajoute après la balise h1 dans le code de la page "index.php" un tableau Bootstrap, il nous restera ensuite à faire une requête et récupérer les animaux de la base de données afin de matérialiser les lignes du tableau.
Ci dessous le code html du tableau.
<table class="table table-striped table-responsive">
<thead>
<tr>
<td>Nom</td>
<td>Type</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
Pour mettre en place dynamiquement les lignes du tableau d'après les données se trouvant dans la base de données, on ouvre une zone de script php dans la balise tbody dans lequel on fait appel au fichier de connexion, à la suite de quoi on fait une requête et ensuite on boucle sur le résultat de la requête pour matérialiser les lignes du tableau.
<?php
// On se connecte à la base de données en faisant un "require_once" du fichier "connection.php"
require_once("connexion.php");
// On prépare la requête SQL qui va nous permettre de récupérer les animaux joint à leur type
$sql = "SELECT * FROM animaux JOIN animal_type ON animaux.id_type_animal = animal_type.id_type_animal";
// On exécute la requête SQL
$result = mysqli_query($mysqli, $sql);
// On boucle sur le résultat de la requête SQL pour afficher chaque ligne de la table "animaux"
while ($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
echo "<td>" . $row["nom"] . "</td>";
echo "<td>" . $row["nom_type"] . "</td>";
echo "</tr>";
}
?>
Dans le code php ci-dessus, mysqli_query est la fonction (méthode) php qui exécute la requête. Cette méthode attend deux arguments, la connexion, dans notre cas la variable $mysqli déclarée dans le fichier "connexion.php" et la requête sql devant être exécutée, dans notre cas la variable $sql.
Ensuite avec une boucle while on passe en revue chaque ligne "remontée" de la base de données ($row dans la code) que l'on agence en tableau associatif avec la méthode php mysqli_fetch_assoc.
Voila le résultat affiché dans un navigateur, notre tableau html est bien peuplé des lignes en provenance de la base de données.
Nous aurions pu prendre en charge la notion de la suppression logique dans la requête en utilisant une clause WHERE sur la valeur de la colonne "is_deleted" de la table des animaux comme illustré ci-après :
$sql = "SELECT * FROM animaux JOIN animal_type ON animaux.id_type_animal = animal_type.id_type_animal WHERE animaux.is_deleted=0";
Le code source de cette première étape du CRUD en PHP avec MySQLi.
Create
Pour mettre en place une requête d'ajout, nous n'allons pas faire appel aux formulaires qui font l'objet d'un autre tutoriel. Dans un premier nous allons nous contenter d'ajouter un bouton "ajouter" dans la page "index.php". Ce bouton va nous amener sur une page nommer "ajouter.php" dans laquelle s'effectura la requête d'ajout d'un animal.
Le code de la page index devient celui-ci avec l'ajout du lien après le titre h1:
<h1>Liste des animaux</h1>
<div class="text-end">
<a href="ajouter.php" class="btn btn-dark">Ajouter un animal</a>
</div>
Le résultat dans le navigateur est le suivant :
On met maintenant en place le fichier "ajouter.php" à la racine du projet et on y ajoute un script php qui va ajouter un animal dans la table des animaux et nous ramener ensuite avec un "header" vers la page d'index dans laquelle nous verrons l'animal ajouté présent dans le tableau.
<?php
// On se connecte à la base de données en faisant un "require_once" du fichier "connexion.php"
require_once("connexion.php");
// On prépare la requête SQL qui va nous permettre d'ajouter un animal
$sql = "INSERT INTO animaux (nom, id_type_animal) VALUES ('Oscar', 2)";
// On exécute la requête SQL
$result = mysqli_query($mysqli, $sql);
// On vérifie si la requête SQL s'est bien exécutée
if ($result === false) {
// On affiche l'erreur grâce à la fonction "mysqli_error()"
echo mysqli_error($mysqli);
} else {
// On redirige l'utilisateur vers la page "index.php"
header("Location: index.php");
}
?>
Après avoir cliqué sur le bouton "ajouter un animal" on peut voir le nouvel animal (Oscar) présent dans le tableau.
Le code source incluant le fichier d'ajout de "Oscar"
Update
Comme pour la création, pour la mise à jour nous n'allons pas encore utiliser un formulaire mais simplement un fichier nommé "update.php". Nous allons ajouter une colonne dans le tableau dans lequel nous allons pour chaque ligne du tableau ajouter un bouton avec une icône d'édition. Pour cela nous ajoutons le CDN de FontAwesome que nous récupérons ici. Fontawesome est une librairie de typo qui permet d'obtenir des icônes.
Nous ajoutons le CDN dans la balise head du fichier "index.php" comme le montre le code ci-dessous :
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
Ensuite on modifie la structure du tableau html dans le fichier "index.php".
<table class="table table-striped table-responsive">
<thead>
<tr>
<td>Nom</td>
<td>Type</td>
<td>Modifier</td>
</tr>
</thead>
<tbody>
<?php
// On se connecte à la base de données en faisant un "require_once" du fichier "connection.php"
require_once("connexion.php");
// On prépare la requête SQL qui va nous permettre de récupérer les animaux joint à leur type
$sql = "SELECT * FROM animaux JOIN animal_type ON animaux.id_type_animal = animal_type.id_type_animal";
// On exécute la requête SQL
$result = mysqli_query($mysqli, $sql);
// On boucle sur le résultat de la requête SQL pour afficher chaque ligne de la table "animal"
while ($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
echo "<td>" . $row["nom"] . "</td>";
echo "<td>" . $row["nom_type"] . "</td>";
echo '<td><a href="update.php" class="btn btn-success"><i class="fas fa-edit"></i></a></td>';
echo "</tr>";
}
?>
</tbody>
</table>
Cette capture illustre l'ajout d'un bouton contenant une icône de crayon pour chaque ligne de chaque animal présent dans la base de données.
Maintenant on met en place le fichier "update.php" en incluant le code suivant qui va changer le nom de l'animal dont l'id est 11.
<?php
// On se connecte à la base de données en faisant un "require_once" du fichier "connexion.php"
require_once("connexion.php");
// On prépare la requête SQL qui va mettre à jour le nom de l'animal dont l'id est 11
$sql = "UPDATE animaux SET nom = 'Speedy' WHERE id = 11";
// On exécute la requête SQL
$result = mysqli_query($mysqli, $sql);
// On vérifie si la requête SQL s'est bien exécutée
if ($result === false) {
// On affiche l'erreur grâce à la fonction "mysqli_error()"
echo mysqli_error($mysqli);
} else {
// On redirige l'utilisateur vers la page "index.php"
header("Location: index.php");
}
?>
Le code source de notre tutoriel à cette étape à télécharger.
Delete
Comme pour la mise à jour nous allons modifier la structure du tableau html pour ajouter un bouton avec une icône de corbeille. Ce bouton redirige vers un fichier "delete.php" qui va supprimer l'animal dont l'id est 11.
Ce code fonctionnera une seule fois car une fois la suppression effectuée, l'id 11 n'existant plus, une erreur se déclenchera.
Ci-dessous le code du tableau modifié.
<table class="table table-striped table-responsive">
<thead>
<tr>
<td>Nom</td>
<td>Type</td>
<td>Modifier</td>
<td>Supprimer</td>
</tr>
</thead>
<tbody>
<?php
// On se connecte à la base de données en faisant un "require_once" du fichier "connection.php"
require_once("connexion.php");
// On prépare la requête SQL qui va nous permettre de récupérer les animaux joint à leur type
$sql = "SELECT * FROM animaux JOIN animal_type ON animaux.id_type_animal = animal_type.id_type_animal";
// On exécute la requête SQL
$result = mysqli_query($mysqli, $sql);
// On boucle sur le résultat de la requête SQL pour afficher chaque ligne de la table "animal"
while ($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
echo "<td>" . $row["nom"] . "</td>";
echo "<td>" . $row["nom_type"] . "</td>";
echo '<td><a href="update.php" class="btn btn-success"><i class="fas fa-edit"></i></a></td>';
echo '<td><a href="delete.php" class="btn btn-danger"><i class="fas fa-trash"></i></a></td>';
echo "</tr>";
}
?>
</tbody>
</table>
On crée le fichier "delete.php" dans lequel on place le code qui suit. Il est à noter qu'en l'état tout les boutons de chaque ligne déclenche la suppression du même animal, celui dont l'id est 11.
<?php
// On se connecte à la base de données en faisant un "require_once" du fichier "connexion.php"
require_once("connexion.php");
// On prépare la requête SQL qui va supprimer l'animal dont l'id est 11
$sql = "DELETE FROM animaux WHERE id = 11";
// On exécute la requête SQL
$result = mysqli_query($mysqli, $sql);
// On vérifie si la requête SQL s'est bien exécutée
if ($result === false) {
// On affiche l'erreur grâce à la fonction "mysqli_error()"
echo mysqli_error($mysqli);
} else {
// On redirige l'utilisateur vers la page "index.php"
header("Location: index.php");
}
?>
Vous pouvez télécharger le fichier incluant toutes les étapes de ce tutoriel.
Voila, après ce tout d'horizon des requêtes du CRUD dans un contexte Php (Html/Css), nous pouvons améliorer certains points notamment pour ce qui est de l'ajout et de la modification en faisant appel à des formulaires html dont les données seront traitées par Php afin de créer des requêtes dynamiques. Si cela vous tente alors c'est par là.
Tutos du jour
Les fonctions en PHP
Les fonctions sont l'un des éléments essentiels de la programmation en PHP.
Voir le tuto
