~/public_html/DemoWeb on your account at the server undcemcs02.und.edu .
In the DemoWeb folder, use Emacs (or any other text editor) to create the following three HTML files named:
index.html, the homepage,
Students.html, the data page, and
About.html, about the developer.
~/public_html/DemoWeb/index.html
|
|---|
<!DOCTYPE html>
<html>
<head>
<title>Our Class</title>
<link href="Site.css" rel="stylesheet">
</head>
<body>
<nav id="nav01"></nav>
<div id="main">
<h1>Welcome to Our Class</h1>
<h3>Web Site Main Ingredients:</h3>
<p>Pages (HTML)</p>
<p>Style Sheets (CSS)</p>
<p>Computer Code (JavaScript)</p>
<p>Live Data (Files and Databases)</p>
<footer id="foot01"></footer>
</div>
<script src="Script.js"></script>
</body>
</html>
|
~/public_html/DemoWeb/Students.html
|
|---|
<!DOCTYPE html>
<html>
<head>
<title>Our Class</title>
<link href="Site.css" rel="stylesheet">
</head>
<body>
<nav id="nav01"></nav>
<div id="main">
<h1>Students</h1>
<div id="id01"></div>
<footer id="foot01"></footer>
</div>
<script src="Script.js"></script>
<script>
var xmlhttp = new XMLHttpRequest( );
var url = "Students_MySQL.php";
xmlhttp.onreadystatechange = function( ) {
if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
myFunction( xmlhttp.responseText );
}
}
xmlhttp.open( "GET", url, true );
xmlhttp.send( );
function myFunction( response ) {
var arr = JSON.parse( response );
var i;
var out = "<table><tr><th>Name</th>" +
"<th>City</th>" +
"<th>Country</th></tr>";
for ( i = 0; i < arr.length; i++ ) {
out += "<tr><td>" + arr[i].Name +
"</td><td>" + arr[i].City +
"</td><td>" + arr[i].Country +
"</td></tr>";
}
out += "</table>"
document.getElementById( "id01" ).innerHTML = out;
}
</script>
</body>
</html>
|
~/public_html/DemoWeb/About.html
|
|---|
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<link href="Site.css" rel="stylesheet">
</head>
<body>
<nav id="nav01"></nav>
<div id="main">
<h1>About Us</h1>
<p>Department of Computer Science, UND</p>
<footer id="foot01"></footer>
</div>
<script src="Script.js"></script>
</body>
</html>
|