CS101 Lecture 28: Dynamic Web Pages

Aaron Stevens 6 April 2009

1

Overview/Questions

– Review: how the WWW works – What does HTTP actually do? – How do web pages change to provide dynamic content? – A python example

2

1 Review: Displaying a WWW Page

How do you “visit a ”?

3

Displaying a WWW Page

– Browser decodes URL to parse out host name and document location on that host. – DNS used to obtain IP address of host. – Establish TCP/IP connection. – Client requests resource, and waits for the server to respond (using the transfer protocol). – Browser parses the response, requests any embedded data, and formats/displays output.

4

2 Hyper Text Transfer Protocol

HTTP is a protocol which specifies request and responses between clients and servers. – Presumes a reliable transport, so TCP/IP is typically used (but not required). – The client (called a browser) connects to a , usually on port 80.

HTTP is not limited to webpages. It can be used to transfer any kind of data.

5

HTTP Request Messages

An HTTP request has two main parts: a method (action) and a URI (uniform resource identifier) upon which to perform the action.

HTTP methods are OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT.

The URI must specify the path to a resource (e.g. a file or directory).

6

3 HTTP Request Example

Suppose the user types the URL http://www.bu.edu.

The browser will find the IP address for the host www.bu.edu, and create a TCP/IP connection to it on port 80.

7

HTTP Request Example

The HTTP request message is like the following: GET / HTTP/1.1 Host: www.bu.edu:80 User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en- US; rv:1.8.1.5) Gecko/20070713 Firefox/2.0.0.5 Accept: text/,application/xml,application/+xml,text/;q =0.9,text/plain;q=0.8,image/png,*/*;q=0.5 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive

8

4 HTTP Response Messages

An HTTP response has three main parts: a status, some headers, and the message body.

HTTP status codes include OK, FORBIDDEN, NOT FOUND, INTERNAL SERVER ERROR, …

For successful requests, the status of OK is followed by headers which explain how to decode the message body.

9

HTTP Response Example

The HTTP response message is like the following:

HTTP/1.1 200 OK Date: Wed, 01 Aug 2007 17:33:41 GMT Server: Apache/1.3.37 (Unix) mod_ssl/2.8.28 OpenSSL/0.9.7l Keep-Alive: timeout=5, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html

77b

10

5 Content Type

Notice the header field called Content-Type

HTTP/1.1 200 OK Date: Wed, 01 Aug 2007 17:33:41 GMT Server: Apache/1.3.37 (Unix) mod_ssl/2.8.28 OpenSSL/0.9.7l Keep-Alive: timeout=5, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html ... This indicates the that the message can be interpreted as encoded in plain text and/or HTML.

11

Dynamic Web Pages

The earliest web pages were static – fixed content which did not change unless edited by a human editor.

A is generated by a , based on some transaction between client and server. – Example: news feeds on facebook.com

12

6 Dynamic Web Pages

There are several approaches to developing dynamic web pages.

Java Servlet A server-side Java application which processes HTTP requests and generates HTTP responses. Java Server Pages A which mixes HTML tags, plain text, and Java code scriptlets.

13

Dynamic Web Pages

Continued…

PHP: Hypertext Preprocessor A scripting (programming) language which is embedded in HTML documents. Microsoft’s server side scripting language, based on Visual Basic Script. Python Scripting A python script can read HTTP headers, and use print statements to generate HTML output.

14

7 LAMP Model

The most common structure for web applications uses this configuration:

Linux operating system for a server Apache web server software MySQL database software PHP//Python scripting language to create dynamic HTML

15

A Python Example

16

8 A Python Example -- Output

17

Webserver Stuff

The wesberver we will use in class is an Apache server running on azs.bu.edu.

The URL for all class work will be http://azs.bu.edu/cs101/current// for example: http://azs.bu.edu/cs101/current/azs/hello.py

18

9 Putting your files on the Web

To get your files to display on the web, you need to do 2 things: 1. Put your files under your CS UNIX’s account’s ~/public_html/apps/ directory (or Z:/public_html/apps/) 2. Set the permissions of your files to be readable and executable by yourself and your group. Permissions: rwxrwx--- (770) – Step 2 is being done automatically by a script, updated every minute.

19

How to Transfer Files to csa2.bu.edu Use a client-program like: – Fetch (Mac) – WinSCP (Windows) http://www.cs.bu.edu/courses/cs101/faq.html has some information about WinSCP and Fetch.

20

10 WinSCP to csa2.bu.edu

After you connect: – Change directory (double click) to public_html/apps – Transfer files by drag’n’drop. – Right-click and open the Properties menu:

21

Setting Permissions by WinSCP

 On the properties dialog, set the permissions to rwxrwx--- (code 770):

22

11 Transferring File by Fetch

After you connect: – Change directory (double click) to public_html/apps – Transfer files by drag’n’drop.

– Use GetInfo button to open the Properties menu: 23

Setting Permissions by Fetch

Set permissions to rwxrwx--- (code 770):

24

12 What to do when…

If you see this…

Some possible causes:  Python syntax error -- run “check module” in IDLE  Incorrect “shebang” line, double check  WinSCP file transfer encoding… see slide.

25

WinSCP File Transfer Encoding

Check that WinSCP is transferring your Python files as text:

In the drop down list, add “; *.py”

26

13 Other Parts of Web Applications

 Data driven content: use database to store content – Example: facebook.com’s news friends, news  User input: HTML forms – Example: Google’s search box  Maintaining a session: cookies – Example: Amazon.com shopping cart

27

Take-Away Points

– HTTP request and response messages – HTTP headers – Overview of Web Applications: LAMP – Generating HTML in Python – Transferring Python scripts to the web server

28

14 Student To Dos

– HW11 is due TUESDAY 4/7 – QUIZ 5 is on WEDNESDAY 4/8 . Lectures 23-27 . Python: functions, decisions, repetition; Data Structures.

– Aaron’s Office Hours changed this week only: . Monday: 4:15-5pm (regular time) . Wednesday: 8:30-9:30 am (changed from 2-3) . Friday: Cancelled – NO LECTURE on FRIDAY 4/10

29

15