Smart Auto Refresh

(Page 1 of 2 )

In this tutorial Hermawan will teach you how to create an auto refreshing page. The trick he will show you is how to have the page only refresh when there is new data to display.

By : Hermawan Haryanto

Have you ever thought about how to make a website able to reload itself whenever the content inside the page is updated through another application or another page? Well I have.

A few months ago I had a project from my employer to make a report, which would be displayed on the director's screen. The report had to include the progress of sales in real time. The cashier would enter the sales data whenever a product was sold. Sales data would be entered into a database, then the report page on the director's screen needed to refresh when the data was updated. When no sales were made or the data was not updated the report page would not refresh.

In this article, I will show you how to build a Smart Auto Refreshing report page.

Shoutbox

Who in this cyber world doesn't know what a shoutbox is? Well even though I know that many of you understand what a shoutbox is, I'll explain a little about it here.

A shoutbox is a small application which works like a guestbook for a website, where a visitor can leave a message for the website owners. The shoutbox also works like a chat room, in that all visitors can chat on a web page using the shoutbox. That's why they call it Shout!, because they can shout at each other in that little box.

There are many shoutbox providers these days. Some are free and some are commercial. They have many features in the shoutboxes they provide, like IP banning, user accounts, and of course the Smart Auto Refresh that we will learn today.

The Idea

Before we jump into the code, I want to teach you the algorithm that makes the system do what we want. The idea is simple. We will use a text file, named sar.pid, to track updates. The timestamp of this file will be updated whenever the database content is modified. The shoutbox will read the timestamp of sar.pid and compare it with the existing cookies in the browser. If the timestamp differs, the page will be reloaded automatically using javascript. Easy huh?

Preparation

First, the shoutbox will need a table to store the visitor's messages. Here is the schema of the table that we are going to use. You can add your own additional fields after you understand the use of each field. Open your phpMyAdmin and run this SQL in the SQL execution box.

CREATE TABLE `chat` (   `id` int(10) unsigned NOT NULL auto_increment,   `name` varchar(255) NOT NULL default '',   `message` varchar(255) NOT NULL default '',   `msgdate` datetime NOT NULL default '0000-00-00 00:00:00',   PRIMARY KEY  (`id`) ) TYPE=MyISAM AUTO_INCREMENT=1;

Next: Coding Time >>
 

More Display Tutorials Articles
More By Codewalkers

Comments On: Smart Auto Refresh

· Hi man, it's a nice tutorial, but I believe you could have written it much simpler!...    · Hi, I was wondering, where u able to make this cross-browser compatible. I used your...    · This is really a smart idea that will do the job, but I have two things to say about...    · Regarless of what I do. I can't get this to work on IE. Does anyone have any...    · After a lot of tries, I could make it work in IE.In the "Internet...    · I got it to work fine first time in IE.Checked the temp internet file settings...    · I seem to be having the same problem as other ppl as well, i have this script all...    · I seem to be having the same problem as other ppl as well, i have this script all...    · Hi all,Just to say do not use this script, the server load is just to much as my...   >>> Post your comment now!