2. Introduction to CGI PROG. CGI stands for Common Gateway Interface. CGI is a standard programming interface to Web servers that gives us a way to make our sites dynamic and interactive. CGI is not a programming language. It is just a set of standards (protocols.) CGI can be implemented in an interpreted language such as PERL or in a compiled language such as C.

3. Introduction to CGI PROG. (continued) CGI programs work as follows: STEP 1: (On the client side): Get Information from the user (using HTML forms, Java Applet, …,etc). STEP 2: (On the server side): Process the data, connect to DATABASE, search for PATTERNS, …,etc. STEP 3 :(On the server side): Send the result of computation back to the client.

4. What Is CGI? The Common Gateway Interface (CGI) is a standard (protocol) for interfacing external applications with information servers, such as HTTP or Web servers. A CGI program is executed in real-time, so that it can output dynamic information. The Web server can call up a program, while passing user- specific data to the program. The program then processes that data and the server passes the program's response back to the Web browser.

5. Internal Working of CGI Typical setup All CGI programs are stored in one cgi-bin directory All CGI files have special extension (.pl,.cgi etc). The system must be set to execute these programs instead of returning the program itself.

6. Internal Workings of CGI(cont.) GET /cgi-bin/cgiwrap/martin/welcome.cgi HTTP/1.1 Host: cgi.csc.liv.ac.uk User-Agent: Mozilla/4.0 (compatible; Window xp professional) Connection: close Idea 3. Web servers: recognize it is a CGI program execute the program (welcome.cgi) makes user’s info available to the CGI program along with some server info Idea1. CGI programs: a special directory (e.g. http://cgi.csc.liv.ac.uk/cgi-bin/cgiwrap/{user}/{script}), a certain file extension (e.g pl, cgi) Idea 2. HTTP requests (GET, POST) specify URL (e.g. /cgi-bin/welcome.cgi) specify protocol (e.g. HTTP/1.1) specify user-agent (e.g. Mozilla/4.0) specify user’s data

7. Internal Workings of CGI (cont.) Idea 4. Input to CGI program from (STDIN) Idea 5. Output from CGI program STDOUT as a data stream Idea 6. Output as data stream HTTP header + a blank line + body if a complete HTTP header, to the client if not, the server must do it.

8. 8 HTTP SERVER CGI Program stdin stdout Environment Variables

9. CGI PROCESSING ARCHITECTURE

10. Database Processing DATABSE PROCESSING THOUGH CGI GATEWAY WEB BROWSER Web Server CGI Gateway DBMS

11. Perl Basic Introducion The first line of a script is called the shebang line. It should look like this: #!/usr/bin/perl -w usr/bin/perl tells the system where the Perl interpreter is located. The -w switch tells the interpreter to turn on Warnings about possible problems with your code. This will help you with your debugging. In plain Perl, all you have to do to print something is use the print command. But with Perl CGI for the web you have to include this line before your first print command:

12. (continued) print "Content-type: text/html\n\n"; This is called an http header and tells the browser what kind of content it's about to get. If you don't include this then you'll get an Internal Server Error when you try to run it.

13. PERL Data Types PERL has three built-in data types: scalars, arrays of scalars, and associative arrays of scalars, known as "hashes". Scalar Variables A scalar may contain one single value in any of three different flavors: a number, a string, or a reference. Scalar values are always named with '$‘ at the beginning, even when referring to a scalar that is part of an array or a hash. Examples: $day #A simple scalar value "day" $day[28] #the 29th element of @day

14. PERL Data Type (Continued) Array Variables An array is basically a way to store a whole bunch of scalar values under one name. An array name begins with an "@" symbol. Examples: @arrayName = ("element1", "element2"); @browser = ("NS", "IE", "Opera"); @one_two_thre = (1, 2, 3);

15. PERL Data Type (Continued) Associative Arrays “Hashes” Associative arrays are created with a set of key/value pairs. A key is a text string of your choice that will help you remember the value later. A hash name begins with % sign. Examples: %hashName = ('key1', 'value1', 'key2', 'value2'); %ourFriends = ('best', 'Don', 'good', 'Robert', 'worst', 'Joe');

16. Getting the Input to CGI A CGI program may need the following information: Information about the client, the server, and the user, Form data that the user supplied, Additional pathname information. CGI get these information from the CGI environment variables (%ENV).

17. Environment Variables GATEWAY_INTERFACE SERVER_NAME SERVER_SOFTWARE SERVER_PROTOCOL SERVER_PORT REQUEST_METHOD PATH_INFO PATH_TRANSLATED SCRIPT_NAME DOCUMENT_ROOT QUERY_STRING REMOTE_HOST REMOTE_ADDR AUTH_TYPE REMOTE_USER REMOTE_IDENT CONTENT_TYPE CONTENT_LENGTH HTTP_ACCEPT HTTP_USER_AGENT Etc.

18. Accessing Form Input The CGI program can access the form input.

19. A Simple Form Can use a form to solicit the information from the user. Simple Form! Simple Form! Command: GET /cgi-bin/CGI07.cgi?command=fortune HTTP/1.1.. (header information). GET is the default "fortune" (or some other string) can be in the text field submit button is pressed The browser sends this request to the server

20. Request Method: Get GET requests can include a query string as part of the URL: GET /cgi-bin/CGI07.cgi?command=fortune Request Method Resource Name Delimiter Query String

21. /cgibin/CGI07.cgi?command=fortune The web server treats everything before the ‘?’ delimiter as the resource name In this case the resource name is the name of a program. Everything after the ‘?’ is a string that is passed to the CGI program.

22. GET Method Collect data through HTML Form, Include data in the request to web server, GET /cgi-bin/unix.pl?command=fortune HTTP/1.0 …. (header info) Get the data from the environment variable inside CGI: $query_string = $ENV{‘QUERY_STRING’};

23. Working with GET

24. Post Method Collect data through HTML Form, Submit data using POST POST /cgi-bin/unix.pl HTTP/1.0 … (header info) Content-length: 15 command=fortune CGI reads the input from the stadard input stream. $size_input = $ENV{‘CONTENT_LENGTH’}; read (STDIN, $input, $size_input);

25. HTML Form Structure Form Tag Action Attribute Field Method Attribute Field Input Tags Nested in Form Name & Type (what type of input control) Values / Bindings First name:

26. HTML Form Structure First name:

27. After Submit Button

31. Small Medium Large

32. Stoat Goat Weasel

33. red blue green purple … gray

37. Status Codes Status CodeMessage 200Success 204No Response 301Document Moved 401Unauthorized 403Forbidden 404Not Found 500Internal Server Error 501Not Implemented

38. Get vs. Post GET: CGI operations can be bookmarked It is known that certain shells may pose a limit to the maximum size of environment variables so very long forms are truncated as a result if user refreshes, or clicks back button? Double Submit!,then problems may occurs

39. Get vs. Post POST: CGI operations cannot be bookmarked If user refreshes, or clicks back button, browser may display warning form data, having received by the Web server is directly piped to the standard input from which CGI applications can read.

40. CGI Applications HTML Form processing Gateway to database Document Generation

41. Conclusion World-Wide-Web model is much more powerful than it appears on the surface Easily integrated with existing applications Easy to add new functionality CGI model can do lots of things… Update files Link to corporate databases Specialized Applications

42. Q\A