En enkel att göra-lista-applikation som tar uppgifter som skickats av användare i ett formulär och sparar dem i en MySQL-databas. Uppgifterna hämtas också från databasen och visas på webbsidan med en raderingsknapp bredvid varje uppgift. När du klickar på raderingsknappen tas uppgiften bort från databasen.
Det är vad vi kommer att bygga i den här handledningen.
Låt oss som vanligt skapa vår databas. Skapa en databas som heter todo och i den skapar du en tabell som heter uppgifter. Tabellen Tasks har bara två fält nämligen:
- id - int(10)
- uppgift - varchar(255)
Skapa nu två filer:
Öppna dem i en textredigerare och klistra in följande kod 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>
Om du tittar på din sida nu i webbläsaren ser den ut ungefär så här:
Låt oss lägga till stylingen. Direkt under taggen
, lägg till den här raden för att ladda stilmallsfilen:</P> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <p>
Öppna filen style.css som vi skapade tidigare och klistra in denna stilkod 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>
Om vi uppdaterar vår webbläsare nu får vi detta:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483918.png" /></P> <p>
Nu skriver vi koden för att spara inlämnad uppgift till databasen. </P> <p>
Längst upp i filen index.php, före den allra första raden, lägg till denna kod:</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>
Vad detta gör är att om användaren klickar på knappen Skicka sparas uppgiften i databasen. Men om ingen uppgift fylldes i formuläret är värdet för variabeln $errors satt till <em>'du måste fylla i uppgiften'. </em> Men det visas inte. Låt oss visa det.</P> <p>
Låt oss klistra in den här koden i formuläret. Direkt under taggen <form>. Så här:</P> <pre><code><?php if (isset($errors)) { ?>
<p><?php echo $errors; ?></p>
<?php } ?></code></pre> <p>
Om vi försöker skicka in formuläret med ett tomt värde får vi detta:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483917.png" /></P> <p>
Än så länge sparar vår app uppgifter i databasen men visar dem inte.</P> <p>
Vad vi behöver göra är att hämta dem från databasen och sedan visa dem. </P> <p>
Öppna filen index.php och klistra in den här koden omedelbart efter formulärets avslutande </form>-tagg:</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>
Om vi anger en uppgift i formuläret och trycker på knappen Skicka får vi detta:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483938.png" /></P> <p>
Bra! </P> <p>
Låt oss få vår radera-knapp att fungera. Överst på sidan, efter if-blocket som sparar uppgiften i databasen, lägg till denna kod:</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 är allt. Om vi klickar på den lilla "x"-knappen nu mot en uppgift, raderas den uppgiften i databasen.</P> <h3>Slutsats</h3> <p>
Hoppas detta hjälper dig. En funktion som jag skulle rekommendera att du lägger till i den här appen bara för att ytterligare träna dina färdigheter är att lägga till redigeringsfunktionen där ett inlägg kan uppdateras även efter att det har skapats. Tips:Följ min handledning om CRUD: Skapa, redigera, uppdatera och ta bort inlägg med MySQL-databasen</P> <p>
Tack :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_textover">
<a class='LinkPrevArticle' href='http://sv.sqldat.com/ifs/zxl/1008019458.html' >Användarkontohantering, roller, behörigheter, autentisering PHP och MySQL </a>
<a class='LinkNextArticle' href='http://sv.sqldat.com/ifs/zxl/1008019460.html' >Hur man skapar en blogg i PHP och MySQL databas - Backend </a>
</div>
<section class="svpage2_botmlist">
<ol class="svarticle_list">
<li class="svflexstart">
<i></i>
<a href="https://sv.sqldat.com/ifs/zxl/1008000225.html">
<p class="textover" title="Hur man ansluter till MySQL med PHP ">Hur man ansluter till MySQL med PHP </p>
</a>
</li>
<li class="svflexstart">
<i></i>
<a href="https://sv.sqldat.com/ifs/xve/1008011137.html">
<p class="textover" title="Oracle:sekvens MySequence.currval är ännu inte definierad i denna session ">Oracle:sekvens MySequence.currval är ännu inte definierad i denna session </p>
</a>
</li>
<li class="svflexstart">
<i></i>
<a href="https://sv.sqldat.com/ifs/use/1008013090.html">
<p class="textover" title="Hur använder man Room Persistence Library med förifylld databas? ">Hur använder man Room Persistence Library med förifylld databas? </p>
</a>
</li>
<li class="svflexstart">
<i></i>
<a href="https://sv.sqldat.com/ifs/ljl/1008009119.html">
<p class="textover" title="Typkonvertering. Vad gör jag med ett PostgreSQL OID-värde i libpq i C? ">Typkonvertering. Vad gör jag med ett PostgreSQL OID-värde i libpq i C? </p>
</a>
</li>
</ol>
</section>
</section>
</section>
<footer>
<section class="contain_svrow flexbet_sveen svfooter_info flexalignsvg">
<a href="https://sv.sqldat.com" class="svbottom_logo">
<img src="http://www.sqldat.com/css/img/logo.svg" alt="">
</a>
<span class="svflexstart">
© COPYRIGHT
<a href="https://sv.sqldat.com">http://sv.sqldat.com</a>
ALLA RÄTTIGHETER FÖRBEHÅLLNA
</span>
</section>
</footer>
<script language='javascript' src='http://www.sqldat.com/css/ad/c.js'></script>
</body>
</html>