|
Using Cookies for the Login Page |
|
| Web Toolkit Tutorial Home | Table of Contents | The Login Page Concept | Using Query Strings |
|
The lessons on theory are now over. It's time to put theory into action and create our
login process. First up, cookies.
|
||||||||
|
This lesson will demonstrate how pull data from an HTML form and compare it to data residing
in a file. If the login is unsuccessful, we will give the employee the opportunity to
login again. If the login is successful, we will redirect the employee to a welcome page
and remember who they are when they get there using cookies.
|
||||||||
|
1.
If VisualWorks is not already running, please start running it now, load the Web Toolkit
parcel and start a Wave HTTP server. You should also file in the code from
Toyz Inc 1 and make sure the initialize method of the
Filestuff class sets the correct location of the directory variable
(i.e. the directory that contains the 3 data files).
2. Start with the file template.htm. You can find a copy of it here. Place this in the teach directory. Also copy the file toyzinc.css into the teach directory. 3. Modify the template.htm file so that it contains a form allowing the user to enter their employee number, first name and last name. Then save the file as login1.htm in the teach directory. A sample file would look like the following: 
Figure 1. The TEACH login screen The HTML for login1.htm is as follows (the more interesting sections of the file have been highlighted):
<html>
4.
When the user clicks the submit button, the data from the form will be sent to
validate1.ssp since that is the file specified in the action attribute of the
form tag.
<head> <title>Toyz Inc. Login Page</title> <link rel="stylesheet" type="text/css" href="toyzinc.css"> </head> <body bgcolor=white> <center> <hr width="75%" size=4> <table border=0 cellpadding=2 cellspacing=2 width=75% bgcolor=#FFFFFF> <tr> <td width="40%" align=right> <img src=images/toyzinc.gif> </td> <td width="50%" align=left> <h3> Toyz Inc. <br> Employee <br> Accreditation & <br> Course <br> History </h3> </td> </tr> </table> <hr width="75%" size=4> <form action="validate1.ssp" method="post" name="form1"> <table width=50% cellpadding=5> <tr> <td bgcolor=mediumblue colspan=2> <font color=#ffffff> <b>Please Login</b></font> </td> </tr> <tr> <td width=30% align=right> First Name: </td> <td width=70% align=left> <input type="text" name="firstName" value="" size=25 maxlength=30> </td> </tr> <tr> <td width=30% align=right> Last Name: </td> <td width=70% align=left> <input type="text" name="lastName" value="" size=25 maxlength=30> </td> </tr> <tr> <td width=30% align=right> Employee Number: </td> <td width=70% align=left> <input type="password" name="passWord" value="" size=25 maxlength=30> </td> </tr> <tr> <td colspan=2 align=center> <input type="submit" name="action" value=" Proceed "> </td> </tr> <tr> <td colspan=2> For security reasons, you must supply the above information correctly in order to gain access to the TEACH system. </td> </tr> </table> </form> </center> </body> </html> 5. The file validate1.ssp needs to extract the data from the form and compare what the employee entered against the employee file. If there is a 3-way match (first name, last name and employee number), a cookie will be created and control is sent to home1.ssp. If there isn't a 3-way match, then control is sent back to login1.htm. Below is the code that will do this.
<%
firstName := request anyFormValueAt: 'firstName'. lastName := request anyFormValueAt: 'lastName'. passWord := request anyFormValueAt: 'passWord'. goodLogin := 'NO'. employees := (Toyz new) getEmployees. employees do: [ :each | (passWord = each number) ifTrue: [ (lastName = each lastName) ifTrue: [ (firstName = each firstName) ifTrue: [ goodLogin := 'YES'. employeeCookie := HTTPCookie named: 'employee' value: (each firstName, ' ', each lastName). employeeCookie expireAfterDays: 90. response addCookie: employeeCookie. ]. ]. ]. ]. (goodLogin = 'YES') ifTrue: [ response redirectTo: 'home1.ssp'.] ifFalse: [ response redirectTo: 'login1.htm'.]. %> |
||||||||
|
Indeed, there is a lot going on here. Let's look at all this code line by line
(or chunk by chunk) and make sure you understand what each line (or chunk) does.
<% (first line of the file)
%> (last line of the file) This may seem trivial and obvious, but it's important. This SSP file contains all code. The one set of percent tags means that this file is all code, all Smalltalk code. It contains absolutely no HTML.
firstName := request anyFormValueAt: 'firstName'.
lastName := request anyFormValueAt: 'lastName'. passWord := request anyFormValueAt: 'passWord'. These lines extract the data from the 3 input fields on our form. Nothing really new here except for the fact that temporary variables in SSP need not be "declared", a small deviation from the Smalltalk norm.
goodLogin := 'NO'.
employees := (Toyz new) getEmployees. employees do: [ :each | (passWord = each number) ifTrue: [ (lastName = each lastName) ifTrue: [ (firstName = each firstName) ifTrue: [ goodLogin := 'YES'. With their matching block brackets (not shown), this block of code will match the values from the form with those found on the employee file. The variable employees will contain a collection of all employees as a result of the getEmployees method of the Toyz class. We then iterate through the collection looking for a match. The temporary variable goodLogin is first initialized to the value NO (we will first assume there will be no match) and will only be set to YES if all 3 values from the form match their counterparts from the file.
employeeCookie := HTTPCookie named: 'employee'
value: (each firstName, ' ', each lastName). employeeCookie expireAfterDays: 90. response addCookie: employeeCookie. These lines are our "cookie code". We will create a cookie named employee. The cookie will simply contain an employee's first name and last name. Using an instance of the HTTPCookie class, we will store that instance in a temporary variable called employeeCookie. Next we will set the expiration of the cookie to 90 days. This is an optional step but it is a good example of how to determine the life expectancy of a cookie. If this statement is omitted, the cookie will last forever (i.e. never expire). We then add the cookie to the response object using the addCookie: method which actually creates the cookie (writes the cookie file to the users machine).
(goodLogin = 'YES')
ifTrue: [ response redirectTo: 'home1.ssp'.] ifFalse: [ response redirectTo: 'login1.htm'.]. We test the value of the temporary variable goodLogin. The logic here is very simple. If the value is YES, then we found a match against the employee file and will redirect them to home1.ssp. If the value is NO, then we did not find a match against the employee file and will redirect them back to login1.htm. |
||||||||
|
|
6.
The final step in our login process is to create the file home1.ssp. The file
will be relatively simple - read the cookie and welcome the employee to the TEACH
home page. Again, start with the file template.htm, modify it so that it reads
the cookie and output the contents of the cookie in the main area of the file. Then
save the file as home1.ssp in the teach directory. A sample file would
look like the following (the more interesting sections of the file have been highlighted):
<html>
This file is straight HTML except for 2 lines of code. The first line extracts the value of
the cookie name employee and places it into the temporary variable of
employeeCookie. The next line simply places the contents of employeeCookie
within a set of headline tags.
<head> <title>Toyz Inc. Home Page</title> <link rel="stylesheet" type="text/css" href="toyzinc.css"> </head> <body bgcolor=white> <center> <hr width="75%" size=4> <table border=0 cellpadding=2 cellspacing=2 width=75% bgcolor=#FFFFFF> <tr> <td width="40%" align=right> <img src=images/toyzinc.gif> </td> <td width="50%" align=left> <h3> Toyz Inc. <br> Employee <br> Accreditation & <br> Course <br> History </h3> </td> </tr> </table> <hr width="75%" size=4> <% employeeCookie := request cookieValueAt: 'employee'. response write: ('<h3>Hello ',employeeCookie,'</h3>'). %> <h4>Welcome to the TEACH home page</h4> </center> </body> </html> 
Figure 2. A successful login to the TEACH system 11. You should now have 3 files in the teach directory.
|
||||||||
|
|
Congratulations! Phase 1 of the login process is complete
You now shoul dbe able to:
|
| Web Toolkit Tutorial Home | Table of Contents | The Login Page Concept | Using Query Strings |