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

20 November 2016 เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdee

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

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

ดูแล้ว 14,481 ครั้ง

ตัวอย่างนี้เป็นแนวทาง สำหรับการแจ้งเตือนว่ามีการเพิ่มรายการใหม่เข้ามาในฐานข้อมูล

ในลักษณะเช่น เมื่อมีรายการสั่งซื้อเข้ามาใหม่ หรือเมื่อมีเพิ่มข้อมูลสินค้าใหม่ หรือเมื่อมีการสมัคร

สมาชิกเข้ามาใหม่ ประมาณนี้เป็นต้น หลักการคือ ใช้ 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 แบบนี้เป็นต้น

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