A web based online shop management system

View with charts and images

A WEB BASED ONLINE SHOP MANAGEMENT SYSTEM

Abstract:

Internet marketing, also referred to as I-marketing, web-marketing, online-marketing, Search Engine Marketing (SEM) or e-Marketing, is the marketing of products or services over the Internet. At present time, Internet marketing plays a big roll in our life. The goal of an e-commerce site is not only to sell goods but also to provide services through online.

This project deals with developing an online shopping website for online products sale. It provides the user with a catalog of different products available for purchase in the store. Our system is implemented using a 3-tier approach, a backend database, a middle tier of Apache and php, and a web browser as the front-end client. In order to develop an e-commerce website, a number of technologies must be studied and understood. These include multi-tiered architecture, server and client side scripting techniques, implementation technologies such as, programming language, relational databases (such as MySQL). Objective of this project is to develop a basic website where we used a database system for storing all information rather than file system. Administrator will be able to create new categories, add products, add user, update order status, enable/disable user from the system and user has the access buy to their different types of products. User can pay the payment by Paypal or “Cash on Delivery”. Website visitor only has the access to visit the website and they can have all the information from the site.

ACRONYMS

PHP Hyper Text Processor

HTML Hyper Text Markup Language

CGI Common Gateway Interfaces

FTP File Transfer Protocol

MySQL Structured Query Language

ASP Active Server Page

RDBMS Relational Database Management System

HTTP Hypertext Transfer Protocol

SSI Server Side Includes

SSL Secured Socket Layer

JSP Java Server Page

ISP Internet Service Provider

DNS Domain Name Server

IP Internet Protocol

TCP Transfer Control Protocol

URL Uniform Resource Locator

PERL Practical Extraction and Reporting Language

ITS Information Technology

HCI Human Computer Interaction

E-R Entity-Relationship

SSH Secure Shell

XML Extensible Markup Language

WSAPI Web Site Application Programming Interface

DDL Data Definition Language

UCD User Centered Design

CSS Cascading Style Sheet

1.1 Introduction

Online system revolutionary changes in our day to day life as well as peoples depend on it because it brings more flexibility in our life. Online shopping is one of them, where one can buy and sell everything from his/her house within a few times. So, no need to go anywhere and one can choose the best product from a reasonable price and easily sell allowance for his product. That’s why, Online shopping day by day more popular in our busy life. We observed and analyzed this present situation and selected a project topic and made it based on Online Shopping Management System.

1.2 Objectives of the Project

The Online Shop management system provides product information and selling to Seller, Buyer and Visitor. The goal of this report are given below

§ To Learn Internet Marketing Plans.

§ Give a general idea of the proposed web development model.

§ Propose modifications and addition of certain features of the web site.

§ Getting idea about web-related research.

§ Getting Knowledge about E-commerce.

§ Getting Knowledge about the programming.

§ Get an overall idea of designing the relevant database.

§ To Learn about software tools.

§ Get a broad discussion of the proposed and implemented features of the whole program.

§ Analyze the security measurement of the web site.

§ To learn payment security systems.

1.3 Research Methodology

There is concerned with the methodological problem of how to integrate qualitative and quantitative insights in developing an agent-based model of the ecommerce case study.

1.3.1 Procedure

In this project Linear Sequential Model or Waterfall model has been used for development. The linear sequential model suggests a systematic, sequential approach to software development that begins at the system level and progresses through analysis, design, coding, testing, and support. The linear sequential model is the oldest and the most widely used paradigm for software engineering. As we had developed this project in a conventional way and all the requirements were taken at a time for analysis, for this reason Waterfall Model was chosen for to use in our project.

1.3.2 Techniques

In the time of e-shopping having an ecommerce website has become a common thing. Most of the E-commerce systems techniques are almost similar. As a result, the similar techniques are used in the context of project development. Extra additional techniques are used by someone to develop the popularity of websites. This main product-selling-system is almost same for all website. For this reason, we have developed our project by using this customized technique. Before using this technique we have studied it very minutely and have completed our project by followings all standard system of online shopping.

1.3.3 Tools

Designs tools are very important to develop any software and without these tools it is not possible to develop any software. These tools are related to each other very closely. We have used these tools PHP, Mysql, JavaScript, CSS, HTML and XHTML to develop our software which is briefly mentioned below:

· PHP: PHP is a server-side scripting language designed specifically for the Web. Within an HTML page; user can embed PHP code that will be executed each time the page is visited.The user PHP code is interpreted at the web server and generates HTML or other output that the visitor will see. PHP originally stood for Personal Home Page but was changed in line with the GNU recursive naming convention (GNU = Gnu’s Not Unix) and now stands for PHP Hypertext Preprocessor.

• Mysql: MySQL is a open source Relational Database Management System. MySQL is very fast reliable and Flexible Database Management System. It provides a very high performance and it is multi threaded and multi user Relational Database Management System.
• Javascript: Javascript is a programming language that is used to make web pages interactive. It runs on user visitor’s computer and so does not require constant downloads from the user web site. It is a scripting language.
• CSS: CSS is an abbreviation for Cascading Style Sheets. Style sheets are a very powerful tool for the Web site developer. They give to user the chance to be completely consistent with the look and feel of user pages, while giving the user much more control over the layout and design than straight HTML ever did.
• HTML: Hyper Text Mark language” is used to write web pages, combining plain text and special tags that tell a browser how to treat that text. We use HTML to describe how element in a web page should be displayed, how pages should be linked, where to put images, and so on.

1.3.4 Documentation Aids

This document helps in understanding the creation of an interactive web page and the technologies used to implement it. The design of the project which includes Data Model and Process Model illustrates how the database is built with different tables, how the data is accessed and processed from the tables. The building of the project has given us a precise knowledge about how php is used to develop a website, how it connects to the database to access the data and how the data and web pages are modified.

1.3.5 Project Assumptions and Potential Risks

Assumptions: Te project is a web application. A web application has to be tested and implemented in web server and web browsers intensively. Apart from functional requirements there are non-functional and pseudo requirements have to be met. The User Interface has to be user friendly and attractive enough to fulfill user expectations.

Potential risks: This is a group project of two team members. There are some potential risks like software delivery on time, project collaboration project reports write up etc.

1.4 Project Development

We have studied the subject matters of the project in respect of developing our selected project. As a result we have drawn the project development flowchart which is shown as below:

Fig 1.1: Project Development Model

1.5 Duration of Work

The Constructive Cost Model (COCOMO) is an algorithmic software cost estimation model developed by Barry Boehm. The model uses a basic regression formula, with parameters that are derived from historical project data and current project characteristics. We have used COCOMO model to estimate our project. As two people was in this project, we will express our total estimation in man-hour.

Total line of Code: 20 k

Total man-hour: 462 hours

Total resource: 2

Total Duration: 6 Months (3 hours per-day, 20 days a month)

1.6 Organization of the Book

This report is organized in seven chapters which reflect various topics related to the features of used project tools, designing database, implementation and security issues.

First chapter introduces the overall work and it states the motivation behind this exertion mentions the objectives of this report and specifies related context and issues. The rest of the report is organized as follows.

Chapter 2 describes about Existing System and Requirement Elicitation. In Chapter 3, the proposed system has been covered and deals with database design. The designing phase, E-R model, functions definition have been discussed in this chapter. And the total database that has been used in this project is also being described here. Chapter 4 discussed about the Web Engineering as well as its need and characteristics. We introduce our project Simulation, Implementation, Integration & Maintenance in Chapter 5. The next chapter, Chapter 6, describes about the application design. Finally Chapter 7 concludes the report and outlines the future work. Future work suggests the enhancement of this project in terms of including more features in the actual web site.

Existing System and Requirement

Elicitation

2.1 Introduction:

Similar works in the past has already been witnessed like the present project on Online shopping system. Its online work has been done in this sector. This chapter deals with the discussion of the existing system structure and requirement analysis.

2.2 Existing System:

The system that we made is known as E-commerce shopping cart system. The objects and process of this system are almost same. We have reviewed a lot of such type of systems in our country and got the process and features these systems. Besides, we have also explored the facilities and limitation from this system. The web address, process, features and limitations of some existing system are described in this chapter.

2.3 Some of Existing Online Shop in Our Country

• www.bdbazar.com
• www.bengalcommerce.com
• www.sonarmarketplace.com
• www.upoharbd.com
• www.bdgift.com
• www.cellbazaar.com
• www.clickbd.com

2.4 Existing System Architecture

Web address: http://www.bdbazar.com/

Features and Drawbacks:

· This system made by OsCommerce framework.

· Used XHTML and CSS for styling.

· No one can easily find this website.

· Text too small.

· This site load slowly.

· User Interface not so good.

· Broken links.

· SEO is not working.

· Category/Product procedure is not user friendly.

· Poor customer service options

· Poor overall web design.

· Lack of compatibility with more than one browser.

· Wasting the customer’s time.

· The buying process is very long.

· Customers are experiencing difficulties when they want to pay.

· The user buying confirmation process is standard or deficient.

· Site’s product searching option is not working properly. So that needed product doesn’t show in search.

· Some images are not displayed on this website.

· Doesn’t have any discount feature.

· Reasonable shipping costs.

· This site dosen’t have any information page such as “How to order”, so that a new customer can’t understand about the site order procedure.

· Product delivery system works faster.

· Javascript errors having.

· Error messaging is shown good.

· Used Google Analytics tools.

· Under estimating security concerns of customers.

· Open 24 x 7, 365 days of the year.

Web address: www.bengalcommerce.com

Features and Drawbacks:

· This system made by JSP framework.

· Used XHTML and CSS for styling.

· Most of the time server down.

· Site design does not load properly.

· This site load slowly.

· User Interface not so good.

· Bad spelling.

· Broken links.

· SEO is not working.

· Poor customer service options

· Lack of compatibility with more than one browser.

· Wasting the customer’s time.

· The buying process is very long.

· Customers are experiencing difficulties when they want to pay.

· The user buying confirmation process is standard or deficient.

· Site’s product searching option is not working properly. So that needed product doesn’t show in search.

· Some images are not displayed on this website.

· This site dosen’t have any information page such as “How to order”, so that a new customer can’t understand about the site order procedure.

· Category/Product procedure is not user friendly.

· Error messaging are shown good.

· Used Google Analytics tools.

· Under estimating security concerns of customers.

· Open 24 x 7, 365 days of the year.

Web address: www.sonarmarketplace.com

Features and Drawbacks:

· This system made by PHP framework.

· Used XHTML and CSS for styling.

· Poor customer service options

· Site design does not loking good.

· Lack of compatibility with more than one browser.

· Wasting the customer’s time.

· The buying process is very long.

· Some images are not displayed on this website.

· Doesn’t have any discount feature.

· This site doesn’t have any information page such as “How to order”, so that a new customer can’t understand about the site order procedure.

· Category/Product procedure is not user friendly.

· Error messaging is shown good.

· Not used Google Analytics tools.

· Under estimating security concerns of customers.

· Open 24 x 7, 365 days of the year.

Web address:www.upoharbd.com

Features and Drawbacks:

· This system made by PHP framework.

· Used XHTML and CSS for styling.

· Used to many Javascript library.

· No one can easily find this website.

· This site load slowly.

· User Interface not so good.

· Broken links.

· SEO is not working.

· Poor customer service options

· Lack of compatibility with more than one browser.

· The buying process is very long.

· Customers are experiencing difficulties when they want to pay.

· The user buying confirmation process is standard or deficient.

· Some images are not displayed on this website.

· Low shipping costs.

· Not used Google Analytics tools.

· Product delivery system works faster.

· Category/Product procedure is not user friendly.

· Javascript errors having.

· Error messaging are shown good.

· Under estimating security concerns of customers.

· Open 24 x 7, 365 days of the year.

Web address: www.bdgift.com

Features and Drawbacks:

· This system made by OsCommerce framework.

· Used XHTML and CSS for styling.

· No one can easily find this website.

· Text too small.

· This site load slowly.

· User Interface not so good.

· Broken links.

· SEO is not working.

· Poor customer service options

· Poor overall web design.

· User can not see proper bengali fonts.

· Lack of compatibility with more than one browser.

· Wasting the customer’s time.

· The buying process is very long.

· Customers are experiencing difficulties when they want to pay.

· The user buying confirmation process is standard or deficient.

· Site’s product searching option is not working properly. So that needed product doesn’t show in search.

· Some images are not displayed on this website.

· Doesn’t have any discount feature.

· Low shipping costs.

· Used Google Analytics tools.

· This site doesn’t have any information page such as “How to order”, so that a new customer can’t understand about the site order procedure.

· Product delivery system works faster.

· Category/Product procedure is not user friendly.

· Javascript errors having.

· Error messaging are shown good.

· Under estimating security concerns of customers.

· Open 24 x 7, 365 days of the year.

Web address: www.cellbazaar.com

Features and Drawbacks:

· This system made by ASP.NET framework.

· Used XHTML and CSS for styling.

· This site load slowly because using Ajax.

· User Interface so good.

· This site owner Grameenphone Ltd.

· SEO is not working.

· Not compatibility with Google chorome, Internet Explorer etc.

· Wasting the customer’s time.

· No buying process in here.

· This site just for sharing product information.

· Product buying process manually. Buyer provides his cell phone number and address. Customer contact with buyer manually.

· Site’s product searching option is not working properly. So that needed product doesn’t show in search.

· Some images are not displayed on this website.

· Many garbage data in here.

· Javascript errors having.

· Used Google Analytics tools.

· Error messaging are shown good.

· Open 24 x 7, 365 days of the year.

2.5 Requirement Analysis

Various type of system contains different facilities and limitations. After studying the process, feature and limitation of some online shopping web site. Now that’s why we need some requirements. These are given below:

• Web design must be fixed in all browsers well.
• Discount coupon code must be added.
• Product options like color, size etc must be added.
• It is very necessary to add user interface.
• More improvement need in customer service.
• Site link should be well constructed.
• Better loading system must be added in site loading issue.
• Site activity measurement must be need for better service.
• How to order information page should be add because its help for a new customer.
• SEO must be added

§ SSL technology must be required for security.

2.6 Conclusion

As a matter of fact neither of the above discussed models and approaches have been thoroughly followed to the development work of this related field. In the next chapter, there will be discussion on proposed system which is related to the combination of approaches discussed above.

The Proposed System

3.1 Introduction

Since the development of the Internet many things that were pretty hard to obtain or to do, like information on a large variety of topics or communication with distant friends have become so simple that anyone can have access to them just by using a computer.

Among the many advantages that the Internet gives us, one of the main ones is online shopping, an activity that many have become addicted to. Shopping is a necessity for all of us, some of us really enjoys it, and others try to keep it as simple and short as possible. Well, online shopping is the best solution for both those who consider it a chore that they try to avoid and for those who do it on a daily basis. This chapter deals with the discussion of the proposed system.

3.2 System Overview

After the user browse around user will see that the basic flow of our shop is:

• A customer visit the site

• Customer browse the pages, clicking her way between categories

• View the product details that she found interesting

• Add products to shopping cart.

• Need login if customer has to not log in.

• Checkout ( entering the shipping address, payment info )

• Thank you page and go to payapal for payment.

The customer does need to register for an account. Customer can not buy without login.

3.3 System Methods

We have explored that our system is the best system or updated system. We have followed the below methods:

· We have fully done our system by using php programming language and mysql. But it would be very diffcult for customization if we use other frameworks like Joomla, Magento, WordPress, Opencart etc.

· We have used XHTML/CSS for form design.

· We have used our website font standard size.

· We have used Jquery javascript library for form validation.

· Our website compatibility with all browsers like.

· We have made the User Interface(UI) of the site very simply as it were users can find out very easily.

· Our site is comparatively fast than any other sites because we didn’t add any extra function more than what is necessary.

· All of the links in our site is very user friendly.

· Anyone can easily find our website.

· Category à Sub category à Product thus we have created the category and product sections in to our system.

· We have explored the Search Engine Optimization (SEO) by using the web admin tools; as a result, this site shows in the first page of the google search page.

· We used google analytic tools.

· We have added some extra pages in this site for which members can know how to order and so on.

· Our customer service option too much high.

· Customer can enjoy the convenience of shopping at any hour and anywhere in the world.

· Product delivery system is faster then any other site. The orders which are based on cash on delivery will be delivered quickly. And the orders which are based on paypal payment will be activated the delivery process after payment immediately.

3.4 Features of the Proposed System

On proposed system we relate to the combination of User-Centered Design and with existing approach. And also to overcome the facets of user experience our proposal is on the model of user-experienced honeycomb. It is based on the qualities:

Fig 3.1: User experienced honeycomb

• Useful: One must have the courage and creativity to ask whether the products and systems are useful, and to apply the deep knowledge of craft and medium to define innovative solutions that are more useful.
• Usable: Ease of use remains vital, and yet the interface-centered methods and perspectives of human-computer interaction do not address all dimensions of web design. In short, usability is necessary but not sufficient.
• Desirable: The quest for efficiency must be tempered by an appreciation for the power and value of image, identity, brand, and other elements of emotional design.
• Findable: One must strive to design navigable web sites and locatable objects, so users can find what they need.
• Credible: The beginning to understand the design elements that influence whether users trust and believe what we tell them.
• Valuable: The sites must deliver value to our sponsors. For non-profits, the user experience must advance the mission. With for-profits, it must contribute to the bottom line and improve customer satisfaction.

3.5 Usability of the Proposed System

The following principle is important for the success of a web site.

• Make it unique – One often compare building web sites to building homes, and I look at myself as a custom home builder.
• Keep it simple – One firmly believe in keeping a web site simple, both from an aesthetic point of view, and more importantly, from an engineering point of view. Aesthetically, the user to be able to see the message and be able to act on it. No need for flashing text or cheesy animations. For reliability, cost, and search engine issues, one try to keep as much of the site in plain HTML. This makes the site easier to index, quicker to load, and easier to bookmark.
• Make it easy to navigate – This is probably the most import item on this list because once users find a site, they need to quickly find the information they’re after or they will be returning to the search engine to click on the competitor’s site. Many of existing sites use a left hand menu that has become sort of a standard in web site design. This immediately lets the visitor see what the main topics are, and they can easily jump from section to section on any page of the site. They don’t have to remember the trail that got them to where they are and they don’t have to make return trips to the home page.
• Make it easy to bookmark – Once users find what they are looking for, they often want to bookmark it so that they can return to that point later. By avoiding frames and dynamic pages, the site guarantee that when a user bookmarks a page in the site, they will be returned to the exact page that they bookmarked. This is also very important if people want to create links to the user content rather than just the home page.
• Make it easy to expand – Publishing on the web is one of the most cost effective ways to get information to the potential and existing users. Because of this one often find that a client will start with a five page site and once they see how well it is working they want to add more to it. The design is used to make it easy to expand the site without having to tear it apart and start over. This is one reason left hand navigation model is favorable.
• Code by hand – Coming from a programming background, coding HTML by hand was a natural way to do it. Also being a programmer, one have the discipline to create very efficient coding which makes for more stable pages that download quicker.
• Make it compatible – One have to really aware of how many web sites are built that aren’t compatible. Part of the compatibility issue is also making sure the design is flexible. The designer has to realize that on the web there is no control over how the work will be viewed. Monitor size, choice of browser, choice of default fonts and many other issues all affect how the page will render. A good design must be flexible so that it displays well for a broad range of users. It may not be perfect for everyone, but it should be readable. The examples shown below illustrate how this page looks at the same resolution on a Macintosh running Mozilla (left) and on a PC running Internet Explorer 6(right).

3.6 Proposed System

After requirement analysis and constructing design phase the content of the site arranged as:

• Home Page: This is where the customers will go. They will browse around and view the products and hopefully if they’re interested enough they’ll put some products in the cart.
• Category Page: Just to add some navigation so the customer can browse around.
• Product Page:Display detailed information about a product.
• Add to Cart Page: All interesting goodies go here.
• View Cart Page: Customer can view what’s in her shopping cart. Probably modifying the product quantity or dump some products (or even abandon the whole cart).
• Checkout Page: There are three steps to complete the checkout
  • Fill out the shipping and payment info
  • Confirm the ordered items, shipping and payment info and enter the payment method.
  • Save the order information to the database. If the payment method is COD (cash on delivery) go straight to the thank you page. If the customer chooses to pay with paypal submit the payment info to paypal server.
• Register: In this page the registration form has been given for the user to register and get the extra facilities from the web sites.

3.7 Use Case Diagram and Process

Fig 3.2 : Use Case Diagram (Admin) for shopping site

Fig 3.3 : Use Case Diagram (Register User) for shopping site

Fig 3.4 : Use Case Diagram (Visitor) for shopping site

3.8 Database Management System

The Database is implemented in MySQL Database Management System (DBMS). This project is medium software. Most of its interface is done with PHP files. That is why it is logical to implemented the database with MySQL rather than any enterprise DBMS. MySQL is a free software and robust enough to handle the web requests for our project.

3.9 Database Tables and Description

According to the Software Specification and Software Analysis phase, the relational database is designed with the following relations

Table 3.1: Database Table and Description

All relations have been normalized and query optimized. All Entity Integrity Constraints and Referential Integrity Constraints are strictly checked.

3.10 Database Relation Schemas

tbl_category : This table store the product categories. From the Next topic ER diagram the user can see that our current database design enables a category to have a child category and for the child category to have another child category and so on. But we make a restriction that the category will only two level deep like this “Top Category > Laptop > Asus”. The reason is to reduce the number of clicks required by a visitor when browsing a category.

Table 3.2: Table tbl_category

tbl_product : In this table we store the product’s name, category id, description, featured, price, quantity, image and thumbnail. For now a product can only have one image. It may not be enough if the user want to show a picture of user product from multiple angles so i plan to improve this on future version.

When adding a product image in the admin page we don’t need to upload the thumbnail too. The script will generate the thumbnail from the main image. The thumbnail size is defined in library/config.php ( THUMBNAIL_WIDTH ) and currently it is set to 75 pixels.

Table 3.3: Table tbl_product

tbl_cart : This table will store all items currently put by the customer. Here we have ct_session_id to save the id of a shopping session.

Table 3.4: Table tbl_cart

tbl_order : Finally when the customer finally places the order, we add the new order in this table. The shipping and payment information that the customer provided during checkout are alos saved in this table including the shipping cost.

Table 3.5: Table tbl_order

tbl_order item : All ordered items are put here. We simply copy the items from the cart table when the customer places the order.

Table 3.6: Table tbl_order_item

tbl_user : This table saves the entire user. Currently only admin type user is an admin panel and all can do everything to the shop. I’m planning to add permission level only when a user type admin. So one admin can do everything. Admin can add/update category, add / update product, manage orders, manage users, etc. And also all front-end user can view a product, add to cart, and purchase product etc.

Table 3.7: Table tbl_user

tbl_shop_config : This table stores the shop information. For now it only have the shop name, address, phone number, contact email, shipping cost, the currency used in the shop and a flag whether we want to receive an email whenever a customer place an order.

Table 3.8: Table tbl_shop_config

tbl_currency : This table stores the currency information. For now it has the currency code and currency symbol.

Table 3.9: Table tbl_currency

3.11 Entity Relationship Diagram

Fig 3.5 : ER Diagram for Shopping site

Form Design

4.1 Introduction

Form design is very important for this project. After completing database design we have planned for form design. Firstly for this design we have been used photoshop. Here we have been used layer, color and decide how will be our page looks like. The first page or Home Page of any website is the gateway page from where internet users take decision to go further for visit site or not. Home Page is considered as most important and essential page in website. Web designers / graphic designers spend lots of time in preparing home page. Many web design companies spend lots of money for giving exclusive look to their home page in compare to their competitor’s website. Even small companies have also started to pay more attention in design of their home page. Attractive and informative home page will build any company’s strong impression. So we have been taken a decision and design our pages. Here we will now describe how many pages we designed; we will show how they are looks like and which page containing what information.

4.2 Detailed Front-end Logical Design of the Proposed System

4.2.1 Shop: The Main Page

Following picture is the home page (front page). There are five main parts here. Those parts are: header part, Navigation part, Banner part, Container part and Footer part. At the very top and bottom have the common header and footer. Header part contains logo. Search option for searching any products. Shopping cart portion show how many products we add to my cart.

Navigation part contains some menu link for going those pages and the banner part contains some product galleries image.

Fig 4.1: Home page layout

Container part contains three columns. Left column has the category browser module. The shopper can click here way through categories to find the product. And also have a login form. User can login their account by putting username and password. The right side is where we put the mini shopping cart module. If the visitor adds a product, this mini cart will show the item. And also have a featured product module. User can see the featured product item in here.

Middle part is the main body for this project. For all action middle part will be changed according to its action. Here we show the product categories and products. The visitor will (hopefully) find her way through the shop, find the item she want, put it into the shopping cart and then buy.

What we show in the main area depends on the visitor action. When user first time arrives to main page user get the category list. If the user clicks on one of the category then we show the product list for that category. And if the user clicks on a product from the list we show the product detail. The bottom area is used for displaying the store information (copyright, address, email, phone number).

4.2.2 Shop: Browse Category

On the left side of the shop pages we show the category list. When the customer clicks on a category on the left side customer can see all products in that category. The shop main page include this navigation from include/leftNav.php and as mentioned before, the one responsible to get the list of categories for this navigation is the formatCategories() function in library/category-functions.php

In summary here is what formatCategories() do :

1. Get all the children categories

2. Get the parent category and other categories on the same level as the parent

3. Keep looping to get the parent’s parent until we reach the top level category

Fig 4.2 : Categories List

4.2.3 Shop: View Product List

When the user click one of the categories from the left navigation the main content area will show all product contained in that category. For example if the user click on Laptop then all products in this category will be shown. Actually “Laptop” doesn’t have any product. Those products are belonging to its children categories (Asus and Dell).

Fig 4.3: Product List

4.2.4 Shop: View Product Details

When the user clicks on any one of the product from the product list, the product detail page will show up and for each product the software will display the full-sized image, name, details, price and ‘Add to cart’ button.

Here is the snapshot of the product detail page. We have full size image on top left corner, the description at the bottom, then the product name, price and an ‘Add To Cart’ button on the right.

There’s one more important thing about the ‘Add To Cart’ button. We only show this if we still have this product in stock. After we run out of this product we just display ‘Out Of Stock’.

Fig 4.4: Product Details Page

4.2.5 Shop: Cart Page

If a registered user click on the ‘Add To Cart’ button on the product detail page or latest product module or featured product module one will be redirected to the shopping cart page ( cart.php ). For example if any one want to buy “Dell Inspiron 11z” then he or she will need to go: cart.php?action=add&p=19.

Here is the list of product which is carted. Now if there are already items in the cart we have presented it to the customer like shown below. Each row shows the product thumbnail name, unit price, quantity and sub total. On each row we have a delete button so the customer can easily remove the item from cart.

Since we have “action=add” in the query string the addToCart() function will be called. In short the function will do these:

1. Check if the product exist in database
2. Check if we still have this product in stock ( quantity > 0 )
3. If the product is already in cart increase the quantity
4. If not add the product to cart

If the user comes to this page and the shopping cart is still empty there is a chance that user goes there by accident or feeling confused. So now we present her with simple instruction on how to buy stuff in our shop. “Your shopping cart is empty”

Continue shopping link goes to home page. And proceed to checkout link goes to checkout page.

Fig 4.5: Cart Page – view option

When a user updates the quantity then cart table will update in database. And also update every price portion in the cart view.

Fig 4.5: Cart Page – update quantity option

When a user delete the cart item then it delete from database.

Fig 4.6: Cart Page – delete option

After adding the product and removing all abandoned carts we don’t send the customer to the shopping cart page. Customer will stay on the product detail page. But this time the mini cart on the right side will show the product in his/her shopping cart.

It also shows the total amount after the shipping cost. If the shopping cart is still empty there so now we present “Your shopping cart is empty”

Fig 4.7: Mini Cart Page

This behavior (sending the customer to product page after adding a product) is actually depends on what kind of shop we’re running. If it is a shop where people usually buy more than one kind of product then its better then we should skip showing the shopping cart page and display the product page. But if people on this kind of shop usually only buy one product in a shopping session then it’s best if we display the shopping cart page.

4.2.6 Shop: Checkout Page

There are three steps to complete the checkout

1. Fill out the shipping and payment info and select the payment method.
2. Confirm the ordered items, shipping and payment info and the payment method.
3. Save the order information to the database. If the payment method is COD (cash on delivery ) go straight to the thank you page. If the customer chooses to pay with paypal submit the payment info to paypal server.

Step : 1

Here the customer fills out his shipping address. It is required on every input field except Address2 field.

Fig 4.8: Checkout Page Step 1 – Shipping Information

Also here is the customer fill out his payment address. It is required on every input except Address2. If the user shipping info and payment info are same then check the Same as shipping information checkbox. Otherwise customer manually put the payment information.

Fig 4.9: Checkout Page Step 1 – Payment Information

PayPal : www.paypal.com

This payment method allows automatic Order Status Updates. There’s a file which is called notify.php. The user will need to enter the appropriate URL (web address) for the script file in PayPal’s control panel. When a customer finishes the Payment, the PayPal server connects to this script on the user server. When the transaction AND the payment have been successful, the order status is automatically updated to the status of user have set in the PayPal configuration form.

Cash on delivery

No business logic needed for this kind of payment.

Cash on delivery, also known as COD, is a method of payment for goods received, which will be delivered. Payment is given at the tim