PERL/C3/Perl-and-HTML/English
>>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
|
| Slide 3:
System Requirements |
To record this tutorial, I am using
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.pm is a Perl module that get installed along with Perl installation, which serves the communication.
|
| Slide 5(b):
How CGI Program works? |
* When a file in certain directory is requested from web browser
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
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
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.
|
| 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
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
| |
| Slide 8:
Assignment |
Assignment
(a)Java (b) C/C++ (c) Perl
|
| 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
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. |
