Hướng dẫn crud table javascript

Question

Chúng ta sẽ cùng tạo chức năng CRUD (Create, Read, Update, Delete) một danh mục phẳng. Cụ thể là danh mục có liên kết khóa ngoại Sản phẩm

Nội dung chính Show

Sơ đồ ER các mối quan hệ liên quan đến table sanpham
Step 1: tạo cấu trúc thư mục cho chức năng CRUD Sản phẩm
Step 2: tạo chức năng index dùng để hiển thị màn hình danh sách các Sản phẩm có trong database
Step 2.2: bổ sung thư viên DataTables để tạo hiệu ứng phân trang
Step 3: tạo chức năng create dùng để hiển thị FORM thêm mới Sản phẩm
Step 4: tạo chức năng edit dùng để hiển thị FORM hiệu chỉnh Sản phẩm
Step 5.2: bổ sung popup cảnh báo khi xóa, sử dụng thư viện SweetAlert
Step 5.2: xử lý cảnh báo khi xóa
Step 6: bổ sung menu chức năng Quản lý Sản phẩm bên sidebar

Sơ đồ ER các mối quan hệ liên quan đến table sanpham

Trong table sanpham có 3 khóa ngoại (Foreign key) liên kết đến 3 table loaisanpham, nhasanxuat, khuyenmai. Do đó, thông thường trong các chức năng CRUD của table sanpham, chúng ta cũng cần phải lấy dữ liệu của những table cha (loaisanpham, nhasanxuat, khuyenmai).

Step 1: tạo cấu trúc thư mục cho chức năng CRUD Sản phẩm

Để tiện cho việc quản lý, ta sẽ tạo cấu trúc thư mục tương ứng với tên của từng chức năng

Tạo thư mục /backend/functions/sanpham dùng để quản lý các chức năng CRUD của danh mục Nhà cung cấp

Step 2: tạo chức năng index dùng để hiển thị màn hình danh sách các Sản phẩm có trong database

Tạo file /backend/functions/sanpham/index.php để xử lý logic/nghiệp vụ
Workflow của chức năng này:
- Cần phải JOIN đến các table cha liên quan để lấy thông tin
- Cần phải định dạng (format) để hiển thị dữ liệu một cách trực quan (như ngày tháng, số tiền, ...)
Nội dung file:







    
    



    
    
    

    
        
            
            
            

            
                
                    Danh sách
                

                
                 $row['sp_ma'],
                        'sp_ten' => $row['sp_ten'],
                        // Sử dụng hàm number_format(số tiền, số lẻ thập phân, dấu phân cách số lẻ, dấu phân cách hàng nghìn) 
                        // để định dạng số khi hiển thị trên giao diện. 
                        // Vd: 15800000 -> format thành 15,800,000.66 vnđ
                        'sp_gia' => number_format($row['sp_gia'], 2, ".", ",") . ' vnđ',
                        'sp_giacu' => number_format($row['sp_giacu'], 2, ".", ",") . ' vnđ',
                        'sp_mota_ngan' => $row['sp_mota_ngan'],
                        'sp_mota_chitiet' => $row['sp_mota_chitiet'],
                        'sp_ngaycapnhat' => date('d/m/Y H:i:s', strtotime($row['sp_ngaycapnhat'])),
                        'sp_soluong' => number_format($row['sp_soluong'], 0, ".", ","),
                        'lsp_ma' => $row['lsp_ma'],
                        'nsx_ma' => $row['nsx_ma'],
                        'km_ma' => $row['km_ma'],
                        // Các cột dữ liệu lấy từ liên kết khóa ngoại
                        'lsp_ten' => $row['lsp_ten'],
                        'nsx_ten' => $row['nsx_ten'],
                        'km_tomtat' => $km_tomtat,
                    );
                }
                ?>

                
                
                    Thêm mới
                
                
                    
                        
                            Mã Sản phẩm
                            Tên Sản phẩm
                            Giá
                            Giá cũ
                            Mô tả
                            Ngày cập nhật
                            Số lượng
                            Loại sản phẩm
                            Nhà sản xuất
                            Khuyến mãi
                            Hành động
                        
                    
                    
                        
                        
                            
                            
                            
                            
                            
                                
                                
                                    
                                
                            
                            
                            
                            
                            
                            
                            
                                
                                
                                    Sửa
                                

                                
                                
                                    Xóa

Step 2.2: bổ sung thư viên DataTables để tạo hiệu ứng phân trang

Download thư viện DataTable: https://datatables.net/
Giải nén vào thư mục quản lý thư viện Frontend: /assets/vendor/DataTables
Liên kết thư viện vào trang Danh sách, hiệu chỉnh file /backend/functions/sanpham/index.php




    
    
    
    Danh sách Hình thức thanh toán

    

    
    
    


    
    
    
    

...

Viết code áp dụng DataTables vào danh sách của bạn.
Lưu ý: cần viết theo đúng chuẩn của Table HTML, phải có thẻ thead, tbody




    
    
    
    Danh sách Hình thức thanh toán

    

    
    


    
    
    
    


    
        
            
                
                
                
            
            
                Danh sách Sản phẩm
                ...

                Thêm mới
                
                    
                        
                            Mã sản phẩm
                            Tên sản phẩm
                            Giá sản phẩm
                            Loại sản phẩm
                            Nhà sản xuất
                            Khuyến mãi
                            hành động
                        
                    
                    
                        
                        
                            
                            
                            
                            
                            

                            
                        
                            
                                Sửa
                                Xóa

Step 3: tạo chức năng create dùng để hiển thị FORM thêm mới Sản phẩm

Tạo file /backend/functions/sanpham/create.php để xử lý logic/nghiệp vụ
Workflow của chức năng này:
- Cần phải SELECT dữ liệu của các table cha liên quan (loaisanpham, nhasanxuat, khuyenmai)
- Trình diễn các table cha này bằng SELECT OPTION trong HTML
Nội dung file:







    
    



    
    
    

    
        
            
            
            

            
                
                    Thêm mới
                

                
                 $rowLoaiSanPham['lsp_ma'],
                        'lsp_ten' => $rowLoaiSanPham['lsp_ten'],
                        'lsp_mota' => $rowLoaiSanPham['lsp_mota'],
                    );
                }
                /* --- End Truy vấn dữ liệu Loại sản phẩm --- */

                /* --- 
                --- 3. Truy vấn dữ liệu Nhà sản xuất 
                --- 
                */
                // Chuẩn bị câu truy vấn Nhà sản xuất
                $sqlNhaSanXuat = "select * from `nhasanxuat`";

                // Thực thi câu truy vấn SQL để lấy về dữ liệu
                $resultNhaSanXuat = mysqli_query($conn, $sqlNhaSanXuat);

                // Khi thực thi các truy vấn dạng SELECT, dữ liệu lấy về cần phải phân tích để sử dụng
                // Thông thường, chúng ta sẽ sử dụng vòng lặp while để duyệt danh sách các dòng dữ liệu được SELECT
                // Ta sẽ tạo 1 mảng array để chứa các dữ liệu được trả về
                $dataNhaSanXuat = [];
                while ($rowNhaSanXuat = mysqli_fetch_array($resultNhaSanXuat, MYSQLI_ASSOC)) {
                    $dataNhaSanXuat[] = array(
                        'nsx_ma' => $rowNhaSanXuat['nsx_ma'],
                        'nsx_ten' => $rowNhaSanXuat['nsx_ten'],
                    );
                }
                /* --- End Truy vấn dữ liệu Nhà sản xuất --- */

                /* --- 
                --- 4. Truy vấn dữ liệu Khuyến mãi
                --- 
                */
                // Chuẩn bị câu truy vấn Khuyến mãi
                $sqlKhuyenMai = "select * from `khuyenmai`";

                // Thực thi câu truy vấn SQL để lấy về dữ liệu
                $resultKhuyenMai = mysqli_query($conn, $sqlKhuyenMai);

                // Khi thực thi các truy vấn dạng SELECT, dữ liệu lấy về cần phải phân tích để sử dụng
                // Thông thường, chúng ta sẽ sử dụng vòng lặp while để duyệt danh sách các dòng dữ liệu được SELECT
                // Ta sẽ tạo 1 mảng array để chứa các dữ liệu được trả về
                $dataKhuyenMai = [];
                while ($rowKhuyenMai = mysqli_fetch_array($resultKhuyenMai, MYSQLI_ASSOC)) {
                    $km_tomtat = '';
                    if (!empty($rowKhuyenMai['km_ten'])) {
                        // Sử dụng hàm sprintf() để chuẩn bị mẫu câu với các giá trị truyền vào tương ứng từng vị trí placeholder
                        $km_tomtat = sprintf(
                            "Khuyến mãi %s, nội dung: %s, thời gian: %s-%s",
                            $rowKhuyenMai['km_ten'],
                            $rowKhuyenMai['km_noidung'],
                            // Sử dụng hàm date($format, $timestamp) để chuyển đổi ngày thành định dạng Việt Nam (ngày/tháng/năm)
                            // Do hàm date() nhận vào là đối tượng thời gian, chúng ta cần sử dụng hàm strtotime() để chuyển đổi từ chuỗi có định dạng 'yyyy-mm-dd' trong MYSQL thành đối tượng ngày tháng
                            date('d/m/Y', strtotime($rowKhuyenMai['km_tungay'])),    //vd: '2019-04-25'
                            date('d/m/Y', strtotime($rowKhuyenMai['km_denngay']))
                        );  //vd: '2019-05-10'
                    }
                    $dataKhuyenMai[] = array(
                        'km_ma' => $rowKhuyenMai['km_ma'],
                        'km_tomtat' => $km_tomtat,
                    );
                }
                /* --- End Truy vấn dữ liệu Khuyến mãi --- */
                ?>

                
                    
                        Tên Sản phẩm
                        
                    
                    
                        Giá Sản phẩm
                        
                    
                    
                        Giá cũ Sản phẩm
                        
                    
                    
                        Mô tả ngắn
                        
                    
                    
                        Mô tả chi tiết
                        
                    
                    
                        Ngày cập nhật
                        
                    
                    
                        Số lượng
                        
                    
                    
                        Loại sản phẩm
                        
                    
                    
                        Nhà sản xuất
                        
                    
                    
                        Khuyến mãi
                        
                    
                    
                

                location.href = 'index.php';";
                }
                ?>

Step 4: tạo chức năng edit dùng để hiển thị FORM hiệu chỉnh Sản phẩm

Tạo file /backend/functions/sanpham/edit.php để xử lý logic/nghiệp vụ
Workflow của chức năng này:
- Cần phải SELECT dữ liệu của các table cha liên quan (loaisanpham, nhasanxuat, khuyenmai)
- Trình diễn các table cha này bằng SELECT OPTION trong HTML
- Cần phải SELECT dữ liệu của dòng cần hiệu chỉnh (dựa theo ID)
- Lắp đầy các trường field/control trong FORM bằng dữ liệu cũ
Nội dung file:







    
    



    
    
    

    
        
            
            
            

            
                
                    Hiệu chỉnh
                

                
                 $rowLoaiSanPham['lsp_ma'],
                        'lsp_ten' => $rowLoaiSanPham['lsp_ten'],
                        'lsp_mota' => $rowLoaiSanPham['lsp_mota'],
                    );
                }
                /* --- End Truy vấn dữ liệu Loại sản phẩm --- */

                /* --- 
                --- 3. Truy vấn dữ liệu Nhà sản xuất 
                --- 
                */
                // Chuẩn bị câu truy vấn Nhà sản xuất
                $sqlNhaSanXuat = "select * from `nhasanxuat`";

                // Thực thi câu truy vấn SQL để lấy về dữ liệu
                $resultNhaSanXuat = mysqli_query($conn, $sqlNhaSanXuat);

                // Khi thực thi các truy vấn dạng SELECT, dữ liệu lấy về cần phải phân tích để sử dụng
                // Thông thường, chúng ta sẽ sử dụng vòng lặp while để duyệt danh sách các dòng dữ liệu được SELECT
                // Ta sẽ tạo 1 mảng array để chứa các dữ liệu được trả về
                $dataNhaSanXuat = [];
                while ($rowNhaSanXuat = mysqli_fetch_array($resultNhaSanXuat, MYSQLI_ASSOC)) {
                    $dataNhaSanXuat[] = array(
                        'nsx_ma' => $rowNhaSanXuat['nsx_ma'],
                        'nsx_ten' => $rowNhaSanXuat['nsx_ten'],
                    );
                }
                /* --- End Truy vấn dữ liệu Nhà sản xuất --- */

                /* --- 
                --- 4. Truy vấn dữ liệu Khuyến mãi
                --- 
                */
                // Chuẩn bị câu truy vấn Khuyến mãi
                $sqlKhuyenMai = "select * from `khuyenmai`";

                // Thực thi câu truy vấn SQL để lấy về dữ liệu
                $resultKhuyenMai = mysqli_query($conn, $sqlKhuyenMai);

                // Khi thực thi các truy vấn dạng SELECT, dữ liệu lấy về cần phải phân tích để sử dụng
                // Thông thường, chúng ta sẽ sử dụng vòng lặp while để duyệt danh sách các dòng dữ liệu được SELECT
                // Ta sẽ tạo 1 mảng array để chứa các dữ liệu được trả về
                $dataKhuyenMai = [];
                while ($rowKhuyenMai = mysqli_fetch_array($resultKhuyenMai, MYSQLI_ASSOC)) {
                    $km_tomtat = '';
                    if (!empty($rowKhuyenMai['km_ten'])) {
                        // Sử dụng hàm sprintf() để chuẩn bị mẫu câu với các giá trị truyền vào tương ứng từng vị trí placeholder
                        $km_tomtat = sprintf(
                            "Khuyến mãi %s, nội dung: %s, thời gian: %s-%s",
                            $rowKhuyenMai['km_ten'],
                            $rowKhuyenMai['km_noidung'],
                            // Sử dụng hàm date($format, $timestamp) để chuyển đổi ngày thành định dạng Việt Nam (ngày/tháng/năm)
                            // Do hàm date() nhận vào là đối tượng thời gian, chúng ta cần sử dụng hàm strtotime() để chuyển đổi từ chuỗi có định dạng 'yyyy-mm-dd' trong MYSQL thành đối tượng ngày tháng
                            date('d/m/Y', strtotime($rowKhuyenMai['km_tungay'])),    //vd: '2019-04-25'
                            date('d/m/Y', strtotime($rowKhuyenMai['km_denngay']))
                        );  //vd: '2019-05-10'
                    }
                    $dataKhuyenMai[] = array(
                        'km_ma' => $rowKhuyenMai['km_ma'],
                        'km_tomtat' => $km_tomtat,
                    );
                }
                /* --- End Truy vấn dữ liệu Khuyến mãi --- */

                /* --- 
                --- 5. Truy vấn dữ liệu Sản phẩm theo khóa chính
                --- 
                */
                // Chuẩn bị câu truy vấn $sqlSelect, lấy dữ liệu ban đầu của record cần update
                // Lấy giá trị khóa chính được truyền theo dạng QueryString Parameter key1=value1&key2=value2...
                $sp_ma = $_GET['sp_ma'];
                $sqlSelect = "SELECT * FROM `sanpham` WHERE sp_ma=$sp_ma;";

                // Thực thi câu truy vấn SQL để lấy về dữ liệu ban đầu của record cần update
                $resultSelect = mysqli_query($conn, $sqlSelect);
                $sanphamRow = mysqli_fetch_array($resultSelect, MYSQLI_ASSOC); // 1 record
                /* --- End Truy vấn dữ liệu Sản phẩm theo khóa chính --- */
                ?>

                
                    
                        Mã Sản phẩm
                        
                        Mã Sản phẩm không được hiệu chỉnh.
                    
                    
                        Tên Sản phẩm
                        
                    
                    
                        Giá Sản phẩm
                        
                    
                    
                        Giá cũ Sản phẩm
                        
                    
                    
                        Mô tả ngắn
                        
                    
                    
                        Mô tả chi tiết
                        
                    
                    
                        Ngày cập nhật
                        
                    
                    
                        Số lượng
                        
                    
                    
                        Loại sản phẩm
                        
                    
                    
                        Nhà sản xuất
                        
                    
                    
                        Khuyến mãi
                        
                    
                    
                

                location.href = 'index.php';";
                }
                ?>

Tạo file /backend/functions/sanpham/delete.php để xử lý logic/nghiệp vụ
Workflow của chức năng này:
- Cần lấy Id theo Request GET được truyền tới từ chức năng Danh sách (index)
- Thực thi câu lệnh DELETE để xóa dữ liệu
Nội dung file:

Download thư viện: https://sweetalert.js.org/guides/
Copy vào thư mục: /assets/vendor/sweetalert/sweetalert.min.js
Liên kết Thư viện JS trong chức năng Danh sách. Hiệu chỉnh file /backend/functions/sanpham/index.php

Step 5.2: xử lý cảnh báo khi xóa

Đặt các nút xóa áp dụng chung 1 định dạng class, ví dụ .btnDelete
Bổ sung thuộc tính custom attribute HTML tên là data-sp_ma="gia tri..."
Đăng ký sự kiện click cho các nút xóa đang áp dụng class .btnDelete
Sử dụng SweetAlert để hiển thị popup cảnh báo




    
    
    
    Danh sách Hình thức thanh toán

    

    
    
    


    
    
    
    


    
        
            
                
                
                
            
            
                Danh sách Sản phẩm
                 $row['sp_ma'],
                            'sp_ten' => $row['sp_ten'],
                            // Sử dụng hàm number_format(số tiền, số lẻ thập phân, dấu phân cách số lẻ, dấu phân cách hàng nghìn) 
                            // để định dạng số khi hiển thị trên giao diện. 
                            // Vd: 15800000 -> format thành 15,800,000.66 vnđ
                            'sp_gia' => number_format($row['sp_gia'], 0, ".", ",") . ' vnđ',
                        
                            'lsp_ten' => $row['lsp_ten'],
                            'nsx_ten' => $row['nsx_ten'],

                            'km_tomtat' => $km_tomtat
                        );
                    }

                    // print_r($data);
                    ?>

                Thêm mới
                
                    
                        
                            Mã sản phẩm
                            Tên sản phẩm
                            Giá sản phẩm
                            Loại sản phẩm
                            Nhà sản xuất
                            Khuyến mãi
                            hành động
                        
                    
                    
                        
                        
                            
                            
                            
                            
                            

                            
                        
                            
                                Sửa

Hiệu chỉnh file /backend/layouts/partials/sidebar.php
Nội dung file:


  
    
      
      Quản lý
      
        Bảng tin (current)
      
      
      

      
      
        Danh mục
      
      
      
        
          Loại sản phẩm
        
        
          
            Danh sách
          
          
            Thêm mới
          
        
      
      

      
      
        
          Sản phẩm
        
        
          
            Danh sách
          
          
            Thêm mới

programming javascript Sequelize

Hướng dẫn crud table javascript

Sơ đồ ER các mối quan hệ liên quan đến table sanpham

Step 1: tạo cấu trúc thư mục cho chức năng CRUD Sản phẩm

Step 2: tạo chức năng index dùng để hiển thị màn hình danh sách các Sản phẩm có trong database

Danh sách

Step 2.2: bổ sung thư viên DataTables để tạo hiệu ứng phân trang

Danh sách Sản phẩm

Step 3: tạo chức năng create dùng để hiển thị FORM thêm mới Sản phẩm

Thêm mới

Step 4: tạo chức năng edit dùng để hiển thị FORM hiệu chỉnh Sản phẩm

Hiệu chỉnh

Step 5.2: bổ sung popup cảnh báo khi xóa, sử dụng thư viện SweetAlert

Step 5.2: xử lý cảnh báo khi xóa

Danh sách Sản phẩm

Step 6: bổ sung menu chức năng Quản lý Sản phẩm bên sidebar

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội