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 You’ll Learn Today Computer Science 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? 1
3/18/13 This is What A Great Header Comment Looks Like! Computer Science HTTP Computer Science HyperText Transfer Protocol http://www.ltg.ed.ac.uk/ ~ht/WhatAreURIs/ 2
3/18/13 Hyper Text Transfer Protocol Computer Science 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. HTTP Request Messages Computer Science 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
3/18/13 HTTP Request Example Computer Science 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. HTTP Request Example Computer Science 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 4
3/18/13 HTTP Response Messages Computer Science 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. HTTP Response Example Computer Science 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" ... 5
3/18/13 Content Type Computer Science 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. Dynamic Web Pages Computer Science 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 6
3/18/13 Dynamic Web Pages Computer Science 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. LAMP Model Computer Science 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. 7
3/18/13 A Python Example Computer Science A Python Example -- Output Computer Science 8
3/18/13 Webserver Stuff Computer Science 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 Publishing files to the Web Computer Science 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) 9
3/18/13 How to Transfer Files to csa2.bu.edu Computer Science 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. WinSCP to csa2.bu.edu Computer Science After you connect: Change directory (double click) to ~/webapps Transfer files by drag ’ n ’ drop. Right-click and open the Properties menu: 10
3/18/13 Setting Permissions by WinSCP Computer Science On the properties dialog, set the permissions to rwxrwxr-x (code 775): Transferring File by Fetch Computer Science After you connect: Change directory (double click) to ~/webapps Transfer files by drag ’ n ’ drop. Use GetInfo button to open the Properties menu: 11
3/18/13 Setting Permissions by Fetch Computer Science Set permissions to rwxrwxr-x (code 775): What to do when… Computer Science 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. 12
3/18/13 Viewing the Error Log Computer Science http://cs-webapps.bu.edu/cs108/util/showErrorLog.py This will show you the most recent errors for your username. WinSCP File Transfer Encoding Computer Science Check that WinSCP is transferring your Python files as text: In the drop down list, add “ ; *.py ” 13
3/18/13 What You Learned Today Computer Science HTTP request and response messages HTTP headers Generating HTML in Python Transferring Python scripts to the web server Announcements and To Do List Computer Science Readings: HTML Tutorial: http://www.w3schools.com/HTML/ Introduction, Elements, Basic Tags (Today) Headings, Paragraphs, Formatting, Links, Images 14
Recommend
More recommend
