Thursday 6 September 2012

Jquery Notification and PHP

Today we learn how to make notification with JQuery and PHP.  Your application must support full JQuery because we don't want any refresh page to see live notification. You need 4 file:

1. index.php     ---- first page with form
2. process.php ---- second page to process parameter
3. checkdata.php ----- third page to check every some interval time
4. jquery.min.js ---- jquery file latest

=======================================================================
Are your ready ? Ok, we start now..

Page 1: index.php

<html>
<head>
 <title>Notification Program</title>
<!-- include jquery latest file here -->
<script src="jquery-1.3.2.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){

        //trigger save button
        $("#save").click(function(){      
                    $.post("process.php",{   
                        phone: $("#phone").val()
                        }, function(data){             
                        alert(data);
                        });
         });

        //check data by interval time every 10000 milisecond (10 sec)
        var old_data = -1; //initial value if you database is empty
        setInterval(function(){
            $.get("checkdata.php",{},function(data){
                if(data > old_count){
                    alert('Database was updated : '+ data + ' records');
                    old_count = data;
                }
            });
        },10000);
       

});
</script>

</head>
<body>
<div id="myform">
    <label>Phone No:</label>
    <input type="text" id="phone" name="phone" />
    <input type="button" id="save" name="btnSave" value="Save" />
</div>

</body>

</html>
======================================================================
Page 2: process.php
This page used to process insert data to database.

<?php

$phone = $_POST['phone'];

//do your connection here

//do your insertion command here

?>

======================================================================
Page 3: checkdata.php

<?php

//this page will running by JQuery timer every 10 sec. Refer Page 1.
//do your connection here

$qry = "SELECT count(*) as total_record from yourtablename";
$result = mysql_query($qry);
$row = mysql_fetch_array($result);

echo $row['total_record'];

?>

=====================================================================
Save your project and run......good luck..




No comments:

Post a Comment