Chào mừng 2Cwebvn có sự thay đổi nho nhỏ về layout, sự thay đổi này giúp cho giao diện của 2Cwebvn đầy đủ và thân thiện hơn với mọi người. Bài viết hôm nay cũng không ngoại lệ nằm ngoài sự kiện ấy, bài hôm nay mình xin gởi đến các bạn cách kiểm tra tên người dùng có tồn tại hay không bằng PHP với kỹ thuật AJAX. Bài này giúp cho các bạn kiểm tra username của người dùng có tồn tại hay không mà không cần load lại trang, phần này thường thấy trong các form đăng ký thành viên mới.
Bài này chắc các bạn nghĩ sẽ khó lắm nhỉ, nhưng không, nó rất là dễ nếu các bạn biết biết một chút php và một chút ajax. Ajax thì mình cũng đã có nhiều bài về phần này rồi, không đến nổi khó hay kinh khủng như các bạn nghĩ.
Mỗi bài viết mình đều có chú thích rất kỹ cho các bạn, chỉ hy vọng là có thể giúp cho các bạn hiểu được nó thêm và có thể áp dụng được vào các dự án của mình. Nói nảy giờ dài dòng quá, mình cùng bắt tay vào thực hiện nào.
Trước khi bắt đầu vào biết viết thì mình cùng xem qua demo để biết mình sẽ làm gì nhé.
demo download
1. PHẦN HTML
Phần này các bạn chỉ cần chú ý đến input text với id và name là "user_name" và 1 form bao bọc bên ngoài, các phần còn lại chỉ là râu ria trang trí cho đẹp thôi. Bên cạnh đó là 1 thẻ div với class="thongbao" để thông báo kết quả kiểm tra username đó có tồn tại hay không.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <form method="post" name="fcheck" id="fcheck" action=""><img src="logo_2cwebvn.png" width="213" height="115" style="float:left;border:1px solid #EAEAEA;padding:10px;"><div style="margin-left:240px;"><label for="user_name">Tên người dùng:</label><input type="text" name="user_name" id="user_name" autocomplete="off" value=""><div class="thongbao"></div><input type="button" id="btn" name="btn" value="Send Now"></div><div><div class="lstcheck" style="color:#DB2E66; margin-top:30px; text-align:center;">Username tồn tại: 2cweb, 2cwebvn, chickchick</div></div></form> |
2. PHẦN CSS
Để chi tiết cho phần CSS này mình chia ra các phần nhỏ để cho các bạn dễ đọc. Phần đầu tiên là mình phải reset style của trình duyệt và định dạng một chút cho trang.
1
2
3
4
5
6
7
8
| /*========= RESET STYLE TRÌNH DUYỆT & ĐỊNH DẠNG TRANG ========*/@charset "utf-8";*{margin:0px; padding:0px;}body { font-family: Arial, Helvetica, sans-serif; background: url(bg_2cwebvn.png) repeat;color:#DB2E66; } |
Tiếp theo sẽ là định dạng cho cho các phần tử trong form:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| /*========= ĐỊNH DẠNG CÁC PHẦN TỬ TRONG FORM ========*/#fcheck{ width:510px; margin:auto; border:1px solid #ccc; background:#FFFCF7; padding:10px;}.error { color: red; font-size: 14px; }.success { color: #006600; font-size: 14px; }label,#user_name { display:block; padding:5px 0px;}#user_name{width:200px;} h2{width:430px; margin:50px 0px 20px;}.thongbao{margin-top:5px;}#btn{width:90px; padding:6px; color:#006600; font-weight:bold; margin:10px 0px; border:1px solid #999999;} |
3. PHẦN AJAX
Trước tiên thì mình cần include thư viện của jQuery vào nhé.
1
|
Tiếp theo là code AJAX cho ứng dụng, ở đây mình dùng sự kiện blur() cho input user_name, sự kiện này xảy ra khi con chuột của mình không còn focus trong input user_name nữa. Và không cần nói gì nhiều mình đã có chú thích hết cho các bạn rồi đó, rất dễ hiểu phải không nào. :)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <script type="text/javascript">$(document).ready(function() {// Sự kiện khi focus vào user_name$("#user_name").blur(function() { if($(this).val() != ''){// Gán text cho class thongbao trước khi AJAX response$(".thongbao").html('checking username...'); }// Dữ liệu sẽ gởi đivar form_data = {action: 'check_user', user_name: $(this).val()};$.ajax({type: "POST", // Phương thức gởi điurl: "check.php", // File xử lý dữ liệu được gởidata: form_data, // Dữ liệu gởi đến cho url success: function(result) { // Hàm chạy khi dữ liệu gởi thành công$(".thongbao").html(result); }});});});</script> |
Phần code ajax trên sẽ link đến file check.php để xử lý kiểm tra username. Nội dung file check.php như sau:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| $action = $_POST['action']; // Lấy giá trị actionif(!empty($_POST['user_name']) && $action == 'check_user'){// Lấy giá trị user_name$user = $_POST['user_name']; // Chuyển giá trị user_name thành chữ thường & gọi hàm kiểm trausername_exist(strtolower($user)); }function username_exist($user){// Mảng giá trị user_name đã tồn tại$user_arr = array("2cweb", "2cwebvn", "chickchick");// Ki���m tra user_name mình nhập vào có nằm trong mảng đó hay không?// User_name thuộc 1 giá trị trong mảng => user_name tồn tạiif(in_array($user, $user_arr)){echo "<span class="error">Username: <strong>{$user}</strong> đã tồn tại, sorry.!!</span>";}else // Ngược lại user_name Ko tồn tại{echo "<span class="success">Username: <strong>{$user}</strong> Ko tồn tại, oh yeh..</span>"; }} |
Thế là xong, các bạn chạy thử đi nào, và đây là kết quả sau khi làm xong.
Kết luận
Bạn có thích bài hướng dẫn này không? Nếu có hãy giúp mình like bài viết này nhé hoặc bạn có thể chia sẽ bài này đến những người mà bạn nghĩ họ quan tâm, 2Cwebvn xin cảm ơn!
Mọi ý kiến thắc mắc hay đóng góp xin gởi về cho chúng tôi bằng form bình luận bên dưới, xin chúc các bạn thành công!
Comments[ 0 ]
Đăng nhận xét