การสร้าง Webboard ด้วย PHP MySQL ตอนที่ 3 ทำระบบสมัครสมาชิก(Register)/เข้าสู่ระบบ(Login)/ออกจากระบบ(Logout)

     คราวนี้จะเข้าสู่ส่วนของการ Codding จริงๆแล้วครับ หลังจากที่สอนไปแล้ว 2 บทความเรื่องของการออกแบบหน้าจอของWebboard ออกแบบฐานข้อมูล และแยกส่วนของเว็บไซต์/คำสั่งเชื่อมต่อกับฐานข้อมูล เพื่อง่ายต่อการเรียกใช้หรือแก้ไขข้อมูลในภายหลัง

     บทความนี้จะสอนในส่วนของระบบสมาชิก ซึ่งจะมีการสมัครสมาชิก (Register) การเข้าสู่ระบบ (Login) และการออกจากระบบ (Logout) บทความนี้จะต่อเนื่องจากบทความตอนที่ 2 นะครับ เพราะจะมีคำสั่งหรือโค๊ดบางส่วนที่อาจจะทำให้งง ไม่รู้ที่มาของมัน ให้กลับไปศึกษาตอนที่ 2 ให้หายงงก่อนครับ

    อันดับแรก ก่อนที่เราจะสร้างฟอร์มสำหรับกรอกข้อมูล การลงทะเบียนสมาชิก และฟอร์มเข้าสู่ระบบ เราจะต้องมีปลั๊กอินสำหรับเป็นผู้ช่วยในการตรวจสอบความถูกต้องของข้อมูล ซึ่ง Bootstrap เองก็มีปลั๊กอินตัวหนึ่งให้สามารถเรียกใช้งาน และมีคุณสมบัติที่เจ๋งฝุดๆเลยครับ ให้ดาวน์โหลดจากเว็บนี้ครับ http://bootstrapvalidator.com/

     ให้ Extact ไฟล์แล้วเปลี่ยนชื่อโฟลเดอร์ว่า btvalidate แล้วเอาไปไว้ในตำแหน่งเดียวกับไฟล์ index.php ดังรูป ให้สังเกตุโฟลเดอร์ที่ 3 ชื่อ btvalidate นะครับ ให้ทำตามนี้เลย (ขออนุญาติรีไซเคิลรูปจากบทความก่อนมาลงประกอบ เพื่อช่วยGoogleประหยัดพื้นที่จัดเก็บรูปครับ อิอิ)

เท่านี้ก็ถือว่าเรามีเครื่องมือสำหรับก้าวไปสู่ Step ต่อไปครบแล้วครับ

     เราจะเริ่มที่ไฟล์ register.php ก่อนครับ ให้สร้างไฟล์ register.php ไว้ข้างนอกสุด ในตำแหน่งเดียวกับไฟล์ index.php  ดูตามรูปข้างบนก็ได้คับ  จากนั้นเราจะพิมพ์คำสั่งดังนี้

<?php
session_start();
if (!empty($_POST['btRegister'])) {
    require('bin/connectdb.php'); //ไฟล์เก็บคำสั่งเชื่อมต่อกับฐานข้อมูล connectdb.php ศึกษาจาก http://php-for-ecommerce.blogspot.com/2014/07/webboard-php-mysql-2.html#connectdb
    $msgError='';
    $username = '';
    $pass = '';
    $email = '';
    $name = '';
    $mem_image = '';
    $fileType = '';
    $filename = '';
  //ตรวจสอบ Username ว่ามีค่าว่างหรือไม่
    if (!empty($_POST['mem_user'])) {
        $username = $_POST['mem_user'];
  //Patternตรวจสอบการกรอกข้อมูลรองรับ a-z,A-Z,ตัวเลข ตั้งแต่ 4-20 ตัวอักษร
  //ศึกษาเพิ่มเติมจาก http://php-for-ecommerce.blogspot.com/2012/09/validate-form-regular-expression.html
        $chkInputUser = '/^[a-zA-Z0-9]{4,20}$/';        
        if (!preg_match($chkInputUser, $username, $regs)) {  //ตรวจสอบการกรอกข้อมูลของ Username ผ่าน
            $msgError .= 'Username ต้องมีขนาดตัวอักษร  4-20 ตัวอักษรภาษาอังกฤษและตัวเลขเท่านั้น<br />';
        }
        //ตรวจสอบ Username ว่าซ้ำหรือไม่
        $rs_username = mysql_query("SELECT COUNT(*) As cUsername FROM tbl_member WHERE mem_user='$username' ");
        $show_rs_username = mysql_fetch_assoc($rs_username);
        if ($show_rs_username['cUsername'] > 0) {
            $msgError .= 'Username นี้มีผู้ใช้งานแล้ว<br />';
        }
    } else {//ถ้ามีค่าว่างให้แจ้งเออเร่อดังนี้
        $msgError .= 'กรุณากรอก Username ด้วย<br />';
    }
 //ตรวจสอบรหัสผ่านว่ามีค่าว่างหรือไม่
    if (!empty($_POST['mem_pass']) && !empty($_POST['repass'])) {
        $pass = $_POST['mem_pass'];
        $repass = $_POST['repass'];
        if ($pass != $repass) {//ตรวจสอบรหัสผ่านว่าตรงกันทั้งสองช่องหรือไม่
            $msgError .= 'รหัสผ่านทั้งสองช่องไม่ตรงกัน<br />';
        }
    } else {//ถ้ามีค่าว่างให้แจ้งเออเร่อดังนี้
       $msgError .= 'กรุณากรอกรหัสผ่านทั้งสองช่องด้วย<br />';
    }
       //ตรวจสอบอีเมลว่ามีค่าว่างหรือไม่
    if (!empty($_POST['mem_email'])) {
        $email = $_POST['mem_email'];
        $chkInputEmail = '/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9._-])+\.([a-zA-Z])+$/'; //Patternตรวจสอบอีเมล
        //ศึกษาเพิ่มเติมจาก http://php-for-ecommerce.blogspot.com/2012/09/validate-form-regular-expression.html
        if (!preg_match($chkInputEmail, $email, $regs)) {  //ตรวจสอบการกรอกข้อมูลEmailผ่าน
          $msgError .= 'รูปแบบอีเมลไม่ถูกต้อง<br />';
        }
        //ตรวจสอบอีเมลว่าซ้ำหรือไม่
        $rs_email = mysql_query("SELECT COUNT(*) As cEmail FROM tbl_member WHERE mem_email='$email' ");
        $show_rs_email = mysql_fetch_assoc($rs_email);
        if ($show_rs_email['cEmail'] > 0) {
           $msgError .= 'อีเมลนี้มีผู้ใช้งานแล้ว<br />';
        }
    } else {//ถ้ามีค่าว่างให้แจ้งเออเร่อดังนี้
       $msgError .= 'กรุณากรอกอีเมลด้วย<br />';
    }
     //ตรวจสอบ ชื่อเรียกในเว็บ ว่ามีค่าว่างหรือไม่
    if (!empty($_POST['mem_name'])) {
        $name = $_POST['mem_name'];
        //ตรวจสอบชื่อเรียกในเว็บว่าซ้ำหรือไม่
        $rs_name = mysql_query("SELECT COUNT(*) As cName FROM tbl_member WHERE mem_name='$name' ");
        $show_rs_name = mysql_fetch_assoc($rs_name);
        if ($show_rs_name['cName'] > 0) {
           $msgError .= 'ชื่อนี้มีผู้ใช้งานแล้ว<br />';
        }
    } else {//ถ้ามีค่าว่างให้แจ้งเออเร่อดังนี้
        $msgError .= 'กรุณากรอกชื่อ ชื่อแสดงในเว็บ ด้วย<br />';
    }
    //ถ้ารูปประจำตัวไม่เป็นค่าว่าง
    if (!empty($_FILES['mem_image']['name'])) {
        $mem_image = $_FILES['mem_image'];
        $fileType = strtolower(end(explode('.', $mem_image['name'])));        
        if ($fileType != 'jpeg' && $fileType != 'jpg' && $fileType != 'png' &&  $fileType != 'gif') {
   //ตรวจสอบนามสกุลไฟล์ ถ้าไม่มี .jpeg,jpg,png,gif  ให้แสดงเออเร่อดังนี้
           $msgError .= 'นามสกุลไฟล์ไม่ถูกต้อง<br />';
        } else {//หากมีนามสกุลไฟล์ถูกต้อง ให้ใช้ตัวแปร $filename รับชื่อรูปประจำตัว
            $filename = date("dmyHis") . '.' . $fileType;
        }
    }

    if (empty($msgError)) {//หากไม่มีข้อความเออเร่อ แสดงว่ากรอกข้อมูลถูกต้องหมดแล้ว
 //ให้บันทึกลงฐานข้อมูล
        mysql_query("INSERT INTO tbl_member(mem_user,mem_pass,mem_email,mem_name
            ,mem_image)  VALUE('$username','$pass','$email','$name','$filename')");
   
        if (!empty($filename)) {//ตรวจสอบชื่อไฟล์ ถ้าไม่เป็นค่าว่าง ให้อัพโหลดไฟล์รูปประจำตัวไปเก็บไว้ใน โฟลเดอร์ images/member
            move_uploaded_file($mem_image['tmp_name'], "images/member/" . $filename);
        }
  //สร้างตัวแปร session มารับค่าเพื่อแจ้งใหสมาชิกทราบว่า ลงทะเบียนเสร็จแล้ว
        $_SESSION['message_success'] = 'ลงทะเบียนเสร็จสมบูรณ์แล้ว';
    } else {//หากมีข้อความเออเร่อ 
 //ให้สร้างตัวแปร sessiion มารับค่าเพื่อแจ้งให้สมาชิกถึงปัญหาที่เกิดขึ้น
         $_SESSION['message_error']= $msgError;
    }
}
?>
<html>
    <head>
        <?php require('head.php'); ?>
        <link rel="stylesheet" type="text/css" href="btvalidate/dist/css/bootstrapValidator.min.css"/>
        <script type="text/javascript" src="btvalidate/dist/js/bootstrapValidator.min.js"></script>
        <title>สมัครสมาชิก</title>
    </head>
    <body>
        <?php require('menu.php'); ?>
        <div class="container">
            <?php require('header.php'); ?>
            <div class="row ws-content">
                <div class="col-md-4  col-sm-4 col-md-offset-4 col-sm-offset-4">
                    <h1>สม้ครสมาชิก</h1>
                    <?php
     //พบตัวแปร session ชื่อ message_success  แสดงว่าลงทะเบียนเสร็จสมบูรณ์แล้ว                    
                    if (!empty($_SESSION['message_success'])) {
                        ?>
                        <div class="alert alert-success" role="alert">
                            <?php 
       //ให้แสดงข้อความแจ้งให้สมาชิกทราบดังนี้
       echo $_SESSION['message_success']; 
       ?><br />
                            <span>คลิก <a href="login.php">ที่นี้</a> เพื่อเข้าสู่ระบบ</span>
                        </div>
                        <?php
                        $_SESSION['message_success'] = '';
                    }
                    ?>
                    <?php
     //พบตัวแปร session ชื่อ message_error  แสดงว่ามีปัญหาเกิดขึ้น จากการกรอกข้อมูลของสมาชิก
                    if (!empty($_SESSION['message_error'])) {
                        ?>
                        <div class="alert alert-danger" role="alert">
                            <?php
       //ให้แสดงข้อความแจ้งให้สมาชิกทราบดังนี้ 
       echo $_SESSION['message_error']; 
       ?>
                        </div>
                        <?php
                        $_SESSION['message_error'] = '';
                    }
                    ?>
                    <form  method="post" enctype="multipart/form-data" id="registrationForm" name="registrationForm" action="">
                        <div class="form-group">
                            <label for="username">Username</label>
                            <input type="text" class="form-control" id="mem_user" name="mem_user" placeholder="Username">
                        </div>
                        <div class="form-group">
                            <label for="password">รหัสผ่าน</label>
                            <input type="password" class="form-control" id="mem_pass"  name="mem_pass" placeholder="รหัสผ่าน">
                        </div>
                        <div class="form-group">
                            <label for="repassword">ยืนยันรหัสผ่าน</label>
                            <input type="password" class="form-control" id="repass" name="repass" placeholder="ยืนยันรหัสผ่าน">
                        </div>
                        <div class="form-group">
                            <label for="name">ชื่อแสดงในเว็บ</label>
                            <input type="text" class="form-control" id="mem_name"  name="mem_name" placeholder="ชื่อแสดงในเว็บ">
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="text" class="form-control" id="mem_email"  name="mem_email" placeholder="อีเมล">
                        </div>
                        <div class="form-group">
                            <label for="image member">รูประจำตัว</label>
                            <input type="file" id="mem_image" name="mem_image">
                        </div>
                        <div class="form-group">
                        <input type="submit" class="btn btn-primary" name="btRegister" value="ลงทะเบียน" >
                        <input type="reset" class="btn btn-primary" name="reset" value="Reset">
                        </div>
                    </form>
                </div>
            </div>
            <?php require('footer.php'); ?>
        </div>  
        <script>
           $(document).ready(function() {
                $('#registrationForm').bootstrapValidator({
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        mem_user: {//ตรวจสอบการกรอกข้อมูลของ textfield ชื่อ mem_user (name="mem_user")
                            validators: {
                                notEmpty: {//ตรวจสอบค่าว่างของ mem_user
                                    message: 'กรุณากรอก Username ด้วย'
                                },
                                stringLength: {//ตรวจสอบขนาดตัวอักษรของ mem_user
                                    min: 4,
                                    max: 20,
                                    message: 'Username ต้องมีขนาดตัวอักษร  4-20 ตัวอักษรเท่านั้น'
                                },
                                regexp: {//ตรวจสอบการกรอกข้อมูลที่รองรับเฉพาะตัวอักษรภาษาอังกฤษและตัวเลขเท่านั้นของ mem_user
                                    regexp: /^[a-zA-Z0-9]+$/,
                                    message: 'กรอกข้อมูลไม่ถูกต้อง รองรับภาษาอังกฤษและตัวเลขเท่านั้น'
                                },
                                different: {//ค่าใน mem_user ต้องไม่ตรงกับ mem_pass
                                    field: 'mem_pass',
                                    message: 'Username ต้องมีค่าไม่ตรงกับรหัสผ่าน'
                                }, remote: {//ส่งค่าไปตรวจสอบในฐานข้อมูลว่ามีผู้ใช้งานชื่อ username นี้แล้วหรือยัง
                                    message: 'Username นี้มีผู้ใช้งานแล้ว',
                                    url: 'check_data_ajax.php',
                                    data: {
                                        type: 'username'
                                    }
                                }
                            }
                        },
                        mem_pass: {//ตรวจสอบการกรอกข้อมูลของ textfield ชื่อ mem_pass (name="mem_pass")
                            validators: {
                                notEmpty: {//ตรวจสอบค่าว่าง
                                    message: 'กรุณากรอก รหัสผ่าน ด้วย'
                                },
                                stringLength: {//ตรวจสอบขนาดตัวอักษร
                                    min: 4,
                                    max: 20,
                                    message: 'รหัสผ่านต้องมีขนาด 4-20 ตัวอักษร'
                                }
                            }
                        },
                        repass: {//ตรวจสอบการกรอกข้อมูลของ textfield ชื่อ repass (name="repass")
                            validators: {
                                notEmpty: {//ตรวจสอบค่าว่าง
                                    message: 'กรุณากรอก ยืนยันรหัสผ่าน ด้วย'
                                }, identical: {//ตรวจสอบค่าต้องตรงกับ textfield ชื่อ mem_pass
                                    field: 'mem_pass',
                                    message: 'ค่าต้องตรงกับรหัสผ่าน'
                                }
                            }
                        },
                        mem_email: {//ตรวจสอบการกรอกข้อมูลของ textfield ชื่อ mem_email (name="mem_email")
                            validators: {
                                notEmpty: {//ตรวจสอบค่าว่าง
                                    message: 'กรุณากรอก Email ด้วย'
                                },
                                emailAddress: {//ตรวจสอบรูปแบบอีเมลว่ากรอกถูกต้องตามรูปแบบหรือไม่
                                    message: 'รูปแบบอีเมลไม่ถูกต้อง'
                                }, remote: {//ส่งค่าไปตรวจสอบในฐานข้อมูลว่ามีผู้ใช้อีเมลนี้แล้วหรือยัง
                                    message: 'Email นี้มีผู้ใช้งานแล้ว',
                                    url: 'check_data_ajax.php',
                                    data: {
                                        type: 'email'
                                    }
                                }
                            }
                        },
                        mem_name: {//ตรวจสอบการกรอกข้อมูลของ textfield ชื่อ mem_name (name="mem_name")
                            validators: {
                                notEmpty: {//ตรวจสอบค่าว่าง
                                    message: 'กรุณากรอก ชื่อแสดงในเว็บ ด้วย'
                                }, remote: {//ส่งค่าไปตรวจสอบในฐานข้อมูลว่ามีผู้ใช้ชื่อนี้แล้วหรือยัง
                                    message: 'ชื่อนี้ี้มีผู้ใช้งานแล้ว',
                                    url: 'check_data_ajax.php',
                                    data: {
                                        type: 'nameMember'
                                    }
                                }
                            }
                        },
                        mem_image: {//ตรวจสอบการกรอกข้อมูลของ File Field ชื่อ mem_image (name="mem_image")
                            validators: {
                                file: {//ตรวจสอบนามสกุลไฟล์ รองรับ jpeg,jpg,png,gif และขนาดไม่เกิน 2MB
                                    extension: 'jpeg,jpg,png,gif',
                                    type: 'image/jpeg,image/jpg,image/png,image/gif',
                                    maxSize: 2048 * 1024, // 2 MB
                                    message: 'รองรับนามสกุล jpg,jpeg,png,gif และขนาดต้องไม่เกิน 2MB'
                                }
                            }
                        }
                    }
                });
            });
        </script>    
    </body>
</html>

จากนั้นให้สร้างไฟล์ check_data_ajax.php ให้อยู่ในตำแหน่งเดียวกับไฟล์ register.php ซึ่งเป็นไฟล์สำหรับตรวจข้อมูลแบบ AJAX โดยข้อมูลที่เราจะตรวจสอบคือ ตรวจสอบ UserName ว่าซ่ำหรือป่าว , ตรวจสอบ Email ว่ามีคนใช่หรือยัง ,ตรวจสอบชื่อแสดงในเว็บว่าชื่อซ่ำหรือป่าว โดยมันจะทำหน้าที่รับค่าที่ส่งมาจากไฟล์ register.php แบบ AJAX มาตรวจสอบ แล้วส่งค่าผลลัพธุ์จากการตรวจสอบกลับไป เป็นต้น และให้พิมพ์คำสั่งดังนี้ครับ

<?php
require('bin/connectdb.php');
$isAvailable = true;
switch ($_POST['type']) {
    case 'email':
        //ตรวจสอบอีเมลว่าซ้ำหรือไม่
        $email = $_POST['mem_email'];
        $rs_email = mysql_query("SELECT COUNT(*) As cEmail FROM tbl_member WHERE mem_email='$email' ");
        $show_rs_email = mysql_fetch_assoc($rs_email);
        if ($show_rs_email['cEmail'] > 0) {
            $isAvailable = false;
        }
        break;
    case 'nameMember':
        //ตรวจสอบชื่อเรียกในเว็บว่าซ้ำหรือไม่
        $name = $_POST['mem_name'];
        $rs_name = mysql_query("SELECT COUNT(*) As cName FROM tbl_member WHERE mem_name='$name' ");
        $show_rs_name = mysql_fetch_assoc($rs_name);
        if ($show_rs_name['cName'] > 0) {
            $isAvailable = false;
        }
        break;
    default:
        //ตรวจสอบ Username ว่าซ้ำหรือไม่
        $username = $_POST['mem_user'];
        $rs_username = mysql_query("SELECT COUNT(*) As cUsername FROM tbl_member WHERE mem_user='$username' ");
        $show_rs_username = mysql_fetch_assoc($rs_username);
        if ($show_rs_username['cUsername'] > 0) {
            $isAvailable = false;
        }
        break;
}
// คืนค่าแบบ JSON
echo json_encode(array(
    'valid' => $isAvailable,
));
?>

ให้RUNไฟล์นี้ โดยพิมพ์ในWeb Browser ว่า http://localhost/mywb/register.php จะได้ผลลัพธุ์ดังนี้

ถ้าเปิดบนคอมพิวเตอร์หรือโน๊ตบุคตามรูปข้างบนครับ แต่ถ้าเปิดบน Tablet หรือ Smart Phone ต่างๆจะได้ผลลัพธุ์ดังรูปข้างล่างครับ

สำหรับตัวช่วยที่ทำให้เกิดผลลัพธุ์ตามที่กล่าวไปข้างต้น นั่นก็คือ Bootstrap นั่นเองครับ

เมื่อเราทำส่วนของระบบสมัครสมาชิกของWebboardเรียบร้อยแล้ว ต่อไปคือส่วนของการเข้าสู่ระบบ หรือระบบล็อกอิน นั่นเองครับ ให้สร้างไฟล์ login.php ให้อยู่ตำแหน่งเดียวกับไฟล์ register.php และพิมพ์คำสั่งดังนี้

<?php
session_start();
if(!empty($_POST['btLogin'])){//มีการคลิกที่ปุ่ม เข้าสู่ระบบ
    require('bin/connectdb.php');//เรียกไฟล์เชื่อมต่อกับฐานข้อมูล
    $msgError='';
 //ค่า username ,password ไม่เป็นค่าว่าง
    if(!empty($_POST['mem_user'])&& !empty($_POST['mem_pass'])){
        $username=$_POST['mem_user'];
        $password=$_POST['mem_pass'];
  //ตรวจสอบ username,password ว่ามีตรงกับฐานข้อมูลหรือไม่
        $rs_chk_mb=mysql_query("SELECT mem_name,mem_id,mem_level FROM tbl_member WHERE mem_user='$username' AND mem_pass='$password'");
        $show_chk_mb=  mysql_fetch_assoc($rs_chk_mb);
        if(empty($show_chk_mb['mem_name'])){//หากไม่พบข้อมูล username,password ในฐานข้อมูล ให้แสดงข้อความแจ้งเตือนดังนี้
            $msgError.='กรอกข้อมูล Username หรือ Password ไม่ถูกต้อง<br />';
        }else{//หากพบว่ากรอกข้อมูลถูกต้อง ให้สร้างตัวแปรแบบ session มารับค่าดังนี้
            $_SESSION['mem_id']=$show_chk_mb['mem_id'];//รับค่า id สมาชิก
            $_SESSION['mem_name']=$show_chk_mb['mem_name'];//รับค่าชื่อของสมาชิก
   $_SESSION['mem_level']=$show_chk_mb['mem_level'];//รับค่าระดับผู้ใช้งานของสมาชิก 1 = admin ,2=สมาชิก
        }        
    }else{//กรณีที่สมาชิกไม่กรอกข้อมูล แล้วดันทะลึ่งกดปุ่ม เข้าสู่ระบบ ให้แจ้งข้อความดังนี้
        $msgError.='กรุณากรอก Username และ Password ด้วย<br />';
    }
    if(empty($msgError)){
  //หากสมาชิกพิมพ์รหัสผ่านถูกต้อง ให้Redirect หน้าไปที่ไฟล์ index.php ซึ่งก็คือหน้าโฮมนั่นเอง
        header("Location:index.php");
    }else{
  //หากกรอกรหัสผ่านไม่ถูกต้อง ให้สร้างตัวแปร session มารับค่าเพื่อแจ้งให้ทราบถึงปัญหาที่เกิดขึ้น
        $_SESSION['message_error']=$msgError;
    }
}
?>
<html>
    <head>
        <?php require('head.php'); ?>
        <link rel="stylesheet" type="text/css" href="btvalidate/dist/css/bootstrapValidator.min.css"/>
        <script type="text/javascript" src="btvalidate/dist/js/bootstrapValidator.min.js"></script>
        <title>เข้าสู่ระบบ MYWEBBOARD</title>
    </head>
    <body>
        <?php require('menu.php'); ?>
        <div class="container">
            <?php require('header.php'); ?>
            <div class="row ws-content">
                <div class="col-md-4  col-sm-4 col-md-offset-4 col-sm-offset-4">
                    <h1>เข้าสู่ระบบ</h1>
                    <?php
                    if (!empty($_SESSION['message_error'])) {
      //แสดงปัญที่เกิดขึ้นจากการกรอกรหัสผ่านเข้าสู่ระบบ
                        ?>
                        <div class="alert alert-danger" role="alert">
                            <?php echo $_SESSION['message_error']; ?>
                        </div>
                        <?php
                        $_SESSION['message_error'] = '';
                    }
                    ?>
                    <form  method="post" enctype="multipart/form-data" id="registrationForm" name="registrationForm" action="">
                        <div class="form-group">
                            <label for="username">Username</label>
                            <input type="text" class="form-control" id="mem_user" name="mem_user" placeholder="Username">
                        </div>
                        <div class="form-group">
                            <label for="password">รหัสผ่าน</label>
                            <input type="password" class="form-control" id="mem_pass"  name="mem_pass" placeholder="รหัสผ่าน">
                        </div>
                       
                        <div class="form-group">
                        <input type="submit" class="btn btn-primary" name="btLogin" value="เข้าสู่ระบบ" >
                        </div>
                    </form>
                </div>
            </div>
            <?php require('footer.php'); ?>
        </div>
        <script>
           $(document).ready(function() {
      //คำสั่งข้างล่างนี้คล้ายไฟล์ register.php ให้ศึกษาจากโค๊ดจากไฟล์ register.php ได้เลยครับ
                $('#registrationForm').bootstrapValidator({
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        mem_user: {
                            validators: {
                                notEmpty: {
                                    message: 'กรุณากรอก Username ด้วย'
                                },
                                stringLength: {
                                    min: 4,
                                    max: 20,
                                    message: 'Username ต้องมีขนาดตัวอักษร  4-20 ตัวอักษรเท่านั้น'
                                },
                                regexp: {
                                    regexp: /^[a-zA-Z0-9]+$/,
                                    message: 'กรอกข้อมูลไม่ถูกต้อง รองรับภาษาอังกฤษและตัวเลขเท่านั้น'
                                },
                                different: {
                                    field: 'mem_pass',
                                    message: 'Username ต้องมีค่าไม่ตรงกับรหัสผ่าน'
                                }
                            }
                        },
                        mem_pass: {
                            validators: {
                                notEmpty: {
                                    message: 'กรุณากรอก รหัสผ่าน ด้วย'
                                },
                                stringLength: {
                                    min: 4,
                                    message: 'รหัสผ่านต้องไม่น้อยกว่า 4 ตัวอักษร'
                                }
                            }
                        }
                    }
                });
            });
        </script>    
    </body>
</html>

จากโค๊ดข้างบนเมื่อเรารันคำสั่งโดยพิมพ์ใบโปรแกรม Web Browser ของเราว่า http://localhost/mywb/login.php จะได้ผลลัพธุ์ดังนี้

 รูปข้างบนคือแสดงผลบนหน้าจอของคอมพิวเตอร์นะครับ ส่วนรูปข้างล่างจะเป็นการแสดงผลในส่วนของ Smart  Phone เช่น iPhone ครับ

สุดท้ายคือส่วนของการออกจากระบบ (Logout) ให้สร้างไฟล์ logout.php ตำแหน่งเดียวกับไฟล์ login.php และให้พิมพ์คำสั่งดังนี้

<?php
session_start();
session_destroy();//ล้างค่าในตัวแปร session ทิ้งทั้งหมด
header('Location:index.php');
?>

แล้วพบกันในบทความหน้านะครับ ผมจะสอนทำในส่วนของการจัดการหมวดหมู่ Webboard ของแอดมิน และนำหมวดหมู่มาแสดงในหน้าโฮม (Home Page) กันครับ