PERL/C3/Perl-and-HTML/English-timed
From Script | Spoken-Tutorial
| 'Time | Narration |
| 00:01 | Welcome to the Spoken Tutorial on Perl and HTML. |
| 00:06 | In this tutorial, we will learn how to create
html pages and CGI module. |
| 00:14 | 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. |
| 00:31 | You can use any text-editor of your choice. |
| 00:35 | To follow this tutorial, you should have working knowledge of Perl programming. |
| 00:40 | If not, then go through the relevant Perl spoken-tutorials on the spoken tutorial website. |
| 00:47 | Perl programs which are used on the web are called Perl CGI. |
| 00:52 | CGI stands for Common Gateway Interface. |
| 00:56 | It is an interface to serve client-server web communication. |
| 01:01 | CGI.pm is a Perl module that gets installed along with Perl installation which serves the communication. |
| 01:10 | CGI.pm has ready to use functions to help developers, to write Perl CGI applications. |
| 01:19 | 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. |
| 01:33 | This function is called CGI and the programs are called CGI scripts. |
| 01:40 | CGI programs can be a Perl script, Shell Script, C or C++ program. |
| 01:47 | Now, let us see a sample Perl program. |
| 01:50 | Switch to the terminal. |
| 01:53 | Let me open a file cgiexample.pl in gedit which I have already saved. |
| 02:01 | In the cgiexample dot pl file, type the following code as displayed on the screen. |
| 02:08 | Let us understand the code now. |
| 02:11 | use CGI statement tells Perl that we want to use the CGI.pm module in our program. |
| 02:19 | It will load the module and make a set of CGI functions available for our code. |
| 02:26 | To start the HTML, we use the method start_html(). |
| 02:33 | “My Home Page” is the page title given for the web page. |
| 02:38 | We can print any HTML tag using the CGI module. |
| 02:43 | Heading tags are represented by h1, h2 etc. |
| 02:49 | The end_html method returns the BODY and HTML tags. |
| 02:55 | Now, save the file. |
| 02:57 | Before we try to run the script via the web server, let's try running it from the command line. |
| 03:04 | Switch back to the terminal and type: perl cgiexample.pl and press Enter. |
| 03:12 | The output looks like HTML. |
| 03:15 | Next, we will test the same script via the web server. |
| 03:20 | First, let us check whether web server is working or not. |
| 03:25 | Open your web browser and enter the IP address of the machine and press Enter. |
| 03:31 | Otherwise, you can type as "localhost". |
| 03:35 | If everything works fine, you will see something like this in the browser. |
| 03:40 | If you get any error, then the web service is not installed or it is not in ON status. |
| 03:48 | Apache HTTP server is installed in my machine. |
| 03:52 | If it is not installed, execute the below command on the terminal. |
| 03:58 | Otherwise, please ask your system administrator for server configuration. |
| 04:04 | Now, we will test the same script via the web server. |
| 04:09 | For this, we need to follow certain steps. |
| 04:13 | First, place our program in the cgi-bin directory where the web server will recognize it as a CGI script. |
| 04:22 | The program filename must end with dot pl or dot cgi extension. |
| 04:29 | Set permission for the file to execute on the server. |
| 04:33 | Run the script. |
| 04:35 | The URL for this program will be as shown in the slide. |
| 04:40 | Switch to the terminal. |
| 04:42 | Now, we will copy the file to the cgi-bin directory. |
| 04:47 | For this, type the command:sudo space cp space cgiexample.pl /usr/lib/cgi-bin/. |
| 05:03 | Enter the password if required. |
| 05:06 | Next, we need to give the Web-server user 'read' and 'execute' permission for the file. |
| 05:13 | For this, type: sudo space chmod space 755 space /usr/lib/cgi-bin/cgiexample.pl |
| 05:31 | Now, our file which is placed in the cgi-bin directory is ready to execute. |
| 05:38 | Go to the web browser. |
| 05:41 | Type: localhost/cgi-bin/cgiexample.pl and press Enter. |
| 05:50 | We can see the output that is executed on the web browser. |
| 05:55 | Now, let us see another program. This program will add fields to a form and retrieve the entered values to our web page. |
| 06:06 | In the cgi-bin directory created earlier, I have saved a file 'form.cgi'. I will open this file in gedit. |
| 06:17 | Now, add the below lines. This program generates a feedback form. |
| 06:24 | The user has to enter the first name, last name, gender and feedback details. |
| 06:31 | To begin a form, we are using start_form() method. |
| 06:36 | Form field methods are very similar to the standard html tag methods. |
| 06:42 | To create a textbox in the form, Textfield() method is used with several parameters. |
| 06:49 | Here “fname”, “lname” are the names of the textbox which get the input from the user. |
| 06:57 | radio underscore group specifies the radio button with two options “Male” and “Female”. |
| 07:05 | This is denoted by the parameter hyphen values. |
| 07:09 | hyphen default parameter indicates the default selection of the radio button. |
| 07:15 | popup underscore menu specifies the listbox option. |
| 07:20 | Submit button is used to submit the entered data to the URL provider. |
| 07:26 | Clear button is used to clear the form. |
| 07:30 | The displayform function retrieves the values, we entered in the form. |
| 07:36 | param() function gives the value of the form field whose name is passed as parameter. |
| 07:42 | Here “fname” is the name given to the “First Name” textbox. |
| 07:47 | The value is retrieved and stored in the variable dollar name1. |
| 07:53 | Let us execute the program now. |
| 07:56 | Go to the web browser. |
| 07:58 | Type: localhost/cgi-bin/form.cgi and press Enter. |
| 08:06 | The feedback form is displayed. |
| 08:09 | I'll enter data in this form as shown here. |
| 08:15 | Then, press the Submit button to see the output that is retrieved from the form. |
| 08:21 | This brings us to the end of this tutorial. Let us summarize. |
| 08:26 | In this tutorial, we learnt how to create html pages using CGI module. |
| 08:33 | Assignment-In form.cgi program, add checkbox option for languages Java, C/C++ and Perl. |
| 08:44 | Add textarea option to get the user feedback. |
| 08:48 | Print the user entered information on the webpage. |
| 08:52 | The video at the following link summarizes the Spoken Tutorial project.
Please download and watch it. |
| 08:59 | The Spoken Tutorial Project team:
conducts workshops using spoken tutorials and gives certificates on passing online tests. |
| 09:08 | For more details, please write to us. |
| 09:11 | Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.More information on this mission is available at this link. |
| 09:23 | This is Nirmala Venkat from IIT Bombay, signing off. Thanks for watching. |
