GAJAX บทที่ 25 GForm กับการ Login

เป็นอีกตัวอย่างหนึ่งของการใช้งาน GForm ในอีกลักษณะหนึ่ง ในตัวอย่างนี้ จะเป็นการสร้างฟอร์ม login แบบ Ajax อย่างง่ายๆ ซึ่ง GForm ได้ช่วยให้โค้ด ง่าย และ สั้นลงเยอะ นอกจากนี้ ตัวอย่างนี้ ก็ยังเป็นการตอบคำถามจากบอร์ดว่า เมื่อ login หรือ logout แล้ว จะสั่งให้ javascript ทำงานได้อย่างไร

การใช้งาน GForm ในบทนี้ ประเด็นหลัก คือ การสั่ง submit ฟอร์มด้วย Javascript ซึ่งจะมีการใช้ฟังก์ชั่นที่แตกต่างกันตามลักษณะการใช้งาน
สำหรับการ submit โดยการใช้ปุ่ม submit หรือการกด Enter ภายในฟอร์ม

เป็นการ submit ฟอร์ม ด้วย Javascript เมื่อใช้คำสั่งนี้จะทำให้ฟอร์มทำการ submit ทันที
ทั้ง 2 ฟังก์ชั่น มี parameter เป็นฟังก์ชั่นที่จะใช้รับค่ากลับ เมื่อ submit เรียบร้อยแล้วเหมือนกัน

มาดูโค้ด Login กัน

โค้ดฟอร์ม มีเท่านี้ เนื่องจากฟอร์มจะถูกโหลดตอนโหลดเพจแล้ว

Javascript ที่เกี่ยวข้องกับฟอร์ม เป็นการเรียกใช้งาน GForm เพื่อกำหนดการ submit ส่วน form.submit(checkLogin); เป็นการโหลดการ login ในครั้งแรกเพื่อตรวจสอบการ login โค้ดส่วนนี้ต้องกำหนดไว้ในหน้าหลัก หรือหน้าเดียวกับทีี่ใช้ฟอร์มนะครับ เพราะต้องทำการโหลดในทุกครั้งที่เรียกหน้าเพจ

โค้ดในหน้าหลักที่ต้องแสดงกรอบ login มีเท่านี้แหละครับ และหากต้องการแสดงรูปรอโหลดด้วยก็สามารถเพิ่มคำสั่ง

หรือ อาจใส่คำสั่งนี้หลังจากสร้าง class GForm แล้วก็ได้ครับ

โค้ด Javascript สำหรับรับค่าจากการ submit ฟอร์ม ทั้งตอน login และ logout โดยที่ค่าที่รับกลับมามีสองส่วนโดยใช้ตัวคั่น | ซึ่งส่งกลับมาพร้อมกับข้อมูลโดยข้อมูลในส่วนแรก เป็น ข้อมูลเกี่ยวกับฟอร์มที่ต้องแสดง และข้อมูลส่วนที่ 2 เป็น flag เพื่อบอกว่าเป็นการส่งคำสั่งจากการ login หรือ logout แล้ใช้ Javascript เพื่อแยกข้อมูลออกและ นำไปใช้งานต่อไป

โค้ด chklogin.php ที่ทำการ submit ไป เป้นการเขียนโค้ด เพื่อทำการตรวจสอบค่าทั่วๆไป และเป็นการส่งฟอร์มกลับ ทีแรกผมว่าจะออกแบบส่วนนี้แค่การตรวจสอบการ submit เพื่อให้โค้ดดูง่าย แต่ผมคงเจอคำถามในส่วนอีกๆ เช่น การบันทึกลง cookie session หรือการใช้คำสั่ง Javascrit ผมเลยได้ออกแบบไปเลยทีเดียว

ตัวอย่าง ใช้โค้ด chklogin.php ด้านบน ส่วน Javascript สามารถ View Source ดูได้ครับ