version 4.1.0

ตัวอย่างระบบล๊อกอินเข้าสู่ระบบ Login

  อังคารที่ 27 มกราคม พ.ศ. 2558 เวลา 08:58:32 น.      7,724 ครั้ง


ตัวอย่างระบบล๊อกอินเข้าสู่ระบบ Login

แนะนำ

ตัวอย่างนี้ เราจะมาเรียนรู้วิธีการสร้างระบบล๊อกอินเข้าสู่ระบบ (Login) โดยเราจะมีการติดต่อกับฐานข้อมูล เพื่อดึงข้อมูล Username, Password ของ ลูกค้าหรือสมาชิก มาใช้สำหรับการล๊อกอิน แต่ก่อนเราต้องสร้างตาราง "tbl_user" ขึ้นมาก่อน พร้อมทั้งสร้างหน้าล๊อกอินที่ไว้สำหรับกรอกข้อมูล Username และ Password ที่ใช้ตรวจสอบ เพื่อสามารถเข้าใช้งานระบบได้

บทนี้มีอะไรบ้าง

  1. ตอนที่ 1 สร้างตาราง "tbl_user" เพื่อใช้เก็บข้อมูลผู้ใช้งาน
  2. ตอนที่ 2 สร้างไฟล์ Model ชื่อว่า "User"
  3. ตอนที่ 3 สร้างหน้า สำหรับการกรอกข้อมูล Username, Password เพื่อใช้เข้าสู่ระบบ
  4. ตอนที่ 4 แก้ไขฟังก์ชั่น authenticate() ภายในไฟล์ UserIdentity.php
  5. ตอนที่ 5 ทดสอบ ระบบล๊อกอินเข้าสู่ระบบ (Login)

สร้างตาราง "tbl_user" รายละเอียด Field ดังต่อไปนี้

  • id ใช้เก็บข้อมูล รหัส (อัตโนมัติ)
  • name ใช้เก็บข้อมูล ชื่อ - นามสกุล ผู้ใช้งาน
  • username ใช้เก็บข้อมูล ชื่อผู้ใช้ (Username)
  • password ใช้เก็บข้อมูล รหัสผ่าน (Password)

ตาราง "tbl_user"

ตาราง

รูปภาพที่ 1 | ตาราง "tbl_user"

คำสั่ง SQL สำหรับสร้างตาราง "tbl_user"

 CREATE TABLE IF NOT EXISTS `tbl_user` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `name` varchar(200) NOT NULL,
  `username` varchar(30) NOT NULL,
  `password` varchar(30) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

คำสั่ง SQL สำหรับสร้างข้อมูล Username,Password ไว้สำหรับการทดสอบ

 INSERT INTO `tbl_user` VALUES ('1', 'Eakkabin Jaikeawma', 'admin', 'admin');


คำสั่งภายในไฟล์ Model (User.php)

 // in model
// path : [skeleton]\protected\models\User.php   

class User extends CActiveRecord
{
	
    public function tableName()
    {
        return 'tbl_user';
    }

    public function rules()
    {
        return array(
            array('name, username, password', 'required'),
            array('name', 'length', 'max' => 200),
            array('username', 'length', 'max' => 30),
            array('password', 'length', 'max' => 30),
            array('id, name, username, password', 'safe', 'on' => 'search'),
        );
    }

    public function relations()
    {
        return array();
    }

    public function attributeLabels()
    {
        return array(
            'id' => 'ID',
            'name' => 'Name',
            'username' => 'Username',
            'password' => 'Password',
        );
    }
    public function search()
    {
        $criteria = new CDbCriteria;
        $criteria->compare('id', $this->id);
        $criteria->compare('name', $this->name, true);
        $criteria->compare('username', $this->username, true);
        $criteria->compare('password', $this->password, true);
        return new CActiveDataProvider($this, array(
            'criteria' => $criteria,
        ));
    }
    public static function model($className = __CLASS__)
    {
        return parent::model($className);
    }
    
}

สำหรับใครที่มีไฟล์ User.php อยู่แล้ว ให้เพิ่มเพียงฟังก์ชั่น validatePassword($password) แทรก ลงในไฟล์ Model เท่านั้น

ฟังก์ชั่น validatePassword($password)

 // in Model
class User extends CActiveRecord
{

    ......           
    
    // ฟังก์ชั่น ตรวจสอบข้อมูลรหัสผ่านเหมือนกันหรือไม่
    public function validatePassword($password) {
        return $password === $this->password;
    }
    
}


คำสั่งสร้าง "ฟอร์มสำหรับการกรอกข้อมูล"

 // in view
<h1>Login</h1>
<p>Please fill out the following form with your login credentials:</p>

<div class="form">
    <?php $form = $this->beginWidget('CActiveForm', array(
        'id' => 'login-form',
        'enableClientValidation' => true,
        'clientOptions' => array(
            'validateOnSubmit' => true,
        ),
    )); ?>

    <p class="note">Fields with <span class="required">*</span> are required.</p>

    <div class="row">
        <?php echo $form->labelEx($model, 'username'); ?>
        <?php echo $form->textField($model, 'username'); ?>
        <?php echo $form->error($model, 'username'); ?>
    </div>

    <div class="row">
        <?php echo $form->labelEx($model, 'password'); ?>
        <?php echo $form->passwordField($model, 'password'); ?>
        <?php echo $form->error($model, 'password'); ?>
    </div>

    <div class="row rememberMe">
        <?php echo $form->checkBox($model, 'rememberMe'); ?>
        <?php echo $form->label($model, 'rememberMe'); ?>
        <?php echo $form->error($model, 'rememberMe'); ?>
    </div>

    <div class="row buttons">
        <?php echo CHtml::submitButton('Login'); ?>
    </div>
    
    <?php $this->endWidget(); ?>
</div>

ฟอร์มสำหรับการกรอกข้อมูล จะอยู่ที่ไดเรคทอรี่ [skeleton]\protected\views\site\login.php

ฟอร์มสำหรับการกรอกข้อมูล Username, Password

ฟอร์มสำหรับการกรอกข้อมูล Username, Password

รูปภาพที่ 2 | ฟอร์มสำหรับการกรอกข้อมูล Username, Password

ทดสอบได้ที่ URL http://localhost/yii_workshop/index.php?r=site/login ได้เลยครับ



ตัวอย่างคำสั่ง

 // in UserIdentity.php
public function authenticate() {

    $username = strtolower($this->username);  
    
    // $this->username; username คือ ชื่อ Textbox ในฟอร์ม Login
    $user = User::model()->findByAttributes(array('username' => $username));
    
    // User ชื่อ Model ที่เราสร้างไว้
    if(!isset($user)){ // === NULL
        $this->errorCode = self::ERROR_USERNAME_INVALID;
    }else if(!$user->validatePassword($this->password)){ // !== Password
        $this->errorCode = self::ERROR_PASSWORD_INVALID;
    }else{           
        $this->username = $user->name;
        // $user->name; name ชื่อ Field :: name ในตาราง user
        $this->errorCode = self::ERROR_NONE;
    }
    
    return $this->errorCode == self::ERROR_NONE;
}


เข้าไปที่ลิ้งค์ http://localhost/yii_workshop/index.php?r=site/login กรณีเราไม่ได้ระบบล๊อกอินไปไว้ที่ Controller อื่นนะครับ หากมีการย้ายเราก็เปลี่ยน URL เพื่อเชื่อมไปยัง Controller นั้นได้เลย

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 3 | รูปภาพตัวอย่าง

ทดลองกรอกข้อมูล Username, Password ที่เราได้สร้าง "จำลอง" ไว้ในขั้นตอนที่ 1 ได้เลยครับ (ตัวอย่าง admin, admin) และกดปุ่ม Login

กรณี กรอกข้อมูล Username, Password ไม่ถูกต้อง

กรณี กรอกข้อมูล Username, Password ไม่ถูกต้อง

รูปภาพที่ 4 | กรณี กรอกข้อมูล Username, Password ไม่ถูกต้อง

กรอก "ข้อมูล Username, Password" ถูกต้อง เข้าสู่ระบบสำเร็จแล้ว

กรณี กรอกข้อมูล Username, Password ถูกต้อง

กรณี กรอกข้อมูล Username, Password ถูกต้อง

รูปภาพที่ 5 | กรณี กรอกข้อมูล Username, Password ถูกต้อง




นักแปล / นักเขียน / เรียบเรียง

author

เอกบิณ ใจแก้วมา (แม็ก)

"โปรแกรมเมอร์ตัวเล็ก ๆ" สะสมประสบการณ์ด้านการพัฒนาซอฟแวร์มามากกว่า 11 ปี
# ติดตามผลงานได้ที่ | พบกับเราที่ Google+ | Facebook






Comment