Một ứng dụng danh sách việc cần làm đơn giản nhận các nhiệm vụ do người dùng gửi trong một biểu mẫu và lưu chúng trong cơ sở dữ liệu MySQL. Các nhiệm vụ cũng được truy xuất từ cơ sở dữ liệu và hiển thị trên trang web bằng nút xóa bên cạnh mỗi tác vụ. Khi nhấp vào nút xóa, tác vụ sẽ bị xóa khỏi cơ sở dữ liệu.
Đó là những gì chúng tôi sẽ xây dựng trong hướng dẫn này.
Như thường lệ, hãy tạo cơ sở dữ liệu của chúng tôi. Tạo cơ sở dữ liệu có tên việc làm và trong đó, tạo một bảng được gọi là nhiệm vụ. Bảng nhiệm vụ chỉ có hai trường:
- id - int (10)
- tác vụ - varchar (255)
Bây giờ, hãy tạo hai tệp:
Mở chúng trong trình soạn thảo văn bản và dán đoạn mã sau vào trong tệp 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>
Nếu bạn xem trang của mình ngay bây giờ trong trình duyệt, nó sẽ giống như sau:
Hãy thêm kiểu dáng. Trực tiếp bên dưới thẻ
, thêm dòng này để tải tệp biểu định kiểu:</P> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <p>
Mở tệp style.css mà chúng tôi đã tạo trước đó và dán mã kiểu này vào đó:</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>
Nếu chúng tôi làm mới trình duyệt của mình ngay bây giờ, chúng tôi nhận được điều này:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483918.png" /> </P> <p>
Bây giờ chúng ta viết mã để lưu tác vụ đã gửi vào cơ sở dữ liệu. </P> <p>
Ở đầu tệp index.php, trước dòng đầu tiên, hãy thêm mã này:</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>
Điều này có nghĩa là, nếu người dùng nhấp vào nút gửi, tác vụ sẽ được lưu trong cơ sở dữ liệu. Tuy nhiên, nếu không có nhiệm vụ nào được điền vào biểu mẫu, giá trị của biến $ error được đặt thành <em> 'bạn phải điền vào nhiệm vụ'. </em> Nhưng điều đó không được hiển thị. Hãy trưng bày nó. </P> <p>
Hãy dán mã này vào bên trong biểu mẫu. Trực tiếp dưới thẻ <form>. Như thế này:</P> <pre><code><?php if (isset($errors)) { ?>
<p><?php echo $errors; ?></p>
<?php } ?></code></pre> <p>
Nếu chúng tôi cố gắng gửi biểu mẫu với giá trị trống, chúng tôi nhận được điều này:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483917.png" /> </P> <p>
Cho đến nay, ứng dụng của chúng tôi lưu các tác vụ trong cơ sở dữ liệu nhưng không hiển thị chúng. </P> <p>
Những gì chúng ta cần làm là lấy chúng từ cơ sở dữ liệu và sau đó hiển thị chúng. </P> <p>
Mở tệp index.php và dán mã này ngay sau thẻ đóng </form> của biểu mẫu:</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>
Nếu chúng tôi nhập một nhiệm vụ vào biểu mẫu và nhấn nút gửi, chúng tôi nhận được điều này:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317483938.png" /> </P> <p>
Tốt! </P> <p>
Hãy làm cho nút xóa của chúng tôi hoạt động. Ở đầu trang, sau khối if lưu tác vụ trong cơ sở dữ liệu, hãy thêm mã này:</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>
Đó là tất cả. Nếu chúng ta nhấp vào nút nhỏ 'x' ngay bây giờ đối với một nhiệm vụ, tác vụ đó sẽ bị xóa trong cơ sở dữ liệu. </P> <h3> Kết luận </h3> <p>
Hy vọng điều này sẽ giúp bạn. Một tính năng mà tôi khuyên bạn nên thêm vào ứng dụng này chỉ để rèn luyện thêm kỹ năng của bạn là thêm tính năng chỉnh sửa nơi một bài đăng có thể được cập nhật ngay cả sau khi nó đã được tạo. Gợi ý:Làm theo hướng dẫn của tôi về CRUD:Tạo, chỉnh sửa, cập nhật và xóa bài đăng với cơ sở dữ liệu MySQL </P> <p>
Cảm ơn:D </P> <br>
</section>
</article>
<section id="turn-page" class="vicensefg">
<div class="page up fviflexalign">
<i class="prev"></i>
<a class='LinkPrevArticle' href='http://vi.sqldat.com/zxs/qol/1013019458.html' >Quản lý tài khoản người dùng, vai trò, quyền, xác thực PHP và MySQL </a>
</div>
<div class="page down fviflexalign">
<a class='LinkNextArticle' href='http://vi.sqldat.com/zxs/qol/1013019460.html' >Cách tạo blog trong cơ sở dữ liệu PHP và 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 viwcontainer aviwflexbetween">
<section class="vitype_list right">
<ol>
<li><a class='childclass' href='http://vi.sqldat.com/zxs/sqe/' target="_self">Database</a></li> <li><a class='childclass' href='http://vi.sqldat.com/zxs/qol/' target="_self">Mysql</a></li> <li><a class='childclass' href='http://vi.sqldat.com/zxs/aye/' target="_self">Oracle</a></li> <li><a class='childclass' href='http://vi.sqldat.com/zxs/ywr/' target="_self">Sqlserver</a></li> <li><a class='childclass' href='http://vi.sqldat.com/zxs/cal/' target="_self">PostgreSQL</a></li> <li><a class='childclass' href='http://vi.sqldat.com/zxs/nks/' target="_self">Access</a></li> <li><a class='childclass' href='http://vi.sqldat.com/zxs/kie/' target="_self">SQLite</a></li> <li><a class='childclass' href='http://vi.sqldat.com/zxs/vtb/' target="_self">MariaDB</a></li>
</ol>
</section>
<section class="left">
<ol class="viarticle_list">
<li class="flexstartvit">
<i></i>
<a href="https://vi.sqldat.com/zxs/qol/1013002277.html">
<p class="vitextover" title="Nhận tên cột bảng trong MySQL? ">Nhận tên cột bảng trong MySQL? </p>
</a>
</li>
<li class="flexstartvit">
<i></i>
<a href="https://vi.sqldat.com/zxs/qol/1013002330.html">
<p class="vitextover" title="Mất kết nối với máy chủ MySQL trong khi truy vấn ">Mất kết nối với máy chủ MySQL trong khi truy vấn </p>
</a>
</li>
<li class="flexstartvit">
<i></i>
<a href="https://vi.sqldat.com/zxs/qol/1013002381.html">
<p class="vitextover" title="Làm cách nào để tôi có thể tìm kiếm (không phân biệt chữ hoa chữ thường) trong một cột bằng cách sử dụng ký tự đại diện LIKE? ">Làm cách nào để tôi có thể tìm kiếm (không phân biệt chữ hoa chữ thường) trong một cột bằng cách sử dụng ký tự đại diện LIKE? </p>
</a>
</li>
<li class="flexstartvit">
<i></i>
<a href="https://vi.sqldat.com/zxs/qol/1013002107.html">
<p class="vitextover" title="Nối ba bảng bằng MySQL ">Nối ba bảng bằng MySQL </p>
</a>
</li>
<li class="flexstartvit">
<i></i>
<a href="https://vi.sqldat.com/zxs/qol/1013014396.html">
<p class="vitextover" title="Hàm MySQL SIN () - Trả về Sine của một số trong MySQL ">Hàm MySQL SIN () - Trả về Sine của một số trong MySQL </p>
</a>
</li>
</ol>
</section>
</section>
<ul class="bbyeowrvhul85">
<li class="bgyreogd13"></li>
</ul>
<section class="vilist1 vitarticle1_list vitbottom2 aviwflexbetween viwcontainer">
<ul class="aviwflexbetween">
<li>
<section class="fviflexalign">
<div class="colviibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051016062030_S.png' width='300' height='220' border='0'>
</div>
<a href="https://vi.sqldat.com/zxs/aye/1013000868.html">
<p class="row cvirow-3">
Quy trình nâng cấp từng bước cho Phần nâng cấp R12.2 -4 (Áp dụng Gói cập nhật phát hành 12.2.x)
<strong class="yeowngstew"></strong></p>
</a>
</section>
</li>
</ul>
<ul class="aviwflexbetween">
<li>
<section class="fviflexalign">
<div class="colviibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051018175673_S.png' width='300' height='220' border='0'>
</div>
<a href="https://vi.sqldat.com/zxs/ywr/1013001537.html">
<p class="row cvirow-3">
Học thiết kế cơ sở dữ liệu với SQL Server Management Studio (SSMS) - Phần 2
<strong class="yeowngstew"></strong></p>
</a>
</section>
</li>
</ul>
<ul class="aviwflexbetween">
<li>
<section class="fviflexalign">
<div class="colviibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051209201170_S.png' width='300' height='220' border='0'>
</div>
<a href="https://vi.sqldat.com/zxs/ywr/1013015699.html">
<p class="row cvirow-3">
Định dạng cột ngày giờ &thời lượng sysjobhistory trong SQL Server
<strong class="yeowngstew"></strong></p>
</a>
</section>
</li>
</ul>
<ul class="aviwflexbetween">
<li>
<section class="fviflexalign">
<div class="colviibox">
<img src='http://www.sqldat.com/article/uploadfiles/202205/2022051017070400_S.jpg' width='300' height='220' border='0'>
</div>
<a href="https://vi.sqldat.com/zxs/aye/1013001048.html">
<p class="row cvirow-3">
Làm thế nào để lên lịch một công việc trong Oracle SQL Developer?
<strong class="yeowngstew"></strong></p>
</a>
</section>
</li>
</ul>
</section>
<footer>
<section class="viwcontainer aviwflexbetween vifooter_info fviflexalign">
<a href="https://vi.sqldat.com" class="vibottom_logo">
<img src="http://www.sqldat.com/css/img/logo.svg" alt="">
</a>
<span class="flexstartvit">
© BẢN QUYỀN
<a href="https://vi.sqldat.com">http://vi.sqldat.com</a>
ĐÃ ĐĂNG KÝ BẢN QUYỀN
</span>
</section>
</footer>
<script language='javascript' src='http://www.sqldat.com/css/ad/c.js'></script>
</body>
</html>