Contextual Ads
More PHP Resources
Advertisement
In this tutorial we will create a web page that extracts data from a MySQL database without having to refresh the page. That is right... the web page will not be refreshed and the information will show up in the existing web page. -- Impressed?
Before you start reading the tutorial, I recommend that you take a look at this script in action. This will give you an idea of what the end product will look like.
For this tutorial we will be creating two files:
mysql_insert.html (YES, HTML. This is the page that users will see)
mysql_insert.php (This file will do all the hard work and will return results to mysql_insert.html)
The Flow:
This approach makes use of JavaScript and updates elements in the parent page from a child page. You can pass variables
to the child file and process information using PHP. Core concept for this tutorial was drawn from a tutorial posted on devshed.com. This tutorial takes the same approach but it also shows how you can add/query data from mysql on the fly.
This tutorial does not discuss the basics. If this is your first time creating a page that updates without having to reload, read this tutorial.
Lets Get Down and Dirty:
In order to create this functionality on your web-server, you will have to create a table in your mysql database. I created a table and called it php_js. This table will store the user information. Following is the code to create a table:
CREATE TABLE `php_js` (
`srno` INT NOT NULL AUTO_INCREMENT ,
`u_name` VARCHAR( 50 ) NOT NULL ,
`u_email` VARCHAR( 55 ) NOT NULL ,
PRIMARY KEY ( `srno` )
); |
The three columns that in the table are "srno", "u_name" and "u_email". Names will be stored in the u_name column and email addresses will be stored in the u_email column.
Now lets look at the code in the HTML and PHP files. Here is the code to the html file:
mysql_insert.html
In the HTML file we have defined two functions (attach_file and show_hint). The attach_file() function calls up another file and appends the information to the parent (this) page. The show_status() function updates the text in the status box. When the page loads, the default text is set to "Ready..." but once the user presses the button to submit the information, the function is called again and the text is set to "Busy...". The text in the status box will read "Busy..." until all the data has been processed and displayed in the parent window. This is a pretty nice tool and lets you know when the system is ready. You can further enhance the application and maybe display an image while the information is being loaded.
<span id="from_mysql">
</span> is the most important field in the html file. The table that you see (with user names and email addresses) is constructed within this span field. If you change the name (id) of this span, be sure to change the name in the mysql_insert.php file.
When the child window is called, parameters from input fields are passed along. You might have noticed that in the line that reads
onClick="javascript:attach_file( 'mysql_insert.php?u_name=' + u_name.value + '&u_email=' + u_email.value) ; show_status('Busy');
Our other file is called mysql_insert.php and this is the file that adds and queries the database. All the information is stored in a variable and then javascript is used to update the information on parent window.
mysql_insert.php
We start off with PHP tags and define a header as
header( 'Content-Type: text/javascript' );
This tells the browser to treat this file as a text file with javascripts. However within the file we have PHP functions that process in the information.
Next I have made a connection to the database. Be sure to change the Database Name and define your username and password.
The IF block is executed if the user has typed in a Name and a valid Email in the input fields. If these values were entered, the information is stored in the database.
Next, all the information from the table is queried and stored in a variable called $output. Once the information is stored, javascript's getElementById method is used to update the <SPAN> tag that we created in the Parent window.
This is in no way a secure script. You will have to modify the script to make it secure.
If you have any questions about this tutorial, please contact our team at http://www.nabeelakhtar.net/contact/ or
for discussion go to http://forum.nabeelakhtar.net
More tutorials available at http://www.nabeelakhtar.net/tutorials/
Live Online Support available at http://www.nabeelakhtar.net |
Tutorials
Code
Knowledge Base
News
Forums
Pictures
Videos
Bargains
Icons
Newsgroups
PageRank™ Checker
Alexa Rank Checker
Domain-Name Lookup
(Rated 4.1 with 23 votes) 
Digg It!
Del.icio.us
Reddit
StumbleIt
Newsvine
Furl
BlinkList
Rate this tutorial
Current Comments
Bargains RSS Feed
View More Magazines
View More Downloads
