USQ/CSC2406 Web Publishing Lecture 4: HTML Forms, Server & CGI Scripts Tralvex (Rex) Yeap 19 December 2002
Outline Quick Review on Lecture 3 Topic 7: HTML Forms Topic 8: Server & CGI Scripts Class Activity 1: Assignment 2 Discussion Additional Handouts for L4 What s in Store for Lecture 5
Quick Review of Lecture 3 Video on Apache Download, Setup & Testing Topic 5: HTTP Class Activity 1: Real World Javascripts & Presentation Topic 6a: HTTP Topic 6b: MIME
Topic 7: HTML Forms Introduction An HTML form is a section of a document containing normal content, markup, special elements called controls and labels. Available controls: Text - Image - Password Reset - Checkbox - File Radio - Submit - Hidden Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.)
Topic 7: HTML Forms Process: HTML Forms Submission
Topic 7: HTML Forms Let the journey begins 11 <FORM <FORM ACTION= http://tralvex.com/cgi-bin/hello.cgi?" ACTION= http://tralvex.com/cgi-bin/hello.cgi?" METHOD=POST> METHOD=POST> <INPUT <INPUT TYPE="text" TYPE="text" NAME="text_field"> NAME="text_field"> <BR> <BR> <INPUT <INPUT TYPE="Submit" TYPE="Submit" VALUE="Submit"> VALUE="Submit"> </FORM> </FORM> FORM tags tells the browser, where it ends and begins. ACTION tag tells the browse where to send the information to. METHOD is either POST or GET. POST is when doing an ACTION that is "permanent", e.g. sending e-mail. GET is when doing something that does not change the state of the world or anything else, e.g. doing a search on a database. Lastly, fields where people enter data and submit it / clear it.
Topic 7: HTML Forms Options in Controls 22
Topic 7: HTML Forms Options in Controls (cont) 33
Topic 7: HTML Forms GET and POST in perspective GET and POST allow form submissions to the server. GET To get a file or other resource, possibly with parameters. Data in GET is appended to the URL, eg. http://myhost.com/mypath/myscript.cgi?name1=value1&name2=value2 Browsers uses GET to download files, like HTML files and images. Limited data in form submissions (the limit varies from browser to browser). CGI program will receive the encoded form input in the environment variable QUERY_STRING Advantage: Allows GET to be embedded in the form of URL, instead of a HTML FORM. http://tralvex.com/cgi-bin/hello-ei.cgi?subject=web%20publishing&web%20site=http://tralvex.com/wpub&date="17-12-2002"&counter=1298 POST To send a chunk of data to the server to be processed When an HTML form is submitted using POST, your form data is attached to the end of the POST request, in its own object (specifically, in the message body). More complex than GET, but is more versatile. For example, you can send files using POST. No data size limitation. CGI program will receive the encoded form input on stdin. Use CONTENT_LENGTH to determine the length of the data Advantage: Clean codes in browser url after submission. http://tralvex.com/cgi-bin/hello-ei.cgi?
Topic 7: HTML Forms Guestbook: How does it works? (off-line assignment)
Topic 7: HTML Forms Reference: http://www.w3.org/tr/rec-html40/interact/forms.html
Topic 8: CGI Scripts Introduction The Common Gateway Interface (CGI) is a standard for interfacing external applications with information servers, such as HTTP or Web servers. CGI program is executable. A plain HTML document that the Web software retrieves is static. A CGI program is executed in real-time, so that it can output dynamic information. Most common method of interfacing with a CGI script on the clientend (Web Browser) is through HTML Forms. The common gateway interface provides a consistent way to exchange data between the user (client-end) and the application program (server-end): Operating system independent: PC, Macintosh, UNIX, OS/390, or others Programming Language independent: C/C++, Fortran, PERL, TCL, Any Unix shell, Visual Basic, AppleScript
Topic 8: CGI Scripts Illustration: CGI Execution User Input CGI Program (resides on Web server) CGI Output Web Publishing http://tralvex.com/cgi-bin/hello-ei.cgi 17-12-2002 1298 Subject Web site Date counter
Topic 8: CGI Scripts Hello World CGI Script /*************************************************************************/ /*************************************************************************/ /** /** **/ **/ /** /** hello.c-- hello.c-- simple simple "hello, "hello, world", world", to to demonstrate demonstrate basic basic CGI CGI **/ **/ /** /** **/ **/ /*************************************************************************/ /*************************************************************************/ #include #include <stdio.h> <stdio.h> void void main() main() { /** /** Print Print the the CGI CGI response response header, header, required required for for all all HTML HTML output. output. **/ **/ /** /** Note Note the the extra extra \n, \n, to to send send the the blank blank line. line. **/ **/ printf("content-type: printf("content-type: text/html\n\n") text/html\n\n") /** /** Print Print the the HTML HTML response response page page to to STDOUT. STDOUT. **/ **/ printf("<html>\n") printf("<html>\n") printf("<head><title>cgi printf("<head><title>cgi Output</title></head>\n") Output</title></head>\n") printf("<body>\n") printf("<body>\n") printf("<h1>hello, printf("<h1>hello, world.</h1>\n") world.</h1>\n") printf("</body>\n") printf("</body>\n") printf("</html>\n") printf("</html>\n") } exit(0) exit(0) http://tralvex.com/cgi-bin/hello.cgi?
Topic 8: CGI Scripts Hello World, with echo inputs CGI Script Full source code in C with getcgivars() @ http://tralvex.com/pub/edu/wpub/hello-ei.htm /** /** Standard Standard "hello, "hello, world" world" program, program, that that also also shows shows all all CGI CGI input. input. **/ **/ int int main() main() { { char char **cgivars **cgivars int int i i /** /** First, First, get get the the CGI CGI variables variables into into a a list list of of strings strings **/ cgivars= **/ cgivars= getcgivars() getcgivars() /** /** Print Print the the CGI CGI response response header, header, required required for for all all HTML HTML output.**/ output.**/ /** /** Note Note the the extra extra \n, \n, to to send send the the blank blank line. line. **/ printf("content-type: **/ printf("content-type: text/html\n\n") text/html\n\n") /** /** Finally, Finally, print print out out the the complete complete HTML HTML response response page. page. **/ printf("<html>\n") **/ printf("<html>\n") printf("<head><title>cgi printf("<head><title>cgi Results</title></head>\n") Results</title></head>\n") printf("<body>\n") printf("<body>\n") printf("<h1>hello, printf("<h1>hello, world.</h1>\n") world.</h1>\n") printf("your printf("your CGI CGI input input variables variables were:\n") were:\n") printf("<ul>\n") printf("<ul>\n") /** /** Print Print the the CGI CGI variables variables sent sent by by the the user. user. Note Note the the list list of of **/ **/ /** /** variables variables alternates alternates names names and and values, values, and and ends ends in in NULL. NULL. **/ for **/ for (i=0 (i=0 cgivars[i] cgivars[i] i+= i+= 2) 2) printf("<li>[%s] printf("<li>[%s] = = [%s]\n", [%s]\n", cgivars[i], cgivars[i], cgivars[i+1]) cgivars[i+1]) printf("</ul>\n") printf("</ul>\n") printf("</body>\n") printf("</body>\n") printf("</html>\n") printf("</html>\n") /** /** Free Free anything anything that that needs needs to to be be freed freed **/ **/ for for (i=0 (i=0 cgivars[i] cgivars[i] i++) i++) free(cgivars[i]) free(cgivars[i]) free(cgivars) free(cgivars) exit(0) exit(0) } } http://tralvex.com/cgi-bin/hello-ei.cgi?subject=web%20publishing&web%20site=http://tralvex.com/wpub&date="17-12-2002"&counter=1298
Topic 8: CGI Scripts CGI Environment Variables Perl extracts while (($key, $val) = each %ENV) { print "$key $val" }
Topic 8: CGI Scripts Cookie Monster A powerful and versatile way of retaining state information is with cookies. Cookies are name=value pairs very much like the names parameters in the CGI query string. Unlike the query string, however, cookies are sent back and forth in the HTTP header rather than within the HTML URLs or forms. Cookies have a number of important advantages over other methods for storing state information. Cookies are maintained by the browser, minimizing the work of the script or server. They can be associated with the entire site or a particular URL path. This allows a site to maintain a series of interacting scripts that share or pass state information to each other via cookies. Cookies can be assigned an expiration date. By default a cookie s lifetime is limited to the current session, but cookies can be created that will persist for days or longer.
Topic 8: CGI Scripts Cookie Monster (cont) Cookies are set and retrieved through a HTTP header. To create them, add one or more Set-cookie: fields to the header lines. The syntax for the Set-cookie: header is (without the line break): Set-cookie: CookieNAME=CookieVALUE EXPIRES=datePATH=path DOMAIN=domain_name SECURE Example: The following code sets a cookie with the name poet and the value Samual+Taylor+Coleridge Set-cookie: poet=samual+taylor+coleridge Cookie.c - cookie extraction functions for CGI programs
Topic 8: CGI Scripts Enable CGI in Apache Server Edit srm.conf From: #ScriptAlias /cgi-bin/ @@ServerRoot@@/cgi-bin/ To : ScriptAlias /cgi-bin/ /usr/local/apache/share/cgi-bin From: #AddHandler cgi-script.cgi To : AddHandler cgi-script.cgi Edit access.conf <Directory @@ServerRoot@@/cgi-bin> AllowOverride None Options None </Directory> Restart the server
Topic 8: CGI Scripts Routines in cgilib (provided by USQ) Routine to output the HTTP headers void HTTP_header() Routine to output the HTML header information void HTML_header(char *title) Routine to output All the Environment variables void Get_env(char *env[]) Routine to output any command line arguments void Get_com(int argc, char *argv[]) Routine to output anything on STDIN void Get_input() Routine to output the final HTML information to finish of the page void HTML_footer()
Topic 8: CGI Scripts Collection of CGI Scripts in C and C++ http://www.cgi-resources.com/programs_and_scripts/c_and_c++/
Topic 8: CGI Scripts Plentiful of practical CGI scripts
Topic 8: CGI Scripts Programming CGI in C reference websites How CGI Script works (using C language) http://www.howstuffworks.com/cgi.htm Getting Started with CGI Programming in C http://www.cs.tut.fi/~jkorpela/forms/cgic.html CGI Programming for C Programmers http://www.openroad.org/cgihelp/cgi.html Programming CGI in C/C++ http://www.coding-zone.co.uk/cpp/cgi/170401cgicpp.shtml
Topic 8: CGI Scripts Tutorials on C Programming How C Programming Works http://www.howstuffworks.com/c.htm C Programming (Strathclyde) http://www.strath.ac.uk/it/docs/ccourse/ C Language Page http://www.isi.edu/~iko/pl/hw3_c.html The C Library Reference Guide http://www.acm.uiuc.edu/webmonkeys/book/c_guide/ UNIX System Calls and Subroutines using C http://www.cs.cf.ac.uk/dave/c/ce.html Introduction to C Programming http://www.hull.ac.uk/hull/cc_web/docs/cnotes/contents.html C Programming Notes http://www.eskimo.com/~scs/cclass/notes/top.html C Programming Language FAQ http://www.faqs.org/faqs/c-faq/ C Tutorial (videos) http://kdat.csc.calpoly.edu/~ltauck/thesis/c_tutorial.html
Topic 8: CGI Scripts Reference: http://www.w3.org/cgi/
Class Activity 1: Assignment 2 Discussion 11 In the catalogue directory create a Forms page that displays the company's product catalogue. Each item that can be purchased has to be selectable. After the customer has selected the items he or she wishes to purchase there should be a submit button on the page so that the customer's selections can be sent to the server. Write a CGI script (to run in the catalogue directory) to do the following Accept the input from the Catalogue form. Write a HTML page to display the user's selections. Have the total cost of the purchases at the bottom of the page. On this page there should also be placed a link to the Ordering page in the order directory. This will take the user straight to the ordering page. This must be a well structured HTML page. Save the state information of the script by writing the order to a cookie to be stored on the client machine. The cookie should be a site wide session cookie. Only one cookie should be sent and it should contain the entire order. The cookie should be returned by the CGI script with the total cost page. Group A & B
Class Activity 1: Assignment 2 Discussion (cont) 22 In the order directory create two sub-directories called shipment This directory will contain individual files with each clients order. payment This directory will contain individual files with each clients payment details.
Class Activity 1: Assignment 2 Discussion (cont) 33 In the order directory place an ordering CGI script that will perform the following tasks. The same script should perform All the following tasks: Without input the script should dynamically create a well structured HTML page that will display the contents of the total cost cookie That is the client's order. (You can reuse parts of the code from Task 1). If the cookie does not exist or is empty send an error message to the effect that items must be selected before ordering. At the bottom of the page place a link back to this script requesting the user's shipping address. Pass a parameter to the script (in the link URL) so that the script knows that the shipping address form is required. Modify the script so that with the appropriate input (the parameter used above) it will dynamically create a Shipping Address request page. An example of a request for shipping information is the following When the submit button is pressed the script should return a feel good message to the effect that the order is being processed - more importantly it should create two files. 1. A file should be created in the shipment directory containing the clients order. At the same time - 2. A file should be created in the payment directory containing the clients payment details. Group C, D & E
Class Activity 1: Assignment 2 Discussion (cont) 44 A diagram of the functionality the two scripts could look something like this
Class Activity 1: Assignment 2 Discussion (cont) 55 The directories shipment and payment need to be protected from access by unauthorised people. To this end configure your server so that only users in the shipment group have access to the shipment directory, and only users in the payment group have access to the payment directory. Create a password file called password and group file called group, containing the following - Username Password Group bsmith bessie payment bguy blue shipment jtull ian The password and group files must be placed in the order directory. These files must be protected by configuring the server so that none can download them! 66 Create your own 404 Document not Found page. Configure your server, using the site directory access file, to display your 404 page when there is a request for a non-existant document. 77 In the help directory document this assignment and include links to the source of ALL your CGI scripts, configuration files etc.
Class Activity 1: Assignment 2 Discussion Points to note CGI scripts are to be written in C. No other language will be accepted. The reason for this is that we can only support one language and most students have had experience with C. The libcgi library in C is supplied to simplify the task of writing scripts. When writing the client's order file and payment file remember these files must be written into the directories order/shipment and order/payment The script needs to know where these directories are without having the path hardwired into the script. One way to do it is to extract the path information from the CGI environment variable SCRIPT_FILENAME. The order script should reside in the directory order When creating the shipment-file and the payment-file, both files should have the same name (in different directories) and the name should be unique. A simple way to create a unique filename is to use the process identification number of the running script. For example: #include <unistd.h> char filename[6] sprintf(filename,"%d",(int)getpid()) Please note that for a busy commercial site this is NOT the best way of constructing a unique filename - the process id can recycle easily within a day. This assignment must work on a Linux machine. All URLs must be relative. All CGI scripts must be handed in as executables and as source. CGI script executables should have filenames ending in.cgi so that they can run in any directory. The directory configuration file should only appear in the shipment and the payment directories. Do Not use global configuration directives as the directives will Not be submitted with the assignment. Please note that on a commercial site a password file would NEVER be placed in the document tree.
Additional Handouts for Lecture 4 n.a.
What s in Store for Lecture 5 Topic 9: Server Configuration Topic 10: Server Security Additional Class Activities / Discussion
End of Lecture 4 Good Night.
Course Outline: Strategies for Local Lectures Lecture 1/6 Getting to know each other (to optimize communications) Topic 1: Introduction Topic 2: HTML / Advanced HTML Additional Topic: www.yourname.com Additional Class Activities / Discussion Lecture 2/6 Topic 3: Document and Site Design and Style Guidelines Topic 4: Graphics & Image Maps Discussion on Assignment 1 Additional Class Activities / Discussion
Course Outline: Strategies for Local Lectures (cont.) Lecture 3/6 Topic 7: HTML Forms Topic 6: HTTP and MIME Additional Class Activities / Discussion Lecture 4/6 Topic 7: HTML Forms Topic 8: CGI Scripts Discussion on Assignment 2 Additional Class Activities / Discussion
Course Outline: Strategies for Local Lectures (cont.) Lecture 5/6 Topic 9: Server Configuration Topic 10: Server Security Additional Class Activities / Discussion Lecture 6/6 Topic 11: Future of Web Publishing Exam Preparations Additional Class Activities / Discussion