View
217
Download
0
Category
Preview:
Citation preview
Internet Applications
Spring 2008
Review
• Last week– PHP/JavaScript– Email 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 services– Google Books API
• Catalog Example• Data formats
– JSON
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
DOM JavaScript Example<html xmlns="http://www.w3.org/1999/xhtml"><head>
<style>#sample {background-color:#FFCC66; border:solid; width: 50px;}
</style><script language="javascript">
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;
</script></head><body>
<div id="sample">Here is some content</div></body></html>
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://developer.yahoo.com/yui/
Class Exercises• Application overview
– http://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
Exercise Framework
Main Page(DOM, HTML, PHP)
PHP Functions file (Program logic)
MySQL Database(Data)
CSS Stylesheet(Layout)
XSL Stylesheet(Transformation)
JavaScript file(Display, Ajax)
XML Data files(Data for ex. 1-5)
Skills needed for exercise 1-5
• Ex 1, 2 - HTML, CSS• Ex 3 – XML, XSL, PHP
• Create an RSS file• XSL transformation functions• Create a PHP page to output them
• Ex 4 – Creating navigation links• Dynamic query strings
• Ex 5 – Parameters for our XSL file• 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 – MySQL• SQL syntax• MySQL functions in PHP
• Ex 7 – Forms & form processing• Form coding and actions• Global variables• Page Logic
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];}
}
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
Recommended