Een eenvoudige takenlijst-applicatie die door de gebruiker ingediende taken in een formulier opneemt en opslaat in een MySQL-database. De taken worden ook opgehaald uit de database en weergegeven op de webpagina met een verwijderknop naast elke taak. Wanneer op de verwijderknop wordt geklikt, wordt de taak uit de database verwijderd.
Dat is wat we in deze tutorial zullen bouwen.
Laten we zoals gewoonlijk onze database maken. Maak een database met de naam todo en maak daarin een tabel met de naam taken. Takentabel heeft slechts twee velden namelijk:
- id - int(10)
- taak - varchar(255)
Maak nu twee bestanden:
Open ze in een teksteditor en plak de volgende code in het index.php-bestand:
<!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>
Als u uw pagina nu in de browser bekijkt, ziet deze er ongeveer zo uit:
Laten we de styling toevoegen. Voeg direct onder de
-tag deze regel toe om het stylesheetbestand te laden:</P> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <p>
Open het style.css-bestand dat we eerder hadden gemaakt en plak deze stijlcode erin:</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>
Als we onze browser nu vernieuwen, krijgen we dit:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483918.png" /></P> <p>
Nu schrijven we de code om de ingediende taak op te slaan in de database. </P> <p>
Helemaal bovenaan het bestand index.php, vóór de allereerste regel, voeg je deze code toe:</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>
Wat dit doet, is dat als de gebruiker op de verzendknop klikt, de taak wordt opgeslagen in de database. Als er echter geen taak is ingevuld in het formulier, wordt de waarde van de variabele $errors ingesteld op <em>'u moet de taak invullen'. </em> Maar dat wordt niet weergegeven. Laten we het tonen.</P> <p>
Laten we deze code in het formulier plakken. Direct onder de <form> tag. Zoals dit:</P> <pre><code><?php if (isset($errors)) { ?>
<p><?php echo $errors; ?></p>
<?php } ?></code></pre> <p>
Als we proberen het formulier met een lege waarde in te dienen, krijgen we dit:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483917.png" /></P> <p>
Tot nu toe slaat onze app taken op in de database, maar geeft ze niet weer.</P> <p>
Wat we moeten doen, is ze ophalen uit de database en ze vervolgens weergeven. </P> <p>
Open het index.php-bestand en plak deze code onmiddellijk na de afsluitende </form>-tag van het formulier:</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>
Als we een taak in het formulier invoeren en op de verzendknop drukken, krijgen we dit:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483938.png" /></P> <p>
Goed! </P> <p>
Laten we onze verwijderknop laten werken. Bovenaan de pagina, na het if-blok dat de taak opslaat in de database, voeg je deze code toe:</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>
Dat is alles. Als we nu op de kleine 'x'-knop bij een taak klikken, wordt die taak in de database verwijderd.</P> <h3>Conclusie</h3> <p>
Ik hoop dat dit je helpt. Een functie die ik je zou aanraden aan deze app toe te voegen, alleen om je vaardigheden verder te oefenen, is om de bewerkingsfunctie toe te voegen waarmee een bericht kan worden bijgewerkt, zelfs nadat het is gemaakt. Hint:volg mijn tutorial over CRUD: Maak, bewerk, update en verwijder berichten met MySQL-database</P> <p>
Bedankt :D</P> <br>
</section>
</article>
<div class="ad5">
<script language='javascript' src='http://www.sqldat.com/css/ad/6.js'></script>
</div>
<div id="turn-page2" class="nld_nltextover">
<a class='LinkPrevArticle' href='http://nl.sqldat.com/ols/fdl/1006019458.html' >Gebruikersaccountbeheer, rollen, machtigingen, authenticatie PHP en MySQL </a>
<a class='LinkNextArticle' href='http://nl.sqldat.com/ols/fdl/1006019460.html' >Een blog maken in PHP en MySQL-database - Backend </a>
</div>
<section class="nlpage2_bottomlist">
<ol class="nlarticle_list">
<li class="flexstanroc_nlwv">
<i></i>
<a href="https://nl.sqldat.com/ols/khb/1006016517.html">
<p class="nltextover" title="Cloud Disaster Recovery voor MariaDB en MySQL ">Cloud Disaster Recovery voor MariaDB en MySQL </p>
</a>
</li>
<li class="flexstanroc_nlwv">
<i></i>
<a href="https://nl.sqldat.com/ols/khb/1006014077.html">
<p class="nltextover" title="MariaDB JSON_VALUE() versus JSON_QUERY():wat is het verschil? ">MariaDB JSON_VALUE() versus JSON_QUERY():wat is het verschil? </p>
</a>
</li>
<li class="flexstanroc_nlwv">
<i></i>
<a href="https://nl.sqldat.com/ols/fdl/1006002392.html">
<p class="nltextover" title="Leeftijd berekenen in MySQL (InnoDb) ">Leeftijd berekenen in MySQL (InnoDb) </p>
</a>
</li>
<li class="flexstanroc_nlwv">
<i></i>
<a href="https://nl.sqldat.com/ols/dbe/1006011309.html">
<p class="nltextover" title="Java Multicast Time To Live is altijd 0 ">Java Multicast Time To Live is altijd 0 </p>
</a>
</li>
</ol>
</section>
</section>
</section>
<footer>
<section class="container_nlwo nlflexbetnite nlfooter_info flexalignloe">
<a href="https://nl.sqldat.com" class="nlbottom_logo">
<img src="http://www.sqldat.com/css/img/logo.svg" alt="">
</a>
<span class="flexstanroc_nlwv">
© AUTEURSRECHT
<a href="https://nl.sqldat.com">http://nl.sqldat.com</a>
ALLE RECHTEN VOORBEHOUDEN
</span>
</section>
</footer>
<script language='javascript' src='http://www.sqldat.com/css/ad/c.js'></script>
</body>
</html>