GORAGOD.com

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

การใช้งาน 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">&nbsp;</label><input type="submit" id="submit" value="Login" /></p>';
    }
    echo "|$action"; // ส่ง action กลับ เพื่อใช้ตรวจสอบ โดยคั่นค่าที่ส่งกลีบด้วย |
?>

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