Basic Từng bước học lập trình PHP cơ bản qua dự án website giới thiệu sản phẩm

Language
Tiếng Việt
Hôm nay tôi sẽ bắt đầu viết loạt bài hướng dẫn các bạn học lập trình PHP cơ bản thông qua việc hoàn thành dự án website giới thiệu sản phẩm.

Những nội dung tôi sẽ hướng dẫn các bạn bao gồm:
  • Cài đặt và sử dụng web server.
  • Xây dựng cấu trúc thư mục website.
  • Xây dựng cấu trúc cơ sở dữ liệu (Còn gọi là database và viết tắt là DB).
  • Sử dụng phpMyAdmin để quản lý cơ sở dữ liệu.
  • Từng bước hoàn thành dự án website giới thiệu sản phẩm (Trang quản trị và trang người dùng) và qua đó các bạn sẽ được học các vấn đề liên quan tới lập trình PHP (Câu lệnh, biến, kiểu dữ liệu, toán tử, điều kiện, vòng lặp, hàm, MySQL và các vấn đề khác).
Các bạn lưu ý, với bài hướng dẫn này tôi chỉ hướng tới các bạn mới bắt đầu tìm hiểu về lập trình PHP ở mức cơ bản nhất chứ tôi không đi sâu vào các vấn đề nâng cao của PHP.

Chân thành cảm ơn sự quan tâm của các bạn!
 
PHẦN 20: TRÌNH ĐƠN QUẢN TRỊ

Các kiến thức cần thiết của PHP cơ bản tôi đã trình bày ở các phần trước nên kể từ phần này tôi sẽ không trình bày kiến thức PHP cơ bản nữa. Những vấn đề mới phát sinh mà các bạn không tìm hiểu được thì các bạn có thể liên hệ tôi sẽ giải thích.

Các bạn tiếp tục thực hiện các bước hướng dẫn sau đây cũng như các phần tiếp theo để hoàn thiện website giới thiệu sản phẩm.

Các trang trong phần quản trị đã được tôi hướng dẫn ở các phần trước. Phần này tôi sẽ hướng dẫn các bạn tạo một trình đơn để truy cập tới các trang. Trình đơn này chỉ là các mã lệnh HTML chứ không có gì đặc biệt nên tôi sẽ chỉ trình bày ngắn gọn.

Có hai cách thực hiện như sau:

Cách 1:

Mở tất cả các tập tin giao diện (View) ngoại trừ tập tin views/admin/user/login.tpl.php và thêm mới khối mã lệnh sau vào ngay kề dưới thẻ body:
PHP:
<div>
    <ul style="float: left;">
        <li>
            <a href="<?php echo SITE_URL . 'admin'; ?>">Trang chủ</a>
        </li>
    </ul>
    <ul style="float: left;">
        <li>
            <a href="<?php echo SITE_URL . 'admin/category/list.php'; ?>">Danh sách danh mục sản phẩm</a>
        </li>
        <li>
            <a href="<?php echo SITE_URL . 'admin/category/add.php'; ?>">Thêm mới danh mục sản phẩm</a>
        </li>
    </ul>
    <ul style="float: left;">
        <li>
            <a href="<?php echo SITE_URL . 'admin/product/list.php'; ?>">Danh sách sản phẩm</a>
        </li>
        <li>
            <a href="<?php echo SITE_URL . 'admin/product/add.php'; ?>">Thêm mới sản phẩm</a>
        </li>
    </ul>
    <ul style="float: left;">
        <li>
            <a href="<?php echo SITE_URL . 'admin/user/list.php'; ?>">Danh sách thành viên</a>
        </li>
        <li>
            <a href="<?php echo SITE_URL . 'admin/user/add.php'; ?>">Thêm mới thành viên</a>
        </li>
    </ul>
    <div style="clear: both;"></div>
</div>
Cách 2:

Trong thư mục views/admin, các bạn tạo mới thư mục tên là common.

Trong thư mục views/admin/common, các bạn tạo mới tập tin menu.tpl.php để trình bày giao diện trình đơn.

Nội dung tập tin views/admin/common/menu.tpl.php như sau:
PHP:
<div>
    <ul style="float: left;">
        <li>
            <a href="<?php echo SITE_URL . 'admin'; ?>">Trang chủ</a>
        </li>
    </ul>
    <ul style="float: left;">
        <li>
            <a href="<?php echo SITE_URL . 'admin/category/list.php'; ?>">Danh sách danh mục sản phẩm</a>
        </li>
        <li>
            <a href="<?php echo SITE_URL . 'admin/category/add.php'; ?>">Thêm mới danh mục sản phẩm</a>
        </li>
    </ul>
    <ul style="float: left;">
        <li>
            <a href="<?php echo SITE_URL . 'admin/product/list.php'; ?>">Danh sách sản phẩm</a>
        </li>
        <li>
            <a href="<?php echo SITE_URL . 'admin/product/add.php'; ?>">Thêm mới sản phẩm</a>
        </li>
    </ul>
    <ul style="float: left;">
        <li>
            <a href="<?php echo SITE_URL . 'admin/user/list.php'; ?>">Danh sách thành viên</a>
        </li>
        <li>
            <a href="<?php echo SITE_URL . 'admin/user/add.php'; ?>">Thêm mới thành viên</a>
        </li>
    </ul>
    <div style="clear: both;"></div>
</div>
Mở tất cả các tập tin giao diện (View) ngoại trừ tập tin views/admin/user/login.tpl.php và thêm vào dòng mã lệnh PHP sau ngay kề dưới thẻ body:
PHP:
<?php require '../common/menu.tpl.php'; ?>
Cả 2 cách đều cho ra cùng một kết quả, tuy nhiên nên lựa chọn cách nào thì các bạn tự suy xét.

Đây là phần cuối cùng trong phần quản trị (Admin). Kể từ phần sau tôi sẽ hướng dẫn các bạn thực hiện các trang trong phần người dùng (Front).
 
PHẦN 21: TRANG CHỦ

Kể từ phần này tôi sẽ hướng dẫn các bạn thực hiện các trang người dùng (Front).

Trang chủ website tôi chỉ trình bày danh sách 6 sản phẩm mới nhất. Các bạn muốn trình bày thêm các thông tin khác thì các bạn có thể tìm hiểu thêm.

Tại thư mục gốc (Root), các bạn tạo tập tin index.php để viết mã lệnh xử lý trang chủ.

Nội dung tập tin index.php như sau:
PHP:
<?php
//Require các tập tin cần thiết
require 'configs/config.php';
require 'libraries/connect.php';
require 'models/product.php';

//Lấy danh sách 6 sản phẩm mới nhất
$product_latest_list = get_product_latest_list(6, $connect);

//Require tập tin giao diện (View)
require 'views/front/home/home.tpl.php';
?>
Mở tập tin models/product.php và thêm vào khối lệnh mới dưới đây:
PHP:
function get_product_latest_list($limit, $connect)
{
    //SQL
    $sql = "SELECT * FROM tbl_product ORDER BY product_id DESC LIMIT 0, $limit";

    //Return
    return mysqli_query($connect, $sql);
}
Trong thư mục views/front, tạo mới thư mục tên là home để chứa các tập tin trình bày giao diện trang chủ.

Trong thư mục views/front/home, tạo mới tập tin home.tpl.php để trình bày giao diện trang chủ.

Nội dung tập tin views/front/home/home.tpl.php như sau:
PHP:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trang chủ</title>
</head>
<body>
<?php while ($product_latest = mysqli_fetch_assoc($product_latest_list)): ?>
    <div style="padding: 10px;">
        <p>
            <img src="<?php echo SITE_URL . 'userfiles/' . $product_latest['image']; ?>">
        </p>
        <h4>
            <a href="<?php echo SITE_URL . 'product-detail.php?product_id=' . $product_latest['product_id']; ?>"><?php echo $product_latest['name']; ?></a>
        </h4>
        <p><?php echo number_format($product_latest['price'], 0, '', '.'); ?> VNĐ</p>
    </div>
<?php endwhile; ?>
</body>
</html>
Các bạn truy cập trang chủ theo địa chỉ http://localhost để kiểm tra.
 
PHẦN 22: TRANG DANH SÁCH SẢN PHẨM

Tại thư mục gốc (Root), các bạn tạo mới tập tin product-list.php để viết mã lệnh xử lý trang danh sách sản phẩm.

Nội dung tập tin product-list.php như sau:
PHP:
<?php
//Require các tập tin cần thiết
require 'configs/config.php';
require 'libraries/connect.php';
require 'models/product.php';

//Lấy category_id từ URL (Nếu có)
$category_id = isset($_GET['category_id']) ? $_GET['category_id'] : null;

//Lấy danh sách sản phẩm
$product_active_list = get_product_active_list($category_id, $connect);

//Require tập tin giao diện (View)
require 'views/front/product/list.tpl.php';
?>
Mở tập tin models/product.php và thêm vào khối lệnh mới dưới đây:
PHP:
function get_product_active_list($category_id, $connect)
{
    //SQL
    $sql = "SELECT * FROM tbl_product WHERE status = 1";
    
    //Nếu lấy sản phẩm theo danh mục
    if ($category_id !== null) {
        $sql .= " AND category_id = $category_id";
    }
    
    //Sắp xếp
    $sql .= " ORDER BY product_id DESC";
    
    //Return
    return mysqli_query($connect, $sql);
}
Trong thư mục views/front, tạo mới thư mục tên là product để chứa các tập tin trình bày giao diện các trang sản phẩm.

Trong thư mục views/front/product, tạo mới tập tin list.tpl.php để trình bày giao diện trang danh sách sản phẩm.

Nội dung tập tin views/front/product/list.tpl.php như sau:
PHP:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sản phẩm</title>
</head>
<body>
<?php while ($product_active = mysqli_fetch_assoc($product_active_list)): ?>
    <div style="padding: 10px;">
        <p>
            <img src="<?php echo SITE_URL . 'userfiles/' . $product_active['image']; ?>">
        </p>
        <h4>
            <a href="<?php echo SITE_URL . 'product-detail.php?product_id=' . $product_active['product_id']; ?>"><?php echo $product_active['name']; ?></a>
        </h4>
        <p><?php echo number_format($product_active['price'], 0, '', '.'); ?> VNĐ</p>
    </div>
<?php endwhile; ?>
</body>
</html>
Các bạn truy cập trang danh sách sản phẩm theo địa chỉ http://localhost/product-list.php để kiểm tra.
 
PHẦN 23: TRANG CHI TIẾT SẢN PHẨM

Tại thư mục gốc (Root), các bạn tạo mới tập tin product-detail.php để viết mã lệnh xử lý trang chi tiết sản phẩm.

Nội dung tập tin product-detail.php như sau:
PHP:
<?php
//Require các tập tin cần thiết
require 'configs/config.php';
require 'libraries/connect.php';
require 'models/product.php';

//Lấy product_id từ URL
$product_id = $_GET['product_id'];

//Lấy thông tin sản phẩm
$product_active = get_product_active_by_id($product_id, $connect);

//Require tập tin giao diện (View)
require 'views/front/product/detail.tpl.php';
?>
Mở tập tin models/product.php và thêm vào khối lệnh mới dưới đây:
PHP:
function get_product_active_by_id($product_id, $connect)
{
    //SQL
    $sql = "SELECT * FROM tbl_product WHERE status = 1 AND product_id = $product_id";

    //Query
    $query = mysqli_query($connect, $sql);

    //Return
    return mysqli_fetch_assoc($query);
}
Trong thư mục views/front/product, tạo mới tập tin detail.tpl.php để trình bày giao diện trang chi tiết sản phẩm.

Nội dung tập tin views/front/product/detail.tpl.php như sau:
PHP:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sản phẩm - Chi tiết</title>
</head>
<body>
<div style="padding: 10px;">
    <p>
        <img src="<?php echo SITE_URL . 'userfiles/' . $product_active['image']; ?>">
    </p>
    <h4><?php echo $product_active['name']; ?></h4>
    <p><?php echo number_format($product_active['price'], 0, '', '.'); ?> VNĐ</p>
</div>
</body>
</html>
Các bạn truy cập trang danh sách sản phẩm, sau đó nhấp vào tên sản phẩm để truy cập trang chi tiết sản phẩm.
 
PHẦN 24: TRÌNH ĐƠN NGƯỜI DÙNG

Trình đơn người dùng bao gồm 2 nhóm trình đơn:
  • Trang chủ: Liên kết tới trang chủ website.
  • Sản phẩm: Liên kết tới trang danh sách sản phẩm. Trong trình đơn sản phẩm sẽ có các trình đơn con tương ứng với các danh mục sản phẩm. Các trình đơn con này được lấy động từ DB (Cụ thể là từ bảng tbl_category).
Các bạn mở các tập tin xử lý index.php, product-list.php, product-detail.php và chỉnh sửa lại như sau:

Ngay trước dòng lệnh "require 'models/product.php';", các bạn thêm mới dòng lệnh sau:
PHP:
require 'models/category.php';
Ngay trước dòng "//Require tập tin giao diện (View)", các bạn thêm mới dòng lệnh sau:
PHP:
$category_active_list = get_category_active_list($connect);
Về phần giao diện trình bày trình đơn, các bạn có 2 cách như sau:

Cách 1:

Mở tất cả các tập tin giao diện (View) của phần người dùng (Front) trong thư mục views/front và thêm mới khối lệnh sau ngay sau thẻ body:
PHP:
<div style="padding: 10px;">
    <ul>
        <li>
            <a href="<?php echo SITE_URL; ?>">Trang chủ</a>
        </li>
    </ul>
   
    <ul>
        <li>
            <a href="<?php echo SITE_URL . 'product-list.php'; ?>">Sản phẩm</a>
        </li>
        <?php while ($category_active = mysqli_fetch_assoc($category_active_list)): ?>
            <li>
                <a href="<?php echo SITE_URL . 'product-list.php?category_id=' . $category_active['category_id']; ?>"><?php echo $category_active['name']; ?></a>
            </li>
        <?php endwhile; ?>
    </ul>
</div>
Cách 2:

Trong thư mục views/front, tạo mới thư mục tên là common để chứa các tập tin trình bày giao diện các thành phần chung của website.

Trong thư mục views/front/common, tạo mới tập tin menu.tpl.php để trình bày giao diện trình đơn.

Nội dung tập tin views/front/common/menu.tpl.php như sau:
PHP:
<div style="padding: 10px;">
    <ul>
        <li>
            <a href="<?php echo SITE_URL; ?>">Trang chủ</a>
        </li>
    </ul>
   
    <ul>
        <li>
            <a href="<?php echo SITE_URL . 'product-list.php'; ?>">Sản phẩm</a>
        </li>
        <?php while ($category_active = mysqli_fetch_assoc($category_active_list)): ?>
            <li>
                <a href="<?php echo SITE_URL . 'product-list.php?category_id=' . $category_active['category_id']; ?>"><?php echo $category_active['name']; ?></a>
            </li>
        <?php endwhile; ?>
    </ul>
</div>
Mở tất cả các tập tin giao diện (View) của phần người dùng (Front) trong thư mục views/front và thêm mới dòng lệnh PHP sau ngay sau thẻ body:
PHP:
<?php require '../common/menu.tpl.php'; ?>
Các bạn lựa chọn một trong hai cách để trình bày giao diện trình đơn.

Như vậy, đây là phần cuối cùng về loạt bài "Từng bước học lập trình PHP cơ bản qua dự án website giới thiệu sản phẩm". Tôi lưu ý với các bạn một lần nữa đó là phần hướng dẫn của tôi chỉ mang tính cơ bản nhất với mục đích giúp các bạn mới làm quen với PHP có thể nắm bắt được kiến thức ban đầu cũng như các bước để tạo ra một website cơ bản. Để sản phẩm hoàn thiện và có thể vận hành thực tế thì các bạn còn cần phải tinh chỉnh nhiều thứ nữa.

Mọi vấn đề liên quan tới loạt bài hướng dẫn này, các bạn vui lòng tham gia thảo luận tại đây.

Chân thành cảm ơn sự quan tâm của các bạn!
 
Back
Top