Web technologies• DOM (document object model)– what's on the page and how it can be manipulated• forms / CGI (common gateway interface)– extract info from a form, create a page, send it back– server side code in Perl, PHP, ASP, JSP, ...– client side uses HTML/CSS, Javascript, XML, ...• client-side interpreters– Javascript, Flash, Silverlight, HTML5 (animation, audio/video)• Ajax (asynchronous Javascript and XML)– update page content asynchronously (e.g., Google Maps)• libraries, APIs, GUI tools– client-side code for interfaces, effects, ...Prototype, Scriptaculous, YUI, JQuery, Dojo, XUL, ...• frameworks– integrated systems for creating web applicationsRails (Ruby), Django (Python), Google Web Toolkit (Java->Javascript), ...• mashups– combining data from multiple web sources into single application• databases– MySQL, SQLite, ...Web• basic components– URL (uniform resource locator)– HTTP (hypertext transfer protocol)– HTML (hypertext markup language)–browser• embellishments in browser– helpers or plug-ins to display non-text contentpictures (e.g., GIF, JPEG), sound, movies, …– forms filled in by userclient encodes form information in URL or on stdoutserver retrieves it from environment or stdinusually with cgi-bin programcan be written in anything: Perl, PHP, shell, C, Java, ...– active content: download code to run on clientJavascriptJava appletsplug-ins (Flash, Quicktime, RealPlayer, Firefox extensions, ...)ActiveXHTTP: Hypertext transfer protocol• what happens when you click on a URL?• client sends request:GET url HTTP/1.0[other header info](blank line)• server returnsheader info(blank line)HTML– server returns text that can be created as needed– can contain encoded material of many different typesuses MIME (Multipurpose Internet Mail Extensions)• URL formatservice://hostname/filename?other_stufffilename?other_stuff part can encode– data values from client (forms)– request to run a program on server (cgi-bin)GET urlHTMLclientserverForms and CGI-bin programs• "common gateway interface"– standard way for client to ask the server to run a program– using information provided by the client – usually via a form• if target file on server is executable program,– e.g., in /cgi-bin directory• and if it has right permissions, etc.,• server runs it to produce HTML to send to client– using the contents of the form as input• CGI programs can be written in any language– typically Perl, PHP, ASP, JSP, …• local CGI facility: campuscgi.princeton.edu– anyone can run CGI scripts– restrictions on what scripts can access and what they can doHTML form hello.html<FORM ACTION="http://campuscgi.princeton.edu/~bwk/hello1.cgi"METHOD=GET><INPUT TYPE="submit" value="hello1: shell script, plain text"></FORM><FORM ACTION="http://campuscgi.princeton.edu/~bwk/hello2.cgi"METHOD=POST><INPUT TYPE="submit" value="hello2: shell script, html"></FORM>[and a bunch of others]Simple echo scripts hello[12].cgi• plain text… (hello1.cgi)#!/bin/shecho "Content-type: Text/plain"echoecho Hello, world.• HTML … (hello2.cgi)#!/bin/shecho 'Content-Type: text/html<html><title> Hello2 </title><body bgcolor=cyan><h1> Hello, world </h1>'echo "<h2> It's `date` </h2>"• no user input or parameters but content can change (as in hello2)HTML forms: data from users (surv0.html)<html><title> COS 333 Survey </title><body> <h2> COS 333 Survey </h2><form METHOD=GET ACTION="http://campuscgi.princeton.edu/~bwk/surv2.py">Name: <input type=text name=Name size=40><p> Password: <input type=password name=Pwd<p> Class: <input type=radio name=Class value=10> '10<input type=radio name=Class value=11> '11<p> CS courses:<input type=checkbox name=c126> 126<input type=checkbox name=c217> 217<p> Experience?<textarea name=Exp rows=3 cols=40 wrap></textarea><p><input type=submit> <input type=reset></form></body></html>URL encoding of form data• how form data gets from client to server– http://hostname/restofpotentially/very/very/longline– everything after hostname is interpreted by server – usually /program?encoded_arguments• if form uses GET, encoded in URL format in QUERY_STRING environment variable– limited length– visible in browser, logs, ...; can be bookmarked– usually used if no change of state at server• if form uses POST, encoded in URL format on stdin(CONTENT_LENGTH bytes)– sent as part of message, not in URL itself– read from stdin by server, no limit on length– usually used if causes change of state on server• URL format:– keywords in keyword lists separated by +– parameters sent as name=value&name=value– funny characters encoded as %NN (hex)– someone has to parse the stringmost scripting languages have URL decoders in librariesRetrieving info from forms (surv2.py)• HTTP server passes info to cgi program in environment variables• form data available in environment variable QUERY_STRING (GET) or on stdin (POST)#!/usr/princeton/bin/pythonimport osimport cgiform = cgi.FieldStorage()print "Content-Type: text/html"print ""print "<html>"print "<title> COS 333 Survey </title>"print "<body>"print "<h1> COS 333 Survey </h1>"for i in form.keys():print "%s = %s <br>" % (i, form[i].value)for i in os.environ.keys():print "%s = %s <br>" % (i, os.environ[i])Cookies• HTTP is stateless: doesn't remember from one request to next• cookies intended to deal with stateless nature of HTTP– remember preferences, manage "shopping cart", etc.• cookie: one line of text sent by server to be stored on client– stored in browser while it is running (transient)– stored in client file system when browser terminates (persistent)• when client reconnects to same domain,browser sends the cookie back to the server– sent back verbatim; nothing added– sent back only to the same domain that sent it originally– contains no information that didn't originate with the server• in principle, pretty benign• but heavily used to monitor browsing habits, for commercial purposesPHP (www.php.com)• an alternative to Perl for Web pages– Rasmus Lerdorf (1997), Andi Gutmans, Zeev Suraski– originally Personal Home Pages, then PHP Hypertext Processor• sort of like Perl turned inside-out– text sent by server after PHP code within it has been executed<html><title> PHP hello </title><body><h2> Hello from PHP </h2><?phpecho $_SERVER["SCRIPT_FILENAME"] . "<br>"; echo $_SERVER["HTTP_USER_AGENT"] . "<br>";
View Full Document
![Web [Application] Frameworks](https://media.gradebuddy.com/documents/666470/e08cff1d-bfa1-4b8b-a8eb-00d82ed7ec65.png)
Unlocking...