วันจันทร์ที่ 27 กันยายน พ.ศ. 2553

ระบบล็อกอิน ตอนที่ 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นะคับ แล้วพบกันในบทความตอนต่อไปเร็วๆนี้คับ

3 ความคิดเห็น :

  1. ไม่ระบุชื่อ10 ธันวาคม 2555 11:42

    ขอไฟล์ database ด้วยครับ หาไม่เจอ มีแต่โค้ด

    ไม่รู้จะสร้างยังไง

    ตอบลบ
    คำตอบ
    1. ตามนี้เลยครับ http://www.4shared.com/file/ASJptEkC/exshops.html

      ลบ