Post on 11-Jun-2020
transcript
CSCI E‐12 Fundamentals ofWebsite Development
Table of Contents | All‐in‐One | Link List | Examples | Lecture Notes Home | CSCI E‐12 Home
A form for lecture feedback is available from the course web site. Please take two minutes to fill it out after youhave seen the lecture.
April 21, 2010
Harvard UniversityExtension School
Course Web Site: http://cscie12.dce.harvard.edu/
Instructor email: david_heitmeyer@harvard.eduCourse staff email: cscie12@dce.harvard.edu
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
1 of 76 4/21/2010 3:52 PM
Dynamic Content
Server Side Includes
PHP
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
2 of 76 4/21/2010 3:52 PM
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
3 of 76 4/21/2010 3:52 PM
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
4 of 76 4/21/2010 3:52 PM
Redirect
Data Collection
Database
Search
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
5 of 76 4/21/2010 3:52 PM
action
http://morpheus.dce.harvard.edu/cgi‐bin/redirect.cgi
parameters
URL
The following form uses the parameter: URL
Example 12.1 ‐ Server Program: Redirect ‐ View example by itself
view plain print ?
<form method="post" action="http://morpheus.dce.harvard.edu/cgi-bin/redirect.cgi" enctype="application/x-www-form-urlencoded">
1.
<div> 2. <select name="URL"> 3. <option value="">Select your destination:</option> 4. <option value="http://www.w3.org/TR/xhtml1">XHTML 1.0</option> 5. <option value="http://www.w3.org/TR/html401">HTML 4.01</option> 6. <option value="http://www.w3.org/TR/CSS21">CSS 2.1</option> 7. <option value="http://www.w3.org/TR/REC-CSS1">CSS 1</option> 8. <option value="http://www.w3.org/WAI">Web Accessibility Initiative 9. (WAI)</option> 10. <option value="http://validator.w3.org/">XHTML/HTML Validator</option> 11. <option value="http://jigsaw.w3.org/css-validator/validator-uri.html"> CSS 12. Validator</option> 13. </select> 14. <input type="submit" value="Go!"/> 15. </div> 16.</form> 17.
Markup Display
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
6 of 76 4/21/2010 3:52 PM
FormMail Documentation. Note that this script can be used to send email only to addresses ending with.harvard.edu
action
http://morpheus.dce.harvard.edu/cgi‐bin/FormMail
parameters
recipient
subject
redirect
required
sort
env_report
print_config
print_blank_fields
...see documentation for complete list
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
7 of 76 4/21/2010 3:52 PM
Example 12.2 ‐ Server Program: FormMail ‐ View example by itself
view plain print ?
<form action="http://morpheus.dce.harvard.edu/cgi-bin/FormMail" method="get" enctype="application/x-www-form-urlencoded">
1.
<div>Your Email Address: 2. <input type="text" name="email"/></div> 3. <div>Your Name: 4. <input type="text" name="realname"/></div> 5. <div>Subject: 6. <select name="subject"> 7. <option value="Lecture Question">Lecture Question</option> 8. <option value="Assignment Question">Assignment Question</option> 9. <option value="Syllabus Question">Syllabus Question</option> 10. <option value="Website Question">Website Question</option> 11. </select> </div> 12. <div>Message: 13. <br/> 14. <textarea rows="10" cols="60" name="message">Please type message here... 15. </textarea> </div> 16. <div> 17. <input type="hidden" name="recipient" value="heitmey@fas.harvard.edu"/> 18. </div> 19. <div> 20. <input type="submit" value="Send Email"/> 21. </div> 22.</form> 23.
Your Email Address:
Your Name:
Subject:
Message:
Markup Display
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
8 of 76 4/21/2010 3:52 PM
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
9 of 76 4/21/2010 3:52 PM
Redirect user to a "Thank you" page with the "redirect" parameter.
Example 12.3 ‐ FormMail with 'redirect' page ‐ View example by itself
view plain print ?
<form action="http://morpheus.dce.harvard.edu/cgi-bin/FormMail" method="get" enctype="application/x-www-form-urlencoded">
1.
<div>Your Email Address: 2. <input type="text" name="email"/></div> 3. <div>Your Name: 4. <input type="text" name="realname"/></div> 5. <div> 6. <input type="hidden" name="subject" value="Favorite Ice Cream"/> What ice 7. cream do you like? 8. <br/> 9. <input type="checkbox" name="icecream" value="chocolate"/>Chocolate 10. <br/> 11. <input type="checkbox" name="icecream" value="vanilla"/>Vanilla 12. <br/> 13. <input type="checkbox" name="icecream" value="strawberry"/>Strawberry 14. <br/> 15. <input type="hidden" name="recipient" value="heitmey@fas.harvard.edu"/> 16. <input type="hidden" name="redirect" value="http://www.herrells.com/"/> 17. <input type="hidden" name="required" value="icecream,realname"/> </div> 18. <div> 19. <input type="submit" value="Send Email"/> 20. </div> 21.</form> 22.
Your Email Address:
Markup Display
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
10 of 76 4/21/2010 3:52 PM
Your Name:
What ice cream do you like?
Chocolate
Vanilla
Strawberry
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
11 of 76 4/21/2010 3:52 PM
FAS IT offers a Data Collection Tool that allows you to send data submitted via an HTML form to a database.The data can be viewed online (in HTML) or downloaded in an Excel file. Note that a Harvard HUID and PIN arerequired to use this tool.
Example 12.4 ‐ Data Collection Tool from FAS IT ‐ View example by itself
view plain print ?
<form method="post" action="https://www.datacollection.fas.harvard.edu/cgi-bin/form2db.cgi" enctype="application/x-www-form-urlencoded">
1.
<div> 2. <input type="hidden" name="form2db" value="cscie12_test"/> 3. <!-- Your form elements go here --> 4. What ice cream do you like? 5. <br/> 6. <input type="checkbox" name="icecream" id="ic_chocolate" value="chocolate"/> 7. <label for="ic_chocolate">Chocolate</label> 8. <br/> 9. <input type="checkbox" name="icecream" id="ic_hcp" value="herrell's chocolate puddi10. <label for="ic_hcp">Herrell's Chocolate Pudding</label> 11. <br/> 12. <input type="checkbox" name="icecream" id="ic_cpb" value="chocolate peanut butter"/13. <label for="ic_cpb">Chocolate Peanut Butter</label> 14. <br/> 15. <input type="checkbox" name="icecream" id="ic_vanilla" value="vanilla"/> 16. <label for="ic_vanilla">Vanilla</label> 17. <br/> 18. <input type="checkbox" name="icecream" id="ic_strawberry" value="strawberry"/> 19. <label for="ic_strawberry">Strawberry</label> 20. <br/> 21. <input type="submit"/> </div> 22.</form> 23.
What ice cream do you like?
Chocolate
Herrell's Chocolate Pudding
Chocolate Peanut Butter
Vanilla
Strawberry
Markup Display
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
12 of 76 4/21/2010 3:52 PM
Google Forms is what is behind the Lecture Feedback form for the course.
Start Collecting Information from google Docs Blog
Introduction to Google Forms by Matt Silverman
Lecture feedback form:
Here is what the instructor sees:
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
13 of 76 4/21/2010 3:52 PM
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
14 of 76 4/21/2010 3:52 PM
Easy. Build a form and link to search engine:
Google Site Search
Yahoo! Site Search
Google Site Search
Example 12.5 ‐ Google Site Search ‐ View example by itself
view plain print ?
<form method="get" action="http://www.google.com/search" enctype="application/x-www-form-urlencoded">
1.
<div> 2. <input type="text" name="as_q" size="50"/> 3. <br/> 4. <input type="submit" value="Search CSCIS-12 with Google"/> 5. <input type="hidden" name="as_sitesearch" value="cscis12.dce.harvard.edu"/> 6. </div> 7.</form> 8.
Site Search with Yahoo!
Example 12.6 ‐ Yahoo! Site Search ‐ View example by itself
view plain print ?
<form method="get" action="http://search.yahoo.com/search" enctype="application/x-www-form-urlencoded">
1.
<div> 2. <input type="text" name="p" size="50"/> 3. <br/> 4. <input type="submit" value="Search CSCIS-12 with Yahoo!"/> 5. <input type="hidden" name="vs" value="cscis12.dce.harvard.edu"/> 6. </div> 7.</form> 8.
Markup Display
Markup Display
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
15 of 76 4/21/2010 3:52 PM
Google Custom Search Engine
Yahoo! Search BOSS (Build your Own Search Service)
Search as a Service: Atomz Site Search
Open Source Software for Search
Sphinx
Nutch
Solr
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
16 of 76 4/21/2010 3:52 PM
Part of Apache:
Apache SSI and XSSI
Non‐Java Languages / Frameworks
PHP: CakePHP (MVC), Drupal (CMS), Joomla (CMS)
Ruby: Ruby (MVC)
Python: Django (MVC), Zope, Plone (CMS)
Perl: Catalyst (MVC), Jifty, Template Toolkit, ...
Java
Microsoft
Active Server Pages, C#, .NET: Sharepoint (CMS)
Embedded Objects / Browser Plugins
Adobe Flash ‐ Flash and Flex
Microsoft Silverlight
Java Applets
Web "Content Management" Systems
CMS systems ‐ Drupal, Joomla, HippoCMS, MS Sharepoint, Apache Lenya, ...
Wiki software ‐ Media Wiki, XWiki, TWiki, ...
Blog software ‐ Wordpress, TypePad, ...
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
17 of 76 4/21/2010 3:52 PM
SSI commands are embedded into the XHTML/HTML document. The HTTP server processes the file for any SSIstatements, executes the SSI commands, and then returns content to the HTTP client.
What files are processed?
This is set in the HTTP server configuration, and is typically done by file extension.
.shtml
On morpheus.dce.harvard.edu, the server will parse only .shtml documents.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
18 of 76 4/21/2010 3:52 PM
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
19 of 76 4/21/2010 3:52 PM
The "include" SSI command is a very useful to insert the contents of one file into another. In the examplebelow, the SSI directive is replace by the contents of the file footer.inc.
Example 12.7 ‐ SSI 'include' directive ‐ View example by itself
view plain print ?
<div> 1. <p> 2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 3. Cras sollicitudin, orci nec facilisis vehicula, neque urna 4. porta risus, ut sagittis enim velit at orci. Fusce velit. 5. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, 6. felis. Nulla convallis ante sit amet urna. Maecenas condimentum 7. hendrerit turpis. 8. </p> 9. <!--#include virtual="footer.inc" --> 10.</div> 11.
footer.inc is:
view plain print ?
<div> 1. <p>Copyright © 2008 President and Fellows of Harvard College</p> 2. <p> 3. <a href="http://hcl.harvard.edu/site/privacy.html">Privacy Statement</a> 4. • 5. <a href="http://www.trademark.harvard.edu/trademark_protection/notice.php" 6. target="_blank">Harvard Trademark Notice</a> 7. </p> 8. <p>Page Last Reviewed: December 7, 2007</p> 9.</div> 10.
Markup
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
20 of 76 4/21/2010 3:52 PM
Remember: the content of the included document is inserted into the document containing the SSI command.The included document should not be a complete XHTML document. It is common practice (although not arequirement) to give these files an extension like: .inc, .fhtml, or .phtml.
The parameters for include are:
virtual. This is the parameter you will use most. The argument is a virtual path to a document on theserver. Examples are:
virtual="/~jharvard/inc/footer.inc"
virtual="/includes/navigation.fhtml"
virtual="../includes/disclaimer.phtml"
file. The argument is a relative path to a document that is within the current directory or any of itsdescendent directories (i.e. can't have "../")
A note about SSI and file contents and file extensions
Extension(s) parsed for SSI directives (e.g. ".shtml"). On morpheus and by default with Apache, the fileextension that is processed for SSI directives is .shtml. SSI directives that occur in files that are not
processed for SSI will simply appear as comments in the output. You can configure the file extensionsthat Apache will process.
Extensions that are sometimes used for XHTML/HTML fragments (e.g. ".inc", ".fhtml", ".phtml"). Sinceincluded files are only document fragments, sometimes these files are given a different extension. Thesedifferent extensions provide a reminder to the authors that the content should not be full XHTML/HTMLdocuments. Common file extensions that serve as a reminder are:
.phtml ‐ 'partial' HTML
.fhtml ‐ 'fragment' HTML
.inc ‐ 'include' file
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
21 of 76 4/21/2010 3:52 PM
Example 12.8 ‐ SSI example with variables ‐ View example by itself
view plain print ?
<div> 1.Document URI: <!--#echo var="DOCUMENT_URI"--><br/> 2.Server Name: <!--#echo var="SERVER_NAME"--><br/> 3.Last Modified: <!--#echo var="LAST_MODIFIED"--><br/> 4.Server Admin: <!--#echo var="SERVER_ADMIN"--><br/> 5.</div> 6.
Markup Screenshot
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
22 of 76 4/21/2010 3:52 PM
File size. US Constitution PDF
Example 12.9 ‐ SSI with 'fsize' ‐ View example by itself
view plain print ?
/><div>Constitution of the United States of America as Amended: Unratified Amendments, 1. Analytical Index (U.S. House of Representatives, via GPO Access) July 25, 2007 (H. Do2. <!--#fsize virtual="constitution/us_constitution.pdf"-->) </div> 3.
Markup Screenshot
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
23 of 76 4/21/2010 3:52 PM
Example 12.10 ‐ SSI 'config' ‐ View example by itself
view plain print ?
<div> 1.Last modified: <!--#echo var="LAST_MODIFIED"--><br/> 2.<!--#config timefmt="%B %e, %Y"--> 3.Last modified: <!--#echo var="LAST_MODIFIED"--><br/> 4.</div> 5.
Example 12.11 ‐ View example by itself
view plain print ?
<div><a href="constitution/us_consitution.pdf" shape="rect">US Constitution in PDF</a> 1. (<!--#fsize virtual="constitution/us_constitution.pdf"-->)<br/> 2.<!--#config sizefmt="bytes"--> 3.<a href="constitution/us_consitution.pdf" shape="rect">US Constitution in PDF</a> 4. (<!--#fsize virtual="constitution/us_constitution.pdf"--> bytes)<br/> 5.<!--#config sizefmt="abbrev"--> 6.<a href="constitution/us_consitution.pdf" shape="rect">US Constitution in PDF</a> 7. (<!--#fsize virtual="constitution/us_constitution.pdf"-->)<br/> 8.</div> 9.
Example 12.12 ‐ SSI and errors ‐ View example by itself
Markup Screenshot
Markup Screenshot
Markup Screenshot
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
24 of 76 4/21/2010 3:52 PM
view plain print ?
<div> 1.<p>The first SSI error:<br/> 2.<!--#include file="blahblahblah.inc"--></p> 3.<p>The second SSI error, with a configured message:<br/> 4.<!--#config errmsg="File not found"--> 5.<!--#include file="blahblahblah.inc"--><br/> 6.</p> 7.<p>The third SSI error, with a configured message of "null":<br/> 8.<!--#config errmsg=""--> 9.<!--#include file="blahblahblah.inc"--> 10.</p></div> 11.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
25 of 76 4/21/2010 3:52 PM
Example 12.13 ‐ SSI ENV ‐ View example by itself
view plain print ?
<div> 1. <p>Print out environment variables:</p> 2. <pre xml:space="preserve"><!--#printenv --></pre> 3.</div> 4.
Markup Screenshot
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
26 of 76 4/21/2010 3:52 PM
Files are parsed for SSI commands based upon their extension. If .shtml files are parsed for SSI commands, thenincluded files with the extension .shtml are also parsed for SSI commands.
Files are parsed for SSI commands based upon their extension. If .inc files are parsed for SSI commands, thenincluded files with the extension .inc are also parsed for SSI commands.
Example 12.14 ‐ SSI directives within files included by SSI ‐ View example by itself
view plain print ?
<div> 1.<!--#include virtual="footer.shtml"--> 2.</div> 3.
Contents of footer.shtml contains SSI commands:
Example 12.15 ‐ footer.shtml ‐ View example by itself
view plain print ?
<div class="footer"> 1.<!--#config timefmt="%B %e, %Y"--> 2.Location: http://<!--#echo var="SERVER_NAME"--><!--#echo var="DOCUMENT_URI"--><br/> 3.Last modified: <!--#echo var="LAST_MODIFIED"--><br/> 4.Contact: <!--#echo var="SERVER_ADMIN"--> 5.</div> 6.
Markup Screenshot
Markup Screenshot
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
27 of 76 4/21/2010 3:52 PM
This is usually off for security purposes.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
28 of 76 4/21/2010 3:52 PM
Common elements of site are in one place and included throughout the siteSSIs are useful to include documents or information that is used repeatedly throughout a site, such ascommon headers, footers, and navigation elements. You can change these chunks in one place and havean effect on the entire site!
Documents (or parts of pages) that change oftenSSIs are also useful to include documents or information that change frequently; only the "included" fileneeds to be updated, not the page itself. Also the person or program editing the file need only havepermissions to edit the "included" file, not the actual XHTML document that includes it; only the data inthe "include" file needs to be written, not the entire XHTML page.
Document InformationIn addition, SSIs are useful to include information specific about a document, such as last modified date,URI, size.
Conditionally deliver content.With xSSI (extended SSI), different content can be delivered based upon ENV or other variableinformation.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
29 of 76 4/21/2010 3:52 PM
view plain print ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2.<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 3.<head> 4. <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 5. <title>PRISE: About PRISE</title> 6. <link rel="stylesheet" href="prise.css" type="text/css" /> 7.</head> 8.<body id="about"> 9. <div id="container"> 10. <div id="logobanner"> 11. <!--#include virtual="banner.shtml" --> 12. </div> 13. <div id="content"> 14. <!--#include virtual="leftmenu.shtml" --> 15. <div id="main"> 16. <div id="notices"> 17. <!--#include virtual="notices.shtml" --> 18. </div> 19. <h2>About PRISE</h2><!--begin content--> 20. <p>The May 2007 Report ...</p> 21. <p>For more information ...</p><!--end content--> 22. <div class="footer"> 23. <!--#include virtual="footer.shtml" --> 24. </div> 25. </div> 26. </div> 27. </div> 28.</body> 29.</html> 30.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
30 of 76 4/21/2010 3:52 PM
Iroquois Constitution
Iroquois Constitution Zip File containing XHTML, CSS, and "Include" files.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
31 of 76 4/21/2010 3:52 PM
view plain print ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2.<html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <title>The Great Binding Law, Gayanashagowa (Constitution of the Iroquois Nations)</title>
5.
<link rel="stylesheet" type="text/css" href="style.css" /> 6. </head> 7. <body> 8. <!--#include virtual="inc/header.shtml"--> 9. <!--#include virtual="inc/nav.shtml"--> 10. <div id="main"> 11. <!--#include virtual="inc/content1.shtml"--> 12. </div> 13. <!--#include virtual="inc/footer.shtml" --> 14. </body> 15.</html> 16.
Layout of files:
.|-- 1.shtml|-- 2.shtml|-- 3.shtml|-- 4.shtml|-- 5.shtml|-- 6.shtml|-- 7.shtml|-- 8.shtml|-- 9.shtml|-- 10.shtml|-- 11.shtml|-- 12.shtml|-- 13.shtml
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
32 of 76 4/21/2010 3:52 PM
|-- 14.shtml|-- 15.shtml|-- 16.shtml|-- inc| |-- content1.shtml| |-- content2.shtml| |-- content3.shtml| |-- content4.shtml| |-- content5.shtml| |-- content6.shtml| |-- content7.shtml| |-- content8.shtml| |-- content9.shtml| |-- content10.shtml| |-- content11.shtml| |-- content12.shtml| |-- content13.shtml| |-- content14.shtml| |-- content15.shtml| |-- content16.shtml| |-- footer.shtml| |-- header.shtml| |-- nav.shtml| `-- validate.shtml`-- style.css
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
33 of 76 4/21/2010 3:52 PM
Breaking a page in half
This technique is not recommended. The first include file contains the top "half" of the page; the contentfollows; the second include file contains the bottom "half" of the page. In this technique, the html ,body, and
perhaps other elements are started in the header.shtml and their end tags are in footer.shtml. The
page delivered to the browser does validate, but the individual parts on the server are not well‐formed, whichcan cause some confusion when editing a file.
view plain print ?
<!--#include virtual="header-tophalf.shtml"--> 1. Lorem ipsum dolor sit amet, consectetuer adipiscing ... 2.<!--#include virtual="footer-bottomhalf.shtml" --> 3.
Keeping things well‐formed
view plain print ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2.<html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <title>The Great Binding Law, Gayanashagowa (Constitution of the Iroquois Nations)</title>
5.
<link rel="stylesheet" type="text/css" href="style.css" /> 6. </head> 7. <body> 8. <div id="header"> 9. <!--#include file="header.shtml"--> 10. </div> 11. <div id="navigation"> 12. <!--#include file="nav.shtml"--> 13. </div> 14. <div id="main"> 15. <!--#include file="1.shtml"--> 16. </div> 17. </body> 18.</html> 19.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
34 of 76 4/21/2010 3:52 PM
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
35 of 76 4/21/2010 3:52 PM
Pros
Easy to use
Widespread server support for SSI
Server‐side; not browser‐dependent
Less resource intensive than CGI
Simple, yet powerful.
Cons
Used appropriately, virtually none.
Limiting (compared to other, more complex andfull‐featured mechanisms to produce dynamiccontent)
Apache SSI Documentation
Apache Tutorial: Introduction to Server Side Includes
Apache module mod_include
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
36 of 76 4/21/2010 3:52 PM
Where am I?
Where can I go?
What is close by?
What is further away?
Where have I been?
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
37 of 76 4/21/2010 3:52 PM
view plain print ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2.<html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <title>The Great Binding Law, Gayanashagowa (Constitution of the Iroquois Nations)</title>
5.
<link rel="stylesheet" type="text/css" href="style.css" /> 6. </head> 7. <body> 8. <!--#include virtual="inc/header.shtml"--> 9. <!--#include virtual="inc/nav.shtml"--> 10. <div id="main"> 11. <!--#include virtual="inc/content1.shtml"--> 12. </div> 13. <!--#include virtual="inc/footer.shtml" --> 14. </body> 15.</html> 16.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
38 of 76 4/21/2010 3:52 PM
Strategy: Use id attribute on body element to identify each page. Use id attributes to uniquely identify
navigation items.
Options:
CSS rules for each page can be produced
Change id/class of navigation markup through JavaScript
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
39 of 76 4/21/2010 3:52 PM
>
Each body is uniquely identified (id)1.
Each navigation list item gets an id2.
CSS rules are built3.
Note the id of the body:
view plain print ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2.<html xmlns="http://www.w3.org/1999/xhtml"> 3.<head> 4.<title>Election of Pine Tree Chiefs (Constitution of the Iroquois Nations)</title> 5.<link rel="stylesheet" type="text/css" href="style.css" /> 6.</head> 7.<body id="part3"> 8. <!--#include virtual="inc/header.shtml"--> 9. <!--#include virtual="inc/nav.shtml"--> 10. <div id="main"> 11. <!--#include virtual="inc/content3.shtml"--> 12. </div> 13. <!--#include virtual="inc/footer.shtml" --> 14.</body> 15.</html> 16.
Each navigation item has an id:
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
40 of 76 4/21/2010 3:52 PM
view plain print ?
<div id="navigation"> 1.<ul id="mainnav"> 2.<li id="navpart1"><a href="1.shtml">The Great Binding Law, Gayanashagowa</a></li> 3.<li id="navpart2"><a href="2.shtml">Rights, Duties and Qualifications of Lords</a></li> 4.<li id="navpart3"><a href="3.shtml">Election of Pine Tree Chiefs</a></li> 5.<li id="navpart4"><a href="4.shtml">Names, Duties and Rights of War Chiefs</a></li> 6.<li id="navpart5"><a href="5.shtml">Clans and Consanguinity</a></li> 7.<li id="navpart6"><a href="6.shtml">Official Symbolism</a></li> 8.<li id="navpart7"><a href="7.shtml">Laws of Adoption</a></li> 9.<li id="navpart8"><a href="8.shtml">Laws of Emigration</a></li> 10.<li id="navpart9"><a href="9.shtml">Rights of Foreign Nations</a></li> 11.<li id="navpart10"><a href="10.shtml">Rights and Powers of War</a></li> 12.<li id="navpart11"><a href="11.shtml">Treason or Secession of a Nation</a></li> 13.<li id="navpart12"><a href="12.shtml">Rights of the People of the Five Nations</a></li> 14.<li id="navpart13"><a href="13.shtml">Religious Ceremonies Protected</a></li> 15.<li id="navpart14"><a href="14.shtml">The Installation Song</a></li> 16.<li id="navpart15"><a href="15.shtml">Protection of the House</a></li> 17.<li id="navpart16"><a href="16.shtml">Funeral Addresses</a></li> 18.</ul> 19.</div> 20.
And the CSS:
view plain print ?
#navigation a { 1. /* Rules for navigation items */ 2.} 3.#navigation a:hover { 4. /* Rules for navigation items */ 5.} 6. 7./* Rules specific for "you are here" for each page */ 8.#part3 #navigation #navpart3 a, 9.#part3 #navigation #navpart3 a:hover { 10. /* Rules for the "you are here" item */ 11.} 12.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
41 of 76 4/21/2010 3:52 PM
View this technique in action.
Each body is uniquely identified (id)1.
Each navigation list item gets an id2.
CSS rule for id="iamhere"3.
JavaScript to set the "iamhere" id4.
Note the id of the body:
view plain print ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2.<html xmlns="http://www.w3.org/1999/xhtml"> 3.<head> 4. <title>Election of Pine Tree Chiefs (Constitution of the Iroquois Nations)</title> 5. <!--#include virtual="inc/htmlhead.shtml" --> 6.</head> 7.<body id="part3"> 8. <!--#include virtual="inc/header.shtml"--> 9. <!--#include virtual="inc/nav.shtml"--> 10. <div id="main"> 11. <!--#include virtual="inc/content3.shtml"--> 12. </div> 13. <!--#include virtual="inc/footer.shtml" --> 14.</body> 15.</html> 16.
Each navigation item has an id:
view plain print ?
<div id="navigation"> 1.<ul id="mainnav"> 2.<li id="navpart1"><a href="1.shtml">The Great Binding Law, Gayanashagowa</a></li> 3.<li id="navpart2"><a href="2.shtml">Rights, Duties and Qualifications of Lords</a></li> 4.<li id="navpart3"><a href="3.shtml">Election of Pine Tree Chiefs</a></li> 5.<li id="navpart4"><a href="4.shtml">Names, Duties and Rights of War Chiefs</a></li> 6.<li id="navpart5"><a href="5.shtml">Clans and Consanguinity</a></li> 7.<li id="navpart6"><a href="6.shtml">Official Symbolism</a></li> 8.<li id="navpart7"><a href="7.shtml">Laws of Adoption</a></li> 9.<li id="navpart8"><a href="8.shtml">Laws of Emigration</a></li> 10.<li id="navpart9"><a href="9.shtml">Rights of Foreign Nations</a></li> 11.<li id="navpart10"><a href="10.shtml">Rights and Powers of War</a></li> 12.<li id="navpart11"><a href="11.shtml">Treason or Secession of a Nation</a></li> 13.<li id="navpart12"><a href="12.shtml">Rights of the People of the Five Nations</a></li> 14.<li id="navpart13"><a href="13.shtml">Religious Ceremonies Protected</a></li> 15.<li id="navpart14"><a href="14.shtml">The Installation Song</a></li> 16.<li id="navpart15"><a href="15.shtml">Protection of the House</a></li> 17.<li id="navpart16"><a href="16.shtml">Funeral Addresses</a></li> 18.</ul> 19.</div> 20.
And the CSS:
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
42 of 76 4/21/2010 3:52 PM
view plain print ?
#navigation a { 1. /* Rules for navigation items */ 2.} 3.#navigation a:hover { 4. /* Rules for navigation items */ 5.} 6. 7./* Rules specific for "you are here" */ 8.#navigation #iamhere a, 9.#navigation #iamhere a:hover { 10. /* Rules for the "you are here" item */ 11.} 12.
And the JavaScript (using jQuery) that finds the correct navigation item and sets the id attribute value to
"iamhere":
view plain print ?
$(document).ready(function(){ 1. var mybodyid = $('body').attr('id'); 2. var mynavid = '#nav' + mybodyid; 3. /* e.g. for 3.shtml: 4. mybodyid is 'part3' 5. mynavid is '#navpart3' 6. */ 7. $(mynavid).attr('id','iamhere'); 8.}); 9.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
43 of 76 4/21/2010 3:52 PM
External, transient (CGI Model)
Internal and persistent (e.g. PHP in Apache)
External and persistent (e.g. Servlet, FastCGI, mongrel (RoR))
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
44 of 76 4/21/2010 3:52 PM
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
45 of 76 4/21/2010 3:52 PM
program that outputs Web contentprograms with XHTML embedded
Web content that has embedded programmingXHTML with programs embedded
Separation of Concerns (SOC)MVC, Model‐View‐Controller.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
46 of 76 4/21/2010 3:52 PM
Markup or content is embedded within a program.
first.cgi
first.cgi
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.
second.cgi
second.cgi
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.
Here the "CGI.pm" Perl module creates tags with subroutine calls.
Perl code: h1("Hello, World!")
Becomes: <h1>Hello World!</h1>
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
47 of 76 4/21/2010 3:52 PM
third.cgi
third.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.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
48 of 76 4/21/2010 3:52 PM
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.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
49 of 76 4/21/2010 3:52 PM
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.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
50 of 76 4/21/2010 3:52 PM
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.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
51 of 76 4/21/2010 3:52 PM
PHP: Hypertext Processor
From the PHP manual:
PHP, which stands for "PHP: Hypertext Preprocessor" is a widely‐used Open Source general‐purpose scriptinglanguage that is especially suited for Web development and can be embedded into HTML. Its syntax drawsupon C, Java, and Perl, and is easy to learn. The main goal of the language is to allow web developers to writedynamically generated web pages quickly, but you can do much more with PHP.
Example
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.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
52 of 76 4/21/2010 3:52 PM
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, externalprocess). Some frameworks make using MVC possible, some hard, some easy, some insist on it.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
53 of 76 4/21/2010 3:52 PM
Template Toolkit
The Template Toolkit is a fast, powerful and easily extensible template processing system.
Dynamic
Build
HTTP Request is made1.Program retrieves data.2.Program processes Template Toolkit template, passing in the data taht was retrieved.3.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
54 of 76 4/21/2010 3:52 PM
Default delimiter for commands/expressions is:
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=[% my_url %]">[% TITLE %]</a></td>
7.
<td class="desc"> 8. [% BRIEF_DESC | truncate_words | ucfirst %] 9. <a href="search.cgi?action=view_detail&funding_id=[% FUNDING_ID %]&back_link=[% my_url %]"><more></a>
10.
</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.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
55 of 76 4/21/2010 3:52 PM
Smarty Templates
Crash Course
Smarty Manual
Smarty Cheat Sheet
Conferences and Schools
index.php?conference=Ivy%20Group&view=list
index.php?conference=Ivy%20Group&view=grid
index.php?conference=Big%2012%20Conference&view=list
index.php?conference=Big%2012%20Conference&view=grid
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
56 of 76 4/21/2010 3:52 PM
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
57 of 76 4/21/2010 3:52 PM
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.xml file, 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.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
58 of 76 4/21/2010 3:52 PM
XML Data
Initially, the data is in an XML format.
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.
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:
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
59 of 76 4/21/2010 3:52 PM
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
60 of 76 4/21/2010 3:52 PM
Snipped of template:
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.
Note use of "escape" funtion that will escape necessary characters into character entities (e.g. & become&)
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
61 of 76 4/21/2010 3:52 PM
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
62 of 76 4/21/2010 3:52 PM
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:
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.
Navigation markup after processing:
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. Athletic Conf.</a>
6.
</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.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
63 of 76 4/21/2010 3:52 PM
Note use of "include" directives for:
header.tpl
foote.tpl
navigation.tpl
altviews.tpl
view plain print ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
1.
<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.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
64 of 76 4/21/2010 3:52 PM
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
65 of 76 4/21/2010 3:52 PM
view plain print ?
<?php 1. 2.function sortname($a,$b) { 3. return strcmp($a->firstname, $b->firstname); 4.} 5.function getAttribute($elem,$name){ 6. $attrs = $elem->attributes(); 7. return $attrs[$name]; 8.} 9. // The file test.xml contains an XML document with a root element 10. // and at least an element /[root]/title. 11. 12.$file = './conferences.xml'; 13.if (file_exists($file)) { 14. $xml = simplexml_load_file($file); 15. } else { 16. exit('Failed to open '.$file); 17. } 18. 19.require('/usr/local/lib/php/Smarty/Smarty.class.php'); 20.// create object 21.$smarty = new Smarty; 22.$smarty->template_dir = './'; 23.$smarty->compile_dir = './templates_compile'; 24.//$smarty->config_dir = './smarty_configs'; 25. 26.$schools = array(); 27.$i = 0; 28. 29.$res1 = $_GET['conference'] == ''; 30. 31.$conferencesmap = array(); 32.foreach($xml as $s => $val) { 33. foreach($val->attributes() as $k => $v) { 34. if ((string) $k == 'conference') { 35. $conferencesmap[(string)$v]++; 36. } 37. } 38.} 39.$conferences = array_keys($conferencesmap); 40.sort($conferences); 41. 42.// In PHP, you access GET parameters with $_GET[] 43.foreach($xml as $p => $val) { 44. if ($_GET['conference'] != '' 45. and 46. $_GET['conference'] != 'ANY' 47. and 48. (string) getAttribute($val,'conference') != $_GET['conference']) { 49. continue; 50. } 51. foreach($val->attributes() as $k => $v) { 52. $schools[$i][$k] = (string) $v; 53. } 54. $i++; 55.} 56. 57.// which template to call? 58.$view = 'list'; 59.if ( $_GET['view'] != '' ) { 60. $view = $_GET['view']; 61. } 62. 63.$smarty->assign('schools', $schools); 64.$smarty->assign('conferences', $conferences); 65. 66.// display it 67.$smarty->display($view.'.tpl'); 68. 69.?> 70.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
66 of 76 4/21/2010 3:52 PM
http://cscis12.dce.harvard.edu/cgi/courses/departments.php
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
67 of 76 4/21/2010 3:52 PM
Data Table
Course data for Faculty of Arts & Sciences is in a mysql database on morpheus (username: class; databasename: coursecatalog)
morpheus$ 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.
SQL
SQL statement: select distinct department_short from courses
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
68 of 76 4/21/2010 3:52 PM
mysql> select distinct department_short from courses; 1.+----------------------------------------------------------+ 2.| department_short | 3.+----------------------------------------------------------+ 4.| African and African American Studies | 5.| Anthropology | 6.| Architecture, Landscape Architecture, and Urban Planning | 7.| Asian Studies Program | 8.| Astronomy | 9.| Biological Sciences in Dental Medicine | 10.| Biological Sciences in Public Health | 11.| Biophysics | 12.| Biostatistics | 13.| Celtic Languages and Literatures | 14.| Chemical Biology | 15.| Chemical and Physical Biology | 16.| Chemistry | 17.| Comparative Literature | 18.| Core Curriculum | 19.| Dramatic Arts | 20.| Earth and Planetary Sciences | 21.| East Asian Languages and Civilizations | 22.| Economics | 23.| Engineering and Applied Sciences | 24.| English and American Literature and Language | 25.| Environmental Science and Public Policy | 26.| Expository Writing | 27.| Folklore and Mythology | 28.| Freshman Seminars | 29.| Germanic Languages and Literatures | 30.| Government | 31.| Health Policy | 32.| History | 33.| History and Literature | 34.| History of American Civilization | 35.| History of Art and Architecture | 36.| History of Science | 37.| House Seminars | 38.| Humanities | 39.| Life Sciences | 40.| Linguistics | 41.| Literature | 42.| Mathematics | 43.| Medical Sciences | 44.| Medieval Studies | 45.| Molecular and Cellular Biology | 46.| Music | 47.| Near Eastern Languages and Civilizations | 48.| Neurobiology | 49.| Organismic and Evolutionary Biology | 50.| Philosophy | 51.| Physical Sciences | 52.| Physics | 53.| Psychology | 54.| Romance Languages and Literatures | 55.| Sanskrit and Indian Studies | 56.| Slavic Languages and Literatures | 57.| Social Policy | 58.| Social Studies | 59.| Sociology | 60.| Special Concentrations | 61.| Statistics | 62.| Studies of Women, Gender, and Sexuality | 63.| Systems Biology | 64.| The Classics | 65.| The Study of Religion | 66.| Ukrainian Studies | 67.| Visual and Environmental Studies | 68.+----------------------------------------------------------+ 69.64 rows in set (0.07 sec) 70.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
69 of 76 4/21/2010 3:52 PM
Smartyis a Template Engine for PHP, which allows you to write Templates for your PHP data (similar to Perl'sTemplate Toolkit)
The template (departments.tpl):
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.
Get the departments: smarty‐dept.php
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
70 of 76 4/21/2010 3:52 PM
view plain print ?
<?php 1./* ================================================== 2. Database Stuff 3. ================================================== */ 4.// Connecting, selecting database 5.$link = mysql_connect('localhost', 'class', '') 6. or die('Could not connect: ' . mysql_error()); 7. 8.mysql_select_db('coursecatalog') or die('Could not select database'); 9.// Performing SQL query 10.$query = 'SELECT distinct department_short, department_code FROM courses order by departme11.$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. 17./* ================================================== 18. Smarty Template Stuff 19. ================================================== */ 20.require('/usr/local/lib/php/Smarty/Smarty.class.php'); 21.// create object 22.$smarty = new Smarty; 23.$smarty->template_dir = './smarty_templates'; 24.$smarty->compile_dir = '/tmp/smarty/templates_c'; 25.$smarty->cache_dir = '/tmp/smarty/cache'; 26.$smarty->config_dir = './smarty_configs'; 27. 28.$smarty->assign('dept', $results); 29. 30.// display it 31.$smarty->display('departments.tpl'); 32. 33./* ================================================== 34. Cleanup 35. ================================================== */ 36.// Free resultset 37.mysql_free_result($res); 38.// Closing connection 39.mysql_close($link); 40.?> 41.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
71 of 76 4/21/2010 3:52 PM
The template (courses.tpl):
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.
Get the Courses for the CHEM department: smarty‐courses.php?department_code=CHEM
The SQL:
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
72 of 76 4/21/2010 3:52 PM
smarty‐course.php:
view plain print ?
<?php 1./* ================================================== 2. Database Stuff 3. ================================================== */ 4.// Connecting, selecting database 5.$link = mysql_connect('localhost', 'class', '') 6. or die('Could not connect: ' . mysql_error()); 7.mysql_select_db('coursecatalog') or die('Could not select database'); 8. 9.// Performing SQL query 10.$query = 'SELECT course_group_long, num_int, num_char, term, title, description'; 11.$query .= ' from courses where department_code = '; 12.$query .= "'".mysql_escape_string($_GET['department_code'])."'"; 13.$query .= ' order by course_group_long, num_int, num_char, title'; 14.$res = mysql_query($query) or die('Query failed: ' . mysql_error()); 15.$i = 0; 16.while ($row = mysql_fetch_array($res, MYSQL_ASSOC)) { 17. $results[$i++] = $row; 18.} 19. 20. 21./* ================================================== 22. Smarty Template Stuff 23. ================================================== */ 24.require('/usr/local/lib/php/Smarty/Smarty.class.php'); 25.// create object 26.$smarty = new Smarty; 27.// pass the results to the template 28.$smarty->assign('courses', $results); 29.$smarty->assign('department_code', $_GET['department_code']); 30. 31.$smarty->template_dir = './smarty_templates'; 32.$smarty->compile_dir = '/tmp/smarty/templates_c'; 33.$smarty->cache_dir = '/tmp/smarty/cache'; 34.$smarty->config_dir = './smarty_configs'; 35. 36.// display it 37.$smarty->display('courses.tpl'); 38. 39./* ================================================== 40. Cleanup 41. ================================================== */ 42.// Free resultset 43.mysql_free_result($res); 44.// Closing connection 45.mysql_close($link); 46.?> 47.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
73 of 76 4/21/2010 3:52 PM
Mixing of concerns instead of SOC. This particular example is with PHP, but you can easily achieve "entanglingof 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
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 dep18. $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_short]</a></td>";
25.
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.
courses.php
http://cscie12.dce.harvard.edu/cgi/courses/courses.php?department_code=CHEM
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
74 of 76 4/21/2010 3:52 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.
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
75 of 76 4/21/2010 3:52 PM
Copyright © 1998‐2010 David P. Heitmeyer
Let me know what topics you'd like in the Grab Bag!
Topics in there so far:
Web 2.0 and Mashups
Web Content Management Systems (CMS, WCM)
Mobile Web
HTML 5
Web Site Analytics
Search
©opyright (and left)
Security and Privacy (SSL, XSS, Phishing, PICS)
Microformats
Infrastructure as Service (Google, Yahoo! and Amazon services)
Table of Contents | All‐in‐One | Link List | Examples | Lecture Notes Home | CSCI E‐12 Home
CSCI E-12 - April 21, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100421/handout.html
76 of 76 4/21/2010 3:52 PM