Просто приложение за списък със задачи, което приема задачи, изпратени от потребителя във формуляр, и ги записва в база данни на MySQL. Задачите също се извличат от базата данни и се показват на уеб страницата с бутон за изтриване до всяка задача. Когато се щракне върху бутона за изтриване, задачата се изтрива от базата данни.
Това е, което ще изградим в този урок.
Както обикновено, нека създадем нашата база данни. Създайте база данни, наречена todo и в него създайте таблица, наречена задачи. Таблицата със задачи има само две полета, а именно:
- id - int(10)
- задача - varchar(255)
Сега създайте два файла:
Отворете ги в текстов редактор и поставете следния код във файла 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>
Ако прегледате страницата си сега в браузъра, тя изглежда така:
Нека добавим стайлинга. Директно под маркера
добавете този ред, за да заредите файла със стилова таблица:</P> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <p>
Отворете файла style.css, който създадохме по-рано, и поставете този стилизиращ код в него:</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>
Ако обновим браузъра си сега, получаваме това:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483918.png" /></P> <p>
Сега пишем кода за запазване на изпратената задача в базата данни. </P> <p>
В горната част на файла index.php, преди първия ред, добавете този код:</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>
Това прави, че ако потребителят щракне върху бутона за изпращане, задачата се записва в базата данни. Ако обаче във формуляра не е попълнена задача, стойността на променливата $errors се задава на <em>„трябва да попълните задачата“. </em> Но това не се показва. Нека го покажем.</P> <p>
Нека поставим този код във формата. Директно под маркера <form>. Като това:</P> <pre><code><?php if (isset($errors)) { ?>
<p><?php echo $errors; ?></p>
<?php } ?></code></pre> <p>
Ако се опитаме да изпратим формуляра с празна стойност, получаваме това:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483917.png" /></P> <p>
Досега нашето приложение записва задачи в базата данни, но не ги показва.</P> <p>
Това, което трябва да направим, е да ги извлечем от базата данни и след това да ги покажем. </P> <p>
Отворете файла index.php и поставете този код веднага след затварящия маркер </form> на формуляра:</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>
Ако въведете задача във формуляра и натиснете бутона за изпращане, получаваме това:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483938.png" /></P> <p>
Добре! </P> <p>
Нека накараме бутона за изтриване да работи. В горната част на страницата, след блока if, който запазва задачата в базата данни, добавете този код:</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>
Това е всичко. Ако сега щракнем върху малкия бутон „x“ срещу задача, тази задача се изтрива в базата данни.</P> <h3>Заключение</h3> <p>
Надявам се това да ви помогне. Една функция, която бих ви препоръчал да добавите към това приложение, само за да упражните допълнително уменията си, е да добавите функцията за редактиране, при която публикация може да бъде актуализирана дори след като е била създадена. Съвет:Следвайте урока ми за CRUD: Създавайте, редактирайте, актуализирайте и изтривайте публикации с базата данни MySQL</P> <p>
Благодаря :D</P> <br>
</section>
</article>
<section id="turn-page" class="bgflexcenter">
<div class="page up bgflexalign">
<i class="prev"></i>
<a class='LinkPrevArticle' href='http://bg.sqldat.com/yws/oml/1014019458.html' >Управление на потребителски акаунти, роли, разрешения, удостоверяване на PHP и MySQL </a>
</div>
<div class="page down bgflexalign">
<a class='LinkNextArticle' href='http://bg.sqldat.com/yws/oml/1014019460.html' >Как да създадете блог в PHP и MySQL база данни - Backend </a>
<i class="next"></i>
</div>
</section>
<div class="ad5">
<script language='javascript' src='http://www.sqldat.com/css/ad/8.js'></script>
</div>
</section>
</section>
<section class="bottom bgocontainer covflexbe">
<section class="bgtype_list right">
<ol>
<li><a class='childclass' href='http://bg.sqldat.com/yws/xue/' target="_self">Database</a></li> <li><a class='childclass' href='http://bg.sqldat.com/yws/oml/' target="_self">Mysql</a></li> <li><a class='childclass' href='http://bg.sqldat.com/yws/nle/' target="_self">Oracle</a></li> <li><a class='childclass' href='http://bg.sqldat.com/yws/rpr/' target="_self">Sqlserver</a></li> <li><a class='childclass' href='http://bg.sqldat.com/yws/czl/' target="_self">PostgreSQL</a></li> <li><a class='childclass' href='http://bg.sqldat.com/yws/zxs/' target="_self">Access</a></li> <li><a class='childclass' href='http://bg.sqldat.com/yws/wue/' target="_self">SQLite</a></li> <li><a class='childclass' href='http://bg.sqldat.com/yws/ayb/' target="_self">MariaDB</a></li>
<p class="beyowyw12">
<span class="bbeowywb45"></span>
</p>
</ol>
</section>
<section class="left">
<div class="ywndivbwjw13">
<span class="wewyeonbw14"></span>
</div>
<ol class="bgarticle_list">
<li class="bghwflexstart">
<i></i>
<a href="https://bg.sqldat.com/yws/oml/1014003236.html">
<p class="bgtextover" title="Кога да използваме MyISAM и InnoDB? ">Кога да използваме MyISAM и InnoDB? </p>
<span class="ywogsoan12">
<i class="ywongieb15"></i>
</span>
</a>
</li>
<li class="bghwflexstart">
<i></i>
<a href="https://bg.sqldat.com/yws/oml/1014018535.html">
<p class="bgtextover" title="MySQL – Поправка – Грешка – Вашата парола не отговаря на текущите изисквания на политиката ">MySQL – Поправка – Грешка – Вашата парола не отговаря на текущите изисквания на политиката </p>
<span class="ywogsoan12">
<i class="ywongieb15"></i>
</span>
</a>
</li>
<li class="bghwflexstart">
<i></i>
<a href="https://bg.sqldat.com/yws/oml/1014014278.html">
<p class="bgtextover" title="DATE_SUB() Примери – MySQL ">DATE_SUB() Примери – MySQL </p>
<span class="ywogsoan12">
<i class="ywongieb15"></i>
</span>
</a>
</li>
<li class="bghwflexstart">
<i></i>
<a href="https://bg.sqldat.com/yws/oml/1014003558.html">
<p class="bgtextover" title="MySQL my.ini местоположение ">MySQL my.ini местоположение </p>
<span class="ywogsoan12">
<i class="ywongieb15"></i>
</span>
</a>
</li>
<li class="bghwflexstart">
<i></i>
<a href="https://bg.sqldat.com/yws/oml/1014003846.html">
<p class="bgtextover" title="MySQL заявка за присъединяване с помощта на like? ">MySQL заявка за присъединяване с помощта на like? </p>
<span class="ywogsoan12">
<i class="ywongieb15"></i>
</span>
</a>
</li>
</ol>
</section>
</section>
<section class="bgcolist1 bgarticle1_list bgbottom2 covflexbe bgocontainer">
<ul class="covflexbe">
<li>
<section class="bgflexalign">
<div class="bgcoibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051417030979_S.png' width='300' height='220' border='0'>
</div>
<a href="https://bg.sqldat.com/yws/czl/1014021147.html">
<p class="row bgcorow-3">
Производителност на OLTP след PostgreSQL 8.3 </p>
</a>
</section>
</li>
</ul>
<ul class="covflexbe">
<li>
<section class="bgflexalign">
<div class="bgcoibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051018133294_S.png' width='300' height='220' border='0'>
</div>
<a href="https://bg.sqldat.com/yws/rpr/1014001484.html">
<p class="row bgcorow-3">
SQL Server Trigger:Разбиране и алтернативи </p>
</a>
</section>
</li>
</ul>
<ul class="covflexbe">
<li>
<section class="bgflexalign">
<div class="bgcoibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051311312394.jpg' width='300' height='220' border='0'>
</div>
<a href="https://bg.sqldat.com/yws/ayb/1014018909.html">
<p class="row bgcorow-3">
Представяме ви платформата MariaDB X5:базата данни за всяко работно натоварване, вече във всякакъв мащаб </p>
</a>
</section>
</li>
</ul>
<ul class="covflexbe">
<li>
<section class="bgflexalign">
<div class="bgcoibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051016062030_S.png' width='300' height='220' border='0'>
</div>
<a href="https://bg.sqldat.com/yws/nle/1014000868.html">
<p class="row bgcorow-3">
Стъпка по стъпка процес на надстройка за R12.2 надстройка, част -4 (прилагане на пакет за актуализация на версия 12.2.x) </p>
</a>
</section>
</li>
</ul>
<div class="diwfhwfatwe12">
<div class="bdivbwuew13"></div>
</div>
</section>
<footer>
<section class="bgocontainer covflexbe bgfooter_info bgflexalign">
<a href="https://bg.sqldat.com" class="bgbottom_logo">
<img src="http://www.sqldat.com/css/img/logo.svg" alt="">
</a>
<span class="bghwflexstart">
© АВТОРСКИ ПРАВА
<a href="https://bg.sqldat.com">http://bg.sqldat.com</a>
ВСИЧКИ ПРАВА ЗАПАЗЕНИ
</span>
</section>
</footer>
<script language='javascript' src='http://www.sqldat.com/css/ad/c.js'></script>
</body>
</html>