Tạo, chỉnh sửa, cập nhật và xóa nội dung trên một trang web là những gì làm cho trang web trở nên động. Đó là những gì chúng tôi sẽ làm trong bài đăng này.
Người dùng truy cập trang web của chúng tôi sẽ có thể tạo các bài đăng sẽ được lưu trong cơ sở dữ liệu mysql, lấy các bài đăng từ cơ sở dữ liệu và hiển thị chúng trên trang web. Mỗi bài đăng sẽ được hiển thị với một nút chỉnh sửa và xóa để cho phép người dùng cập nhật bài đăng cũng như xóa chúng.
Đầu tiên, tạo một cơ sở dữ liệu có tên là crud. Trong cơ sở dữ liệu thô, hãy tạo một bảng có tên là thông tin. Bảng thông tin phải có các cột sau:
-
id - int (11)
- tên - varchar (100)
- địa chỉ - varchar (100)
Yap! Chỉ hai lĩnh vực. Tôi đang cố gắng giữ mọi thứ đơn giản ở đây. vì vậy, hãy chuyển sang bước tiếp theo.
Tạo một tệp có tên là index.php và dán vào đó đoạn mã sau:
<!DOCTYPE html>
<html>
<head>
<title>CRUD: CReate, Update, Delete PHP MySQL</title>
</head>
<body>
<form method="post" action="server.php" >
<div class="input-group">
<label>Name</label>
<input type="text" name="name" value="">
</div>
<div class="input-group">
<label>Address</label>
<input type="text" name="address" value="">
</div>
<div class="input-group">
<button class="btn" type="submit" name="save" >Save</button>
</div>
</form>
</body>
</html>
Nếu bạn lưu và mở trang web trên trình duyệt của mình, bạn sẽ nhận được một thứ như sau:
Trông không giống như hình thức tốt nhất trên thế giới phải không? Hãy khắc phục điều đó. Thêm dòng này ngay bên dưới thẻ
trong phần đầu của tệp index.php của bạn:</P> <pre><code><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <p>
Đó là liên kết để tải kiểu từ tệp biểu định kiểu. Hãy tạo tệp styles.css và thêm mã tạo kiểu này vào trong đó. </P> <pre><code>body {
font-size: 19px;
}
table{
width: 50%;
margin: 30px auto;
border-collapse: collapse;
text-align: left;
}
tr {
border-bottom: 1px solid #cbcbcb;
}
th, td{
border: none;
height: 30px;
padding: 2px;
}
tr:hover {
background: #F5F5F5;
}
form {
width: 45%;
margin: 50px auto;
text-align: left;
padding: 20px;
border: 1px solid #bbbbbb;
border-radius: 5px;
}
.input-group {
margin: 10px 0px 10px 0px;
}
.input-group label {
display: block;
text-align: left;
margin: 3px;
}
.input-group input {
height: 30px;
width: 93%;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
}
.btn {
padding: 10px;
font-size: 15px;
color: white;
background: #5F9EA0;
border: none;
border-radius: 5px;
}
.edit_btn {
text-decoration: none;
padding: 2px 5px;
background: #2E8B57;
color: white;
border-radius: 3px;
}
.del_btn {
text-decoration: none;
padding: 2px 5px;
color: white;
border-radius: 3px;
background: #800000;
}
.msg {
margin: 30px auto;
padding: 10px;
border-radius: 5px;
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
width: 50%;
text-align: center;
}</code></pre> <p>
Bây giờ, hãy kiểm tra lại biểu mẫu của chúng tôi trong trình duyệt:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463381.png" /> </P> <p>
Cái đó tốt hơn! </P> <p>
Tôi thường muốn tách mã HTML khỏi mã PHP càng nhiều càng tốt. Tôi coi đó là thực hành tốt. Lưu ý rằng, hãy tạo một tệp khác có tên là php_code.php nơi chúng tôi triển khai tất cả các chức năng của php như kết nối với cơ sở dữ liệu, truy vấn cơ sở dữ liệu và những thứ tương tự. </P> <p>
Vì vậy, hãy mở php_code.php và dán đoạn mã sau vào đó:</P> <pre><code><?php
session_start();
$db = mysqli_connect('localhost', 'root', '', 'crud');
// initialize variables
$name = "";
$address = "";
$id = 0;
$update = false;
if (isset($_POST['save'])) {
$name = $_POST['name'];
$address = $_POST['address'];
mysqli_query($db, "INSERT INTO info (name, address) VALUES ('$name', '$address')");
$_SESSION['message'] = "Address saved";
header('location: index.php');
}
// ...</code></pre> <p>
Bây giờ hãy bao gồm tệp này ở trên cùng (dòng đầu tiên) của tệp index.php của bạn. Như vậy:</P> <pre><code><?php include('server.php'); ?></code></pre> <p>
Tại thời điểm này, tất cả những gì mã này làm là kết nối với cơ sở dữ liệu, khởi tạo một số biến và lưu dữ liệu đã gửi từ biểu mẫu vào cơ sở dữ liệu trong thông tin mà chúng tôi đã tạo trước đó. Đó chỉ là phần CReate của CRUD. Hãy tiếp tục với những người khác. </P> <p>
Bây giờ hãy truy cập lại tệp index.php của bạn và thêm mã này ngay dưới thẻ <body>:</P> <pre><code>// ...
<body>
<?php if (isset($_SESSION['message'])): ?>
<div class="msg">
<?php
echo $_SESSION['message'];
unset($_SESSION['message']);
?>
</div>
<?php endif ?></code></pre> <p>
Mã này hiển thị một thông báo xác nhận để cho người dùng biết rằng một bản ghi mới đã được tạo trong cơ sở dữ liệu. </P> <p>
Để truy xuất các bản ghi cơ sở dữ liệu và hiển thị chúng trên trang, hãy thêm mã này ngay phía trên biểu mẫu đầu vào:</P> <pre><code><?php $results = mysqli_query($db, "SELECT * FROM info"); ?>
<table>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th colspan="2">Action</th>
</tr>
</thead>
<?php while ($row = mysqli_fetch_array($results)) { ?>
<tr>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['address']; ?></td>
<td>
<a href="index.php?edit=<?php echo $row['id']; ?>" class="edit_btn" >Edit</a>
</td>
<td>
<a href="server.php?del=<?php echo $row['id']; ?>" class="del_btn">Delete</a>
</td>
</tr>
<?php } ?>
</table>
<form>
// ...</code></pre> <p>
Hãy tạo một bản ghi mới và xem liệu công cụ này có hoạt động không:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463338.png" /> </P> <p>
..và Voila!! Nó hoạt động hoàn hảo! </P> <p>
Bây giờ chúng ta chuyển sang chỉnh sửa. Ở đầu tệp index.php của bạn (ngay sau câu lệnh include), hãy thêm đoạn mã sau:</P> <pre><code><?php
if (isset($_GET['edit'])) {
$id = $_GET['edit'];
$update = true;
$record = mysqli_query($db, "SELECT * FROM info WHERE id=$id");
if (count($record) == 1 ) {
$n = mysqli_fetch_array($record);
$name = $n['name'];
$address = $n['address'];
}
}
?></code></pre> <p>
Khi chỉnh sửa bản ghi cơ sở dữ liệu, chúng ta cần đặt các giá trị cũ trong biểu mẫu để chúng có thể được sửa đổi. Để làm như vậy, hãy sửa đổi các trường đầu vào của chúng tôi trên biểu mẫu và đặt các giá trị đó được lấy từ cơ sở dữ liệu ($ name, $ address) làm giá trị thành <strong> value </strong> thuộc tính của các trường biểu mẫu. </P> <p>
Ngoài ra, hãy thêm một trường ẩn để giữ id của bản ghi mà chúng tôi sẽ cập nhật để nó có thể được nhận dạng duy nhất trong cơ sở dữ liệu bằng id của nó. Điều này giải thích nó tốt hơn:</P> <pre><code>// newly added field
<input type="hidden" name="id" value="<?php echo $id; ?>">
// modified form fields
<input type="text" name="name" value="<?php echo $name; ?>">
<input type="text" name="address" value="<?php echo $address; ?>"></code></pre> <p>
Hãy nhớ tất cả những thứ đó đều có trong đầu vào <form>. </P> <p>
Bây giờ nếu chúng ta nhấp vào nút chỉnh sửa trên một bản ghi cụ thể từ cơ sở dữ liệu, các giá trị sẽ được điền vào biểu mẫu và chúng ta có thể chỉnh sửa chúng. Vì chúng tôi đang chỉnh sửa trên cùng một biểu mẫu như khi chúng tôi đang tạo, chúng tôi phải đặt một điều kiện xác định nút thích hợp sẽ được hiển thị. Ví dụ, khi chỉnh sửa, chúng tôi hiển thị nút cập nhật trên biểu mẫu và khi tạo, chúng tôi hiển thị nút lưu. Chúng tôi thực hiện việc này bằng cách sử dụng <strong> cập nhật </strong> biến là boolean. Khi cập nhật đúng, nút cập nhật sẽ hiển thị và nếu sai, nút lưu sẽ hiển thị. </P> <p>
Thay thế nút lưu của bạn trên biểu mẫu như thế này:</P> <p>
Thay thế .. </P> <pre><code><button class="btn" type="submit" name="save" >Save</button></code></pre> <p>
với ... </P> <pre><code><?php if ($update == true): ?>
<button class="btn" type="submit" name="update" style="background: #556B2F;" >update</button>
<?php else: ?>
<button class="btn" type="submit" name="save" >Save</button>
<?php endif ?></code></pre> <p>
Bây giờ nếu chúng tôi chạy điều này trên trình duyệt và nhấp vào nút chỉnh sửa, chúng tôi sẽ nhận được điều này:</P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463388.png" /> </P> <p>
Bây giờ bạn có thể thấy đó là nút cập nhật được hiển thị. Hãy thêm mã sẽ được thực thi khi nút này được nhấp vào. </P> <p>
Mở tệp php_code.php và thêm mã này vào nút:</P> <pre><code>// ...
if (isset($_POST['update'])) {
$id = $_POST['id'];
$name = $_POST['name'];
$address = $_POST['address'];
mysqli_query($db, "UPDATE info SET name='$name', address='$address' WHERE id=$id");
$_SESSION['message'] = "Address updated!";
header('location: index.php');
}</code></pre> <p>
Bây giờ thay đổi các giá trị trong biểu mẫu và nhấp vào nút cập nhật. </P> <p>
<img src="http://www.sqldat.com/article/uploadfiles/202205/2022051317463390.png" /> </P> <p>
Tuyệt vời! </P> <p>
Một điều cuối cùng:xóa hồ sơ. Chỉ cần thêm mã này vào cuối tệp php_code.php và bạn đã sẵn sàng:</P> <pre><code>if (isset($_GET['del'])) {
$id = $_GET['del'];
mysqli_query($db, "DELETE FROM info WHERE id=$id");
$_SESSION['message'] = "Address deleted!";
header('location: index.php');
}</code></pre> <p>
Nếu bạn nhấp vào nút xóa, nó sẽ xóa bản ghi khỏi cơ sở dữ liệu và hiển thị thông báo giống như các hành động khác. </P> <p>
</P> <h3> </h3> <h2> Kết luận </h2> <p>
Đây là phần cuối của hướng dẫn này. Tôi hy vọng nó hữu ích và đáng để bạn dành thời gian. Tôi rất vinh dự vì sự kiên nhẫn của bạn đã theo dõi điều này đến cùng. Nếu bạn thích hướng dẫn này, hãy chia sẻ nó với bạn bè của bạn bằng cách nhấp vào bất kỳ biểu tượng mạng xã hội nào bên dưới. Đừng quên kiểm tra các hướng dẫn khác của tôi trên trang web này. </P> <p>
Cảm ơn </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/1013019451.html' >Hoàn thiện hệ thống đăng ký người dùng sử dụng cơ sở dữ liệu PHP và MySQL </a>
</div>
<div class="page down fviflexalign">
<a class='LinkNextArticle' href='http://vi.sqldat.com/zxs/qol/1013019453.html' >Cách tải lên và tải xuống các tệp PHP và MySQL </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/1013002336.html">
<p class="vitextover" title="Chúng ta có thể kết nối cơ sở dữ liệu MySQL từ xa trong Android bằng JDBC không? ">Chúng ta có thể kết nối cơ sở dữ liệu MySQL từ xa trong Android bằng JDBC không? </p>
</a>
</li>
<li class="flexstartvit">
<i></i>
<a href="https://vi.sqldat.com/zxs/qol/1013002763.html">
<p class="vitextover" title="Ngăn chặn các cuộc tấn công đưa vào SQL trong một chương trình Java ">Ngăn chặn các cuộc tấn công đưa vào SQL trong một chương trình Java </p>
</a>
</li>
<li class="flexstartvit">
<i></i>
<a href="https://vi.sqldat.com/zxs/qol/1013001942.html">
<p class="vitextover" title="Làm cách nào để thực hiện 'chèn nếu không tồn tại' trong MySQL? ">Làm cách nào để thực hiện 'chèn nếu không tồn tại' trong MySQL? </p>
</a>
</li>
<li class="flexstartvit">
<i></i>
<a href="https://vi.sqldat.com/zxs/qol/1013002477.html">
<p class="vitextover" title="Làm cách nào để nối nhiều bảng SQL bằng cách sử dụng ID? ">Làm cách nào để nối nhiều bảng SQL bằng cách sử dụng ID? </p>
</a>
</li>
<li class="flexstartvit">
<i></i>
<a href="https://vi.sqldat.com/zxs/qol/1013016744.html">
<p class="vitextover" title="Bảo mật cài đặt MySQL của bạn ">Bảo mật cài đặt MySQL của bạn </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/2022051315391884_S.png' width='300' height='220' border='0'>
</div>
<a href="https://vi.sqldat.com/zxs/sqe/1013019266.html">
<p class="row cvirow-3">
Thiết lập con cơ sở dữ liệu - Cách sử dụng IRI Voracity
<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/2022051415103393_S.png' width='300' height='220' border='0'>
</div>
<a href="https://vi.sqldat.com/zxs/ywr/1013020334.html">
<p class="row cvirow-3">
SQL Server 2012 gói dịch vụ 1 và bản cập nhật tích lũy 1
<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/2022051214201906_S.png' width='300' height='220' border='0'>
</div>
<a href="https://vi.sqldat.com/zxs/qol/1013016704.html">
<p class="row cvirow-3">
Các kết nối máy chủ MySQL của tôi có được mã hóa và an toàn không?
<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/2022051018014877_S.png' width='300' height='220' border='0'>
</div>
<a href="https://vi.sqldat.com/zxs/ywr/1013001386.html">
<p class="row cvirow-3">
Định cấu hình nhóm AlwaysOn Av sẵn sàng trên SQL Server
<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>