Приглашаем посетить
Литература (lit-info.ru)

20.2 A general login page for e-commerce

Table of Contents

Previous Next

20.2 A general login page for e-commerce

20.2.1 Designing the customer profile with credit card information

All businesses need good customers. Building mutual trust between you as a merchant and the customers is the number one priority for your business. This is particularly true when you want to trade online since you cannot see your customer face to face. There are no closed circuit TVs or security personnel to help you. In fact, we have reached an age where even thieves engage in online business!

More online security and secured sites with SSL will be discussed later in this chapter. At a minimum level, any e-commerce site should implement a good database system to handle information and records of customers. Records should be protected by the user's password in encrypted form. In particular, credit card information should be verified and checked against the listing of stolen cards. If possible, you should back up your business with a good insurance policy against online theft. Most important of all, Web pages regarding sensitive material such as credit card information or transactions should be protected by a secure environment, transmission, and protocol such as secured HTTP (or HTTPS). For obvious reasons we can only show you a simple example of how to design and set up a customer profile to store the information (including credit card information) you may need for your business. This example can be used as a starting point for a variety of e-commerce sites.

To design a customer profile is simple. All you need is to write down the customer's information you want to store. Too much or too little information would be inappropriate. For most online businesses, the following information may be considered as sufficient:

  • Name

  • Gender

  • Age

  • Address

  • Email address

  • Telephone number

  • User_id

  • Password

  • Credit card number

  • Card type

  • Expiry date

To set up the information above as a database table, consider the following example in MySQL:



Example: ex20-01.sql - SQL Statement To Create Customer Profile Table

 1: mysql> CREATE DATABASE buss_db;
 2: Query OK, 1 row affected (0.05 sec)
 3:
 4: mysql> USE buss_db;
 5: Database changed
 6: mysql> CREATE TABLE cust_profile
 7:     -> (
 8:     ->     name VARCHAR(50) NOT NULL,
 9:     ->     gender VARCHAR(10) NOT NULL,
10:     ->     age VARCHAR(10) NOT NULL,
11:     ->     address01 VARCHAR(60) NOT NULL,
12:     ->     address02 VARCHAR(60) DEFAULT NULL,
13:     ->     city VARCHAR(20) NOT NULL,
14:     ->     country VARCHAR(20) NOT NULL,
15:     ->     post_code VARCHAR(20) NOT NULL,
16:     ->     email_add VARCHAR(20) NOT NULL,
17:     ->     phone_number VARCHAR(20) NOT NULL,
18:     ->
19:     ->     user_id VARCHAR(20) NOT NULL,
20:     ->     password VARCHAR(60) NOT NULL,
21:     ->     card_no VARCHAR(20) NOT NULL,
22:     ->     card_type VARCHAR(20) NOT NULL,
23:     ->     expiry_date VARCHAR(20) NOT NULL,
24:     ->   PRIMARY KEY(user_id)
25:     -> );
26: Query OK, 0 rows affected (0.01 sec)

The SQL statement in line 1 is to create a database for the business called buss_db. The statement in line 4 uses the newly created buss_db as the current database. Line 6 creates a customer profile table called cust_profile with a detailed description as in the profile mentioned earlier. The response from MySQL in line 26 indicates that the table is successfully created.

Since we want to use Message Digest (MD) encryption to protect the password, the length of the password field (line 20) is longer than expected. The following example shows the internal representation of the table.



Example: ex20-02.sql - SQL Statement To Create Customer Profile Table

 1: mysql> DESCRIBE cust_profile;
 2: +--------------+-------------+------+-----+---------+-------+
 3: | Field        | Type        | Null | Key | Default | Extra |
 4: +--------------+-------------+------+-----+---------+-------+
 5: | name         | varchar(50) |      |     |         |       |
 6: | gender       | varchar(10) |      |     |         |       |
 7: | age          | varchar(10) |      |     |         |       |
 8: | address01    | varchar(60) |      |     |         |       |
 9: | address02    | varchar(60) | YES  |     |  NULL   |       |
10: | city         | varchar(20) |      |     |         |       |
11: | country      | varchar(20) |      |     |         |       |
12: | post_code    | varchar(20) |      |     |         |       |
13: | email_add    | varchar(20) |      |     |         |       |
14: | phone_number | varchar(20) |      |     |         |       |
15: | user_id      | varchar(20) |      | PRI |         |       |
16: | password     | varchar(60) |      |     |         |       |
17: | card_no      | varchar(20) |      |     |         |       |
18: | card_type    | varchar(20) |      |     |         |       |
19: | expiry_date  | varchar(20) |      |     |         |       |
20: +--------------+-------------+------+-----+---------+-------+
21: 15 rows in set (0.01 sec)

This example contains only one statement, DESCRIBE. This DESCRIBE command in line 1 displays a detailed account of all fields inside the table cust_profile. In this case, the user_id field is the primary key as illustrated in line 15.

You may now want to develop a page to allow your customer to become a member.

20.2.2 Register new member to user profile

In fact, the user information in the example above can be grouped into four sections:

  • General information

  • Login information

  • Credit card information

  • Contact information

Grouping the information is good practice to target the sensitive data so that security measures or priorities can be set. The general information contains the details of the customer including the name, gender, age, address, and email address. The login information is the user name and password that the user needs to log in to the system and perform online shopping. The credit card information is used to collect payment from the customer; it should contain the card number, card type, and expiry date. Finally, the contact information is usually the phone number of the customer which is useful for home delivery or other contact purposes.

To develop an example to register new members is quite straightforward. As you might expect, the first thing is to write an XHTML page such as ex20-03.htm to obtain all the general, login, credit card, and contact information about a user. Once the Register button is pressed, all information is sent to the associated database and table stored as a record.

A screen shot of the page is shown in Fig. 20.1.

Figure 20.1. ex20-03.htm

graphics/20fig01.jpg


From this figure, you can see that the information is grouped into four sections. At a minimum level, it should increase the clarity and readability for users. Another immediate advantage of grouping information is that once the form is submitted to a processing program, the information in a particular section can be easily checked and proper action taken accordingly. We will show you how to perform this shortly.

One of the simplest ways to implement this page is to use text boxes arranged by an XHTML table. For this example, it is natural to use one table with 10 rows and four columns. The coding is listed as follows:



Example: ex20-03.htm - Register Member Into User Profile

 1: <?xml version="1.0" encoding="iso-88591"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3:     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head><title>A Page To Register New Members  ex2003.htm</title></head>
 6: <style>
 7:  .butSt{background-color:#aaffaa;font-family:arial;font-weight:bold;
 8:      font-size:12pt;color:#880000;width:180px;height:28px}
 9:  .txtSt{font-family:arial;font-weight:bold; text-align:left;
10:      font-size:12pt;color:#ffff00}
11:  .txtSt2{font-family:arial;font-weight:bold; text-align:center;
12:      font-size:14pt;color:#00ff00}
13: </style>
14: <body style="background:#000088;text-align:center" class="txtSt">
15: <div class="txtSt" style="font-size:16pt;text-align:center">
16:   Welcome To My Online Shop <br />
17:   Please Fill In The Form To Register</div><br /><br />
18:
19: <form method="post" action="ex20-03.php">
20: <table border="0" width="90%" class="txtSt">
21:  <tr><td colspan="2" class="txtSt2">General Information</td>
22:      <td colspan="2" class="txtSt2">Login Information</td></tr>
23:  <tr><td >Name</td><td>
24:     <input type="text" name="name" class="butSt">&nbsp;&nbsp;&nbsp;</td>
25:    <td >User Id</td>
26:    <td ><input type="text" name="user_id" class="butSt"></td></tr>
27:  <tr><td >Gender</td>
28:    <td><input type="text" name="gender" class="butSt"></td>
29:    <td >Password</td>
30:    <td ><input type="password" name="pass_id" class="butSt"></td></tr>
31:  <tr><td >Age</td>
32:    <td><input type="text" name="age" class="butSt"></td>
33:    <td >Confirm Password</td>
34:    <td ><input type="password" name="con_pass_id" class="butSt"></td></tr>
35:  <tr><td >Address</td>
36:    <td><input type="text" name="add01" class="butSt"></td>
37:    <td colspan="2" class="txtSt2">Credit Card Information</td></tr>
38:  <tr><td >Address</td>
39:    <td><input type="text" name="add02" class="butSt"></td>
40:    <td >Credit Card Type</td>
41:    <td ><input type="text" name="card_type" class="butSt"></td></tr>
42:  <tr><td >City</td>
43:    <td><input type="text" name="city" class="butSt"></td>
44:    <td >Card Number</td>
45:    <td ><input type="text" name="card_no" class="butSt"></td></tr>
46:  <tr><td >Country</td>
47:    <td><input type="text" name="country" class="butSt"></td>
48:    <td >Expiry Date</td>
49:    <td ><input type="text" name="expiry_date" class="butSt"></td></tr>
50:  <tr><td >Postal Code</td>
51:    <td><input type="text" name="post_code" class="butSt"></td>
52:    <td colspan="2" class="txtSt2">Contact Information</td></tr>
53:  <tr><td >Email Address</td>
54:    <td><input type="text" name="email" class="butSt"></td>
55:    <td >Phone Number</td>
56:    <td ><input type="text" name="phone_no" class="butSt"></td></tr>
57:  </table><br /><br />
58:   <input type="submit" value="Register" class="butSt">
59:   <input type="reset" value="Clear" class="butSt">
60: </form>
61: </body>
62: </html>

Since this page was implemented as a table with four columns, there may be some confusion on the text box layout. However, if you read the page with the picture of Fig. 20.1 in mind, you should have no difficulty reading the code. It is common practice to draw the picture first before any implementation coding is done.

Alternatively, you can use multiple tables. For example, you can use two or three tables where each of them contains one section of information. With CSS position capability, you can place all tables together to build the page. This way, you can improve both the program readability and clarity of layout. You can add some more features to enhance the user input. One common practice in the industry is to use select boxes on some commonly known fields. For example, you can use a select box to replace the gender field. The select box contains the male, female options for the user to pick so that no typing is needed. Another improvement may be to change the age field to an age group with a select box. As your experience grows, new ideas will come more easily.

When the Register button is pressed, the PHP program ex20-03.php is activated (see line 19). This program is the processing engine for the example and will perform the following tasks:

  • Check if all fields in the general information area have been filled.

  • Check if all fields in the login information area have been filled.

  • Check if all fields in the credit card information area have been filled.

  • Check if all fields in the contact information area have been filled.

  • Check if the password matches the confirm password.

If any one of these checks fails, a message window is displayed to ask the user to complete the specific part of the form. When all the checks return a true value, the program will perform the following:

  • Connect to the desired database.

  • Store the information as a new record in the customer profile table cust_profile.

If an error occurs at this stage, it is likely that the user's identity field user_id has already been used by someone already on the database. Recall that user_id is the primary key of the database and should be uniquely defined. If the database is updated successfully, you have registered a new member into your online shop. As soon as the member starts his or her online shopping, you can generate revenue for your business. The PHP program is listed below:



Example: ex20-03.php - The PHP Script For ex20-03.htm

 1: <?PHP echo"<?";?>xml version="1.0" encoding="iso-88591"<?PHP echo"?>";?>
 2:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3:  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4:  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5:  <head><title>Example: ex1403.pl</title></head>
 6:  <body style="background:#000088;text-align:center;
 7:   font-family:arial;font-size:16pt;color:#ffff00">
 8: <?php
 9: if ( (trim($name)=="")    || (trim($gender)=="") || (trim($email)=="") ||
10:      (trim($age)=="")     || (trim($add01)=="") ||
11:      (trim($add02)=="")   || (trim($city)=="") ||
12:      (trim($country)=="") || (trim($post_code)==""))
13: {
14:    echo "Error.. General Information is not completed!";
15:    exit();
16: }
17: else if ( (trim($user_id)=="") || (trim($pass_id)=="") ||
18:           (trim($con_pass_id)=="") )
19: {
20:    echo "Error.. Login Information is not completed!";
21:    exit();
22: }
23: else if ( (trim($card_type)=="") || (trim($card_no)=="") ||
24:           (trim($expiry_date)=="") )
25: {
26:    echo "Error.. Credit Card Information is not completed!";
27:    exit();
28: }
29: else if (trim($phone_no)=="")
30: {
31:    echo "Error.. Contact Information is not completed!";
32:    exit();
33: }
34: else if ($pass_id != $con_pass_id) {
35:    echo "Error.. Two Passwords are not matched!";
36:    exit();
37: }
38: else
39: {
40:   $pass_id = md5($pass_id);
41:   $db = mysql_connect("www.pwt-ex.com", "johnsmith","johnsmith");
42:   mysql_select_db("buss_db",$db);
43:
44:   $sql = "INSERT INTO cust_profile
45:          (name,gender,age,address01,address02,city,country,
46:          post_code,email_add,phone_number,
47:          user_id,password,card_no,card_type,expiry_date)
48:        VALUES
49:          ('$name','$gender','$age','$add01','$add02','$city','$country',
50:           '$post_code','$email','$phone_no',
51:           '$user_id','$pass_id','$card_no','$card_type','$expiry_date')";
52:
53:    $result = mysql_query($sql);
54:
55:    if (!$result)
56:    {
57:       echo "Registration Failed..Someone has used the userID";
58:       exit() ;
59:    }
60:    echo "Registration Successful! <br /> Enjoy Your Shopping";
61:    exit();
62: }
63: ?>
64: </body>
65: </html>

This is a PHP page embedded into XHTML. The first part of this program is a series of conditional statements to perform checking on user input. The first if statement (lines 916) is used to test whether the user has filled in all the fields on the general information area. If any one variable in the general information area is empty, a message is output (see line 14) and the program terminated. Another three if statements covering lines 1733 are used to test the login, credit card, and contact areas. In normal circumstances, you may also need to test whether the password $pass_id is the same as the confirm password (lines 3437). This is a good practice to prevent password errors such as typing an unintended string.

The second part of the page is for database manipulation. Line 40 is to encrypt the password with an MD string. The next line is to make the connection to the database and the following line is to select buss_db (business database) as the current database. The variable $sql in lines 4451 stores an SQL statement to insert all user input into table cust_profile (customer profile) as a new record. This SQL statement will be executed at line 53. If the returned result is not a true value, you have an error on creating the record. One of the common reasons for this is that the user name user_id has already been used by someone else. In this case, a message is printed at line 57 and the program terminated. If the execution of the mysql_query() function is successful, you have registered a new member into your database. A simple message is then output as illustrated at line 60. A screen shot is shown in Fig. 20.2.

Figure 20.2. Register new member

graphics/20fig02.jpg


Note that this program demonstrates a simple, yet general PHP page for e-commerce to register members into the user profile. We concentrate only on the concept and structure of the page. For some real applications, you may need to add protection code if the database connection should fail. Also, you may want to tell your customers that the security of the shopping site is good and protected by the SSL or Secure Electronic Transfer (SET) from a trusted organization such as a bank. A practical demonstration of how to set up a secure site with Apache and OpenSSL is provided later in section 20.5. This secure site can be used to provide security so that you and your customers know that virtually no one can decode the transmitted information between your site and customers.

Line 61 should be replaced by a jump to the URL address of your main page. In many cases, the main page is your e-commerce site such as online services or shopping-cart implementation. In addition to this new member page, you should also develop a general page to allow members to log in and start shopping.

To make sure the information is inserted into the customer profile, you can issue the following simple SQL command



SELECT * FROM cust_profile;

on the mysql prompt. The result is shown in the following example.



Example: ex20-04.sql -Verify New Member In Database

 1: mysql> SELECT * FROM cust_profile;
 2: +------------+--------+-----+------------------+------------+--------+
 3: | name       | gender | age | address01        | address02  | city   |
 4: +------------+--------+-----+------------------+------------+--------+
 5: | John Brown | M        43  | 18 Garden Square | Hillingdon | London |
 6: +------------+--------+-----+------------------+------------+--------+
 7:
 8: +---------+-----------+------------------+--------------+---------+
 9: | country | post_code | email_add        | phone_number | user_id |
10: +---------+-----------+------------------+--------------+---------+
11: | UK      | UB10 MMX  | brown@pwt-ex.com | 87654321     | john    |
12: +---------+-----------+------------------+--------------+---------+
13:
14: +----------------------------------+----------+-----------+-------------+
15: | password                         | card_no  | card_type | expiry_date |
16: +----------------------------------+----------+-----------+-------------+
17: | 527bd5b5d689e2c32ae974c6229ff785 | 12345678 | VISA      | 22/12/2007  |
18: +----------------------------------+----------+-----------+-------------+
19:
20: 1 row in set (0.00 sec)

After the SQL statement in line 1, you should see a long table on your MySQL screen. We split the table into three rows in ex20-04.sql for display purposes. As you can see from this example, the user information is stored in the fields in table cust_profile. The user password is encrypted by an MD string.

20.2.3 A login page for e-commerce

Once you have the customer database ready, to construct a general login page for your e-commerce site is a straightforward process. All you have to do is to develop a page to get the user name and password of your members. They are then compared to the data stored in the user profile database. If there is a match, the user is allowed to begin his or her online shopping. In many cases, you may also want to add a button to incorporate example ex20-03.htm to allow a new user to join as a member.

We use the PHP language to implement this example and the first part of the page is listed below:



Example: ex20-05.php - A Login Page For E-Commerce (Part One)

 1: <?PHP echo"<?";?>xml version="1.0" encoding="iso-88591"<?PHP echo"?>";?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3:     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head><title> A Login Page For E-Commerce  ex2005.php</title></head>
 6: <style>
 7:   .butSt{background-color:#aaffaa;font-family:arial;font-weight:bold;
 8:      font-size:18pt;color:#880000;width:250px;height:35px}
 9:   .butSt2{background-color:#aaaaaa;font-family:arial;font-weight:bold;
10:      font-size:18pt;color:#880000;width:180px;height:35px}
11:   .txtSt{font-family:arial;font-weight:bold; text-align:left;
12:      font-size:18pt;color:#ffff00}</style>
13: <body style="background:#000088;text-align:center" class="txtSt">
14:
15: <?php
16: global $llst, $userId, $passId;
17:
18: $llst = 'Welcome To ABC Online Shopping<br /> ' .
19:  ' This Is A Member Only Site<br /><br /> ' .
20:  ' Enter User Name and Password To Log In<br />' .
21:  ' <form action="ex2005.php" method="post">'.
22:  ' <table class="txtSt">' .
23:  ' <tr><td>Username:</td><td>' .
24:  ' <input type="text" name="userId" id="userId" class="butSt" />' .
25:  ' </td></tr>' .
26:  ' <tr><td>Password:</td><td>' .
27:  ' <input type="password" name="passId" id="passId" class="butSt" />' .
28:  ' </td></tr> ' .
29:  ' <tr><td colspan="2" style="text-align:center"><br />' .
30:  ' <input type="submit" value="Login" class="butSt2" />' .
31:  ' <input type="button" value="Join Member" class="butSt2" '.
32:  ' onclick="location.href=\'ex2003.htm\'" /> </td></tr>' .
33:  ' </table>' .
34:  ' </form> ';
35:

This part of the page is simple. We use a PHP string $llst to store an XHTML message so that it can be displayed anywhere at any time. The message string contains two text fields (lines 2324 and 2627) to allow the user to enter his or her user name and password. The string also has two buttons defined in lines 3032. If the Login button is clicked, the page is submitted to itself for further processing. If the Join Member button is clicked, the command in line 32



onclick="location.href=\'ex2003.htm\'"

will activate the page ex20-03.htm so that the user can sign in as a new member. The second part of the page is to process the input data and compare it to the values in the database.



Listing: Continuation Of The PHP Script ex2005.php (Part Two)

36: if ($passId && $userId)
37: {
38:  $passId = md5($passId);
39:
40:  $db = mysql_connect("www.pwt-ex.com", "johnsmith","johnsmith");
41:  mysql_select_db("buss_db",$db);
42:
43:  $query = "SELECT * FROM cust_profile WHERE user_id='$userId'";
44:  $result = mysql_query ($query) or die ("SQL Query Error..");
45:
46:  $row = mysql_fetch_array ($result);
47:
48:  if (($passId == $row['password']) && ($userId == $row['user_id']))
49:  {
50:    echo"Thankyou $userId! <br /> Enjoy Your Shopping!<br /><br />";
51:  }
52:  else
53:  {
54:    echo "$llst";
55:    if ($userId == $row['user_id'])
56:    {
57:      echo "<br />Sorry! Wrong Password.. Please Try Again..<br />";
58:      $passId = false;
59:    }
60:  }
61:  mysql_free_result ($result);
62: }
63: else
64: {
65:    echo "$llst";
66: }
67: ?>
68: <br /><img src="line1.gif" width="500" height="6" alt="pic" />
69: <br /><br />
70: </body>
71: </html>

The main purpose of this page is to obtain the user name and password from the user and compare them against the values in the database. Lines 4041 are used to make the connection to the database so that the SQL statement can be performed. The SQL statement that we want to execute is



"SELECT * FROM cust_profile WHERE user_id='$userId'";

This statement will get all the information in the database that matches the user name. If the execution of this SQL is successful, the user's information is stored in variable $row as illustrated in line 46. Now you can compare the user name and password. If both match the values in the database (line 48), a simple welcome message is displayed. If the input password is not the same as the value in the database, you have a wrong password case. In this situation, the XHTML string $llst together with a wrong password message is displayed (see lines 5459). Note that the password comparison is performed using MD strings. Some screen shots are shown in Figs 20.3 and 20.4.

Figure 20.3. ex20-05.php

graphics/20fig03.jpg


Figure 20.4. Wrong password case

graphics/20fig04.jpg


In fact, a large number of online entertainment sites and/or service providers have a page similar to this so that user's information can be stored and more importantly regular (or monthly) charges can be made. If you have an e-commerce main page, you can activate it in line 50 so that your customer can start his or her online services and/or shopping trip. As a practical example, let's consider how to use this page to implement a shopping cart for an online bargain hunting shop below.

    Table of Contents

    Previous Next