Web Programming

Week 1

Old Dominion UniversityDepartment 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 PreprocessorPHP - PHP: Hypertext Preprocessor

PHP - PHP: Hypertext PreprocessorPHP - 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

• 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

Mandatory 1st Class of the Semester Slide

• 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

Mandatory 1st Class of the Semester Slide #2

• 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!

Grading, aka Mandatory 1st Class of the Semester Slide #3

HTTP Operation

Client OriginServer

request = (method, URI, version, “MIME-like” message)

response = (version, success/error code, “MIME-like” message)

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 OKDate: Wed, 13 Jan 2010 15:36:09 GMTServer: Apache/2.2.14 (Unix) DAV/2 PHP/5.2.11Last-Modified: Mon, 11 Jan 2010 01:38:15 GMTETag: "640e2a-552-47cd9974d0fd9"Accept-Ranges: bytesContent-Length: 1362Content-Type: text/html

mk$ curl --head www.google.com/HTTP/1.1 200 OKDate: Wed, 13 Jan 2010 15:43:10 GMTExpires: -1Cache-Control: private, max-age=0Content-Type: text/html; charset=ISO-8859-1Set-Cookie: PREF=ID=93c27673a367c338:TM=1263397390:LM=1263397390:S=akzlDIbyLg9rjmww;expires=Fri, 13-Jan-2012 15:43:10 GMT; path=/; domain=.google.comServer: gwsTransfer-Encoding: chunked

“curl” is convenient, butspeaking raw HTTP ismore fun…

GETmk$ telnet www.cs.odu.edu 80Trying 128.82.4.2...Connected to xenon.cs.odu.edu.Escape character is '^]'.GET /~mklein/index.html HTTP/1.1Connection: closeHost: www.cs.odu.edu

HTTP/1.1 200 OKDate: Wed, 13 Jan 2010 14:51:57 GMTServer: Apache/2.2.14 (Unix) DAV/2 PHP/5.2.11Last-Modified: Mon, 11 Jan 2010 01:38:15 GMTETag: "640e2a-552-47cd9974d0fd9"Accept-Ranges: bytesContent-Length: 1362Connection: closeContent-Type: text/html

<html><head><title>Martin Klein -- Old Dominion University</title></head><body>…[lots of html deleted]…</html>Connection closed by foreign host.

Request(ends w/ CRLF)

Response

HEADmk$ telnet www.cs.odu.edu 80Trying 128.82.4.2...Connected to xenon.cs.odu.edu.Escape character is '^]'.HEAD /~mklein/index.html HTTP/1.1Connection: closeHost: www.cs.odu.edu

HTTP/1.1 200 OKDate: Wed, 13 Jan 2010 15:46:43 GMTServer: Apache/2.2.14 (Unix) DAV/2 PHP/5.2.11Last-Modified: Mon, 11 Jan 2010 01:38:15 GMTETag: "640e2a-552-47cd9974d0fd9"Accept-Ranges: bytesContent-Length: 1362Connection: closeContent-Type: text/html

Connection closed by foreign host.

POST• Typically the result of HTML “Forms”

– http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.13.4

• Two types of values in the client’s “Content-type” 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="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>

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

based on examples from: http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.13.4

application/x-www-form-urlencodedPOST /~mklein/foo.cgi HTTP/1.1Host: www.cs.odu.eduConnection: closeReferer: http://www.cs.odu.edu/~mklein/fromhere.htmlUser-Agent: CS 595-s10 Automatic Testing ProgramContent-type: application/x-www-form-urlencodedContent-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.1Host: www.cs.odu.eduConnection: closeReferer: http://www.cs.odu.edu/~mklein/fromhere.htmlUser-Agent: CS 595-s10 Automatic Testing Program

multipart/form-data(with file upload)

note the “--” to indicate the end

POST /~mklein/foo.cgi HTTP/1.1Host: www.cs.odu.eduConnection: closeReferer: http://www.cs.odu.edu/~mklein/fromhere.htmlUser-Agent: CS 595-s10 Automatic Testing ProgramContent-type: multipart/form-data; boundary=----------0xKhTmLbOuNdArYContent-Length: 698

------------0xKhTmLbOuNdArYContent-Disposition: form-data; name=”action"

restore------------0xKhTmLbOuNdArYContent-Disposition: form-data; name=”manufacturer"

ford------------0xKhTmLbOuNdArYContent-Disposition: form-data; name=”model"

fairlane 500xl------------0xKhTmLbOuNdArYContent-Disposition: form-data; name=”year"

1966------------0xKhTmLbOuNdArYContent-Disposition: form-data; name=”picture"; filename="fairlane.txt"Content-Type: text/plain

______________ // \\---------//--------------\\-------| __ __ ||--/ \--------------------/ \---| \__/ \__/

------------0xKhTmLbOuNdArY--

Response Codes

- 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

from section 6.1.1 of RFC 2616

But Few Web Resources Are Static Files…

Client OriginServer

GET /foo HTTP/1.1

HTTP/1.1 200 OKfoo

foofoo HTML, PDF, etc.foofoo PHP, ASP, JSPfoofoo Java, Javascript

Server Side Processing Mnemonic

HTML

code

code

PHP

CODE

html

html

“Traditional” CGI(e.g. Perl)

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: