This is slide 1 description. Go to Edit HTML and replace these sentences with your own words. This is a Blogger template by Lasantha - PremiumBloggerTemplates.com...
This is Slide 2 Title
This is slide 2 description. Go to Edit HTML and replace these sentences with your own words. This is a Blogger template by Lasantha - PremiumBloggerTemplates.com...
This is Slide 3 Title
This is slide 3 description. Go to Edit HTML and replace these sentences with your own words. This is a Blogger template by Lasantha - PremiumBloggerTemplates.com...
A shoutbox, saybox, tagboard, or chatterbox is a chat-like feature of some websites that allows people to quickly leave messages on the website, generally without any form of user registration.
Now that we know what we want to do, we will remember what we will use to achieve our purpose:
xHTML & CSS
PHP (We need a PHP server!)
MySQL (We will need a MySQL database too!)
Javascript & AJAX (via jQuery, of course!)
Don’t worry if you don’t know a lot about MySQL, We only need it to create a small table and to inser & recover data in a simply way via PHP.
Let’s face the step 1 guys!
Step 1: The Layout
First of all we will create the layout (as always, you know), it will be similar to the tabbed menu tutorial and it will have 2 main divisions:
Form (fields with the user and message to send)
Container division (contains the messages)
Loading division (as a part of the Container division, displays the loading animated gif… while messages are loading)
So now we have have seen the main divisions, take a look at the xHTML code:
yensdesign.com - Create a shoutbox using PHP and AJAX with jQuery
Shoutbox
Latest Messages
We are limiting the maxlength of both fields: nick(25) & message(255) because our shoutbox table will have these length limitations.
Nothing more to explain over here, let’s go to the CSS part.
Step 2: Adding some style with CSS
There is nothing special in this case for the css part, just remember you that we are reusing the CSS trick for the tab that we have used in the tabbed menu tutorial.
As you may noticed, we have an empty ul element with no li elements, that’s because we will load his content via AJAX
Let’s create the MySQL table.
Step 3: Creating shoutbox table in MySQL
As I told you, we will make use of a MySQL database to store our messages and then we will retrieve data via PHP. So we only need to create a simple table called shoutbox with these columns:
id (int primary key and with auto increment)
date (timestamp default CURRENT_TIMESTAMP)
user (varchar 25)
message (varchar 255)
So here you have the MySQL code that you must execute in your database (via phpmyadmin for example):
CREATE TABLE `shoutbox`( `id` int(5) NOT NULL auto_increment, `date` timestamp NOT NULL default CURRENT_TIMESTAMP, `user` varchar(25) NOT NULL default 'anonimous', `message` varchar(255) NOT NULL default '', PRIMARY KEY (`id`) );
So now that we have our layout ready and the MySQL table created let’s continue with the PHP part.
Step 4: Using PHP to insert & recover data from MySQL database
Last two steps (step 4 & step 5) are very important so guys pay attention! With jQuery.ajax() function from jQuery we can load a remote page using an HTTP request.
We will make use of the jQuery.ajax() function to make a POST request to a PHP script named shoutbox.php that will manage the insert / retrieve dataaction with a switch sentence. We will receive a XMLHttpRequestobject from $.ajax() function that will have a property called responseText. This property will give us the required information to display the shoutbox’s messages (in case of select action) or the confirmation (in case of insert action).
So before add the AJAX code we need to create our shoutbox.php that will manage all the requests from our future javascript file shoutbox.js. We will define some constants to the MySQL connection:
$res = @mysql_query("SELECT date, user, message FROM shoutbox ORDER BY date DESC LIMIT ".$num, $link);
if(!$res)
die("Error: ".mysql_error());
else
return$res;
}
function insertMessage($user, $message){
$query = sprintf("INSERT INTO shoutbox(user, message) VALUES('%s', '%s');", mysql_real_escape_string(strip_tags($user)), mysql_real_escape_string(strip_tags($message)));
$res = @mysql_query($query);
if(!$res)
die("Error: ".mysql_error());
else
return$res;
}
/************************ FUNCTIONS /************************/ function connect($db, $user, $password){ $link = @mysql_connect($db, $user, $password); if (!$link) die("Could not connect: ".mysql_error()); else{ $db = mysql_select_db(DB); if(!$db) die("Could not select database: ".mysql_error()); else return $link; } } function getContent($link, $num){ $res = @mysql_query("SELECT date, user, message FROM shoutbox ORDER BY date DESC LIMIT ".$num, $link); if(!$res) die("Error: ".mysql_error()); else return $res; } function insertMessage($user, $message){ $query = sprintf("INSERT INTO shoutbox(user, message) VALUES('%s', '%s');", mysql_real_escape_string(strip_tags($user)), mysql_real_escape_string(strip_tags($message))); $res = @mysql_query($query); if(!$res) die("Error: ".mysql_error()); else return $res; }
It’s almost finished guys. As we said, we will manage via switch sentence the POST requests from AJAX (from the future shoutbox.js file) so we will make useof the three previous functions to retrieve and insert data:
/****************************** MANAGE REQUESTS /******************************/ if(!$_POST['action']){ //We are redirecting people to our shoutbox page if they try to enter in our shoutbox.php header ("Location: index.html"); } else{ $link = connect(HOST, USER, PASSWORD); switch($_POST['action']){ case "update": $res = getContent($link, 20); while($row = mysql_fetch_array($res)){ $result .= "
Just comment that we are avoiding the direct access to shoutbox.php by checking the post variable action that we send in each request to shoutbox.phpfrom javascript code (from shoutbox.js remember).
Let’s go to the final step… the AJAX part!
Step 5: Adding AJAX and some magic with jQuery
So now we have done the layout with the CSS, the shoutbox table in a MySQL database and the PHP script to insert / retrieve data.
We only need to know how to make POST requests from our shoutbox.js javascript file to our soutbox.php PHP script file.
All the following code will be in a javascript file named shoutbox.js and in the $(document).ready of jQuery. First of all we will define some variables to save some references to jQuery selectors:
//check if all fields are filled function checkForm(){ if(inputUser.attr("value") && inputMessage.attr("value")) return true; else return false; }
As we said in the Step 1, we will load the messages of our shoutbox table via AJAX from the first instance, so let’s create a function to retrieve this data:
function updateShoutbox(){ //just for the fade effect messageList.hide(); loading.fadeIn(); //send the post to shoutbox.php $.ajax({ type: "POST", url: "shoutbox.php", data: "action=update", complete: function(data){ loading.fadeOut(); messageList.html(data.responseText); messageList.fadeIn(2000); } }); }
What’s happening here? We are showing the loading animated gif while we are retrieving data from shoutbox table via POST request to our shoutbox.php.
With the data parameter of $.ajax() function we can send post variables (action = update), in this case we are sending $_POST['action'] = “update”, so shoutbox.php can manage the specific action in the switch sentence that we have made before.
Finally when the request is completed, we hide the loading animated gif, load the new data in our xHTML layout and show it.
So adding a call to this function, updateShoutbox() in the ready event of jQuery we can load the data in a first instance:
//Load for the first time the shoutbox data updateShoutbox();
Finally we need to manage the submit event to insert user’s messages in our shoutbox table and then refresh the content in the shoutbox (with the updateShoutbox() function, you know):
//we prevent the refresh of the page after submitting the form
returnfalse;
});
//on submit event $("#form").submit(function(){ if(checkForm()){ var nick = inputUser.attr("value"); var message = inputMessage.attr("value"); //we deactivate submit button while sending $("#send").attr({ disabled:true, value:"Sending..." }); $("#send").blur(); //send the post to shoutbox.php $.ajax({ type: "POST", url: "shoutbox.php", data: "action=insert&nick=" + nick + "&message=" + message, complete: function(data){ messageList.html(data.responseText); updateShoutbox(); //reactivate the send button $("#send").attr({ disabled:false, value:"Shout it!" }); } }); } else alert("Please fill all fields!"); //we prevent the refresh of the page after submitting the form return false; });
As you can see we are making use of some previously defined functions like checkForm() to check if all fields are filled and updateShoutbox() to refresh the shoutbox content. In addition, we have disabled the submit button of our form till the process isn’t completed.
In this case we are sending more information in the data parameterof the $.ajax() function: nick and message, it will allow us to save in our shoutbox tablevia php the values of $_POST['nick'] and $_POST['message'].
It’s important to know that if we have more than one variable in data parameter, we need to separate them by using the “&” symbol, like in GET parameters.
Hard Disk ကို Format ခ်စြာ မွာ low level format နန္႕ high level format ဆိုျပီးေက နွစ္မ်ိဳးဟိေရ။ Low Level Format ဆိုစြာက windows တင္ဖုိ႕ခါ Format ခ်စြာမ်ိဳးကို ေခၚျပီးေက။ High Level Format ဆိုစြာက စက္ရံုကနီ ထုတ္လုိက္ခါ Format ခ်စြာမ်ိဳးကို ေခၚပါေရ။
Hard Disk တစ္လံုး ပ်က္ခါနီ ပဲျဖိဳက္ျဖိဳက္ Bad Sector ေၾကာင္႕ ပဲ ျဖိဳက္ျဖိဳက္ High Level Format ခ်လုိ႕ မရဗ်ယ္ဆိုေက ။ ကြ်န္ေတာ္ ရုိ႕ low level format tool တိကို သံုးရဖုိ႕ပါဗ်ယ္။
ေအာက္မွာ ျပထားစြာကေတာ႕ Low level Format လုပ္ဖုိ႕ Tool (software) တစ္ခုျဖိဳက္ပါေရ။ ီDownload
