PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

20 November 2016 By
เตือนรายการใหม่ ajax

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ เตือนรายการใหม่ ajax



ตัวอย่างนี้เป็นแนวทาง สำหรับการแจ้งเตือนว่ามีการเพิ่มรายการใหม่เข้ามาในฐานข้อมูล
ในลักษณะเช่น เมื่อมีรายการสั่งซื้อเข้ามาใหม่ หรือเมื่อมีเพิ่มข้อมูลสินค้าใหม่ หรือเมื่อมีการสมัคร
สมาชิกเข้ามาใหม่ ประมาณนี้เป็นต้น หลักการคือ ใช้ 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: %s\n", $mysqli->connect_error);  
    exit();  
}  
if(!$mysqli->set_charset("utf8")) {  
    printf("Error loading character set utf8: %s\n", $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






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


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