ผมต้องยอมรับว่าช่วงนี้ งานที่ออฟฟิศยุ่งมาก พอดีมีท่านๆนึง แวะผ่านมาเยี่ยมชมเว็ป แล้วก็เข้าไปเจอ jquery plugins ตัวนี้เข้า ซึ่งผมเองตามความรู้สึก ก็ชอบปลั๊กอินตัวนี้เหมือนกันนะครับ ผมว่ามันง่ายๆดี เอาเป็นว่า วันนี้เราจะมาดูวิธีการประยุกต์ ปลั๊กอินตัว กับการเช็ค username ว่า มีใคร ใช้งาน ไปบ้างหรือยัง กัน
เริ่มต้น สร้าง ฐานข้อมูลก่อน
CREATE TABLE `user` ( `id` int(4) NOT NULL AUTO_INCREMENT, `username` varchar(256) DEFAULT NULL, `password` varchar(10) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8; -- ---------------------------- -- เพิ่ม ตัวอย่าง user -- ---------------------------- INSERT INTO `user` VALUES ('1', 'admin', '1234'); INSERT INTO `user` VALUES ('2', 'user', '1234');
เสร็จแล้ว สร้าง from
<div class="box"> <fieldset> <form id="loginForm" name="loginForm" method="post" action=""> <p> <label for="username">ชื่อผู้ใช้</label> <input type="text" name="username" id="username" /> </p> <p> <input type="button" name="login" id="login" value="ตรวจสอบชื่อผู้ใช้" onclick="ckUser();" /> </p> </form> </fieldset> </div>
แต่ง from ด้วย css ซักนิด นึง
<style type="text/css"> #loginForm p label { width: 150px; display: block; } fieldset { margin: auto; width: 300px; background: none repeat scroll 0 0 #F1F1F1; border: 1px solid #E5E5E5; padding: 20px 25px 15px; } #loginForm p #login { font-size: 13px; height: 32px; margin: 0 1.5em 1.2em 0; background-color: #4D90FE; background-image: -moz-linear-gradient(center top , #4D90FE, #4787ED); border: 1px solid #3079ED; color: #FFFFFF; text-shadow: 0 1px rgba(0, 0, 0, 0.1); cursor: pointer; } input[name="username"], input[name="password"]{ -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; -moz-box-sizing: border-box; background: none repeat scroll 0 0 #FFFFFF; border-color: #C0C0C0 #D9D9D9 #D9D9D9; border-radius: 1px 1px 1px 1px; border-right: 1px solid #D9D9D9; border-style: solid; border-width: 1px; display: inline-block; height: 29px; margin: 0; padding: 0 8px; } .box { margin-top: 60px; margin-right: 35px; margin-bottom: 35px; margin-left: 35px; } </style>
ผลลัพย์
นำเข้า libary ที่เกี่ยวข้อง
<script type="text/javascript" src="js/jquery_v_1.4.js"></script> <script type="text/javascript" src="js/jquery_notification_v.1.js"></script> <link href="css/jquery_notification.css" type="text/css" rel="stylesheet"/>
เสร็จแล้ว ก็มาเขียน code javascript ต่อ
<script type="text/javascript"> function ckUser(){ var user = $("#username").val(); if(user==""){ showNotification({ message:"กรอก username ผู้ใช้ที่ต้องการตรวจสอบ", type:"error", autoClose:true, duration:3 }); return; }else{ var url = "data.php?username="+user; $.get(url, function(data){ if(data==2){ showNotification({ message: "username นี้ ใช้งานได้", type: "success", autoClose: false, duration: 5 }); }else{ showNotification({ message:"username นี้มีผู้ใช้ไปก่อนแล้ว", type:"error", autoClose:true, duration:3 }); } }); } } </script>
เมื่อมีการคลิกที่ปุ่ม ตรวจสอบชื่อผู้ใช้ ก็จะไปเรียกฟังชั่น ckUser() พอเข้าไปใน function ทีแรก ก็จะเช็คก่อนว่า username ที่ป้อนค่าเข้ามานั้น เป็นค่าว่างรึป่าว ถ้าเป็นค่าว่าง ก็แสดง error ซะ
ถ้าไม่ใช่ ก็จะส่งค่าของ username ไปเช็คที่ไฟล์ data.php เสร็จแล้วก็รอรับค่า ที่ถูกส่งกลับมา ว่าเป็นอะไร ถ้าเท่ากับ 2 ก็แสดงว่า urserไม่ซ้ำ ก็ให้แสดงสถานะว่าใช้งานได้
ถ้าไม่ใช่ก็ error ไปซะ
ต่อมาก็ สร้างไฟล์ data.php แล้วเขียนโค้ด ซะ
<?php require_once('../Connections/demoConnect.php'); $username = trim($_GET["username"]); mysql_select_db($database_demoConnect, $demoConnect); $q = "SELECT * FROM user WHERE username='$username'"; $query = mysql_query($q) or die(mysql_error()); $ck = mysql_num_rows($query); if($ck>0) echo "1"; else echo "2"; ?>