PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

แนวทางแจ้งเตือนรายการใหม่ เมื่อมีการเพิ่มข้อมูลในฐานข้อมูลด้วย ajax

20 November 2016 By


ตัวอย่างนี้เป็นแนวทาง สำหรับการแจ้งเตือนว่ามีการเพิ่มรายการใหม่เข้ามาในฐานข้อมูล
ในลักษณะเช่น เมื่อมีรายการสั่งซื้อเข้ามาใหม่ หรือเมื่อมีเพิ่มข้อมูลสินค้าใหม่ หรือเมื่อมีการสมัคร
สมาชิกเข้ามาใหม่ ประมาณนี้เป็นต้น หลักการคือ ใช้ ajax ดึงจำนวนรายการทั้งหมดมาแสดง
ในครั้งแรก และเก็บค่าไว้ใน data attribute ของ html5 โดยใช้การกำหนดเวลาให้ทำงานทุกๆ เวลา
ที่กำหนด ใช้ setInterval()  ฟังก์ชั่น และเมื่อมีข้อมูลเข้ามาใหม่ ให้นำค่าที่ส่งกลับมาในรอบที่ 2
หรือรอบถัดไป มาเช็คกับค่าเดิม ถ้าเป็นค่าที่มากกว่าค่าเดิม ก็ให้ขึ้นแจ้งเตือน ในที่นี้จะใช้รูปแบบ
alert() ธรรมดา สามารถไปประยุกต์เพิ่มเติมได้
 
ก่อนอื่นสร้างไฟล์สำหรับดึงจำนวนข้อมูลทั้งหมดที่ต้องการเช็ค
 

ไฟล์ dbconnect.php

 
<?php  
$mysqli = new mysqli("localhost", "root","","test");  
/* check connection */  
if ($mysqli->connect_errno) {  
    printf("Connect failed: %sn", $mysqli->connect_error);  
    exit();  
}  
if(!$mysqli->set_charset("utf8")) {  
    printf("Error loading character set utf8: %sn", $mysqli->error);  
    exit();  
}  
 
 

ไฟล์ ajax_checkitem.php

 
<?php
header("Content-type:application/json; charset=UTF-8");    
header("Cache-Control: no-store, no-cache, must-revalidate");         
header("Cache-Control: post-check=0, pre-check=0", false); 
require_once("dbconnect.php");
$sql = "
 SELECT COUNT(id_data1) as total FROM tbl_temp
";
$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
	$row = $result->fetch_assoc();
		$json_data[] = array(
			"num_total" => $row['total']
		);
}
// แปลง array เป็นรูปแบบ json string  
if(isset($json_data)){  
    $json= json_encode($json_data);    
    if(isset($_GET['callback']) && $_GET['callback']!=""){    
    echo $_GET['callback']."(".$json.");";        
    }else{    
    echo $json;    
    }    
}  
?>
 
 
ไฟล์ ajax ของเราจะส่งกลับข้อมูลมาในรูปแบบ json string 
โดยใช้ property ชื่อว่า num_total ที่เก็บจำนวนรายการทั้งหมด ส่งกลับมา
สามารถประยุกต์เพิ่มค่าอื่นๆ เพิ่มเติมได้
 
 

ตัวอย่างไฟล์ดึงข้อมูล

 

ไฟล์ mydemo.php

 
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">	
	<title>Document</title>
</head>
<body>


<style type="text/css">
#place_total{
	color:red;
	font-weight:bold;	
}
</style>


<br>
<div style="margin:auto;">
<!--// ใช้ แท็ก a กำนหด id สำหรับอ้างอิง และกำหนด data attrubute ชื่อ totalitem-->
<a data-totalitem="" id="place_total">0</a>
</div>



<script  src="https://code.jquery.com/jquery-3.1.1.min.js" ></script>
<script type="text/javascript">
$(function(){

///////////
	
	// ตัวแปรสำหรับเก็บค่าจำนวนล่าสุด	
	var curentTotal = null;
	var getNewItem = function(){
		 $.post("ajax_checkitem.php",function(response){
			 // ถ้ามีการส่งข้อมูลกลับมา
			 if(response && response.length){	 
			     // เก็บค่าเดิมจาก data attribute ชื่อ totalitem 
				 curentTotal = $("#place_total").data("totalitem");				 			 
				 if(curentTotal==""){ // ครั้งแรกจะเป็นค่าว่าง
				 		// กำหนด data attribute ชื่อ totalitem  ให้มีค่าเท่ากับค่าที่ได้จาก ajax
						$("#place_total").data('totalitem',''+response[0].num_total+'');
				 }else{
					 // ถ้าค่าที่ส่งกลับมา มากกว่าค่าเดิม
					 if(response[0].num_total > curentTotal){
						 alert("มีรายการมาใหม่");
						 // กำหนด data attribute ชื่อ totalitem  ให้มีค่าเท่ากับค่าที่ได้จาก ajax ค่าใหม่
						 $("#place_total").data('totalitem',''+response[0].num_total+'');
					 }
				 }
				 // แสดงข้อความเป้จำนวนรายการทั้งหมด
				 $("#place_total").text(response[0].num_total);	 
			 }
		 });
	};
	
	// เรียกใช้งานฟังก์ชั่นครั้งแรกเมื่อเข้ามาหน้านี้
	getNewItem();
	
	// กำหนดทำงานทุกๆ 7000 เท่ากับ 7 วินาที // 1000 = 1 วินาที
	setInterval(function(){
		getNewItem();
	},7000);
	
	
////////////// 
});
</script>

</body>
</html>
 
 
เนื้อหาข้างต้นเป็นแนวทางสำหรับประยุกต์แจ้งเตือนรายการใหม่อย่างง่ายด้วย ajax การกำหนดความถึ่ของเวลา
ถ้ากำหนดน้อย อาจทำให้ server ทำงานหนัก ควรกำหนดในเวลาที่เหมาะสมขึ้นกับว่าต้องการข้อมูลที่อัพเดท
มากน้อยเพียงใด เช่นถ้าต้องการข้อมูลอัพเดท ทุกๆ 30 วินาที ก็กำหนด 30000 แบบนี้เป็นต้น

 

Tags:: ajax เตือนรายการใหม่





URL สำหรับอ้างอิง