PHP Module Interact With MySQL
To build an HTML query form, pick up user information, based on this user information pick up information from a MySQL database table and display the information retrieved on the HTML query form webpage without re-loading the webpage.
Information is retrieved up from a MySQL database table named ajaxmysql on click of MySQL Query as shown in diagram 1.
Let’s build a simple HTML query form, based user interface that will capture the Age, Gender and Academics of an individual as displayed in diagram 1.
The codespec that does this is available in phpmysqlinteract.html.Download the codespec of phpmysqlinteract.html.
The codespec that does this is available in ajaxmysql.php. Download the codespec of ajaxmysql.php.
ajaxmysql.php in turn makes a call to the MySQL table ajaxmysql and retrieves appropriate records from within the table based on the data captured by the form.
The Ajax Process Workflow Synopsis:
- The user clicks the MySQL Query
- An XMLHttpRequest object is created and configured
- The XMLHttpRequest object makes a call to the Apache Web Server to run ajaxmysql.php
- ajaxmysql.php accesses the MySQL table ajaxmysql
- The XMLHttpRequest object invokes the callback() function (The listener)
- This immediately displays the information returned in the Browser which catches the user's attention. The entire HTML webpage is not refreshed
After the user clicks MySQL Query, the data displayed on the same web page carrying the HTML form is based on the following SQL Select query:
Query: SELECT * FROM ajaxmysql WHERE ae_age <= ‘27’ && ae_gender = ‘male’ && ae_acads = ‘MCOM’
This query is deliberately chosen so that multiple records are returned from the MySQL table ajaxmysql.
When the query result set is written in to the webpage that currently displays the HTML form, it will immediately catch the attention of the viewer.
This web page is not refreshed. This is AJAX at work. The output is as shown in diagram 2.
The codespec that does this is available in ajax.js. Download the codespec of ajax.js.