Chào bạn, tôi rất vui được hướng dẫn bạn học công nghệ web HTML kết hợp với dữ liệu PHP, Database (SQL) cùng với các ví dụ minh họa chi tiết từng phần. Chúng ta sẽ đi từng bước một cách rõ ràng nhé.

Mục tiêu: Xây dựng một trang web đơn giản có thể hiển thị dữ liệu động từ cơ sở dữ liệu.

Các phần chính chúng ta sẽ khám phá:

  1. HTML (HyperText Markup Language): Cấu trúc xương của trang web.
  2. PHP (Hypertext Preprocessor): Ngôn ngữ lập trình phía máy chủ để xử lý dữ liệu.
  3. SQL (Structured Query Language): Ngôn ngữ truy vấn cơ sở dữ liệu.
  4. Database (Cơ sở dữ liệu): Nơi lưu trữ dữ liệu (ví dụ: MySQL).

Ví dụ minh họa: Trang web hiển thị danh sách sản phẩm

Bước 1: Thiết lập môi trường phát triển

Trước khi bắt đầu, bạn cần một môi trường để chạy mã PHP và cơ sở dữ liệu. Có nhiều cách để thiết lập, một trong những cách đơn giản nhất là sử dụng các phần mềm tích hợp như:

  • XAMPP (Cross-Platform Apache MySQL PHP Perl): Phổ biến và dễ cài đặt trên Windows, macOS, Linux.
  • MAMP (macOS Apache MySQL PHP): Dành riêng cho macOS.
  • WAMP (Windows Apache MySQL PHP): Dành riêng cho Windows.

Hãy tải và cài đặt một trong các phần mềm này. Sau khi cài đặt, hãy đảm bảo rằng Apache (máy chủ web) và MySQL (hệ quản trị cơ sở dữ liệu) đang chạy.

Bước 2: Tạo cơ sở dữ liệu và bảng

  1. Truy cập phpMyAdmin: Thông thường, bạn có thể truy cập phpMyAdmin bằng cách mở trình duyệt và nhập http://localhost/phpmyadmin/.
  2. Tạo cơ sở dữ liệu:
    • Nhấp vào "New" hoặc "Databases".
    • Nhập tên cơ sở dữ liệu (ví dụ: quanlysanpham) và nhấp vào "Create".
  3. Tạo bảng:
    • Chọn cơ sở dữ liệu quanlysanpham vừa tạo.
    • Nhập tên bảng (ví dụ: sanpham) và số cột (ví dụ: 3). Nhấp vào "Go".
    • Định nghĩa các cột như sau:
      • id (INT, AUTO_INCREMENT, PRIMARY KEY) - Mã sản phẩm (tự động tăng, khóa chính).
      • ten_sanpham (VARCHAR(255)) - Tên sản phẩm (chuỗi văn bản tối đa 255 ký tự).
      • gia (DECIMAL(10, 2)) - Giá sản phẩm (số thập phân, tối đa 10 chữ số, 2 chữ số thập phân).
    • Nhấp vào "Save".
  4. Thêm dữ liệu mẫu:
    • Chọn bảng sanpham.
    • Nhấp vào tab "Insert".
    • Nhập dữ liệu cho một vài sản phẩm (không cần nhập giá trị cho cột id). Ví dụ:
      • ten_sanpham: "Laptop Dell XPS 13", gia: 1200.50
      • ten_sanpham: "Chuột Logitech MX Master 3", gia: 99.99
      • ten_sanpham: "Bàn phím cơ Keychron K2", gia: 139.00
    • Nhấp vào "Go".

Bước 3: Viết mã HTML để hiển thị cấu trúc trang web

Tạo một thư mục mới trong thư mục htdocs của XAMPP (hoặc thư mục tương ứng của MAMP/WAMP), ví dụ: weblistsp. Bên trong thư mục này, tạo một file HTML có tên index.html.

HTML
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Danh sách sản phẩm</title>
    <style>
        table {
            width: 80%;
            border-collapse: collapse;
            margin: 20px auto;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>Danh sách sản phẩm</h1>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Tên sản phẩm</th>
                <th>Giá</th>
            </tr>
        </thead>
        <tbody id="danhSachSanPham">
            </tbody>
    </table>
</body>
</html>

Trong đoạn mã HTML này:

  • Chúng ta định nghĩa cấu trúc cơ bản của trang web (<html>, <head>, <body>).
  • Phần <head> chứa thông tin meta và tiêu đề trang. Chúng ta cũng thêm một chút CSS đơn giản để tạo kiểu cho bảng.
  • Phần <body> chứa tiêu đề <h1> và một bảng (<table>) để hiển thị dữ liệu sản phẩm.
  • <tbody> với id="danhSachSanPham" là nơi chúng ta sẽ chèn dữ liệu sản phẩm từ cơ sở dữ liệu bằng PHP.

Bước 4: Viết mã PHP để kết nối cơ sở dữ liệu và truy vấn dữ liệu

Tạo một file PHP có tên lay_sanpham.php trong cùng thư mục weblistsp.

PHP
<?php
$servername = "localhost"; // Tên máy chủ cơ sở dữ liệu
$username = "root";      // Tên người dùng cơ sở dữ liệu (thường là 'root' mặc định trên XAMPP/MAMP/WAMP)
$password = "";          // Mật khẩu cơ sở dữ liệu (thường là rỗng mặc định trên XAMPP/MAMP/WAMP)
$dbname = "quanlysanpham"; // Tên cơ sở dữ liệu

// Tạo kết nối đến cơ sở dữ liệu
$conn = new mysqli($servername, $username, $password, $dbname);

// Kiểm tra kết nối
if ($conn->connect_error) {
    die("Kết nối thất bại: " . $conn->connect_error);
}

// Truy vấn dữ liệu từ bảng 'sanpham'
$sql = "SELECT id, ten_sanpham, gia FROM sanpham";
$result = $conn->query($sql);

$data = array(); // Mảng để lưu trữ dữ liệu sản phẩm

if ($result->num_rows > 0) {
    // Lặp qua từng dòng kết quả
    while ($row = $result->fetch_assoc()) {
        $data[] = $row; // Thêm mỗi dòng dữ liệu vào mảng
    }
} else {
    echo "Không có sản phẩm nào.";
}

// Đóng kết nối
$conn->close();

// Trả về dữ liệu dưới dạng JSON (để dễ dàng xử lý bằng JavaScript nếu cần)
header('Content-Type: application/json');
echo json_encode($data);
?>

Trong đoạn mã PHP này:

  • Chúng ta khai báo các biến để lưu trữ thông tin kết nối cơ sở dữ liệu ($servername, $username, $password, $dbname).
  • Chúng ta tạo một kết nối đến cơ sở dữ liệu MySQL bằng hàm mysqli().
  • Chúng ta kiểm tra xem kết nối có thành công hay không. Nếu có lỗi, chúng ta dừng script và hiển thị thông báo lỗi.
  • Chúng ta viết một câu lệnh SQL ($sql) để chọn tất cả các cột id, ten_sanpham, và gia từ bảng sanpham.
  • Chúng ta thực thi câu lệnh SQL bằng phương thức $conn->query($sql) và lưu kết quả vào biến $result.
  • Chúng ta kiểm tra xem có dữ liệu trả về hay không ($result->num_rows > 0).
  • Nếu có dữ liệu, chúng ta sử dụng vòng lặp while để duyệt qua từng dòng kết quả ($row = $result->fetch_assoc()) và thêm mỗi dòng vào một mảng $data.
  • Cuối cùng, chúng ta đóng kết nối cơ sở dữ liệu bằng $conn->close().
  • Chúng ta đặt header Content-Type: application/json và sử dụng json_encode($data) để trả về dữ liệu dưới định dạng JSON. Điều này giúp bạn dễ dàng xử lý dữ liệu này bằng JavaScript nếu muốn làm trang web động hơn.

Bước 5: Hiển thị dữ liệu PHP trong HTML

Có hai cách chính để hiển thị dữ liệu PHP trong HTML:

Cách 1: Chèn trực tiếp mã PHP vào file HTML (thường dùng cho các trang đơn giản)

Đổi tên file index.html thành index.php. Sau đó, sửa đổi phần <tbody> trong file index.php như sau:

PHP
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Danh sách sản phẩm</title>
    <style>
        table {
            width: 80%;
            border-collapse: collapse;
            margin: 20px auto;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>Danh sách sản phẩm</h1>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Tên sản phẩm</th>
                <th>Giá</th>
            </tr>
        </thead>
        <tbody id="danhSachSanPham">
            <?php
            $servername = "localhost";
            $username = "root";
            $password = "";
            $dbname = "quanlysanpham";

            $conn = new mysqli($servername, $username, $password, $dbname);

            if ($conn->connect_error) {
                die("Kết nối thất bại: " . $conn->connect_error);
            }

            $sql = "SELECT id, ten_sanpham, gia FROM sanpham";
            $result = $conn->query($sql);

            if ($result->num_rows > 0) {
                while ($row = $result->fetch_assoc()) {
                    echo "<tr>";
                    echo "<td>" . $row["id"] . "</td>";
                    echo "<td>" . $row["ten_sanpham"] . "</td>";
                    echo "<td>" . number_format($row["gia"], 2) . "</td>";
                    echo "</tr>";
                }
            } else {
                echo "<tr><td colspan='3'>Không có sản phẩm nào.</td></tr>";
            }
            $conn->close();
            ?>
        </tbody>
    </table>
</body>
</html>

Trong cách này, chúng ta nhúng trực tiếp mã PHP vào file HTML (index.php). Khi trình duyệt yêu cầu file này, máy chủ web sẽ xử lý mã PHP trước và sau đó gửi kết quả HTML đã được tạo ra cho trình duyệt.

Cách 2: Sử dụng JavaScript để gọi file PHP và hiển thị dữ liệu (phương pháp hiện đại hơn cho các ứng dụng phức tạp)

Trong file index.html (hoặc index.php), bạn có thể sử dụng JavaScript để gọi file lay_sanpham.php và xử lý dữ liệu JSON trả về.

HTML
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Danh sách sản phẩm</title>
    <style>
        table {
            width: 80%;
            border-collapse: collapse;
            margin: 20px auto;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>Danh sách sản phẩm</h1>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Tên sản phẩm</th>
                <th>Giá</th>
            </tr>
        </thead>
        <tbody id="danhSachSanPham">
            </tbody>
    </table>

    <script>
        fetch('lay_sanpham.php')
            .then(response => response.json())
            .then(data => {
                const tableBody = document.getElementById('danhSachSanPham');
                let html = '';
                data.forEach(product => {
                    html += `
                        <tr>
                            <td>${product.id}</td>
                            <td>${product.ten_sanpham}</td>
                            <td>${parseFloat(product.gia).toFixed(2)}</td>
                        </tr>
                    `;
                });
                tableBody.innerHTML = html;
            })
            .catch(error => {
                console.error('Lỗi khi tải dữ liệu:', error);
                document.getElementById('danhSachSanPham').innerHTML = '<tr><td colspan="3">Không thể tải dữ liệu.</td></tr>';
            });
    </script>
</body>
</html>

Trong cách này:

  • Chúng ta sử dụng hàm fetch() của JavaScript để gửi một yêu cầu HTTP đến file lay_sanpham.php.
  • .then(response => response.json()) xử lý phản hồi và chuyển đổi dữ liệu nhận được thành định dạng JSON.
  • .then(data => { ... }) xử lý dữ liệu JSON:
    • Chúng ta lấy tham chiếu đến phần <tbody> của bảng.
    • Chúng ta tạo một chuỗi HTML bằng cách lặp qua mảng dữ liệu data.
    • Chúng ta chèn chuỗi HTML này vào innerHTML của <tbody>, hiển thị dữ liệu lên trang web.
  • .catch(error => { ... }) xử lý các lỗi có thể xảy ra trong quá trình gọi API.

Bước 6: Chạy trang web

  1. Mở trình duyệt web của bạn.
  2. Truy cập địa chỉ http://localhost/weblistsp/ (hoặc đường dẫn tương ứng với thư mục bạn đã tạo trong htdocs).

Bạn sẽ thấy một trang web hiển thị danh sách sản phẩm được lấy từ cơ sở dữ liệu.

Tóm tắt các phần chính:

  • HTML (index.html hoặc index.php): Định nghĩa cấu trúc và giao diện của trang web (bảng hiển thị sản phẩm).
  • PHP (lay_sanpham.php hoặc nhúng trong index.php): Kết nối đến cơ sở dữ liệu MySQL, thực hiện truy vấn SQL để lấy dữ liệu sản phẩm, và trả về dữ liệu (có thể ở định dạng HTML hoặc JSON).
  • SQL (trong file PHP): Câu lệnh SELECT id, ten_sanpham, gia FROM sanpham được sử dụng để lấy dữ liệu từ bảng sanpham.
  • Database (MySQL): Cơ sở dữ liệu quanlysanpham và bảng sanpham lưu trữ thông tin sản phẩm.

Lời khuyên và các bước tiếp theo:

  • Tìm hiểu sâu hơn về HTML: Khám phá các thẻ HTML khác nhau để tạo cấu trúc trang web phức tạp hơn (form, div, span, ul, li, v.v.).
  • Học CSS (Cascading Style Sheets): Để tạo kiểu và làm đẹp cho trang web của bạn (màu sắc, font chữ, bố cục, v.v.).
  • Nghiên cứu về PHP: Tìm hiểu về các khái niệm cơ bản của PHP như biến, kiểu dữ liệu, cấu trúc điều khiển (if, else, for, while), hàm, mảng, v.v.
  • Nâng cao kiến thức về SQL: Học cách sử dụng các câu lệnh SQL phức tạp hơn (WHERE, ORDER BY, LIMIT, JOIN, v.v.) để lọc, sắp xếp và kết hợp dữ liệu.
  • Tìm hiểu về bảo mật web: Luôn chú ý đến các vấn đề bảo mật khi làm việc với dữ liệu và người dùng (ví dụ: chống SQL injection, XSS).
  • Khám phá các Framework PHP: Sau khi nắm vững kiến thức cơ bản, bạn có thể tìm hiểu về các framework PHP phổ biến như Laravel, Symfony, CodeIgniter để phát triển ứng dụng web một cách nhanh chóng và hiệu quả hơn.

Hy vọng hướng dẫn chi tiết này sẽ giúp bạn bắt đầu hành trình học công nghệ web HTML, PHP và SQL. Chúc bạn thành công! Nếu bạn có bất kỳ câu hỏi nào khác, đừng ngần ngại hỏi nhé.