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 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() Initiates a browser object displayResponse() Retrieve data from server Waits for response Output to Page

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 connection function 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 Elements elementToDelete = document.getElementById("bodymain"); parentElement = elementToDelete.parentNode; parentElement.removeChild(elementToDelete); //Create a new body element bodyElement = document.createElement("body"); bodyElement.setAttribute("id", "bodymain"); parentElement.appendChild(bodyElement); //Create a Text Node newLink = 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 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

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 Example function 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]; }