CGI Programming.

Slides:



Advertisements
Similar presentations
Web forms and CGI scripts Dr. Andrew C.R. Martin
Advertisements

HTML Forms. collect information for passing to server- side processes built up from standard widgets –text-input, radio buttons, check boxes, option lists,
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Lecture 14 HTML Forms CPE 401 / 601 Computer Network Systems slides are modified from Dave Hollinger.
Server Side Programming Common Gateway Interface (CGI): Scripts generate Web pages or other files dynamically by processing form data and returning documents.
SE-2840 Dr. Mark L. Hornick 1 HTML input elements and forms.
CGI Programming Part 2. Input Tags Many different ways of getting data from the user. The tag is used most often. has a type attribute –Specifies the.
Forms Review. 2 Using Forms tag  Contains the form elements on a web page  Container tag tag  Configures a variety of form elements including text.
Form Basics CS Web Data  Most interesting web pages revolve around data  examples: Google, IMDB, Digg, Facebook, YouTube, Rotten Tomatoes  can.
CGI programming in Perl Learning Objectives: 1. To understand how a CGI program works in Perl and how to make it runnable in web browsers 2. To learn how.
Python and Web Programming
CGI. CGI Programming What is "CGI"? –Common Gateway Interface A means of running an executable program via the Web. CGI is not a Perl-specific concept.
CGI Programming: Part 1. What is CGI? CGI = Common Gateway Interface Provides a standardized way for web browsers to: –Call programs on a server. –Pass.
Creating Web Page Forms
Tutorial 6 Forms Section A - Working with Forms in JavaScript.
Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.
Form Handling, Validation and Functions. Form Handling Forms are a graphical user interfaces (GUIs) that enables the interaction between users and servers.
CST JavaScript Validating Form Data with JavaScript.
1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.
Chapter 9 Using Perl for CGI Programming. Computation is required to support sophisticated web applications Computation can be done by the server or the.
MS3304: Week 4 PHP & HTML Forms. Overview HTML Forms elements refresher Sending data to a script via an HTML form –The post vs. get methods –Name value.
Reading Data in Web Pages tMyn1 Reading Data in Web Pages A very common application of PHP is to have an HTML form gather information from a website's.
CO1552 Web Application Development HTML Forms. Websites can be made more interactive by providing facilities for users to provide data To get user entered.
1 Creating Web Forms in HTML Web forms collect information from customers Web forms include different control elements including: –Input boxes –Selection.
Forms and Form Controls Chapter What is a Form?
DAT602 Database Application Development Lecture 14 HTML.
1 Forms A form is the usual way that information is gotten from a browser to a server –HTML has tags to create a collection of objects that implement this.
Chapter 5 Java Script And Forms JavaScript, Third Edition.
Chapter 6: Forms JavaScript - Introductory. Previewing the Product Registration Form.
Internet / Intranet Fall 2000 Class 7. Brandeis University Internet/Intranet Spring Class 7 Agenda Project / Homework Discussion Forms Validating.
Internet / Intranet CIS-536 Class 7. 2 HTML Forms A Method to Allow Users to Pass Information to a CGI Script Forms Allow Information to Be Entered Via:
XHTML Introductory1 Forms Chapter 7. XHTML Introductory2 Objectives In this chapter, you will: Study elements Learn about input fields Use the element.
HTML II. Factors to consider in designing a website. Organizing your files. HTML Tables. Unordered Lists. Ordered Lists. HTML Forms. Learning Objectives.
Robinson_CIS_285_2005 HTML FORMS CIS 285 Winter_2005 Instructor: Mary Robinson.
CP476 Internet Computing CGI1 CGI is a common way to provide for specific computations on server side, interactions with users, or access to databases.
Introduction to Programming the WWW I CMSC Summer 2004 Lecture 6.
USING PERL FOR CGI PROGRAMMING
CSC 2720 Building Web Applications HTML Forms. Introduction  HTML forms are used to collect user input.  The collected input is typically sent to a.
JavaScript, Fourth Edition Chapter 5 Validating Form Data with JavaScript.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Chapter 9 Using Perl for CGI Programming.
Website Development with PHP and MySQL Saving Data.
CGI Programming. What is "CGI"? Common Gateway Interface A means of running an executable program via the Web. CGI is not a Perl-specific concept. Almost.
Forms and Server Side Includes. What are Forms? Forms are used to get user input We’ve all used them before. For example, ever had to sign up for courses.
1 © Netskills Quality Internet Training, University of Newcastle HTML Forms © Netskills, Quality Internet Training, University of Newcastle Netskills is.
ITCS373: Internet Technology Lecture 5: More HTML.
XHTML & Forms. PHP and the WWW PHP and HTML forms – Forms are the main way users can interact with your PHP scrip Typical usage of the form tag in HTML.
TJ 3043 – Web Application Development HTML Form. 2.0 Forms A form is the usual way to communicate information from a Web browser to a server HTML has.
7 1 User-Defined Functions CGI/Perl Programming By Diane Zak.
HTML Form Widgets. Review: HTML Forms HTML forms are used to create web pages that accept user input Forms allow the user to communicate information back.
HTLM Forms CS3505. Form Handling in Browser html User Files out form WEbBROWSErWEbBROWSEr User read response submit Get URL?input html Get file html script.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 9 Key Concepts 1 Copyright © Terry Felke-Morris.
+ FORMS HTML forms are used to pass data to a server. begins and ends a form Forms are made up of input elements Every input element has a name and value.
©SoftMooreSlide 1 Introduction to HTML: Forms ©SoftMooreSlide 2 Forms Forms provide a simple mechanism for collecting user data and submitting it to.
 2001 Prentice Hall, Inc. All rights reserved. Chapter 7 - Introduction to Common Gateway Interface (CGI) Outline 7.1Introduction 7.2A Simple HTTP Transaction.
Netprog CGI and Forms1 CGI and Forms A detailed look at HTML forms.
HTML Forms.
Week 10: HTML Forms HNDIT11062 – Web Development.
HTML Forms. A form is simply an area that can contain form fields. Form fields are objects that allow the visitor to enter information - for example text.
COS 125 DAY 17. Agenda  Assignment 7 not finished grading  Assignment 8 posted Due April 9  Capstone progress reports due  Quiz 2 Corrected 2 A’s,
Creating Forms on a Web Page. 2 Introduction  Forms allow Web developers to collect visitor feedback  Forms create an environment that invites people.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
HTML Tutorial. What is HTML HTML is a markup language for describing web documents (web pages) HTML documents are described by HTML tags Each HTML tag.
Lesson 5 Introduction to HTML Forms. Lesson 5 Forms A form is an area that can contain form elements. Form elements are elements that allow the user to.
FORMS Explained By: Jasdeep Kaur. Lecturer, Department of Computer Application, PGG.C.G., Sector: 42, Chandigarh.
University of Kansas Department of Electrical Engineering and Computer Science Dr. Susan Gauch April 21, 2005 I T T C Introduction to Web Technologies.
Ashima Wadhwa Java Script And Forms. Introduction Forms: –One of the most common Web page elements used with JavaScript –Typical forms you may encounter.
2440: 141 Web Site Administration Web Forms Instructor: Joseph Nattey.
Chapter 7 - Introduction to Common Gateway Interface (CGI)
How to Write Web Forms By Mimi Opkins.
Introducing Forms.
Presentation transcript:

CGI Programming

What is “CGI”? Common Gateway Interface A means of running an executable program via the Web. CGI is not a Perl-specific concept. Almost any language can produce CGI programs even C++ (gasp!!) However, Perl does have a *very* nice interface to creating CGI methods

How Does it Work? A program is created, like normal. The program must be made user-executable A user visits a web page. The web browser contacts the server where the CGI program resides, and asks it to run the program passes Parameters to the program similar to command line arguments The server runs the program with the parameters passed in The server takes the output of the program and returns it to the web browser. The web browser displays the output as an HTML page

Forms Most (not all) CGI scripts are contacted through the use of HTML forms. A form is an area of a web page in which the user can enter data, and have that data submitted to another page. When user hits submit button on the form, web browser contacts the script specified in the form tag.

Creating a Form <form method=“post” action=“file.cgi”> … <input type=“submit” value=“Submit Form”> </form> Method attribute specifies how parameters are passed to the CGI program. “post” means they’re passed in the HTTP header (and therefore aren’t seen anywhere). “get” means they’re passed through the address bar in the web browser. Action specifies the program you want the web browser to contact. <input> is tag used to accept User data. type=“submit” specifies a Submit button. When user clicks this button, browser contacts file specified in action attribute.

Form Input Types Many different ways of getting data from user. Most specified by <input> tag, type specified by type attribute of <input> text  a text box checkbox  a check box radio  a Radio button password  password field (text box, characters display as ******) hidden  hidden field (nothing displayed in browser) submit  Submit button. Submits the form reset  Reset button. Clears form of all data. button  A button the user can press (usually used w/ javaScript. *shudder*) file  field to upload a file image  an image user can click to submit form

Other Attributes of <input> name  name of input field. value  value returned from checks & radios, text of submits and buttons, contents of text, password, and hidden size  width of text or password checked  radio or checkbox ‘turned on’ src  URL of an image

Inputs that Don’t Use <input> <textarea> - big text field. Can specify rows and cols attributes <select> - create a drop-down menu. <option value=“…”> Options in the drop down menu.

Great. We can input. Now what? Now, we can write a CGI program that takes those inputs and *does stuff* with them. This is still a perl script. Therefore, still need the shebang as top line of the code. Next, need to include all the CGI methods. These are stored in CGI.pm As you may guess, TMTOWTDI. use CGI; use CGI “:standard”;

What’s the difference? Function oriented vs. Object Oriented CGI.pm actually defines a class. Therefore, if you use CGI; you can then do $query = new CGI; and access the CGI subroutines as methods of $query. Alternatively, you can get a ‘standard’ set of CGI functions to call directly use CGI “:standard”; Now can call CGI functions without fiddling with objects All my examples will be function oriented. (for now)

Outputting from CGI Just as CGI program took ‘input’ from user via web browser, it outputs back to use via web browser as well. STDOUT is redirected to the web browser that contacted it. This means you don’t have to learn any new output functions. print() will now throw data to the web browser.

Beginning a CGI Program #!/usr/local/bin/perl use CGI “:standard”; print header(“text/html”); header() prints HTTP header to web browser. Argument is MIME type of data. Defaults to text/html, so you can usually just leave the argument out.

Now Create your Output Remember, you’re building an HTML page in the output. So you must follow the HTML format: print “<html><head>”, “<title>My CGI Program</title>\n”, “</head><body>\n”; CGI.pm gives you a better way to do this. We’ll get to it soon.

Where’d Those Inputs Go? They were passed into the CGI program as parameters. You can retrieve them using the param() function. Called in list context w/ no argument, returns names of all parameters. Called in scalar context, takes name of one parameter, and returns value of that parameter Called in list context w/ an argument, returns array of all values for that parameter (ie, for checks and radios)

dump() subroutine defined in CGI.pm. Retrieves list of parameters and creates an HTML list of all parameters and all values. Like most CGI functions, doesn’t print anything. You must manually print the return value of the function call. print dump;

CGI.pm  HTML Shortcuts CGI gives you methods to create HTML code without actually writing HTML. most HTML tags aliased to CGI functions. unpaired tags print br(); # sends <br> to browser print p; # sends <p> to browser paired tags print b(“Bold text”); #<b>Bold text</b> print i(“Italic”); #<i>Italic</i>

More shortcuts tags with attributes: place name/value attributes in hash reference as first argument. String enclosed in tag is second argument. Ex: a({href=>“sample.html”, target=>“top”}, “Sample file”); Produces: <a href=“sample.html” target=“top”>Sample file</a>

start_html() Takes one parameter, the title. print start_html(“My title”); Produces: <html><head><title>My title</title></head><body> print end_html; </body></html>

HTML Form Shortcuts For full list of Form shortcuts, see http://stein.cshl.org/WWW/software/CGI/#forms Each one takes parameters as name/value pairs. Name starts with a dash. Most parameters are optional startform(-method=>“post”, -action=>“foo.cgi”) default method is post. default action is current script this is *very* beneficial. produces: <form method=“post” action=“foo.cgi”> endform(); # produces </form>

Input Shortcuts textfield(-name=>“MyText”, -default =>“This is a text box”) produces: <input type=“text” name=“MyText” value=“This is a text box”> All HTML Form input shortcuts are similar. Again, see http://stein.cshl.org/WWW/software/CGI/#forms for full list and description.

Programmer Beware “default” in input methods is value used *first* time script is loaded only. After that, they hold the values they had the last time the script was run. to override (ie, force default value to appear), set parameter -override=>1 inside input method: textfield(-name=>“foo”, -default =>“bar”, -override=>1);

Avoid Conflicts Some HTML tags have same name as internal Perl functions. Perl will get very confused if you try to use the CGI shortcut methods to print these tags… <tr> – table row. conflicts with tr/// use Tr() or TR() instead <select> – dropdown list. conflicts with select(). use Select() instead <param> - pass parameters to Java applet – conflicts with param(). use PARAM() instead <sub> - Make text subscripted. Conflicts with sub keyword. Use Sub() instead

Running CGI on CS machines There are two different CGI servers on the CS system. cgi.cs.rpi.edu and cgi2.cs.rpi.edu I’ve been told by labstaff that cgi.cs is depreciated and I shouldn’t use it. I’m ignoring them. To run on cgi.cs: make file user-executable put in public.html directory go to http://cgi.cs.rpi.edu/~yourID/yourscript.cgi To run on cgi2.cs put in public.html/cgi-bin directory go to http://cgi2.cs.rpi.edu/~yourID/cgi-bin/yourscript.cgi I find cgi.cs to be more user friendly. cgi2.cs gives me many unexplained errors.

Debugging Debugging a CGI program can be one of the most frustrating tasks ever. If there are any errors whatsoever, the web browser will simply display 500 Internal Server Error with no helpful information. Solution is to run the program from the command line. Perl will ask you for name=value pairs of parameters. Enter each name and value of the parameters, separated by newline. Then press CTRL-D. This way, you get the compiler errors, and you can see the ‘pure’ HTML output of your CGI script.

Lastly… Well, lastly for today anyway. One common method of CGI programming is to make both the form and the response all in one script. Here’s how you do that… #!/usr/local/bin/perl use CGI “:standard”; print header; if (!param()){ print start_html(-title => “Here’s a form”); print startform; #no action #create your form here… } else { print start_html(-title=> “Here’s the result”); #display the results of the submitting form }