GAJAX บทที่ 25 GForm กับการ Login
การใช้งาน GForm ในบทนี้ ประเด็นหลัก คือ การสั่ง submit ฟอร์มด้วย Javascript ซึ่งจะมีการใช้ฟังก์ชั่นที่แตกต่างกันตามลักษณะการใช้งาน
form.onsubmit()
สำหรับการ submit โดยการใช้ปุ่ม submit หรือการกด Enter ภายในฟอร์ม
form.submit()
เป็นการ submit ฟอร์ม ด้วย Javascript เมื่อใช้คำสั่งนี้จะทำให้ฟอร์มทำการ submit ทันที
ทั้ง 2 ฟังก์ชั่น มี parameter เป็นฟังก์ชั่นที่จะใช้รับค่ากลับ เมื่อ submit เรียบร้อยแล้วเหมือนกัน
มาดูโค้ด Login กัน
<form id="login_form" method="post" action="chklogin.php">
<p>Loading..</p>
</form>
โค้ดฟอร์ม มีเท่านี้ เนื่องจากฟอร์มจะถูกโหลดตอนโหลดเพจแล้ว
<script type="text/javascript">
/* เรียกใช้ GForm */
var form = new GForm('login_form');
/* กำหนด การ submit ให้กับฟอร์ม */
form.onsubmit(checkLogin);
/* สำหรับตรวจสอบการ login ในครั้งแรก */
form.submit(checkLogin);
</script>
Javascript ที่เกี่ยวข้องกับฟอร์ม เป็นการเรียกใช้งาน GForm เพื่อกำหนดการ submit ส่วน form.submit(checkLogin); เป็นการโหลดการ login ในครั้งแรกเพื่อตรวจสอบการ login โค้ดส่วนนี้ต้องกำหนดไว้ในหน้าหลัก หรือหน้าเดียวกับทีี่ใช้ฟอร์มนะครับ เพราะต้องทำการโหลดในทุกครั้งที่เรียกหน้าเพจ
โค้ดในหน้าหลักที่ต้องแสดงกรอบ login มีเท่านี้แหละครับ และหากต้องการแสดงรูปรอโหลดด้วยก็สามารถเพิ่มคำสั่ง
var form = new GForm('login_frm', false, 'wait', true);
หรือ อาจใส่คำสั่งนี้หลังจากสร้าง class GForm แล้วก็ได้ครับ
form.inintLoading('wait',true);
โค้ด Javascript สำหรับรับค่าจากการ submit ฟอร์ม ทั้งตอน login และ logout โดยที่ค่าที่รับกลับมามีสองส่วนโดยใช้ตัวคั่น | ซึ่งส่งกลับมาพร้อมกับข้อมูลโดยข้อมูลในส่วนแรก เป็น ข้อมูลเกี่ยวกับฟอร์มที่ต้องแสดง และข้อมูลส่วนที่ 2 เป็น flag เพื่อบอกว่าเป็นการส่งคำสั่งจากการ login หรือ logout แล้ใช้ Javascript เพื่อแยกข้อมูลออกและ นำไปใช้งานต่อไป
<script>
/* ฟังก์ชั่นรับค่ากลับของฟอร์ม เมื่อ submit */
var checkLogin = function(xhr){
var datas = xhr.responseText.split('|'); // แยกข้อความออกจากตัวคั่น
$E('login_form').innerHTML = datas[0]; // ฟอร์มที่ส่งมา
if(datas[1] && datas[1] == 'login'){
alert('เข้าระบบเรียบร้อย');
}else if (datas[1] && datas[1] == 'logout'){
alert('ออกจากระบบเรียบร้อย');
};
};
</script>
โค้ด chklogin.php ที่ทำการ submit ไป เป้นการเขียนโค้ด เพื่อทำการตรวจสอบค่าทั่วๆไป และเป็นการส่งฟอร์มกลับ ทีแรกผมว่าจะออกแบบส่วนนี้แค่การตรวจสอบการ submit เพื่อให้โค้ดดูง่าย แต่ผมคงเจอคำถามในส่วนอีกๆ เช่น การบันทึกลง cookie session หรือการใช้คำสั่ง Javascrit ผมเลยได้ออกแบบไปเลยทีเดียว
<?php
session_start();
ob_start();
header("content-type: text/html; charset=utf-8");
if (isset($_POST[user])) {
//ค่าที่รับมา
$user = $_POST[user];
$passwd = $_POST[passwd];
} elseif (isset($_SESSION[login_user])) {
// refresh หรือ เรียกหน้าอื่น
$user = $_SESSION[login_user];
$passwd = $_SESSION[login_password];
} else {
// ครั้งแรก ตรวจสอบจาก cookie
$user = $_COOKIE[login_user];
$passwd = $_COOKIE[login_password];
}
if ($_POST["action"] == 'logout') { //ออกจากระบบชั่วคราว
unset($user);
$message = 'ออกจากระบบเรียบร้อย<br />กรุณากลับมาเยือนเราอีกครั้ง';
$action = 'logout'; // ตัวแปรบอกว่าทำอะไร
// เคลียร์ cookie และ session
setCookie('login_user', '', time());
setCookie('login_password', '', time());
unset($_SESSION[login_user]);
unset($_SESSION[login_password]);
} elseif ($user == "admin" && $passwd == "admin") { // โค้ดสำหรับการตรวจสอบกับฐานข้อมูล
// login สำเร็จ บันทีกลง cookie หรือ session เก็บไว้
setCookie('login_user', $user, time() + 3600 * 24 * 365);
setCookie('login_password', $passwd, time() + 3600 * 24 * 365);
$_SESSION[login_user] = $user;
$_SESSION[login_password] = $passwd;
} elseif (!isset($_POST["user"])) { // ครั้งแรก ไม่ได้มาจากการ submit
$message = 'ยินดีต้อนรับ สู่เว็บไซต์<br /><b>g-O-r-a-g-o-d.com</b>';
unset($user);
} else {
// ชื่อหรือ รหัสผ่านไม่ถูกต้อง
$message = 'ชื่อ หรือ รหัสผ่าน ไม่ถูกต้อง';
unset($user);
}
if (isset($user)) {
echo '<p>ยินดีต้อนรับ คุณ <b>'.$user.'</b> เข้าระบบ</p>';
echo '<p><input type="submit" value="ออกจากระบบ" title="ออกจากระบบ ชั่วคราว"></p>';
echo '<input type="hidden" value="logout" name="action">';
if (isset($_POST[user])) {
// login จากการ submit
$action = 'login';
}
} else {
if (isset($message)) echo '<p>'.$message.'</p>';
else echo '<p><span>ผู้มาเยือน</span> กรุณาเข้าระบบ</p>';
echo '<p><label for="user">user : </label><input size="15" type="text" name="user" id="user" maxlength="15"></p>';
echo '<p><label for="passwd">passwd : </label><input size="15" type="password" name="passwd" id="passwd" maxlength="15"></p>';
echo '<p><label for="submit"> </label><input type="submit" id="submit" value="Login" /></p>';
}
echo "|$action"; // ส่ง action กลับ เพื่อใช้ตรวจสอบ โดยคั่นค่าที่ส่งกลีบด้วย |
?>
ตัวอย่าง ใช้โค้ด chklogin.php ด้านบน ส่วน Javascript สามารถ View Source ดูได้ครับ