inls572_class13_ajax
Download
Report
Transcript inls572_class13_ajax
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)
CSS Stylesheet
(Layout)
JavaScript file
(Display, Ajax)
PHP Functions file
(Program logic)
MySQL Database
(Data)
XSL Stylesheet
(Transformation)
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 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