Bài 04: PHP Note Online - Đăng ký, đăng nhập, đăng xuất

DOWNLOAD

Chào mừng các bạn đã quay trở lại với series hướng dẫn xây dựng ứng dụng ghi chú online bằng PHP OOP và Ajax. Trong bài học trước chúng ta đã xây dựng xong layout, hôm nay mình sẽ hướng dẫn các bạn cách tạo chức năng đăng ký, đăng nhập và đăng xuất cho ứng dụng nhé ! Bài này tương đối dài nên mình yêu cầu các bạn đọc kỹ và làm từng bước. OK, bây giờ chúng ta tiến hành ngay thôi !

1. Đăng ký 

Layout

Template form đăng nhập và đăng ký mình sẽ viết vào chung một file luôn nên bước Đăng nhập mình sẽ không nói về phần layout nữa nhé ! Các bạn mở file templates/signin-up-form.php lên rồi copy nội dung sau :

<div class="container">
	<div class="row">
		<div class="col-md-5">
			<h3 class="text-primary">Đăng nhập</h3>
			<form method="POST" onsubmit="return false;" id="formSignin">
				<div class="form-group">
	    			<label for="user_signin">Tên đăng nhập</label>
	    			<input type="text" class="form-control" id="user_signin">
	  			</div>
	  			<div class="form-group">
	    			<label for="pass_signin">Mật khẩu</label>
	    			<input type="password" class="form-control" id="pass_signin">
	  			</div>
	  			<button class="btn btn-primary" id="submit_signin">Đăng nhập</button>
	  			<br><br>
	  			<div class="alert alert-danger hidden"></div>
			</form>
		</div>
	</div>
	<div class="row">
		<div class="col-md-5">
			<h3 class="text-success">Đăng ký tài khoản</h3>
			<p class="text-danger">* Vui lòng nhập đầy đủ thông tin dưới đây để đăng ký tài khoản :</p>
			<form method="POST" onsubmit="return false;" id="formSignup">
				<div class="form-group">
	    			<input type="text" class="form-control" placeholder="Tên đăng nhập" id="user_signup">
	  			</div>
	  			<div class="form-group">
	    			<input type="password" class="form-control" placeholder="Mật khẩu" id="pass_signup">
	  			</div>
	  			<div class="form-group">
	    			<input type="password" class="form-control" placeholder="Nhập lại mật khẩu" id="repass_signup">
	  			</div>
	  			<button class="btn btn-success" id="submit_signup">Tạo tài khoản</button>
	  			<br><br>
	  			<div class="alert alert-danger hidden"></div>
			</form>
		</div>
	</div>
</div>
Trong đó :

  • #formSignin là form đăng nhập.
  • #formSigup là form đăng ký.

Viết Ajax gửi dữ liệu

Mở file js/functions/signup.js lên vào dán đoạn code này vào :

// Bắt sự kiện khi click vào nút Tạo tài khoản
$('#submit_signup').on('click', function() {
	// Gán các giá trị trong form đăng ký vào các biến
	$user_signup = $('#user_signup').val();
	$pass_signup = $('#pass_signup').val();
	$repass_signup = $('#repass_signup').val();

	// Nếu một trong các biến này rỗng
	if ($user_signup == '' || $pass_signup == '' || $repass_signup == '')
	{
		// Hiển thị thông báo lỗi
		$('#formSignup .alert').removeClass('hidden');
		$('#formSignup .alert').html('Vui lòng điền đầy đủ thông tin bên trên.');
	}
	// Ngược lại
	else
	{
		// Thực thi gửi dữ liệu bằng Ajax
		$.ajax({
			url : 'signup.php', // Đường dẫn file nhận dữ liệu
			type : 'POST', // Phương thức gửi dữ liệu
			// Các dữ liệu
			data : {
				user_signup : $user_signup,
				pass_signup : $pass_signup,
				repass_signup : $repass_signup
			// Thực thi khi gửi dữ liệu thành công
			}, success : function(data) {
				$('#formSignup .alert').html(data);
			}
		});
	}
});
Đoạn code trên đây quá quen thuộc rồi nên mình sẽ không giải thích nữa nhé !

Viết PHP xử lý dữ liệu

File signup.php sẽ đảm nhận nhiệm vụ này. Các bạn mở file này lên và paste đoạn code này vào :

<?php

// Include database, session, general info
require_once 'core/init.php';

// Nếu tồn tại $user
if ($user)
{
	header('Location: index.php'); // Di chuyển đến trang chủ
}

// Nhận dữ liệu và gán vào các biến đồng thời xử lý chuỗi
$user_signup = $db->real_escape_string(@$_POST['user_signup']);
$pass_signup = @$_POST['pass_signup'];
$repass_signup = @$_POST['repass_signup'];

// Các biến chứa code JS về thông báo
$show_alert = "<script>$('#formSignup .alert').removeClass('hidden');</script>";
$hide_alert = "<script>$('#formSignup .alert').addClass('hidden');</script>";
$success_alert = "<script>$('#formSignup .alert').attr('class', 'alert alert-success');</script>";

// Lệnh SQL kiểm tra sự tồn tại của username
$sql_check_user_exist = "SELECT username FROM users WHERE username = '$user_signup'";

// Nếu độ dài tên đăng nhập không nằm trong khoảng từ 6-24 ký tự
if (strlen($user_signup) < 6 || strlen($user_signup) > 24)
{
	echo $show_alert.'Tên đăng nhập phải nằm trong khoảng 6-24 ký tự.';
}
// Ngược lại nếu tên đăng nhập chứa ký tự đặc biệt và khoảng trắng
else if (preg_match('/\W/', $user_signup))
{
	echo $show_alert.'Tên đăng nhập không được chứa ký tự đặc biệt và khoảng trắng.';
}
// Ngược lại nếu tồn tại tên đăng nhập
else if ($db->num_rows($sql_check_user_exist))
{
	echo $show_alert.'Tên đăng nhập đã tồn tại, vui lòng sử dụng tên khác.';
}
// Ngược lại nếu độ dài mật khẩu nhỏ hơn 6
else if (strlen($pass_signup) < 6)
{
	echo $show_alert.'Mật khẩu quá ngắn, hãy thử với mật khẩu khác an toàn hơn.';
}
// Ngược lại nếu mật khẩu nhập lại không khớp
else if ($pass_signup != $repass_signup)
{
	echo $show_alert.'Mật khẩu nhập lại không khớp, đảm bảo đã tắt caps lock.';
}
// Ngược lại
else
{
	$pass_signup = md5($pass_signup); // Mã hoá mật khẩu sang MD5
	// Lệnh SQL tạo tài khoản
	$sql_signup = "INSERT INTO users VALUES (
		'',
		'$user_signup',
		'$pass_signup',
		'$date_current'
	)";
	// Thực thi truy vấn
	$db->query($sql_signup);

	// Gửi dữ liệu để lưu session
	$session->send($user_signup);
	// Giải phóng kết nối
	$db->close();
	
	// Hiển thị thông báo và tải lại trang
	echo $show_alert.$success_alert." Đăng ký tài khoản thành công.
		<script>
			location.reload();
		</script>
	";
}

?>
OK, thế là bạn đã chúng ta đã hoàn thành 1/3 bài viết này rồi đấy ! 

2. Đăng nhập

Layout

(Xem ở bước Đăng ký phần Layout).

Viết Ajax gửi dữ liệu

Các bạn mở file js/functions/signin.php lên, copy và paste đoạn code bên dưới :

// Bắt sự kiện click vào nút Đăng nhập
$('#submit_signin').on('click', function() {
	// Gán các giá trị trong form đăng nhập vào các biến
	$user_signin = $('#user_signin').val();
	$pass_signin = $('#pass_signin').val();

	// Nếu một trong các biến này rỗng
	if ($user_signin == '' || $pass_signin == '')
	{
		// Hiển thị thông báo lỗi
		$('#formSignin .alert').removeClass('hidden');
		$('#formSignin .alert').html('Vui lòng điền đầy đủ thông tin bên trên.');
	}
	// Ngược lại
	else
	{
		// Thực thi gửi dữ liệu bằng Ajax
		$.ajax({
			url : 'signin.php', // Đường dẫn file nhận dữ liệu
			type : 'POST', // Phương thức gửi dữ liệu
			// Các dữ liệu
			data : {
				user_signin : $user_signin,
				pass_signin : $pass_signin
			// Thực thi khi gửi dữ liệu thành công
			}, success : function(data) {
				$('#formSignin .alert').html(data);
			}
		});
	}
});
Tiếp theo chúng ta sẽ viết file PHP để nhận dữ liệu và xử lý.

Viết PHP xử lý dữ liệu

Copy nội dung sau vào file signin.php.

<?php

// Include database, session, general info
require_once 'core/init.php';

// Nếu tồn tại $user
if ($user)
{
	header('Location: index.php'); // Di chuyển đến trang chủ
}

// Nhận dữ liệu và gán vào các biến đồng thời xử lý chuỗi
$user_signin = $db->real_escape_string(@$_POST['user_signin']);
$pass_signin = @md5($_POST['pass_signin']);

// Các biến chứa code JS về thông báo
$show_alert = "<script>$('#formSignin .alert').removeClass('hidden');</script>";
$hide_alert = "<script>$('#formSignin .alert').addClass('hidden');</script>";
$success_alert = "<script>$('#formSignin .alert').attr('class', 'alert alert-success');</script>";

// Lệnh SQL kiểm tra sự tồn tại của username
$sql_check_user_exist = "SELECT username FROM users WHERE username = '$user_signin'";

// Nếu tồn tại username
if ($db->num_rows($sql_check_user_exist))
{
	// Lệnh SQL kiểm tra password tương ứng với username trên
	$sql_check_login = "SELECT username FROM users WHERE username = '$user_signin' AND password = '$pass_signin'";

	// Nếu đúng
	if ($db->num_rows($sql_check_login))
	{
		// Gửi dữ liệu để lưu session
		$session->send($user_signin);
		// Giải phóng kết nối
		$db->close();

		// Hiển thị thông báo và tải lại trang
		echo $show_alert.$success_alert." Đăng nhập thành công.
			<script>
				location.reload();
			</script>
		";
	}
	// Ngược lại nếu sai
	else
	{
		echo $show_alert.'Mật khẩu không chính xác, đảm bảo đã tắt caps lock.';
	}
}
// Ngược lại không tồn tại username
else
{
	echo $show_alert.'Tên đăng nhập không thuộc bất cứ tài khoản nào.';
}

?>
Ổn rồi, giờ chúng ta sẽ viết chức năng còn lại đó là chức năng đăng xuất.

3. Đăng xuất

Chức năng này sẽ thoải mái hơn mấy cái kia, các bạn chỉ cần mở file signout.php lên và dán đoạn code này vào :

<?php

// Include database, session, general info
require_once 'core/init.php';
// Xoá session
$session->destroy();
// Trở về trang chủ
header('Location: index.php');

?>

Thế là chúng ta đã xây dựng xong 3 chức năng đăng nhập, đăng ký và đăng xuất rồi đấy, bây giờ các bạn chạy lên và thử nhé !

4. Lời kết

Bài này hơi dài nên mình mong các bạn đọc kỹ và làm theo từng bước, có chỗ nào thắc thì cứ comment bên dưới. Ở bài sau mình sẽ hướng dẫn các bạn cách hiển thị và thêm/sửa/xoá ghi chú. Hẹn gặp lại và chúc các bạn thành công !

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminLeChiHuy

LeChiHuy

Sinh năm 2001, thích lập trình, ham học hỏi. Bắt đầu tham gia vào Freetuts giữa năm 2016, mong được sự ủng hộ của các bạn !

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.