[PDF] - CS101 Lecture 28: Dynamic Web Pages Aaron Stevens 6 April 2009 1 PDF Document

SLIDE 1

1

Aaron Stevens

6 April 2009

CS101 Lecture 28: Dynamic Web Pages

2

Overview/Questions

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

SLIDE 2

2

3

Review: Displaying a WWW Page

How do you “visit a website”?

4

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 hypertext transfer protocol). – Browser parses the response, requests any embedded data, and formats/displays output.

SLIDE 3

3

5

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 web server, usually on port 80.

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

6

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

SLIDE 4

4

7

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.

8

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/xml,application/xml,application/xhtml+xml,text/html;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

SLIDE 5

5

9

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.

10

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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...

SLIDE 6

6

11

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.

12

Dynamic Web Pages

The earliest web pages were static – fixed content which did not change unless edited by a human editor. A dynamic web page is generated by a computer program, based on some transaction between client and server.

– Example: news feeds on facebook.com

SLIDE 7

7

13

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 scripting language which mixes HTML tags, plain text, and Java code scriptlets.

14

Dynamic Web Pages

Continued… PHP: Hypertext Preprocessor A scripting (programming) language which is embedded in HTML documents. Active Server Pages 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.

SLIDE 8

8

15

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/Perl/Python scripting language to create dynamic HTML

16

A Python Example

SLIDE 9

9

17

A Python Example -- Output

18

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/<USERNAME>/<PROGRAM>

for example:

http://azs.bu.edu/cs101/current/azs/hello.py

SLIDE 10

10

19

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.

20

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.

SLIDE 11

11

21

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:

22

Setting Permissions by WinSCP

 On the properties dialog, set the

permissions to rwxrwx--- (code 770):

SLIDE 12

12

23

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:

24

Setting Permissions by Fetch

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

SLIDE 13

13

25

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 next slide.

26

WinSCP File Transfer Encoding

Check that WinSCP is transferring your Python files as text: In the drop down list, add “; *.py”

SLIDE 14

14

27

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

28

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

SLIDE 15

15

29

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