Thực hiện phần admin với MVC

Thực hiện phần admin với MVC là bài viết hướng dẫn bạn triển khai phần admin cho website theo mô hình MVC. Để thực hiện bài này, bạn cần thực hiện trước bài hướng dẫn lập trình mvc trong php

Code layout cho phần admin

Việc đầu tiên khi thực hiện phần admin với MVC là tạo trang layout. Về sau bạn có thể dùng layout html trên mạng, bây giờ thì khoan nhé, cứ tạo nhẹ nhàng 1 trang layout của bạn để dùng đã.

a.  Code html cho trang layout.php

 <html><head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>Tiêu đề website </title>
 </head>
 <body> 

 </body>
 </html> 

b.  Chèn bootstrap + jquery vào trang:

Vào https://getbootstrap.com/ => Docs => Getting Started => Copy link nhúng css , js của bootstrap nhúng vào cuối trang.

embed-bootstrap

Kết quả:

 <html><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <title>Tiêu đề website </title>
 </head>
 <body>

 </body>
 </html>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"> </script> 

c.  Trong tag body, code tạo layout cho trang : header, main, aside, footer

 <div class="container">
     <header class="row bg-info mt-1">Đầu trang</header>
     <div class="row noidung">       
         <aside class="col-3 bg-light"> Thanh menu </aside>
         <main class="col-9 bg-white mx-n2">
             <h1 class="h5 py-2 border-bottom text-danger"> Tên chức năng </h1>
             Nội dung chính
         </main>
     </div>
     <footer class="row bg-dark mt-1 mb-2 text-warning text-center">Chân trang</footer>
 </div> 

d.   Định dạng css

 body { background-color:khaki!important}
 header.row{ height: 120px}
 nav.row {height: 40px; line-height: 40px }
 footer.row { height: 60px;}
 div.noidung { min-height: 500px}
 div.noidung >main  { } 

Xem thử http://localhost/banhang/admin/layout.php

layout-admin

e.  Tạo menu trái

Vào https://getbootstrap.com/ è Docs è Components è Accordion è nhắp Copy

embed-bootstrap-accordion
  • Trong trang layout.php, xóa chữ Thanh menu và Paste code ra
  • Chọn các code mới xuất hiện, rồi gõ phím tab để đẩy vào cho đẹp.
  • Thay thế chữ Accordion Item #1 bằng Quản lý nhà sản xuất
  • Chữ Accordion Item #2 cũng thay bằng Quản lý điện thoại
  • Thay chữ Accordion Item #2 bằng Quản lý thành viên
  • Đổi chữ <strong>This is the first … limit overflow.  bằng code:
<p><a href="#">Danh sách nhà sản xuất</a></p>
<p><a href="#">Thêm nhà sản xuất</a></p>
  • Thay chữ <strong>This is the second item… limit overflow.  bằng code:
<p><a href="#">Danh sách điện thoại</a></p>
<p><a href="#">Thêm điện thoại</a></p>
  • Thay chữ <strong>This is the third item… limit overflow.  bằng code:
<p><a href="#">Danh sách thành viên</a></p>
<p><a href="#">Thêm thêm thành viên</a></p>

Kết quả menu trái:

Bổ sung thêm các mục Quản lý Đơn hàng, Quản lý Bình luận, Quản lý thuộc tính, Thoát…và sắp xếp cho hợp lý (tùy ý).

f.  Nhập nội dung cho header, footer

  • Header: Thêm chữ Quản trị website Bán Điện Thoại,  ngày hiện hành, …+ định dạng cho đẹp
  • Footer: Thêm Họ tên sinh viên, mã sinh viên, email, … + định dạng cho đẹp

g.  Code chuẩn bị hiện tên và nội dung của view con

Giờ thì code để nhúng các view con (sẽ làm sau) . Vì trang layput được tạo ra là để sẵn sàng nhúng các view con mà.

Tronglayout chúng ta sẽ dùng biến $page_title để hiện tên chức năng và $page_file là đường dẫn của view con sẽ nhúng. Sửa 2 dòng chữ Tên chức năngNội dung chính thành code như bên dưới:

Kết quả như sau:

Code trang chủ của phần admin

Trang chủ sẽ tiếp nhận 1 tham số trên thanh địa chỉ tên là ctrl.  Biến này dùng để xác định controller nào mà người dùng đang request .  Viết code trong file admin/index.php như sau (cách 1) :

 <?php 
   $ctrl='home';
   if(isset($_GET['ctrl'])==true) $ctrl=$_GET['ctrl'];  
   if ($ctrl=="home") {
       require_once "controllers/home.php";  $controller = new home;
   }
   if ($ctrl=="nhasanxuat") {
       require_once "controllers/nhasanxuat.php";  $controller = new nhasanxuat;
   }
   if ($ctrl=="dienthoai") {   
       require_once "controllers/dienthoai.php";  $controller = new dienthoai;
   }
   if ($ctrl=="users") {
       require_once "controllers/users.php";  $controller = new users;
   }if ($ctrl=="donhang") {
       require_once "controllers/donhang.php";  $controller = new donhang;
   }
 ?> 

Code trang chủ có thể viết theo cách 2 cho ngắn gọn, cao siêu , trừu tượng hơn 1 chút như sau:

 <?php
   define(ARR_CONTROLLER, ["home","nhasanxuat", "dienthoai", "binhluan","users","donhang"]);
   $ctrl='home';
   if(isset($_GET['ctrl'])==true) $ctrl=$_GET['ctrl'];   
   if (in_array($ctrl, ARR_CONTROLLER)==false) die("Không tồn tại địa chỉ");
   $pathFile ="controllers/$ctrl.php"; 
   if (file_exists($pathFile) ==true) {
       require_once $pathFile;     
       $controller = new $ctrl;
   }
   else echo "Controller $ctrl không tồn tại";
 ?> 

Test:  
http://localhost/banhang/admin/?ctrl=nhasanxuat
http://localhost/banhang/admin/?ctrl=dienthoai
http://localhost/banhang/admin/?ctrl=binhluan

Code ở đầu trang chủ để tạo session và nhúng file config.php  (website nào cũng dùng session)

<?php
  session_start();
  require_once("../system/config.php");
?>

Quản lý nhà sản xuất

Để quản lý dữ liệu trong table nhasanxuat, bạn cần có:

  • controller nhasanxuat : là class chứa các chức năng thêm sửa xóa phục vụ request người dùng
  • model model_nhasanxuat : là classchứa các hàmđể thêm sửa xóa dữ liệu trong table nhasanxuat
  • Các file view để hiện thông tin (danh sách record , thêm record, chỉnh record)

1. Code khởi đầu cho controller nhasanxuat

  • Sử dụng 1 biến (đặt tên là $act) để nhận biết chức năng mà người dùng đang request.
  • Biến $act gồm các giá trị: index (để nạp ds record), addnew và store (để thực hiện thêm record), edit và update (để chỉnh record) , delete (để xóa record)
  • Nạp model để gọi các hàm kết nối db.
  • Sử dụng biến $message: giữ các thông báo.

Mở file admin/controllers/nhasanxuat.php

 <?php
require_once "models/model_nhasanxuat.php"; //nạp model để có các hàm tương tác db
class nhasanxuat {
     function __construct()   {
        $this->model = new model_nhasanxuat();
        $act = "index";//chức năng mặc định
        if(isset($_GET["act"])==true) $act=$_GET["act"];//tiếp nhận chức năng user request
        switch ($act) {    
             case "index": $this->index(); break;
             case "addnew": $this->addnew(); break;
             case "store": $this->store(); break;
             case "edit": $this->edit(); break;
             case "update": $this->update(); break;
             case "delete": $this->delete(); break;
        }
        //$this->$act;
     }
     function index(){
       /*  Chức năng hiện danh sách record trong table
           1. Gọi hàm trong model lấy tất các các record từ db
           2. Nạp view hiện danh sách các record vừa lấy*/
       echo __METHOD__;
     }
     fuction addnew(){
       /*  Chức năng nạp view thêm record,
           1.Nạp form,form này phải có method="post",action của form => store */
       echo __METHOD__;
     }
     function store(){
       /* Đây là chức năng tiếp nhận dữ liệu từ form addnew (method POST)
         1. Tiếp nhận các giá trị từ form addnew
         2. Kiểm tra hợp lệ các giá trị nhận được
         3. Gọi hàm chèn vào db
         4. Tạo thông báo     
         5. Chuyển hướng đến trang cần thiết*/
       echo __METHOD__;
     }
     function edit(){
       /* Chức năng hiện form edit 1 record
         1. Tiếp nhận biến id của record cần chỉnh (ma_hh, ma_loai,...)
         2. Kiểm tra hợp lệ giá trị id
         3. Gọi hàm lấy record cần chỉnh (1 record)
         4. Nạp form chỉnh, trong form hiện thông tin của record,
         5. Form này cũng phải có method là Post, action trỏ lên act update*/     
        echo __METHOD__;
     }
     function update(){
       /* Đây là chức năng tiếp nhận dữ liệu từ form edit (method POST)
        1. Tiếp nhận các giá trị từ form edit
        2. Kiểm tra hợp lệ các giá trị nhận được
        3. Gọi hàm cập nhật vào db
        4. Tạo thông báo     
        5. Chuyển hướng đến trang cần thiết */     
        echo __METHOD__;
     }
     function delete(){
       /* Chức năng xóa record
        1. Tiếp nhận biến id của record cần xóa
        2. Gọi hàm xóa
        3. Tạo thông báo
        4. Chuyển đến trang cần thiết*/
       echo __METHOD__;
     }
 } //class nhasanxuat 

Test:
http://localhost/banhang/admin/?ctrl=nhasanxuat
http://localhost/banhang/admin/?ctrl=nhasanxuat&act=addnew
http://localhost/banhang/admin/?ctrl=nhasanxuat&act=edit
http://localhost/banhang/admin/?ctrl=nhasanxuat&act=delete

2.  Code khởi đầu cho model nhasanxuat

 <?php
 require_once '../system/model_system.php';
 class model_nhasanxuat extends model_system {
      function store(){ //hàm lưu 1 record vào table
      }
      function update($id){ //hàm cập nhật 1 record vào table
      }
      function delete($id){  //hàm xóa 1 record khỏi table
      }
      function listrecords(){ //hàm lấy các record trong table
      }
      function detailrecord($id){ //hàm lấy chi tiết 1 record trong table
      }
 }//class 

3.  Code hiện cơ bản danh sách các record trong table

a. Trong hàm index của controller nhasanxuat:

   1. Gọi hàm trong model lấy tất các các record từ db
   2. Nạp view hiện danh sách các record vừa lấy

Tạo view để hiện cơ bản thông tin

b. Tạo file admin/views/nhaxsanxuat_index.php và code:

<?php
if ($list==NULL) echo "Chưa có dữ liệu";
else foreach ($list as $row) {
    echo "<p>",$row['TenNSX'],"</p>";
}
?>

Test:  http://localhost/banhang/admin/?ctrl=nhasanxuat&act=index   

nhasanxuat_action_index_xemketqua

Chú ý: muốn xem dữ liệu thử thì mở model_nhasanxuat và code trong hàm listrecords (có thể làm sau cũng được)

function listrecords(){
     $sql = "SELECT * FROM nhasanxuat";
     $kq= $this->query($sql);
     return $kq;
}

4. Code hiện cơ bản form thêm record vào table

a. Trong hàm addnew của controller nhasanxuat, code:

1.Nạp form,form này phải có method="post",action của form trỏ lên act store
nhasanxuat_action_addnew

b. Tạo view để hiện cơ bản form thêm loại

– Tạo file admin/views/nhasanxuat_addnew.php và code:

<form method="post" action="<?=ADMIN_URL?>/?ctrl=nhasanxuat&act=store">
    <p><input name="TenNSX" type="text" placeholder="Tên loại"></p>
    <p><input name="ThuTu" type="text" placeholder="Thứ tự"></p>
    <p><input name="AnHien" type="text" placeholder="Ẩn Hiện"></p>
    <p><button name="nutsave" type="submit"> LƯU </button> </p>
</form>

– Test: http://localhost/banhang/admin/?ctrl=nhasanxuat&act=index&act=addnew

nhasanxuat_action_addnew_view

– Test: nhập text và nhắp Lưu, thấy chuyển qua action store là chính xác

5. Code lưu record mới vào table

Sinh viên tự thực hiện nhé (làm sau cũng được)

6. Code hiện cơ bản form chỉnh 1 record trong table

a. Code trong hàm edit của controller nhasanxuat

   1. Tiếp nhận biến id của record cần chỉnh (ma_hh, ma_loai,...)
   2. Kiểm tra hợp lệ giá trị id
   3. Gọi hàm lấy record cần chỉnh (1 record)
   4. Nạp form chỉnh, trong form hiện thông tin của record,
   5. Form này cũng phải có method là Post, action trỏ lên act update

b. Tạo view để hiện cơ bản form chỉnh nhà sản xuất

– Save as file nhasanxuat_addnew.php  thành nhasanxuat_edit.php
– Bổ sung code để hiện thông tin record cần chỉnh

 <form method="post" action="<?=ADMIN_URL?>/?ctrl=loai_hang&act=update">
   <p> <input name="ten_loai" value="<?=$row['ten_loai']?>" type="text" placeholder= "Tên loại"> </p>
   <p> <input name="thu_tu" value="<?=$row['thu_tu']?>" type="text" placeholder="Thứ tự"> </p>
   <p> <input name="an_hien" value="<?=$row['an_hien']?>" type="text" placeholder= "Ẩn Hiện"> </p>
   <p> <button name="nutsave" type="submit"> LƯU</button> </p>
   <input name="ma_loai" value="<?=$row['ma_loai']?>" type="hidden">
</form> 

b. Test:  http://localhost/banhang/admin/?ctrl=nhasanxuat&act=edit&idNSX=1  => Hiện ra form là đúng, từ do chưa lấy dữ liệu nên chưa hiện

7.  Code lưu record đang chỉnh vào table

Sinh viên tự thực hiện nhé (làm sau cũng được)

8.   Code xóa 1 record trong table

a. Trong chức năng delete của controller nhasanxuat

     1. Tiếp nhận biến id của record cần xóa
     2. Gọi hàm xóa
     3. Tạo thông báo
     4. Chuyển đến trang cần thiết
nhasanxuat_action_delete.

b. Test :    http://localhost/banhang/admin/?ctrl=nhasanxuat&act=delete&idNSX=1

9.  Hoàn thiện các view và model

Phát triển 3 view nhasanxuat_index.php, nhasanxuat_addnew.php, nhasanxuat_edit.php bằng bootstrap cho đẹp. Code thêm trong các hàm trong model để cung cấp dữ liệu nhé

10. Chỉnh link trong menu

Mở file layout.php, trong cột trái, chỉnh href  cho 2 liên kết Danh sách nhà sản xuất Thêm nhà sản xuất thành  <?=ADMIN_URL?>/?ctrl=nhasanxuat<?=ADMIN_URL?>/?ctrl=nhasanxuat&act=addnew

Đừng làm nữa, dừng lại, hít thở + review lại nãy giờ làm gì nhé.

Thực hiện phần admin với MVC vẫn chưa hết đâu nhé, mới chỉ tổ chức controller, model, view và thực hiện một code cơ bản cho view. Các bài sau còn tiếp. 🙂