Transcript slides
Class 32: Vocational Skills
(How to Build a Dynamic
Web Site)
CS200: Computer Science
University of Virginia
Computer Science
David Evans
http://www.cs.virginia.edu/~evans
Menu
• Building a Dynamic Web Site
Job listings at dice.com:
• SQL
• PHP
• HTML
Scheme
10 April 2002
4229
$80-250K
60
~$60K
1417
~$40K
1
CS 200 Spring 2002
2
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
10 April 2002
CS 200 Spring 2002
3
HTML
• Language for controlling presentation of
web pages
• Uses formatting tags enclosed between <
and >
• Not a powerful language – no way to make
procedures or jump
10 April 2002
CS 200 Spring 2002
4
HTML Grammar Excerpt
Document ::= <html> Header Body </html>
Header ::= <head> HeadElements </head>
HeadElements ::= HeadElement HeadElements
HeadElements ::=
HeadElement ::= <title> Element </title>
Body ::= <body> Elements </body>
Elements ::= Element Elements
Elements ::=
Element ::= <p>Element</p>
Make the inner element a paragraph.
Element ::= <center>Element</center>
Center the element horizontally on the page.
Element ::= <b>Element</b>
Display the element in bold.
Element ::= Text
10 April 2002
CS 200 Spring 2002
5
Dynamic Web Sites
10 April 2002
CS 200 Spring 2002
6
Dynamic Web Site
Server
GET /cs200/notes/presidents.php3
<html>
<head>
…
Client (Browser)
10 April 2002
CS 200 Spring 2002
7
Dynamic Web Site
Client
GET /cs200/notes/presidents.php3
File Server
Read
~evans/public_html/cs200/notes/presidents.php3
Request
Processor
10 April 2002
<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";
CS 200 Spring 2002 $dbName = "dee2b_presidents";
8
…
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
10 April 2002
CS 200 Spring 2002
9
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
10 April 2002
CS 200 Spring 2002
10
Learning New Languages
• Syntax
– Where the {, ;, $, etc. all go
– If you can read a BNF grammar, this should
be easy
• Semantics
– What does it mean
– Learning the evaluation rules
– Harder, but most programming languages
have very similar evaluation rules
10 April 2002
CS 200 Spring 2002
11
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.
10 April 2002
CS 200 Spring 2002
12
PHP Example
Assignment: (define i 1) or (set! i 1)
$i = 1;
$a = 1; $i is a variable (all variables start with $)
$b = 1;
while ($i <= 10) {
print "Fibonacci $i = $b<br>";
$next = $a + $b;
$a = $b;
$b = $next;
$i = $i + 1;
};
Instruction ::= while (Expression) { Instructions }
10 April 2002
As long as Expression evaluates to true, keep
doing Instructions.
CS 200 Spring 2002
13
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
10 April 2002
CS 200 Spring 2002
14
<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
10 April 2002
CS 200 Spring 2002
15
SQL
• Structured Query Language (SQL)
– (Almost) all databases use it
• Database is tables of fields containing
values
number
lastname
1
Washington George
2
Adams
John
Harvard
3
Jefferson
Thomas
William and Mary
10 April 2002
firstname college
CS 200 Spring 2002
16
SQL Commands
• Create a table
create table presidents (
number int primary key, primary key – used to uniquely
select and entry in the table
lastname varchar(100),
firstname varchar(100),
college varchar(100),
all fields must have a type
startdate date,
int – integer
varchar(n) – string of up to n characters
enddate date
);
presidents
number lastname
10 April 2002
firstname college startdate enddate
CS 200 Spring 2002
17
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
number lastname
3
10 April 2002
firstname college startdate enddate
Jefferson Thomas
William
and Mary
CS 200 Spring 2002
1801-03-04 1809-03-03
18
SQL: Select
SelectQuery ::= SELECT fields FROM table joinClause
[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;
10 April 2002
CS 200 Spring 2002
19
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;
10 April 2002
CS 200 Spring 2002
20
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");
10 April 2002
CS 200 Spring 2002
21
$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:[email protected]"><em>[email protected]</em></a>
</body></html>
10 April 2002
CS 200 Spring 2002
22
The Resulting Page
10 April 2002
CS 200 Spring 2002
23
This is Powerful
• Just change the query to get a new page
$result = mysql_query("SELECT lastname, firstname FROM
presidents WHERE college='William and Mary' ORDER BY
lastname");
• Query can be a string generated by your
program!
– Based on user input and hyperlink clicks
• See the example site
10 April 2002
CS 200 Spring 2002
24
Charge
• For Friday: come up with at least one idea
for a dynamic web site
• You will describe your idea at the
beginning of class Friday, then work in
groups to settle on project ideas
10 April 2002
CS 200 Spring 2002
25