Class 29: Vocational Skills How to Build a Dynamic Web Site David Evans
advertisement
Class 29: 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 monster.com:
SQL
PHP
HTML
LISP
Scheme
4 April 2003
~8000
$80-250K
215
~$65K
3611
~$40K
9
0
CS 200 Spring 2003
2
Today’s Aberrant Class
• Covers topics primarily selected for their
practical (not intellectual) value
• Covers material found in “for dummies”
books
4 April 2003
CS 200 Spring 2003
3
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
4 April 2003
CS 200 Spring 2003
4
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
4 April 2003
CS 200 Spring 2003
5
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 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?
4 April 2003
CS 200 Spring 2003
6
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
4 April 2003
CS 200 Spring 2003
7
Dynamic Web Site
Server
GET /cs200/notes/presidents.php3
<html>
<head>
…
Client (Web Browser)
“HTML Interpreter”
4 April 2003
CS 200 Spring 2003
8
Dynamic Web Site
Client
GET /cs200/notes/presidents.php3
File Server
Read
~evans/public_html/cs200/notes/presidents.php3
Request
Processor
4 April 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";
CS 200 Spring 2003 $dbName = "dee2b_presidents";
9
…
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
4 April 2003
CS 200 Spring 2003
10
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
4 April 2003
CS 200 Spring 2003
11
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
4 April 2003
CS 200 Spring 2003
12
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.
4 April 2003
CS 200 Spring 2003
13
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 }
4 April 2003
As long as Expression evaluates to true, keep
doing Instructions.
CS 200 Spring 2003
14
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
4 April 2003
CS 200 Spring 2003
15
<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
4 April 2003
CS 200 Spring 2003
16
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
4 April 2003
firstname college
CS 200 Spring 2003
17
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
4 April 2003
firstname college startdate enddate
CS 200 Spring 2003
18
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
4 April 2003
firstname college startdate enddate
Jefferson Thomas
William
and Mary
CS 200 Spring 2003
1801-03-04 1809-03-03
19
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;
4 April 2003
CS 200 Spring 2003
20
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;
4 April 2003
CS 200 Spring 2003
21
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
4 April 2003
CS 200 Spring 2003
22
Cracking the Cracker Barrel
4 April 2003
CS 200 Spring 2003
23
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");
4 April 2003
CS 200 Spring 2003
24
$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>
4 April 2003
CS 200 Spring 2003
25
The Resulting Page
4 April 2003
CS 200 Spring 2003
26
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
4 April 2003
CS 200 Spring 2003
27
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
4 April 2003
CS 200 Spring 2003
28
