CSCI A348/548 Lab Notes Five Fall 2000

Adding yourselves to the passwd file:

1. Type htpasswd /u/username/httpd/passwd username

   in which you need to replace username with the username of your choice.

2. Type the password that you want to associate with that username.

3. Confirm the password.

4. Add a line require username to your access.conf right under the line for dgerman if you're referring to the protected directory. If you're definining the access for a new directory repeat the steps and add a new <Directory> entry in your access.conf file.

5. Restart your server. Note that you must be sure it did restart.

6. Test your set up.

Here's a demo of yourJavaScript enabled form when at the end of this in-lab assignment.

1. Start with this form:

<STRONG>My Phonebook</STRONG>
<FORM NAME  ="phonebook" 
      METHOD="POST" 
      ACTION="http://yourHost.cs.indiana.edu:yourPort#/cgi-bin/lab6/process">
Please Enter Your: <blockquote>
Full Name:    <input type="text" name="fullname"> <br>
Phone Number: <input type="text" name="phone"> 
                   </blockquote> 
<input type="submit" value="Submit">
<input type="reset" value="Clear"> 
</FORM>

That would look like this:

My Phonebook

2. Write the process script.

#!/usr/bin/perl
use CGI;
$q = new CGI; 
print $q->header, 
      $q->start_html(-title=>'JavaScript Lab',
                     -bgcolor=>'white');                   
if ($q->request_method() eq 'POST') {
  print $q->Dump; 
} else {
  print "Only POST is supported."; 
} 
print $q->end_html; 

3. Write a JavaScript function for Name Validation

function checkFilled(textfield) {
  if (textfield.value.length == 0) {
    alert("The field " + textfield.name + " is required.");
    textfield.focus();
    textfield.select();
    return false;
  }
  return true;
}

4. Associate the Name Validation with an Action

<input type="text" 
       name="fullname" 
       onChange="checkFilled(this)">

5. Write a JavaScript function for Phone Number Validation

// Test for phone number in proper format. This function
// is quite strict, because it's not easy to do real regular 
// expression matching in JavaScript.

function validatePhone (textfield) {
  if (textfield.value.length == 12) {
    for (var i=0; i<12; i++) {
      var theChar = textfield.value.charAt(i); 
      if (i == 3) 
        if (theChar == " ") 
          continue; 
      if (i == 7) 
        if (theChar == "-") 
          continue; 
      if (i < 3 || i > 7 || (3 < i && i < 7)) 
        if (theChar >= "0" && theChar <= "9") 
          continue; 
      alert("Please enter a phone number in the format 666 666-6666");
      textfield.focus();
      textfield.select();
      return false; 
    } return true; 
  } else {
      alert("Please enter a phone number in the format 666 666-6666");
      textfield.focus();
      textfield.select();
      return false;    
  } 
} 

6. Associate the Phone Number Validation with an Action

<input type="text" 
       name="phone" 
       onChange="validatePhone(this)">

7. Incorporate the Validation Process into the Form Submission

 
function validateForm() {
  if (!checkFilled(document.phonebook.fullname)) return false;
  if (!validatePhone(document.phonebook.phone)) return false;
  return true;
}
 
<FORM NAME="phonebook" 
      METHOD="POST" 
      ACTION="http://burrowww.cs.indiana.edu:yourPort#/cgi-bin/lab6/process"
      onSubmit="return validateForm()">

8. Now change the process script to output this HTML page (complete with the <SCRIPT> tags) when called with GET. This would complete this exercise.