En simpel opgavelisteapplikation, der tager opgaver indsendt af brugeren i en formular og gemmer dem i en MySQL-database. Opgaverne hentes også fra databasen og vises på websiden med en sletknap ved siden af hver opgave. Når der klikkes på sletknappen, slettes opgaven fra databasen.
Det er det, vi vil bygge i denne tutorial.
Lad os som sædvanlig oprette vores database. Opret en database kaldet todo og i den skal du oprette en tabel kaldet opgaver. Opgavetabellen har kun to felter, nemlig:
- id - int(10)
- opgave - varchar(255)
Opret nu to filer:
Åbn dem i en teksteditor og indsæt følgende kode i index.php-filen:
<!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>
Hvis du ser din side nu i browseren, ser den nogenlunde sådan ud:
Lad os tilføje stylingen. Direkte under
-tagget, tilføje denne linje for at indlæse stylesheet-filen:</P> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <p>
Åbn style.css-filen, vi havde oprettet tidligere, og indsæt denne stylingkode i den:</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>
Hvis vi opdaterer vores browser nu, får vi dette:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483918.png" /></P> <p>
Nu skriver vi koden for at gemme indsendt opgave til databasen. </P> <p>
Helt øverst i index.php-filen, før den allerførste linje, skal du tilføje denne kode:</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>
Hvad dette gør er, at hvis brugeren klikker på send-knappen, gemmes opgaven i databasen. Men hvis der ikke blev udfyldt en opgave i formularen, er værdien af $errors-variablen sat til <em>'du skal udfylde opgaven'. </em> Men det bliver ikke vist. Lad os vise det.</P> <p>
Lad os indsætte denne kode i formularen. Direkte under <form>-tagget. Sådan:</P> <pre><code><?php if (isset($errors)) { ?>
<p><?php echo $errors; ?></p>
<?php } ?></code></pre> <p>
Hvis vi forsøger at indsende formularen med en tom værdi, får vi denne:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483917.png" /></P> <p>
Indtil videre gemmer vores app opgaver i databasen, men viser dem ikke.</P> <p>
Det, vi skal gøre, er at hente dem fra databasen og derefter vise dem. </P> <p>
Åbn filen index.php og indsæt denne kode umiddelbart efter formularens afsluttende </form> tag:</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>
Hvis vi indtaster en opgave i formularen og trykker på send-knappen, får vi dette:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483938.png" /></P> <p>
Godt! </P> <p>
Lad os få vores slet-knap til at fungere. Øverst på siden, efter if-blokken, der gemmer opgaven i databasen, skal du tilføje denne kode:</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>
Det er alt. Hvis vi klikker på den lille 'x'-knap nu mod en opgave, slettes denne opgave i databasen.</P> <h3>Konklusion</h3> <p>
Håber dette hjælper dig. En funktion, som jeg vil anbefale, at du tilføjer til denne app bare for at træne dine færdigheder yderligere, er at tilføje redigeringsfunktionen, hvor et indlæg kan opdateres, selv efter det er blevet oprettet. Tip:Følg mit selvstudie om CRUD: Opret, rediger, opdater og slet indlæg med MySQL-database</P> <p>
Tak :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="id_datextoverer">
<a class='LinkPrevArticle' href='http://da.sqldat.com/fds/wtl/1007019458.html' >Brugerkontostyring, roller, tilladelser, autentificering PHP og MySQL </a>
<a class='LinkNextArticle' href='http://da.sqldat.com/fds/wtl/1007019460.html' >Sådan opretter du en blog i PHP og MySQL database - Backend </a>
</div>
<section class="daftrpage2_bottomlist">
<ol class="daarticle_list">
<li class="da_flexstart">
<i></i>
<a href="https://da.sqldat.com/fds/wtl/1007016010.html">
<p class="datextoverer" title="MySql får optegnelser eller data dagligt, ugentligt, månedligt og årligt ">MySql får optegnelser eller data dagligt, ugentligt, månedligt og årligt </p>
</a>
</li>
<li class="da_flexstart">
<i></i>
<a href="https://da.sqldat.com/fds/usb/1007013993.html">
<p class="datextoverer" title="Hvordan CONV() virker i MariaDB ">Hvordan CONV() virker i MariaDB </p>
</a>
</li>
<li class="da_flexstart">
<i></i>
<a href="https://da.sqldat.com/fds/igl/1007019674.html">
<p class="datextoverer" title="PostgreSQL Connection Pooling:Del 4 – PgBouncer vs. Pgpool-II ">PostgreSQL Connection Pooling:Del 4 – PgBouncer vs. Pgpool-II </p>
</a>
</li>
<li class="da_flexstart">
<i></i>
<a href="https://da.sqldat.com/fds/lir/1007005436.html">
<p class="datextoverer" title="Inkluder manglende måneder i gruppe efter forespørgsel ">Inkluder manglende måneder i gruppe efter forespørgsel </p>
</a>
</li>
</ol>
</section>
</section>
</section>
<footer>
<section class="da_container da_flexbetween dafooter_info da_flexalign">
<a href="https://da.sqldat.com" class="dabottom_logo">
<img src="http://www.sqldat.com/css/img/logo.svg" alt="">
</a>
<span class="da_flexstart">
© COPYRIGHT
<a href="https://da.sqldat.com">http://da.sqldat.com</a>
ALLE RETTIGHEDER FORBEHOLDES
</span>
</section>
</footer>
<script language='javascript' src='http://www.sqldat.com/css/ad/c.js'></script>
</body>
</html>