A-AA+then

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

<form name="login_form" id="login_form" method="post" onsubmit="return check_user(login_form.user.value, login_form.passwd.value, 'login')" action="?">
<table cellspacing="0" cellpadding="2">
<tr><td>
     <table cellspacing="0" cellpadding="1">
     <tr><td id="login_table">Loading...</td></tr>
     </table>
</td></tr>
</table>
</form>

โค้ดหน้า login.php เป็นการเตรียมพื้นที่เพื่อแสดงผล login ในตาราง login_table โดยในตอนแรกที่โหลดจะเป็นการแสดงคำว่า Loading จนกว่าจะโหลดหน้า login เสร็จ

ข้างบนคือ ฟอร์ม ส่วนที่จะใส่ไว้ในหน้าหลักครับ เมื่อโหลด login แล้ว ก็จะได้โค้ด login เพื่อใส่ไว้ในส่วน Loading...

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;
}

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_table").innerHTML=ret;
         // เขียนคำสั่ง Refresh หน้าหลัก ที่นี่ หาก login สำเร็จ
         // หรือ อาจเขียนคำสั่งอื่นๆ หลังจาก login แล้ว ที่นี่ (javascript)
         // document.location.reload();

        }
      }
    };
    req.open("POST", "checkuser.php");//สร้าง connection
    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//header
    req.send("user="+encodeURIComponent(username)+
      "&passwd="+encodeURIComponent(passwd)+
      "&action="+action);//ส่งค่า
  }
  return false;
}

//โหลดครั้งแรก
window.onload = function()
{
  check_user( '', '', '' );
};

ข้างบนนี่เป็น Javascript ที่ใช้สำหรับการ login ครับ การทำงานเริ่มต้นเมื่อโหลดหน้าเพจเสร็จ จะทำการเรียกฟังก์ชั่น check_user โดยการส่งค่าว่างๆ ไปพร้อมกับฟังก์ชั่น เพื่อบอกว่าเป็นการ load ครั้งแรก และเมื่อมีค่า return กลับมาก็จะนำไปแสดงผลยัง login_table ตามที่ได้เตรียมไว้

<?
  //สำหรับเมื่อใช้ภาษาไทย
  header("content-type: application/x-javascript; charset=utf-8");
  
  //ค่าที่รับมา
  $user=$_POST[user];
  $passwd=$_POST[passwd];
  $action=$_POST[action];
  
  if (isset($action) & $action=='logout') {//ออกจากระบบชั่วคราว
    unset($user);
    $message="<font color=green size=1>ออกจากระบบเรียบร้อย</font><br /><font color=#666666 size=1>กรุณากลับมาเยือนเราอีกครั้ง</font>";
  } else {//ตรวจสอบชื่อกับฐานข้อมูล
    //ค่ากำหนดของ ฐานข้อมูล
    $host="localhost";
    $username="root";
    $password="";
    $dbname="mydb";
    $tablename="tbuser";
    
    //เรียกข้อมูล - Member -
    $db = mysql_connect($host,$username,$password) or die ("ไม่สามารถติดต่อกับฐานข้อมูลได้ในขณะนี้");
    $sql = "select * from $tablename where user = '$user' AND passwd = '$passwd'";
    $query = mysql_db_query($dbname,$sql) or die ("ไม่สามารถเรียกฐานข้อมูลสมาชิกได้ในขณะนี้");
    $fetch = mysql_fetch_array($query);
    $num = mysql_num_rows($query);
    mysql_close($db);
    
    if ($num != 0) {//ชื่อ และ รหัสผ่านถูกต้อง
      //login สำเร็จ
    } else if (empty($action)) {//ครั้งแรก ไม่ได้ใส่ action มา
      $message="<font color=#666666 size=1>ยินดีต้อนรับ สู่เว็บไซต์<br /><font color=green>g-O-r-a-g-o-d.com</font></font>";
      unset($user);
    } else {
      //ชื่อหรือ รหัสผ่านไม่ถูกต้อง
      $message="<font color=red size=1>ชื่อ หรือ รหัสผ่าน ไม่ถูกต้อง</font>";
      unset($user);
    }
  }
  echo "<table cellspacing=5 cellpadding=0 width=100%> ";
  if (isset($user)) {// แสดงข้อความต้อนรับ
    echo "<tr><td align=center><font color=#666666 size=1>ยินดีต้อนรับ คุณ <font color=green>$user</font> เข้าระบบ</font></td></tr> ";
    echo "<tr><td align=center><input type=button value=ออกจากระบบ class=red title=\"ออกจากระบบ ชั่วคราว\" onclick=\"check_user('', '', 'logout')\"></td></tr> ";
  } else {// แสดงฟอร์ม login
    if (isset($message)) echo "<tr><td align=center colspan=2>$message</td></tr> ";
    else echo "<tr><td align=center colspan=2><font size=1><font color=green>ผู้มาเยือน</font> กรุณาเข้าระบบ</font></font></td></tr> ";
    echo "<tr><td align=right><font color=#555555 size=1>user : </font></td><td><input size=15 type=text name=user maxlength=15></td></tr> ";
    echo "<tr><td align=right><font color=#555555 size=1>passwd : </font></td><td><input size=15 type=password name=passwd maxlength=15></td></tr> ";
    echo "<tr><td align=right></td><td><input type=\"submit\" name=\"submit\" value=\"เข้าระบบ\" class=\"red\" title=\"สมาชิก เข้าระบบ\" /></td></tr> ";
  }
  echo "</table> ";
?>

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

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

 

rar (2661)

ตัวอย่าง
  
หากต้องการให้จำชื่อและรหัสผ่านที่ login ในหน้า checkuser.php ให้ใส่โค้ด cookie หรือ session เมื่อ login สำเร็จ
  
  if ($num != 0) {//ชื่อ และ รหัสผ่านถูกต้อง
    //login สำเร็จ ใช้ cookie
    setcookie("user", $user, time() + 3600 * 24 * 365);
    setcookie("passwd", $passwd, time() + 3600 * 24 * 365);


    //หรือ login สำเร็จ ใช้ session
    $_SESSION[user]=$user;
    $_SESSION[passwd]=$passwd;

  } else if (empty($action)) {//ครั้งแรก ไม่ได้ใส่ action มา

และในหน้า login.php ตอนโหลดครั้งแรก ให้ใส่ user และ password จาก coocie หรือ session ลงไปด้วย เช่น

check_user('<?=$_COOKIE[user]?>', '<?=$_COOKIE[passwd]?>', '');
หรือ

check_user('<?=$_SESSION[user]?>', '<?=$_SESSION[passwd]?>', '');
ส่วนตอน logout ให้ทำลาย cookie หรือ session ที่บันทึกไว้

  if (isset($action) & $action=='logout') {//ออกจากระบบชั่วคราว
    //ทำลาย cookie เมื่อ logout
    setcookie("user", "");
    setcookie("passwd", "");


    //หรือทำลาย session
    unset($_SESSION[user]);
    unset($_SESSION[passwd]);
    session_destroy();


    unset($user);
    $message="<font color=green size=1>ออกจากระบบเรียบร้อย</font><br /><font color=#666666 size=1>กรุณากลับมาเยือนเราอีกครั้ง</font>";
  } else {//ตรวจสอบชื่อกับฐานข้อมูล

 

AJAX

Relate

^