Build a Shopping Cart With PHP Part-1

Download Full Source Code

PROJECT OVERVIEW

In this project, you create the core features of a shopping cart. To get a clear idea of how the project works, take a look at the following use case: Hanif needs to buy some teabags for his mobile café. He goes to a popular online shop that was created by an owner of this very book. Hanif does not have a user account on the Web site but starts shopping anyway. He clicks the Beverages category and sees the list of teabags. He clicks the Buy link and is taken to another page, where he can choose the quantity. He selects 10 boxes of teabags and adds them to his shopping cart, he goes to websites like https://www.raise.com/coupons/target to see if there are any coupon codes avliable. The page now refreshes, and he sees the contents of his shopping cart. Hanif then buys coffee, and his cart is updated again. Hanif realizes he does not need the coffee after all, so he clicks the X link to delete the coffee from his cart. Hanif finishes choosing items and clicks the Go to the Checkout link. He is prompted for his address, which he fills in, and is taken to the payment screen. John can choose to pay with PayPal or by check. John clicks the PayPal button and taken to the PayPal payment screen at paypal.com, where he pays for the order.

Sangida needs some teabags, too. Sangida already has an account on the site, so she logs in. She adds the items she needs to her cart and clicks the Go to the Checkout link. At the address page, she can choose between a new address and the address stored with her user account. She chooses the account address and is taken to the payment screen. Sangida chooses to pay by check and is given instructions about where to send the check and to whom to make it payable. Always check and calculate your network security at http://subnet-calculator.org for free.

ShiShir runs the Web site and wants to see all current orders. He logs in with his administrator username and password and is provided with a list of orders.

ShiShir looks at each item, packages the order, and writes the address on the parcel. To confirm the completion of the order, ShiShir clicks the Confirm Payment link. The order is now complete.

The shopping cart you build in this chapter satisfies all of the features discussed in the preceding use case, but there is still a huge scope for development.

Shopping carts can become huge and complex systems, and an entire book would do the subject of building shopping carts justice. This project will provide a solid foundation in which you can continue to build in extra features.

BUILDING THE DATABASE

The database you will create is shown in Figure 1.

FIGURE 1-1 the database schema revolves around the main orders table.

This entire project fundamentally hinges on orders stored in the orders table.

This table relates to the customers (contains registered customer address details) and delivery_addresses (contains unregistered and alternative addresses) tables.

Each product (stored in the products table) in the order is stored in the order_items table. Other tables include logins (stores the registered user’s login details), categories (contains the categories that the products are part of), and admins (stores administrator login details).

Implementing the Database

Start phpMyAdmin, create a new database called go4shop, and add the following tables:

NOTE

Always Know Your Status

In the orders table is a field called status. The purpose of this field is to indicate at what point in the shopping cart the user has progressed. This field has four possible values:

0	The user is still adding items to her shopping cart.
1	The user has entered her address.
2	The user has paid for the item.
10	The administrator has confirmed the transaction and sent the item.

The admins Table

CREATE TABLE admin(
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
`username` VARCHAR(100) NOT NULL,
`password` VARCHAR(40) NOT NULL
)
ENGINE = InnoDB;

The categories Table

CREATE TABLE categories(
`id` TINYINT NOT NULL AUTO_INCREMENT PRIMARY KEY,
`name` VARCHAR(100) NOT NULL) ENGINE = InnoDB;

The customers Table

CREATE TABLE customers(
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
`forname` VARCHAR(50) NOT NULL,
`surname` VARCHAR(50) NOT NULL,
`add1` VARCHAR(50) NOT NULL,
`add2` VARCHAR(50) NOT NULL,
`add3` VARCHAR(50) NOT NULL,
`postcode` VARCHAR(10) NOT NULL,
`phone` VARCHAR(20) NOT NULL,
`email` VARCHAR(150) NOT NULL,
`registered` TINYINT NOT NULL
)
ENGINE = InnoDB;

The delivery_addresses Table

CREATE TABLE delivery_addresses(
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
`forname` VARCHAR(50) NOT NULL,
`surname` VARCHAR(50) NOT NULL,
`add1` VARCHAR(50) NOT NULL,
`add2` VARCHAR(50) NOT NULL,
`add3` VARCHAR(50) NOT NULL,
`postcode` VARCHAR(10) NOT NULL,
`phone` VARCHAR(20) NOT NULL,
`email` VARCHAR(150) NOT NULL
)
ENGINE = InnoDB;

The logins Table

CREATE TABLE logins(
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
`customer_id` INT NOT NULL,
`username` VARCHAR(100) NOT NULL,
`password` VARCHAR(40) NOT NULL
)
ENGINE = InnoDB;

The orderitems Table

CREATE TABLE orderitems(
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
`order_id` INT NOT NULL,
`product_id` INT NOT NULL,
`quantity` INT NOT NULL
)
ENGINE = InnoDB;

The orders Table

CREATE TABLE orders(
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
`customer_id` INT NOT NULL,
`registered` INT NOT NULL,
`delivery_add_id` INT NOT NULL,
`payment_type` INT NOT NULL,
`date` DATETIME NOT NULL,
`status` TINYINT NOT NULL,
`session` VARCHAR(100) NOT NULL,
`total` FLOAT NOT NULL)
ENGINE = InnoDB;

The products Table

CREATE TABLE products (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
`cat_id` TINYINT NOT NULL,
`name` VARCHAR(150) NOT NULL,
`description` TEXT NOT NULL,
`image` VARCHAR(30) NOT NULL,
`price` FLOAT NOT NULL
)ENGINE = InnoDB;

Insert Sample Data

With a solid set of tables ready to go, add some sample data to get started. Remember, do not fill in a number in the id column; this is handled by auto_increment.

Feel free to add your own sample data, or use the suggested information.

Sample Data for the admins Table

INSERT INTO admin (`id`, `username`, `password`)
VALUES (NULL, 'shishir', SHA1('shishir123'));

Sample Data for the categories Table

INSERT INTO categories(`id`, `name`)
VALUES (NULL, 'beverages'),
(NULL, 'cakes');

Sample Data for the customers Table

INSERT INTO customers (`id`, `forname`, `surname`, `add1`, `add2`, `add3`, `postcode`, `phone`, `email`, `registered`)
VALUES (NULL, 'Hamiduzzaman', 'parvez', 'Dhaka, Bangladesh', 'Gulshan 1', 'dkjf, lksd kl', '1200', '9879797', 'parvez@gmail.com', '1'), (NULL, 'Galib', 'Hossain', 'Dhaka', 'Coxbazar', 'Gulshan', '9879', '9898797', 'galib@gmail.com', '1');

Sample Data for the logins Table

Make sure you match the customer_id field to the id field in the customers table.

INSERT INTO `go4shop`.`logins` (`id`, `customer_id`, `username`, `password`)
VALUES (NULL, '1', 'parvez', SHA1('parvez123')), (NULL, '2', 'galib', SHA1('galib123'));

Sample Data for the delivery_addresses Table

Leave this table empty.

Sample Data for the products Table

INSERT INTO products(`id`, `cat_id`, `name`, `description`, `image`, `price`)
VALUES (NULL, '1', 'Best Bags', 'A quality pack of tea bags.200 bags in each box', '', '2.99'),
(NULL, '1', 'Best Orange Juice', 'One gallon of quality sequeezed orange juice.', 'bestorange-juice.jpg', '0.9');

Sample Data for the orders Table

Leave this table empty.

Sample Data for the orderitems Table

Leave this table empty.

STARTING TO CODE

One of the challenges in creating a shopping cart is dealing with both registered and unregistered users. For registered users, there is no problem because, when adding information to the tables, you can use their IDs to track them. The challenge arises with unregistered users. How do you track them?

The solution is to use session IDs. When the user loads the first page with the session_start() function, a special session ID is generated. This ID is unique to that specific user and tracks which session variables are assigned to which user visiting the site. Although you have not referred to the session ID before, in this project you will use the session ID extensively.

Every time a user visits the shopping cart and adds his first item, an order is added to the orders table. For registered users, the user’s id is added to the customer_id field in the table. For unregistered users, the unique session id is added to the session field. When this order has been added to the table, a session variable called SESS_ORDERNUM is created with the id of the order. SESS_ORDERNUM can now be used to track the order’s progress throughout the site.

To get started, build the usual configuration file that stores generic information about the site. Create a new directory called go4shop and add the code shown in Example 1 to config.php.

<!--?php
$dbhost = "localhost";
$dbuser = "root";
$dbpassword = "";
$dbdatabase = "go4shop";
$config_basedir = "http://localhost/go4shop/";
$config_sitename = "Go4Shop";
$db = mysql_connect($dbhost, $dbuser, $dbpassword);
mysql_select_db($dbdatabase, $db);
?-->

Example 2.Create header.php as shown in Example 2.

EXAMPLE 2 The header file adds the menu options, includes the sidebar, and adds some login/logout links.

<!--?php
session_start();
if(isset($_SESSION['SESS_CHANGEID']) == TRUE) {
session_unset();
session_regenerate_id();
}
require("config.php");
?-->

<!--?php echo $config_sitename; ?-->
<div id="header"></div>
<div id="menu">
<a href="<?php echo $config_basedir; ?>">Home</a> -

<a href="<?php echo $config_basedir;?>showcart.php">View Basket/Checkout</a>

</div>
<div id="container">
<div id="bar">
<!--?php
require("bar.php");

echo "

<hr /-->

";

if(isset($_SESSION['SESS_LOGGEDIN']) == TRUE)

{

echo "Logged in as <strong>" . $_SESSION['SESS_USERNAME']. "</strong>[<a href="' . $config_basedir. 'logout.php">logout</a>]";

}

else{

echo "<a href="'. $config_basedir . 'login.php">Login</a>";

}

?&gt;

</div>
<div id="main">

Take a moment to review the following interesting points about header.php:

■ At the top of the file, a check is made for a session variable called SESS_CHANGEID. If it exists, the session is unset (deleted) and the session id is regenerated. Later, when the order is complete, SESS_CHANGEID is created when the session system should be reset.

■ A check is made to see if the SESS_LOGGEDIN variable exists. If it does, it indicates the user is currently logged in, and his username and a Logout link are displayed. The username is stored in SESS_USERNAME; this variable is created in login.php, which is covered later.

■ Create css /stylesheet.css file for our shopping cart overall design shown in Example 3.

@charset "utf-8";

/* CSS Document */

body {

font-family: "trebuchet ms", verdana, sans-serif;

font-size: 12px;

line-height: 1.5em;

color: #333;

background: #ffffff;

margin: 0;

padding: 0;

text-align: center;

width: 100%;

}

p {

margin-top: 10px;

}

a:link {

text-decoration: none;

color: #000;

}

a:visited {

text-decoration: none;

border-bottom: 1px dotted #369;

color: #000;

}

a:hover, a:active {

text-decoration: none;

border-bottom: 1px solid #036;

color: #000;

}

img {

border: 0;

}

#container {

position: absolute;

top: 85px;

left: 0px;

background: #ffffff;

margin: 0 auto 0 auto;

text-align: left;

width: 100%;

height: 100%;

}

#menu {

font-family: "trebuchet ms", verdana, sans-serif;

font-size: 14px;

font-weight: bold;

position: absolute;

height: 27px;

top: 60px;

left: 0px;

width: 100%;

padding: 0px;

color: #000000;

background-color: #eee

}

#header {

position: absolute;

top: 0px;

left: 0px;

height: 60px;

width: 100%;

background: #333;

padding-top: 8px;

}

#header h1 {

font-size: 30px;

text-transform: uppercase;

letter-spacing: 0.3em;

color: #fff;

}

#main {

margin: 15px 15px 15px 240px;

padding: 15px 15px 15px 15px;

background: #FFFFFF;

}

#bar {

float: left;

width: 200px;

background: #eee;

z-index: 1;

padding: 10px;

margin-right: 30px;

height: 100%;

}

#bar h1 {

font-size: 12px;

text-transform: uppercase;

letter-spacing: 0.3em;

}

■ A file called bar.php is also included in the header file. This file contains the list of categories shown in Example 4.

EXAMPLE 4 Although the code in bar.php could have been added to header.php, you can use this file to cleanly add other content if needed.

Product Categories

$catsql = "SELECT * FROM categories;";
$catres = mysql_query($catsql);
while($catrow = mysql_fetch_assoc($catres)){
echo "<a id="" href="' . $config_basedir. '/products.php?id=' . $catrow[">". $catrow['name'] . "</a>";}?&gt;

The code in bar.php performs a SELECT query to gather all the categories and display them in an unordered list. Each category links to products.php, which is created later.

Create footer.php and add the code shown in Example 5.

EXAMPLE 5 The footer file adds admin links when the administrator is logged in.

<!--?php
echo "<em-->All content on this site is © ". $config_sitename . "";

if(@$_SESSION['SESS_ADMINLOGGEDIN'] == 1)

{

echo "[<a href="' . $config_basedir . 'adminorders.php">admin</a>][<a href="'. $config_basedir. 'adminlogout.php">admin logout</a>]";

}

?&gt;

Create the main index.php for site, using the code shown in Example 6.

EXAMPLE 6 It may come as a surprise to see such a minimal index.php file. This file is really intended for generic information about the store.

<!--?php
require("header.php");
?-->
<h1>Welcome!!</h1>
Welcome to the <strong></strong>

<strong><!--?php
echo $config_sitename;
?-->

</strong><strong></strong> website. Click on one of the pages to explore the site. We have a wide range of different products available.

<!--?php
require("footer.php");
?-->

With the main design complete, your browser should display something similar to Figure 2.

MANAGING USER LOGINS

Users are a critical element in a shopping cart, and tracking both registered and unregistered users is important. Many of the different scripts that form the site have two strands of functionality: one if the user is logged in and one if not.

Create a file called login.php and add the form:

<!--?php
session_start();
require("config.php");
if(isset($_SESSION['SESS_LOGGEDIN']) == TRUE) {
header("Location: " . $config_basedir);
}

if($_POST['submit'])
{
$loginsql = "SELECT * FROM logins WHERE username = '" . $_POST['userBox']. "' AND password = '" . sha1($_POST['passBox']) . "'";
$loginres = mysql_query($loginsql);
$numrows = mysql_num_rows($loginres);
if($numrows == 1)
{
$loginrow = mysql_fetch_assoc($loginres);
session_register("SESS_LOGGEDIN");
session_register("SESS_USERNAME");
session_register("SESS_USERID");
$_SESSION['SESS_LOGGEDIN'] = 1;
$_SESSION['SESS_USERNAME'] = $loginrow['username'];
$_SESSION['SESS_USERID'] = $loginrow['id'];
$ordersql = "SELECT id FROM orders WHERE customer_id = " . $_SESSION['SESS_USERID'] . " AND status < 2"; $orderres = mysql_query($ordersql); $orderrow = mysql_fetch_assoc($orderres); session_register("SESS_ORDERNUM"); $_SESSION['SESS_ORDERNUM'] = $orderrow['id']; header("Location: " . $config_basedir);
}
else {
header("Location: http://" .$_SERVER['HTTP_HOST']. $_SERVER['SCRIPT_NAME'] . "?error=1");
}
}
else {
require("header.php");
?-->
<h1>Customer Login</h1>
Please enter your username and password to log into the websites. If you do not have an account, you can get one for free by <a href="register.php">registering</a>.

<!--?php
if(isset($_GET['error'])) {
echo "<strong-->Incorrect username/password";
}
?&gt;

<form action="<?php $_SERVER['SCRIPT_NAME']; ?>" method="POST">
<table>
<tbody>
<tr>
<td>Username</td>
<td><input type="textbox" name="userBox"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="passBox"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="Log in"></td>
</tr>
</tbody>
</table>
</form><!--?php
}
require("footer.php");
?-->

Take a moment to review the following interesting points about login.php:

Move to the start of the file and begin adding the code:

<!--?php
session_start();

require("config.php");

if(isset($_SESSION['SESS_LOGGEDIN']) == TRUE) {

header("Location: " . $config_basedir);

}

A check is made to see if the user is already logged in. If so, there is no point in loading the login page, so the page redirects to the base URL of the site.

Process the form:

if(isset($_SESSION['SESS_LOGGEDIN']) == TRUE) {

header("Location: " . $config_basedir);

}

if($_POST['submit'])

{

$loginsql = "SELECT * FROM logins WHERE username = '" . $_POST['userBox'] . "' AND password = '" . $_POST['passBox'] . "'";

$loginres = mysql_query($loginsql);

$numrows = mysql_num_rows($loginres);

if($numrows == 1)

{

$loginrow = mysql_fetch_assoc($loginres);

session_register("SESS_LOGGEDIN");

session_register("SESS_USERNAME");

session_register("SESS_USERID");

$_SESSION['SESS_LOGGEDIN'] = 1;

$_SESSION['SESS_USERNAME'] = $loginrow['username'];

$_SESSION['SESS_USERID'] = $loginrow['id'];

$ordersql = "SELECT id FROM orders WHERE customer_id = " . $_SESSION['SESS_USERID'] . " AND status < 2";

$orderres = mysql_query($ordersql);

$orderrow = mysql_fetch_assoc($orderres);

session_register("SESS_ORDERNUM");

$_SESSION['SESS_ORDERNUM'] = $orderrow['id'];

header("Location: " . $config_basedir);

}

else

{

header("Location: http://" .$_SERVER['HTTP_HOST']. $_SERVER['SCRIPT_NAME'] . "?error=1");

}

}
?-->

This code uses the same technique shown earlier for logging in a user. When a successful login occurs, three session variables are created:

■ SESS_LOGGEDIN. Set to 1 to indicate the user is currently logged in.

■ SESS_USERNAME. Contains the username of the user.

■ SESS_USERID. Contains the id of the user.

In addition to these variables, a SELECT statement pulls the id from the orders table, in which the customer_id field matches the id of the current user. Another session variable called SESS_ORDERNUM is then set to the id returned from this query.

This process can have one of two outcomes:

■ No order exists. If no order exists in the orders table, SESS_ORDERNUM is not set to anything.

■ An order exists. If an id is returned from the query, SESS_ORDERNUM is set to this id. This is useful if the user was selecting items for the shopping cart and then logged out. When the user logs in again, the shopping cart contains the same items from the previous visit and the user can continue to select items. This functionality provides some important continuity.

When the form is successfully submitted and the session variables are set, the page redirects to the base URL of the site. The page will display the text Logged in as in the sidebar.

Finally, add the code after the form:

else

{

require("header.php");

?>
<h1>Customer Login</h1>
Please enter your username and password to log into the websites. If you do not have an account, you can get one for free by <a href="register.php">registering</a>.

<!--?php
if(isset($_GET['error'])) {

echo "<strong-->Incorrect username/password";

}

?&gt;

<form action="<?php $_SERVER['SCRIPT_NAME']; ?>" method="POST">
<table>
<tbody>
<tr>
<td>Username</td>
<td>
<input type="textbox" name="userBox"></td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" name="passBox"></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="submit" value="Log in"></td>
</tr>
</tbody>
</table>
</form><!--?php } require("footer.php"); ?-->

The completed results should look similar to the page shown in Figure 3.

FIGURE 3 The completed login screen

Logging Out Users

With the user now able to log in, you also need to give him the ability to log out by destroying the session created on login. Create a new file called logout.php and add the following code:

<!--?php
session_start();
require("header.php");
require("config.php");
unset($_SESSION['SESS_LOGGEDIN']);
unset($_SESSION['SESS_USERNAME']);
unset($_SESSION['SESS_USERID']);
session_destroy();
header("Location: " . $config_basedir);
require("footer.php");
?-->

DISPLAYING AND SELECTING PRODUCTS

The most central function of a shopping cart is to show the user a range of products and allow her to choose products, adding them to the metaphorical shopping cart. This involves a few different processes:

■ The user clicks a product category to view available products. To choose a product, she clicks the Buy link.

■ Next, the user selects the quantity of items.

■ The page displays the current contents of the shopping cart and total price.

The user can also click the X symbols to delete any items from the cart and recalculate the total.

The first step in this process is to display the available products within a category.

Before you begin creating the code, you need to use the pf_validate_number() function for number validation. Create a new file called functions.php and copy the code into it:

<!--?php
function pf_validate_number($value, $function, $redirect) {
if(isset($value) == TRUE) {
if(is_numeric($value) == FALSE) {
$error = 1;
}
if($error == 1) {
header("Location: " . $redirect);
}
else {
$final = $value;
}
}
else {
if($function == 'redirect') {
header("Location: " . $redirect);
}
if($function == "value") {
$final = 0;
}
}
return $final;
}
?-->

For this project, you should also create some product images, such as those shown in Figure 4, for use with your shopping cart. You need to create at least one image, called dummy.jpg in your productimages folder, that can be loaded when no image exists for a product. If you used the sample data earlier in this chapter, the image for the Best Orange Juice product is called bestorangejuice.jpg in your productimages folder.

FIGURE 4 Each image should be 150×150 in size and saved as a JPG.

Create a new file called products.php

<!--?php
require("config.php");

require("functions.php");

$validid = pf_validate_number($_GET['id'],"redirect", $config_basedir);

require("header.php");

$prodcatsql = "SELECT * FROM products WHERE cat_id = " . $_GET['id'] . ";";

$prodcatres = mysql_query($prodcatsql);

$numrows = mysql_num_rows($prodcatres);

if($numrows == 0)

{

echo "

<h1-->No products

";

echo "There are no products in this category.";

}

else{

echo "";
while($prodrow = mysql_fetch_assoc($prodcatres)){
echo "";
if(empty($prodrow['image'])) {
echo "";
}
else {
echo "";
}
echo "";
echo "";
}
echo "

tbody&gt;
<table cellpadding="10">
<tbody>
<tr>
<td><img src="./productimages/dummy.jpg" alt="'. $prodrow[" name=""></td>
<td><img src="./productimages/' . $prodrow[" alt="'. $prodrow[" name=""></td>
<td>";

echo "
<h2>" . $prodrow['name'] . "</h2>
";

echo "" . $prodrow['description'];
echo "<strong>OUR PRICE: £". sprintf('%.2f', $prodrow['price']) . "</strong>";

echo "[<a id="" href="addtobasket.php?id='. $prodrow[">buy</a>]";

echo "</td>
</tr>
</tbody>
</table>
";

}

require("footer.php");

?&gt;

Now we explain the code:

<!--?php
require("config.php");

require("functions.php");

$validid = pf_validate_number($_GET['id'],"redirect", $config_basedir);

The pf_validate_number() function validates the category id GET variable that is passed to the page. If no id GET variable exists, the function redirects to the site’s base URL.

Select the products from the database:

require("header.php");

$prodcatsql = "SELECT * FROM products WHERE cat_id = " . $_GET['id'] . ";";

$prodcatres = mysql_query($prodcatsql);

$numrows = mysql_num_rows($prodcatres);

if($numrows == 0)

{

echo "

<h1-->No products

";

echo "There are no products in this category.";

}

If a category has no products, the text No products is displayed on the page. (To determine whether a category has projects, check if the number of rows returned is 0.) If a category contains products, a while() loop iterates through each row:

else

{

echo "";
while($prodrow = mysql_fetch_assoc($prodcatres)){
echo "";
if(empty($prodrow['image'])) {
echo "";
}
else {
echo "";
}
echo "";
echo "";
}
echo "
<table cellpadding="10">
<tbody>
<tr>
<td><img src="./productimages/dummy.jpg" alt="' . $prodrow[" name=""></td>
<td><img src="./productimages/' . $prodrow[" alt="'. $prodrow[" name=""></td>
<td>";

echo "
<h2>" . $prodrow['name'] . "</h2>
";

echo "" . $prodrow['description'];

echo "<strong>OUR PRICE: £". sprintf('%.2f', $prodrow['price']) . "</strong>";

echo "[<a id="" href="addtobasket.php?id=' . $prodrow[">buy</a>]";

echo "</td>
</tr>
</tbody>
</table>
";
?&gt;

The information about each product is displayed, and a Buy link is linked to addtobasket.php. The link also passes the id of the product as a GET variable.

Finally, add the closing code:

}

require("footer.php");

?>

The completed results should look similar to the page shown in Figure 5.

The completed results should look similar to the page shown in Figure 5.