Une simple application de liste de tâches qui prend les tâches soumises par l'utilisateur dans un formulaire et les enregistre dans une base de données MySQL. Les tâches sont également extraites de la base de données et affichées sur la page Web avec un bouton de suppression à côté de chaque tâche. Lorsque le bouton de suppression est cliqué, la tâche est supprimée de la base de données.
C'est ce que nous allons construire dans ce tutoriel.
Comme d'habitude, créons notre base de données. Créez une base de données appelée todo et dedans, créez un tableau appelé tâches. Le tableau des tâches n'a que deux champs à savoir :
- id - int(10)
- tâche - varchar(255)
Créez maintenant deux fichiers :
Ouvrez-les dans un éditeur de texte et collez le code suivant dans le fichier index.php :
<!DOCTYPE html>
<html>
<head>
<title>ToDo List Application PHP and MySQL</title>
</head>
<body>
<div class="heading">
<h2 style="font-style: 'Hervetica';">ToDo List Application PHP and MySQL database</h2>
</div>
<form method="post" action="index.php" class="input_form">
<input type="text" name="task" class="task_input">
<button type="submit" name="submit" id="add_btn" class="add_btn">Add Task</button>
</form>
</body>
</html>
Si vous affichez votre page maintenant dans le navigateur, elle ressemble à ceci :
Ajoutons le style. Directement sous la balise
, ajoutez cette ligne pour charger le fichier de feuille de style :</P> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <p>
Ouvrez le fichier style.css que nous avions créé précédemment et collez-y ce code de style :</P> <pre><code>.heading{
width: 50%;
margin: 30px auto;
text-align: center;
color: #6B8E23;
background: #FFF8DC;
border: 2px solid #6B8E23;
border-radius: 20px;
}
form {
width: 50%;
margin: 30px auto;
border-radius: 5px;
padding: 10px;
background: #FFF8DC;
border: 1px solid #6B8E23;
}
form p {
color: red;
margin: 0px;
}
.task_input {
width: 75%;
height: 15px;
padding: 10px;
border: 2px solid #6B8E23;
}
.add_btn {
height: 39px;
background: #FFF8DC;
color: #6B8E23;
border: 2px solid #6B8E23;
border-radius: 5px;
padding: 5px 20px;
}
table {
width: 50%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
border-bottom: 1px solid #cbcbcb;
}
th {
font-size: 19px;
color: #6B8E23;
}
th, td{
border: none;
height: 30px;
padding: 2px;
}
tr:hover {
background: #E9E9E9;
}
.task {
text-align: left;
}
.delete{
text-align: center;
}
.delete a{
color: white;
background: #a52a2a;
padding: 1px 6px;
border-radius: 3px;
text-decoration: none;
}
</code></pre> <p>
</P> <p>
</P> <p>
</P> <p>
Si nous actualisons notre navigateur maintenant, nous obtenons ceci :</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483918.png" /></P> <p>
Maintenant, nous écrivons le code pour enregistrer la tâche soumise dans la base de données. </P> <p>
Tout en haut du fichier index.php, avant la toute première ligne, ajoutez ce code :</P> <pre><code><?php
// initialize errors variable
$errors = "";
// connect to database
$db = mysqli_connect("localhost", "root", "", "todo");
// insert a quote if submit button is clicked
if (isset($_POST['submit'])) {
if (empty($_POST['task'])) {
$errors = "You must fill in the task";
}else{
$task = $_POST['task'];
$sql = "INSERT INTO tasks (task) VALUES ('$task')";
mysqli_query($db, $sql);
header('location: index.php');
}
}
// ...</code></pre> <p>
Cela signifie que si l'utilisateur clique sur le bouton Soumettre, la tâche est enregistrée dans la base de données. Cependant si aucune tâche n'a été remplie dans le formulaire, la valeur de la variable $errors est définie sur <em>'vous devez remplir la tâche'. </em> Mais cela ne s'affiche pas. Affichez-le.</P> <p>
Collons ce code dans le formulaire. Directement sous la balise <form>. Comme ceci :</P> <pre><code><?php if (isset($errors)) { ?>
<p><?php echo $errors; ?></p>
<?php } ?></code></pre> <p>
Si nous essayons de soumettre le formulaire avec une valeur vide, nous obtenons ceci :</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483917.png" /></P> <p>
Jusqu'à présent, notre application enregistre les tâches dans la base de données mais ne les affiche pas.</P> <p>
Ce que nous devons faire, c'est les récupérer dans la base de données, puis les afficher. </P> <p>
Ouvrez le fichier index.php et collez ce code immédiatement après la balise de fermeture </form> du formulaire :</P> <pre><code>//...
// </form>
<table>
<thead>
<tr>
<th>N</th>
<th>Tasks</th>
<th style="width: 60px;">Action</th>
</tr>
</thead>
<tbody>
<?php
// select all tasks if page is visited or refreshed
$tasks = mysqli_query($db, "SELECT * FROM tasks");
$i = 1; while ($row = mysqli_fetch_array($tasks)) { ?>
<tr>
<td> <?php echo $i; ?> </td>
<td class="task"> <?php echo $row['task']; ?> </td>
<td class="delete">
<a href="index.php?del_task=<?php echo $row['id'] ?>">x</a>
</td>
</tr>
<?php $i++; } ?>
</tbody>
</table></code></pre> <p>
Si nous saisissons une tâche dans le formulaire et que nous appuyons sur le bouton Soumettre, nous obtenons ceci :</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483938.png" /></P> <p>
Bon! </P> <p>
Faisons fonctionner notre bouton de suppression. En haut de la page, après le bloc if qui enregistre la tâche dans la base de données, ajoutez ce code :</P> <pre><code>
// delete task
if (isset($_GET['del_task'])) {
$id = $_GET['del_task'];
mysqli_query($db, "DELETE FROM tasks WHERE id=".$id);
header('location: index.php');
}
?></code></pre> <p>
C'est tout. Si nous cliquons maintenant sur le petit bouton "x" à côté d'une tâche, cette tâche est supprimée de la base de données.</P> <h3>Conclusion</h3> <p>
J'espère que cela vous aide. Une fonctionnalité que je vous recommande d'ajouter à cette application juste pour exercer davantage vos compétences est d'ajouter la fonction d'édition où un message peut être mis à jour même après sa création. Astuce :Suivez mon tutoriel sur CRUD : Créer, modifier, mettre à jour et supprimer des publications avec la base de données MySQL</P> <p>
Merci :D</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/1002019458.html' >Gestion des comptes utilisateurs, rôles, permissions, authentification PHP et MySQL </a>
</div>
<div class="page down flexalignfrwou">
<a class='LinkNextArticle' href='http://fr.sqldat.com/xvs/vtl/1002019460.html' >Comment créer un blog en PHP et base de données MySQL - Backend </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/2022051213514194_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://fr.sqldat.com/xvs/nlb/1002016469.html">
<p class="row rowfr3">Exécuter Vitess et MySQL avec ClusterControl </p>
</a>
</section>
</li>
<li class="img_article flexbetfrow">
<div class="fribox_eou">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051310443969.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://fr.sqldat.com/xvs/ecs/1002018728.html">
<p class="row rowfr3">Comment Access communique-t-il avec les sources de données ODBC ? Partie 1 </p>
</a>
</section>
</li>
<li class="img_article flexbetfrow">
<div class="fribox_eou">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051214095185_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://fr.sqldat.com/xvs/nlb/1002016694.html">
<p class="row rowfr3">Automatiser la vérification des objets de schéma de base de données </p>
</a>
</section>
</li>
<li class="img_article flexbetfrow">
<div class="fribox_eou">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051416020692_S.jpg' width='300' height='220' border='0'>
</div>
<section>
<a href="https://fr.sqldat.com/xvs/dbr/1002020905.html">
<p class="row rowfr3">Conseils rapides pour réparer et restaurer la base de données SQL sans sauvegarde </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/1002019459.html"></a></li>
<li><a class="twitter" title="Tweet" target="_blank" href="https://twitter.com/intent/tweet?source=http://fr.sqldat.com/xvs/vtl/1002019459.html&text=Application de liste de tâches utilisant la base de données PHP et MySQL:http://fr.sqldat.com/xvs/vtl/1002019459.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/1002019459.html&title=Application de liste de tâches utilisant la base de données PHP et MySQL&summary=&source=http://fr.sqldat.com/xvs/vtl/1002019459.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/2022051017575935_S.png' width='300' height='220' border='0'>
</div>
<a href="https://fr.sqldat.com/xvs/qoe/1002001343.html">
<p class="row rowfr3">
Groupes de disponibilité SQL toujours activé :objets ordinateur </p>
</a>
</section>
<ol>
<li class="flexstartfr">
<a href="https://fr.sqldat.com/xvs/vtl/1002002762.html">
<p class="row frrrow-2">
Impossible de renvoyer les résultats d'une procédure stockée à l'aide du curseur Python </p>
</a>
</li>
<li class="flexstartfr">
<a href="https://fr.sqldat.com/xvs/vtl/1002019440.html">
<p class="row frrrow-2">
Condition WHERE dans MySQL avec 16 exemples de requêtes différents </p>
</a>
</li>
<li class="flexstartfr">
<a href="https://fr.sqldat.com/xvs/vtl/1002000694.html">
<p class="row frrrow-2">
Comment sélectionner des enregistrements sans valeurs NULL dans MySQL </p>
</a>
</li>
<li class="flexstartfr">
<a href="https://fr.sqldat.com/xvs/vtl/1002016786.html">
<p class="row frrrow-2">
Charges de travail de base de données hybrides OLTP/Analytics dans le cluster Galera utilisant des esclaves asynchrones </p>
</a>
</li>
<li class="flexstartfr">
<a href="https://fr.sqldat.com/xvs/vtl/1002000230.html">
<p class="row frrrow-2">
Comment importer et exporter une base de données MySQL </p>
</a>
</li>
<li class="flexstartfr">
<a href="https://fr.sqldat.com/xvs/vtl/1002002878.html">
<p class="row frrrow-2">
Pourquoi MySQL ne prend-il pas en charge la précision à la milliseconde/microseconde ? </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>