Créer, éditer, mettre à jour et supprimer du contenu sur un site Web est ce qui rend le site dynamique. C'est ce que nous allons faire dans ce post.
Un utilisateur qui visite notre site pourra créer des messages qui seront enregistrés dans une base de données mysql, récupérer les messages de la base de données et les afficher sur la page Web. Chaque message sera affiché avec un bouton de modification et de suppression pour permettre à l'utilisateur de mettre à jour les messages ainsi que de les supprimer.
Tout d'abord, créez une base de données nommée crud. Dans la base de données crud, créez une table appelée info. Le tableau d'informations doit contenir les colonnes suivantes :
-
identifiant - int(11)
- nom - varchar(100)
- adresse - varchar(100)
Japper! Juste deux champs. J'essaie de garder les choses simples ici. alors, passons à l'étape suivante.
Créez un fichier appelé index.php et collez-y le code suivant :
<!DOCTYPE html>
<html>
<head>
<title>CRUD: CReate, Update, Delete PHP MySQL</title>
</head>
<body>
<form method="post" action="server.php" >
<div class="input-group">
<label>Name</label>
<input type="text" name="name" value="">
</div>
<div class="input-group">
<label>Address</label>
<input type="text" name="address" value="">
</div>
<div class="input-group">
<button class="btn" type="submit" name="save" >Save</button>
</div>
</form>
</body>
</html>
Si vous enregistrez et ouvrez le site sur votre navigateur, vous obtenez quelque chose comme ceci :
Ça ne ressemble pas à la meilleure forme du monde, n'est-ce pas ? Réparons ça. Ajoutez cette ligne directement sous la balise
dans la section head de votre fichier index.php :</P> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <p>
C'est le lien pour charger le style à partir du fichier de feuille de style. Créons le fichier styles.css et ajoutons-y ce code de style.</P> <pre><code>body {
font-size: 19px;
}
table{
width: 50%;
margin: 30px auto;
border-collapse: collapse;
text-align: left;
}
tr {
border-bottom: 1px solid #cbcbcb;
}
th, td{
border: none;
height: 30px;
padding: 2px;
}
tr:hover {
background: #F5F5F5;
}
form {
width: 45%;
margin: 50px auto;
text-align: left;
padding: 20px;
border: 1px solid #bbbbbb;
border-radius: 5px;
}
.input-group {
margin: 10px 0px 10px 0px;
}
.input-group label {
display: block;
text-align: left;
margin: 3px;
}
.input-group input {
height: 30px;
width: 93%;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
}
.btn {
padding: 10px;
font-size: 15px;
color: white;
background: #5F9EA0;
border: none;
border-radius: 5px;
}
.edit_btn {
text-decoration: none;
padding: 2px 5px;
background: #2E8B57;
color: white;
border-radius: 3px;
}
.del_btn {
text-decoration: none;
padding: 2px 5px;
color: white;
border-radius: 3px;
background: #800000;
}
.msg {
margin: 30px auto;
padding: 10px;
border-radius: 5px;
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
width: 50%;
text-align: center;
}</code></pre> <p>
Vérifions à nouveau notre formulaire dans le navigateur :</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463381.png" /></P> <p>
C'est mieux! </P> <p>
J'aime généralement séparer autant que possible mon code HTML de mon code PHP. Je considère que c'est une bonne pratique. Sur cette note, créons un autre fichier appelé php_code.php où nous implémentons toutes les fonctionnalités php telles que la connexion à la base de données, l'interrogation de la base de données, etc.</P> <p>
Ouvrez donc php_code.php et collez-y le code suivant :</P> <pre><code><?php
session_start();
$db = mysqli_connect('localhost', 'root', '', 'crud');
// initialize variables
$name = "";
$address = "";
$id = 0;
$update = false;
if (isset($_POST['save'])) {
$name = $_POST['name'];
$address = $_POST['address'];
mysqli_query($db, "INSERT INTO info (name, address) VALUES ('$name', '$address')");
$_SESSION['message'] = "Address saved";
header('location: index.php');
}
// ...</code></pre> <p>
Incluez maintenant ce fichier en haut (la toute première ligne) de votre fichier index.php. Comme ceci :</P> <pre><code><?php include('server.php'); ?></code></pre> <p>
À ce stade, tout ce que ce code fait est de se connecter à la base de données, d'initialiser certaines variables et d'enregistrer les données soumises du formulaire dans la base de données dans les informations que nous avons créées précédemment. Ce n'est que la partie CReate de CRUD. Passons aux autres.</P> <p>
Maintenant, visitez à nouveau votre fichier index.php et ajoutez ce code juste sous la balise <body> :</P> <pre><code>// ...
<body>
<?php if (isset($_SESSION['message'])): ?>
<div class="msg">
<?php
echo $_SESSION['message'];
unset($_SESSION['message']);
?>
</div>
<?php endif ?></code></pre> <p>
Ce code affiche un message de confirmation pour indiquer à l'utilisateur qu'un nouvel enregistrement a été créé dans la base de données. </P> <p>
Pour récupérer les enregistrements de la base de données et les afficher sur la page, ajoutez ce code juste au-dessus du formulaire de saisie :</P> <pre><code><?php $results = mysqli_query($db, "SELECT * FROM info"); ?>
<table>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th colspan="2">Action</th>
</tr>
</thead>
<?php while ($row = mysqli_fetch_array($results)) { ?>
<tr>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['address']; ?></td>
<td>
<a href="index.php?edit=<?php echo $row['id']; ?>" class="edit_btn" >Edit</a>
</td>
<td>
<a href="server.php?del=<?php echo $row['id']; ?>" class="del_btn">Delete</a>
</td>
</tr>
<?php } ?>
</table>
<form>
// ...</code></pre> <p>
Créons un nouvel enregistrement et voyons si cela fonctionne :</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463338.png" /></P> <p>
..et voilà !! Cela fonctionne parfaitement !</P> <p>
Passons maintenant à l'édition. En haut de votre fichier index.php (immédiatement après l'instruction include) ajoutez le code suivant :</P> <pre><code><?php
if (isset($_GET['edit'])) {
$id = $_GET['edit'];
$update = true;
$record = mysqli_query($db, "SELECT * FROM info WHERE id=$id");
if (count($record) == 1 ) {
$n = mysqli_fetch_array($record);
$name = $n['name'];
$address = $n['address'];
}
}
?></code></pre> <p>
Lors de la modification d'un enregistrement de base de données, nous devons mettre les anciennes valeurs dans le formulaire afin qu'elles puissent être modifiées. Pour ce faire, modifions nos champs de saisie sur le formulaire et définissons ces valeurs extraites de la base de données ($nom, $adresse) comme valeurs de la <strong>valeur</strong> attribut des champs de formulaire.</P> <p>
Ajoutez également un champ masqué pour contenir l'identifiant de l'enregistrement que nous allons mettre à jour afin qu'il puisse être reconnu dans la base de données uniquement par son identifiant. Ceci l'explique mieux :</P> <pre><code>// newly added field
<input type="hidden" name="id" value="<?php echo $id; ?>">
// modified form fields
<input type="text" name="name" value="<?php echo $name; ?>">
<input type="text" name="address" value="<?php echo $address; ?>"></code></pre> <p>
N'oubliez pas que tout cela se trouve dans l'entrée <form>.</P> <p>
Maintenant, si nous cliquons sur le bouton d'édition d'un enregistrement particulier de la base de données, les valeurs seront renseignées dans le formulaire et nous pourrons les éditer. Puisque nous éditons sur le même formulaire que lors de la création, nous devons mettre une condition qui détermine le bouton approprié à afficher. Par exemple, lors de l'édition, nous affichons le bouton de mise à jour sur le formulaire et lors de la création, nous affichons le bouton de sauvegarde. Pour ce faire, nous utilisons la <strong>mise à jour </strong> variable qui est booléenne. Lorsque la mise à jour est vraie, le bouton de mise à jour s'affiche et si elle est fausse, le bouton de sauvegarde s'affiche.</P> <p>
Remplacez votre bouton de sauvegarde sur le formulaire comme ceci :</P> <p>
Remplacer ..</P> <pre><code><button class="btn" type="submit" name="save" >Save</button></code></pre> <p>
avec...</P> <pre><code><?php if ($update == true): ?>
<button class="btn" type="submit" name="update" style="background: #556B2F;" >update</button>
<?php else: ?>
<button class="btn" type="submit" name="save" >Save</button>
<?php endif ?></code></pre> <p>
Maintenant, si nous l'exécutons sur le navigateur et que nous cliquons sur le bouton d'édition, nous obtenons ceci :</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463388.png" /></P> <p>
Vous pouvez maintenant voir que c'est le bouton de mise à jour qui s'affiche. Ajoutons le code qui sera exécuté lorsque ce bouton sera cliqué.</P> <p>
Ouvrez le fichier php_code.php et ajoutez ce code au bouton :</P> <pre><code>// ...
if (isset($_POST['update'])) {
$id = $_POST['id'];
$name = $_POST['name'];
$address = $_POST['address'];
mysqli_query($db, "UPDATE info SET name='$name', address='$address' WHERE id=$id");
$_SESSION['message'] = "Address updated!";
header('location: index.php');
}</code></pre> <p>
Modifiez maintenant les valeurs dans le formulaire et cliquez sur le bouton de mise à jour. </P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463390.png" /></P> <p>
Génial !</P> <p>
Une dernière chose :supprimer des enregistrements. Ajoutez simplement ce code à la fin de votre fichier php_code.php et vous êtes prêt à partir :</P> <pre><code>if (isset($_GET['del'])) {
$id = $_GET['del'];
mysqli_query($db, "DELETE FROM info WHERE id=$id");
$_SESSION['message'] = "Address deleted!";
header('location: index.php');
}</code></pre> <p>
Si vous cliquez sur le bouton de suppression, il supprime l'enregistrement de la base de données et affiche le message comme les autres actions.</P> <p>
</P> <h3> </h3> <h2>Conclusion</h2> <p>
Cela nous amène à la fin de ce tutoriel. J'espère que cela vous a été utile et que cela a valu votre temps. Je suis très honoré de votre patience d'avoir suivi cela jusqu'au bout. Si vous aimez ce tutoriel, partagez-le avec vos amis en cliquant sur l'une des icônes de médias sociaux ci-dessous. N'oubliez pas de consulter mes autres tutoriels sur ce site. </P> <p>
Merci</P> <br>
</section>
</article>
<section id="turn-page" class="flexcenter_fr">
<div class="page up flexalignfrwou">
<i class="prev"></i>
<a class='LinkPrevArticle' href='http://fr.sqldat.com/xvs/vtl/1002019451.html' >Système complet d'enregistrement des utilisateurs utilisant la base de données PHP et MySQL </a>
</div>
<div class="page down flexalignfrwou">
<a class='LinkNextArticle' href='http://fr.sqldat.com/xvs/vtl/1002019453.html' >Comment charger et télécharger des fichiers PHP et MySQL </a>
<i class="next"></i>
</div>
</section>
<div class="ad5">
<script language='javascript' src='http://www.sqldat.com/css/ad/2.js'></script>
</div>
<section class="frrlist2">
<ul class="flexbetfrow">
<li class="img_article flexbetfrow">
<div class="fribox_eou">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051415314415_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://fr.sqldat.com/xvs/qoe/1002020754.html">
<p class="row rowfr3">Solutions de défi du générateur de séries de nombres - Partie 5 </p>
</a>
</section>
</li>
<li class="img_article flexbetfrow">
<div class="fribox_eou">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051409093126_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://fr.sqldat.com/xvs/ayl/1002019680.html">
<p class="row rowfr3">ScaleGrid PostgreSQL sur VMware Cloud Infrastructure </p>
</a>
</section>
</li>
<li class="img_article flexbetfrow">
<div class="fribox_eou">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051416533582.jpg' width='300' height='220' border='0'>
</div>
<section>
<a href="https://fr.sqldat.com/xvs/sqe/1002021109.html">
<p class="row rowfr3">Impact du moniteur EM SQL </p>
</a>
</section>
</li>
<li class="img_article flexbetfrow">
<div class="fribox_eou">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051315352337_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://fr.sqldat.com/xvs/qoe/1002019231.html">
<p class="row rowfr3">Le référentiel de base de données de test IRI-Windocks </p>
</a>
</section>
</li>
</ul>
</section>
</section>
<aside class="right">
<section class="share">
<div class="shareer_title">
<i></i>
<h2>Partager</h2>
</div>
<ul class="share_ico flexstartfr">
<li><a class="facebook" title="Share on Facebook" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://fr.sqldat.com/xvs/vtl/1002019452.html"></a></li>
<li><a class="twitter" title="Tweet" target="_blank" href="https://twitter.com/intent/tweet?source=http://fr.sqldat.com/xvs/vtl/1002019452.html&text=PHP CRUD Créer, modifier, mettre à jour et supprimer des messages avec la base de données MySQL:http://fr.sqldat.com/xvs/vtl/1002019452.html"></a></li>
<li><a class="linked-in" title="Share on LinkedIn" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=http://fr.sqldat.com/xvs/vtl/1002019452.html&title=PHP CRUD Créer, modifier, mettre à jour et supprimer des messages avec la base de données MySQL&summary=&source=http://fr.sqldat.com/xvs/vtl/1002019452.html"></a></li>
<li><a class="print" title="Print" target="" href="javascript:window.print && window.print();"></a></li>
</ul>
</section>
<section class="type_frlist">
<ol>
<li><a class='childclass' href='http://fr.sqldat.com/xvs/qoe/' target="_self">Database</a></li> <li><a class='childclass' href='http://fr.sqldat.com/xvs/vtl/' target="_self">Mysql</a></li> <li><a class='childclass' href='http://fr.sqldat.com/xvs/sqe/' target="_self">Oracle</a></li> <li><a class='childclass' href='http://fr.sqldat.com/xvs/dbr/' target="_self">Sqlserver</a></li> <li><a class='childclass' href='http://fr.sqldat.com/xvs/ayl/' target="_self">PostgreSQL</a></li> <li><a class='childclass' href='http://fr.sqldat.com/xvs/ecs/' target="_self">Access</a></li> <li><a class='childclass' href='http://fr.sqldat.com/xvs/pne/' target="_self">SQLite</a></li> <li><a class='childclass' href='http://fr.sqldat.com/xvs/nlb/' target="_self">MariaDB</a></li>
</ol>
</section>
<section class="frlist1 dfrarticle1_list">
<ul class="flexbetfrow">
<li>
<section class="flexalignfrwou">
<div class="fribox_eou">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051415101791_S.png' width='300' height='220' border='0'>
</div>
<a href="https://fr.sqldat.com/xvs/qoe/1002020326.html">
<p class="row rowfr3">
Configuration d'un réseau dédié pour la communication du groupe de disponibilité </p>
</a>
</section>
<ol>
<li class="flexstartfr">
<a href="https://fr.sqldat.com/xvs/vtl/1002000576.html">
<p class="row frrrow-2">
Créer un utilisateur sur MySQL </p>
</a>
</li>
<li class="flexstartfr">
<a href="https://fr.sqldat.com/xvs/vtl/1002003758.html">
<p class="row frrrow-2">
L'encodage de caractères UTF-8 combat json_encode() </p>
</a>
</li>
<li class="flexstartfr">
<a href="https://fr.sqldat.com/xvs/vtl/1002003866.html">
<p class="row frrrow-2">
afficher les données de la base de données SQL dans le tableau php/html </p>
</a>
</li>
<li class="flexstartfr">
<a href="https://fr.sqldat.com/xvs/vtl/1002002190.html">
<p class="row frrrow-2">
Longueur maximale de MySQL et GROUP_CONCAT() </p>
</a>
</li>
<li class="flexstartfr">
<a href="https://fr.sqldat.com/xvs/vtl/1002001556.html">
<p class="row frrrow-2">
MySQL créer une vue, remplacer une vue et supprimer des déclarations de vue avec des exemples </p>
</a>
</li>
<li class="flexstartfr">
<a href="https://fr.sqldat.com/xvs/vtl/1002002046.html">
<p class="row frrrow-2">
Requête MySQL pour obtenir les noms de colonnes ? </p>
</a>
</li>
</ol>
</li>
</ul>
</section>
</aside>
</section>
<footer>
<section class="frcontaintx flexbetfrow frfooter_info flexalignfrwou">
<a href="https://fr.sqldat.com" class="frbottom_logo">
<img src="http://www.sqldat.com/css/img/logo.svg" alt="">
</a>
<span class="flexstartfr">
© DROITS D'AUTEUR
<a href="https://fr.sqldat.com">http://fr.sqldat.com</a>
TOUS LES DROITS SONT RÉSERVÉS
</span>
</section>
</footer>
<script language='javascript' src='http://www.sqldat.com/css/ad/c.js'></script>
</body>
</html>