Trong bài trước, chúng ta đã cùng nhau tìm hiểu các kiến thức cần có để tạo ra một trang web. Hôm nay chúng ta sẽ cùng nhau xây dựng một trang web hoàn chỉnh. Dưới đây là các ví dụ đơn giản về cách tạo một trang web đăng nhập bằng PHP và MySQL. 

>>> Xem thêm các bài viết trong chuỗi bài về ngôn ngữ lập trình PHP:

1. Tạo cơ sở dữ liệu

Tạo một bảng trong cơ sở dữ liệu MySQL để lưu trữ thông tin người dùng. Ví dụ:

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL
);

2. Kết nối với cơ sở dữ liệu

Tạo kết nối từ PHP đến cơ sở dữ liệu MySQL. Tạo file config.php để lưu thông tin kết nối:

<?php
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database_name";

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

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
?>

3. Tạo trang đăng nhập (login.php)

Tạo một form HTML để người dùng nhập thông tin đăng nhập và xác thực với cơ sở dữ liệu:

<!DOCTYPE html>
<html>
<head>
    <title>Trang Đăng Nhập</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 300px;
        }

        h2 {
            text-align: center;
        }

        form {
            display: flex;
            flex-direction: column;
        }

        label {
            margin-bottom: 5px;
        }

        input[type="text"],
        input[type="password"] {
            padding: 8px;
            margin-bottom: 10px;
            border-radius: 3px;
            border: 1px solid #ccc;
            flex: 1; /* Để input mở rộng theo chiều ngang */
        }

        .input-group {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        button {
            padding: 10px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Đăng Nhập</h2>
        <form method="post" action="">
            <div class="input-group">
                <label for="username">Tên đăng nhập:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="input-group">
                <label for="password">Mật khẩu:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">Đăng Nhập</button>
        </form>
        <?php if (isset($error)) { echo $error; } ?>
    </div>
</body>
</html>

Chúng ta có được trang Login:

4. Trang Dashboard (dashboard.php)

Nếu đăng nhập thành công, người dùng sẽ được chuyển hướng đến trang dashboard:

<?php
session_start();

if (!isset($_SESSION['username'])) {
    header("Location: login.php");
    exit;
}
?>
<!DOCTYPE html>
<html>
<head>
    <title>Dashboard</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-top: 50px;
        }

        h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        p {
            text-align: center;
            font-size: 18px;
            color: #333;
        }

        a {
            display: block;
            width: 100px;
            margin: 20px auto;
            padding: 10px;
            text-align: center;
            color: #fff;
            background-color: #4caf50;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        a:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Xin chào, <?php echo $_SESSION['username']; ?></h2>
        <p>Đây là trang dashboard của bạn.</p>
        <a href="logout.php">Đăng Xuất</a>
    </div>
</body>
</html>

Chúng ta có được màn hình sau khi login thành công:

Xem thêm bài viết về PHP:

- Tìm hiểu về hàm preg_match_all trong PHP

- Xử lý hàm date (ngày tháng) trong PHP

- Giới hạn ký tự hiển thị và chức năng read more trong PHP

5. Tính năng đăng xuất (logout.php)

Tạo một trang logout để người dùng có thể đăng xuất:

<?php
session_start();
session_destroy();
header("Location: login.php");
exit;
?>

6. Những lưu ý khi viết khi xây dựng trang web bằng PHP

  • Bảo mật mật khẩu: Không lưu mật khẩu trong cơ sở dữ liệu dưới dạng văn bản thô, hãy sử dụng hàm băm (hashing) như password_hash() trong PHP để mã hóa mật khẩu.
  • Bảo mật thêm: Sử dụng các biện pháp bảo mật như sử dụng Prepared Statements để ngăn chặn tấn công SQL Injection.
  • Đây chỉ là một ví dụ đơn giản, để xây dựng một hệ thống đăng nhập an toàn và đầy đủ, cần xem xét và triển khai nhiều biện pháp bảo mật và tính năng hơn.

Bạn muốn trở thành một nhà lập trình PHP chuyên nghiệp? Hãy bắt đầu với cuốn Ebook hữu ích từ Stringee! 

>>> ĐĂNG KÝ NHẬN EBOOK PHP MIỄN PHÍ TẠI ĐÂY:  

Kết luận

Như vậy chúng ta đã cùng nhau dựng một trang web hoàn chỉnh bằng PHP và MySQL. Đây chỉ là một ví dụ đơn giản về cách bắt đầu tạo trang web động bằng PHP. Để xây dựng ứng dụng lớn hơn, bạn cần nắm vững kiến thức về PHP, MySQL hoặc các công nghệ cơ sở dữ liệu khác, AJAX, JavaScript, và các khía cạnh bảo mật. Chúc các bạn học tốt.

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy, Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY: 

Banner bottom