CIS 24: CGI and Perl Programming for the Web

Class 6 (10/16) Lecture Notes

Topics

  1. Quiz Review
  2. Review of Last Week's Lab Assignment
  3. Overview of Final Projects
  4. What is HTML?
  5. Using HTML
  6. HTML Forms
  7. Lab: HTML Work for Final Project

Return to CIS 24 home page


  1. Quiz Review
  2. The average grade for the Quiz was 78 - the standard deviation was 18 points.

    1. Write a script that converts temperature from degrees Fahrenheit to degrees Celsius. Ask the user to enter a temperature in Fahrenheit, and then have your script print the equivalent temperature in Celsius. Subtract 32 and then divide by 1.8 to obtain Celsius.
      print "Please enter a temperature in Fahrenheit: ";
      chomp($f = <STDIN>);
      $c = ($f - 32) / 1.8;
      print "$f degrees Fahrenheit is $c degrees Celsius.\n";

    2. Write a script that:
      • Asks the user to type in a positive number
      • Assigns the user input to the variable $input1
      • Asks the user to type in a second positive number that is different from the first one
      • Assigns the user input to the variable $input2
      • Uses the list range operator to create an array consisting of the values of $input1 and $input2, and the integers between them (hint: to do this correctly, you have to first determine which of the two variables has a greater value)
      • Uses a while loop to print each element of the array
      print "Please enter a positive integer: ";
      chomp($input1 = <STDIN>);
      print "Please enter another positive integer (different from the first): ";
      chomp($input2 = <STDIN>);
      
      if ($input1 > $input2) {
      	@numbers = ($input2..$input1);
      }
      
      else {
      	@numbers = ($input1..$input2);
      }
      
      $count = 0;
      while ($count <= $#numbers) { 
      	print "element $count is $numbers[$count]\n";
      	$count++;
      }

    3. There are several errors in the script below. Make changes as necessary so that it successfully performs each of the following tasks:
      • Assign a value to $string
      • Print the value of $string
      • Use the split function on $string (splitting on each colon), and assign the resulting array to @words
      • Print each element of @words using a foreach loop
      • Use the join function to put the elements of @words into $new, with a single space between each element
      • Print the value of $new

      Original Script:

      #!perl
      
      $string = "This:is:a:line:of:text";
      print "$string\n"
      split(/:/,$string) == @words;
      
      foreach ($words) {
      	print "$words\n";
      }
      
      $new = join(@words, " ");
      print '$new\n';

      Fixed script:

      #!perl
      
      $string = "This:is:a:line:of:text";
      print "$string\n";
      @words = split(/:/,$string);
      
      foreach $word (@words) {
      	print "$word\n";
      }
      
      $new = join(" ", @words);
      print "$new\n";

    4. Write a script that:
      • accepts input from the user 5 times
      • for each input, asks the user to "please enter a word or integer"
      • prints a report indicating which of the user's inputs comes first alphabetically, and which comes last alphabetically
      for($i = 0; $i < 5; $i++) {
      	print "Please enter a word or integer: ";
      	$inputs[$i] = <STDIN>;
      	chomp($inputs[$i]);
      }
      
      @sortedInputs = sort(@inputs);
      
      print "\nThe first input alphabetically is: $sortedInputs[0]\n";
      print "The last input alphabetically is: $sortedInputs[$#sortedInputs]\n";

  3. Review of Last Week's Lab Assignment
    1. Write a script that accepts a line of input from the user and assigns it to a variable. Using the substitution operator, look for every occurrence of the word "bold" - in lower or upper case - and replace it with the string "<B>bold</B>". Print the updated string.
      print "Type your input: ";
      chomp($input = <STDIN>);
      
      $input =~ s/bold/<B>bold<\/B>/gi;
      
      print "The revised input:\n";
      print "$input\n";

    2. Write a short script that accepts a line of input from the user, assigns it to a variable, and uses the translation operator to convert all the text to lower case. Print the updated string.
      print "Type your input: ";
      chomp($input = <STDIN>);
      
      $input =~ tr/[A-Z]/[a-z]/;
      
      print "The revised input:\n";
      print "$input\n";

    3. Write a script that has the following as the first line of code.

      $list = "oranges 6 apples 11 bananas 7 cherries 5";

      Your script should create a hash from this string, with each of the fruit names being a key in the hash, and the number following the fruit name being its corresponding value (hint: one approach to this would involve the use of split and while, there may be other approaches as well). Then print the key/value pairs of the hash. Do you know the reason why they didn't print in the same order you assigned them? Easy Solution:

      $list = "oranges 6 apples 11 bananas 7 cherries 5";
      @fruitArray = split(/ /, $list);
      %fruitHash = @fruitArray;
      while (($fruit, $howMany) = each(%fruitHash)) {
      	print "$fruit: $howMany\n";
      }
      Hard Solution:
      $list = "oranges 6 apples 11 bananas 7 cherries 5";
      @fruitArray = split(/ /, $list);
      
      for($i = 0; $i <= $#fruitArray; $i++) {
      	if ($i % 2 == 0) {
      		$fruitHash{$fruitArray[$i]} = $fruitArray[$i + 1];
      	}	
      }
      
      while (($fruit, $howMany) = each(%fruitHash)) {
      	print "$fruit: $howMany\n";
      }

  4. Overview of Final Projects
  5. Your final project is due on 12/18. Except for preparing for the Midterm, your final project should be the focus of your work between now and the end of the semester.

    I'm not providing step-by-step instructions on how to do the final projects. Instead, I'm providing functional specifications for two different projects. You can review the two specifications and pick one to do as your final project.

    These specifications describe the functions your application should be able to perform. Since this is probably your first time doing this sort of thing, the specifications also include implementation suggestions that contain some ideas on how to go about fulfilling the requirements.

    Except for next week, when we'll install and configure the Apache web server on each lab computer, your remaining lab assignments will address one or more components of your project. During the labs I may provide additional implementation suggestions, and I'll be here to help you work through ideas.

    Let's take a look at the specifications for the two available projects:

    We'll start on the HTML work for the projects in tonight's lab. I'll be available during the lab to help you decide on a project if you're not sure which one you want to do.

  6. What Is HTML?
    1. HTML is an acronym that stands for Hypertext Markup Language. Let's break that down:

      • Hypertext has been around much longer than the Web. If you've ever used the "help" feature in a Windows application, you've probably used hypertext links to jump from one help document to another. The Web revolutionized the use of hypertext in two ways: 1. it ignored one of the basic functional philosophies of hypertext - that there must be a central, organized database that ensures all the links work and go to the right places; and 2. it provided a means for hypertext links to exist between computers anywhere on the Internet. On the Web, anyone, anywhere can create a document and put in whatever links they want, and they don't have to notify anyone about it.

        A result of this implementation of hypertext on the Web is that many hypertext links are often outdated, or go nowhere due to poor maintenance. While this sometimes cause frustration for Web surfers, it's one of the key factors that has allowed the web to grow into a global publishing and communication medium.

      • HTML is a Markup Language, not a programming language. HTML syntax by itself does not allow you to perform actions (aside from linking to other documents) or manipulate data. It only allows you to control how information is displayed in a document. For example, putting a sentence in italics, positioning an image to the left of a paragraph, creating bulleted lists like this one, etc. What's impressive about HTML is that it's platform independent. An HTML document created on, for example, a Mac, can be viewed or edited on any other computer without the need for any special filters or software.

    2. HTML is the creation of a single individual: Tim Berners Lee. He used to work for the CERN particle physics research institute. CERN has researchers all over the world, and they use a wide variety of computers and operating systems. He was tasked with developing tools to help the researchers share information and documents more easily. To do this, he created HTML, the first web servers, and the first web browsers. There's an excellent interview with him about these early days of the Web at the Technology Review web site.

      Rather than trying to commercialize his software and ideas, he gave them away. This is another reason why the Web has become a global phenomenon: anyone with a computer can create an HTML document - you don't need to buy any special software or pay a fee to do it (although actually getting it on the web is another matter). He now oversees the World Wide Web Consortium, which manages the ongoing development of HTML.

    3. HTML is currently on version 4.0. In the early versions, HTML was primarily a document structuring language. This means that, as the author of an HTML document, you controlled your document's structure, but not its final appearance. For example, you could designate that a line of text should be a header, that another line should be displayed with emphasis, etc. It was then up to the web browser software to decide how to render the document based on this structuring information. In a graphical web browser, the header might be displayed in a large font, and the emphasized text might be italicized. In a text-only browser (which were very common in the "old days"), both simply might be displayed with an underline.

    4. As web browsers and web users became more sophisticated, demand grew for authors to have more control over the appearance of their HTML documents. So, in the more recent versions of HTML, there are now more document layout capabilities. HTML authors can now specify fonts, font colors, and can even control the positions of page elements on a pixel-by-pixel basis (although that level of control requires the use of Cascading Style Sheets, which is an extension of the HTML specification).

    5. More recent Web browsers also support the use of scripting languages embedded in HTML documents. Netscape browsers support JavaScript, and Internet Explorer supports VBScript and JScript (Microsoft's similar but not-quite-the-same version of JavaScript). These embedded scripts allow you to do client-side scripting, which means you can manipulate data and web page elements within the browser. You cannot use these embedded scripts to interact with applications on a web server. To do that, you need server-side scripting, which is what we're learning in this class! Tonight and in the next class we'll learn the basics of how to send data from a web page to a Perl script on a web server.

  7. Using HTML
    1. HTML documents are just ordinary text files. You can create and edit HTML files in any text editor. HTML documents contain special tags that web browsers interpret. For example, if you want text to appear in bold, you surround it with tags that indicate the text should be bold. For example:

      <B>This text has bold tags around it</B>

    2. It's important to note that HTML will treat any and all whitespace - tabs, line breaks, spaces - as a single space. You can do basic formatting of your text by using paragraph tags <P> which print two line feeds, and <BR> tags, which print one line feed.

    3. An HTML document has the following structure:

      <HTML>
      <HEAD>
      <TITLE>Put your title here</TITLE>
      </HEAD>

      <BODY>
      <P>Put your page content in here.

      <P><B>Here is some bold content.</B></P>
      </BODY>
      </HTML>

    4. As you can see in this example, most HTML tags have an opening and a closing tag. Some do not, such as <BR>. Others have optional closing tags, such as the one for the paragraph tag. Some tags have required nesting. For example, the <TITLE> tags only work if they're nested inside the <HEAD> tags (which are themselves nested inside the <HTML> tags).

    5. Many HTML tags also have attributes. These attributes provide additional information for the tag. One tag that you have to know which uses an attribute is the <A> tag, which is used to create hyperlinks to other documents:

      <A HREF="http://www.toppa.com/cis24/index.html">The CIS 24 Home Page </A>

    6. This is just a very quick overview of HTML. Aside from the Form tags we're about to discuss, this class does not require you to know any HTML beyond the basics we just covered. However, knowing HTML is basically a requirement if you want to pursue a career that relates to the Web. A good online HTML reference is at http://www.htmlhelp.com. There is also a good tutorial online at http://www.htmlgoodies.com/primers/basics.html

  8. HTML Forms
    1. The most common user interface to CGI applications which get information from users is the HTML form. Web forms allow users to enter information, which is then transmitted back to your web server and made available for processing by your Perl CGI script. We'll talk more about the data transmission and reception procedures in the next class. For now, we'll focus on learning how to build the forms you'll use to get information from users.

    2. The <FORM> tag appears within the Body of an HTML document. It has the closing tag </FORM>. Nested within the opening and closing form tags are your form input elements, which we'll get to in a moment. Form tags cannot be nested within other Form tags. Attempting to nest Form tags will result in unpredictable behavior.

      The Form tag has one required attribute and several optional attributes. Tonight we'll focus on the required attribute, ACTION. The ACTION attribute specifies where the form data should be sent when the user submits it. For example:

      <FORM ACTION="/cgi-bin/my_script.pl">

      ...input elements go here...

      </FORM>

      When the form data is received by the web server, it will direct the data to the location of the script or program you specify in the ACTION attribute. It will then be up to that script to figure out what to do with the data.

    3. The <INPUT> tag can only be used inside a Form, and is used to create input elements that a user can interact with. There are two required attributes: TYPE and NAME. You specify the type of input element you want with the TYPE attribute. You'll also specify a NAME for the input element. Your Perl script will use the Names you assign to distinguish the incoming pieces of data from each other. There also may be other attributes, depending on the input TYPE. Here are samples of each of the input types:

      • A Text field: <INPUT TYPE="text" NAME="first_name" SIZE="10" VALUE="Mike">
        Please enter your first name:

      • Radio buttons (these are used in a group using the same NAME):
        <INPUT TYPE="radio" NAME="amount" VALUE="5">
        <INPUT TYPE="radio" NAME="amount" VALUE="10" CHECKED>
        I'll take 5
        I'll take 10

      • A Checkbox: <INPUT TYPE="checkbox" NAME="size" VALUE="10" CHECKED>
        I'm a size 40

      • A Password field: <INPUT TYPE="password" NAME="your_password" SIZE="10">
        Please enter your password:

      • A file upload field: <INPUT TYPE="file" NAME="upload_file" SIZE="15">

      • A hidden field: <INPUT TYPE="hidden" NAME="secret" VALUE="you_cannot_see_this">

      • A submission button: <INPUT TYPE="submit" NAME="submit" VALUE="Submit Response">

      • A custom submission button: <INPUT TYPE="image" NAME="try_again" SRC="/kosh/images/btn_again.gif" ALIGN="middle" BORDER="0">

      • A reset button: <INPUT TYPE="reset" VALUE="Reset Form">

    4. There are also form input elements that do not use the INPUT tag:

      • A textarea tag: <TEXTAREA NAME="question2" COLS="40" ROWS="15" WRAP="virtual">Some default text</TEXTAREA>

      • A select tag:
        <SELECT NAME="size">
        <OPTION VALUE="1">Size 1 </OPTION>
        <OPTION VALUE="2">Size 2
        <OPTION VALUE="3" SELECTED>Size 3
        </SELECT>

        A select tag with optional MULTIPLE and SIZE attribute:
        <SELECT NAME="age" MULTIPLE SIZE="2">
        <OPTION VALUE="10">age 10
        <OPTION VALUE="20">age 2
        <OPTION VALUE="30">age 3
        </SELECT>

        When you use the MULTIPLE attribute, multiple name/value pairs with the same name are submitted. It's important to have your script handle such inputs properly, so that none of the values are lost. (Note that if you give multiple Checkboxes the same NAME, this will also happen with your Checkbox inputs.)

    5. Try clicking the submit button above. There was no ACTION specified for this form, so the default result is that the form data is sent back to this page. The form data will appear in your web browser's Location window after the URL of this page. We'll discuss this more next week.

  9. Lab: HTML Work for Final Project
  10. Before we begin HTML work, we should have an HTML editor. Please install the freeware program EasyHTML. I'll show you on the projector screen where to get it, how to install it, and give you a brief overview on how to use it. Find out more about EasyHTML.

    If you've decided to do the Calendar of Events, this week you should work on the HTML for the Calendar Management Page and Event Entry Page. If you've decided to do the Digital Camera Shopper, you can work on the Camera Search Page.

Return to CIS 24 home page