1 / 25

Internet Applications

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

inga-dixon
Download Presentation

Internet Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Internet Applications Spring 2008

  2. Review • Last week • MySQL • Questions?

  3. This week • Ajax • Wrap-up coverage for exercises • Class time to work on projects / exercises

  4. Ajax • Application model diagram • Design considerations • Graceful degradation • Application fragmentation • Usability • Components • JavaScript • HTTP request object

  5. 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’);

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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;

  11. Ajax Function Framework

  12. getHttpObject() • Responsible for creating XMLHttpRequest function getHTTPObject() { varxhr = false; if (window.XMLHttpRequest) { xhr= new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr= new ActiveXObject("Microsoft.XMLHTTP"); } return xhr; }

  13. 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); } }

  14. getSomething() Responsible for monitoring connection function displayResponse(request) { if (request.readyState == 4) { if(request.status== 200 || request.status == 304) { vardetails = document.getElementById("bodymain"); details.innerHTML= request.responseText; } else { alert(request.status); } } }

  15. 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); } }

  16. 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);

  17. 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

  18. 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

  19. 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

  20. Next week • Final Projects due • Quick presentation of class projects (1-2 min per person) • Class wrap-up & evaluation

  21. MySQL • Open Source Relational Database • http://mysql.com • At SILS • pearl.ils.unc.edu • Relational database features • Tables, Indexes, Queries • SQL (Structured Query Language)

  22. 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

  23. 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']

  24. 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);

  25. 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]; } }

More Related