HTML Forms, CGI och HTTP

HTML Forms, CGI och HTTP

Översikt • Innehåll – Presentation – Beteende • HTML Forms (innehåll) • CGI (beteende) • HTTP (beteende)

Webben i bild HTML Webbläsare Webbservrar

HTML-formulär

Forms Tutorials • http://www.w3schools.com/html/html_forms.asp • http://www.ling.gu.se/~lager/kurser/webtechnology/forms.html

CGI i praktiken

The Common Gateway Interface (CGI) • The task of a web server is to respond to requests from client web browsers by returning output. • Each time a request is received, the server analyzes what the request asks for, and returns the appropriate output. The two simplest ways, for the server, of doing this are the following: • if the request identifies a file stored on disk, return the contents of that file; • if the request identifies an executable command and possibly arguments, run the command and return its output • CGI defines a standard way of doing the second.

Palindrom-exempel: HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Palindrome Checker</title> </head> <body> <h1>Palindrome Checker</h1> <form action="http://localhost/cgi-bin/palindrome.py"> <p>Enter a word and find out if it's palindrome:</p> <input type="text" name="word" size="20"/> <input type="submit" value="Check"/> </form> </body> </html>

Palindrom-exempel : Python #!/usr/local/bin/python import cgi form = cgi.FieldStorage() word = form["word"].value print "Content-type: text/html\n\n" print "<html><body>" if word == word[::-1]: print "<h1>Yes, %s is a palindrome</h1>" %(word,) else: print "<h1>No, %s is not a palindrome</h1>" %(word,) print "</body></html>"

Palindrom-exempel: Prolog #!/usr/local/bin/plcon -q -g main -s :- use_module(library(cgi)). main :- cgi_get_form(Arguments), member(word(Atom),Arguments), atom_chars(Atom,Charlist), format('Content-type: text/html~n~n', []), format("<html><body>"), ( reverse(Charlist,Charlist) -> format("<h1>Yes, ~w is a palindrome!</h1>",[Atom]) ; format("<h1>No, ~w is not a palindrome...</h1>",[Atom]) ), format("</body></html>"), halt.

Installation av CGI-skript på HAL • Ditt CGI-skript installerar du så här: • Skapa ett underbibliotek 'cgi-bin' i ditt www-bibliotek. • Placera palindrome.py (eller palindrome.pl) i detta bibliotek. • Byt namnet på filen till 'palindrome.cgi'. • Kör kommandot chmod a+rx palindrome.cgi för att sätta nödvändiga läs- och skrivrättigheter. • Ändra värdet på attributet ’action’ i elementet ’form’ i filen ”palindrome.html” så att det passar din installation. • Logga in på http://www.cling.gu.se/admin/cgi/ för att aktivera ditt skript. • Provkör!

Ditt www-bibliotek www/ index.html css/ main.css cgi-bin/ palindrome.cgi kurser/ webbteknologi/ index.html ...

Provkörning file://C:/www/kurser/Webteknologi/webtechnology/cgi_test/palindrome.html

HTTP

HTML Webbläsare Webbservrar HTTP • Hypertext Transfer Protocol • Webbens kommunikationsprotokoll • Exempel: Från läsaren till servern (request): • GET 2004/Talks/0914-tbl-speech/text HTTP/1.1 Från servern till läsaren (response): • HTTP/1.1 200 OK<html> <body> … </body> </html>

Palindrom-exemplet igen… • Testa i Firefox: http://localhost/cgi-bin/palindrome.py?word=apa • Inspektera requests och responses m.h.a. verktyget LiveHTTPHeaders

HTTP request message GET /cgi-bin/palindrome.py?word=apa HTTP/1.1 Host: localhost User-Agent: Mozilla/5.0 (Windows; U; … Accept: text/xml,application/xml,... Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8… Keep-Alive: 300 Connection: keep-alive

HTTP request message query request line (GET, POST,… commands) GET /cgi-bin/palindrome.py?word=apa HTTP/1.1 Host: localhost User-Agent: Mozilla/5.0 (Windows; U; … Accept: text/xml,application/xml,... Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8… Keep-Alive: 300 Connection: keep-alive Data (if POST is used) requestheaders extra carriage return, line feed)

More about the query • I webbläsaren: http://localhost/cgi-bin/palindrome.py?word=apa • Request (en del av den): GET /cgi-bin/palindrome.py?word=apa HTTP/1.1 • I CGI-skriptet • Hanteras oftast av ett bibliotek (library) och parsas och översätts där till en datastruktur där informationen blir lättåtkomlig

More about the query (cont’d) • Ett sådan bibliotek har en del att göra: http://www.google.com/search?q=Torbj%C3%B6rn+Lager http://www.google.com/search?q=Torbj%C3%B6rn+Lager&client=firefox http://www.google.com/search?q=Torbj%C3%B6rn+Lager&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox • Det som webbläsaren gör här kallas för “url encoding” • Så CGI programmet måste alltså utföra “url decoding” • Tur att man sällan behöver bry sig!!

HTTP response message HTTP/1.x 200 OK Date: Mon, 18 Feb 2008 08:08:20 GMT Server: Apache/2.0.55 (Win32) Keep-Alive: timeout=15, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html <html><body> <h1>Yes, apa is a palindrome</h1> </body></html>

HTTP response message status line (protocol, status code, status phrase) HTTP/1.x 200 OK Date: Mon, 18 Feb 2008 08:08:20 GMT Server: Apache/2.0.55 (Win32) Keep-Alive: timeout=15, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html <html><body> <h1>Yes, apa is a palindrome</h1> </body></html> responseheaders data

HTTP response status codes • A few sample codes: • 200 OK • request succeeded, requested object later in this message • 404 Not Found • requested document not found on this server • 500 Internal Server Error • something is wrong with the server, or (more likely) with your CGI script

Laborationen • http://www.ling.gu.se/~lager/kurser/webtechnology/lab3.html

HTML Forms, CGI och HTTP