Dynamic Sites and Templates; Other Web...

Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html

1 of 61 4/16/2008 10:26 PM

Table of Contents | All Slides | Link List | CSCI E-12

Dynamic Sites and Templates & Other Web Content

April 16, 2008

Harvard University Division of Continuing Education

Extension School

Course Web Site: http://cscie12.dce.harvard.edu/

Copyright 1998-2008 David P. Heitmeyer

Instructor email: [email protected] Course staff email: [email protected]


2 of 61 4/16/2008 10:26 PM

Dynamically Created Documents

Content is created by a program at the time of the requestContent created by a program and published statically

Web Development Languages & Frameworks

Part of Apache:Apache SSI and XSSI

Non-JavaPHP, CakePHP (MVC), Drupal (CMS), Joomla (CMS)Perl: Catalyst (MVC), Jifty, Template Toolkit, ... Ruby: Ruby (MVC)Python: Django (MVC), Zope, Plone (CMS)ColdFusion

JavaJSP/Servlets, Apache Struts (MVC), JavaServer Faces (JSF)

MicrosoftActive Server Pages, ASP.NET

Embedded Objects / Browser PluginsMicrosoft SilverlightAdobe SWF - Flash and FlexJava Applets


3 of 61 4/16/2008 10:26 PM

Development Structure

program that outputs Web content programs with XHTML embedded

Web content that has embedded programming XHTML with programs embedded

Separation of Concerns (SOC) MVC, Model-View-Controller.


4 of 61 4/16/2008 10:26 PM

"XHTML within a Program" Examples

Markup or content is embedded within a program.

first.cgi

first.cgi

second.cgi

second.cgi

Here the "CGI.pm" Perl module creates tags with subroutine calls.

Perl code: h1("Hello, World!")Becomes: <h1>Hello World!</h1>

view plain print ?

#!/usr/local/bin/perl 1.print "Content-type: text/html\n\n"; 2.print "<html><body><h1>Hello, World!</h1></body></html>"; 3.

view plain print ?

#!/usr/local/bin/perl 1.use CGI qw(:all); # CGI.pm module is very useful! 2.print 3. header, 4. start_html, 5. h1("Hello, World!"), 6. end_html; 7.


5 of 61 4/16/2008 10:26 PM

CGI Examples: third.cgi

third.cgithird.cgi?name=David%20Heitmeyer

view plain print ?

#!/usr/local/bin/perl 1.use CGI qw(:all); # CGI.pm module is very useful! 2.my $q = new CGI; # create a new CGI object 3.my $name = $q->param('name'); 4.print header, 5. start_html, 6. h1("Hello, $name!"), 7. end_html; 8.


6 of 61 4/16/2008 10:26 PM

CGI Examples: fourth.cgi

Without a "name", present the user a form. With a name, provide a greeting.

fourth.cgi

fourth.cgi?name=David%20Heitmeyer

view plain print ?

#!/usr/local/bin/perl 1.use CGI qw(:all); # CGI.pm module is very useful! 2.my $q = new CGI; # create a new CGI object 3.my $name = $q->param('name'); 4.if ($name) { 5. print header, 6. start_html, 7. h1("Hello, $name!"), 8. end_html; 9.} else { 10. print header, 11. h1("Enter name:"), 12. start_form, 13. textfield(-name=>"name"), 14. br, 15. submit, 16. br, 17. reset, 18. end_form, 19. end_html; 20.} 21. 22.


7 of 61 4/16/2008 10:26 PM

Simple Servlet Example

view plain print ?

package simple; 1.import java.io.*; 2.import javax.servlet.*; 3.import javax.servlet.http.*; 4./** Very simplistic servlet. 5. */ 6.public class HelloWorld extends HttpServlet { 7. public void doGet(HttpServletRequest request, 8. HttpServletResponse response) 9. throws ServletException, IOException { 10. PrintWriter out = response.getWriter(); 11. out.println("<html>"); 12. out.println("<body>"); 13. out.println("<h1>"); 14. out.println("hello"); 15. out.println("</h1>"); 16. out.println("</body>"); 17. out.println("</html>"); 18. } 19.} 20.


8 of 61 4/16/2008 10:26 PM

"XHTML with Programs" Examples

Examples include: SSI, PHP, JSP, ASP, some Perl template systems

JSP example:

view plain print ?

<html> 1. <body> 2. <h1> Some dynamic content using JSP:</h1> 3. <ul> 4. <li><strong>Expression.</strong><br> Your hostname: 5. <%= request.getRemoteHost() %> 6. <li><strong>Scriptlet.</strong><br/> 7. <% out.println("Attached GET data: " + request.getQueryString()); %> 8. <li><strong>Declaration (plus 9. expression).</strong><br/> 10. <%! private int accessCount = 0; %> 11. Accesses to page since server restart: 12. <%= ++accessCount %> 13. <li><strong>Directive (plus expression).</strong><br/> 14. <%@ page import = "java.util.*" %> 15. Current date: <%= new Date() %> 16. </ul> 17. </body> 18.</html> 19.


9 of 61 4/16/2008 10:26 PM

PHP: Hypertext Processor

PHP: Hypertext Processor

From the PHP manual:

PHP, which stands for "PHP: Hypertext Preprocessor" is a widely-used Open Source general-purpose scripting language that is especially suited for Web development and can be embedded into HTML. Its syntax draws upon C, Java, and Perl, and is easy to learn. The main goal of the language is to allow web developers to write dynamically generated web pages quickly, but you can do much more with PHP.

Example

http://cscie12.dce.harvard.edu/cgi/hello.php

view plain print ?

<?php 1. $greeting = "Hello, World!"; 2.?> 3.<html> 4.<head><title>Hello</title></head> 5.<body> 6.<h1><?php echo($greeting) ?></h1> 7.</body> 8.</html> 9.


10 of 61 4/16/2008 10:26 PM

Model, View, Controller (MVC) Design Pattern

MVC design pattern separates:

Model. data model

View. user interface

Controller. control and flow logic

You can adopt this design pattern regardless of language or server-architecture (CGI, internal process,external process). Some frameworks make using MVC possible, some hard, some easy, some insist on it.


11 of 61 4/16/2008 10:26 PM

Java Expression Language (EL)

e.g.ivy/list.html

Template uses an "expression" language to produce content, not Java. There is a Java process ("Controller"and "Model") that gets the data, and then forwards the data to the "View" component for processing on the server before it is sent to the browser.

In this example, an array of "schools" (named "schoolList") is available to the view. The schools are essentiallya map that could be represented like:

Sample Data from "Model"

EL Page ("View")

The result:

view plain print ?

schoolList = [{ 1. name:"Harvard University", 2. href:"http://www.harvard.edu", 3. division:"I", 4. conference:"Ivy Group", 5. conf_href:"http://www.ivyleaguesports.com/", 6. image_seal:"http://upload.wikimedia.org/wikipedia/en/thumb/8/8e/Harvard_shield-University.png/200p7. lat:"42.374438", 8. lng:"-71.117254", 9. state:"Massachusetts" 10.}, 11....more schools... 12.] 13.

view plain print ?

<html xmlns:jx="http://apache.org/cocoon/templates/jx/1.0"> 1. <head> 2. <title>${title}</title> 3. </head> 4. <body> 5. <h1>${title}</h1> 6. <ul> 7. <jx:forEach var="school" items="${schoolList}"> 8. <li><a href="${school.href}">${school.name}</a></li> 9. </jx:forEach> 10. </ul> 11. </body> 12.</html> 13.


12 of 61 4/16/2008 10:26 PM

Producing a Different View

e.g.ivy/seals.html

Based upon the URL pattern, the "Controller" can call a different view. The "Model" provides the same data inthis case. Our template produces a display of the schools' seals.

The result:

view plain print ?

<html xmlns:jx="http://apache.org/cocoon/templates/jx/1.0"> 1. <head> 2. <title>${title}</title> 3. <style type="text/css"> 4. div.school { text-align: center; float: left; height: 225px; width: 200px; border: thin solid 5. img.seal { height: 144px; margin-bottom: 5px; } 6. </style> 7. </head> 8. <body> 9. <h1>${title}</h1> 10. <jx:forEach var="school" items="${schoolList}"> 11. <div class="school"> <img class="seal" src="${school.image_seal}" 12. alt="${school.name}"/> 13. <br/> ${school.name} </div> 14. </jx:forEach> 15. </body> 16.</html> 17.


13 of 61 4/16/2008 10:26 PM

EL to Produce Data for Google Maps

e.g.ivy/markers.xml

Here we use a different template to produce "marker" data for Google Maps. Note that the data sent is thesame ("Model" is doing the same thing). The "Controller" would be calling a different view based upon a URLpattern.

The result:

view plain print ?

<markers xmlns:jx="http://apache.org/cocoon/templates/jx/1.0"> 1. <jx:forEach var="school" items="${schoolList}"> 2. <marker lat="${school.lat}" lng="${school.lng}" label="${school.name}"/> 3. </jx:forEach> 4.</markers> 5.


14 of 61 4/16/2008 10:26 PM

Template Toolkit (Perl and Python)

Template Toolkit

The Template Toolkit is a fast, powerful and easily extensible template processing system.

DynamicBuild

HTTP Request is made1.Data is retrieved2.Data given to Toolkit Template template for processing3.

15 of 61 4/16/2008 10:26 PM

Template Toolkit Example

view plain print ?

<table id="result-table" cellspacing="0"> 1. <tr id="col-heads"> 2.  3. </tr> 4. [% FOREACH funding_sources %] 5. <tr> 6. <td><a href="search.cgi?action=view_detail&funding_id=[% FUNDING_ID %]&back_link=[% my7. <td class="desc"> 8. [% BRIEF_DESC | truncate_words | ucfirst %] 9. <a href="search.cgi?action=view_detail&funding_id=[% FUNDING_ID %]&back_link=[% my10. </td> 11. <td>[% CITIZENSHIP; "<br/>" IF CITIZENSHIP; STUDENT_STATUS %]</td> 12. <td>[% AWARD_TYPE IF AWARD_TYPE != 'fixed' %] 13. [% IF AWARD_AMOUNT %] 14. [% '$' _ AWARD_AMOUNT | num_comma %] 15. [% END %]</td> 16. <td> 17. [% INCLUDE location.html mode = 'search_results_list' %] 18. </td> 19. <td>[% INCLUDE sponsoring_dept.html mode = 'search_results_list' %]</td> 20. <td>[% DEADLINE %]</td> 21. <td>[% SCORE %]</td> 22. </tr> 23. [% END %] 24.</table> 25.


16 of 61 4/16/2008 10:26 PM

Data for our Dynamic Site

Relational DatabaseXMLYAML (YAML Ain't Markup Language)Some other format (CSV, tab-delimited, etc.)A Web Service


17 of 61 4/16/2008 10:26 PM

Conferences

list.cgi

Process reads in YAML dataTemplate is processed

The template that will display the data.

The Data:

view plain print ?

<div> 1.[% META title = 'Conferences' %] 2.<div> 3. <ul> 4. [% FOREACH conference = conferences.keys.sort %] 5. <li>[% conference %]</li> 6. [% END %] 7. </ul> 8.</div> 9.</div> 10.

--- ACC: - name: Boston College url: http://www.bc.edu/ - name: Clemson url: http://www.clemson.edu/ - name: Duke url: http://www.duke.edu/ - name: Florida State url: http://www.fsu.edu/ - name: Georgia Tech url: http://www.gatech.edu/ - name: Maryland url: http://www.umd.edu/ - name: Miami (FL) url: http://www.miami.edu/ - name: North Carolina State url: http://www.ncsu.edu/ - name: North Carolina url: http://www.unc.edu/ - name: Virginia Tech url: http://www.vt.edu/ - name: Virginia url: http://www.virginia.edu/ - name: Wake Forest url: http://www.wfu.edu/ Big 10: - name: Illinois

l htt // illi i d /


18 of 61 4/16/2008 10:26 PM

Getting the Data: CGI

list.cgi

view plain print ?

#!/usr/bin/perl 1. 2.# import Perl libraries 3.use Template; 4.use YAML; 5.use Data::Dumper; 6. 7.my $context; 8. 9.# call the routine that gets the data 10.$data = get_conferences_data(); 11. 12.# put the data in the "context", which will be 13.# made avaialble to the template 14.$context->{'conferences'} = $data; 15. 16.my $file = 'conference_list.tt2'; 17.# create the template object 18.my $template = template(); 19. 20.print "Content-type: text/html\n\n"; 21.# process the template 22.# passing in 'context' 23.$template->process($file, $context) || die $template->error(); 24. 25. 26.sub get_conferences_data { 27. my $file = 'data/conferences.yml'; 28. my $data = YAML::LoadFile($file); 29. return $data; 30.} 31. 32.# routine that creates a template object 33.# that has the configurations for our project 34.sub template { 35. $TT = Template->new({ 36. INCLUDE_PATH => [ 37. 'root/src/', 38. 'root/lib/' 39. ], 40. PRE_PROCESS => 'config/main', 41. WRAPPER => 'site/wrapper', 42. ERROR => 'error.tt2', 43. POST_CHOMP => 2, 44. TRIM => 2, 45. COMPILE_EXT => '.ttc', 46. COMPILE_DIR => '/tmp/ttc' 47. }); 48. return $TT; 49.} 50.


19 of 61 4/16/2008 10:26 PM

Wrapping the Template

Where did everything else come from? The files that our part of out Template Toolkit site are:

root/lib/config/* files contain definitions and configuration valuesroot/lib/site/* files define the page structureroot/src/* are the template filesNote that ttsite.css is a template file. Color and other definitions come from the config files.

site/wrapper

site/html

site/layout

-- lib 1.| |-- config 2.| | |-- col 3.| | `-- main 4.| `-- site 5.| |-- footer 6.| |-- header 7.| |-- html 8.| |-- layout 9.| `-- wrapper 10.`-- src 11. |-- conference_list.tt2 12. |-- conferences.tt2 13. |-- error.tt2 14. |-- schools_thumbshots.tt2 15. `-- ttsite.css 16.

[% IF template.name.match('\.(css|js|txt)'); 1. debug("Passing page through as text: $template.name"); 2. content; 3. ELSE; 4. debug("Applying HTML page layout wrappers to $template.name\n"); 5. content WRAPPER site/html + site/layout; 6. END; 7.-%] 8.

view plain print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2.<html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <title>[% template.title or site.title %]</title> 5. <style type="text/css"> 6. [% PROCESS ttsite.css %] 7. </style> 8. </head> 9. <body> 10. [% content %] 11. </body> 12.</html> 13.

view plain print ?

<div id="header">[% PROCESS site/header %]</div> 1.<div id="content"> 2.[% content %] 3.</div> 4.<div id="footer">[% PROCESS site/footer %]</div> 5.


20 of 61 4/16/2008 10:26 PM

Conferences

Alter the CGI so that it takes a template argument from PATH_INFO:

http://cscie12.dce.harvard.edu/cgi/conferences/list.cgi/conferences

And now, let's list the schools:

view plain print ?

<div> 1.[% META title = 'Conferences and Schools' %] 2.<div> 3. <ul> 4. [% FOREACH conference = conferences.keys.sort %] 5. <li><strong>[% conference %]</strong> 6. <ul> 7. [%- FOREACH school = conferences.$conference %] 8. <li><a href="[% school.url %]"> 9. [%- school.name %]</a> 10. </li> 11. [%- END %] 12. </ul> 13. </li> 14. [% END %] 15. </ul> 16.</div> 17.


21 of 61 4/16/2008 10:26 PM

Conferences [fun]

Alter the CGI so that it takes a template argument from PATH_INFO:

http://cscie12.dce.harvard.edu/cgi/conferences/list.cgi/schools_thumbshots

The [% INCLUDE site/thumbshots %] includes the file root/lib/site/thumbshots

view plain print ?

<div> 1.[% META title = 'Conferences and Schools' %] 2.<div> 3. <ul> 4. [% FOREACH conference = conferences.keys.sort %] 5. <li><strong>[% conference %]</strong> 6. <ul> 7. [% FOREACH school = conferences.$conference %] 8. <li><a href="[% school.url %]"> 9. [% school.name %]</a> 10. <br/><img src="http://open.thumbshots.org/image.pxf?url=[% school.url %]" 11. alt="school home page"/> 12. </li> 13. [% END %] 14. </ul> 15. </li> 16. [% END %] 17. </ul> 18.</div> 19.[% INCLUDE site/thumbshots %] 20.</div> 21.


22 of 61 4/16/2008 10:26 PM

view plain print ?

<div 1.style="border: thin dotted black; background-color: #ff9; padding: 0.25em; margin: 5px 50px;"> 2. <a href="http://www.thumbshots.com" target="_blank" 3. title="This site uses Thumbshots previews">This site uses 4. Thumbshots previews</a> 5.</div> 6.


23 of 61 4/16/2008 10:26 PM

Template Toolkit Build

Building a static site with Template Toolkit.

The templates (*.html) files in the "src" directory will be processed and new files will be created in the "html" directory.

Directory and file structure:

TT 'ttree'

ttree

is the program that will recursively go through a directory and process templates. The resulting content issaved to a file in another directory.

|-- data 1.| `-- menu.txt 2.|-- src 3.| |-- contact.html 4.| |-- directions.html 5.| |-- hours.html 6.| |-- images 7.| | |-- building.gif 8.| | |-- building.jpg 9.| | |-- building2.jpg 10.| | |-- building3.jpg 11.| | |-- map.gif 12.| | |-- pinocchio1.jpg 13.| | |-- pinocchio_216.gif 14.| | |-- pinocchio_72.gif 15.| | `-- sign.jpg 16.| |-- index.html 17.| |-- menu.html 18.| |-- sicilian_vs_regular.html 19.| `-- site.css 20.`-- tt 21. |-- footer 22. |-- head 23. |-- header 24. `-- navmenu 25.


24 of 61 4/16/2008 10:26 PM

And now look in the "html" directory:

view plain print ?

minerva$ ttree --accept .html$ \ 1.> -s src -d html -l tt \ 2.> --copy .png$ --copy .gif$ \ 3.> --copy .jpg$ --copy .css$ \ 4.> --pre_chomp --post_chomp --trim \ 5.> -a 6.ttree 2.75 (Template Toolkit version 2.13) 7. 8. Source: src 9. Destination: html 10.Include Path: [ tt ] 11. Ignore: [ \b(CVS|RCS)\b, ^# ] 12. Copy: [ \.png$, \.gif$, .png$, .gif$, .jpg$, .css$ ] 13. Accept: [ .html$ ] 14. Suffix: [ ] 15. 16. + contact.html 17. + directions.html 18. + hours.html 19. > images/building.gif (copied, matches //) 20. > images/building.jpg (copied, matches //) 21. > images/building2.jpg (copied, matches //) 22. > images/building3.jpg (copied, matches //) 23. > images/map.gif (copied, matches //) 24. > images/pinocchio1.jpg (copied, matches //) 25. > images/pinocchio_216.gif (copied, matches //) 26. > images/pinocchio_72.gif (copied, matches //) 27. > images/sign.jpg (copied, matches //) 28. + index.html 29. + menu.html 30. + sicilian_vs_regular.html 31. > site.css (copied, matches //) 32.

html 1.|-- contact.html 2.|-- directions.html 3.|-- hours.html 4.|-- images 5.| |-- building.gif 6.| |-- building.jpg 7.| |-- building2.jpg 8.| |-- building3.jpg 9.| |-- map.gif 10.| |-- pinocchio1.jpg 11.| |-- pinocchio_216.gif 12.| |-- pinocchio_72.gif 13.| `-- sign.jpg 14.|-- index.html 15.|-- menu.html 16.|-- sicilian_vs_regular.html 17.`-- site.css 18.


25 of 61 4/16/2008 10:26 PM

Template Toolkit: Datafiles

Can process data as well.

Menu data is:

And the menu.html template is:

subs|Cheese|4.50|5.60subs|Italian|4.75|5.90subs|Ham + Cheese|4.75|5.90subs|Meatball|4.75|5.90subs|Tuna|4.75|5.90subs|Turkey|5.50|6.50subs|Chicken Parmigiana|5.50|6.50subs|Roast Beef|5.50|6.50subs|Eggplant Parmigiana|4.75|5.90subs|Steak|5.00|6.00subs|Steak + Cheese|5.50|6.50subs| + Mushrooms|+0.50|+0.50subs| + Green Peppers|+0.50|+0.50subs| + Onions|+0.50|+0.50subs|Sausage, Peppers & Onions||6.50subs|Hamburger|3.60|5.40subs|Cheeseburger|4.10|5.90subs|Fried Chicken|5.75|6.75subs|Veggie|5.60|6.50subs|Extra Cheese on any sub|+0.50|+0.50


26 of 61 4/16/2008 10:26 PM

view plain print ?

[% INCLUDE header title = 'Menu' %] 1.[% USE menudata = datafile('data/menu.txt', delim = '|')%] 2.<table width="100%"> 3. <tbody> 4. <tr> 5. <td width="50%"> 6. <div class="callout"> 7. <h2>Our Menu</h2> 8. <table width="100%" class="foodmenu"> 9. <tbody> 10. <tr> 11. <th colspan="3"><a name="subs">Subs</a></th> 12. </tr> 13. <tr> 14. <td></td> 15. <td>Small</td> 16. <td>Large</td> 17. </tr> 18. [% FOREACH item = menudata %] 19. [% IF item.type == 'subs' %] 20. <tr> 21. <td style="text-align: left;" width="50%">[% item.item %]</td> 22. <td width="25%">[% item.small %]</td> 23. <td width="25">[% item.large %]</td> 24. </tr> 25. [% END %] 26. [% END %] 27. </tbody> 28. </table> 29. </div> 30. </td> 31. </tr> 32. </tbody> 33.</table> 34.[% INCLUDE footer %] 35.


27 of 61 4/16/2008 10:26 PM

PHP Example with Schools and Conferences

Smarty Templates

Crash CourseSmarty ManualSmarty Cheat Sheet

Conferences and Schools

index.php?conference=Ivy%20Group&view=listindex.php?conference=Ivy%20Group&view=gridindex.php?conference=Big%2012%20Conference&view=listindex.php?conference=Big%2012%20Conference&view=grid


28 of 61 4/16/2008 10:26 PM

PHP Smarty Templates

When working with templates, the two main pieces to understand are:

What parameters does the PHP script accept/require?What are the data the PHP script provides the template?

Browser makes an HTTP GET request to server:index.php?conference=Ivy+Group&view=list

1.

Apache HTTP Server with PHP engine invokes the index.php script, passing in the parameters (conference=Ivy Group; view=list) received

2.

index.php reads in data from conferences.xmlfile, and builds data structure only for those that match "conference=Ivy Group"

3.

Based upon the value of the view parameter, index.php invokes the appropriate Smarty template,passing in data for conferences and schools

4.

The XHTML output from processing the template is passed back to Apache HTTP Server5.XHTML output is delivered to browser6.

29 of 61 4/16/2008 10:26 PM

The Data

XML Data

Initially, the data is in an XML format.

Data provided to template

PHP reads in the XML format and produces arrays that it will make available to the templates. The two arraysare conferences and schools.

Ivy Group: textual representation of the schools variable sent to template:

Ivy Group: textual representation of the conferences variable sent to template:

view plain print ?

<?xml version="1.0" encoding="iso-8859-1"?> 1.<conferences xmlns:h="http://www.w3.org/1999/xhtml"> 2. <school name="Abilene Christian University" 3. href="http://www.acu.edu" 4. conference="Lone Star Conference" 5. conf_href="http://www.lonestarconference.org/" 6. division="II" state="TX" /> 7. <school name="Adams State College" 8. href="http://www.adams.edu" 9. conference="Rocky Mountain Athletic Conference" 10. conf_href="http://www.rmacsports.org/" division="II" 11. state="CO" /> 12. <school name="Adelphi University" 13. href="http://www.adelphi.edu" 14. conference="East Coast Conference" 15. conf_href="http://www.eccsports.org" division="II" 16. state="NY" /> 17. <school name="Adrian College" 18. href="http://www.adrian.edu" 19. conference="Michigan Intercol. Ath. Assn." 20. conf_href="http://miaa.org/" division="III" state="MI" /> 21.  22.</conferences> 23.

schools = {Array( [name] => Brown University [href] => http://www.brown.edu [conference] => Ivy Group [conf_href] => http://www.ivyleaguesports.com/ [division] => I [state] => RI)Array( [name] => Columbia University-Barnard College [href] => http://www.columbia.edu [conference] => Ivy Group [conf_href] => http://www.ivyleaguesports.com/ [division] => I [state] => NY)Array( [name] => Cornell University [href] => http://www.cornell.edu [conference] => Ivy Group [conf_href] => http://www.ivyleaguesports.com/ [division] => I [state] => NY)Array(


30 of 61 4/16/2008 10:26 PM

conferences = ( Allegheny Mountain Collegiate Conference, America East Conference, American Southwest Conference, Atlantic 10 Conference, Atlantic Coast Conference, // conferences removed for clarity)

31 of 61 4/16/2008 10:26 PM

Access Data in template

Snipped of template:

Note use of "escape" funtion that will escape necessary characters into character entities (e.g. & become &)

view plain print ?

<table width="100%"> 1. <thead> 2. <tr><th>Name</th><th>Conference</th><th>State</th></tr> 3. </thead> 4. <tbody> 5. {foreach from=$schools item=s } 6. <tr class="{cycle values='evenrow,oddrow'}"> 7. <td><a href="{$s.href}">{$s.name|escape}</a></td> 8. <td><a href="{$s.conf_href}">{$s.conference|escape}</a></td> 9. <td>{$s.state}</td> 10. </tr> 11. {/foreach} 12. </tbody> 13.</table> 14.


32 of 61 4/16/2008 10:26 PM

Create Links to other conferences and views

Simple create a link with the appropriate "conference" and "view" parameters.

Note use of "$smarty" variable to access GET parameter. Also, note the use of the "escape" filter toURL-escape the name (e.g. spaces become %20, etc.)

navigation part of template:

Navigation markup after processing:

view plain print ?

<div id="navigation"> 1.<ul> 2.{foreach from=$conferences item=conf} 3.<li> 4.{if $conf == $smarty.get.conference } 5. {$conf} 6.{else} 7. <a href="index.php?conference={$conf|escape:'url'}&view={$smarty.get.view}">{$conf|escape}</a>8.{/if} 9.</li> 10.{/foreach} 11.</ul> 12.</div> 13.

view plain print ?

 1.<li> 2. <a href="index.php?conference=Independent&view=list">Independent</a> 3.</li> 4.<li> 5. <a href="index.php?conference=Iowa%20Intercol.%20Athletic%20Conf.&view=list">Iowa Intercol. At6.</li> 7.<li> 8. Ivy Group 9.</li> 10.<li> 11. <a href="index.php?conference=Landmark%20Conference&view=list">Landmark Conference</a> 12.</li> 13.<li> 14. <a href="index.php?conference=Liberty%20League&view=list">Liberty League</a> 15.</li> 16. 17.

33 of 61 4/16/2008 10:26 PM

Full list.tpl

Note use of "include" directives for:

header.tplfoote.tplnavigation.tplaltviews.tpl

view plain print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-str1.<html xmlns="http://www.w3.org/1999/xhtml"> 2. <head> 3. <title>NCAA Schools</title> 4. <link rel="stylesheet" type="text/css" href="site.css"/> 5. </head> 6. <body> 7. <div id="doc3" class="yui-t1"> 8. <div id="hd"> 9. {include file="header.tpl"} 10. </div> 11. <div id="bd"> 12. <div id="yui-main" > 13. <div class="yui-b" id="main"> 14.  15. {include file="altviews.tpl"} 16. <div id="schoollist"> 17. <table width="100%"> 18. <thead> 19. <tr><th>Name</th><th>Conference</th><th>State</th></tr> 20. </thead> 21. <tbody> 22. {foreach from=$schools item=s } 23. <tr class="{cycle values='evenrow,oddrow'}"> 24. <td><a href="{$s.href}">{$s.name|escape}</a></td> 25. <td><a href="{$s.conf_href}">{$s.conference|escape}</a></td> 26. <td>{$s.state}</td> 27. </tr> 28. {/foreach} 29. </tbody> 30. </table> 31. </div> 32. </div> 33. </div> 34. <div class="yui-b"> 35. {include file="navigation.tpl"} 36. </div> 37. </div> 38. <div id="ft"> 39. {include file="footer.tpl"} 40. </div> 41. </div> 42. </body> 43.</html> 44.


34 of 61 4/16/2008 10:26 PM

PHP Example with Courses from Database

http://cscie12.dce.harvard.edu/cgi/courses/departments.php


35 of 61 4/16/2008 10:26 PM

FAS Course Data

Course data for Faculty of Arts & Sciences is in a mysql database on minerva (username: class; database name: coursecatalog)


36 of 61 4/16/2008 10:26 PM

view plain print ?

minerva$ mysql -u class coursecatalog 1.Reading table information for completion of table and column names 2.You can turn off this feature to get a quicker startup with -A 3. 4.Welcome to the MySQL monitor. Commands end with ; or \g. 5.Your MySQL connection id is 515 to server version: 3.23.58 6. 7.Type 'help;' or '\h' for help. Type '\c' to clear the buffer. 8. 9.mysql> describe courses; 10.+------------------------------+--------------+------+-----+---------+-------+ 11.| Field | Type | Null | Key | Default | Extra | 12.+------------------------------+--------------+------+-----+---------+-------+ 13.| acad_year | year(4) | YES | | NULL | | 14.| cat_num | int(9) | YES | | NULL | | 15.| offered | char(1) | YES | | NULL | | 16.| department_code | varchar(15) | YES | | NULL | | 17.| department_short | varchar(80) | YES | | NULL | | 18.| department_long | varchar(200) | YES | | NULL | | 19.| course_group_code | varchar(10) | YES | | NULL | | 20.| course_group_long | varchar(200) | YES | | NULL | | 21.| num_int | int(9) | YES | | NULL | | 22.| num_char | varchar(15) | YES | | NULL | | 23.| term_pattern_code | int(5) | YES | | NULL | | 24.| fall_term | char(1) | YES | | NULL | | 25.| spring_term | char(1) | YES | | NULL | | 26.| term | varchar(100) | YES | | NULL | | 27.| title | text | YES | | NULL | | 28.| course_type | varchar(100) | YES | | NULL | | 29.| course_level_code | char(1) | YES | | NULL | | 30.| course_level | varchar(200) | YES | | NULL | | 31.| credit_code | int(5) | YES | | NULL | | 32.| credit | varchar(50) | YES | | NULL | | 33.| instructor_approval_required | char(1) | YES | | NULL | | 34.| meeting_time | text | YES | | NULL | | 35.| faculty_text | text | YES | | NULL | | 36.| description | text | YES | | NULL | | 37.| prerequisites | text | YES | | NULL | | 38.| notes | text | YES | | NULL | | 39.+------------------------------+--------------+------+-----+---------+-------+ 40.26 rows in set (0.00 sec) 41. 42.mysql> select distinct department_short from courses; 43.+----------------------------------------------------------+ 44.| department_short | 45.+----------------------------------------------------------+ 46.| African and African American Studies | 47.| Anthropology | 48.| Architecture, Landscape Architecture, and Urban Planning | 49.| Asian Studies Program | 50.| Astronomy | 51.| Biological Sciences in Dental Medicine | 52.| Biological Sciences in Public Health | 53.| Biophysics | 54.| Biostatistics | 55.| Celtic Languages and Literatures | 56.| Chemical Biology | 57.| Chemical and Physical Biology | 58.| Chemistry | 59.| Comparative Literature | 60.| Core Curriculum | 61.| Dramatic Arts | 62.| Earth and Planetary Sciences | 63.| East Asian Languages and Civilizations | 64.| Economics | 65.| Engineering and Applied Sciences | 66.| English and American Literature and Language | 67.| Environmental Science and Public Policy | 68.| Expository Writing | 69.| Folklore and Mythology | 70.| Freshman Seminars | 71.| Germanic Languages and Literatures | 72.| Government | 73.| Health Policy | 74.| History | 75.| History and Literature | 76.| History of American Civilization | 77.| History of Art and Architecture | 78.| History of Science | 79.| House Seminars | 80.| Humanities | 81.


37 of 61 4/16/2008 10:26 PM


38 of 61 4/16/2008 10:26 PM

Mixing of Concerns instead of SOC

Mixing of concerns instead of SOC.This particular example is with PHP, but you can easily achieve "entangling of concerns" with Java (JSP),ASP, Python, or Perl. The problem is not with the language, but with the structure.

departments.php

http://cscie12.dce.harvard.edu/cgi/courses/departments.php

courses.php

http://cscie12.dce.harvard.edu/cgi/courses/courses.php?department_code=CHEM

view plain print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2.<html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <title>Departments</title> 5. <link rel="stylesheet" href="site.css" type="text/css"/> 6. </head> 7. <body> 8.<h1>Faculty of Arts & Sciences</h1> 9.<h2>Departments</h2> 10.<?php 11. // Connecting, selecting database 12. $link = mysql_connect('localhost', 'class', '') 13. or die('Could not connect: ' . mysql_error()); 14. mysql_select_db('coursecatalog') or die('Could not select database'); 15. 16. // Performing SQL query 17. $query = 'SELECT distinct department_short, department_code FROM courses order by department_sh18. $result = mysql_query($query) or die('Query failed: ' . mysql_error()); 19. 20. // Printing results in HTML 21. echo "<table>\n"; 22. while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { 23. echo "\t<tr>\n"; 24. echo "<td><a href=\"courses.php?department_code=$row[department_code]\">$row[department_short25. echo "\t</tr>\n"; 26. } 27.echo "</table>\n"; 28. 29.// Free resultset 30.mysql_free_result($result); 31. 32.// Closing connection 33.mysql_close($link); 34.?> 35. </body> 36.</html> 37.


39 of 61 4/16/2008 10:26 PM

view plain print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2.<html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <title>Departments</title> 5. <link rel="stylesheet" href="site.css" type="text/css"/> 6. </head> 7. <body> 8.<h1>Faculty of Arts & Sciences</h1> 9.<p><a href="departments.php">Return to Department List</a></p> 10.<h2>Department <?php echo $_GET[department_code] ?></h2> 11.<?php 12.// Connecting, selecting database 13.$link = mysql_connect('localhost', 'class', '') 14. or die('Could not connect: ' . mysql_error()); 15. mysql_select_db('coursecatalog') or die('Could not select database'); 16. 17. // Performing SQL query 18. $query = 'SELECT course_group_long, num_int, num_char, term, title, description'; 19. $query .= ' from courses where department_code = '; 20. $query .= "'".mysql_escape_string($_GET['department_code'])."'"; 21. $query .= ' order by course_group_long, num_int, num_char, title'; 22. 23. $result = mysql_query($query) or die('Query failed: ' . mysql_error()); 24. // Printing results in HTML 25. echo "<table cellspacing='0' cellpadding='0'>\n"; 26. $i = 0; 27. while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { 28. $class = $i++ % 2 ? 'evenrow' : 'oddrow' ; 29. echo "\t<tr class='$class'>\n"; 30. echo "<td class='abbrev'>$row[course_group_long] $row[num_int] $row[num_char]</td>"; 31. echo "<td class='long'><strong>$row[title]</strong>"; 32. echo "<p class='description'>$row[description]</p></td>"; 33. echo "\t</tr>\n"; 34. } 35.echo "</table>\n"; 36. 37.// Free resultset 38.mysql_free_result($result); 39. 40.// Closing connection 41.mysql_close($link); 42.?> 43. 44. </body> 45.</html> 46.


40 of 61 4/16/2008 10:26 PM

PHP Smarty Templates

Smarty is a Template Engine for PHP, which allows you to write Templates for your PHP data (similar to Perl'sTemplate Toolkit)

The template (departments.tpl):

Get the departments: smarty-dept.php

view plain print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2.<html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <title>Departments</title> 5. <link rel="stylesheet" href="site.css" type="text/css"/> 6. </head> 7.<body> 8.<h1>Faculty of Arts & Sciences</h1> 9.<h2>Departments</h2> 10. <table> 11. {foreach from=$dept item=d} 12. <tr> 13. <td> 14. <a href="smarty-courses.php?department_code={$d.department_code}">{$d.department_short}</a> 15. </td> 16. </tr> 17. {/foreach} 18. </table> 19.</body> 20.</html> 21.


41 of 61 4/16/2008 10:26 PM

view plain print ?

<?php 1.// Connecting, selecting database 2.$link = mysql_connect('localhost', 'class', '') 3. or die('Could not connect: ' . mysql_error()); 4. 5.mysql_select_db('coursecatalog') or die('Could not select database'); 6.// Performing SQL query 7. $query = 'SELECT distinct department_short, department_code FROM courses order by department_short'8.$res = mysql_query($query) or die('Query failed: ' . mysql_error()); 9.$i=0; 10.while ($row = mysql_fetch_array($res, MYSQL_ASSOC)) { 11. $results[$i++] = $row; 12.} 13. 14.require('/usr/local/lib/php/Smarty/Smarty.class.php'); 15.// create object 16.$smarty = new Smarty; 17.$smarty->template_dir = './smarty_templates'; 18.$smarty->compile_dir = '/tmp/smarty/templates_c'; 19.$smarty->cache_dir = '/tmp/smarty/cache'; 20.$smarty->config_dir = './smarty_configs'; 21. 22.$smarty->assign('dept', $results); 23. 24.// display it 25.$smarty->display('departments.tpl'); 26. 27.// Free resultset 28.mysql_free_result($res); 29.// Closing connection 30.mysql_close($link); 31.?> 32.


42 of 61 4/16/2008 10:26 PM

Smarty Template for Courses

The template (courses.tpl):

Get the Courses for the CHEM department: smarty-courses.php?department_code=CHEM

view plain print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2.<html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <title>Departments</title> 5. <link rel="stylesheet" href="site.css" type="text/css"/> 6. </head> 7. <body> 8.<h1>Faculty of Arts & Sciences</h1> 9.<p><a href="smarty-dept.php">Return to Department List</a></p> 10.<h2>Department {$department_code}</h2> 11.<table cellspacing="0" cellpadding="0"> 12.{foreach from=$courses item=course name=courses} 13.<tr class="{cycle values="row1,row2,row3,row4"}"> 14.<td class="abbrev">{$course.course_group_long} {$course.num_int}{$course.num_char}</td> 15.<td class="long"> 16. <strong>{$course.title}</strong> 17. <p class="description"> 18. {$course.description} 19. </p> 20.</td> 21.</tr> 22.{/foreach} 23.</table> 24.</body> 25.</html> 26.


43 of 61 4/16/2008 10:26 PM

view plain print ?

<?php 1.// Connecting, selecting database 2.$link = mysql_connect('localhost', 'class', '') 3. or die('Could not connect: ' . mysql_error()); 4.mysql_select_db('coursecatalog') or die('Could not select database'); 5. 6.// Performing SQL query 7.$query = 'SELECT course_group_long, num_int, num_char, term, title, description'; 8.$query .= ' from courses where department_code = '; 9.$query .= "'".mysql_escape_string($_GET['department_code'])."'"; 10.$query .= ' order by course_group_long, num_int, num_char, title'; 11.$res = mysql_query($query) or die('Query failed: ' . mysql_error()); 12.$i = 0; 13.while ($row = mysql_fetch_array($res, MYSQL_ASSOC)) { 14. $results[$i++] = $row; 15.} 16.require('/usr/local/lib/php/Smarty/Smarty.class.php'); 17. 18.// create object 19.$smarty = new Smarty; 20.// pass the results to the template 21.$smarty->assign('courses', $results); 22.$smarty->assign('department_code', $_GET['department_code']); 23. 24.$smarty->template_dir = './smarty_templates'; 25.$smarty->compile_dir = '/tmp/smarty/templates_c'; 26.$smarty->cache_dir = '/tmp/smarty/cache'; 27.$smarty->config_dir = './smarty_configs'; 28. 29.// display it 30.$smarty->display('courses.tpl'); 31. 32.// Free resultset 33.mysql_free_result($res); 34.// Closing connection 35.mysql_close($link); 36.?> 37.


44 of 61 4/16/2008 10:26 PM

RSS

Rich Site Summary (RSS) is a lightweight XML format designed for sharing headlines and other Web content.

Article: What is RSS? by Mark Pilgrim, XML.com

Example RSS feed: http://mlb.mlb.com/partnerxml/gen/news/rss/bos.xml

Item, Link, Description

Example providers of RSS feeds

BBCCNNNPRBoston.com NewsBoston.com SportsUpton Tea Imports

view plain print ?

<item> 1. <title>Varitek sends Sox to Bronx on high note</title> 2. <link>http://mlb.mlb.com/news/gameday_recap.jsp?ymd=20080415&content_id=2530148&vkey=recap3. <pubDate>Wed, 16 Apr 2008 00:19:00 EDT</pubDate> 4. <guid>http://mlb.mlb.com/news/gameday_recap.jsp?ymd=20080415&content_id=2530148&vkey=recap5. <description>Sox head to Bronx after beating Tribe</description> 6. <content:encoded>Jason Varitek's pinch-hit solo homer lifted the Red Sox to a sweep over the India7. <dc:creator>Ian Browne</dc:creator> 8.</item> 9.


45 of 61 4/16/2008 10:26 PM

What to do with RSS?

ProduceConsume

Produce

Indicate RSS feeds using "link" element in page:

Link to RSS feed with the convention of an "XML/RSS" icon on page.

or

view plain print ?

<link rel="alternate" type="application/rss+xml" 1. title="ONLamp.com Articles" 2. href="http://www.oreillynet.com/meerkat/?_fl=rss10&t=ALL&c=5544" /> 3.<link rel="alternate" type="application/atom+xml" 4. title="ONLamp.com Articles" 5. href="http://www.oreillynet.com/meerkat/?_fl=atom&t=ALL&c=5544" /> 6.


46 of 61 4/16/2008 10:26 PM

Consume

External RSS reader applicationRSS reader built-in to E-mail clientRSS reader built-in to Web browserMy Yahoo! Portal or other Portal Engine


47 of 61 4/16/2008 10:26 PM


48 of 61 4/16/2008 10:26 PM


49 of 61 4/16/2008 10:26 PM

Firefox Live Bookmarks

Firefox "Live Bookmarks"


50 of 61 4/16/2008 10:26 PM

Podcasts: An Adaptation of RSS

Adapting and extending RSS for use with iTunes, iPods, and other mobile media players.

Each "item" has an "enclosure," which is a link to the media file (typically MP3).

iTunes uses a specific XML module added to RSS (note the itunes prefix to some elements within theitem.

Podcast snippet ( WBUR/NPR On Point with Tom Ashbrook Podcast ):

view plain print ?

<item> 1. <title>Big Deals in Private Equity</title> 2. <description>It's the talk of Wall Street. A $4-billion public offering by private 3. equity investment giant Blackstone Group. We'll look at the public implications 4. of all that big-money private cash.</description> 5. <itunes:author>On Point</itunes:author> 6. <pubDate>Mon, 25 Jun 2007 17:06:14 EDT</pubDate> 7. <link>http://www.onpointradio.org</link> 8. <guid> 9. http://podcastdownload.npr.org/anon.npr-podcasts/podcast/330/510053/11369092/WBUR_11369092.mp3</10. <itunes:summary>It's the talk of Wall Street. A $4-billion public offering by 11. private equity investment giant Blackstone Group. We'll look at the public 12. implications of all that big-money private cash.</itunes:summary> 13. <itunes:duration>0:44:21</itunes:duration> 14. <itunes:explicit>no</itunes:explicit> 15. <itunes:keywords>WBUR,WBUR FM,Big Deals in Private 16. Equity,Boston,Massachusetts</itunes:keywords> 17. <enclosure 18. url="http://podcastdownload.npr.org/anon.npr-podcasts/podcast/330/510053/11369092/WBUR_11369092.19. length="21289470" type="audio/mpeg"/> 20.</item> 21. 22.


51 of 61 4/16/2008 10:26 PM

Flexibility and Modularity of XML

RSS and Podcasts

On Point with Tom Ashbrook from WBURPodcast: On Point with Tom Ashbrook from WBUR


52 of 61 4/16/2008 10:26 PM

view plain print ?

... 1. <itunes:category text="TV & Film"/> 2. <itunes:owner> 3. <itunes:email>[email protected]</itunes:email> 4. <itunes:name>WBUR</itunes:name> 5. </itunes:owner> 6. <itunes:image href="http://media.npr.org/images/podcasts/primary/icon_510053.jpg"/> 7. <item> 8. <title>The Sum of Financial Fears</title> 9. <description>Market volatility is the nice way of putting it. By the end of last week, the Dow Jo10. <itunes:author>On Point</itunes:author> 11. 12. <pubDate>Mon, 06 Aug 2007 18:01:34 EDT</pubDate> 13. <link>http://www.onpointradio.org</link> 14. <guid>http://podcastdownload.npr.org/anon.npr-podcasts/podcast/330/510053/12546861/WBUR_12546861.15. <itunes:summary>Market volatility is the nice way of putting it. By the end of last week, the Dow16. 17. <itunes:duration>0:44:36</itunes:duration> 18. <itunes:explicit>no</itunes:explicit> 19. <itunes:keywords>WBUR,WBUR FM,The Sum of Financial Fears,Boston,Massachusetts</itunes:keywords> 20. <enclosure url="http://podcastdownload.npr.org/anon.npr-podcasts/podcast/330/510053/12546861/WBUR21. </item> 22. ... 23.

53 of 61 4/16/2008 10:26 PM

Flexibility and Modularity of RSS

Map data

RSS feed contains latitude and longitude information. Yahoo! Maps takes an xmlsrc parameter (value is theRSS feed) and reads the latitude and longitude information to display on the map.

Note the geo prefix for the namespace URI {http://www.w3.org/2003/01/geo/wgs84_pos#} and the geo:lat andgeo:long elements in the RSS feed.

RSS feed of traffic dataYahoo! Map of traffic, based upon RSS feed


54 of 61 4/16/2008 10:26 PM

view plain print ?

 1.<item> 2. <title>Slow traffic, on O NEILL TUNL NB at BANKNORTH GARDEN</title> 3. <link>http://gws.maps.yahoo.com/mapimage?MAPDATA=xRZ0Bud6wXW84tuCt55q5bnqJ5vJrnUt1_2Bjzyf_M_10frlq4. <description>BASKETBALL GAME; CELTICS VS; NEW JERSEY JETS; EXPECT DELAYS.</description> 5. <geo:lat>42.366744</geo:lat> 6. <geo:long>-71.060759</geo:long> 7. <guid isPermaLink="false">http://gws.maps.yahoo.com/mapimage?MAPDATA=xRZ0Bud6wXW84tuCt55q5bnqJ5vJr8. <pubDate>Tue, 15 Apr 2008 16:00:00 -0700</pubDate> 9.</item> 10.


55 of 61 4/16/2008 10:26 PM

RSS and Yahoo! Maps

Yahoo! Maps and RSS with GeoInfo

view plain print ?

<?xml version="1.0" encoding="UTF-8"?> 1.<rss version="2.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" 2. xmlns:ymaps="http://api.maps.yahoo.com/Maps/V1/AnnotatedMaps.xsd"> 3. <channel> 4. <title>David's Favorite Lunch Spots</title> 5. <link>http://cscie153.dce.harvard.edu/</link> 6. <item> 7. <title>Pinnochio's Pizza</title> 8. <link>http://www.pinocchiospizza.net/</link> 9. <description>The best pizza in the Square. Get a Sicilian slices of Tomato & Basil 10. and Spinache.</description> 11. <geo:lat>42.371984</geo:lat> 12. <geo:long>-71.120269</geo:long> 13. </item> 14. <item> 15. <title>Felipe's Taqueria</title> 16. <link>http://www.felipestaqueria.com/</link> 17. <geo:lat>42.372436</geo:lat> 18. <geo:long>-71.11962</geo:long> 19. <description>Great burritos. Get a super carnitas burrito with black 20. beans.</description> 21. </item> 22. </channel> 23.</rss> 24.


56 of 61 4/16/2008 10:26 PM

Adobe SWF and Flash and Flex

Flash Player is the browser pluginSWF is file format ("swif")Authoring tools: Flash and FlexActionScript is the proprietary scripting language (based on JavaScript)

Video

Charts

MLB Gameday

ESPN Gamecast

Flash Earth


57 of 61 4/16/2008 10:26 PM

Example Flash with XML/SWF Charts

XML/SWF ChartsCharts SWF is providedYou provide the data in an XML format

Files involved:

chart-object.htmlcharts.swfdata.xml

A closer look

Markup (note use of "object" with nested "embed"):

Screenshot of the chart itself:

XML Data (data.xml):

view plain print ?

<body> 1. <p>A Chart</p> 2. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 3. codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" 4. width="400" height="250" id="charts" align=""> 5. <param name="movie" value= 6. "charts.swf?library_path=charts_library&xml_source=data.xml" /> 7. 8. <param name="quality" value="high" /> 9. <param name="bgcolor" value="#666666" /> 10. <embed src= 11. "charts.swf?library_path=charts_library&xml_source=data.xml" 12. quality="high" bgcolor="#666666" width="400" height="250" name= 13. "charts" align="" swliveconnect="true" 14. type="application/x-shockwave-flash" pluginspage= 15. "http://www.macromedia.com/go/getflashplayer" /> 16. </object> 17.</body> 18.


58 of 61 4/16/2008 10:26 PM

view plain print ?

<chart> 1. <chart_data> 2. <row> 3. <null/> 4. <string>2004</string> 5. <string>2005</string> 6. <string>2006</string> 7. <string>2007</string> 8. </row> 9. <row> 10. <string>Region A</string> 11. <number>5</number> 12. <number>10</number> 13. <number>30</number> 14. <number>63</number> 15. </row> 16. <row> 17. <string>Region B</string> 18. <number>100</number> 19. <number>20</number> 20. <number>65</number> 21. <number>55</number> 22. </row> 23. <row> 24. <string>Region C</string> 25. <number>56</number> 26. <number>21</number> 27. <number>5</number> 28. <number>90</number> 29. </row> 30. </chart_data> 31.</chart> 32.


59 of 61 4/16/2008 10:26 PM

Use "swfobject.js" to Embed SWF

swfobjectSWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript fileExample of Chart using SWFObject

view plain print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-str1.<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 2. <head> 3. <title>SWFObject v2.0</title> 4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 5. <script type="text/javascript" src="swfobject.js"></script> 6. </head> 7. <body> 8. <script type="text/javascript"> 9. flashvars = { library_path: 'charts_library', xml_source: 'data.xml' } 10. swfobject.embedSWF("charts.swf", "myContent", "600", "400", "9.0.0",'expressInstall.swf',flash11. </script> 12. 13. <div id="myContent"> 14. <p>Alternative content</p> 15. </div> 16. </body> 17.</html> 18.


60 of 61 4/16/2008 10:26 PM

Java Applets

UC Irvine Chemistry Educational Applets Chemical Kinetics Simulation

Math, Physics, and Engineering Applets Ripple Tank

My own applet made with Scratch


61 of 61 4/16/2008 10:26 PM

Learn more about this project

Table of Contents | All Slides | Link List | CSCI E-12

Dynamic Sites and Templates; Other Web...

Documents

Transcript of Dynamic Sites and Templates; Other Web...