|
PCHT Leeds - Websites, Databases, Spreadsheets & Training Customised solutions and software training for individuals and small businesses. |
javascript database interaction (page 4 of 6) |
|
Clicking the Get Event button should, we hope, produce a response that will be populated on the web page. Of course we must ensure our span tag is on the page, and although it is currently invisible, the span tag is coded here >< so that is where we want the data to appear. We must therefore tell the javascript function to make the span tag visible. The code to make the span tag visible is simple, amend the javascript function to include this line:-
prior to the line
to complete the javascript function. We need to remove the alert as well as it has done its job.
Using the form above, change the date, and click the Get Event button, and notice that the sentence in the php is echo'd back into the >< area of the paragraph above, which is where the span tag is, now in a visible state. Each time we change the day in our form we change the value being echo'd back. We have now proved that the php file has accepted the variable q. The significance of this should not be lost. We are interacting with the php file on the server, using javascript, a client side scripting language. Also, given that we have a php file that accepts a variable based on the user's choice (of day), we can now build up the php file so it can use the variable value to interact with a database, that is also on the server side. This breakthrough (AJAX) has had an enormous effect on the speed at which webpages load on web browsers over the internet. Instead of loading an entire new page, only a small section of the page needs to be changed. If you are unable to get the php file to echo back the simple line that includes the variable, then there is no point proceeding until you can do this. If you get a web page saying that the website is down, which appears instead of the line you expected, but inside the >< tag, then make sure that the path to the php file is definitely Ok, we can finish this example by adding database code to allow the php page to interact with the database table we looked at earlier.
Remember that you should build up the php file in stages and test at each stage of the 'build'. Always take this approach. Anything that comes back from the php file, will appear at the top of the page in the >< span tag. We are not changing anything except the php file. Here's the file as it stands. The dot (.) is the concatenator in php, which adds strings together: -
The process is to connect to the database. Then use a SQL statement to extract some information from the database, before echo'ing the result back to the webpage. The way to test the php page, is to move the echo statement below the code as you add it. If the line gets echo'd back then you can be pretty sure the code before it is ok. And if not, well you must persevere until you do!! The username, password and database (variables) must be the same as those that you use when opening the MySQL database when you access the database on your computer, assuming you are testing using Internet Information Services, or when opening the MySQL database on your ISP's web server. You can therefore test these variables by opening up your MySQL database. Remember to close the database connection!!!
Test the php script is ok, by using the form above, and if all is well the line will be echo'd in the span tag, as before. If not, you must fix the problem now. The error may be the database variables, check those carefully. Here is the php script with the SQL code, which is querying the database... The final piece of code is where we echo back the query, rather than the variable. Here is the final web form, which is accessing the modified script file shown above it.
The result will be displayed in a new span tag here >< Note that the response is almost instantaneous, and that the page has not bee refreshed in the browser. This is why AJAX is important in web development.
|
|
Back | Next |
Examples |
Home - about us- our services - news & events - contact us © Copyright PC Home Tuition Ltd. All Rights Reserved. Design by: Template Kingdom.com |