CS108 Lecture 21: Web Applications Web Application Architecture - - PDF document

▶

Mar 16, 2024 345 likes •500 views

3/18/13 CS108 Lecture 21: Web Applications Web Application Architecture Generating HTML from Python Transferring files to the web server Aaron Stevens (azs@bu.edu) Computer Science What Youll Learn Today Computer Science I got the

SLIDE 1

3/18/13 1

Computer Science

CS108 Lecture 21: Web Applications

Web Application Architecture Generating HTML from Python

Transferring files to the web server

Aaron Stevens (azs@bu.edu)

Computer Science

What You’ll Learn Today

I got the basic HTML thing, and now I want to

crate the next fmylife.com… What else do I need?

How do Web Applications Work?

SLIDE 2

3/18/13 2

Computer Science

This is What A Great Header Comment Looks Like!

Computer Science

HTTP

HyperText Transfer Protocol

http://www.ltg.ed.ac.uk/ ~ht/WhatAreURIs/

SLIDE 3

3/18/13 3

Computer Science

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.

Computer Science

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

3/18/13 4

Computer Science

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.

Computer Science

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

3/18/13 5

Computer Science

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.

Computer Science

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

3/18/13 6

Computer Science

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.

Computer Science

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: shopping at amazon.com

SLIDE 7

3/18/13 7

Computer Science

Dynamic Web Pages

Many ways to do the same thing… 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. 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.

Computer Science

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 Scripts are small programs that respond to user input.

SLIDE 8

3/18/13 8

Computer Science

A Python Example

Computer Science

A Python Example -- Output

SLIDE 9

3/18/13 9

Computer Science

Webserver Stuff

The wesberver we will use in class is an Apache server running on cs-webapps.bu.edu. The URL for all class work will be

http://cs-webapps.bu.edu/cs108/<USERNAME>/<FILENAME> for example: http://cs-webapps.bu.edu/cs108/azs/hello.py

Computer Science

Publishing files to 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/webapps/ directory (Z:/public_html/webapps/)

2. Set the permissions of your files to be

readable and executable by yourself and your group. Permissions: rwxrwxr-x (775)

SLIDE 10

3/18/13 10

Computer Science

How to Transfer Files to csa2.bu.edu

Use a client-program like:

Fetch (Mac)
WinSCP (Windows)

http://www.cs.bu.edu/courses/cs108/faq.html

has some information about WinSCP and Fetch.

Computer Science

WinSCP to csa2.bu.edu

After you connect:

Change directory (double click) to ~/webapps
Transfer files by drag’n’drop.
Right-click and open the Properties menu:

SLIDE 11

3/18/13 11

Computer Science

Setting Permissions by WinSCP

On the properties dialog, set the

permissions to rwxrwxr-x (code 775):

Computer Science

Transferring File by Fetch

After you connect:

Change directory (double click) to ~/webapps
Transfer files by drag’n’drop.
Use GetInfo button to open the Properties menu:

SLIDE 12

3/18/13 12

Computer Science

Setting Permissions by Fetch

Set permissions to rwxrwxr-x (code 775):

Computer Science

What to do when…

If you see this…

Some possible causes:

Missing execute permissions (check code 755)
Python syntax error -- run “check module” in IDLE
Missing line with #/usr/bin/python
Missing HTTP Content-type header
WinSCP file transfer encoding… see next slide.

SLIDE 13

3/18/13 13

Computer Science

Viewing the Error Log

http://cs-webapps.bu.edu/cs108/util/showErrorLog.py This will show you the most recent errors for your username.

Computer Science

WinSCP File Transfer Encoding

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

SLIDE 14

3/18/13 14

Computer Science

What You Learned Today

HTTP request and response messages
HTTP headers
Generating HTML in Python
Transferring Python scripts to the web server

Computer Science

Announcements and To Do List

Readings:
HTML Tutorial: http://www.w3schools.com/HTML/
Introduction, Elements, Basic Tags (Today)
Headings, Paragraphs, Formatting, Links, Images