ประยุกต์ การเซ็ค username ซ้ำด้วย jquery แบบสวยๆ งามๆ

ผมต้องยอมรับว่าช่วงนี้ งานที่ออฟฟิศยุ่งมาก  พอดีมีท่านๆนึง แวะผ่านมาเยี่ยมชมเว็ป แล้วก็เข้าไปเจอ 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";	
?>

ดูตัวอย่าง || download