Guide to PHP and MySQL (University at Buffalo Version)

Chapter 15: PHP, JavaScript & AJAX

AJAX

Asynchronous JavaScript And XML (AJAX) provides a way to update a web page with data from a back-end server without reloading that web page.

HTML and JavaScript

You need to add JavaScript code to your HTML code that creates an XMLHttpRequest() which is sent to the back-end server and also handles the information returned from the server.

<!doctype html>
<html>
  <head>
    <title>AJAX Months</title>
  <script>
  var xmlhttp;
  function GetMonth(DataString) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = HandleData;
    xmlhttp.open("GET","includes/months.php? src=" + DataString, true);
    xmlhttp.send();
  }

  function HandleData() {
    if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {   
      document.getElementById('hint').innerHTML = xmlhttp.responseText;
    }
  }
  </script>
  <head>
  <body>
    Month: <input id="UserInput" type="text" onkeyup="GetMonth(getElementById('UserInput').value);" />
    <div id="hint"></div>
  </body>
</html>

Figure 15-1: ajax_months.html Code

PHP

Next, yYou need to create the PHP code to handle XMLHttpRequest() and send back the data from the server to the web page.

<?php
/**
 * author: Jim Gerland
 * Buffalo State College
 * Computer Information Systems
 */
$monthsArray = array( "01" => "January", "02" => "February", "03" => "March",
                      "04" => "April", "05" => "May", "06" => "June",
                      "07" => "Jul y", "08" => "August", "09" => "September",
                      "10" => "October", "11" => "November", "12" => "December");
$monthReturn = "";
if (isset($_GET['src'])) {
  $monthFind = $_GET['src'];
  foreach ($monthsArray as $m => $mName) {
    if (stripos($mName, $monthFind) === 0) {
      $monthReturn .= "$mName<br />\n";
    }
  }
}
echo($monthReturn);
?>

Figure 15-2: months.php Code

Month:

Figure 15-3: ajax_months.html Output

Task - Create a PHP Web Site

For this task you will create a well-designed electronic system web site demonstrating your understanding of good design principles and appropriate PHP and MySQL usage. You may choose the type of system (retail, business-to-business, non-profit fund raising, auction, classified ads, etc.).

This site should contain (at a minimum):
1. a home page (about this site),
2. a login page (reguires a back-end registraton system) with:
  1. a register page
  2. a forgot password page
3. a database-driven table page (inventory or classified offerings for example),
4. back-end catalog and user maintenance systems accessible only by a user designated as an 'admin',
5. a page displaying an order form along with an appropriate "success/thanks" page,
6. a back-end set of tables to store shopping cart and orders information,
7. a "Welcome Back" page that displays a user's orders and shopping cart (if one exists) after the user logs in,
8. a final "Contact Us" form page.
Use well-designed navigation so that the user can get to any page from any other page in this site. You may want to create a separate nav.php file and use the php_include_once to use the same navigation throughout the site.
Modify your JavaScript in your index.php file that uses an array of the Assignments for this course to display an ordered list of these assignments to convert the entry for this assignment to a web link that allows me download and save your web site pages and your, nav.php, vars.php, functions.php, functions.js , and any other files so I can download, save, and grade your work.

You will modify the PHP function for this item in your index.php page to add a link to your web site files that allows me to view your work.

You *MUST* use the W3C Unicorn Validator to validate your HTML5/CSS3 code.