1. Phân tích chức năng
Trang chủ hiển thị các sản phẩm nổi bật và các sản phẩm mới và danh mục các sản phẩm để người dùng tiện theo dõi.
2. Thực thi
B1: Tạo tập tin index.php trong thư mục root của dự án đóng vai trò làm chức năng controller
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
}
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
include_once './view/_home.php';
}
controller đóng vai trò phân luồng với 2 phương thức GET và POST của http
Với phương thức GET hàm include_once sẽ nhúng giao diện ở thư mục view với mục đích hiển thị nội dung.
Để đổ dữ liệu từ database chúng ta cần lây dữ liệu từ model ở mục controller này
B2: Đổ dữ liệu ra giao diện ở mục view/_index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Dashboard - SB Admin</title>
<link href="../public/admin/css/styles.css" rel="stylesheet" />
<script src="../public/admin/js/all.js" crossorigin="anonymous"></script>
</head>
<body class="sb-nav-fixed">
<?php include_once './view/inc/_navbar.php' ?>
<div id="layoutSidenav">
<?php include_once './view/inc/_sideleft.php' ?>
<div id="layoutSidenav_content">
<main>
<div class="container-fluid px-4">
<h1 class="mt-4">Dashboard</h1>
<ol class="breadcrumb mb-4">
<li class="breadcrumb-item active">Dashboard</li>
</ol>
<div class="row">
<div class="col-xl-3 col-md-6">
<div class="card bg-primary text-white mb-4">
<div class="card-body">Primary Card</div>
<div class="card-footer d-flex align-items-center justify-content-between">
<a class="small text-white stretched-link" href="#">View Details</a>
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="card bg-warning text-white mb-4">
<div class="card-body">Warning Card</div>
<div class="card-footer d-flex align-items-center justify-content-between">
<a class="small text-white stretched-link" href="#">View Details</a>
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="card bg-success text-white mb-4">
<div class="card-body">Success Card</div>
<div class="card-footer d-flex align-items-center justify-content-between">
<a class="small text-white stretched-link" href="#">View Details</a>
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="card bg-danger text-white mb-4">
<div class="card-body">Danger Card</div>
<div class="card-footer d-flex align-items-center justify-content-between">
<a class="small text-white stretched-link" href="#">View Details</a>
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6">
<div class="card mb-4">
<div class="card-header">
<i class="fas fa-chart-area me-1"></i>
Area Chart Example
</div>
<div class="card-body"><canvas id="myAreaChart" width="100%" height="40"></canvas></div>
</div>
</div>
<div class="col-xl-6">
<div class="card mb-4">
<div class="card-header">
<i class="fas fa-chart-bar me-1"></i>
Bar Chart Example
</div>
<div class="card-body"><canvas id="myBarChart" width="100%" height="40"></canvas></div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="card-header">
<i class="fas fa-table me-1"></i>
DataTable Example
</div>
<div class="card-body">
<table id="datatablesSimple">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
<footer class="py-4 bg-light mt-auto">
<div class="container-fluid px-4">
<div class="d-flex align-items-center justify-content-between small">
<div class="text-muted">Copyright © Your Website 2022</div>
<div>
<a href="#">Privacy Policy</a>
·
<a href="#">Terms & Conditions</a>
</div>
</div>
</div>
</footer>
</div>
</div>
<script src="../public/admin/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="../public/admin/js/scripts.js"></script>
<script src="../public/admin/js/Chart.min.js" crossorigin="anonymous"></script>
<script src="../public/admin/js/[email protected]" crossorigin="anonymous"></script>
<script src="../public/admin/js/datatables-simple-demo.js"></script>
</body>
</html>
2.1. Hiển thị danh sách sản phẩm bán chạy
B1: Ở tập tin controller index.php chúng ta cần lấy dữ liệu từ database các sản phẩm bán chạy nhất
B2: Đổ dữ liệu ra giao diện ở mục view/_index.php
2.2. Hiển thị danh sách sản phẩm mới nhất
B1: Ở tập tin controller index.php chúng ta cần lấy dữ liệu từ database các sản phẩm mới nhất
B2: Đổ dữ liệu ra giao diện ở mục view/_index.php
2.3. Hiển thị danh sách danh mục
B1: Ở tập tin controller index.php chúng ta cần lấy dữ liệu từ database các danh mục
B2: Đổ dữ liệu ra giao diện ở mục view/_index.php