Thực hiện phần public với MVC hướng dẫn bạn triển khai phần public của website theo mô hình lập trình MVC. Để thực hiện bài này, bạn cần thực hiện trước 2 bài hướng dẫn Lập trình MVC trong PHP và Thực hiện phần public với MVC .
1. Cấu trúc folder cho websie
Cấu trúc folder cần phải có để triển khai website, trong 2 bài trước câu trúc folder chúng ta đã thực hiện như hình dưới. Trong đó folder admin chứa phần admin mà chúng ta đã thực hiện trong bài trước, còn folder site chứa phần public mà chúng ta sẽ thực hiện trong bài này. Nếu chưa tạo folder site thì giờ bạn tạo ngay đi nhé, trong đó có folder chứa các controller, model, view cần dùng.
Các file cần tạo tiếp trong site là controler home.php, model_home.php , layout.php, index.php như hình.
Mô hình hoạt đông ngoài public vì vậy cũng đơn giản thôi. Trang index.php là trang chạy đầu tiên, nó nhận 1 tham số để biết chức năng mà user cần, biến này chúng ta đặt tên act nhé.
Trang index.php đơn giản sẽ nạp controller home để nó thực hiện nhiệm vụ của mình. Rồi thì controller home sẽ nạp model home, trang layout.
Giờ thì chúng ta code cho trang layout.php, rồi index.php, model home.php, controller home.php, Xon mời bắt đầu:
2. Code layout cho phần public
Layout là khung mẫu cho trình bày các chức năng của website. Layout tự vẽ hay mua trên mạng thì khoan bàn, giờ thì tạo đơn giản một layout để bạn triển khai các chức năng website theo MVC đã nhé.
Code html cho trang layout
<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>
<div class="container">
<header class="row bg-info"> </header>
<nav class="row bg-warning text-white"></nav>
<main class="row">
<article class="col-md-9 bg-light"></article>
<aside class="col-md-3 bg-secondary"></aside>
</main>
<footer class="row bg-primary"></footer>
</div>
</body>
<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>Định dạng css trang layout
<style>
header.row { height: 100px; }
nav.row { height: 45px; }
main.row { min-height: 500px; }
main.row > article {min-height: 100%}
main.row > aside{min-height: 100%}
footer.row { height: 120px;}
</style>
Xem thử http://localhost/banhang/site/layout.php
Code hiện view con
Code trong tag article để nạp view con vào trang layout (biến $viewFile)
<?php if (file_exists($viewFile)) require_once "$viewFile";?>Giá trị của biến $viewFile bạn sẽ gán trong các action của controller (thực hiện trong mỗi action sau này)
3. Code trang chủ của phần public
Trang chủ index.php nhúng file config, nhúng start controller home:
<?php
session_start();
require_once("../system/config.php");
require_once "controllers/home.php";
$controller = new home;
4. Code cho model home
<?php
require_once '../system/model_system.php';
class model_home extends model_system {
}//class 5. Code cho controller home
Controller là nơi tạo các chức năng sẽ cung cấp chi user, mỗi chức năng là một hàm. Chúng ta đang làm site bán hàng cho nên các chức năng cơ bản sẽ là:
- home: là chức năng mặc định, hiện đầu tiên khi user mới vào trang
- cat: chức năng hiện sản phẩm theo loại(nhà sản xuất)
- detail: chức năng hiện chi tiết một sản phẩm
- cartview: chức năng xem giỏ hàng, tức xem các sản phẩm mà user đã chọn
- cartprocess: chức năng xử lý giỏ hàng (thêm/ xóa sản phẩm khỏi giỏ hàng)
- search: chức năng tìm kiếm
- thanhtoán: chức năng thanh toán
- …
<?php
require_once "models/model_home.php"; //nạp model để có các hàm tương tác db
class home {
function __construct() {
$this->model = new model_home();
$act = "home";//chức năng mặc định
if(isset($_GET["act"])==true) $act=$_GET["act"];//chức năng user request
switch ($act) {
case "home": $this->home(); break;
case "detail": $this->detail(); break;
case "cat": $this->cat(); break;
case "cartprocess": $this->cart(); break;
case "cartview": $this->cartview(); break; }
//$this->$act;
}
function home(){
/* Chức năng trang chủ
1. Gọi các hàm trong model lấy dữ liệu cần thiết
2. Nạp view
*/
echo __METHOD__;
}
function detail(){
/* Chức năng hiện chi tiết sản phẩm,
1. Tiếp nhận tham số
2. Gọi hàm trong model để lấy chi tiết sản phẩm từ db
3.Nạp view
*/
echo __METHOD__;
}
function cat(){
/* Chức năng hiện các sản phẩm theo loại (nhà sản xuất)
1. Tiếp nhận tham số id
2. Gọi hàm tromg model lấy dữ liệu
3. Nạp view
*/
echo __METHOD__;
}
} //class homeTest: http://localhost/banhang/site/
http://localhost/banhang/site/?act=detail
http://localhost/banhang/site/?act=cat
6. Thực hiện chức năng home
Phần public tất nhiên phải có chức năng hiện các thông tin cho user khi họ mới vào website. Đây là trang chủ đối với người dùng. Thực hiện chức năng này từ chức năng home của controller nhé.
1. Code trong hàm home của controller home
function home(){$listSPMoi = $this->model->sanphamMoi();$viewFile = "views/home.php";require_once "layout.php";}
2. Code trong model home
function sanphamMoi($sosp=6){
$sql = "SELECT * FROM dienthoai WHERE AnHien=1 ORDER BY ThoiDiemNhap DESC LIMIT 0, $sosp";
$kq= $this->query($sql);
return $kq;
}
3. Tạo view home
a. Tạo file views/home.php và nhập text:
Thông tin trên trang chủ
Test thử: http://localhost/banhang/site/ sẽ phải thấy text vừa nhập
b. Code html trong view home để hiện sản phẩm mới, dùng code mẫu của bootstrap như sau:
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>Trong code trên, div .card được dùng để hiện thông tin của 1 sản phẩm, chúng ta sẽ cho lặp nhiều lần div này để hiện nhiều sản phẩm, code mẫu như trên có tại địa chỉ của bootstrap: https://getbootstrap.com/docs/5.0/components/card/#grid-cards
Test thử: http://localhost/banhang/site/ sẽ phải thấy khối card mới thêm nhưng chưa có thông tin sản phẩm
c. Lặp qua div card để hiện nhiều sản phẩm: Code vòng lặp foreach quanh div card (để hiện thông tin các sản phẩm.
Test: Xem lại trang trong trình duyệt sẽ thấy nhiều card hiện ra
d. Hiện thông tin sản phẩm:
Xem thử sẽ thấy thông tin các sản phẩm hiện ra, bổ sung thêm định dạng css cho đẹp. Có thể tham khảo gợi ý sau:
- Bổ sung các class css vào div.card để được như sau: <div class="card listsanpham px-0 pt-3 text-center">
- Bổ sung các class css vào h4.card-title để được như sau: <h5 class="card-title text-primary text-uppercase font-weight">
- Định dạng css cho các hình: height: 270px; width:70%; margin: autoXem kết quả nhé, he he. Ok rồi đó.
7. Thực hiện chức năng xem chi tiết sản phẩm
Phần public tất nhiên cũng phải có chức năng hiện chi tiết thông tin của 1 sản phẩm. Bắt đầu thực hiện từ chức năng detail của controller nhé.
1. Code trong hàm detail của controller home
function detail(){$id = $_GET['id']; settype($id, "int");$sp = $this->model->detail($id);$thuoctinh = $this->model->thuoctinhdt($id);if($sp==FALSE) { header("location: ". SITE_URL."/thongbao"); exit(); }$viewFile = "views/detail.php";require_once "layout.php";}
2. Code hàm detail lấy chi tiết sản phẩm trong model
Trong model home, code tạo hàm lấy chi tiết 1 sản phẩm theo id truyền vào:
function detail($id=0){
$sql = "SELECT * FROM dienthoai WHERE AnHien=1 AND idDT=$id";
$kq= $this->query($sql);
if (!$kq) return FALSE;
$row = $kq -> fetch();
return $row;
}
function thuoctinhdt($id=0){
$sql = "SELECT * FROM thuoctinhdt WHERE idDT=$id";
$kq= $this->query($sql);
if (!$kq) return FALSE;
$row = $kq -> fetch();
return $row;
}
3. Tạo view detail để hiện chi tiết sản phẩm
a. Tạo file views/detail.php và nhập text:
Thông tin chi tiết 1 sản phẩm điện thoại
Test thử http://localhost/banhang/site/?act=detail&id=1 sẽ phải thấy text vừa nhập.
b. Code html trong view detail để hiện chi tiết sản phẩm, dùng code mẫu của bootstrap như sau:
<div class="row">
<div class="col-md-12">
CHI TIẾT SẢN PHẨM
</div>
</div>
<div class="row">
<div class="col-md-5">
Hình sản phẩm
</div>
<div class="col-md-7">
Thông tin sản phẩm
</div>
</div>
<div class="row">
<div class="col-12">
Mô tả sản phẩm
</div>
</div>
Xem lại thử trang web, nếu thầy text mới nhập hiện ra thì OK
– Hiện tên sản phẩm
<h1 class="h3 text-uppercase p-2">Điện thoại: <?=$sp['TenDT'];?> </h1>– Hiện hình sản phẩm
<img src="<?=ROOT_URL."/".$sp['urlHinh']; ?>" >– Hiện các thông tin sản phẩm
<ul class="list-group"> <li class="list-group-item">Giá khuyến mãi: <?=$thuoctinh['GiáKM'];?> </li> <li class="list-group-item">Màn hình: <?=$thuoctinh['ManHinh'];?> </li> <li class="list-group-item">Hệ điều hành: <?=$thuoctinh['HeDieuHanh'];?> </li> <li class="list-group-item">Camera sau: <?=$thuoctinh['CameraSau'];?> </li> <li class="list-group-item">Camera trước: <?=$thuoctinh['CameraTruoc'];?></li> <li class="list-group-item">CPU: <?=$thuoctinh['CPU'];?> </li> <li class="list-group-item">RAM: <?=$thuoctinh['RAM'];?> </li> <li class="list-group-item">Bộ nhớ trong: <?=$thuoctinh['BoNhoTrong'];?> </li> <li class="list-group-item">Thẻ nhớ: <?=$thuoctinh['TheNho'];?> </li> <li class="list-group-item">Thẻ SIM: <?=$thuoctinh['TheSIM'];?> </li> <li class="list-group-item">Dung lượngPin:<?=$thuoctinh['DungLuongPin']?></li> <li class="list-group-item"> <button class="btn btn-primary px-5 py-2" idSP="<?=sp['idDT']?>"> Chọn </button> </li> </ul>
– Hiện mô tả sản phẩm
<?=$sp['MoTa']; ?>– Xem thử sẽ thấy kết quả:
– Định dạng thêm cho đẹp (có thể làm sau)
8. Thực hiện chức năng xem sản phẩm theo nhà sản xuất
Phần public phải có chức năng hiện danh sách sản phẩm theo nhà sản xuất (tức theo loại). Chúng ta thực hiện từ chức năng cat của controller nhé.
1. Code trong hàm cat của controller home
function cat(){
$idNSX = $_GET['id'];
settype($idNSX, "int");
$listSP = $this->model->sanphamtheoNSX($idNSX);
if($listSP==FALSE) {
header("location: ". SITE_URL."/thongbao");
exit();
}
$viewFile = "views/cat.php";
require_once "layout.php";
}
2. Code hàm sanphamtheoNSX trong model
Trong model home, code tạo hàm lấy các sản phẩm theo NSX với idNSX truyền vào:
function sanphamtheoNSX($idNSX=0){
$sql = "SELECT * FROM dienthoai WHERE AnHien=1 AND idNSX=$idNSX
ORDER BY ThoiDiemNhap DESC";
$kq= $this->query($sql);
return $kq;
}
3. Tạo view cat để hiện danh sách sản phẩm
a. Tạo file views/cat.php và nhập text:
Sản phẩm theo NSX
Test thử http://localhost/banhang/site/?act=cat&id=1 sẽ phải thấy text vừa nhập.
b. Code html trong view cat để hiện danh sách sản phẩm:
– Mở file views/home.php và chép toàn bộ code sang views/cat.php
– Sửa chữ SẢN PHẨM MỚI thành SẢN PHẨM THEO NHÀ SẢN XUẤT
– Sửa $listSPMoi thành $listSP
– Xem thử sẽ phải thấy các sản phẩm được hiện theo đúng nhà sản xuất
http://localhost/banhang/site/?act=cat&id=1
http://localhost/banhang/site/?act=cat&id=2
Bạn vừa thực hiện phần public với MVC cho website, tuy nhiên chỉ mới 3 chức năng cơ bản là trang chủ, chi tiết sản phẩm và sản phẩm theo nhà sản xuất . Các bạn theo cách triển khai các chức năng trên để hoàn thiện thêm các chức năng khác nữa nhé. Ví dụ như chức năng search, cart, checkout… Để thực hiện bài này, bạn cần thực hiện trước bài hướng dẫn Thực hiện phần admin với MVC thì làm bài này mới thành công. Bài tiếp theo sẽ là xử lý mua hàng, địa chỉ đẹp…
