David Evans cs.virginia/evans

Class 29: Vocational Skills How to Build a Dynamic Web Site David Evans http://www.cs.virginia.edu/evans CS200: Computer Science University of Virginia Computer Science

Menu • Building a Dynamic Web Site SQL PHP HTML LISP Scheme Job listings atmonster.com: ~8000 $80-250K 215 ~$65K 3611 ~$40K 9 0 CS 200 Spring 2003

Today’s Aberrant Class • Covers topics primarily selected for their practical (not intellectual) value • Covers material found in “for dummies” books CS 200 Spring 2003

HyperText Transfer Protocol Server GET /cs200/index.html HTTP/1.0 <html> <head> … Contents of file Client (Browser) HTML – hypertext markup language Way of describing hypertext documents CS 200 Spring 2003

HTML: HyperText Markup Language • Language for controlling presentation of web pages • Uses formatting tags • Enclosed between < and > • Not a powerful language (we will learn what this means more precisely next week) • no way to make procedures or jump CS 200 Spring 2003

HTML Grammar Excerpt Document ::= <html>HeaderBody</html>Header ::= <head>HeadElements</head>HeadElements ::= HeadElementHeadElementsHeadElements ::=HeadElement ::= <title>Element</title> Body ::= <body>Elements</body>Elements ::= ElementElementsElements ::=Element ::= <p> Element </p>Make Element a paragraph.Element ::= <center> Element </center>Center Element horizontally on the page.Element ::= <b> Element </b> Display Element in bold.Element ::= Text What is a HTML interpreter? CS 200 Spring 2003

Dynamic Web Sites • Programs that run on the client’s machine • Java, JavaScript, Flash, etc.: language must be supported by the client’s browser (so they are usually flaky and don’t work for most visitors) • Used (almost exclusively) to make annoying animations to make advertisements more noticeable • Programs that run on the web server • Can be written in any language, just need a way to connect the web server to the program • Program generates regular HTML – works for everyone • (Almost) Every useful web site does this CS 200 Spring 2003

Dynamic Web Site Server GET /cs200/notes/presidents.php3 <html> <head> … Client (Web Browser) “HTML Interpreter” CS 200 Spring 2003

Dynamic Web Site Client GET /cs200/notes/presidents.php3 File Server Read ~evans/public_html/cs200/notes/presidents.php3 Request Processor <html> <head><title>Presidents of the United States</title></head> <body> <h1>Presidents of the United States</h1> <p> <? $hostName = "dbm1.itc.virginia.edu"; $userName = "dee2b"; $password = "quist"; $dbName = "dee2b_presidents"; … CS 200 Spring 2003

Processing a GET Request <html> <head><title>Presidents of the United States</title></head> <body> <h1>Presidents of the United States</h1> <p> <? $hostName = "dbm1.itc.virginia.edu"; $userName = "dee2b"; $password = "quist"; $dbName = "dee2b_presidents"; … • Regular HTML: • Send through to client • PHP Code: (inside <? … ?>) • Evaluate using PHP evaluator, send result to client to Client PHP Evaluator CS 200 Spring 2003

PHP Code • A universal programming language • Everything you can do in Scheme you can do in PHP • Everything you can do in PHP, you can do in Scheme • Imperative Language • Designed to support a style of programming where most of the work is done using assignment CS 200 Spring 2003

Learning New Languages • Syntax: Where the {, ;, $, etc. all go • If you can understand a BNF grammar, this is easy • Semantics: What does it mean • Learning the evaluation rules • Harder, but most programming languages have very similar evaluation rules • Style • What are the idioms and customs of experienced programmers in that language? • Takes many years to learn • Need it to be a “professional” PHP programmer, but not to make a useful program CS 200 Spring 2003

PHP If Instruction ::= if (Expression) {Instructions} Evaluate Expression. If it evaluates to true, evaluate the Instructions. It is similar to (if Expression (begin Instructions)) Difference is what “true” means. In Scheme, it means anything that is not #f. In PHP it means anything that is not 0, the empty string, or a few other things. CS 200 Spring 2003

PHP Example Assignment: (define i 1) or (set! i 1) $i is a variable (all variables start with $) $i = 1; $a = 1; $b = 1; while ($i <= 10) { print "Fibonacci $i = $b<br>"; $next = $a + $b; $a = $b; $b = $next; $i = $i + 1; } ; Instruction ::= while (Expression) {Instructions} As long as Expressionevaluates to true, keep doing Instructions. CS 200 Spring 2003

Using a Database • Web requests are stateless • No history of information from previous requests • To do something useful, we probably need some state that changes as people visit the site • That’s what databases are for – store, manipulate, and retrieve data CS 200 Spring 2003

<html> <head><title>Presidents of the United States</title></head> <body> <h1>Presidents of the United States</h1> <p> <? $hostName = "dbm1.itc.virginia.edu"; $userName = "dee2b"; $password = "quist"; $dbName = "dee2b_presidents"; … • Regular HTML: • Send through to client • PHP Code: (inside <? … ?>) • Evaluate using PHP evaluator, send result to client to Client PHP Evaluator Values SQL Command Database CS 200 Spring 2003

SQL • Structured Query Language (SQL) • (Almost) all databases use it • Database is tables of fields containing values William and Mary CS 200 Spring 2003

SQL Commands • Create a table create table presidents ( number int primary key, lastname varchar(100), firstname varchar(100), college varchar(100), startdate date, enddate date ) ; primary key – used to uniquely select and entry in the table all fields must have a type int – integer varchar(n) – string of up to n characters presidents CS 200 Spring 2003

SQL: Add Entry insert into presidents (number, lastname, firstname, college, startdate, enddate) values(3, 'Jefferson', 'Thomas', 'William and Mary', '1801-03-04', '1809-03-03'); presidents CS 200 Spring 2003

SQL: Select SelectQuery ::= SELECT fields FROM tablejoinClause [WHERE conditions] [ORDER BY field [DESC]] SELECT * FROM presidents; SELECT lastname FROM presidents; SELECT lastname, firstname FROM presidents ORDER BY lastname; SELECT lastname, firstname FROM presidents WHERE college=‘William and Mary’ ORDER BY lastname; CS 200 Spring 2003

Nesting Selects • SELECT evaluates to a table, so of course, we can SELECT from that table SELECT lastname, firstname FROM (SELECT * FROM presidents WHERE college=‘William and Mary’) ORDER BY lastname; CS 200 Spring 2003

Problem Set 8 • Due last day of class • Either a presentation/demo (your site works) • Report (your site doesn’t work) • Do something interesting enough you will keep it going after the class • If your team has a project listed on the PS8 handout, you already have a good topic • If not, by 5:00PM Monday you need to: • Either convince me the idea you sent earlier is interesting enough • Or, think of a new, more exciting idea CS 200 Spring 2003

Cracking the Cracker Barrel CS 200 Spring 2003

SQL in PHP in HTML <html> <head><title>Presidents of the United States</title></head> <body> <h1>Presidents of the United States</h1> <p> <? $hostName = "dbm1.itc.virginia.edu"; $userName = "dee2b"; $password = "quist"; $dbName = "dee2b_presidents"; mysql_connect($hostName, $userName, $password) or exit("Unable to connect to host $hostName"); mysql_select_db($dbName) or exit("Database $dbName does not exist on $hostName"); $result = mysql_query("SELECT lastname, firstname FROM presidents WHERE college='William and Mary' ORDER BY lastname"); CS 200 Spring 2003

$numrows = mysql_num_rows($result); $numcols = mysql_num_fields($result); print "<table border=0 cellpadding=5>"; print "<tr>"; for ($k = 0; $k < $numcols; $k = $k + 1) { print "<th>" . mysql_field_name ($result, $k) . "</th>"; } print "</tr>"; for ($i = 0; $i < $numrows; $i++) { // $i++ is short for $i = $i + 1 for ($j = 0; $j < $numcols; $j++) { print "<td>" . mysql_result ($result, $i, $j) . "</td>"; } print "</tr>"; } print "</table>"; mysql_close(); // Close the database connection ?> <p><hr> <a href="mailto:evans@cs.virginia.edu"><em>evans@cs.virginia.edu</em></a> </body></html> CS 200 Spring 2003

The Resulting Page CS 200 Spring 2003

This is Powerful • Just change the query to get a new page • Query can be a string generated by your program! • Based on user input and hyperlink clicks • See the example site $result = mysql_query("SELECT lastname, firstname FROM presidents WHERE college='William and Mary' ORDER BY lastname"); CS 200 Spring 2003

Charge • PS8: Out Today • Some teams have project idea already (if it is listed with your team) • Other teams need to think of a better idea (or convince me the idea you sent already is exciting enough that you will want to keep using it after class ends) • Design Reviews: sign up Wednesday • Due 28 April (last day of class) • Either get it working enough to demo or turn in a written report CS 200 Spring 2003

David Evans cs.virginia/evans