Ecommerce Final Project: 2009

Saturday, 15 August 2009

Wednesday, 12 August 2009

Thursday, 6 August 2009

Monday, 3 August 2009

This page list all the products Yongda supermarket has. Users can see all products or just products from certain category. From this page the users can see the product detail , add new product, modify and delete.

Below is what the page look like. The table shows the product name, thumbnail, category, and modify and delete link. We show the product image if it exist. In case we haven't supply the image the default image is shown instead.

Sunday, 2 August 2009

Admin - Add Product

Adding a product for the online shop is a straightforward process. Just enter the product information and hit the 'Add Product' button. When adding a product we will require these information :

Category
Product name
Description
Price
Quantity in stock
Image

All is mandatory except for the image. I can add the product image later.
Not much difference from the add category form.

On top of the form the admin can see the category combo box. I build this so that the admin can only select the second level category. This is to ensure that all product are added on the second level category and not put in the top level category by mistake.

The one responsible to build the list is the buildCategoryOptions() function in admin/library/functions.php. Below is the snippet for the code that build the combo box. Just in case I will need the ability to add some product to the first level category you can replace the buildCategoryOptions() with the commented function code written below it.

function buildCategoryOptions($catId = 0) { $sql = "SELECT cat_id, cat_parent_id, cat_name FROM tbl_category ORDER BY cat_id"; $result = dbQuery($sql) or die('Cannot get Product. ' . mysql_error()); $categories = array(); while($row = dbFetchArray($result)) { list($id, $parentId, $name) = $row; if ($parentId == 0) { // we create a new array for each top level categories $categories[$id] = array('name' => $name, 'children' => array()); } else { // the child categories are put int the parent category's array $categories[$parentId]['children'][] = array('id' => $id, 'name' => $name); } } // build combo box options $list = ''; foreach ($categories as $key => $value) { $name = $value['name']; $children = $value['children']; $list .= ""; foreach ($children as $child) { $list .= "; if ($child['id'] == $catId) { $list.= " selected"; } $list .= ">{$child['name']}rn"; } $list .= ""; } return $list; }

The product quantity is limited to 65,535 since in the table definition I only use smallint(5) . I find this number adequate for most online shops. But if do carry more than that amount for an item just change the data type to something bigger like mediumint(8).

The product image you need to supply is the large size product image which will be shown in the product detail page. The script will generate a thumbnail for it to be shown in the product browsing page. I define the maximum image size and the thumbnail size in config.php

// some size limitation for the category // and product images // all category image width must not // exceed 75 pixels define('MAX_CATEGORY_IMAGE_WIDTH', 75); // do we need to limit the product image width? // setting this value to 'true' is recommended define('LIMIT_PRODUCT_WIDTH', true); // maximum width for all product image define('MAX_PRODUCT_IMAGE_WIDTH', 300); // the width for product thumbnail define('THUMBNAIL_WIDTH', 75); if (!get_magic_quotes_gpc()) { if (isset($_POST)) { foreach ($_POST as $key => $value) { $_POST[$key] = trim(addslashes($value)); } } if (isset($_GET)) { foreach ($_GET as $key => $value) { $_GET[$key] = trim(addslashes($value)); } } }

I need to restrict the image size so it won't destroy the site layout. Imagine that if the image is 1000 pixels wide and 2000 pixels high. It will make the product detail page look awful. Image resizing can be turned on or off. If you set LIMIT_PRODUCT_WIDTH to false on config.php the script will just upload the image without worying about it's size. It's not recommended though.

Admin - Delete Category

When the admin decides that a category is no longer needed, he/she can remove it from the database. To delete a category go to the category listing page and click on the 'delete' link on the category you wish to delete

Deleting a category will delete all product in that category and in all it's children. For example if the admin delete the "HOMEWARE" category than all product in "Kitchen ware" and "Electric Goods" will also be deleted. The function used to delete category is called deleteCategory() and it's located in admin/category/processCategory.php

The deletion process is like this :

Update the cat_id for all products in that category to zero
Remove the category image ( if exist )
Delete the category from database

function deleteCategory()
{
if (isset($_GET['catId']) && (int)$_GET['catId'] > 0) {
$catId = (int)$_GET['catId'];
} else {
header('Location: index.php');
}

// find all the children categories
$children = getChildren($catId);

// make an array containing this category and all it's children
$categories = array_merge($children, array($catId));
$numCategory = count($categories);

// remove all product image & thumbnail
// if the product's category is in $categories
$sql = "SELECT pd_id, pd_image, pd_thumbnail
FROM tbl_product
WHERE cat_id IN (" . implode(',', $categories) . ")";
$result = dbQuery($sql);

while ($row = dbFetchAssoc($result)) {
@unlink(SRV_ROOT . PRODUCT_IMAGE_DIR . $row['pd_image']);
@unlink(SRV_ROOT . PRODUCT_IMAGE_DIR . $row['pd_thumbnail']);
}

// delete the products
$sql = "DELETE FROM tbl_product
WHERE cat_id IN (" . implode(',', $categories) . ")";
dbQuery($sql);

// then remove the categories image
_deleteImage($categories);

// finally remove the category from database;
$sql = "DELETE FROM tbl_category
WHERE cat_id IN (" . implode(',', $categories) . ")";
dbQuery($sql);

header('Location: index.php');
}

Admin - Edit Category

add.php is where I can modify a category information.
If admin change the category image then the old image will be deleted from the server and the new image is uploaded.
To get the category info from database we need the category id from the query string. If $_GET['catId'] is not present or empty I just redirect to index.php. If it's present and not empty we fetch the category info. To look at the code below:

if (!defined('WEB_ROOT')) {
exit;
}
// make sure a category id exists
if (isset($_GET['catId']) && (int)$_GET['catId'] > 0) {
$catId = (int)$_GET['catId'];
} else {
header('Location:index.php');
}
$sql = "SELECT cat_id, cat_name, cat_description, cat_image
FROM tbl_category
WHERE cat_id = $catId";
$result =& dbQuery($sql);
$row =& dbFetchAssoc(&$result);
extract($row);

next to the category image I have a delete link: Clicking on the link will call the function deleteImage(). This function will pop a confirmation box and if the admin confirm the deletion the function will redirect him to processCategory.php where all category related process is taken care of.

function deleteImage()
{
if (isset($_GET['catId']) && (int)$_GET['catId'] > 0) {
$catId = (int)$_GET['catId'];
} else {
header('Location: index.php');
}
_deleteImage($catId);
// update the image name in the database
$sql = "UPDATE tbl_category
SET cat_image = ''
WHERE cat_id = $catId";
dbQuery($sql);
header("Location: index.php?view=modify&catId=$catId");
}

To delete the image from the server the deleteImage() function calls _deleteImage().

After deleting the image I update the category information in database. I only need to set cat_image to an empty string and I am done. The final thing that deleteImage() do is redirect back to the category modification page. I don't redirect to category listing page because the admin may still want to modify the category further.

Saturday, 1 August 2009

Making a connection page

After designing and inserting data into the hosting database, I use PHP scripting to connect with the database by script below:

$dbConn = mysql_connect ($dbHost, $dbUser, $dbPass) or die ('MySQL connect failed. ' . mysql_error());

The function mysql_connect() means to connect with MySQL database. In the function, a variable $dbHost to specify the server to connect with, $dbUser to specifies the username to log in with and $dbPass to specifies the password to log in with. If these variables are not matched with Hosting server authentication, then an error message will be shown by mysql_error.

I then use mysql_select_db() to make a chosen database active

mysql_select_db($dbName) or die('Cannot select database. ' . mysql_error());

with variable $dbName to specify the database name.

Admin - Add Category

Here the admin can add new product category for the online shop. The information I need are the category name, description, image. Both the name and description are mandatory but the image is not. If I don't have the category image I can leave the field blank. Of course it's not recommended because when the customers come to the shop they will see the default image.

The category description here will not be shown anywhere on the shop. It's only purpose is to let the shop owner / admin to know what the category is all about.

The form has a hidden variable called hidParentId. The value is set from category/list.php as explained on the previous page.

input name="btnAddCategory" type="button" id="btnAddCategory"
value="Add Category" class="box"
onClick="addCategory()"

When I submit the form the process then handed to processCategory.php. All kind of category processing ( add, modify, delete ) are done in this file. On top of the script there's a simple switch to call the appropriate function based on the action required.

$action = isset($_GET['action']) ? $_GET['action'] : '';

switch ($action) {
  case 'addCategory' :
      addCategory();
      break;
    
  case 'modifyCategory' :
      modifyCategory();
      break;
    
  case 'deleteCategory' :
      deleteCategory();
      break;

  case 'deleteImage' :
      deleteImage();
      break;
    
  default :
      // if action is not defined or unknown
      // move to main category page
      header('Location: index.php');
}

On the add category form the form action is set as processCategory.php?action=addCategory so if I look at the code above the script will call addCategory();. If no action is defined we just redirect to category main page.

When saving the product image there is a possibility of name conflict. It may seem weird for two categories to have the same image name, but in some cases it can happen. To avoid such conflict we will generate a new name for each category image we upload using the combination of rand(), time() and md5() functions like this :

// get the image extension
$ext = substr(strrchr($image['name'], "."), 1);

// generate a random new file name to avoid name conflict
$imagePath = md5(rand() * time()) . ".$ext";

The image name wil then become something like 6c444ed816ce251d610c25154dc28462.jpg. Now it's almost impossible for us to ever hit the name conflict problem. We will use the same name generation for the product image and thumbnail.

How does it work ?

The time() function will return the number of seconds elapsed since the beginning of ( computer ) time which is January 1, 1970. Using rand() function we get a random value less or equal to the number of seconds. We need to use rand() because this shopping cart can have more than one admin. If two admins happen to submit the form at the same second the result of time() will be the same.

As the final step md5() use the random value and return the hash ( a string with 32 characters ). If I feel that using 32 characters for a filename is too much I can use substr() function to cut it like this :

// get the image extension
$ext = substr(strrchr($image['name'], "."), 1);

// generate a random new file name to avoid name conflict
$imagePath = substr(md5(rand() * time()), 0, 10) . ".$ext";

Sunday, 19 July 2009

Admin - View Category

All the product categories for the online shop are listed here. I just select category id, parent id and name and using a while loop we show the category one by one.

Making a admin login page

All user account is saved in tbl_user. For simplicity the table will only contain the bare necessities such as user id and password. You can add more column if you want to.

This is how the login works

1. The admin enter it's username and password
2. The script check whether that username and password combination do exist in the database
3. If it is set the session then go the admin main page
4. If it's not then show an error message

Below is the login form screenshot:

The default user name and password are "admin" ( without the quotes )
and source code of a form

And a script should be on top:

The login function is called doLogin() and it's located in admin/library/functions.php
The checkUser() function look like this :

If the login is successful, this function will set the session variable $_SESSION['plaincart_user_id']. All admin pages will check for this session id using the checkUser() function. If the session id is not found then the function will set a redirection to the login page.

Another thing that this function check is if there's a 'logout' in the query string. If it is then I call the doLogout() function which will remove the session id.

function doLogout()
{
if (isset($_SESSION['plaincart_user_id'])) {
unset($_SESSION['plaincart_user_id']);
session_unregister('plaincart_user_id');
}

header('Location: login.php');
exit;
}

Testing my functions on validation

If all checking validatations are past, then go to customer home page (member area)

Making forgot password page

Firstly, a form, which is created in "forgotPassword.php" file, has an action interracting with "sendPassword.php" file.

the form in Firefox Browser looks like:

In "sendPassword.php" file, I made a connection path

Extracting values from "forgotpassword.php" file

Check if username exist in the database

generate a random password

Update the random password with the old password

Putting my email in header mail and setting up a mail body

Testing my function in Browser:

a form in forgotPassword.php

Validation Checking

After checking, I go back to the form and input "thientanchuong" in the textfield
then I get a confirmed message:

Finally I check the sent password in my email

However, the password is shown in encrypte format, not in normal way. I need to change a line of code which is.

I replaced a variable $upassword with $password. Afterward, I try to send a new password to my email again.

This time is worked.

Make a register page

In my register page I used different php functions to build up:

Firstly, connecting to database hosting which is initilized in config.php

require_once ('../../library/config.php');

then making function for string variable.

mysql_real_escape_string — Escapes special characters in a string for use in a SQL statement.
addslashes — Quote string with slashes.
strip_tags — Strip HTML and PHP tags from a string.

function protect ($string)
{
$string = mysql_real_escape_string ($string);
$string = strip_tags ($string);
$string = addslashes ($string);
return $string;
}

Next, process the form when user click on submit button