Course sta Instructor email: Course Web Site: Extension ... · 4/21/2010 · A form for lecture...

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: [email protected] staff email: [email protected]

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


2 of 76 4/21/2010 3:52 PM


3 of 76 4/21/2010 3:52 PM


4 of 76 4/21/2010 3:52 PM

Redirect

Data Collection

Email

Database

Search


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


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

email

redirect

required

sort

env_report

print_config

print_blank_fields

...see documentation for complete list


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="[email protected]"/> 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


8 of 76 4/21/2010 3:52 PM


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="[email protected]"/> 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


10 of 76 4/21/2010 3:52 PM

Your Name:

What ice cream do you like?

Chocolate

Vanilla

Strawberry


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.  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


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:


13 of 76 4/21/2010 3:52 PM


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


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


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, ...


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.


18 of 76 4/21/2010 3:52 PM


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.  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


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


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: <br/> 2.Server Name: <br/> 3.Last Modified: <br/> 4.Server Admin: <br/> 5.</div> 6.

Markup Screenshot


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. ) </div> 3.

Markup Screenshot


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: <br/> 2. 3.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. ()<br/> 2. 3.<a href="constitution/us_consitution.pdf" shape="rect">US Constitution in PDF</a> 4. ( bytes)<br/> 5. 6.<a href="constitution/us_consitution.pdf" shape="rect">US Constitution in PDF</a> 7. ()<br/> 8.</div> 9.

Example 12.12 ‐ SSI and errors ‐ View example by itself

Markup Screenshot

Markup Screenshot

Markup Screenshot


24 of 76 4/21/2010 3:52 PM

view plain print ?

<div> 1.<p>The first SSI error:<br/> 2.</p> 3.<p>The second SSI error, with a configured message:<br/> 4. 5.<br/> 6.</p> 7.<p>The third SSI error, with a configured message of "null":<br/> 8. 9. 10.</p></div> 11.


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"></pre> 3.</div> 4.

Markup Screenshot


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. 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. 2.Location: http://<br/> 3.Last modified: <br/> 4.Contact:  5.</div> 6.

Markup Screenshot

Markup Screenshot


27 of 76 4/21/2010 3:52 PM

This is usually off for security purposes.


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.


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.  12. </div> 13. <div id="content"> 14.  15. <div id="main"> 16. <div id="notices"> 17.  18. </div> 19. <h2>About PRISE</h2> 20. <p>The May 2007 Report ...</p> 21. <p>For more information ...</p> 22. <div class="footer"> 23.  24. </div> 25. </div> 26. </div> 27. </div> 28.</body> 29.</html> 30.


30 of 76 4/21/2010 3:52 PM

Iroquois Constitution

Iroquois Constitution Zip File containing XHTML, CSS, and "Include" files.


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.  9.  10. <div id="main"> 11.  12. </div> 13.  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


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


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 ?

 1. Lorem ipsum dolor sit amet, consectetuer adipiscing ... 2. 3.

Keeping things well‐formed

view plain print ?


5.

<link rel="stylesheet" type="text/css" href="style.css" /> 6. </head> 7. <body> 8. <div id="header"> 9.  10. </div> 11. <div id="navigation"> 12.  13. </div> 14. <div id="main"> 15.  16. </div> 17. </body> 18.</html> 19.


34 of 76 4/21/2010 3:52 PM


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


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?


37 of 76 4/21/2010 3:52 PM

view plain print ?


5.

<link rel="stylesheet" type="text/css" href="style.css" /> 6. </head> 7. <body> 8.  9.  10. <div id="main"> 11.  12. </div> 13.  14. </body> 15.</html> 16.


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


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.  9.  10. <div id="main"> 11.  12. </div> 13.  14.</body> 15.</html> 16.

Each navigation item has an id:


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.


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.  6.</head> 7.<body id="part3"> 8.  9.  10. <div id="main"> 11.  12. </div> 13.  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:


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.


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))


44 of 76 4/21/2010 3:52 PM


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.


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>


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.


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.


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.


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.


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.


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.


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.


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.  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.


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


56 of 76 4/21/2010 3:52 PM


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.


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.  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:


59 of 76 4/21/2010 3:52 PM


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&)


61 of 76 4/21/2010 3:52 PM


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 ?

 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. 17.


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.  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.


64 of 76 4/21/2010 3:52 PM


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.


66 of 76 4/21/2010 3:52 PM

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


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


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.


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


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.


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:


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.


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


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.


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


76 of 76 4/21/2010 3:52 PM

Date post:	11-Jun-2020
Category:	Documents
Upload:	others
View:	0 times
Download:	0 times