Nirmala Venkat: Created page with "'''>>Title of script''':''' Perl and HTML''' '''Author: Nirmala Venkat''' '''Keywords: CGI script, Common Gateway Interface, html, PERL CGI, PERL programming, video tutorial..."

2015-12-23T12:49:11Z

Created page with "'''>>Title of script''':''' Perl and HTML''' '''Author: Nirmala Venkat''' '''Keywords: CGI script, Common Gateway Interface, html, PERL CGI, PERL programming, video tutorial..."

New page

'''>>Title of script''':''' Perl and HTML'''

'''Author: Nirmala Venkat'''

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

{| style="border-spacing:0;"
| style="background-color:#c0c0c0;border:1pt solid #000000;padding:0.097cm;"| '''Visual Cue'''
| style="background-color:#c0c0c0;border:1pt solid #000000;padding:0.097cm;"| '''Narration'''

|-
| style="border:1pt solid #000000;padding:0.097cm;"| '''Slide 1:'''

| style="border:1pt solid #000000;padding:0.097cm;"| Welcome to the''' Spoken Tutorial''' on''' Perl and HTML.'''

|-
| style="border:1pt solid #000000;padding:0.097cm;"| '''Slide 2:'''

'''Learning objectives'''

| style="border:1pt solid #000000;padding:0.097cm;"| In this tutorial we will learn how to create

* '''html pages''' using
* '''CGI (Common Gateway Interface) module'''

|-
| style="border:1pt solid #000000;padding:0.097cm;"| '''Slide 3:'''

'''System Requirements'''
| style="border:1pt solid #000000;padding:0.097cm;"| 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.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| '''Slide 4:'''

'''Pre-requisites'''
| style="border:1pt solid #000000;padding:0.097cm;"| 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.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| '''Slide 5(a):'''

'''What is Perl CGI?'''

| style="border:1pt solid #000000;padding:0.097cm;"| * 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.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| '''Slide 5(b):'''

'''How CGI Program works?'''

| style="border:1pt solid #000000;padding:0.097cm;"| * When a file in certain directory is requested from web browser<br/>

* 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.

|-
| style="border:1pt solid #000000;padding:0.097cm;"|
| style="border:1pt solid #000000;padding:0.097cm;"| Now let us see a sample '''Perl''' program.

|-
| style="border:1pt solid #000000;padding:0.097cm;"|
| style="border:1pt solid #000000;padding:0.097cm;"| Switch to the '''terminal.'''

|-
| style="border:1pt solid #000000;padding:0.097cm;"| On the''' terminal >>''' type''' gedit cgiexample dot pl ampersand''' >> press''' Enter'''.
| style="border:1pt solid #000000;padding:0.097cm;"| Let me open a file '''cgiexample.pl''' in''' gedit''' which I have already saved.

|-
| style="border:1pt solid #000000;padding:0.097cm;"|
| style="border:1pt solid #000000;padding:0.097cm;"| In the''' cgiexample dot pl''' file, type the following code as displayed on the screen.

Let us understand the code now.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Highlight the code as per narration

<nowiki>#!/</nowiki>usr/local/bin/perl

use CGI qw(:standard);

print header<nowiki>;</nowiki>

print start_html("My Home Page");

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

end_html<nowiki>;</nowiki>
| style="border:1pt solid #000000;padding:0.097cm;"| '''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 '''<nowiki></</nowiki>BODY> '''and '''<nowiki></</nowiki>HTML> tags'''.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Press''' Ctrl+S'''
| style="border:1pt solid #000000;padding:0.097cm;"| Now, press''' Ctrl+S''' to save the file.

|-
| style="border:1pt solid #000000;padding:0.097cm;"|
| style="border:1pt solid #000000;padding:0.097cm;"| Before we try to run the '''script '''via the '''web server''', let's try running it from the '''command line'''.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| In terminal >> typehtml''' perl cgiexample.pl''' and press''' Enter'''.
| style="border:1pt solid #000000;padding:0.097cm;"| Switch back to the''' terminal''' and type

'''perl cgiexample.pl'''

and press''' Enter'''.

|-
| style="border:1pt solid #000000;padding:0.097cm;"|
| style="border:1pt solid #000000;padding:0.097cm;"| The output looks like '''HTML'''.

|-
| style="border:1pt solid #000000;padding:0.097cm;"|
| style="border:1pt solid #000000;padding:0.097cm;"| Next, we will test the same '''script''' via the '''web server.'''

|-
| style="border:1pt solid #000000;padding:0.097cm;"|
| style="border:1pt solid #000000;padding:0.097cm;"| First, let us check whether '''web server '''is working or not.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Open the web browser
| style="border:1pt solid #000000;padding:0.097cm;"| Open your '''web browser''' and enter the '''IP address''' of the machine and press '''Enter'''.

Otherwise, you can type as''' http://localhost'''

|-
| style="border:1pt solid #000000;padding:0.097cm;"| '''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.'''
| style="border:1pt solid #000000;padding:0.097cm;"| 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.

|-
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| '''Slide 6:'''

'''Apache Installation'''

'''Sudo apt-get install apache2'''
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| 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.

|-
| style="border:1pt solid #000000;padding:0.097cm;"|
| style="border:1pt solid #000000;padding:0.097cm;"| <nowiki><<</nowiki>PAUSE>>

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

|-
| style="border:1pt solid #000000;padding:0.097cm;"|
| style="border:1pt solid #000000;padding:0.097cm;"| For this, we need to follow certain steps.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| '''Slide 7:'''

'''Steps to run the CGI script on web server:'''

| style="border:1pt solid #000000;padding:0.097cm;"| 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'''

* The URL for this program will be as shown in the slide<br/> [http://localhost/cgi-bin/filename.cgi http://localhost/cgi-bin/filename.cgi]

|-
| style="border:1pt solid #000000;padding:0.097cm;"| '''Switch to Terminal'''
| style="border:1pt solid #000000;padding:0.097cm;"| Switch to the '''terminal'''.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Type >>

'''sudo cp cgi_example.cgi /usr/lib/cgi-bin/'''
| style="border:1pt solid #000000;padding:0.097cm;"| 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

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Type'''>>'''

'''sudo chmod 755 /usr/lib/cgi-bin/cgi_example.cgi'''
| style="border:1pt solid #000000;padding:0.097cm;"| 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'''

|-
| style="border:1pt solid #000000;padding:0.097cm;"|
| style="border:1pt solid #000000;padding:0.097cm;"| Now our file which is placed in the '''cgi-bin directory''' is ready to execute.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Switch to web browser
| style="border:1pt solid #000000;padding:0.097cm;"| Go to the web browser.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Type>>

'''localhost/cgi-bin/cgi_example.cgi''' and press''' Enter'''.
| style="border:1pt solid #000000;padding:0.097cm;"| Type''' localhost/cgi-bin/cgiexample.pl''' and press '''Enter'''.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Highlight the output
| style="border:1pt solid #000000;padding:0.097cm;"| We can see the output that is executed on the '''web browser.'''

'''<nowiki><<</nowiki>PAUSE>>'''

|-
| style="border:1pt solid #000000;padding:0.097cm;"|
| style="border:1pt solid #000000;padding:0.097cm;"| Now let us see another program.

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

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Click open files >''' usr > lib>cgi-bin> cgitest.cgi'''
| style="border:1pt solid #000000;padding:0.097cm;"| In the''' cgi-bin directory''' created earlier, I have saved a file '''form.cgi'''

I will open this file in''' gedit'''.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| <nowiki>#!/</nowiki>usr/bin/perl

use CGI qw(:standard);

if (param()) {

displayfoto help developers to write Perl CGI applicationrm()

}

printform();

'''<nowiki>#</nowiki>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<nowiki>=>'</nowiki>gender',

-values<nowiki>=>['</nowiki>Male','Female'],

-default<nowiki>=>'</nowiki>Male'));

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

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

-default<nowiki>=>'</nowiki>Excellent'));

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

print end_form();

}
| style="border:1pt solid #000000;padding:0.097cm;"| 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.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Highlight displayform() function
| style="border:1pt solid #000000;padding:0.097cm;"| The''' displayform function '''retrieves the values we entered in the form.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| <nowiki>#</nowiki>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<nowiki> "</</nowiki>UL<nowiki>><</nowiki>HR>";

}
| style="border:1pt solid #000000;padding:0.097cm;"| '''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'''.

|-
| style="border:1pt solid #000000;padding:0.097cm;"|
| style="border:1pt solid #000000;padding:0.097cm;"| Let us execute the program now.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Switch to web browser
| style="border:1pt solid #000000;padding:0.097cm;"| Go to the web browser.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Type>>

'''localhost/cgi-bin/cgitest.cgi''' and press''' Enter'''.
| style="border:1pt solid #000000;padding:0.097cm;"| Type''' localhost/cgi-bin/form.cgi''' and press '''Enter'''.

|-
| style="border:1pt solid #000000;padding:0.097cm;"|
| style="border:1pt solid #000000;padding:0.097cm;"| The feedback form is displayed.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Enter,

First name: Hari

Last name: Krishnan

Gender : male

Service: Good

Press Submit button.
| style="border:1pt solid #000000;padding:0.097cm;"| 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.

<nowiki><<</nowiki>PAUSE>>

|-
| style="border:1pt solid #000000;padding:0.097cm;"|
| style="border:1pt solid #000000;padding:0.097cm;"| This brings us to the end of this tutorial. Let us summarise.

|-
| style="border:1pt solid #000000;padding:0.097cm;"|
| style="border:1pt solid #000000;padding:0.097cm;"| In this tutorial we learnt how to create

* '''html pages''' using
* '''CGI''' (Common Gateway Interface) module

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 8:

'''Assignment'''

| style="border:1pt solid #000000;padding:0.097cm;"| Assignment

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

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

#: Add '''textarea''' option to get the user feedback.
# Print the user entered information on the webpage.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 9:

About Spoken Tutorial project

| style="border:1pt solid #000000;padding:0.097cm;"| The video at the following link summarises the Spoken Tutorial project.

Please download and watch it

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 10:

Spoken Tutorial workshops

| style="border:1pt solid #000000;padding:0.097cm;"| The''' Spoken Tutorial Project''' Team

* conducts workshops using spoken tutorials and
* gives certificates on passing online tests.

For more details, please write to us.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 11:

| style="border:1pt solid #000000;padding:0.097cm;"| Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at

this link.

|-
| style="border:1pt solid #000000;padding:0.097cm;"|
| style="border:1pt solid #000000;padding:0.097cm;"| This is Nirmala Venkat from IIT Bombay, signing off. Thanks for watching.

|}

PERL/C3/Perl-and-HTML/English - Revision history

Nirmala Venkat: Created page with "'''>>Title of script''':''' Perl and HTML''' '''Author: Nirmala Venkat''' '''Keywords: CGI script, Common Gateway Interface, html, PERL CGI, PERL programming, video tutorial..."