ỨNG DỤNG NOTE
ỨNG DỤNG CHAT
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

PHP Note Online - Đăng ký, đăng nhập, đăng xuất

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 !

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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 đó :

Bài viết này được đăng tại [free tuts .net]

 

  • #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 !

Danh sách file tải về

Tên file tải về Pass giải nén
Note online PHP OOP phần 4 freetuts.net hoặc gameportable.net

Cùng chuyên mục:

Hàm key_exists() trong PHP

Hàm key_exists() trong PHP

Cách sử dụng key_exists() trong PHP

Hàm mysqli_fetch_row() trong PHP

Hàm mysqli_fetch_row() trong PHP

Cách sử dụng mysqli_fetch_row() trong PHP

Hàm end() trong PHP

Hàm end() trong PHP

Cách sử dụng end() trong PHP

Hàm mysqli_field_count() trong PHP

Hàm mysqli_field_count() trong PHP

Cách sử dụng mysqli_field_count() trong PHP

Hàm count() trong PHP

Hàm count() trong PHP

Cách sử dụng count() trong PHP

Hàm mysqli_field_seek() trong PHP

Hàm mysqli_field_seek() trong PHP

Cách sử dụng mysqli_field_seek() trong PHP

Hàm compact() trong PHP

Hàm compact() trong PHP

Cách sử dụng compact() trong PHP

Hàm mysqli_field_tell() trong PHP

Hàm mysqli_field_tell() trong PHP

Cách sử dụng mysqli_field_tell() trong PHP

Hàm array_values() trong PHP

Hàm array_values() trong PHP

Cách sử dụng array_values() trong PHP

Hàm mysqli_free_result() trong PHP

Hàm mysqli_free_result() trong PHP

Cách sử dụng mysqli_free_result() trong PHP

Hàm array_unshift() trong PHP

Hàm array_unshift() trong PHP

Cách sử dụng array_unshift() trong PHP

Hàm mysqli_get_charset() trong PHP

Hàm mysqli_get_charset() trong PHP

Cách sử dụng mysqli_get_charset() trong PHP

Hàm array_shift() trong PHP

Hàm array_shift() trong PHP

Cách sử dụng array_shift() trong PHP

Hàm mysqli_get_client_stats() trong PHP

Hàm mysqli_get_client_stats() trong PHP

Cách sử dụng mysqli_get_client_stats() trong PHP

Hàm array_unique() trong PHP

Hàm array_unique() trong PHP

Cách sử dụng array_unique() trong PHP

Hàm mysqli_get_client_version() trong PHP

Hàm mysqli_get_client_version() trong PHP

Cách sử dụng mysqli_get_client_version() trong PHP

Hàm array_uintesect() trong PHP

Hàm array_uintesect() trong PHP

Cách sử dụng array_uintesect() trong PHP

Hàm mysqli_get_connection_stats() trong PHP

Hàm mysqli_get_connection_stats() trong PHP

Cách sử dụng mysqli_get_connection_stats() trong PHP

Hàm array_sum() trong PHP

Hàm array_sum() trong PHP

Cách sử dụng array_sum() trong PHP

Hàm mysqli_get_host_info() trong PHP

Hàm mysqli_get_host_info() trong PHP

Cách sử dụng mysqli_get_host_info() trong PHP

Top