Click ngay
Xin chào các bạn, mình là Nhân Blogger đây, hôm nay mình sẽ thủ thuật cho bạn nào đam mê PHP và SQL.
- Form Login và đăng ký có lẽ rất nhiều bạn thắc mắc tại sao nó lại làm được như vậy ? tại sao nó lại Insert kết quả từ Input vào SQL của bạn và hiển thị nó khi đã login. Code login này được ứng dụng trong các Website gạch thẻ + dịch vụ,...

Tạo Form Đăng Ký

Bước 1 : Tạo table và column

- Bạn tiến hành tạo 1 database , vào phần SQL và cho đoạn văn bản sau vào và nhấn "Tiến hành" để tạo table users và các cột cần thiết :

CREATE TABLE users (
    id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
Trong đó :

  • users : là tên table cần tạo
  • username : cột tên đăng nhập ,varchar (50) là số kí tự tối đa được cho phép
  • password : cột mật khẩu, varchar (255) là số kí tự tối đa được cho phép
  • create_at : là thời gian mà cột được tạo ( thời gian tài khoản được đăng ký )

Bước 2 : Tạo file config kết nối database

- Bạn tạo file config.php trong trình quản lý file của tên miền, đặt nó với tên config.php hoặc bất kỳ tên gì bạn thích, nhưng bạn sẽ phải chỉnh sửa nó ở những file khác .
- Bạn tiến hành đoạn php sau vào file config.php để tạo file connection.


<?php
/* Database credentials. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username_database');
define('DB_PASSWORD', 'database_matkhau');
define('DB_NAME', 'ten_database');

/* Attempt to connect to MySQL database */
$link = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);

// Check connection
if($link === false){
    die("ERROR: Khong the ket noi. " . mysqli_connect_error());
}
?>

  •  username_database : username của database mà bạn đã tạo
  • database_matkhau : mật khẩu database
  • ten_database : tên database mà bạn đã tạo
Lưu ý : Vui lòng config đúng database để có thể nhận dữ liệu ở bản mà ta đã tạo ở bước 1.

Bước 3 : Tạo File Register ( Đăng ký tài khoản )


Hãy tạo một tệp PHP "register.php" khác và đặt mã code sau vào nó. Mã code này sẽ tạo một form  cho phép người dùng tự đăng ký.

Tập lệnh này cũng sẽ tạo ra lỗi nếu người dùng cố gắng gửi biểu mẫu mà không nhập bất kỳ giá trị nào hoặc nếu tên người dùng do người dùng nhập đã được người dùng khác thực hiện.

<?php
// Chèn file config
require_once "config.php";

// Xác định biến và khởi tạo với giá trị trống
$username = $password = $confirm_password = "";
$username_err = $password_err = $confirm_password_err = "";

// Xử lý dữ liệu biểu mẫu khi biểu mẫu được gửi
if($_SERVER["REQUEST_METHOD"] == "POST"){

    // Xác thực tên người dùng
    if(empty(trim($_POST["username"]))){
        $username_err = "Please enter a username.";
    } else{
        // Chuẩn bị một câu lệnh chọn
        $sql = "SELECT id FROM users WHERE username = ?";
     
        if($stmt = mysqli_prepare($link, $sql)){
            // Ràng buộc các biến vào câu lệnh đã chuẩn bị làm tham số
            mysqli_stmt_bind_param($stmt, "s", $param_username);
         
            // Đặt thông số
            $param_username = trim($_POST["username"]);
         
            // Cố gắng thực thi câu lệnh đã chuẩn bị
            if(mysqli_stmt_execute($stmt)){
                /* store result */
                mysqli_stmt_store_result($stmt);
             
                if(mysqli_stmt_num_rows($stmt) == 1){
                    $username_err = "Tên người dùng này đã được sử dụng.";
                } else{
                    $username = trim($_POST["username"]);
                }
            } else{
                echo "Rất tiếc! Đã xảy ra sự cố. Vui lòng thử lại sau.";
            }
        }
       
        // Câu lệnh đóng
        mysqli_stmt_close($stmt);
    }
 
    // Xác nhận mật khẩu
    if(empty(trim($_POST["password"]))){
        $password_err = "Please enter a password.";   
    } elseif(strlen(trim($_POST["password"])) < 6){
        $password_err = "Mật khẩu phải có ít nhất 6 ký tự.";
    } else{
        $password = trim($_POST["password"]);
    }
 
    // Xác nhận mật khẩu xác nhận
    if(empty(trim($_POST["confirm_password"]))){
        $confirm_password_err = "Please confirm password.";   
    } else{
        $confirm_password = trim($_POST["confirm_password"]);
        if(empty($password_err) && ($password != $confirm_password)){
            $confirm_password_err = "Mật khẩu không khớp.";
        }
    }
 
    // Kiểm tra lỗi đầu vào trước khi chèn vào cơ sở dữ liệu
    if(empty($username_err) && empty($password_err) && empty($confirm_password_err)){
     
        // Chuẩn bị một câu lệnh chèn
        $sql = "INSERT INTO users (username, password) VALUES (?, ?)";
       
        if($stmt = mysqli_prepare($link, $sql)){
            // Ràng buộc các biến vào câu lệnh đã chuẩn bị làm tham số
            mysqli_stmt_bind_param($stmt, "ss", $param_username, $param_password);
         
            // Đặt thông số
            $param_username = $username;
            $param_password = password_hash($password, PASSWORD_DEFAULT); // Creates a password hash
         
            // Cố gắng thực thi câu lệnh đã chuẩn bị
            if(mysqli_stmt_execute($stmt)){
                // Redirect to login pages
                header("location: login.php");
            } else{
                echo "Đã xảy ra sự cố. Vui lòng thử lại sau.";
            }
        }
       
        // Câu lệnh đóng
        mysqli_stmt_close($stmt);
    }
 
    // Đóng kết nối
    mysqli_close($link);
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sign Up</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
    <style type="text/css">
        body{ font: 14px sans-serif; }
        .wrapper{ width: 350px; padding: 20px; }
    </style>
</head>
<body>
    <div class="wrapper">
        <h2>Sign Up</h2>
        <p>Please fill this form to create an account.</p>
        <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
            <div class="form-group <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>">
                <label>Tên đăng nhập</label>
                <input type="text" name="username" class="form-control" value="<?php echo $username; ?>">
                <span class="help-block"><?php echo $username_err; ?></span>
            </div> 
            <div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
                <label>Tạo mật khẩu</label>
                <input type="password" name="password" class="form-control" value="<?php echo $password; ?>">
                <span class="help-block"><?php echo $password_err; ?></span>
            </div>
            <div class="form-group <?php echo (!empty($confirm_password_err)) ? 'has-error' : ''; ?>">
                <label>Nhập lại mật khẩu</label>
                <input type="password" name="confirm_password" class="form-control" value="<?php echo $confirm_password; ?>">
                <span class="help-block"><?php echo $confirm_password_err; ?></span>
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-primary" value="Đăng ký">
                <input type="reset" class="btn btn-default" value="Đặt lại mật khẩu">
            </div>
            <p>Bạn đã có tài khoản ? <a href="login.php">Đăng nhập</a>.</p>
        </form>
    </div> 
</body>
</html>
- Đây là demo form đăng ký :


- Trong ví dụ trên, mình đã sử dụng hàm PHP password_hash () để tạo mật khẩu mã hóa từ chuỗi mật khẩu được người dùng nhập vào (dòng số 75). Chức năng này tạo ra một mã hóa mật khẩu bằng cách sử dụng một thuật toán mã hóa mạnh mẽ một chiều. Nó cũng tạo ra và áp dụng một muối ngẫu nhiên tự động khi mã hóa mật khẩu; điều này có nghĩa là ngay cả khi hai người dùng có cùng mật khẩu, mật khẩu của họ sẽ khác.

- Tại thời điểm đăng nhập, mình sẽ xác minh mật khẩu đã cho bằng mật khẩu mã hóa được lưu trữ trong cơ sở dữ liệu bằng cách sử dụng hàm PHP password_verify (), như được minh họa trong ví dụ tiếp theo.

Mẹo: Mật khẩu salting là một kỹ thuật được sử dụng rộng rãi để bảo mật mật khẩu bằng cách ngẫu nhiên mã hóa mật khẩu, để nếu hai người dùng có cùng một mật khẩu, họ sẽ không có cùng một mật khẩu mã hóa. Điều này được thực hiện bằng cách thêm hoặc thêm một chuỗi ngẫu nhiên, được gọi là muối, vào mật khẩu trước khi mã hóa.

Xây dựng form đăng nhập

- Trong phần này, mình sẽ tạo một biểu mẫu đăng nhập để người dùng có thể nhập tên người dùng và mật khẩu của họ. Khi người dùng gửi biểu mẫu, các đầu vào này sẽ được xác minh dựa vào thông tin đăng nhập được lưu trữ trong cơ sở dữ liệu, nếu tên người dùng và mật khẩu khớp nhau, người dùng được ủy quyền và cấp quyền truy cập vào trang web, nếu không, nỗ lực đăng nhập sẽ bị từ chối.

Bước 1 : Tạo Form Login

Hãy tạo một tệp có tên là "login.php" và đặt đoạn mã sau bên trong nó.

<?php
// Initialize the session
session_start();

// Check if the user is already logged in, if yes then redirect him to welcome page
if(isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true){
    header("location: welcome.php");
    exit;
}

// Include config file
require_once "config.php";

// Define variables and initialize with empty values
$username = $password = "";
$username_err = $password_err = "";

// Processing form data when form is submitted
if($_SERVER["REQUEST_METHOD"] == "POST"){

    // Check if username is empty
    if(empty(trim($_POST["username"]))){
        $username_err = "Please enter username.";
    } else{
        $username = trim($_POST["username"]);
    }
 
    // Check if password is empty
    if(empty(trim($_POST["password"]))){
        $password_err = "Please enter your password.";
    } else{
        $password = trim($_POST["password"]);
    }
 
    // Validate credentials
    if(empty($username_err) && empty($password_err)){
        // Prepare a select statement
        $sql = "SELECT id, username, password FROM users WHERE username = ?";
     
        if($stmt = mysqli_prepare($link, $sql)){
            // Bind variables to the prepared statement as parameters
            mysqli_stmt_bind_param($stmt, "s", $param_username);
         
            // Set parameters
            $param_username = $username;
         
            // Attempt to execute the prepared statement
            if(mysqli_stmt_execute($stmt)){
                // Store result
                mysqli_stmt_store_result($stmt);
             
                // Check if username exists, if yes then verify password
                if(mysqli_stmt_num_rows($stmt) == 1){                 
                    // Bind result variables
                    mysqli_stmt_bind_result($stmt, $id, $username, $hashed_password);
                    if(mysqli_stmt_fetch($stmt)){
                        if(password_verify($password, $hashed_password)){
                            // Password is correct, so start a new session
                            session_start();
                         
                            // Store data in session variables
                            $_SESSION["loggedin"] = true;
                            $_SESSION["id"] = $id;
                            $_SESSION["username"] = $username;                         
                         
                            // Redirect user to welcome page
                            header("location: welcome.php");
                        } else{
                            // Display an error message if password is not valid
                            $password_err = "The password you entered was not valid.";
                        }
                    }
                } else{
                    // Display an error message if username doesn't exist
                    $username_err = "No account found with that username.";
                }
            } else{
                echo "Oops! Something went wrong. Please try again later.";
            }
        }
     
        // Close statement
        mysqli_stmt_close($stmt);
    }
 
    // Close connection
    mysqli_close($link);
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
    <style type="text/css">
        body{ font: 14px sans-serif; }
        .wrapper{ width: 350px; padding: 20px; }
    </style>
</head>
<body>
    <div class="wrapper">
        <h2>Login</h2>
        <p>Please fill in your credentials to login.</p>
        <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
            <div class="form-group <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>">
                <label>Username</label>
                <input type="text" name="username" class="form-control" value="<?php echo $username; ?>">
                <span class="help-block"><?php echo $username_err; ?></span>
            </div> 
            <div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
                <label>Password</label>
                <input type="password" name="password" class="form-control">
                <span class="help-block"><?php echo $password_err; ?></span>
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-primary" value="Login">
            </div>
            <p>Don't have an account? <a href="register.php">Sign up now</a>.</p>
        </form>
    </div> 
</body>
</html>
- Sau làm theo hướng dẫn trên,form đăng nhập sẽ trông giống như sau:


Bước 2 : Tạo trang welcome sau khi đăng nhập

Đây là code của tập tin "welcome.php" của mình, nơi người dùng được chuyển hướng sau khi đăng nhập thành công.
<?php
// Initialize the session
session_start();

// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
    header("location: login.php");
    exit;
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
    <style type="text/css">
        body{ font: 14px sans-serif; text-align: center; }
    </style>
</head>
<body>
    <div class="page-header">
        <h1>Hi, <b><?php echo htmlspecialchars($_SESSION["username"]); ?></b>. Welcome to our site.</h1>
    </div>
    <p>
        <a href="reset-password.php" class="btn btn-warning">Reset Your Password</a>
        <a href="logout.php" class="btn btn-danger">Sign Out of Your Account</a>
    </p>
</body>
</html>
<?php echo htmlspecialchars($_SESSION["username"]); ?> : username là dữ liệu của cột username, ví dụ bạn tạo username là vohuunhan thì hệ thống sẽ hiển thị "Hi, vohuunhan".

Nếu dữ liệu đến từ các nguồn bên ngoài như biểu mẫu được điền bởi người dùng ẩn danh, có nguy cơ là nó có thể chứa tập lệnh độc hại thụt vào để khởi chạy các tấn công tập lệnh cross-site scripting (XSS). Vì vậy, bạn phải thoát khỏi dữ liệu này bằng cách sử dụng hàm htmlspecialchars () PHP trước khi hiển thị nó trong trình duyệt, để bất kỳ thẻ HTML nào chứa nó trở nên vô hại.


Ví dụ: sau khi thoát các ký tự đặc biệt, cảnh báo chuỗi <script> ("XSS") </ script> trở thành cảnh báo & lt; script & gt; ("XSS") & lt; / script & gt; không được trình duyệt thực hiện.

Bước 3 : Tạo File Đăng Xuất ( Logout.php )

Bây giờ, hãy tạo một tệp "logout.php". Khi người dùng nhấp vào liên kết đăng xuất hoặc đăng xuất, tập lệnh bên trong tệp này sẽ hủy phiên và chuyển hướng người dùng trở lại trang đăng nhập.

<?php
// Initialize the session
session_start();

// Unset all of the session variables
$_SESSION = array();

// Destroy the session.
session_destroy();

// Redirect to login page
header("location: login.php");
exit;
?>

 Bước 4 : Tạo Form Đặt Lại Mật Khẩu ( Reset Password )

Cuối cùng, trong phần này, mình sẽ thêm tiện ích đặt lại mật khẩu vào hệ thống đăng nhập của chúng tôi. Sử dụng tính năng này đã đăng nhập người dùng có thể đặt lại mật khẩu của chính họ ngay lập tức cho tài khoản của họ.

<?php
// Initialize the session
session_start();

// Check if the user is logged in, if not then redirect to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
    header("location: login.php");
    exit;
}

// Include config file
require_once "config.php";

// Define variables and initialize with empty values
$new_password = $confirm_password = "";
$new_password_err = $confirm_password_err = "";

// Processing form data when form is submitted
if($_SERVER["REQUEST_METHOD"] == "POST"){

    // Validate new password
    if(empty(trim($_POST["new_password"]))){
        $new_password_err = "Please enter the new password.";   
    } elseif(strlen(trim($_POST["new_password"])) < 6){
        $new_password_err = "Password must have atleast 6 characters.";
    } else{
        $new_password = trim($_POST["new_password"]);
    }
 
    // Validate confirm password
    if(empty(trim($_POST["confirm_password"]))){
        $confirm_password_err = "Please confirm the password.";
    } else{
        $confirm_password = trim($_POST["confirm_password"]);
        if(empty($new_password_err) && ($new_password != $confirm_password)){
            $confirm_password_err = "Password did not match.";
        }
    }
     
    // Check input errors before updating the database
    if(empty($new_password_err) && empty($confirm_password_err)){
        // Prepare an update statement
        $sql = "UPDATE users SET password = ? WHERE id = ?";
     
        if($stmt = mysqli_prepare($link, $sql)){
            // Bind variables to the prepared statement as parameters
            mysqli_stmt_bind_param($stmt, "si", $param_password, $param_id);
         
            // Set parameters
            $param_password = password_hash($new_password, PASSWORD_DEFAULT);
            $param_id = $_SESSION["id"];
         
            // Attempt to execute the prepared statement
            if(mysqli_stmt_execute($stmt)){
                // Password updated successfully. Destroy the session, and redirect to login page
                session_destroy();
                header("location: login.php");
                exit();
            } else{
                echo "Oops! Something went wrong. Please try again later.";
            }
        }
     
        // Close statement
        mysqli_stmt_close($stmt);
    }
 
    // Close connection
    mysqli_close($link);
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reset Password</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
    <style type="text/css">
        body{ font: 14px sans-serif; }
        .wrapper{ width: 350px; padding: 20px; }
    </style>
</head>
<body>
    <div class="wrapper">
        <h2>Reset Password</h2>
        <p>Please fill out this form to reset your password.</p>
        <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
            <div class="form-group <?php echo (!empty($new_password_err)) ? 'has-error' : ''; ?>">
                <label>New Password</label>
                <input type="password" name="new_password" class="form-control" value="<?php echo $new_password; ?>">
                <span class="help-block"><?php echo $new_password_err; ?></span>
            </div>
            <div class="form-group <?php echo (!empty($confirm_password_err)) ? 'has-error' : ''; ?>">
                <label>Confirm Password</label>
                <input type="password" name="confirm_password" class="form-control">
                <span class="help-block"><?php echo $confirm_password_err; ?></span>
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-primary" value="Submit">
                <a class="btn btn-link" href="welcome.php">Cancel</a>
            </div>
        </form>
    </div> 
</body>
</html>
Vậy là mình đã hướng dẫn các bạn tạo form đăng ký & đăng nhập, chúc các bạn thành công với thủ thuật này, các bạn có thể sử dụng CSS để tùy biến cho form đăng nhập của bạn chuyên nghiệp hơn. 

Tags