PHP Module Interact With MySQL

FOCUS:

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.

Diagram 1

The codespec that does this is available in phpmysqlinteract.html.Download the codespec of phpmysqlinteract.html.

When Age, Gender and Academics details are keyed in to the above form, and MySQL Query is clicked, the Javascript ajaxFunction() method is invoked.

The Javascript ajaxFunction() makes an AJAX request to Apache Web Server and ajaxmysql.php is executed.

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)

The callback() function processes the response received from the Web Server and updates the Javascript DOM

The Browser immediately recognizes that Javascript DOM values have changed and updates that section of the HTML webpage which is bound to the Javascript DOM values

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.

Diagram 2

The AJAX based Javascript code that populates the result of the SQL query in the HTML form without refreshing the web page is available in ajax.js

The codespec that does this is available in ajax.js. Download the codespec of ajax.js.