dynamic sites and templates; other web...
TRANSCRIPT
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]
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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. <!-- col headings removed --> 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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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 /
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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. <!-- schools removed for clarity --> 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(
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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)
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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 ?
<!-- removed --> 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.<!-- removed --> 17.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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. <!-- main --> 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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
34 of 61 4/16/2008 10:26 PM
PHP Example with Courses from Database
http://cscie12.dce.harvard.edu/cgi/courses/departments.php
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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)
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
37 of 61 4/16/2008 10:26 PM
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
47 of 61 4/16/2008 10:26 PM
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
48 of 61 4/16/2008 10:26 PM
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
49 of 61 4/16/2008 10:26 PM
Firefox Live Bookmarks
Firefox "Live Bookmarks"
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
54 of 61 4/16/2008 10:26 PM
view plain print ?
<!-- item from feed --> 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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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.
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
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
Dynamic Sites and Templates; Other Web Content http://localhost:8080/cocoon/projects/cscie12/slides/20080416/handout.html
61 of 61 4/16/2008 10:26 PM
Learn more about this project
Table of Contents | All Slides | Link List | CSCI E-12