Tạo trang đăng nhập – Tạo website bằng PHP (Phần 4)

Ở bài trước, chúng ta đã hoàn thành xong phần tạo trang đăng ký thành viên, hôm nay chúng ta sẽ tiếp tục tạo trang đăng nhập và sử dụng thông tin đã đăng ký trong bài trước để đăng nhập vào hệ thống của chúng ta.

TẠO TRANG ĐĂNG NHẬP

Nội dung bài viết hôm nay bao gồm các mục chính như sau :

• Thiết kế giao diện trang đăng nhập
• Lấy thông tin đăng nhập so sánh đối chiều với dữ liệu trong database
• Nếu đăng nhập thành công lưu thông tin người dùng vào session dùng cho các mục đích khác
• Nếu đăng nhập thất bại hiển thị thông báo lỗi cho người dùng

1. Thiết kế giao diện trang đăng nhập

Trong thư mục website đã tạo ra ở phần 1, các bạn tạo một file và đặt tên là dang-nhap.php có nội dung như sau :

<?php include "includes/header.php" ?>
	<form method="POST" action="dang-nhap.php">
	<fieldset>
	    <legend>Đăng nhập</legend>
	    	<table>
	    		<tr>
	    			<td>Username</td>
	    			<td><input type="text" name="username" size="30"></td>
	    		</tr>
	    		<tr>
	    			<td>Password</td>
	    			<td><input type="password" name="password" size="30"></td>
	    		</tr>
	    		<tr>
	    			<td colspan="2" align="center"> <input type="submit" name="btn_submit" value="Đăng nhập"></td>
	    		</tr>
	    	</table>
  </fieldset>
  </form>
<?php include "includes/footer.php" ?>

Vào trình duyệt, chạy đường dẫn :

http://localhost/website/dang-nhap.php

các bạn sẽ có được giao diện trang đăng nhập hiển thị ra như sau :

Trong form đăng nhập này bao gồm:

Username : tên đăng nhập của người dùng

Password : Mật khẩu đăng nhập

Nut Đăng nhập : Tiến hành thực thi kiểm tra thông tin đăng nhập

Trong thẻ <form> mình dùng method=”POST”, là phương thức được chỉ định để gửi thông tin đi (Bạn có thể tham khảo sự khác nhau giữa POST và GET tại đây )

2. Tiến hành xử lý thông tin đăng nhập

a. Khởi tạo session

Sau khi đã thiết kế xong giao diện dành cho trang đăng nhập, tiếp đến chúng ta sẽ tiến hành xử lý thông tin đăng nhập. Như đã nói ở trên, khi kiểm tra thông tin đăng nhập, nếu thông tin đúng chúng ta sẽ lưu thông tin đăng nhập vào session, ngược lại sai thì sẽ hiển thị thông báo lỗi ra ngoài.

Để thực thi việc lưu thông tin vào session chúng ta luôn phải làm thao tác đầu tiên đó là khởi tạo session. Cú pháp khởi tạo session như sau:

<?php
session_start();
?>

đoạn code này các bạn lưu ý phải đặt ở đầu trang dang-nhap.php nhé.

b. Xử lý đăng nhập

Tiếp theo, chúng ta sẽ bắt đầu xử lý thông tin đăng nhập, nếu thông tin đúng sẽ tiến hành lưu vào session, ngược lại thông báo lỗi cho người dùng và yêu cầu họ nhập lại.

Gợi ý: Bạn đang quan tâm đến Bitcoin? Tìm hiểu ngay Bitcoin Toàn Tập Cho Người Mới nhé!

<?php
	//Gọi file connection.php ở bài trước
require_once("includes/connection.php");
	// Kiểm tra nếu người dùng đã ân nút đăng nhập thì mới xử lý
if (isset($_POST["btn_submit"])) {
		// lấy thông tin người dùng
	$username = $_POST["username"];
	$password = $_POST["password"];
		//làm sạch thông tin, xóa bỏ các tag html, ký tự đặc biệt 
		//mà người dùng cố tình thêm vào để tấn công theo phương thức sql injection
	$username = strip_tags($username);
	$username = addslashes($username);
	$password = strip_tags($password);
	$password = addslashes($password);
	if ($username == "" || $password =="") {
		echo "username hoặc password bạn không được để trống!";
	}else{
		$sql = "select * from users where username = '$username' and password = '$password' ";
		echo $sql;
		$query = mysqli_query($conn,$sql);
		$num_rows = mysqli_num_rows($query);
		if ($num_rows==0) {
			echo "tên đăng nhập hoặc mật khẩu không đúng !";
		}else{
			// Lấy ra thông tin người dùng và lưu vào session
			while ( $data = mysqli_fetch_array($query) ) {
	    		$_SESSION["user_id"] = $data["id"];
				$_SESSION['username'] = $data["username"];
				$_SESSION["email"] = $data["email"];
				$_SESSION["fullname"] = $data["fullname"];
				$_SESSION["is_block"] = $data["is_block"];
				$_SESSION["permision"] = $data["permision"];
	    	}
			
                // Thực thi hành động sau khi lưu thông tin vào session
                // ở đây mình tiến hành chuyển hướng trang web tới một trang gọi là index.php
			header('Location: index.php');
		}
	}
}
?>

Toàn bộ chú thích mình đã comment bên trong code, các bạn đọc comment để hiểu rõ hơn.

c. Toàn bộ code trang dang-nhap.php

Như vậy toàn bộ đoạn code của trang dang-nhap.php có nội dung như sau :

<?php
session_start();

?>

<?php include "includes/header.php" ?>
<?php 
//Gọi file connection.php ở bài trước
require_once("includes/connection.php");
	// Kiểm tra nếu người dùng đã ân nút đăng nhập thì mới xử lý
if (isset($_POST["btn_submit"])) {
	// lấy thông tin người dùng
	$username = $_POST["username"];
	$password = $_POST["password"];
	//làm sạch thông tin, xóa bỏ các tag html, ký tự đặc biệt 
	//mà người dùng cố tình thêm vào để tấn công theo phương thức sql injection
	$username = strip_tags($username);
	$username = addslashes($username);
	$password = strip_tags($password);
	$password = addslashes($password);
	if ($username == "" || $password =="") {
		echo "username hoặc password bạn không được để trống!";
	}else{
		$sql = "select * from users where username = '$username' and password = '$password' ";
		$query = mysqli_query($conn,$sql);
		$num_rows = mysqli_num_rows($query);
		if ($num_rows==0) {
			echo "tên đăng nhập hoặc mật khẩu không đúng !";
		}else{
			// Lấy ra thông tin người dùng và lưu vào session
			while ( $data = mysqli_fetch_array($query) ) {
	    		$_SESSION["user_id"] = $data["id"];
				$_SESSION['username'] = $data["username"];
				$_SESSION["email"] = $data["email"];
				$_SESSION["fullname"] = $data["fullname"];
				$_SESSION["is_block"] = $data["is_block"];
				$_SESSION["permision"] = $data["permision"];
	    	}
			
                // Thực thi hành động sau khi lưu thông tin vào session
                // ở đây mình tiến hành chuyển hướng trang web tới một trang gọi là index.php
			header('Location: index.php');
		}
	}
}
?>
	<form method="POST" action="dang-nhap.php">
	<fieldset>
	    <legend>Đăng nhập</legend>
	    	<table>
	    		<tr>
	    			<td>Username</td>
	    			<td><input type="text" name="username" size="30"></td>
	    		</tr>
	    		<tr>
	    			<td>Password</td>
	    			<td><input type="password" name="password" size="30"></td>
	    		</tr>
	    		<tr>
	    			<td colspan="2" align="center"> <input type="submit" name="btn_submit" value="Đăng nhập"></td>
	    		</tr>
	    	</table>
  </fieldset>
  </form>
<?php include "includes/footer.php" ?>

Khi các bạn chạy trang này, điền đầy đủ thông tin (thông tin username, password các bạn lấy ở bài Hướng dẫn tạo trang đăng ký). Nếu thông tin nhập đúng, khi ấn nút Đăng nhập bạn sẽ được chuyển hướng đến trang index.php. Ngược lại sẽ hiển thông báo lỗi ra bên ngoài.

Kết thúc bài viết, nếu bạn có bất kỳ thắc mắc nào thì để lại comment bên dưới, chúng ta sẽ cùng nhau thảo luận. Nếu thấy bài viết hay thì đừng quên ấn nút  share bên dưới để mọi người cùng nhau học nhé.

P/S : Bài viết là công sức mình và thời gian mình bỏ ra chia sẽ đến các bạn, hy vọng các bạn học tốt hơn, nên bạn nào copy bài, vui lòng ghi rõ nguồn giúp mình nhé. Đây là nguyên tắc tôn trọng người viết bài,

Chúc các bạn học tốt !