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

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

Share Button

บ่อยครั้งที่มีการสมัครสมาชิกในเว็บไซต์ต่างๆ คุณจะได้รับการแจ้งเสมอๆ ตอนที่คุณกรอกข้อมูล 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 ในการทำฟอร์มสมัครสมาชิก
php-workshop-available-email-or-username-ajax
ให้นำ Code ด้านล่างไปใส่ในไฟล์ index.php

 

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

 

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

 

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

 

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

 

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

เราลองมาดูฐานข้อมูล ซึ่งมีชื่อ tawatsak@itoffside.com จริงๆ
php-workshop-available-email-or-username-ajax

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

สำหรับบทความนี้เป็นเพียง Workshop เล็กๆ เท่านั้น หากมีข้อสงสัยหรือปัญหา สามารถสอบถามได้ที่ comment ด้านล่างได้เลยครับ

benext About benext
โปรแกรมเมอร์ ติดต่อ : itoffside@hotmail.com

Share Button

Published by

benext

โปรแกรมเมอร์ ติดต่อ : itoffside@hotmail.com

4 thoughts on “PHP Workshop ตรวจสอบอีเมล์ซ้ำแบบ Ajax”

    1. ใช้ไม่ได้ตรงไหน อธิบาย รายละเอียดหน่อยครับ

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.