introduction to web technologies
DESCRIPTION
Introduction to Web Technologies. Dr. Susan Gauch. CGI – Common Gateway Interface. An html web page is static (unchanging) Text document sent from server to browser CGI program creates dynamic information Program is executed upon demand Generates fresh content for each request. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Introduction to Web Technologies](https://reader030.vdocument.in/reader030/viewer/2022020919/56813f6a550346895daa3dca/html5/thumbnails/1.jpg)
University of KansasDepartment of Electrical Engineering and Computer Science
Dr. Susan Gauch April 21, 2005
I T T C
Introduction to Web Technologies
Dr. Susan Gauch
![Page 2: Introduction to Web Technologies](https://reader030.vdocument.in/reader030/viewer/2022020919/56813f6a550346895daa3dca/html5/thumbnails/2.jpg)
University of KansasDepartment of Electrical Engineering and Computer Science
Dr. Susan Gauch April 21, 2005
I T T C
CGI – Common Gateway Interface
• An html web page is static (unchanging)– Text document sent from server to browser
• CGI program creates dynamic information– Program is executed upon demand– Generates fresh content for each request
![Page 3: Introduction to Web Technologies](https://reader030.vdocument.in/reader030/viewer/2022020919/56813f6a550346895daa3dca/html5/thumbnails/3.jpg)
University of KansasDepartment of Electrical Engineering and Computer Science
Dr. Susan Gauch April 21, 2005
I T T C
CGI Overview
• Developer creates an HTML page with a <FORM> on it– Specifies the name of the program– Names some variables that can hold data
• User enters information into the Web page (fills in the variables in the <FORM> and clicks <SUBMIT>
• Browser send the information to the URL
![Page 4: Introduction to Web Technologies](https://reader030.vdocument.in/reader030/viewer/2022020919/56813f6a550346895daa3dca/html5/thumbnails/4.jpg)
University of KansasDepartment of Electrical Engineering and Computer Science
Dr. Susan Gauch April 21, 2005
I T T C
CGI Overview continued• Server unpacks the HTTP message
– Finds the name of the program to call– Finds the data
• Server calls the program and passes in the data• Program generates output and writes it to
“standard out” (the screen, usually)• Server takes the output and passes it along to the
browser• Browser displays the output on the user’s screen
![Page 5: Introduction to Web Technologies](https://reader030.vdocument.in/reader030/viewer/2022020919/56813f6a550346895daa3dca/html5/thumbnails/5.jpg)
University of KansasDepartment of Electrical Engineering and Computer Science
Dr. Susan Gauch April 21, 2005
I T T C
Forms
• Forms are part of regular HTML documents
• There may be more than one form in a document
• Forms may not be nested
<FORM ACTION=“url”> … </FORM>
![Page 6: Introduction to Web Technologies](https://reader030.vdocument.in/reader030/viewer/2022020919/56813f6a550346895daa3dca/html5/thumbnails/6.jpg)
University of KansasDepartment of Electrical Engineering and Computer Science
Dr. Susan Gauch April 21, 2005
I T T C
INPUT• Forms receive input from the user• Each input area has its own name and type of
input it may receive• Forms may receive input from
– Text– Radio– Checkbox– Submit– Reset– Password
![Page 7: Introduction to Web Technologies](https://reader030.vdocument.in/reader030/viewer/2022020919/56813f6a550346895daa3dca/html5/thumbnails/7.jpg)
University of KansasDepartment of Electrical Engineering and Computer Science
Dr. Susan Gauch April 21, 2005
I T T C
Submitting Information via a FORM
• When SUBMIT is pushed, the contents of the form get sent to the server in the form:
programname?var1=value1&var2=value2
• You may send the data via POST or GET– You choose this when you write the HTML
page with the FORM in it
![Page 8: Introduction to Web Technologies](https://reader030.vdocument.in/reader030/viewer/2022020919/56813f6a550346895daa3dca/html5/thumbnails/8.jpg)
University of KansasDepartment of Electrical Engineering and Computer Science
Dr. Susan Gauch April 21, 2005
I T T C
POST and GET
• POST– cgi program reads from stdin (I.e., the keyboard)
– No limit on the amount of data sent
• GET– Cgi program reads from an environment variable
(QUERY_STRING)
– Limit on length of data sent (1,000? Characters?)
• Recommend that you use POST
![Page 9: Introduction to Web Technologies](https://reader030.vdocument.in/reader030/viewer/2022020919/56813f6a550346895daa3dca/html5/thumbnails/9.jpg)
University of KansasDepartment of Electrical Engineering and Computer Science
Dr. Susan Gauch April 21, 2005
I T T C
A Simple Perl Programtiny.pl
#!/usr/bin/perl
use strict; # compile time checking
use warnings; # runtime checking
my $username; # declare the variable
print "What is your username? "; # print out the question
$username = <STDIN>; # ask for the username
chomp($username); # remove "new line"
print "Hello, $username.\n"; # print out the greeting
![Page 10: Introduction to Web Technologies](https://reader030.vdocument.in/reader030/viewer/2022020919/56813f6a550346895daa3dca/html5/thumbnails/10.jpg)
University of KansasDepartment of Electrical Engineering and Computer Science
Dr. Susan Gauch April 21, 2005
I T T C
Making It a CGI programtinyPL.cgi
#! /usr/bin/perl
use strict;use warnings;use CGI qw(:standard);
my $username;
$username = "Susan"; print header(); print start_html("First CGI program"); print "Hello $username.\n"; print end_html();
![Page 11: Introduction to Web Technologies](https://reader030.vdocument.in/reader030/viewer/2022020919/56813f6a550346895daa3dca/html5/thumbnails/11.jpg)
University of KansasDepartment of Electrical Engineering and Computer Science
Dr. Susan Gauch April 21, 2005
I T T C
Calling it from a Web Page<html>
<body bgcolor=white>
<A HREF=
"http://www.ittc.ku.edu/~sgauch/cgibin/cgicode/tinyPL.cgi">
Call tinyPL.cgi</a>
</body>
</html>
![Page 12: Introduction to Web Technologies](https://reader030.vdocument.in/reader030/viewer/2022020919/56813f6a550346895daa3dca/html5/thumbnails/12.jpg)
University of KansasDepartment of Electrical Engineering and Computer Science
Dr. Susan Gauch April 21, 2005
I T T C
What the Web Page Looks Like
Call tinyPL.cgi
![Page 13: Introduction to Web Technologies](https://reader030.vdocument.in/reader030/viewer/2022020919/56813f6a550346895daa3dca/html5/thumbnails/13.jpg)
University of KansasDepartment of Electrical Engineering and Computer Science
Dr. Susan Gauch April 21, 2005
I T T C
Reading Parameters in a CGIadduserPL.cgi
#!/usr/bin/perluse strict;use CGI qw(:standard);
my $cgiform = new CGI;
my $username = $cgiform->param("username"); #Gets values from formmy $password = $cgiform->param("password");
print header(); print start_html("Add a User"); print "<h2>Username: $username</h2>\n"; print "<h2>Password: $password</h2>\n"; print end_html();
![Page 14: Introduction to Web Technologies](https://reader030.vdocument.in/reader030/viewer/2022020919/56813f6a550346895daa3dca/html5/thumbnails/14.jpg)
University of KansasDepartment of Electrical Engineering and Computer Science
Dr. Susan Gauch April 21, 2005
I T T C
Form to Call adduserPL.cgi<html><body bgcolor=white> <FORM ACTION= "http://www.ittc.ku.edu/~sgauch/cgi-bin/cgicode/adduserPL.cgi" METHOD="POST"> <center> <table width=70% cellpadding=5 border=1 bgcolor=#008080> <tr> <td align=center> <font size=+3 style=times color=white> Become a Registered Customer</font><br> </td> </tr> </table> </center>
![Page 15: Introduction to Web Technologies](https://reader030.vdocument.in/reader030/viewer/2022020919/56813f6a550346895daa3dca/html5/thumbnails/15.jpg)
University of KansasDepartment of Electrical Engineering and Computer Science
Dr. Susan Gauch April 21, 2005
I T T C
Form to Call adduserPL.cgi continued
<p><table border="0"><tr>
<td>Choose your username: </td> <td><INPUT TYPE="text" SIZE="20" NAME="username"></td>
</tr><tr>
<td>Choose your password: </td> <td><INPUT TYPE="text" SIZE="20" NAME="password"></td>
</tr></table><p><input type="submit" value="Add Me"></body></html>
![Page 16: Introduction to Web Technologies](https://reader030.vdocument.in/reader030/viewer/2022020919/56813f6a550346895daa3dca/html5/thumbnails/16.jpg)
University of KansasDepartment of Electrical Engineering and Computer Science
Dr. Susan Gauch April 21, 2005
I T T C
What It Looks Like
Choose your username:
Choose your password:
Add Me
Become a Registered Customer
![Page 17: Introduction to Web Technologies](https://reader030.vdocument.in/reader030/viewer/2022020919/56813f6a550346895daa3dca/html5/thumbnails/17.jpg)
University of KansasDepartment of Electrical Engineering and Computer Science
Dr. Susan Gauch April 21, 2005
I T T C
Creating CGI programs
First stepCreate a program that runs from the command linePut the program in your .public_html/cgi-bin directorySet the variables in the program
e.g., $username = “sgauch”;
Save the output to a filePerl myprog.cgi > output.html
View the file in a browser (remove top two lines first)
Second stepHave a friend login and run your program from their directory
e.g., perl /users/myusername/.public_html/cgi-bin/myprogram.cgi > output
![Page 18: Introduction to Web Technologies](https://reader030.vdocument.in/reader030/viewer/2022020919/56813f6a550346895daa3dca/html5/thumbnails/18.jpg)
University of KansasDepartment of Electrical Engineering and Computer Science
Dr. Susan Gauch April 21, 2005
I T T C
Creating CGI programs continued
Third stepDesign a form that calls a dummy cgiThat cgi should just print out “hello world”Put the form in your .public_html directoryView the form in the browserClick submitCheck that you see “hello world”
Fourth stepIn your perl program, comment out all parts of the programJust print the parameters to confirm you’re getting themCall this program from the form
Fifth stepRemove comments and test the REAL progrram
![Page 19: Introduction to Web Technologies](https://reader030.vdocument.in/reader030/viewer/2022020919/56813f6a550346895daa3dca/html5/thumbnails/19.jpg)
University of KansasDepartment of Electrical Engineering and Computer Science
Dr. Susan Gauch April 21, 2005
I T T C
Debugging CGI programs
- Permissions problems- inadequate permissions
- Test this by having someone besides yourself execute the code
- Do and ls –l on the directory structure- It should be drwxr-wr-x on all directories
- Chmod 755 my directory
- Chmod 644 for your perl program
- Path problems- Test this by creating and calling a really simple cgi program
- Invalid HTML produced- Call this and save output to a file
- View file in a browser
![Page 20: Introduction to Web Technologies](https://reader030.vdocument.in/reader030/viewer/2022020919/56813f6a550346895daa3dca/html5/thumbnails/20.jpg)
University of KansasDepartment of Electrical Engineering and Computer Science
Dr. Susan Gauch April 21, 2005
I T T C
Common Problems
#!/usr/bin/perl must be the first line in the fileEven before any other comments
Remember to call the print header() functionIt must occur before any other print statements
On some systems, the filename must end .cgi not .pl
![Page 21: Introduction to Web Technologies](https://reader030.vdocument.in/reader030/viewer/2022020919/56813f6a550346895daa3dca/html5/thumbnails/21.jpg)
University of KansasDepartment of Electrical Engineering and Computer Science
Dr. Susan Gauch April 21, 2005
I T T C
Useful Links
• www.sergey.com/web_course/– JumpStart to the Web Technologies
• http://www.isoc.org/internet/history/– History of the Internet and Web
• http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html– A thorough description of HTML tags
• http://www.cgi101.com/class/– A good tutorial on CGI programming