Website Construction Summary (Cont.)
  1. Creating Web Pages Using HTML
    2.  HTML stands for Hyper Text Markup Language, which is a markup language for describing web pages. Create a new folder such as 
       ~/public_html/demo/AJAX/
    on your account at the server undcemcs02.und.edu, where the tilde slash (~/) is the beginning of a path to a file or directory below the user’s home directory. In the AJAX/ folder, use Emacs (or any other text editor) to create the following three HTML files named:

    • index.html, the homepage,
    • Student.html, the data page, and
    • About.html, about the developer.

    ~/public_html/demo/AJAX/index.html
    view source
    print?
    01<!DOCTYPE html>
    02<html>
    03 <head>
    04  <title>Our Class</title>
    05  <link href="Site.css" rel="stylesheet">
    06 </head>
    07 
    08 <body>
    09  <nav id="nav01"></nav>
    10  <div id="main">
    11   <h1>Welcome to Our Class</h1>
    12   <h3>Web Site Main Ingredients:</h3>
    13   <p>Pages (HTML)</p>
    14   <p>Style Sheets (CSS)</p>
    15   <p>Computer Code (JavaScript)</p>
    16   <p>Live Data (Files and Databases)</p>
    17   <footer id="foot01"></footer>
    18  </div>
    19  <script src="Script.js"></script>
    20 </body>
    21</html>
    ~/public_html/demo/AJAX/Student.html
    view source
    print?
    01<!DOCTYPE html>
    02<html>
    03 <head>
    04  <title>Our Class</title>
    05  <link href="Site.css" rel="stylesheet">
    06 </head>
    07 
    08 <body>
    09  <nav id="nav01"></nav>
    10  <div id="main">
    11   <h1>Students</h1>
    12   <div id="id01"></div>
    13   <footer id="foot01"></footer>
    14  </div>
    15  <script src="Script.js"></script>
    16  <script>
    17   var xmlhttp = new XMLHttpRequest( );
    18   var url = "StudentMySQL.php";
    19   xmlhttp.onreadystatechange = function( ) {
    20    if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
    21     myFunction( xmlhttp.responseText );
    22    }
    23   }
    24   xmlhttp.open( "GET", url, true );
    25   xmlhttp.send( );
    26 
    27   function myFunction( response ) {
    28    var arr = JSON.parse( response );
    29    var i;
    30    var out  = "<table><tr><th>Name</th>" +
    31               "<th>City</th>" +
    32               "<th>Country</th></tr>";
    33    for ( i = 0; i < arr.length; i++ ) {
    34     out += "<tr><td>"  + arr[i].Name +
    35            "</td><td>" + arr[i].City +
    36            "</td><td>" + arr[i].Country +
    37            "</td></tr>";
    38    }
    39    out += "</table>"
    40    document.getElementById( "id01" ).innerHTML = out;
    41   }
    42  </script>
    43 </body>
    44</html>
    ~/public_html/demo/AJAX/About.html
    view source
    print?
    01<!DOCTYPE html>
    02<html>
    03 <head>
    04  <title>About</title>
    05  <link href="Site.css" rel="stylesheet">
    06 </head>
    07 
    08 <body>
    09  <nav id="nav01"></nav>
    10  <div id="main">
    11   <h1>About Us</h1>
    12   <p>Department of Computer Science, UND</p>
    13   <footer id="foot01"></footer>
    14  </div>
    15  <script src="Script.js"></script>
    16 </body>
    17</html>




      Good things come to those who wait.