Jednoduchá aplikace se seznamem úkolů, která přebírá úkoly zadané uživatelem ve formuláři a ukládá je do databáze MySQL. Úkoly jsou také načteny z databáze a zobrazeny na webové stránce s tlačítkem Smazat vedle každého úkolu. Po kliknutí na tlačítko Odstranit se úloha odstraní z databáze.
To je to, co budeme budovat v tomto tutoriálu.
Jako obvykle vytvoříme naši databázi. Vytvořte databázi s názvem todo a v něm vytvořte tabulku s názvem úkoly. Tabulka úkolů má pouze dvě pole:
- id - int(10)
- úloha - varchar(255)
Nyní vytvořte dva soubory:
Otevřete je v textovém editoru a vložte následující kód do souboru 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>
Pokud si nyní svou stránku prohlížíte v prohlížeči, vypadá asi takto:
Přidáme styling. Přímo pod tag
přidejte tento řádek pro načtení souboru šablony stylů:</P> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <p>
Otevřete soubor style.css, který jsme vytvořili dříve, a vložte do něj tento stylingový kód:</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>
Pokud nyní obnovíme náš prohlížeč, dostaneme toto:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483918.png" /></P> <p>
Nyní napíšeme kód pro uložení zadané úlohy do databáze. </P> <p>
Úplně nahoře v souboru index.php, před úplně první řádek, přidejte tento kód:</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>
Pokud uživatel klikne na tlačítko Odeslat, úloha se uloží do databáze. Pokud však ve formuláři nebyl vyplněn žádný úkol, hodnota proměnné $errors je nastavena na <em>'musíte vyplnit úkol'. </em> Ale to se nezobrazuje. Pojďme to zobrazit.</P> <p>
Vložíme tento kód do formuláře. Přímo pod tagem <form>. Takhle:</P> <pre><code><?php if (isset($errors)) { ?>
<p><?php echo $errors; ?></p>
<?php } ?></code></pre> <p>
Pokud se pokusíme odeslat formulář s prázdnou hodnotou, dostaneme toto:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483917.png" /></P> <p>
Naše aplikace zatím ukládá úkoly do databáze, ale nezobrazuje je.</P> <p>
Co musíme udělat, je získat je z databáze a poté je zobrazit. </P> <p>
Otevřete soubor index.php a vložte tento kód ihned za koncovou značku </form> formuláře:</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>
Pokud do formuláře zadáme úkol a stiskneme tlačítko Odeslat, dostaneme toto:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483938.png" /></P> <p>
Dobrý! </P> <p>
Nechte naše tlačítko pro smazání fungovat. V horní části stránky za blok if, který ukládá úlohu do databáze, přidejte tento kód:</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>
To je vše. Pokud nyní klepneme na malé tlačítko 'x' u úkolu, bude tento úkol z databáze odstraněn.</P> <h3>Závěr</h3> <p>
Doufám, že vám to pomůže. Jednou z funkcí, kterou bych vám doporučil přidat do této aplikace jen pro další procvičení vašich dovedností, je přidat funkci úprav, kde lze příspěvek aktualizovat i poté, co byl vytvořen. Tip:Postupujte podle mého návodu na CRUD: Vytvářejte, upravujte, aktualizujte a mažte příspěvky pomocí databáze MySQL</P> <p>
Díky :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_cstextovertr">
<a class='LinkPrevArticle' href='http://cs.sqldat.com/rps/lil/1009019458.html' >Správa uživatelských účtů, role, oprávnění, autentizace PHP a MySQL </a>
<a class='LinkNextArticle' href='http://cs.sqldat.com/rps/lil/1009019460.html' >Jak vytvořit blog v PHP a MySQL databázi - Backend </a>
</div>
<section class="cspage_bot2">
<ol class="csarticle_list">
<li class="csflexstart">
<i></i>
<a href="https://cs.sqldat.com/rps/ure/1009014520.html">
<p class="cstextovertr" title="Funkce ACOS() v Oracle ">Funkce ACOS() v Oracle </p>
</a>
</li>
<li class="csflexstart">
<i></i>
<a href="https://cs.sqldat.com/rps/trb/1009000648.html">
<p class="cstextovertr" title="Jak upgradovat MariaDB 5.5 na MariaDB 10.1 na systémech CentOS/RHEL 7 a Debian ">Jak upgradovat MariaDB 5.5 na MariaDB 10.1 na systémech CentOS/RHEL 7 a Debian </p>
</a>
</li>
<li class="csflexstart">
<i></i>
<a href="https://cs.sqldat.com/rps/gee/1009001307.html">
<p class="cstextovertr" title="Předávání datové tabulky jako parametru do uložených procedur ">Předávání datové tabulky jako parametru do uložených procedur </p>
</a>
</li>
<li class="csflexstart">
<i></i>
<a href="https://cs.sqldat.com/rps/lil/1009016012.html">
<p class="cstextovertr" title="Dynamicky načítat data na div scroll pomocí php, mysql, jquery a ajax ">Dynamicky načítat data na div scroll pomocí php, mysql, jquery a ajax </p>
</a>
</li>
</ol>
</section>
</section>
</section>
<footer>
<section class="container_cshe flexbetcseo csfooter_info cs_flexalign">
<a href="https://cs.sqldat.com" class="csbottom_logo">
<img src="http://www.sqldat.com/css/img/logo.svg" alt="">
</a>
<span class="csflexstart">
© AUTORSKÁ PRÁVA
<a href="https://cs.sqldat.com">http://cs.sqldat.com</a>
VŠECHNA PRÁVA VYHRAZENA
</span>
</section>
</footer>
<script language='javascript' src='http://www.sqldat.com/css/ad/c.js'></script>
</body>
</html>