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

By -

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

mitsumasa