วันอาทิตย์ที่ 20 มิถุนายน พ.ศ. 2564

ใช้งานคุ๊กกี้(cookies)กัน ทำเรื่องเหลือเชื่อให้เป็นสิ่งเป็นไปได้

ก่อนอื่นมาทำความรู้จักกับคุ๊กกี้กันก่อน คุ๊กกี้เป็นไฟล์ข้อมูลแบบตัวอักษรเล็กๆ ที่จัดเก็บบนฝั่งเครื่องลูก เช่นหากเราใช้เวบบราวเซอร์เปิดเวบไซต์ หากฝั่งเซิร์ฟเวอร์เขียนโปรแกรมให้จัดเก็บคุ๊กกี้ไว้ หากเราเข้าไปใช้งานซ้ำยังเวบไซต์เดิมอีกครั้ง ฝั่งเซิร์ฟเวอร์ก็จะทราบและแสดงคำพูดต้องรับ "ยินดีที่กลับมาเยี่ยมเยียนกันอีกครั้ง"

พอเราเห็นประโยชน์ของคุ๊กกี้กันแล้ว ที่นี้มาดูงานของผู้เขียนว่าทำไมต้องใช้ประโยชน์ในเรื่องนี้ โจทย์ก็คือเมื่อเครื่องลูกเข้ามาครั้งแรกให้ไปเปิดหน้ารับค่า url สำหรับทำการรีไดเรค(redirect) ไปยังเวบอื่น

ตัวอย่างการใช้งานคุ๊กกี้

ตามตัวอย่าง หากเครื่องลูกเข้ามาครั้งแรก ก็จะผลักให้เข้าไปหน้าป้อนค่า url หรือ landing.html เพื่อกำหนดว่าจะไปยังไซต์ 1 หรือไซต์อื่น ๆ ตามที่ต้องการ หากเครื่องลูกเครื่องเดิมเข้ามาที่หน้าคุ๊กกี้อีกครั้งคราวนี้ไม่ต้องเข้ามาหน้า landing.html แล้วให้ทำการเปลี่ยนหน้า(redirect)ไปยังไซต์ที่ได้ป้อนข้อมูลไว้เพียงครั้งแรกเลย เราไปเริ่มต้นกันเลย

ขั้นตอนที่ 1 สร้างไฟล์ landing.html เอาไว้สำหรับรับค่าเท็กบ็อก(textbox)เมื่อเครื่องลูกป้อนข้อมูลเรียบร้อยแล้วจะได้ทำการเปลี่ยนหน้าไปยังไซต์ที่ต้องการ 


<!DOCTYPE html>
<html lang="en">
<head>
  <title>GPS-Vehicle Tracking system</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<script language="javascript" type="text/javascript">
    function buttonClick(){
        var url = document.getElementById("inputURL").value;
        setCookie("redirectUrl", url, 30);
        window.location = url;
    }
    function setCookie(cname,cvalue,exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }

</script>
  </head>
<body>
<div class="container">
  <div class="jumbotron">
    <h1>GPS-VEHICLE Tracking Login:</h1>
    <p>The best gps tracking system in Thailand!</p>
  </div>
  <div class="row">
     <label style="font-size:12pt;" for="lname">Edit URL:</label>
     <input style="width:100%;font-size:12pt;"type="text"  id="inputURL" name="inputURL" value="http://tavl2.gps-vehicle.com/gpsvehicleserver"><br>
     <input style="font-size:12pt;"type="button" value="click" OnClick="buttonClick()"/>
  </div>
</div>

</body>
</html>

 

ขั้นตอนที่ 2 สร้างไฟล์ index.html หรือหน้าคุ๊กกี้ หน้านี้จะทำการตรวจสอบว่าเคยเข้ามาไหม หากเคยเข้ามาแล้วให้ดึงข้อมูลคุ๊กกี้ขี้นมาแล้วทำการเปลี่ยนหน้าไปเลย แต่หากยังไม่เคยเข้ามาก็ให้ย้อนกลับไปหน้า landing.html ก่อน

<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires=" + d.toGMTString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function checkCookie() {
  var theUrl=getCookie("redirectUrl");
  if (theUrl != "") {
    	 //alert("Welcome again " + theUrl);
	 window.location.href = theUrl;
  } else {
     	 theUrl = "http://tavl2.gps-vehicle.com/gpsvehicleserver";
         if (theUrl != "" && theUrl != null) {
    	  	//setCookie("redirectUrl", theUrl, 30);
          	window.location.href = "landing.html";
     	}
  }
}
</script>
</head>

<body onload="checkCookie()"></body>

</html>

 

จากการทดลองของผู้เขียน ระบบก็สามารถทำงานได้ตามที่เราต้องการ แต่จะมีข้อผิดพลาดอยู่บ้างเช่น หากป้อนข้อมูล url ผิดในครั้งแรกครั้งต่อไปก็ไม่สามารถเข้าไปหน้านั้นได้แล้ว ยกเว้นรู้ว่าต้องพิมพ์หน้า landing.html ต่อท้ายไปด้วยอย่างนี้ก็สามารถแก้ไขหน้าที่ผิดพลาดได้ ขอบคุณพื้นที่เวบไซด์ดีๆ จากบริการ GPS ติดตามรถ สินค้าดีมีคุณภาพ ราคาถูกกว่าที่อื่นๆ พลาดไม่ได้ด้วยประการทั้งปวง เลือกจีพีเอสไทย





เขียนโดย ที่

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)