Créer une application PHP 8 : Guide complet et pratique

Cet article fait partie du guide Tutoriel Complet pour Apprendre PHP 8 à Travers des Projets Pratiques, partie 20 sur 28.

Lorsque vous cherchez à créer une application PHP 8, la gestion des données, notamment l’ajout, la modification ou la suppression de catégories, peut rapidement devenir un casse-tête complexe et inefficace.

Sans une approche structurée et optimisée, vous risquez des erreurs fréquentes, des doublons et une perte de temps considérable, compromettant ainsi la performance et la fiabilité de votre application.

Dans cet article, découvrez comment utiliser la classe PDO en PHP 8 pour créer une application PHP 8 robuste, en maîtrisant les opérations CRUD (Create, Read, Update, Delete) tout en garantissant la sécurité et l’efficacité de votre gestion de base de données.

Table de matière

Comprendre l'application à faire avec PHP 8

Maintenant, nous vous présentons notre projet, une petite plateforme administrative que vous pouvez utiliser pour gérer les catégories. Vous pouvez facilement ajouter, modifier ou supprimer des éléments selon vos besoins. Cette application a été conçue pour simplifier et automatiser votre gestion des catégories, avec une interface conviviale et intuitive. Grâce à cette plateforme, vous pouvez organiser et administrer vos catégories de manière plus efficace et productive. De plus, vous bénéficiez de fonctionnalités de recherche avancée et de filtrage pour accéder rapidement aux informations pertinentes.

Application PHP 8 :Créer la Base de Données

Pour créer une base de données nommée ‘alphorm’, vous devez d’abord créer une table appelée ‘categorie’. Cette table doit inclure les colonnes ‘catID’ et ‘categorie’. Assurez-vous que ‘catID‘ est configurée comme clé primaire pour identifier de manière unique chaque enregistrement.

Et voici le tableau correspondant :

Base de données	Table	Colonnes
alphorm	categorie	catID (clé primaire), categorie

Explication supplémentaire :

Base de données : alphorm

Vous allez créer une nouvelle base de données avec le nom ‘alphorm’.

Table : categorie

Dans cette base de données, vous créerez une table nommée ‘categorie’.

Colonnes : catID (clé primaire), categorie

catID : Cette colonne sert de clé primaire, garantissant que chaque enregistrement dans la table est unique.

categorie : Cette colonne stocke les noms des catégories.

Voici le résultat d’affichage de table après la création dans phpMyAdmin

Application PHP 8 :Déployer les Fondations du Site Web

Configurer l'Environnement du Site Web

Pour mettre en place les bases de votre site web, créez un dossier nommé alphorm dans htdocs, puis ajoutez un fichier index.htm dans ce dossier. Ensuite, créez un sous-dossier css dans alphorm et ajoutez-y un fichier style.css. Enfin, créez un sous-dossier fontawesome dans alphorm, un sous-dossier css dans fontawesome, et ajoutez-y un fichier all.min.css.

Tableau récapitulatif

Action	Emplacement	Fichier/Dossier
Créer un dossier	htdocs	alphorm
Ajouter un fichier	alphorm	index.htm
Créer un sous-dossier	alphorm	css
Ajouter un fichier	alphorm/css	style.css
Créer un sous-dossier	alphorm	fontawesome
Créer un sous-dossier	alphorm/fontawesome	css
Ajouter un fichier	alphorm/fontawesome/css	all.min.css

Intégrer le Code HTML du Site Web

Dans cette section, vous allez intégrer le code HTML du site web à partir du fichier index.html. Veuillez insérer le code suivant dans ce fichier

Voici le code html de site web

				
					<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>


<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-725e4bcb-be91-40ab-9b04-0f346f7a6a34: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-725e4bcb-be91-40ab-9b04-0f346f7a6a34: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"725e4bcb-be91-40ab-9b04-0f346f7a6a34","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<nav>
<div class="logo">
<i class="fa-duotone fa-solid fa-user-tie"></i>
</div>
<ul>
<li>
<i class="fab fa-autoprefixer"></i>
<span>admin</span>
</li>
<li>
<i class="fas fa-home"></i>
<a href="index.html" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">accueil</a>
</li>
</ul>
<p></p>
<ul>
<li>
<i class="fab fa-cuttlefish"></i>
<span>catégories</span>
</li>
<li>
<i class="fas fa-plus-circle"></i>
<a href="categorie-add.php" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">ajouter une catégorie</a>
</li>
<li>
<i class="fas fa-edit"></i>
<a href="categorie-update.php" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">modifier une catégorie</a>
</li>
<li>
<i class="fas fa-minus-circle"></i>
<a href="categorie-delete.php" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">détruire une catégorie</a>
</li>
</ul>
</nav>
<h1>admin</h1>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
</html>

Comment appliquer le style au site ?

Appliquer le Code CSS pour le Site Web

Maintenant, vous allez passer à la mise en place du style du site web. Vous devrez rédiger le code CSS et l’insérer dans le fichier style.css

Voici le code css de notre site web

				
					@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body{
font-family:'Roboto',sans-serif;
background-color: #bdc3c7;
margin:0;
}
nav{
background-color: #9b59b6;
width: 250px;
height: 100vh;
}
nav .logo{
padding: 25px 0;
background-color: #8e44ad;
}
nav ul {
list-style : none;
margin:0;
padding:0;
}
nav li {
padding: 15px;
}
nav li i {
font-size: 25px;
}
nav li span{
margin-left: 20px;
font-size: 21px;
font-weight: 700;
text-transform: capitalize;
}
nav li a {
text-decoration: none;
color:#bba0c5;
margin-left: 20px;
text-transform: capitalize;
font-size: 16px;
}

Après avoir mis en place le style, vous obtiendrez le résultat suivant :

Comment rendre le site web dynamique ?

Optimiser la Mise en Page du Site Web

Dans cette section, vous allez vous concentrer sur l’amélioration de l’aspect visuel et de la mise en page du site web. Vous allez explorer des techniques pour optimiser l’apparence, la lisibilité et l’interaction du site afin de garantir une meilleure expérience utilisateur

Nous allons mettre à jour le CSS pour améliorer le style des sorties et du menu afin d’optimiser l’interactivité du site

				
					@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body{
font-family:'Roboto',sans-serif;
background-color: #bdc3c7;
margin:0;
}
nav{
background-color: #9b59b6;
width: 60px;
height: 100vh;
position: fixed;
overflow: hidden;
z-index: 100;
transform: 0.3s;
}
nav:hover{
width:250px;
}
nav .logo{
padding: 25px 0;
background-color: #8e44ad;
margin-bottom: 30px;
}
nav .logo i{
font-size: 32px;
color:#bba0c5;
margin-left: 10px;
}
nav ul {
list-style : none;
margin:0;
padding:0;
width: 250px;
}
nav li {
padding: 15px;
transition: 0.3s;
}
nav li:hover{
background-color: #871eb4;
}
nav li.off:hover{
background-color: #9b59b6;
}
nav li i {
font-size: 25px;
}
nav li span{
margin-left: 20px;
font-size: 21px;
font-weight: 700;
text-transform: capitalize;
}
nav li a {
text-decoration: none;
color:#bba0c5;
margin-left: 20px;
text-transform: capitalize;
font-size: 16px;
}
nav p{
border-bottom: 2px dashed #8e44ad;
}
main{
position:absolute;
left:70px;
top:10;
right: 10px;
}
main h1{
margin:0;
padding:0;
text-align: center;
color: #8e44ad;
font-size: 30px;    text-transform: uppercase;
}

Ensuit en vas ajouter pour le fichier index.html la calasse off pour les pour les Li des span comme le suivante

				
					<li class="off">
<i class="fab fa-cuttlefish"></i>
<span>catégories</span>
</li>

Voici le résultat amélioré de notre site web

Formation PHP 8 : Gestion des Bases de Données avec PhpMyAdmin & MySQL

Application PHP 8 : Ajouter un Formulaire d'Insertion

Dans cette section, vous allez mettre en place le formulaire d’insertion en utilisant le fichier categorie-add.php. Ce formulaire permettra d’ajouter de nouvelles catégories au site.

Voici le code de fichier categorie-add.php

				
					<!DOCTYPE html>
<html lang="fr">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin</title>



<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-725e4bcb-be91-40ab-9b04-0f346f7a6a34: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-725e4bcb-be91-40ab-9b04-0f346f7a6a34: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"725e4bcb-be91-40ab-9b04-0f346f7a6a34","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<nav>
<div class="logo">
<i class="fa-duotone fa-solid fa-user-tie"></i>
</div>
<ul>
<li class="off">
<i class="fab fa-autoprefixer"></i>
<span>admin</span>
</li>
<li>
<i class="fas fa-home"></i>
<a href="index.html" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">accueil</a>
</li>
</ul>
<p></p>
<ul>
<li class="off">
<i class="fab fa-cuttlefish"></i>
<span>catégories</span>
</li>
<li>
<i class="fas fa-plus-circle"></i>
<a href="categorie-add.php" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">ajouter une catégorie</a>
</li>
<li>
<i class="fas fa-edit"></i>
<a href="categorie-update.php" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">modifier une catégorie</a>
</li>
<li>
<i class="fas fa-minus-circle"></i>
<a href="categorie-delete.php" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">détruire une catégorie</a>
</li>
</ul>
</nav>
<main>
<h1>ajouter une catégorie</h1>
<form action="" method="post">
<input type="text" name="categorie" placeholder="catégorie"/>
<input type="submit" value="ajouter"/>
</form>
</main>
</body>
</html>

Puis en mettre a jours à le fichier style.css en ajoutant le code suivant

				
					main form input[type="text"]{
background: none;
border: none;
border-bottom: 1px solid #8e44ad;
font-size: 21px;
color: #333;
}
::placeholder{
color:#999;
text-transform: capitalize;
letter-spacing:1px;
}
main form input[type="submit"]{
border: none;
border-radius: 50px;
padding: 20px;
background-color: #bba0c5;
color:#8e44ad;
font-size: 21px;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition:0.5s;
}
main form input[type="submit"]:hover{
background-color: #8e44ad;
color: #bba0c5;
}

Après ces modifications, lorsque vous cliquez sur ‘Ajouter Une Catégories ‘, l’interface suivante s’affichera

Application PHP 8 : Créer une Instance PDO pour la Connexion à la Base de Données

Dans cette section, vous allez créer une instance de la classe PDO pour établir une connexion à la base de données. Cette étape est essentielle pour permettre la gestion des opérations de base de données dans votre application

Pour créer le code de PDO, ajoutez un fichier cnx.php qui contiendra les paramètres de connexion à la base de données ainsi que l’instance de la classe PDO

Voici le code pour le fichier cnx.php :

				
					<?php
$dsn='mysql:host=localhost;dbname=alphorm;charset=utf8';
$user='root';
$pass='';
try{
$cnx=new PDO($dsn,$user,$pass);
}catch(PDOException $e){
echo 'Une erreur est survenue !';
}

Explication de code :

Définition des variables de connexion

				
					$dsn='mysql:host=localhost;dbname=alphorm;charset=utf8';
$user='root';
$pass='';

$dsn (Data Source Name) : C’est une chaîne de caractères qui contient les informations nécessaires pour établir une connexion à la base de données. Ici, il indique que vous vous connectez à une base de données MySQL qui se trouve sur le serveur local (localhost), avec le nom de la base de données alphorm et l’encodage des caractères UTF-8.
$user : C’est le nom d’utilisateur utilisé pour se connecter à la base de données. Ici, il est défini comme ‘root’.
$pass : C’est le mot de passe associé à l’utilisateur pour se connecter à la base de données. Dans ce cas, il est vide ( »).

Création de l’instance PDO :

				
					try{
$cnx=new PDO($dsn,$user,$pass);

new PDO($dsn, $user, $pass) : Cette ligne tente de créer une nouvelle instance de la classe PDO pour établir une connexio
n à la base de données en utilisant les paramètres définis ($dsn, $user, $pass).

Gestion des erreurs :

				
					}catch(PDOException $e){
echo 'Une erreur est survenue !';
}

catch (PDOException $e) : Si une erreur se produit lors de la tentative de connexion, une exception de type PDOException est lancée.
echo ‘Une erreur est survenue !’; : Ce message est affiché si une exception est capturée. Il informe l’utilisateur qu’une erreur a eu lieu, mais ne donne pas de détails spécifiques sur la nature de l’erreur.

Après en va ajouter ce code en tête de fichier categorie-add.php

				
					<?php
require_once('cnx.php');
?>

Application PHP 8 : Créer une Requête d'Insertion Sécurisée

Dans cette section, vous allez mettre en place la requête d’insertion pour ajouter de nouvelles catégories dans la base de données. Vous apprendrez à préparer et à exécuter une requête SQL en utilisant PDO pour sécuriser et gérer l’insertion des données

Nous allons mettre à jour le code du fichier categorie-add.php en y ajoutant le code nécessaire suivant

				
					<?php
if(isset($_POST['ajouter'])){
$sql = 'INSERT INTO categorie (categorie) VALUE(:categorie)';
$req=$cnx->prepare($sql);
$retour=$req->execute(array(
':categorie'=>$_POST['categorie']
));
if($retour){
echo '<div class="success">La nouvelle catégorie a bien été ajoutée</div>';
}else{
echo '<div class="error">Une erreur est survenue !</div>';
}
}
?>
<form action="" method="post">
<input type="text" name="categorie" placeholder="catégorie"/>
<input type="submit" name="ajouter" value="ajouter"/>
</form>
</main>

Explication du Code

Traitement du Formulaire :

Objectif : Lorsqu’un utilisateur soumet le formulaire en cliquant sur le bouton « ajouter », le script vérifie si le formulaire a été soumis en utilisant isset($_POST['ajouter'])

Détail : Cette vérification garantit que le script exécute le code d’insertion uniquement lorsque le formulaire a été envoyé.

Préparation de la Requête SQL :

Objectif : Préparer une requête SQL pour insérer une nouvelle catégorie dans la base de données.

Détail : La requête SQL INSERT INTO categorie (categorie) VALUES (:categorie) utilise un paramètre nommé :categorie pour sécuriser l’insertion des données. Cela prévient les injections SQL.

Exécution de la Requête SQL :

Exécuter la requête préparée avec les valeurs fournies par l’utilisateur.

Détail : Les valeurs des champs du formulaire sont passées à la requête via un tableau associatif. Le code

execute(array(':categorie' => $_POST['categorie'])) lie la valeur de $_POST['categorie'] au paramètre :categorie dans la requête SQL.

Affichage des Messages :

Objectif : Informer l’utilisateur du résultat de l’opération d’insertion.

Détail : Si l’insertion est réussie, un message de succès est affiché. Sinon, un message d’erreur informe l’utilisateur qu’une erreur est survenue.

Formulaire HTML :

Objectif : Permettre à l’utilisateur d’entrer les données à insérer dans la base de données.

Détail : Le formulaire contient un champ texte pour saisir le nom de la catégorie et un bouton de soumission. Lorsque le formulaire est soumis, il déclenche le traitement côté serveur décrit ci-dessus.

En suite en va appliquer ce style suivant

				
					.success .error{
width: 75%;
margin: auto;
background-color: #27ae60;
padding: 25px;
box-sizing: border-box;
font-size: 20px;
text-align: center;
border-radius: 10px;
letter-spacing: 1px;
margin-top: 30px;
}
.error{
background-color: #e74c3c;
}

Après ces modifications, lorsque vous testez en ajoutant une nouvelle catégorie appelée ‘toto’ et que l’enregistrement est réussi, le message de succès suivant s’affichera à l’utilisateur, comme illustré dans la figure.

Comment vérifier qu’il n’y a pas de doublons lors de l’ajout de nouvelles catégories dans la base de données ?

Application PHP 8 : Vérifier et Éviter les Doublons

Dans cette section, vous allez apprendre à mettre en place une vérification pour éviter l’insertion de doublons lors de l’ajout de nouvelles catégories. Vous allez implémenter une méthode pour vérifier si une catégorie existe déjà avant de procéder à l’insertion dans la base de données

Dans le fichier categorie-add.php, vérifiez d’abord si la catégorie existe déjà dans la base de données en ajoutant le code suivant :

				
					//Controle si la catégorie existe
$sql='SELECT categorie FROM categorie WHERE categorie = :categorie';
$req = $cnx->prepare($sql);
$req->execute(array(
':categorie'=>$_POST['categorie']
));
$data = $req->fetch(PDO::FETCH_ASSOC);
if(!empty($data['categorie'])){
echo '<div class="error">La catégorie '.$_POST['categorie'].' est déjà présente</div>';}
Voici le code complet
<?php
if(isset($_POST['ajouter'])){
//Controle si la catégorie existe
$sql='SELECT categorie FROM categorie WHERE categorie = :categorie';
$req = $cnx->prepare($sql);
$req->execute(array(
':categorie'=>$_POST['categorie']
));
$data = $req->fetch(PDO::FETCH_ASSOC);
if(!empty($data['categorie'])){
echo '<div class="error">La catégorie '.$_POST['categorie'].' est déjà présente</div>';
}else{
//Insertion dans la table categorie
$sql = 'INSERT INTO categorie (categorie) VALUE(:categorie)';
$req=$cnx->prepare($sql);
$retour=$req->execute(array(
':categorie'=>$_POST['categorie']
));
if($retour){
echo '<div class="success">La nouvelle catégorie a bien été ajoutée</div>';
}else{
echo '<div class="error">Une erreur est survenue !</div>';
}
}
}

Vous allez tester le fonctionnement du script en ajoutant une nouvelle catégorie appelée ‘toto’. Mais avant cela, vous devez modifier la colonne correspondante dans la base de données pour la rendre unique, puis procéder à l’ajout.

Maintenant, vous allez essayer d’ajouter une nouvelle catégorie nommée ‘toto’, qui existe déjà dans la base de données.

Sur l’interface, un message d’erreur s’affiche, comme illustré dans cette figure

Application PHP8 :Valider l'Existence d'une catégorie

Vous devez vérifier qu’il existe bien une catégorie dans la base de données avant d’effectuer d’autres opérations

Dans le fichier, ajoutez ce code au script PHP avant le traitement pour vérifier si la catégorie existe

				
					if(isset($_POST['ajouter'])){
// controle si la catégorie n'est pas vide
if(empty($_POST['categorie'])){
echo '<div class="error"> Merci d\'entrer une catégorie</div>';
}

Vérification de la soumission du formulaire :

Le code commence par vérifier si le formulaire a été soumis en vérifiant la présence de $_POST['ajouter']

Contrôle du champ de catégorie :

Il vérifie si le champ categorie est vide en utilisant empty(). Si c’est le cas, un message d’erreur est affiché demandant à l’utilisateur de saisir une catégorie.

Voici le résultat d’affichage en cas d’erreur lorsque le champ est vide

Application PHP 8 : Développer le Fichier de Mise à Jour des Catégories

Maintenant, vous allez passer au code suivant : mettre en place le fichier categorie-update.php, dans lequel vous créerez un nouveau fichier nommé categorie-update.php

Voici le code de notre fichier

				
					<?php
require_once('cnx.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">



<title>Admin</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-725e4bcb-be91-40ab-9b04-0f346f7a6a34: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-725e4bcb-be91-40ab-9b04-0f346f7a6a34: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"725e4bcb-be91-40ab-9b04-0f346f7a6a34","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<nav>
<div class="logo">
<i class="fa-duotone fa-solid fa-user-tie"></i>
</div>
<ul>
<li class="off">
<i class="fab fa-autoprefixer"></i>
<span>admin</span>
</li>
<li>
<i class="fas fa-home"></i>
<a href="index.html" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">accueil</a>
</li>
</ul>
<p></p>
<ul>
<li class="off">
<i class="fab fa-cuttlefish"></i>
<span>catégories</span>
</li>
<li>
<i class="fas fa-plus-circle"></i>
<a href="categorie-add.php" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">ajouter une catégorie</a
</li>
<li>
<i class="fas fa-edit"></i>
<a href="categorie-update.php">modifier une catégorie</a>
</li>
<li>
<i class="fas fa-minus-circle"></i>
<a href="categorie-delete.php" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">détruire une catégorie</a>
</li>
</ul>
</nav>
<main>
<h1>modifier une catégorie</h1>
<form action="" method="post">
<select name="cat">
<?php
$sql='SELECT * FROM categorie ORDER BY categorie';
$req= $cnx->prepare($sql);
$req->execute();
while($datas=$req->fetch(PDO::FETCH_ASSOC)){
echo '<option value="'.$datas['catID'].'">'.$datas['categorie'].'</option>';
}
?>
</select>
<input type="submit" name="update" value="modifier">
</form>
</main>
</body>
</html>

Voici le résultat d’affichage du code, qui montre comment le script se comporte après avoir été exécuté.

PHP 8

Maîtrise Complète de PHP 8 : De l'Initiation à l'Expertise en Architecture MVC

Application PHP 8 : Afficher la Catégorie Sélectionnée pour Modification

Dans cette section, vous allez apprendre à afficher la catégorie à modifier. Vous mettrez en place le code nécessaire pour récupérer et afficher les détails de la catégorie sélectionnée afin que l’utilisateur puisse les modifier.

Dans le fichier categorie-update.php, vous allez ajouter le code suivant pour le script

				
					<?php // Si $_POST['update'] .Suite
}else{
?>
<form action="" method="post">
<select name="cat">
<?php
$sql='SELECT * FROM categorie ORDER BY categorie';
$req= $cnx->prepare($sql);
$req->execute();
while($datas=$req->fetch(PDO::FETCH_ASSOC)){
echo '<option value="'.$datas['catID'].'">'.$datas['categorie'].'</option>';
}
?>
</select>
<input type="submit" name="update" value="modifier">
</form>
<?php // Si $_POST['update'] .Fin
}
?>

Explication détaillée du code:

Préparation pour l’affichage du formulaire :

Le code commence par une vérification conditionnelle pour déterminer si le formulaire a été soumis avec le bouton update. Le code pour gérer cette condition devrait être ajouté plus tard.

Création du formulaire :

Un formulaire HTML est généré pour permettre à l’utilisateur de sélectionner une catégorie à modifier. Ce formulaire utilise la méthode POST pour envoyer les données.

Récupération des données des catégories :

Une requête est effectuée pour récupérer toutes les catégories disponibles dans la base de données, triées par nom. Les résultats de cette requête sont ensuite utilisés pour remplir les options du menu déroulant dans le formulaire.

Affichage des options de sélection :

Chaque catégorie récupérée est affichée comme une option dans le menu déroulant, permettant à l’utilisateur de choisir celle qu’il souhaite modifier.

Soumission du formulaire :

Un bouton de soumission est inclus dans le formulaire pour envoyer les données sélectionnées et déclencher l’action de modification.

Cette structure permet à l’utilisateur de choisir une catégorie à modifier en utilisant un menu déroulant alimenté par les données de la base de données.

Lorsque vous testez, commencez par choisir une catégorie parmi celles qui existent dans la liste

Après avoir fait votre choix, l’interface affichera les informations de la catégorie sélectionnée

Tester la Modification d'une Catégorie PHP 8

Dans cette section, vous allez tester le formulaire de modification de catégorie. Vous commencerez par vérifier si le champ de catégorie est vide et afficherez un message d’erreur si c’est le cas. Ensuite, vous vérifieriez si la catégorie que vous essayez d’ajouter existe déjà dans la base de données et informeriez l’utilisateur si c’est le cas

Dans le fichier categorie-update.php, vous allez modifier le code suivant pour le script

				
					<?php // Si $_POST['modifier']
if(isset($_POST['modifier'])){
// controle si la catégorie n'est pas vide
if(empty($_POST['categorie'])){
echo '<div class="error"> Merci d\'entrer une catégorie</div>';
}//Controle si la catégorie existe
$sql='SELECT categorie FROM categorie WHERE categorie = :categorie';
$req = $cnx->prepare($sql);
$req->execute(array(
':categorie'=>$_POST['categorie']
));
$data = $req->fetch(PDO::FETCH_ASSOC);
if(!empty($data['categorie'])){
echo '<div class="error">La catégorie '.$_POST['categorie'].' est déjà présente</div>';
}
}
?>
<form action="" method="post">
<p><a href="" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">&lt;&lt;retour</a></p>
<input type="text" name="categorie" value="<?= $data['categorie'];?>">
<input type="submit" name="update" value="modifier">
<input type="hidden" name="cat" value="<?=$_POST['cat']?>"/>
<input type="hidden" name="modifier"/>
</form>

Vérification de la soumission du formulaire :

Le code commence par vérifier si le formulaire a été soumis en détectant la présence de $_POST['modifier']

Contrôle de la catégorie vide :

Il vérifie ensuite si le champ de catégorie est vide en utilisant empty(). Si c’est le cas, un message d’erreur est affiché demandant à l’utilisateur de saisir une catégorie

Vérification de l’existence de la catégorie :

Le code exécute une requête SQL pour vérifier si la catégorie existe déjà dans la base de données. Il utilise une requête préparée avec un paramètre lié pour éviter les injections SQL.
Si la catégorie existe déjà, un message d’erreur est affiché, informant l’utilisateur que la catégorie est déjà présente.

Formulaire de modification :

Un formulaire HTML est fourni pour permettre à l’utilisateur de modifier les détails de la catégorie.
Le champ de texte pour la catégorie est pré-rempli avec la valeur actuelle de la catégorie.
Deux champs cachés sont inclus dans le formulaire :

cat : contenant l’identifiant de la catégorie à modifier.

modifier : un champ caché pour identifier la soumission du formulaire.

Un bouton de soumission permet à l’utilisateur de modifier la catégorie.

Lien de retour :

Un lien est inclus pour permettre à l’utilisateur de revenir à la page précédente.

Voici le résultat lorsque le champ de catégorie est vide.

Voici le résultat lorsque le champ de catégorie est existé .

Mettre à Jour une Catégorie dans la Base de Données

Dans cette section, vous allez apprendre à modifier une catégorie dans la table categorie. Vous mettrez en place le code nécessaire pour mettre à jour les informations de la catégorie sélectionnée dans la base de données

Voici le code modifier de script php en ajoutant ce code suivante

				
					//Modification dans la table categorie
$sql = 'UPDATE categorie
SET categorie = :categorie
WHERE catID = :catID';
$req=$cnx->prepare($sql);
$retour=$req->execute(array(
':categorie'=>$_POST['categorie'],
':catID'=>$_POST['cat']
));
if($retour){
echo '<div class="success">La catégorie a bien été modifier</div>';
$sql = 'SELECT categorie FROM categorie WHERE catID = :catID';
$req = $cnx->prepare($sql);
$req->execute(array(':catID'=>$_POST['cat']));
$data = $req->fetch(PDO::FETCH_ASSOC);
}else{
echo '<div class="error">Une erreur est survenue !</div>';
}

Voici le résultat d’affichage après avoir modifié la catégorie dans la table categorie

Application PHP 8 :Créer le Fichier de Suppression

Maintenant, vous allez passer à la section suivante : mettre en place le fichier categorie-delete.php. Vous créerez ce fichier pour gérer la suppression des catégories dans la base de données.

Voici le code de ce fichier

				
					<?php
require_once('cnx.php');
?><!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin</title>

<

<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-725e4bcb-be91-40ab-9b04-0f346f7a6a34: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-725e4bcb-be91-40ab-9b04-0f346f7a6a34: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"725e4bcb-be91-40ab-9b04-0f346f7a6a34","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<nav>
<div class="logo">
<i class="fa-duotone fa-solid fa-user-tie"></i>
</div>
<ul>
<li class="off">
<i class="fab fa-autoprefixer"></i>
<span>admin</span>
</li>
<li>
<i class="fas fa-home"></i>
<a href="index.html" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">accueil</a>
</li>
</ul>
<p></p>
<ul>
<li class="off">
<i class="fab fa-cuttlefish"></i>
<span>catégories</span>
</li>
<li>
<i class="fas fa-plus-circle"></i>
<a href="categorie-add.php" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">ajouter une catégorie</a>
</li>
<li>
<i class="fas fa-edit"></i>
<a href="categorie-update.php" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">modifier une catégorie</a>
</li>
<li>
<i class="fas fa-minus-circle"></i>
<a href="categorie-delete.php" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">détruire une catégorie</a>
</li>
</ul>
</nav>
<main>
<h1>Détruire une catégorie</h1>
<?php //Si $_POST['delete'] .Debut
if(isset($_POST['delete'])){
?>
<form action="" method="post">
<p><a href="" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">&lt;&lt;NE pas supprimer cette catégorie</a></p>
<input type="submit" value="je confirme"/>
</form>
<?php //Si $_POST['delete'] .Suite
}else{
?>
<form action="" method="post">
<select name="cat">
<?php
$sql='SELECT * FROM categorie ORDER BY categorie';
$req= $cnx->prepare($sql);
$req->execute();
while($datas=$req->fetch(PDO::FETCH_ASSOC)){
echo '<option value="'.$datas['catID'].'">'.$datas['categorie'].'</option>';
}
?>
</select>
<input type="submit" name="delete" value="supprimer">
</form>
<?php //Si $_POST['delete'] .FIN
}
?>
</main>
</body>
</html>

Voici le résultat d’affichage lorsque vous supprimez une catégorie : l’utilisateur choisit la catégorie à supprimer

Après avoir choisi la catégorie, une interface de confirmation s’affiche

Application PHP 8 : Ajouter une Confirmation de Suppression

Dans cette section, vous allez mettre en place une demande de confirmation avant de procéder à la suppression d’une catégorie. Vous ajouterez une interface de confirmation pour s’assurer que l’utilisateur souhaite réellement supprimer la catégorie sélectionnée

Dans le fichier categorie-delete.php, modifiez le script PHP en ajoutant le code suivant pour gérer la demande de confirmation de suppression.

				
					<?php //Si $_POST['delete'] .Debut
if(isset($_POST['delete'])){
?>
<?php //Si $_POST['supprimer'] .Debut
if(isset($_POST['supprimer'])){
?>
<?php
$sql = 'DELETE FROM categorie WHERE catID = :catID';
$req = $cnx->prepare($sql);
$req->execute(array(':catID'=>$_POST['cat']));
echo '<div class="success">La categorie à bien été supprimer </div>'
?>
<?php //Si $_POST['supprimer'] .suite
}else{
?>
<form action="" method="post">
<p><a href="" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">&lt;&lt;NE pas supprimer cette catégorie</a></p>
<input type="submit" name="delete" value="je confirme"/>
<input type="hidden" name="cat" value="<? $_POST['cat'];?>"/>
<input type="hidden" name="supprimer" />
</form>
<?php //Si $_POST['supprimer'] .fin
}
?>
<?php //Si $_POST['delete'] .Suite
}else{
?>
<form action="" method="post">
<select name="cat">
<?php
$sql='SELECT * FROM categorie ORDER BY categorie';
$req= $cnx->prepare($sql);
$req->execute();
while($datas=$req->fetch(PDO::FETCH_ASSOC)){
echo '<option value="'.$datas['catID'].'">'.$datas['categorie'].'</option>';
}
?>
</select>
<input type="submit" name="delete" value="supprimer">
</form>
<?php //Si $_POST['delete'] .FIN
}
?>

Après avoir testé la fonctionnalité, voici le résultat d’affichage après la suppression

Formez-vous gratuitement avec Alphorm !

Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !

Conclusion

En conclusion, Créer une application de A à Z avec PHP 8 permet de créer des plateformes administratives efficaces, offrant une meilleure organisation et manipulation des données. En utilisant les bonnes pratiques, telles que l’application de requêtes sécurisées, la vérification des doublons et la validation des entrées, vous assurez une gestion robuste et dynamique des catégories dans vos projets PHP 8. Adoptez ces techniques pour améliorer la performance et la fiabilité de vos applications web.