Session 7: Combining GetCust with the Login Page

You may have found last weeks practical slightly frustrating. After the success of getting your cart to work, you were perhaps hoping for more of the same. However, there was just too much to get completed in a single session.

You need to make sure that the fields you used last week for the customer textboxes match up with the cart fields. If they do, there is just one more thing needed to get the new customer/returning customer system working as it should. The login page!

Exercise 8(a): Customer Login

This is the page a returning customer is diverted to from getcust.aspx. The basic HTML set-up should look something like this:

As with the “new customer” fields, the text in red will normally be just a single word: “required”. Additional text will only appear when the login fails, as a result of the system calling some embedded programming code when the email address is not found in the relevant database table. You will not have to write this code for yourself… Lets get started
1.Using the login.aspx page you created last week, create the design described above… Use the textbox & validation controls as with the getcust.aspx page. Note that there is an email address field AND a Username field. Some systems use email address as the username. Can you see any potential problems with this?

  1. Insert a Cart control as before, again giving it an ID of "Cart1".
  1. Now a new WebXelCart control called Login is required. Define its properties as shown below and over the page (remember to add quotes each time…):

runat = server
ID = Login1
ConnectionString = constr (or whatever)
DBtable = (e.g.) Customers.
DataBaseType = OleDb.
Cart = Select "Cart1" from the dropdown box.
UserNameDBField = "EmailAddress"
PasswordDBField = "LoginPass"
CustomerIdDBField = "CustomerID"
UserNameFormField = "frmUserName"
PasswordFormField = "frmPass"
LoginSuccessURL = getcust.aspx
Onloginfailed = Login1_LoginFailed

Don’t forget to close the control with the </WebXelCart:Login> tag. Check that the fieldnames chosen mesh with those in getcust.aspx, otherwise the parameter passing won’t work.

  1. When the customer fills in their email address and password then submits the form, the control associated with login will check the database for a record that has the value typed into the frmUserName field as its EmailAddress and the value typed into the frmPass field as its LoginPass.

If a record is found the user is logged in and the user’s data is stored in the Cart selected in the Cart dropdown box and then is redirected to the "getcustinfo.aspx" page where the data is shown in the form.
If no matching record is found the "LoginFailed" event is raised. This will execute the event procedure, which will of course need to be coded.

  1. Go to the webxelcart:login control in design mode and click the "Wire Event..." button on the property inspector. When the event selection dialog appears select "LoginFailed" from the dropdown box and click "OK", the following code may (doesn’t necessarily work…) be inserted:

<script runat="server">

void Login1_LoginFailed(object sender, System.EventArgs e)

{

//code here

}

</script>

6.Never mind if no code is generated inside the brackets. You’ll now need to modify this event procedure anyway. Add code to make it look like…

<script runat="server">
void Login1_LoginFailed(object sender, System.EventArgs e)

{

this.lblLoginStatus.Text = "Login failed, Please check your details";

this.lblLoginStatus.ForeColor = System.Drawing.Color.Red;

}

</script>

This code will run when a customer login fails.

The first line sets the text of the lblLoginStatus to "Login failed, please check your details"

The second line will make the label’s ForeColor red drawing the customer’s attention to it quickly.

Don’t spend too much time on the login page. As with last week’s getcust page, If it doesn’t work, you can download a copy from my website and tweak the variable names etc. as appropriate. The main purpose of engaging you in this exercise is to introduce the WebXelCart:Login control, and understand how a simple login system can work by comparing values with those in a database.

Once you’ve completed the login page, the customer pages should be complete. Errors are easy to make though, particular in use of filenames that don’t mesh with other parts of the system.

It is often tricky to identify such errors, so the best thing to do is test it… but be warned… because of the potential for making naming errors, this rarely works first time…

Exercise 7(b): Testing the Shopping System so far

  1. Produce a dummy summary.aspx page containing just a little text, which will be needed for creating an online invoice once the login/registration system is working…
  2. Use getcust.aspx to add a new customer. The WritetoDB control should do the work… Hopefully you can remember the password, but it should be saved into the database anyway. Check that the customer record has indeed been written
  3. Now use customer login on the getcust.aspx page to get a record for an existing customer up on the screen. Try updating part of the record. Did the update work? Check the database to make sure…
  4. Now, it is possible that, once the customer sees the full cost of their transactions they may wish to change. Add a hyperlink that will allow the shopping cart to be displayed again. Test this out.
  5. Once you have the shopping cart displayed again, you need to make sure that navigation is fully working for all of the buttons. Tweak as necessary until the shopping cart is working efficiently.
  6. Now, navigate back to the products page, and test the system through to appearance of summary.aspx.

All OK? If not… fix it! (Be patient…)

Otherwise, well done!

If you have time, perhaps you can do a little work on formatting across all pages

Next stage… online invoice. Next week.

1

RCH14