Internet Applications

Spring 2008

Review

• Last week– MySQL– Questions?

This week

• Ajax• Wrap-up coverage for exercises• Class time to work on projects /

exercises

Ajax

• Application model diagram• Design considerations

– Graceful degradation– Application fragmentation– Usability

• Components– JavaScript– HTTP request object

JavaScript • Syntax

– Function() {};– /* comment */

• Variable and function declarations– var newvariable = value;– function functionName() {content;}

• Control Structures– If (variable == value) { do stuff; }– For (var i=0; i<10; i++) { do stuff;}

• object.method.value– document.write– document.getElementById(‘navigation’);

DOM JavaScript

• An approach to writing JavaScript that appends functions to elements of the HTML document

• Reference• http://www.w3schools.com/htmldom/default.asp

• getElementById• getElementsByTagName• parentNode• childNodes• nodeValue• firstChild• previousSibling

Ajax Basics

• Combination of JavaScript, browser functions, and data– Asynchronous JavaScript and XML

• Reproduces the GET/POST functionality of our forms

• Works with any data stream• Can only request data from originating

server

Ajax GET/POST

• GET– Retrieves a document from the server and

allows client side document processing• POST

– Sends a querystring to server and enables complex data retrieval

responseText, responseXML

• Two forms of from xmlHTTPRequest • responseText

– Returns any text (HTML, JSON, etc) which can be manipulated by JavaScript after processing

• responseXML– Returns XML data that can be manipulated

directly

Ajax Exercise

• Create a simple HTML page that contains no real content.

• Use a link to retrieve a document from the server and display it in our browser

• Skills– Utilizes Ajax GET method– Utilizes some DOM elements

• document.getElementById("bodymain");• details.innerHTML = request.responseText;

Ajax Function Framework

getSomething()

Initiate Connection

getHttpObject()

• Responsible for creating XMLHttpRequest

function getHTTPObject() {

var xhr = false;

if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

} else if (window.ActiveXObject) {

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

return xhr;

}

getSomething()

• Responsible for initiating a connection

function getSomething(file) {

var request = getHTTPObject();

if (request) {

request.onreadystatechange = function() {

displayResponse(request);

};

request.open("GET", file, true)

request.send(null);

}

}

getSomething()

Responsible for monitoring connectionfunction displayResponse(request) {

if (request.readyState == 4) {

if(request.status == 200 || request.status == 304) {

var details = document.getElementById("bodymain");

details.innerHTML = request.responseText;

} else {

alert(request.status);

}

}

}

A quick POST example

function updateFeed(file, query) {

var request = getHTTPObject();

if (request) {

request.onreadystatechange = function() {

displayResponse(request);

};

request.open ("POST", file, true);

request.setRequestHeader ("Content-Type",

"application/x-www-form-urlencoded");

request.send(query);

}

}

Element manipulation with DOM

• //Delete ElementselementToDelete = document.getElementById("bodymain");

parentElement = elementToDelete.parentNode;

parentElement.removeChild(elementToDelete);

• //Create a new body elementbodyElement = document.createElement("body");

bodyElement.setAttribute("id", "bodymain");

parentElement.appendChild(bodyElement);

• //Create a Text NodenewLink = document.createElement("a");

newLink.setAttribute("href", "#");

newLink.setAttribute("onclick", "getSomething('./htmlfragment.html')");

linkText = document.createTextNode("Get some content");

newLink.appendChild(linkText);

newBody.appendChild(newLink);

Putting it all together

• Part I– Create a basic HTML page– Download the HTML fragment– Create your JavaScript functions– Insert a link to initiate the Ajax Request

• Part II– Create a new JavaScript function that will

use the DOM– Modify the Ajax Request to include a ‘delete

content’ link

Skills needed for exercises 8 & 9

• Ex 8 – External PHP functions file• PHP require() function• File management

• Ex 9 – Javascript• Basics of JavaScript functions• DOM scripting

Skills needed for exercises 10 & 11

• Ex 10 – Login / Logoff functions• More on HTML forms & PHP• Writing and using Cookies

• Ex 11 - Ajax• Ajax components• Advanced JavaScript functions

Next week

• Final Projects due• Quick presentation of class projects (1-2

min per person)• Class wrap-up & evaluation

MySQL

• Open Source Relational Database• http://mysql.com• At SILS

– pearl.ils.unc.edu• Relational database features

• Tables, Indexes, Queries• SQL (Structured Query Language)

SQL Skills

• SQL – Structured query language– Uses a syntax with words like (select,

where, insert, delete, from) to create logical statements• Select column from tablename where limit =

‘value’;• Insert into table (column, column) values (value

1, value 2);

– A good reference• http://www.w3schools.com/sql/sql_quickref.asp

SQL Examples

• SELECT statements• SELECT * from feeds where username = 'mitcheet'", • SELECT * from feeds where id = ".$_REQUEST['feed']

• INSERT statements• INSERT INTO feeds (username, feedname, feedURL)

values ('".$_REQUEST['username']."', '".$_REQUEST['feedName']."', '".$_REQUEST['feedUrl']."')";

• DELETE statements• DELETE from feeds where id = ".$_REQUEST['feedId']

MySQL functions in PHP• Create a connection to the database

• $connection = mysql_connect($dbserver, $username, $pass);

• Select a database• mysql_select_db($database, $connection);

• Run a query• $result = mysql_query("SELECT * from feeds where username =

'mitcheet'", $connection);

• Get the results of the query as an array• while ($row = mysql_fetch_array($result, MYSQL_NUM)) {}

• Close the connection• mysql_close($connection);

MySQL Examplefunction showFeed () {

$connection = mysql_connect ("pearl.ils.unc.edu", "inls572_spring08",

"yreuq572");

mysql_select_db("inls572_spring08", $connection);

$result = mysql_query("SELECT * from feeds where id = ".$_REQUEST['feed'], $connection);

while ($row = mysql_fetch_array($result, MYSQL_NUM)){

echo $row[3];}

}