GORAGOD.com

บทที่ 7 การทำ Login ด้วย AJAX

ในการ Login โดยทั่วๆไป แล้ว เราจะต้องกรอกข้อความ แล้วก็ส่งไปตรวจสอบ ความถูกต้องของ username และ password แล้วจึงกลับมาแสดงผลว่า login สำเร็จอีกที ยุ่งยากมั้ยครับ ต้องวิ่งผ่านเว็บเพจถึง 3 หน้า เสียเวลาไปโดยเปล่าประโยชน์ เราสามารถใช้ AJAX ในการส่งข้อมูล username และ password แล้วส่งข้อมูลกลับมาว่า username และ password นั้นถูกต้องได้ง่ายๆ ในขั้นตอนเดียว นอกจากนั้นเรายังใช้เทคนิคนี้ ในการตรวจสอบว่า user นี้ มีผู้ใช้แล้วหรือไม่ ได้ด้วย มาเริ่มต้นดูโค้ดกันเลย

<form id="login_form" method="post" onsubmit="return check_user(login_form.user.value, login_form.passwd.value, 'login')" action="?">
<div class="center">Loading ....</div>
</form>

โค้ดหน้า login.php เป็นการเตรียมพื้นที่เพื่อแสดงผล login โดยในตอนแรกที่โหลดจะเป็นการแสดงคำว่า Loading จนกว่าจะโหลดหน้า login เสร็จ เมื่อโหลด login แล้ว ก็จะได้โค้ด login เพื่อใส่ไว้แทนที่ส่วน Loading...
// ฟังก์ชั่นสำหรับเรียกใช้ Ajax
 function Inint_AJAX () {
  var xmlhttp = false;
  try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch(e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) {
      xmlhttp = false;
    }
  }
  if(!xmlhttp && document.createElement){
    xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}
// ฟังก์ชั่นตรวจสอบการ login ด้วย Ajax
 function check_user(username, passwd, action) {
  var cancle=false;
  if (action=='login') {
    if (username.length==0) {
      alert('กรุณาป้อน Username ก่อน');
      document.login_form.user.focus();
      cancle=true;
    } else if (passwd.length==0) {
      alert('กรุณาป้อน Password ก่อน') ;
      document.login_form.passwd.focus();
      cancle=true;
    }
  }
  if (cancle==false) {
    var req = Inint_AJAX();
    req.onreadystatechange = function () {
      if (req.readyState==4) {
        if (req.status==200) {
          // รับค่ากลับมา
           var ret=req.responseText;
          document.getElementById("login_form").innerHTML = ret;
          // เขียนคำสั่ง Refresh หน้าหลัก ที่นี่ หาก login สำเร็จ
           // document.location.reload();
        }
    }
  };
  // สร้าง connection
   req.open("POST", "checkuser.php");
  // header
   req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  // ส่งค่า
   req.send("user="+encodeURIComponent(username)+
    "&passwd="+encodeURIComponent(passwd)+
    "&action="+action);
  }
  return false;
}
//โหลดครั้งแรก
window.onload = function(){
  check_user( '', '', '<?=(isset($_GET['action']) ? $_GET['action'] : ''); ?>' );
};

โค้ดข้างบนนี่เป็น Javascript ที่ใช้สำหรับการ login ครับ การทำงานเริ่มต้นเมื่อโหลดหน้าเพจเสร็จ จะทำการเรียกฟังก์ชั่น check_user โดยการส่งค่าว่างๆไปพร้อมกับฟังก์ชั่น เพื่อบอกว่าเป็นการ load ครั้งแรก และเมื่อมีค่า return กลับมาก็จะนำไปแสดงผลยังฟอร์มตามที่ได้เตรียมไว้
<?php
// สำหรับเมื่อใช้ภาษาไทย
 header('content-type: application/x-javascript; charset=utf-8');
// ตัวแปรเก็บข้อมูลการ login
 $login = false;
if (!empty($_POST['action']) && $_POST['action'] == 'logout') {
  // ออกจากระบบ
   $message = 'ออกจากระบบเรียบร้อย<br />กรุณากลับมาเยือนเราอีกครั้ง';
} elseif (!empty($_POST['user']) && !empty($_POST['passwd'])) {
  // ค่าที่รับมา
   $user = $_POST['user'];
  $passwd = $_POST['passwd'];
  // ข้อมูลเชื่อมต่อกับฐานข้อมูล แก้ไขให้ตรงกับฐานข้อมูลที่ใช้งานอยู่
   $host = 'localhost';
  $username = 'root';
  $password = '';
  $dbname = 'user_table';
  $tablename = 'user';
  // ตรวจสอบการ login กับฐานข้อมูล
   try {
    $conn = new PDO("mysql:host={$host};dbname={$dbname}", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $query = $conn->prepare('SELECT * FROM `'.$tablename.'` WHERE `username`=:uname LIMIT 1');
    $query->execute(array(':uname' => $user));
    if ($query->rowCount() > 0) {
      $member = $query->fetch(PDO::FETCH_ASSOC);
      // ตรวจสอบ password กับข้อมูลจากฐานข้อมูล (รหัสผ่านเก็บเป็น md5)
       if ($member['password'] == md5($passwd)) {
        // เข้าระบบสำเร็จ
         $login = $member;
      }
    }
  } catch (PDOException $e) {
    echo $e->getMessage();
  }
  if (empty($login)) {
    // ชื่อหรือรหัสผ่านผิด
     $message = 'ชื่อ หรือ รหัสผ่าน ไม่ถูกต้อง';
  } else {
    // เข้าระบบสำเร็จ
     $message = 'ยินดีต้อนรับ คุณ <em>'.$login['username'].'</em> เข้าระบบ';
  }
} else {
  // เรียกครั้งแรก แสดงฟอร์ม login
   $message = 'ยินดีต้อนรับ สู่เว็บไซต์<br />Goragod.com';
}
echo '<table>';
echo '<tr><td class=center colspan=2>'.$message.'</td></tr>';
if (empty($login)) {
  // กรอบ login
   echo '<tr><td>user :</td><td><input size=15 type=text name=user maxlength=15></td></tr>';
  echo '<tr><td>passwd :</td><td><input size=15 type=password name=passwd maxlength=15></td></tr>';
  echo "<tr><td></td><td><input type=button value=Login onclick=\"check_user(login_form.user.value, login_form.passwd.value, 'login')\"></td></tr>";
} else {
  // login สำเร็จ แสดงปุ่ม logout
   echo '<tr><td class=center colspan=2><a href="?action=logout">ออกจากระบบ</a></td></tr>';
}
echo '</table>';

ไฟล์ checkuser.php สำหรับตรวจการ login ด้วยการรับค่าที่ส่งมา แล้วตรวจสอบกับ ฐานข้อมูล ให้ตรงกันทั้ง username และ password ถ้าการ login ถูกต้อง ก็จะคืนค่าข้อความต้อนรับ แต่ถ้าไม่ถูกต้องก็จะคืนค่าฟอร์ม login เพื่อให้กรอกใหม่

สำหรับการตรวจสอบว่ามี user หรือ email นี้อยู่บนระบบหรือไม่ เราก็ใช้เทคนิค คล้ายๆกันนี้ โดยการส่ง ชื่อ หรือ email ไปตรวจสอบ แล้วก็ตอบกลับมาว่า มีหรือ ไม่มีเท่านั้นเองครับ

 (2,695)

ตัวอย่าง