Code đổi mật khẩu html

Xin chào các bạn, chào mừng các bạn đã quy 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. Ở bài trước chúng ta đã hiển thị và viết các chức năng thêm/sửa/xoá ghi chú rồi. Trong bài học hôm nay mình sẽ hướng dẫn các bạn viết chức năng đổi mật khẩu và đây cũng là bài học cuối cùng của series này. Bây giờ chúng ta bắt đầu thôi !

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. Chức năng đổi mật khẩu

Layout

Các bạn mở file templates/change-pass-form.php lên và dán đoạn code này vào:

	

		

			
Đổi mật khẩu
			

				

	    			Mật khẩu cũ
	    			
	  			
	  			

	    			Mật khẩu mới
	    			
	  			
	  			

	    			Nhập lại mật khẩu mới
	    			
	  			
	  			
	  				 Trở về
	  			
	  			
	  				 Thay đổi
	  			
	  			


	  			

			
		
	

Trong đó: #formChangePass là form đổi mật khẩu.

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

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

File js/functions/change-pass.js sẽ đảm nhận chức năng này, các bạn mở file lên và copy nội dung này vào:

// Bắt đầu khi click vào nút Thay đổi
$('#submit_change_pass').on('click', function() {
	// Gán các giá trị trong form tạo note vào các biến
	$old_pass = $('#old_pass').val();
	$new_pass = $('#new_pass').val();
	$re_new_pass = $('#re_new_pass').val();

	// Nếu một trong các biến này rỗng
	if ($old_pass == '' || $old_pass == '' || $re_new_pass == '')
	{
		$('#formChangePass .alert').removeClass('hidden');
		$('#formChangePass .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 : 'change-pass.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 : {
				old_pass : $old_pass,
				new_pass : $new_pass,
				re_new_pass : $re_new_pass
			// Thực thi khi gửi dữ liệu thành công
			}, success : function(data) {
				$('#formChangePass .alert').removeClass('hidden');
				$('#formChangePass .alert').html(data);
			}
		});
	}
});

OK, bây giờ chúng ta sẽ viết PHP để nhận và xử lý dữ liệu.

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

Mở file change-pass.php lên và paste đoạn code bên dưới :

$('#formChangePass .alert').removeClass('hidden');";
$hide_alert = "";
$success_alert = "";

// Nếu mật khẩu cũ nhậ đúng
if ($old_pass != $data_user['password'])
{
	echo $show_alert.'Mật khẩu cũ nhập không chính xác, đảm bảo đã tắt caps lock.';
}
// Ngược lại nếu độ dài mật khẩu mới nhỏ hơn 6 ký tự
else if (strlen($new_pass) < 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 mởi nhập lại không khớp
else if ($new_pass != $re_new_pass)
{
	echo $show_alert.'Nhập lại mật khẩu mới không khớp, đảm bảo đã tắt caps lock.';
}
// Ngược lại
else
{
	$new_pass = md5($new_pass); // Mã hoá mật khẩu sang MD5
	// Lệnh SQL đổi mật khẩu
	$sql_change_pass = "UPDATE users SET password = '$new_pass' WHERE id_user = '$data_user[id_user]'";
	// Thực hiện truy vấn
	$db->query($sql_change_pass);
	// 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.'Đổi mật khẩu thành công.
		
	';
}

?>

Xong rồi, giờ các bạn thử đổi mật khẩu xem được không nhé!

2. Lời kết

Series đến đây là kết thúc, mình hi vọng qua bài này các bạn có thể rèn luyện lại Ajax và đặc biệt là PHP OOP, ngoài ra cũng có thể tạo được một ứng dụng hay nữa. Trong series này nếu có chỗ nào thắc mắc, chưa hiểu rõ hoặc thiếu sót, các bạn có thể comment trên blog, đăng trên group hoặc inbox trực tiếp mình trên Facebook để nhận hỗ trợ sớm nhất nhé! Hẹn gặp lại và chúc bạn các bạn thành công!