PHP Workshop ตรวจสอบอีเมล์ซ้ำแบบ Ajax

php-workshop-available-email-or-username-ajax

บ่อยครั้งที่มีการสมัครสมาชิกในเว็บไซต์ต่างๆ คุณจะได้รับการแจ้งเสมอๆ ตอนที่คุณกรอกข้อมูล Username หรือ Email ที่ไปซ้ำกับคนอื่นที่มีอยู่แล้ว จึงทำให้เว็บไซต์ต่างๆมีการตรวจสอบข้อมูล Username หรือ Email ก่อนที่จะบันทึกข้อมูลลงไป ทำให้มั่นใจได้ว่าข้อมูล Username หรือ Email ไม่มีทางที่ซ้ำกันได้อย่างแน่นอน แล้วส่วนวิธีการตรวจสอบนั้นบางเว็บไซต์ใช้วิธีการผู้ใช้กรอกข้อมูลรายละเอียดต่างๆ ทั้งหมดใน Form แล้วกดปุ่ม Submit Form ถึงจะได้ตรวจสอบว่า Username หรือ Email ซ้ำกันหรือไม่ และในขณะที่เว็บไซต์บางเว็บไซต์เลือกใช้วิธีการตรวจสอบ Username หรือ Email ตอนผู้ใช้กรอก Username หรือ Email แล้ว Focus ไปที่อื่น โดยส่วนตัวของผมแล้วต้องการใช้วิธีที่ให้ผู้ใช้งานรู้ได้ทันทีหลังจากกรอก Username หรือ Email เสร็จ มากกว่าตอนที่กรอกรายละเอียดใน Form ทั้งหมดแล้วกด Submit Form ซึ่งเป็นวิธีที่เปลืองพลังงาน Server

ขั้นตอนการทำงานของการตรวจสอบ Username หรือ Email (WorkShop)
1. หน้า Form สมัครสมาชิกเมื่อผู้ใช้กรอก Email ลงไปแล้วเปลี่ยนไปกรอก Name จังหวะนี้จะเข้าเงื้อนไข Lost Focus แล้วสั่งให้ทำการตรวจสอบทันที
2. การตรวจสอบโดยใช้ Ajax โดยทางฝั่ง Client ร้องขอข้อมูลจาก Server จากไฟล์ check_email.php
3. เมื่อ Server ถูกร้องขอข้อมูล ไฟล์ check_email.php ผมทำการเขียนโปรแกรม PHP ติดต่อฐานข้อมูลแล้วตรวจสอบว่า Email ที่ผู้ใช้กรอกในหน้า Form เมื่อโปรแกรมทำงานเสร็จก็ส่งค่าตอบกลับไปยัง Client ต่อ
4. Client รับค่าข้อมูลแล้วทำการแจ้งเตือนกลับไปยังผู้ใช้งานหากข้อมูล Email ซ้ำ

สร้าง Workshop – Check email Avaliable กันเลย!

1. สร้างไฟล์ index.php ในการทำฟอร์มสมัครสมาชิก

ให้นำ Code ด้านล่างไปใส่ในไฟล์ index.php

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>itOffside.com - check email</title>
<script type="text/javascript">
$(document).ready(function() {
$('#btnSubmit').click(function() {
var check = check_email();
check.success(function(data) {
if (data != 1){
$('#register').submit();
return false;
}
});
});
$('#email').focusout(function() {
var check = check_email();
check.success(function(data) {
if (data == 1) {
$('.message').html('ชื่ออีเมล์นี้มีคนใช้แล้ว กรุณาเปลี่ยนชื่ออีเมล์ใหม่');
}
});
});
});
function check_email() {
return $.ajax({
type: 'POST',
data: {email: $('#email').val()},
url: 'check_email.php'
});
}
</script>
<style>
.message{
font-size: 12px;
color: red;
}
</style>
</head>
<body style="padding-top: 50px;">
<h3 style="text-align:center;">สมัครสมาชิกกัน!</h3>
<form name="register" id="register" method="POST" action="register.php">
<table border="0" width="700" cellpadding="5" style="margin: 0 auto;">
<tr>
<td style="text-align: right; width: 200px;">E-Mail</td>
<td>
<input type="text" id="email" name="email" value="">
<span class="message"></span>
</td>
</tr>                
<tr>
<td style="text-align: right;">Name</td>
<td><input type="text" id="Name" name="Name" value=""></td>
</tr>
<tr>
<td style="text-align: right;">&nbsp;</td>
<td><button type="button" id="btnSubmit">ตกลง</button></td>
</tr>
</table>
</form>     
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>itOffside.com - check email</title>

$(document).ready(function() {

$('#btnSubmit').click(function() {

var check = check_email();

check.success(function(data) {

if (data != 1){

$('#register').submit();

return false;

}

});

$('#email').focusout(function() {

var check = check_email();

check.success(function(data) {

if (data == 1) {

$('.message').html('ชื่ออีเมล์นี้มีคนใช้แล้ว กรุณาเปลี่ยนชื่ออีเมล์ใหม่');

}

});

function check_email() {

return $.ajax({

type: 'POST',

data: {email: $('#email').val()},

url: 'check_email.php'

});

}

</script>

<style>

.message{

font-size: 12px;

color: red;

}

</style>

</head>

<h3 style="text-align:center;">สมัครสมาชิกกัน!</h3>

<tr>

<td>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

2. สร้างฐานข้อมูลชื่อ itoffsideapp หลังจากนั้นทำการสร้างตารางข้อมูล สามารถสร้างโดยใช้ Script SQL ด้านล่างนี้ได้เลย

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
CREATE TABLE IF NOT EXISTS `member` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
`email` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=4 ;
--
-- Dumping data for table `member`
--
INSERT INTO `member` (`id`, `name`, `email`) VALUES
(1, 'tawatsak', 'tawatsak@itoffside.com'),
(2, 'wishada', 'wishada@itoffside.com'),
(3, 'somchai', 'somchai@itoffside.com');

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

SET time_zone = "+00:00";

CREATE TABLE IF NOT EXISTS `member` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,

`email` varchar(100) COLLATE utf8_unicode_ci NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=4 ;

-- Dumping data for table `member`

INSERT INTO `member` (`id`, `name`, `email`) VALUES

(1, 'tawatsak', 'tawatsak@itoffside.com'),

(2, 'wishada', 'wishada@itoffside.com'),

(3, 'somchai', 'somchai@itoffside.com');

3. include ไฟล์ jquery ในไฟล์ index.php ส่วนของ <head> และไฟล์ jquery สามารถดาวน์โหลดได้ที่เว็บหลัก ซึ่งตอนนี้เวอร์ชั่น 1.11.1 (ดาวน์โหลดไฟล์)

<script src="jquery-1.11.1.min.js" type="text/javascript"></script>

1	<script src="jquery-1.11.1.min.js" type="text/javascript"></script>

4. สร้างไฟล์ check_email.php โดยนำ Code ด้านล่างไปวาง

<?php
/*
* connection database
*/
$Connect = mysql_connect('localhost', 'root', '') or die('Error connecting to MySQL');
mysql_select_db('itoffsideapp', $Connect) or die('Database sysapp does not exist!');
mysql_query('SET NAMES UTF8');
$email = isset($_POST['email']) ? trim($_POST['email']) : "";
$Query = mysql_query("SELECT * FROM member WHERE email='{$email}'");
$Rows = mysql_num_rows($Query);
if($Rows == 1){
echo "1";
}
?>

<?php

* connection database

$Connect = mysql_connect('localhost', 'root', '') or die('Error connecting to MySQL');

mysql_select_db('itoffsideapp', $Connect) or die('Database sysapp does not exist!');

mysql_query('SET NAMES UTF8');

$email = isset($_POST['email']) ? trim($_POST['email']) : "";

$Query = mysql_query("SELECT * FROM member WHERE email='{$email}'");

$Rows = mysql_num_rows($Query);

if($Rows == 1){

echo "1";

}

5. สร้างไฟล์ register.php โดยนำ Code ด้านล่างไปวาง

<h3>Success!</h3>

1	<h3>Success!</h3>

หลังจากที่เราสร้างไฟล์เสร็จหมดแล้ว ลองทดสอบกรอกชื่ออีเมล์ tawatsak@itoffside.com (Email นี้มีอยู่ในฐานข้อมูล) หลังจากกรอกเสร็จก็คลิกไปที่ช่อง Name เพื่อกรอกชื่อต่อ แล้วหน้าเว็บไซต์จะแจ้งว่า มีคนใช้อีเมล์แล้ว ตามตัวอย่างรูปภาพด้านล่าง

เราลองมาดูฐานข้อมูล ซึ่งมีชื่อ tawatsak@itoffside.com จริงๆ

ที่นี้เราลองเปลี่ยน Email ที่ไม่มีอยู่ในฐานข้อมูลก็จะสามารถบันทึกข้อมูลได้ (ในตัวอย่างบทความนี้ไม่ได้มีการบันทึกจริงๆ เป็นเพียงการทำขึ้นมาเสมือนเท่านั้น)