cs108 lecture 21: web applications - computer science€¦ · the most common structure for web...
TRANSCRIPT
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 ([email protected])
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?
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/
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).
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
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" ...
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
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.
3/18/13
8
Computer Science
A Python Example
Computer Science
A Python Example -- Output
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)
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:
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:
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.
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”
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