Eine einfache Todo-Listenanwendung, die vom Benutzer in einem Formular eingereichte Aufgaben aufnimmt und in einer MySQL-Datenbank speichert. Die Aufgaben werden auch aus der Datenbank abgerufen und auf der Webseite mit einer Löschschaltfläche neben jeder Aufgabe angezeigt. Wenn auf die Schaltfläche „Löschen“ geklickt wird, wird die Aufgabe aus der Datenbank gelöscht.
Das werden wir in diesem Tutorial bauen.
Lassen Sie uns wie gewohnt unsere Datenbank erstellen. Erstellen Sie eine Datenbank namens todo und erstellen Sie darin eine Tabelle namens tasks. Die Aufgabentabelle hat nur zwei Felder, nämlich:
- id - int(10)
- Aufgabe - varchar(255)
Erstellen Sie nun zwei Dateien:
Öffnen Sie sie in einem Texteditor und fügen Sie den folgenden Code in die Datei index.php ein:
<!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>
Wenn Sie sich Ihre Seite jetzt im Browser ansehen, sieht sie etwa so aus:
Lassen Sie uns das Styling hinzufügen. Fügen Sie direkt unter dem Tag
diese Zeile hinzu, um die Stylesheet-Datei zu laden:</P> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <p>
Öffnen Sie die zuvor erstellte style.css-Datei und fügen Sie diesen Styling-Code ein:</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>
Wenn wir jetzt unseren Browser aktualisieren, erhalten wir Folgendes:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483918.png" /></P> <p>
Jetzt schreiben wir den Code, um die übermittelte Aufgabe in der Datenbank zu speichern. </P> <p>
Fügen Sie ganz oben in der Datei index.php vor der allerersten Zeile diesen Code hinzu:</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>
Wenn der Benutzer auf die Schaltfläche „Senden“ klickt, wird die Aufgabe in der Datenbank gespeichert. Wenn jedoch keine Aufgabe im Formular ausgefüllt wurde, wird der Wert der $errors-Variablen auf <em>"Sie müssen die Aufgabe ausfüllen" gesetzt. </em> Das wird aber nicht angezeigt. Zeigen wir es an.</P> <p>
Lassen Sie uns diesen Code in das Formular einfügen. Direkt unter dem <form>-Tag. So:</P> <pre><code><?php if (isset($errors)) { ?>
<p><?php echo $errors; ?></p>
<?php } ?></code></pre> <p>
Wenn wir versuchen, das Formular mit einem leeren Wert zu senden, erhalten wir Folgendes:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483917.png" /></P> <p>
Bisher speichert unsere App Aufgaben in der Datenbank, zeigt sie aber nicht an.</P> <p>
Was wir tun müssen, ist, sie aus der Datenbank abzurufen und sie dann anzuzeigen. </P> <p>
Öffnen Sie die Datei index.php und fügen Sie diesen Code unmittelbar nach dem schließenden </form>-Tag des Formulars ein:</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>
Wenn wir eine Aufgabe in das Formular eingeben und auf die Schaltfläche „Senden“ klicken, erhalten wir Folgendes:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483938.png" /></P> <p>
Gut! </P> <p>
Lassen Sie uns unseren Löschknopf zum Laufen bringen. Fügen Sie oben auf der Seite nach dem if-Block, der die Aufgabe in der Datenbank speichert, diesen Code hinzu:</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>
Das ist alles. Wenn wir jetzt bei einer Aufgabe auf das kleine 'x' klicken, wird diese Aufgabe in der Datenbank gelöscht.</P> <h3>Schlussfolgerung</h3> <p>
Hoffe das hilft dir. Eine Funktion, die Sie dieser App hinzufügen möchten, um Ihre Fähigkeiten weiter zu trainieren, ist das Hinzufügen der Bearbeitungsfunktion, mit der ein Beitrag auch nach seiner Erstellung aktualisiert werden kann. Tipp:Folgen Sie meinem Tutorial zu CRUD: Posts mit MySQL-Datenbank erstellen, bearbeiten, aktualisieren und löschen</P> <p>
Danke :D</P> <br>
</section>
</article>
<section id="turn-page" class="de_flexcenter">
<div class="page up de_flexalign">
<i class="prev"></i>
<a class='LinkPrevArticle' href='http://de.sqldat.com/igs/zxl/1003019458.html' >Benutzerkontenverwaltung, Rollen, Berechtigungen, Authentifizierung PHP und MySQL </a>
</div>
<div class="page down de_flexalign">
<a class='LinkNextArticle' href='http://de.sqldat.com/igs/zxl/1003019460.html' >So erstellen Sie ein Blog in einer PHP- und MySQL-Datenbank - 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="list2_de">
<ul class="flexbetweenfde">
<li class="img_dearticle flexbetweenfde">
<div class="ibox_de">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051211560893_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://de.sqldat.com/igs/bze/1003016263.html">
<p class="row de_row-3">Wie erstelle ich eine Datenbank in SQL? </p>
</a>
</section>
</li>
<li class="img_dearticle flexbetweenfde">
<div class="ibox_de">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051315405282_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://de.sqldat.com/igs/bze/1003019286.html">
<p class="row de_row-3">So finden und maskieren Sie PII in Elasticsearch </p>
</a>
</section>
</li>
<li class="img_dearticle flexbetweenfde">
<div class="ibox_de">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051314221704_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://de.sqldat.com/igs/tre/1003019041.html">
<p class="row de_row-3">SQLite-Fremdschlüssel </p>
</a>
</section>
</li>
<li class="img_dearticle flexbetweenfde">
<div class="ibox_de">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051214315138_S.png' width='300' height='220' border='0'>
</div>
<section>
<a href="https://de.sqldat.com/igs/zxl/1003016834.html">
<p class="row de_row-3">Tipps zum Upgrade des Percona XtraDB-Clusters auf 8.0 </p>
</a>
</section>
</li>
</ul>
</section>
</section>
<aside class="right">
<section class="share">
<div class="share_detitle">
<i></i>
<h2>Teilen</h2>
</div>
<ul class="share_deico de_flexstart">
<li><a class="facebook" title="Share on Facebook" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://de.sqldat.com/igs/zxl/1003019459.html"></a></li>
<li><a class="twitter" title="Tweet" target="_blank" href="https://twitter.com/intent/tweet?source=http://de.sqldat.com/igs/zxl/1003019459.html&text=To-Do-Listen-Anwendung mit PHP- und MySQL-Datenbank:http://de.sqldat.com/igs/zxl/1003019459.html"></a></li>
<li><a class="linked-in" title="Share on LinkedIn" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=http://de.sqldat.com/igs/zxl/1003019459.html&title=To-Do-Listen-Anwendung mit PHP- und MySQL-Datenbank&summary=&source=http://de.sqldat.com/igs/zxl/1003019459.html"></a></li>
<li><a class="print" title="Print" target="" href="javascript:window.print && window.print();"></a></li>
</ul>
</section>
<section class="type_delist">
<ol>
<li><a class='childclass' href='http://de.sqldat.com/igs/bze/' target="_self">Database</a></li> <li><a class='childclass' href='http://de.sqldat.com/igs/zxl/' target="_self">Mysql</a></li> <li><a class='childclass' href='http://de.sqldat.com/igs/jhe/' target="_self">Oracle</a></li> <li><a class='childclass' href='http://de.sqldat.com/igs/hfr/' target="_self">Sqlserver</a></li> <li><a class='childclass' href='http://de.sqldat.com/igs/ljl/' target="_self">PostgreSQL</a></li> <li><a class='childclass' href='http://de.sqldat.com/igs/wus/' target="_self">Access</a></li> <li><a class='childclass' href='http://de.sqldat.com/igs/tre/' target="_self">SQLite</a></li> <li><a class='childclass' href='http://de.sqldat.com/igs/ecb/' target="_self">MariaDB</a></li>
</ol>
</section>
<section class="list1_de article1_delist">
<ul class="flexbetweenfde">
<li>
<section class="de_flexalign">
<div class="ibox_de">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051214092262_S.png' width='300' height='220' border='0'>
</div>
<a href="https://de.sqldat.com/igs/ecb/1003016683.html">
<p class="row de_row-3">
So stellen Sie MariaDB Cluster 10.5 für Hochverfügbarkeit bereit </p>
</a>
</section>
<ol>
<li class="de_flexstart">
<a href="https://de.sqldat.com/igs/zxl/1003020011.html">
<p class="row row_2erde">
MySQL Wählen Sie die oberen N Zeilen aus </p>
</a>
</li>
<li class="de_flexstart">
<a href="https://de.sqldat.com/igs/zxl/1003002226.html">
<p class="row row_2erde">
Normalisierung in MYSQL </p>
</a>
</li>
<li class="de_flexstart">
<a href="https://de.sqldat.com/igs/zxl/1003003394.html">
<p class="row row_2erde">
So stellen Sie in Visual Studio eine Verbindung zu einer MySQL-Datenquelle her </p>
</a>
</li>
<li class="de_flexstart">
<a href="https://de.sqldat.com/igs/zxl/1003002238.html">
<p class="row row_2erde">
Wie kann man doppelte Benutzernamen bei der Registrierung verhindern? </p>
</a>
</li>
<li class="de_flexstart">
<a href="https://de.sqldat.com/igs/zxl/1003003120.html">
<p class="row row_2erde">
MySQL - Erzwingen, dass der Cache zum Testen der Abfragegeschwindigkeit nicht verwendet wird </p>
</a>
</li>
<li class="de_flexstart">
<a href="https://de.sqldat.com/igs/zxl/1003003527.html">
<p class="row row_2erde">
MySQL-Abfrage zeigt mehrere Tabellen aus einer ID-Spalte </p>
</a>
</li>
</ol>
</li>
</ul>
</section>
</aside>
</section>
<footer>
<section class="containerdeow flexbetweenfde footer_deinfo de_flexalign">
<a href="https://de.sqldat.com" class="bottom_delogo">
<img src="http://www.sqldat.com/css/img/logo.svg" alt="">
</a>
<span class="de_flexstart">
© URHEBERRECHT
<a href="https://de.sqldat.com">http://de.sqldat.com</a>
ALLE RECHTE VORBEHALTEN
</span>
</section>
</footer>
<script language='javascript' src='http://www.sqldat.com/css/ad/c.js'></script>
</body>
</html>