Internet Applications Spring 2008

Review Last week –PHP/JavaScript – Form –Questions?

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

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

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

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

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

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

Class Exercises Application overview – 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

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)

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

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

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

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

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