Trước đây, mình có hướng dẫn các bạn cách tạo form đăng nhập bằng PHP thông qua phương thức submit form. Đây là phương pháp tạo form cơ bản và làm load lại trang. Trong bài viết ngày hôm nay, mình sẽ hướng dẫn các bạn tạo form đăng nhập bằng ajax với thư viện jquery mới nhất.

>> Tham khảo thêm :

Tạo form đăng ký bằng PHP

Tạo form đăng nhập bằng PHP

1. Ajax là gì ?

Ajax, hay còn gọi là bất đồng bộ javascript, đây là một kỹ thuật rất hay, giúp cho ứng dụng web của bạn chạy nhanh hơn, trải nghiệm người dùng tốt hơn, nhiều tương tác hơn, xử lý được nhiều thành phần trên website mà không làm reload lại trang.

Đối với một ứng dụng web truyền thống không sử dụng kỹ thuật ajax thì khi chúng ta ấn submit form, yêu cầu sẽ được gửi đi đồng bộ, chuyển hướng website của bạn tới một trang mới hoặc làm reload lại page, lúc này dữ liêu mới được trả về. Còn đối với Ajax, khi bạn tạo ra một yêu cầu, yêu cầu sẽ được gửi đi về server xử lý một cách bất đồng bộ, dữ liệu sau đó sẽ được trả về mà không làm cho trang hiện hành reload lại, khiến bạn có cảm giác ứng dụng web chạy rất mượt mà.

2. Tạo form đăng nhập bằng ajax

Nói lý thuyết thì cũng nhiều rồi, giờ chúng ta sẽ bắt tay vào thực hành tạo trang đăng nhập bằng ajax để hiểu rõ hơn nhé.

a. Tạo file

Tại thư mục gốc của website, các bạn tạo 2 file và đặt tên lần lượt là dang_nhap_ajax.php và check_dang_nhap.php

File dang_nhap_ajax.php sẽ hiển thị form đăng nhập, và thực hiện việc gửi thông tin tên đăng nhập và mật khẩu từ form về cho file server check_dang_nhap.php xử lý.

File check_dang_nhap.php sẽ chịu trách nhiệm lấy thông tin được gửi vào từ fie dang_nhap_ajax.php và kiểm tra thông tin đăng nhập hợp lệ không

b. Tạo form đăng nhập bằng ajax

Các bạn mở file dang_nhap_ajax.php và copy toàn bộ nội dung bên dưới đây vào :

Chạy thử trang này chúng ta sẽ được giao diện như sau :

form đăng nhập bằng ajax

Giải thích :

Ở đoạn code trên, mình đã thiết kế một form đăng nhập bao gồm 2 ô để người dùng điền thông tin vào là tên đăng nhập và mật khẩu.

Mỗi giá trị input trong form mình đều gắn cho nó thuộc tính id. Chẳng hạn Tên đăng nhập sẽ có id là “username”, mật khẩu sẽ có id là “password”.

Ở trong thẻ <head>, mình có gắn vào thư viện jquery mới nhất để có thể sử dụng được ajax.

Ở đoạn code sau, các bạn nhìn lại một lần nữa rồi mình giải thích luôn

Đây là đoạn code jquery dùng để lấy thông tin đăng nhập là username và password từ form.

Trước tiên mình sẽ thực hiện việc kiểm tra thông tin người dùng nhập vào 2 ô này, nếu một trong hai ô mà để trống thì thực hiện việc thông báo lỗi ra bên ngoài và yêu cầu người dùng điền thông tin đầy đủ vào, và dừng thực thi bằng cách trả về false.

Sau đó nếu thông tin người dùng đã điền đầy đủ, chúng ta sẽ thực thi ajax và gửi thông tin người dùng về file xử lý phía server là check_dang_nhap.php

Ở đoạn code trên, để có thể sử dụng ajax các bạn gõ theo cú pháp $.ajax({}). Bên trong sẽ truyền vào các tham số, bạn nhìn tên của tham số cũng rất dễ hiểu đúng không, nhưng mình cũng giải thích luôn từng tham số như sau

  1. url : Chính là đường dẫn tới file server check_dang_nhap.php, nói với ajax rằng hãy gửi dữ liệu đến trang này và xử lý
  2. method : phương thức dữ liệu được gửi đi là GET hay POST, trong trường hợp này là POST
  3. data : chính là dữ liệu gửi đi, trong trường hợp này là thông tin username và password được lấy từ form
  4. success : chính là funtion nhận dữ liệu trả về từ file server check_dang_nhap.php Nếu dữ liệu trả về là 1 thì tức là đăng nhập thành công, ngược lại bằng 0 thì không thành công

3. Code xử lý cho file check_dang_nhap.php

Các bạn mở file check_dang_nhap.php và copy toàn bộ đoạn code sau và save lại:

Đoạn code này rất đơn giản và dễ hiểu. Đầu tiên các bạn nhìn vào 2 biến $db_username và $db_password. Đây là 2 biến giả lập của mình, tượng trưng cho thông tin username và password có trong cơ sở dữ liệu, sau này các bạn có kết nối thật với database thì tương tự cách xử lý là như vậy.

Tiếp đến mình sẽ tiến hành lấy username và password được gửi từ ajax, thực hiện so sánh và kiểm với thông tin giả lập, nếu trùng khớp, tức thành công mình sẽ trả ra giá trị là 1, ngược lại thất bại mình sẽ trả ra giá trị là 0.

4. Kết quả

Giờ thì các bạn chạy file dang_nhap_ajax.php và thử một trong các trường hợp sau để cho xem kết quả nhé :

  1. Để trống một hoặc hai ô nhập thông tin username và password rồi ấn nút Đăng nhập
  2. Điền đầy đủ thông tin như sau Tên đăng nhập là “aaa”, Mât khẩu là “bbb”. Rồi ấn nút Đăng nhập
  3. Điền đầy đủ thông tin Tên đăng nhập là “kungfuphp”, Mật khẩu là “123456”. Rồi ấn nút Đăng nhập

Khi các bạn đã làm đủ 3 cách trên, xem kết quả thông báo trả ra, ắt hẳn các bạn đã hiểu cách ajax chạy như thế nào rồi nhỉ. Kết thúc bài viết tạo form đăng nhập bằng ajax, chúc các bạn có thêm kiến thức bổ ích cho mình.

form đăng nhập bằng ajax thành công

Để theo dõi các bài viết mới nhất từ Kungfu PHP, hãy Đăng ký nhận bài viết ở thanh sidebar bên phải của trang, hoặc điền thông tin vào form dưới đây và ấn nút Đăng ký

[jetpack_subscription_form title=”Đăng ký nhận bài viết” subscribe_text=”Đăng ký nhận bài viết mới” subscribe_button=”Đăng ký” show_subscribers_total=”0″]

Nếu có bất kỳ thắc mắc, để lại lời nhắn bên dưới, mình sẽ trả lời ngay cho các bạn.

Thân !

Nguồn : kungufphp.com

 


Nếu bạn thấy bài viết có ích và muốn cảm ơn mình thì bạn có thể donate mời mình 1 lý cà phê nhé
Địa chỉ ví BTC của mình : 1NWVkBYnd5iSZ5BsAg4fbr4bYWC7hn9Vcz
Địa chỉ ví ETH của mình : 0xa4881fe9ed28b270a7a7F6D339fe0B73c35DBAd1
Cám ơn và chúc bạn nhiều niềm vui trong cuộc sống !