Bài 5: Delete dữ liệu trong Database với php và Ajax

Đăng bởi: Minacode|Cập nhật:10-12-2023

Ok, tiếp tục thôi nào! vậy là đã insert, select và update xong rồi đúng không? Bài này mình sẽ hướng dẫn các bạn delete dữ liệu trong php nhé. Để đổi mới tí với lại cũng phù hợp với thao tác này mình sẽ dùng thư việc ajax/jquery của Javascript nhé.

Đầu tiên bạn cần link thư viện ajax/jquery vào file product_list.php.

Cứ cài đầu tiên mà nổ nhé bạn. Bạn đặt link vào trong thẻ head giúp mình

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <title>List Product</title>
</head>

Tại thẻ a của mục Delete mình sẽ thêm một hàm onclick() như sau:

    <table>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Price</th>
            <th>Option</th>
        </tr>
    <?php
    if($show_product -> num_rows >0){while($result = $show_product -> fetch_assoc()){
    ?>
        <tr>
            <td><?php echo $result['product_id'] ?></td>
            <td> <?php echo $result['product_name'] ?></td>
            <td><?php echo number_format($result['product_price']) ?></td>
            <td>
                <a href="product_edit.php?product_id=<?php echo $result['product_id'] ?>">Edit</a>|
                <a onclick="removeRow(product_id=<?php echo $result['product_id']?>,url='product_delete.php')"  href="#">Delete</a>
            </td>
        </tr>
    <?php
    }}
    ?>
    </table>

À quên, mình đã tạo thêm một thư mục TOPIC4 nên các bạn lưu ý các path khi include nhé.

Rồi, Ok bắt đầu code Ajax thôi. Phía gần sát với thẻ đóng của body mình sẽ thêm một đoạn script sau:

<script>
    function removeRow(product_id,url){
      if(confirm('Are You Sure')){
            $.ajax({
            url: url,
            data: {product_id},
            method: 'GET',
            dataType:'JSON',
            success: function (res){
              console.log(res)
            }
        }
        )
      }
    }
</script>

Mình nói sơ qua chỗ này để một số bạn chưa quen khái niệm Ajax có thể mường tượng nhé.

Mình sẽ dùng câu lệnh Jquery hoặc Javascript (tình huống này mình đang dùng Jquery) để bắt cái sự kiện click và thẻ a chứa cái text Delete đó. Trong hàm mình cài vào đó 2 biến đó là product_id và url.

Sau đó Ajax sẽ âm thầm mang 2 cái biến này qua phía bên serve để xử lý. Tại sao lại nói là âm thầm vì đơn giản bạn sẽ thấy trình duyệt của mình vẫn giữ nguyên mà không thấy nó load lại như các lệnh tương tác với sever thông thường trong php.

Mình cũng sẽ sự dụng hàm confirm() trong Jquery để xác nhận lại một lần nữa xem người dùng có chắc chắn muốn xóa dữ liệu không.

Đoạn code trên mình đang mang cái product_id qua trang product_delete.php để xử lý. Nhưng lưu ý, Bạn hoàn toàn có thể xử lý nó ngày trên trang product_list.php này nhé.

Bây giờ mình sẽ mở trình duyệt lên và kiểm tra tại mục network ngay trên đó.

Kiểm tra Ajax trên Network của trình duyệt

Bạn thấy có lỗi 404 không. Nguyên nhân là vì mình vẫn chưa tạo file product_delete.php

Bây giờ mình tạo file này trong thư mục view và thêm đoạn code sau:

<?php
$base_url = 'C:\xampp\htdocs';
include_once ($base_url.'\TOPIC4\class\ProductClass.php');
if ($_SERVER["REQUEST_METHOD"] == "GET") {
    $ProductClass = new ProductClass;
    $product_id = $_GET['product_id'];
    $delete_product =  $ProductClass -> delete_product($product_id);
    if($delete_product) {
      $data = json_encode([
        'success' => true
    ]);

Đến đây bạn có hình dung được bước tiếp theo không. Đúng rồi, bạn cần vào ProductClass.php và tạo một method delete_product() cho nó.

public function delete_product($product_id){
    $query = "DELETE FROM product WHERE product_id=$product_id";
    $result = $this -> Database -> delete($query);
    return $result;
}

Và giờ nhìn lại xem file ProductClass.php của chúng ta sẽ như thế nào

<?php
include_once ($base_url.'\TOPIC4\lib\database.php');
class ProductClass
{
    public $Database;
    public function __construct() {
        $this -> Database = new Database;
    }
public function insert_product($data) {
    $product_name = $data['product_name'];
    $product_price = $data['product_price'];
    $query = "INSERT INTO product (product_name, product_price)
    VALUES ('$product_name','$product_price')";
    $result = $this -> Database-> insert($query);
    return $result;
}
public function show_product(){
    $query = "SELECT * FROM product";
    $result = $this -> Database -> select($query);
    return $result;
}
public function get_product($product_id){
    $query = "SELECT * FROM product WHERE product_id='$product_id'";
    $result = $this -> Database -> select($query) -> fetch_assoc();
    return $result;
}
public function update_product($data, $product_id) {
    $product_name = $data['product_name'];
    $product_price = $data['product_price'];
    $query = "UPDATE product SET product_name='$product_name',product_price='$product_price' WHERE product_id=$product_id";
    $result = $this -> Database -> update($query);
    header('location:' . 'product_list.php');
    return $result;
}
public function delete_product($product_id){
    $query = "DELETE FROM product WHERE product_id=$product_id";
    $result = $this -> Database -> delete($query);
    return $result;
}
}

Kiểu dữ liệu mình đang truyền qua Ajax là Json nên kết quả của method delete_product () sẽ trả về phía giao diện người dùng một data kiểu Json.

Bạn kiểm tra nó ở mục Response trong Network hoặc console của trình duyệt nhé

OK, Vậy là ông PHP đã thực hiện lệnh xóa phía server xong và trả về cho Ajax một cái data dạng Json với nội dung:

{"success":true}

Nhận được cái data này mình sẽ xử lý tiếp đoạn script như sau:

<script>
    function removeRow(product_id,url){
      if(confirm('Are You Sure')){
            $.ajax({
            url: url,
            data: {product_id},
            method: 'GET',
            dataType:'JSON',
            success: function (res){
                if(res.success = true){
                    location.reload();
                }
            }
        }
        )
      }
    }
</script>

Tức là nếu nhận được tín hiệu success = true thì thực thi câu lệnh location.reload() để load lại trang.

Nào bây giờ thực hiện xóa để xem kết quả nhé!

Product_list.php hiện tại

<?php
$base_url = 'C:\xampp\htdocs';
include_once ($base_url.'\TOPIC4\class\ProductClass.php');
$ProductClass = new ProductClass;
$show_product = $ProductClass ->show_product();
// var_dump($show_product);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <title>List Product</title>
</head>
<style>
    table {
        width: 50%;
        border-collapse: collapse;
    }
    table,tr,th,td {
        border: 1px solid grey;
        text-align: center;
    }
</style>
<body>
    <table>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Price</th>
            <th>Option</th>    
        </tr>
    <?php
    if($show_product -> num_rows >0){while($result = $show_product -> fetch_assoc()){

    ?>
        <tr>
            <td><?php echo $result['product_id'] ?></td>
            <td> <?php echo $result['product_name'] ?></td>
            <td><?php echo number_format($result['product_price']) ?></td>
            <td>
                <a href="product_edit.php?product_id=<?php echo $result['product_id'] ?>">Edit</a>|
                <a onclick="removeRow(product_id=<?php echo $result['product_id']?>,url='product_delete.php')" href="#">Delete</a>
            </td>
        </tr>
    <?php
    }}
    ?>
    </table>
<script>
    function removeRow(product_id,url){
        if(confirm('Are You Sure')){
            $.ajax({
            url: url,
            data: {product_id},
            method: 'GET',
            dataType:'JSON',
            success: function (res){
                if(res.success = true){
                    location.reload();
                }
            }
        }
        )
      }
    }
</script>
</body>
</html>

Xem lại foder TOPIC 4 của chúng ta hiện tại có gì: