ระบบล็อกอิน ตอนที่ 1 เขียนสคริปต์ JQuery ตรวจสอบUsernameและPassword

       และแล้วก้อถึงเวลาที่ผมจะต้องอัปเดตบทความในบล็อกของผมแล้วคับ บทความนี้ผมจะสอนท่านทำระบบล็อกอินอย่างง่ายๆ ผมได้แบ่งบทความออกเป็นสองตอนคับ ตอนนี้ผมจะสอนการเขียนสคริปต์JQuery เพื่อตรวจสอบข้อมูลเบื้องต้น คือแค่ตรวจเช็คความว่างเปล่าของTextBoxเท่านั้น ส่วนการตรวจสอบUsernameกับPasswordที่สมาชิกกรอกถูกหรือไม่นั้น ผมจะขอสอนในบทความตอนต่อไป ซึ่งเป็นในส่วนของการเขียนสคริปต์PHP เพื่อเปรียบเทียบข้อมูลที่สมาชิกกรอกว่าตรงกับข้อมูลในฐานข้อมูลหรือไม่ มาลุยกันเลยครับ

     เมื่อสั่งให้รันโปรแกรมขึ้นมา จะปรากฎหน้าตาของโปรแกรมเป็นดังนี้

หากสมาชิกไม่กรอกUsernameกับPassword แล้วกดปุ่ม Login จะปรากฎผลลัพธ์ดังรูป

      รูปข้างล่าง แสดงการกรอกข้อมูลที่ถูกต้องและกรอกไม่ถูกต้อง ถ้ากรอกถูกต้อง เส้นขอบของTextBoxจะเป็นสีเขียว หากไม่ถูกต้องจะเป็นสีแดงคับ และจะแสดงไดอะล็อกข้อความเฉพาะข้อมูลที่

กรอกไม่ถูกต้อง ดังรูปข้างล่างเลย

ให้ท่านสร้างไฟล์ใหม่ขึ้นมาตั้งชื่อว่า login.php คับ แล้วให้ออกแบบให้มีหน้าตาดังรูปนี้คับ

แล้วไปที่ show view code แล้วแก้ไขโค๊ดตามนี้เลยคับ

เมื่อทำตามในตัวอย่างข้างบนแล้ว ให้ import ไฟล์ css(บรรทัดที่ 5),JQuery(บรรทัดที่7),JQuery UI(บรรทัดที่ 8) และสร้างฟังก์ชั่น  DialogAlert (บรรทัดที่ 10-23)

 ดังรูปเลยคับ

เมื่อทำเสร็จตามขั้นตอนข้างบนแล้ว ต่อไปก้อจะถึงไฮไลของบทความนี้แล้วคับ นั้นก้อคือสคริปต์ตรวจสอบความถูกต้องจากการกรอกUsernameและPasswordของสมาชิกคับ ให้เขียนฟังก์ชั่น chklogin ดังรุปนี้เลยคับ

และก็จะได้ผลลัพธ์ตามที่ผมได้กล่าวไว้ข้างต้นเลยคับ หวังว่าบทความนี้คงมีประโยชน์แก่ผู้อ่านและผู้สนใจไม่มากก็น้อยคับ

ขอให้สนุกกับการเขียนCodeนะคับ แล้วพบกันในบทความตอนต่อไปเร็วๆนี้คับ

บทความที่เกี่ยวข้อง

>>ระบบสมัครสมาชิก ตอนที่4

>> ระบบสมัครสมาชิก ตอนที่3

>> ระบบสมัครสมาชิก ตอนที่2

>>ระบบสมัครสมาชิก ตอนที่1

>>สร้างฐานข้อมูล
>>สร้างไฟล์config.php

>>PHP คืออะไร

>>MySQL คืออะไร

>>ADODB คืออะไร

>>Dreamweaver คืออะไร

>>Apperv คืออะไร