PERL/C3/Perl-and-HTML/English

From Script | Spoken-Tutorial
Jump to: navigation, search

>>Title of script: Perl and HTML

Author: Nirmala Venkat

Keywords: CGI script, Common Gateway Interface, html, PERL CGI, PERL programming, video tutorial


Visual Cue Narration
Slide 1: Welcome to the Spoken Tutorial on Perl and HTML.
Slide 2:

Learning objectives

In this tutorial we will learn how to create
  • html pages using
  • CGI (Common Gateway Interface) module
Slide 3:

System Requirements

To record this tutorial, I am using
  • Ubuntu Linux 12.04 operating system
  • Perl 5.14.2
  • Firefox Web Browser
  • Apache HTTP server and
  • gedit Text Editor

You can use any text editor of your choice.

Slide 4:

Pre-requisites

To follow this tutorial, you should have working knowledge of Perl programming.

If not, then go through the relevant Perl spoken tutorials on the spoken tutorial website.

Slide 5(a):

What is Perl CGI?

* Perl programs which are used on the web are called Perl CGI.
  • CGI stands for Common Gateway Interface.
  • It is an interface to serve client-server web communication

CGI.pm is a Perl module that get installed along with Perl installation, which serves the communication.

  • CGI.pm has ready to use functions to help developers to write Perl CGI applications.
Slide 5(b):

How CGI Program works?

* When a file in certain directory is requested from web browser
  • unlike HTTP server, Perl CGI scripts get executed and send output back to browser to display.

This function is called CGI and the programs are called CGI scripts.* CGI programs can be a Perl script, Shell Script, C or C++ program.

Now let us see a sample Perl program.
Switch to the terminal.
On the terminal >> type gedit cgiexample dot pl ampersand >> press Enter. Let me open a file cgiexample.pl in gedit which I have already saved.
In the cgiexample dot pl file, type the following code as displayed on the screen.

Let us understand the code now.

Highlight the code as per narration

#!/usr/local/bin/perl

use CGI qw(:standard);

print header;

print start_html("My Home Page");

print h1("Hello, Welcome to Spoken tutorial"); # same as <h1> Hello</h1>

end_html;

use CGI statement tells Perl that we want to use the CGI.pm module in our program.

It will load the module and make a set of CGI functions available for our code.

To start the HTML, we use the method start_html.

My Home Page” is the page title given for the web page.

We can print any HTML tag using the CGI module.

Heading tags are represented by h1, h2 etc

The end_html method returns the </BODY> and </HTML> tags.

Press Ctrl+S Now, press Ctrl+S to save the file.
Before we try to run the script via the web server, let's try running it from the command line.
In terminal >> typehtml perl cgiexample.pl and press Enter. Switch back to the terminal and type


perl cgiexample.pl

and press Enter.

The output looks like HTML.
Next, we will test the same script via the web server.
First, let us check whether web server is working or not.
Open the web browser Open your web browser and enter the IP address of the machine and press Enter.

Otherwise, you can type as http://localhost

Highlight the output


It works!

This is the default web page for this server.

The web server software is running but no content has been added, yet.

If everything works fine you will see something like this in the browser.

If you get any error, then the web service is not installed or it is not in ON status.

Please ask your system administrator for server configuration in such cases.

Slide 6:

Apache Installation

Sudo apt-get install apache2

Apache HTTP server is installed in my machine.

If it is not installed execute the below command on the terminal.

Otherwise, please ask your system administrator for server configuration in such cases.

<<PAUSE>>

Next, we will test the same script via the web server.

For this, we need to follow certain steps.
Slide 7:

Steps to run the CGI script on web server:

First place our program in the cgi-bin directory where the web server will recognize it as a CGI script.
  • The program filename must end with .pl or .cgi extension.
  • Set permission for the file to execute on the server.
  • Run the script
Switch to Terminal Switch to the terminal.
Type >>

sudo cp cgi_example.cgi /usr/lib/cgi-bin/

Now we will copy the file to the cgi-bin directory.

For this type the command-

sudo cp cgiexample.pl /usr/lib/cgi-bin/

Enter the password if required

Type>>

sudo chmod 755 /usr/lib/cgi-bin/cgi_example.cgi

Next we need to give the Web-server user read and execute permission for the file.

So type

sudo chmod 755 /usr/lib/cgi-bin/cgiexample.pl

Now our file which is placed in the cgi-bin directory is ready to execute.
Switch to web browser Go to the web browser.
Type>>

localhost/cgi-bin/cgi_example.cgi and press Enter.

Type localhost/cgi-bin/cgiexample.pl and press Enter.
Highlight the output We can see the output that is executed on the web browser.

<<PAUSE>>

Now let us see another program.

This program will add fields to a form and retrieve the entered values to our web page.

Click open files > usr > lib>cgi-bin> cgitest.cgi In the cgi-bin directory created earlier, I have saved a file form.cgi

I will open this file in gedit.

#!/usr/bin/perl


use CGI qw(:standard);

if (param()) {

displayfoto help developers to write Perl CGI applicationrm()

}

printform();

#Adding fields to the page

sub printform{

print start_form();

print p("First Name", textfield("fname"));

print p("Last Name", textfield("lname"));

print p("Gender",radio_group(-name=>'gender',

-values=>['Male','Female'],
-default=>'Male'));

print p("Service", popup_menu(-name=>'service',

-values=>['Excellent','Good','Average','Poor'],

-default=>'Excellent'));

print p(submit("Submit form"), reset("Clear form"));

print end_form();

}

Now add the below lines.

This program generates a feedback form.

The user has to enter the first name, last name, gender and feedback details.

To begin a form, we are using the start_form method.

Form field methods are very similar to the standard html tag methods.

To create a textbox in the form, Textfield method is used with several parameters.

Here “fname”, “lname” are the names of the textbox which gets the input from the user.

radio_group specifies the radio button with two options “Male” and “Female”.

This is denoted by the parameter -values

-default parameter indicates the default selection of the radio button.

popup_menu specifies the listbox option.

Submit button is used to submit the entered data to the URL provider.

Clear button is used to clear the form.

Highlight displayform() function The displayform function retrieves the values we entered in the form.
#Retrieving the values of the parameters posted on to the form

sub displayform{p://spoken-tutorial.org/What_is_a_Spoken_Tutorial ]

$name1 = param("fname");

print p("Hello $name1","!!");

print p("Thanks for your feedback.");

print "</UL><HR>";

}

param function gives the value of the form field whose name is passed as parameter.

Here “fname” is the name given to the “First Name” textbox.

The value is retrieved and stored in the variable dollar name1.

Let us execute the program now.
Switch to web browser Go to the web browser.
Type>>

localhost/cgi-bin/cgitest.cgi and press Enter.

Type localhost/cgi-bin/form.cgi and press Enter.
The feedback form is displayed.
Enter,

First name: Hari

Last name: Krishnan

Gender : male

Service: Good

Press Submit button.

I'll enter data in this form as shown here.

Then, press the Submit button to see the output that is retrieved from the form.

<<PAUSE>>

This brings us to the end of this tutorial. Let us summarise.
In this tutorial we learnt how to create


  • html pages using
  • CGI (Common Gateway Interface) module
Slide 8:

Assignment

Assignment
  1. In form.cgi program, add checkbox option for languages Java, C/C++ and Perl

(a)Java (b) C/C++ (c) Perl

  1. Add textarea option to get the user feedback.
  2. Print the user entered information on the webpage.
Slide 9:

About Spoken Tutorial project

The video at the following link summarises the Spoken Tutorial project.

Please download and watch it

Slide 10:

Spoken Tutorial workshops

The Spoken Tutorial Project Team
  • conducts workshops using spoken tutorials and
  • gives certificates on passing online tests.

For more details, please write to us.

Slide 11: Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at

this link.

This is Nirmala Venkat from IIT Bombay, signing off. Thanks for watching.

Contributors and Content Editors

Nirmala Venkat