Web Programming
Week 1
Old Dominion University
Department of Computer Science
CS 418/518 Fall 2010
Martin Klein <mklein@cs.odu.edu>
8/31/10
Goals
• We will learn to work in the LAMP
environment:
PHP - PHP: Hypertext Preprocessor
PHP - PHP: Hypertext Preprocessor
PHP - PHP: Hypertext Preprocessor
PHP - PHP: Hypertext Preprocessor
.
.
.
No MS Environments!
Goals
• Demonstrate LAMP proficiency with a
semester long project based on a bulletin
board system.
• Some examples:
–
–
–
–
http://tt.tennis-warehouse.com/
http://boards.caazone.com/
http://www.fordfe.com/
http://www.techsideline.com/forums.htm
Prerequisites
• I assume you know:
–
–
–
–
how to program in some (imperative) language
basic Internet/WWW concepts
basic HTML
basic relational database concepts
Who Should Take This Class?
• This class will cover breadth, not depth
• If you want to learn more about:
– System administration
• CS 454/554 Network Management
– HTTP
• CS 495/595 Web Server Design
– databases
• CS 450/550 Database Concepts
• CS 419/519 Internet Databases
• and many others….
– Java
• CS 695 Java & XML
st
1
Mandatory Class of the
Semester Slide
• This is a programming class!
– I assume you know how to program
– your grade will be determined solely on your program’s
performance on 4 different checkpoints through the semester
• Attendance is not mandatory
– But don’t waste your and my time!
• You will work in teams of 1 or 2
– (grad + undergrad teams are possible)
• Pick teams wisely
– teams will exist by mutual consent only
– at any time, teams can split up, but no new teams will be formed
after the first assignment is due
– ex-team members will have access to their shared code base
st
1
Mandatory Class of the
Semester Slide #2
• Important URLs
– http://www.cs.odu.edu/~mklein/teaching/cs518-f10/
– http://groups.google.com/group/cs518-f10
• Class homepage:
– Readings are listed under the day they are expected to be completed
– assignments are listed under the day they will be demoed in class
(attendance)
– each group will give a 3-4 minute status report the week before an
assignment is due! (attendance)
• All development will be done on a shared Linux machine
– mln-web.cs.odu.edu
• TA: tbd
Grading, aka Mandatory 1st Class of
the Semester Slide #3
• 4 programs, 23 points each
– 17 points for functional requirements
– 3 points voted on by other groups for aesthetic
appeal
– 3 points for in-class status report the week prior
to the assignment’s due date
• 8 remaining points come from each group
asking or answering 8 technical questions
about the assignments on the email list
– no points for duplicate questions or answers!
HTTP Operation
request = (method, URI, version, “MIME-like” message)
Client
response = (version, success/error code, “MIME-like” message)
Origin
Server
Lots of HTTP Methods…
•
•
•
•
•
•
•
GET, HEAD
TRACE
– for debugging
OPTIONS
– what methods are defined on this URI?
DELETE
– rarely supported for most URIs
PUT
– also rarely supported
– unix semantics: % echo “hello world” > temp.txt
POST
– commonly supported
– unix semantics: % echo “hello world” | spell
Want to learn more? read RFC-2616
– http://www.ietf.org/rfc/rfc2616.txt
Talking to HTTP servers…
mk$ curl --head www.cs.odu.edu/~mklein/
HTTP/1.1 200 OK
Date: Wed, 13 Jan 2010 15:36:09 GMT
Server: Apache/2.2.14 (Unix) DAV/2 PHP/5.2.11
Last-Modified: Mon, 11 Jan 2010 01:38:15 GMT
ETag: "640e2a-552-47cd9974d0fd9"
Accept-Ranges: bytes
Content-Length: 1362
Content-Type: text/html
“curl” is convenient, but
speaking raw HTTP is
more fun…
mk$ curl --head www.google.com/
HTTP/1.1 200 OK
Date: Wed, 13 Jan 2010 15:43:10 GMT
Expires: -1
Cache-Control: private, max-age=0
Content-Type: text/html; charset=ISO-8859-1
Set-Cookie: PREF=ID=93c27673a367c338:TM=1263397390:LM=1263397390:S=akzlDIbyLg9rjmww;
expires=Fri, 13-Jan-2012 15:43:10 GMT; path=/; domain=.google.com
Server: gws
Transfer-Encoding: chunked
GET
mk$ telnet www.cs.odu.edu 80
Trying 128.82.4.2...
Connected to xenon.cs.odu.edu.
Escape character is '^]'.
GET /~mklein/index.html HTTP/1.1
Connection: close
Host: www.cs.odu.edu
Request
(ends w/ CRLF)
HTTP/1.1 200 OK
Date: Wed, 13 Jan 2010 14:51:57 GMT
Server: Apache/2.2.14 (Unix) DAV/2 PHP/5.2.11
Last-Modified: Mon, 11 Jan 2010 01:38:15 GMT
ETag: "640e2a-552-47cd9974d0fd9"
Accept-Ranges: bytes
Content-Length: 1362
Connection: close
Content-Type: text/html
Response
<html>
<head><title>Martin Klein -- Old Dominion University</title></head>
<body>
…
[lots of html deleted]
…
</html>
Connection closed by foreign host.
HEAD
mk$ telnet www.cs.odu.edu 80
Trying 128.82.4.2...
Connected to xenon.cs.odu.edu.
Escape character is '^]'.
HEAD /~mklein/index.html HTTP/1.1
Connection: close
Host: www.cs.odu.edu
HTTP/1.1 200 OK
Date: Wed, 13 Jan 2010 15:46:43 GMT
Server: Apache/2.2.14 (Unix) DAV/2 PHP/5.2.11
Last-Modified: Mon, 11 Jan 2010 01:38:15 GMT
ETag: "640e2a-552-47cd9974d0fd9"
Accept-Ranges: bytes
Content-Length: 1362
Connection: close
Content-Type: text/html
Connection closed by foreign host.
POST
• Typically the result of HTML “Forms”
– http://www.w3.org/TR/REChtml40/interact/forms.html#h-17.13.4
• Two types of values in the client’s “Contenttype” request header:
– application/x-www-form-urlencoded
• (original & default)
– multipart/form-data
• introduced in RFC-1867; allows file upload
– http://www.ietf.org/rfc/rfc1867.txt
HTML Examples
<FORM action="http://server.com/cgi/handle"
enctype= "application/x-www-form-urlencoded"
method="post">
<P>
What is your name? <INPUT type="text" name="submit-name"><BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</FORM>
<FORM action="http://server.com/cgi/handle"
enctype="multipart/form-data"
method="post">
<P>
What is your name? <INPUT type="text" name="submit-name"><BR>
What files are you sending? <INPUT type="file" name="files"> <BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</FORM>
based on examples from: http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.13.4
application/x-www-form-urlencoded
POST /~mklein/foo.cgi HTTP/1.1
Host: www.cs.odu.edu
Connection: close
Referer: http://www.cs.odu.edu/~mklein/fromhere.html
User-Agent: CS 595-s10 Automatic Testing Program
Content-type: application/x-www-form-urlencoded
Content-Length: 134
action=restore&manufacturer=ford&model=fairlane+500XL
&year=1966&status=modified&engine=427+sideoiler
&transmission=4+speed+toploader
functionally the same as (modulo a possible 414 response):
GET /~mklein/foo.cgi?action=restore&manufacturer=ford&model=fairlane+500XL
&year=1966&status=modified&engine=427+sideoiler&transmission=4+speed+toploader HTTP/1.1
Host: www.cs.odu.edu
Connection: close
Referer: http://www.cs.odu.edu/~mklein/fromhere.html
User-Agent: CS 595-s10 Automatic Testing Program
POST /~mklein/foo.cgi HTTP/1.1
Host: www.cs.odu.edu
Connection: close
Referer: http://www.cs.odu.edu/~mklein/fromhere.html
User-Agent: CS 595-s10 Automatic Testing Program
Content-type: multipart/form-data; boundary=----------0xKhTmLbOuNdArY
Content-Length: 698
------------0xKhTmLbOuNdArY
Content-Disposition: form-data; name=”action"
restore
------------0xKhTmLbOuNdArY
Content-Disposition: form-data; name=”manufacturer"
ford
------------0xKhTmLbOuNdArY
Content-Disposition: form-data; name=”model"
multipart/form-data
(with file upload)
fairlane 500xl
------------0xKhTmLbOuNdArY
Content-Disposition: form-data; name=”year"
1966
------------0xKhTmLbOuNdArY
Content-Disposition: form-data; name=”picture"; filename="fairlane.txt"
Content-Type: text/plain
______________
//
\\
---------//--------------\\------|
__
__
|
|--/ \--------------------/ \---|
\__/
\__/
------------0xKhTmLbOuNdArY--
note the “--” to indicate the end
Response Codes
from section 6.1.1 of RFC 2616
- 1xx: Informational - Request received, continuing process
- 2xx: Success - The action was successfully received,
understood, and accepted
- 3xx: Redirection - Further action must be taken in order to
complete the request
- 4xx: Client Error - The request contains bad syntax or cannot
be fulfilled
- 5xx: Server Error - The server failed to fulfill an apparently
valid request
But Few Web Resources Are
Static Files…
GET /foo HTTP/1.1
Client
foo
HTTP/1.1 200 OK
Origin
Server
foo
foo
HTML,
PHP,
Java,ASP,
Javascript
PDF,
JSPetc.
Server Side Processing
Mnemonic
CODE
HTML
html
code
html
code
“Traditional” CGI
(e.g. Perl)
PHP
Let’s Look at Some Basic PHP
http://mln-web.cs.odu.edu/~mklein/code/
WWW History
If you want to know more, read a book
(irony intentional)
PHP Helper (one of many)
Who Should NOT Take This Class?
• Students not able to/not willing to learn how to
code
• Students not willing to work in groups
• Students not willing to work on and solve complex
problems
To Do for Next Time…
• Subscribe to the class email list
• Log in to: mln-web.cs.odu.edu (I will send email to the
class list when the accounts are ready)
– uid/passwds same as *.cs.odu.edu machines
• don’t have a *.cs.odu.edu acct? get one:
https://sysweb.cs.odu.edu/online/
– MySQL login == linux login; passwd = (to be determined)
• Start reading & practicing in your own public_html
directory on the cs machines
• Email me your group info! If you’re not in a group by
11:59 PM Sept 07 2010, you’re working alone.
“And Now For Something
Completely Different”
• Weekly “Trivia of the Day”
– Question: “What happened today x years ago?”
• Main but not exclusive source: Wikipedia
• Price: