1. Internet Applications Spring 2008

2. Review Last week –PHP/JavaScript –Email Form –Questions?

3. This week Ajax/APIs Beginning work on our RSS reader Next week plan –Work on application or install Wordpress?

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

5. APIs Application Programming Interfaces Examples –Amazon web servicesAmazon –Google Books APIGoogle Books API Catalog Example Data formats –JSONJSON

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

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

8. DOM JavaScript Example #sample {background-color:#FFCC66; border:solid; width: 50px;} function moveMe (element, sTop, sLeft, eMove) { var myElement = document.getElementById(element); alert(myElement); myElement.style.position = 'absolute'; myElement.style.left = sLeft; myElement.style.top = sTop; for(var i=sTop; i<eMove; i++) { myElement.style.left = i+'px'; myElement.style.top = i+'px'; } function init() { moveMe("sample", 0, 0, 800 ); } window.onload = init; Here is some content

9. DOM Scripting Write functions that append actions to DOM elements maindiv = Document.getElementById(‘main’); maindiv.childNodes Maindiv.appendChild Maindiv.innerHTML = “stuff” Use the window.onload method to initialize page processing Script libraries –http://script.aculo.us/http://script.aculo.us/ –http://developer.yahoo.com/yui/http://developer.yahoo.com/yui/

10. Class Exercises Application overview –http://ils.unc.edu/~mitcheet/feedshttp://ils.unc.edu/~mitcheet/feeds Exercises –Today 1. A quick orientation 2. Create the HTML page framework 3. Create an XML configuration file and transformation function 4. Showing our feeds 5. Combine the two XSL files using named templates and parameters –Next Week 6. Migrating our feed-list to a relational database 7. Enabling feed subscription and un-subscription 8. Creating a PHP functions file –April 8th 9. Use JavaScript to control form display 10. Adding a Login function to our page –April 15th 11. Introducing Ajax

11. Exercise Framework Main Page (DOM, HTML, PHP) PHP Functions file (Program logic) MySQL Database (Data) XSL Stylesheet (Transformation) XML Data files (Data for ex. 1- 5) CSS Stylesheet (Layout) JavaScript file (Display, Ajax)

12. Skills needed for exercise 1-5 Ex 1, 2 - HTML, CSS Ex 3 – XML, XSL, PHPEx 3 Create an RSS file XSL transformation functions Create a PHP page to output them Ex 4 – Creating navigation linksEx 4 Dynamic query strings Ex 5 – Parameters for our XSL fileEx 5 More work with templates Creating arrays and accessing them in XSL

13. Next week Open source software Relational database overview –MySQL –SQL language Refresher on HTML forms PHP elements –Global variables

14. Skills needed for exercises 6 & 7 Ex 6 – MySQLEx 6 SQL syntax MySQL functions in PHP Ex 7 – Forms & form processingEx 7 Form coding and actions Global variables Page Logic

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

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

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

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

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

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

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