Chongqing University of Science and Technology: Graduation Project Design of Website For Online Shopping

Chongqing University of Science and Technology
Graduation Project Design of Website for

Online Shopping
Title Design of Website for Online Shopping
College School of Intelligent Technology and Engineering
Major Computer Science and Technology
Student Name Zarafshan Arfan
Student Number 2018490075
Supervisor Chengyuan Chen
Reviewer
14 / 05 / 2022
Declaration of originality of students' graduation project design of website
for online shopping
I declare with my reputation: the submitted graduation project design of website for online
shopping is the design shopping website work and results obtained under the guidance of the
supervisor. The project design of website for online shopping quotes literature, data, drawings
and materials from other people have been clearly marked, the conclusions and results in the
design of website for online shopping are completed independently by myself, and do not
include the achievements of others and the use of their materials for obtaining degrees or
certificates from Chongqing University of Science and Technology or other educational
institutions. The participant who work with me have clearly stated in the paper and expressed
gratitude for any contributions to this design shopping website.
Author: Zarafshan Arfan
14 / 05 / 2022
CQUST Undergraduate Graduation Project Abstract
Abstract
The Online Shopping application is a web-based tool for online shops. This application's major
goal is to make it interactive and simple to use. It would facilitate product searching, browsing,
and selection. It has a powerful search engine that allows users to look for goods that are tailored
to their needs. It includes a shopping cart for easy checkout. The user may then read all of the
product's specifications and buy it with just one click. They may also follow the progress of the
order. The buyer's decision-making process has altered dramatically in recent years. Buyers
conduct extensive research online before to speaking with a salesperson. Rather of visiting
traditional brick-and-mortar businesses, buyers are increasingly making direct purchases online
through websites and via their cellphones. Thanks to the internet, conducting business has never
been easier or faster. It has resulted in a transformation in how people do business, with e-
commerce, or online purchasing, becoming increasingly popular throughout the world.
Keywords:
Online Shopping, E-commerce website, Shopping cart, Online sale/purchase website, Shopping
web application
I
CQUST Undergraduate Graduation Project 摘要
摘要
Abstract in Chinese…
在线购物应用程序是用于在线商店的基于 Web 的工具。此应用程序的主要目标是使其具有交互性
且易于使用。它将促进产品搜索、浏览和选择。它有一个强大的搜索引擎，允许用户寻找适合他们
需求的商品。它包括一个购物车，方便结账。然后，用户可以阅读所有产品的规格并一键购买。他
们也可以跟踪订单的进度。近年来，买方的决策过程发生了巨大变化。买家在与销售人员交谈之前
会在网上进行广泛的研究。买家不再访问传统的实体店，而是越来越多地通过网站和手机直接在线
购买。多亏了互联网，开展业务从未如此简单或快捷。它导致人们开展业务的方式发生了转变，电
子商务或在线购买在世界范围内变得越来越流行。
关键词：
在线购物、电子商务网站、购物车、在线销售/购买网站、购物网络应用程序
II
CQUST Undergraduate Graduation Project Contents
Table of Contents
Abstract ...................................................................................................................................... I
摘要 ........................................................................................................................................... II
01 Introduction ......................................................................................................................... 1
1.1 Chapter Overview ......................................................................................................... 1
1.2 Background ................................................................................................................... 1
1.3 Statement of Problem .................................................................................................... 1
1.4 Aim of Project ............................................................................................................... 1
1.5 Goal ............................................................................................................................... 2
1.6 The application's necessity ............................................................................................ 3
1.7 Project Scope ................................................................................................................. 3
1.8 Platform Specifications – Deployment ......................................................................... 4
1.9 Chapter Summary .......................................................................................................... 4
02 Analysis ................................................................................................................................ 5
2.2 Information Gathering ................................................................................................... 5
2.3 System Feasibility ......................................................................................................... 6
2.3.1 Economic Feasibility ........................................................................................... 6
2.3.2 Technical Feasibility ........................................................................................... 6
2.3.3 Behavioral Feasibility ......................................................................................... 6
2.4 System requirements ..................................................................................................... 6
2.4.1 Non-functional requirements............................................................................... 6
2.4.2 Functional requirements ...................................................................................... 7
2.5 Chapter Summary .......................................................................................................... 8
03 Design ................................................................................................................................... 9
3.2 Introduction ................................................................................................................... 9
3.3 Input and Output Design ............................................................................................... 9
3.3.1 Input Design ........................................................................................................ 9
3.3.2 Output Design ..................................................................................................... 9
3.4 Database Design ............................................................................................................ 9
3.5 System Tools ............................................................................................................... 11
3.5.1 Front End ........................................................................................................... 11
3.5.2 Back End ........................................................................................................... 11
III
CQUST Undergraduate Graduation Project Contents
3.6 ER Diagram ................................................................................................................. 12

3.7 Data Flow Diagram ..................................................................................................... 13
3.8 Chapter Summary ........................................................................................................ 16
04 Implementation.................................................................................................................. 17
4.1 Chapter Overview ....................................................................................................... 17
4.2 User Interface .............................................................................................................. 17
4.2.1 Homepage.......................................................................................................... 17
4.2.2 User Login/Registration Page ........................................................................... 19
4.2.3 Product Detail Page ........................................................................................... 20
4.2.4 Checkout Page ................................................................................................... 21
4.2.5 Track order Page ............................................................................................... 22
4.3 Coding ......................................................................................................................... 23
4.3.1 Search Function ................................................................................................. 23
4.3.2 Track Order ....................................................................................................... 25
4.4 Chapter Summary ........................................................................................................ 25
05 Testing ................................................................................................................................ 26
5.2 Homepage.................................................................................................................... 26
5.3 Search .......................................................................................................................... 26
5.4 Product Detail Page ..................................................................................................... 26
5.5 Cart .............................................................................................................................. 27
5.6 Track Order ................................................................................................................. 27
5.7 Results & Challenges .................................................................................................. 27
5.8 Chapter Summary ........................................................................................................ 29
06 Conclusion .......................................................................................................................... 30
6.2 Achievement of the project ......................................................................................... 30
6.3 Limitation of the System ............................................................................................. 31
6.4 Future Recommendation ............................................................................................. 31
6.5 Personal Reflection ..................................................................................................... 31
6.6 Concluding Remarks ................................................................................................... 32
References ............................................................................................................................... 33
Acknowledgment .................................................................................................................... 34
IV
CQUST Undergraduate Graduation Project 1 Introduction
01 Introduction
1.1 Chapter overview

This chapter will provide an introduction to the study by first introduction of project, Goal, and
scope of project.
1.2 Background
The trade of items or services using computer networks, such as the Internet, is known as E-
commerce (Wikipedia, 2015). Mobile commerce, electronic money transfer, supply chain
management, Internet marketing, online transaction processing, inventory management
systems, and automated data collecting systems are all used on electronic commerce websites.
E-commerce has been the norm for most businesses in recent years, spanning across cities and
nations. Where products and services may be ordered on their website and delivered through
many modes of transportation such as ship, automobile, or post office.
This project is an effort to create an online shopping website that can deliver products and
services on demand over the internet. This topic introduces the research work and the research
problem description, as well as the goal of the research. Investigate justification explains why
it is vital to research on this topic, as well as the scope and limitations of the study, which define
the work's boundaries. The glossary of terminology explains what each chapter involves.
1.3 Statement of the Problem

This research work was undertaken to solve the various challenges encounter in showcasing
and selling goods and other online shopping services to different client around the globe. Where
every companies can sell goods anywhere in the world. The window shopping is difficult
sometime. The design of a website is highly dependent and controlled by the targeted audience
and intended purpose, which means that the content needs to be mediated in a way that it will
be positively perceived by the recipient. In order to accomplish that, you also need to know
who the target may be.
1.4 Aim of Project

Aim of the This website for all intents and purposes is to mostly help computer science students
to particularly learn about the Web designing using PHP,JSP,CSS and HTML from their really
basic capabilities to basically build a very complete working website for shopping from scratch
in a particularly major way.
The definitely basic purpose of e-commerce literally is to for all intents and purposes reach as
fairly many people as basically possible at the really correct moment in order to actually boost
sales and profitability, fairly further showing how aim of the This website basically is to
basically help computer science students to really learn about the Web designing using
PHP,JSP,CSS and HTML from their kind of basic capabilities to literally build a really complete
working website for shopping from scratch, particularly contrary to popular belief. Shopping
website encompasses the buying and selling of items as well as the transmission of payments
and data through the shopping website, demonstrating how aim of the This website really is to
essentially help computer science students to really learn about the Web designing using
PHP,JSP, CSS and HTML from their kind of basic capabilities to particularly build a particularly
complete working website for shopping from scratch, or so they essentially thought.
1
1.5 Goal
Many people regard shopping to be a leisure pastime. Online shopping is no exception. This
application's purpose is to create a web-based interface for online shops. The technology would
be simple to use, making consumers' shopping experiences more enjoyable. Now a day,
everything is switching from a desktop environment to online websites. Most of the application
software is designed for distribution system and that’s why, websites is growing rapidly. To
capture the global market through this Internet, all the companies are adapting online shopping
website. Recall that online shopping is a form of electronic commerce whereby consumers
directly buy goods or services from a seller over the Internet from their website .The main goal
of this Project is to develop online shopping website which can be used for a particular
organization. A successful shopping website design services must have the abilities to give an
appealing look to the portal through shopping custom design, scalable shopping web site
development for easy future updates, strong. The objective of this project is to ensure that
features. This application's purpose is to
 To develop an easy to use web based interface where users can search for products,
view a complete description of the products and order the products.
 A search engine that provides an easy and convenient way to search for products
specific to their needs. The search engine would list a set of products based on the
search term and the user can further filter the list based on various parameters.
 A Shopping cart in which user can see all his order which he want to buy.
 Drag and Drop feature which would allow the users to add a product to or remove a
product from the shopping cart by dragging the product in to the shopping cart or out
of the shopping cart.
 A user can view the complete specification of the product along with various images
and also view the customer reviews of the product. They can also write their own
reviews.
1.6 The application's necessity

There are several commercial Online Shopping websites that provide a diverse range of items
geared to the shopping preferences of a diverse range of clients. Thousands of items are offered
under numerous categories on these internet marketplaces.
Problems
 The basic problems with the existing systems are the non-interactive
environment they provide to the users.
 The use of traditional user interfaces which make no detail about products.
 A search engine that would display the results.
 Use of traditional and non-user friendly cart interfaces that are hard to use
2
Solutions
 Provide Interactive interface through which a user can interact with different
areas of application easily.
 A search engine that provides an easy and convenient way to search for
products specific to their needs. The search engine would list a set of products
based on the search term.
 Provide Drag and Drop feature thereby allowing the user to add products to
or remove products from the shopping cart by dragging the products in to or
out of the shopping cart
 Display all detail about product so user can check description before buy it.
1.7 Project Scope

This technique may mostly kind of be used in any business in the neighborhood, as well
as global branded stores with kind of definitely retail outlet networks in a subtle way in
a fairly big way. The system suggests a facility that can really mostly receive orders 24
hours a day, seven days a week, and a home delivery system that can mostly actually
satisfy clients in a subtle way, demonstrating that the system suggests a facility that can
really kind of receive orders 24 hours a day, seven days a week, and a home delivery
system that can mostly satisfy clients in a subtle way, which kind of is fairly significant.
If stores definitely actually provide an internet fairly sort of portal via which consumers
can purchase conveniently from anywhere, they will not particularly for all intents and
purposes lose clients to popular online stores like for all intents and purposes for all
intents and purposes Flip cart or eBay, or so they specifically essentially thought in a
particularly major way. The application really generally is instantly accessible and
constantly available because it specifically literally is available on a Smartphone,
demonstrating that the application particularly definitely is instantly accessible and
constantly available because it basically generally is available on a Smartphone in a
subtle way in a very major way. The current system can be extended to allow the users to
create accounts and save products in to wish list.
 The users could subscribe for price alerts which would enable them to receive
messages when price for products fall below a particular level.
 The current system is confined only to the shopping cart process. It can be
extended to have a easy to use check out process.
 Users can have multiple shipping and billing information saved. During
checkout they can use the drag and drop feature to select shipping and billing
information.
3
1.8 Platform Specifications – Deployment
Hardware
 Processor P IV
 RAM 250 MB
 Minimum Space Required 100 MB
 Display 16 bit color
Software
 Operating Environment Win 2000/XP/7/8
 Platform Visual Studio
 Database MYSQL
 Xampp Server
 Web Browser
1.9 Chapter Summary

This Chapter detailed about a fairly brief introduction, which specifically is quite
significant. This chapter includes examples of systems that really are directly linked to
this project, as well as very general information on requirement gathering and
development processes, which essentially is fairly significant. The following chapter
begins the analytical process by generating the system's requirements, so this Chapter
detailed about a particularly brief introduction, generally contrary to popular belief.
4
02 Analysis
2.1 Chapter Overview
This chapter will cover project analysis, its relevance, different types of project analysis,
and how to use the correct tools to accomplish it.
2.2 Information Gathering

Because the application's purpose is to be simple to use and engaging, substantial research
was conducted to learn about the demands and habits of diverse users. The application's
operation is made simple and straightforward for the end user.
Users are divided into two groups depending on their understanding of the items that best
suit their needs. They may be divided into two groups: users who know what product will
meet their needs and users who must figure out what product will meet their wants. Users
who are familiar with the product should be able to locate it with a single click. Such
people can use the product name as a search phrase to find the product. Users that need
to locate a product that meets their needs can use a search keyword to obtain a list of
items, and then filter the results using factors such as product type, manufacturer, and
price range, platform supported etc.
Users should be able to see the entire product specification as well as multiple photos.
They should be able to print product specs or send the product page to friends through
email.
To make the shopping cart more user-friendly, the user should be able to drag and drop
products into the basket. The contents of a shopping cart should be editable by the user.
They should be able to change the amounts of things in the cart as well as delete items
from the cart. By dragging and dropping the product outside the shopping cart, the user
should be able to remove it from the cart.
The application can be made interactive by pop up messages when a product has been
dropped in to the shopping cart or out of the shopping cart. The user can be notified if the
cursor enters a drop area and the object that could be dropped. Also users are impatient
making it important to load pages soon.
Other than this, I did a lot of research on various other methods of building this
application which and was able to incorporate a few stronger features into the application.
The tools and controls used in the application are recommended ASP.NET controls and
AJAX Toolkit controls which improves the navigation and usability and interactivity.
2.3 System Feasibility

The system feasibility can be divided into the following sections:
2.3.1 Economic Feasibility

The project is economically feasible as the only cost involved is having a computer with
the minimum requirements mentioned earlier. For the users to access the application, the
only cost involved will be in getting access to the Internet.
5
2.3.2 Technical Feasibility

To deploy the application, the only technical aspects needed are mentioned below:
Operating Environment Win 2000/XP
Xampp Controller
Database MYSQL Server
For Users:
Internet Browser
Internet Connection
2.3.3 Behavioral Feasibility

The application requires no special technical guidance and all the views available in the
application are self-explanatory. The users are well guided with warning and failure
messages for all the actions taken.
2.4 System requirements

The website specification document supplied to a developer at the start of the project is based
on functional and non-functional requirements.
2.4.1 Non-functional requirements

The how of your website is non-functional? They are system quality qualities that shape the
user experience and suggest some broad, abstract product expectations. Non-functional needs
can be derived from a collection of functional requirements and executed as a collection of web
features.
Efficiency requirement
When an online shopping cart application implemented customer can purchase product in an
efficient manner.
Reliability requirement
The system should provide a reliable environment to both customers and owner. All orders
should be reaching at the admin without any errors.
Usability requirement
The web application is designed for user friendly environment and ease of use.
Implementation requirement
Implementation of the system using CSS and HTML in front end with PHP as back end and it
will be used for database connectivity. And the database part is developed by MYSQL.
Responsive web designing is used for making the website compatible for any type of screen.
Delivery requirement
The whole system is expected to be delivered in four months of time with a weekly evaluation
by the project guide.
6
2.4.2 Functional requirements

It's all about your system store's functionalities and processes that allow a user to take action
on the site. They may be used as a single website feature or as the foundation for the entire
software development process.
User
User is a person or visitor who access website for buying product.
User login
This feature used by the user to login into system. A user must login with his user name and
password to the system after registration. If they are invalid, the user not allowed to enter the
system.
Functional requirement
- Username and password will be provided after user registration is confirmed.
- Password should be hidden from others while typing it in the field
Register new user

A new user will have to register in the system by providing essential details in order to place
order or checkout the products in the system.
- System must be able to verify and validate information.
- The system must encrypt the password of the customer to provide security.
Purchasing an item
The user can add the desired product into his cart by clicking add to cart option on the product.
He can view his cart by clicking on the cart button. All products added by cart can be viewed
in the cart. User can remove an item from the cart by clicking remove. After confirming the
items in the cart the user can submit the cart by providing a delivery address. On successful
submitting the cart will become empty.
- System must ensure that, only a registered customer can purchase items.
Admin
Admin is system controller person who control all system in the back end. Admin is responsible
for add product or making order complete and any other changes in system.
An Admin is considered as a staff who can manage orders for the time being. As a future update
admin may give facility to add and manage his own products. Admin can reduce the work load.
He can manage users and manage products. He can also check the orders and edit profile.
Functional requirement, The system must identify the login of a admin
Following are some feature which admin can do:
Manage user
The administrator can add user, delete user, view user and block user. He can check the all info
about user
Manage products
The administrator can add product, delete product and view product.
Manage orders
The administrator can view orders and delete orders.
7
Functional requirements
-The system must identify the login of the admin.
-Admin account should be secured so that only owner of the shop can access that account
2.5 Chapter Summary

The system's requirements and the development process that will be utilized throughout the
project have just been covered in this chapter. The system's design is explored in the next
chapter.
8
CQUST Undergraduate Graduation Project Acknowledgements
03 Design
This chapter will concentrate on the system's design, with diagrams used to graphically depict
various aspects of the application.
3.2 Introduction
The detailed execution of the workable system is the emphasis of this phase. It focuses on
design translation. Performance specifications to specifications. The two phases of system
design are logical design and physical design.
The analyst specifies inputs (sources), outputs (destinations), databases (data stores), and
operations (data flows) in a format that fits the user's needs during the logical design phase. The
analyst also defines the user's requirements at a level that dictates the information flow into and
out of the system, as well as the data resources. Data flow diagrams and database design are
used to create the logical design. Physical design or coding comes after the physical design.
Physical design creates the working system by specifying the design standards, which detail the
system's functionality. Exactly what the candidate system must do. The programmers write the
necessary programs that accept input from the user, perform necessary processing on accepted
data and produce the required report on a hard copy or display it on the screen
3.3 Input and output design
3.3.1 Input design

The connection that connects the information system to the world of its users is input design.
Determine the inputs, validate the data, minimize data entry, and give a multi-user facility are
all part of the input design. The most prevalent source of data processing failures is inaccurate
inputs. Input design can be used to control the errors made by data entry operators. In the input
design, user-generated inputs are translated to a computer-based format. Data is collected and
arranged into groupings that are comparable. Following that, the proper input media for
processing is chosen. All input data is checked, and if any data violates any requirements, a
notification is displayed to the user. If the data meets all of the criteria, it is moved to the
database's proper tables. For this goal, a user-friendly and simple-to-use page has been created.
When exceptions arise, the design ensures that consumers receive suitable notifications.
3.3.2 Output design

The most essential and immediate source of information for the user is computer output.
Because the output must be efficient, the output design step is particularly crucial. A user-
friendly and efficient output design increases the system's interaction with the user and aids
decision-making. Allowing the user to see a sample screen is critical since the user is the final
arbiter of output quality. The specified notifications are the system's output module.
3.4 Database Design

Databases are data repositories that are utilized in software systems. The information is kept in
tables within the database. Several tables are constructed in order to manipulate the data for the
system. A database's two most important settings are
9
 Primary Key
 Foreign Key
Primary Key
A primary key is the column or columns that contain values that uniquely identify each row in
a table. A database table must have a primary key for Option to insert, update, restore, or delete
data from a database table.
Foreign Key
A foreign key is a column or group of columns in a relational database table that provides a link
between data in two tables. It acts as a cross-reference between tables because it references the
primary key of another table, thereby establishing a link between them.
With PHP, you can connect to and manipulate databases. MySQL is the most popular database
system used with PHP.
 MySQL is a database system used on the web

 MySQL is a database system that runs on a server
 MySQL is ideal for both small and large applications
 MySQL is very fast, reliable, and easy to use
 MySQL uses standard SQL
 MySQL compiles on a number of platforms
 MySQL is free to download and use
 MySQL is developed, distributed, and supported by Oracle Corporation
The data in a MySQL database are stored in tables. A table is a collection of related data, and it
consists of columns and rows.
Below is database design view
Figure 3.1 Database Diagram
10
Normalization
The process of structuring data in a database is known as normalization. This entails
constructing tables and defining links between them using rules aimed to preserve data while
also making the database more adaptable by removing redundancy and inconsistent reliance.
Data that is redundant costs disc space and causes maintenance issues. If data to be altered in
more than one area, the data must be modified in the same way in all places. If data is only
saved in the Customers table and nowhere else in the database, changing a customer's address
is significantly easier.
3.5 System Tools

The various system tools that have been used in developing both the front end and the back
end of the project are being discussed in this chapter.
3.5.1 Front End

HTML, CSS, JAVA SCRIPT and PHP are utilized to implement the frontend.
HTML (Hyper Text Markup Language)

HTML is a syntax used to format a text document on the web. HTML, or Hyper Text Markup
Language, is the standard markup language for texts that are intended to be viewed on a web
browser. Technologies such as Cascading Style Sheets (CSS) and programming languages
like JavaScript can help.
Web browsers accept HTML documents from a web server or locally stored files and convert
them to multimedia web pages. HTML initially featured cues for the document's look and
described the structure of a web page logically.
CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) is a style sheet language for specifying the appearance of a
document authored in a markup language like HTML. Along with HTML and JavaScript,
CSS is a key component of the World Wide Web.CSS was created to separate display from
content, including layout, colors, and fonts. This separation can improve content accessibility,
provide more flexibility and control in the specification of presentation characteristics, allow
multiple web pages to share formatting by specifying the relevant CSS in a separate.css file,
which reduces complexity and repetition in the structural content, and allow the.css file to be
cached to improve page load speed between the pages that share the file and its formatting.
Java Script
JS is a dynamic computer programming language. It is most commonly used as part of web
browsers, whose implementations allow client-side scripts to interact with the user,
control the browser, communicate asynchronously, and alter the document content
that is displayed. Java Script is used to create pop-up windows displaying different alerts
in the system like “User registered successfully”, Or” Product added to cart” etc.
3.5.2 Back End

The back end is implemented using MySQL which is used to design the databases. Back-end
development is all about making these apps render server-side. But it's a bit more involved
than that. While the previous statement holds true, back-end developers also create services
that process business logic and access other resources such as databases, file servers, cloud
services and more
11
MySQL
MySQL is the world's second most widely used open-source relational database management
system (RDBMS). The SQL phrase stands for Structured Query Language. MySQL is an open
source relational database management system. For WordPress sites, that means it helps you
store all your blog posts, users, plugin information, etc. It stores that information in separate
“tables” and connects it with “keys”, which is why it's relational.
3.6 ER Diagrams
Figure 3.2 Login
Figure 3.3 User Detail
Figure 3.4 Product Detail

12
Figure 3.5 Product Orders
Figure 3.6 Complete Diagram
3.7 Data flow diagram

A Data Flow Diagram (DFD) is a structured analysis and design tool that can be used for
flowcharting. A DFD is a network that describes the flow of data and
the processes that change or transform the data throughout a system. This
network is constructed by using a set of symbols that do not imply
any physical implementation. It has the purpose of clarifying system
requirements and identifying major transformations. So it is the starting point of the design
phase that functionally decomposes the requirements specifications down to the lowest level
of detail. DFD can be considered to an abstraction of the logic of an
information-oriented or a process-oriented system flow-chart. For these reasons
DFD’s are often referred to as logical data flow diagrams.
External entity
An external entity is a source or destination of a data flow. Only those entities which originate
or receive data are represented on a data flow diagram. The symbol used is a rectangular box.
13
Process
A process shows a transformation or manipulation of data flow within the system. The symbol
used is an oval shape.
Dataflow
The data flow shows the flow of information from a source to its destination. Data flow is
represented by a line, with arrowheads showing the direction of flow.
Information always flows to or from a process and may be written,
verbal or electronic. Each data flow may be referenced by the processes
or data stores at its head and tail, or by a description of its contents.
Data store
A data store is a holding place for information within the system: It is represented by an open
ended narrow rectangle. Data stores may be long-term files such as sales ledgers, or may be
short-term accumulations: for example batches of documents that are waiting to be processed.
Each data store should be given a reference followed by an arbitrary number.
Login DFD
Figure 3.7 Login data flow diagram
14
Registration DFD
Figure 3.8 Registration DFD
Admin DFD
Figure 3.9 Admin DFD
15
3.8 Chapter Summary

This chapter really included kind of several graphical depictions of the system's design, which
mostly is fairly significant. The system\'s implementation basically is detailed in the definitely
next chapter in a subtle way.
16
4 Implementation

This chapter describes the implementation process, which specifically is quite significant. The
frontend component's implementation is covered first, or so they specifically thought.
Following that, a number of backend features definitely were investigated and evaluated,
demonstrating that following that, a number of backend features actually were investigated
and evaluated, fairly contrary to popular belief.
4.2 User Interface

UI really stands for ''User Interface', UI Design Process kind of is a composition of interface
animation, visual element, screen layout and content in a subtle way. Essentially it mostly is a
graphical layout of an app, showing how UI basically stands for \'User Interface\', UI Design
Process kind of is a composition of interface animation, visual element, screen layout and
content, which for the most part is fairly significant. In UI Design Process, we will design the
product according to the customer choice, demonstrating how in UI Design Process, we will
design the product according to the customer choice, which for all intents and purposes is
quite significant. UI specifically is a type of front end of website, showing how UI really is a
type of front end of website in a subtle way. We will actually give detail of following or so
they essentially thought:
 Homepage
 User Login/Registration Page
 Product Detail Page
 Check out Page
 Track Order Page
4.2.1 Homepage
A home page (or homepage) is the main web page of a website. The term may also refer to the
start page shown in a web browser when the application first opens. Below is the figure of
homepage we design.
The user may see the available products in a list. The user may search for products by typing a
search word into the top-right search textbox. The words "Search Terms" are watermarked on
this text box to indicate that this is the spot to input the search terms.
HTML, CSS, JS and PHP are used to design homepage of website. The user can easily
understand the structure of our page. It consist of a simple header in which user login, account
detail also cart detail and there is track order option also located in top right side. After
Header there is a Navigation Bar in which we design some category of products so user can
easily look what he want to buy. The main part consist on product list with there prices and
also there are some slider added in it.
17
Figure 4.1 Homepage

18
4.2.2 User Login/Registration Detail

The user credentials are typically some form of username and a matching password, and these
credentials themselves are sometimes referred to as a login (or logon, sign-in, sign-on).
User registration systems are screens, forms, or profile pages that request information from a
user to create a web-based account or profile. A user registration system generally asks a user
to create a username and password, and possibly answer other security questions as well.
Figure 4.2 User Login/Registration Page
19
4.2.3 Product Detail Page

By clicking on the product link, the customer may see the entire product description. This is
seen in the diagram below. The viewer may click on the enlarged image to open a pop-up
window with an even larger image.
Figure 4.3 Product Detail page

20
4.2.4 Checkout Page

By definition, a checkout page is the page(s) related to payment and shipping/billing details on
an ecommerce store. The checkout page gives customers the opportunity to enter payment
details and complete their order.
Figure 4.4 Checkout Page
21
4.2.5 Track Order Page

Order tracking page allows your customers to follow their orders from the moment their order
is placed until it is delivered to their homes, knowing in advance the estimated shipping and
delivery dates of the order.
Figure 4.5 Track Order
Figure 4.6 Order Tracking Detail page
22
4.3 Coding
Coding, sometimes called computer programming, is how we communicate with computers.
Code tells a computer what actions to take, and writing code is like creating a set of
instructions.
4.3.1 Search Function

The user may search for products by typing a search word into the top-right search textbox.
The words "Search Terms" are watermarked on this text box to indicate that this is the spot to
input the search terms
1. <div class="search-result-container">
2. <div id="myTabContent" class="tab-content">
3. <div class="tab-pane active " id="grid-container">
4. <div class="category-product inner-top-vs">
5. <div class="row">
6. <?php
7. $ret=mysqli_query($con,"select * from products where productName like
'$find'");
8. $num=mysqli_num_rows($ret);
9. if($num>0)
10. {
11. while ($row=mysqli_fetch_array($ret))
12. {?>
13. <div class="col-sm-6 col-md-4 wow fadeInUp">
14. <div class="products">
15. <div class="product">
16. <div class="product-image">
17. <div class="image">
18. <a href="product-
details.php?pid=<?php echo htmlentities($row['id']);?>"><img src="ass
ets/images/blank.gif" data-
echo="admin/productimages/<?php echo htmlentities($row['id']);?>/<?php
echo htmlentities($row['productImage1']);?>" alt="" width="200" heigh
t="300"></a>
19. </div>
20. </div>
21.
22.
23. <div class="product-info text-left">
24. <h3 class="name"><a href="product-
details.php?pid=<?php echo htmlentities($row['id']);?>"><?php echo htm
lentities($row['productName']);?></a></h3>
25. <div class="rating rateit-small"></div>
26. <div class="description"></div>
27.
28. <div class="product-price">
29. <span class="price">
30. Rs. <?php echo htmlentities($row['productPrice']);?> </span>
31. <span class="price-before-
discount">Rs.<?php echo htmlentities($row['productPriceBeforeDiscount'
]);?></span>
23
32.
33. </div>
34.
35. </div>
36. <div class="cart clearfix animate-effect">
37. <div class="action">
38. <ul class="list-unstyled">
39. <li class="add-cart-button btn-group">
40. <?php if($row['productAvailability']=='In Stock'){?>
41. <button class="btn btn-primary icon" data-
toggle="dropdown" type="button">
42. <i class="fa fa-shopping-cart"></i>
43. </button>
44. <a href="category.php?page=product&action=add&id=<?php echo $ro
w['id']; ?>">
45. <button class="btn btn-
primary" type="button">Add to cart</button></a>
46. <?php } else {?>
47. <div class="action" style="color:red">Out of Stock</div>
48. <?php } ?>
49.
50. </li>
51.
52. <li class="lnk wishlist">
53. <a class="add-to-
cart" href="category.php?pid=<?php echo htmlentities($row['id'])?>&&ac
tion=wishlist" title="Wishlist">
54. <i class="icon fa fa-heart"></i>
55. </a>
56. </li>
57.
58.
59. </ul>
60. </div>
61. </div>
62. </div>
63. </div>
64. </div>
65. <?php } } else {?>
66.
67. <div class="col-sm-6 col-md-
4 wow fadeInUp"> <h3>No Product Found</h3>
68. </div>
69.
70. <?php } ?>
24
4.3.2 Track Order
1. <div class="body-content outer-top-bd">

2. <div class="container">
3. <div class="track-order-page inner-bottom-sm">
4. <div class="row">
5. <div class="col-md-12">
6. <h2>Track your Order</h2>
7. <span class="title-tag inner-top-
vs">Please enter your Order ID in the box below and press Enter. This
was given to you on your receipt and in the confirmation email you sho
uld have received. </span>
8. <form class="register-form outer-top-
xs" role="form" method="post" action="order-details.php">
9. <div class="form-group">
10. <label class="info-title" for="exampleOrderId1">Order ID</label>
11. <input type="text" class="form-control unicase-form-
control text-input" name="orderid" id="exampleOrderId1" >
12. </div>
13. <div class="form-group">
14. <label class="info-
title" for="exampleBillingEmail1">Registered Email</label>
15. <input type="email" class="form-control unicase-form-
control text-input" name="email" id="exampleBillingEmail1" >
16. </div>
17. <button type="submit" name="submit" class="btn-upper btn btn-
primary checkout-page-button">Track</button>
18. </form>
19. </div>
4.4 Chapter Summary

The important parts of the implementation stage were explored in this chapter. The results are
documented in the next chapter, which also shows how the system works.
25
05 Testing

Testing is a process of running with intent of finding errors in software. Software testing assures
the quality of software and represents final review of other phases of software like specification,
design, code generation etc. In this chapter we will write detail about it.
5.2 Homepage
Homepages of retail sites are busy. They have a lot going on. But almost all of them have a
Homepage. There is the kind of the clickable image (a slideshow of sorts) that occupies the
majority of the page.
Test Pass/Fail
Going to auto scroll of sliders Pass
Rest of the content be viewed Pass
render the same way in different browsers Pass

and different screen resolutions
Taking the right page and right deal Pass
Table 1.1 Test Homepage
5.3 Search
Search algorithms are very important for the success of a retail site because we can’t always
place what the users want to see right in front of their eyes.
Test Pass/Fail
Search Based on Product name Pass
Search Result is Relevant Pass
Search validation Pass
Search bar available on all page Pass
Table 1.2 Search Function
5.4 Product Details Page

Once a user finds a product either through search or by browsing or by clicking on it from the
homepage, the user will be taken to the product information page.
26
Test Pass/Fail
Price of the product shown Pass
Product specifications Pass
Reviews Shown Pass
In-stock/out-stock Pass
Table 1.3 Products

5.5 Cart
This is the penultimate stage before the user commits to the purchase
Test Pass/Fail
Add items to the cart and continue shopping Pass
All items and their totals should be displayed Pass

in the cart
A user can add more items to the cart- total Pass
should reflect the same/Update the contents
added to the cart- total should reflect that too
Remove items from the cart
Proceed to checkout Option working Pass
Table 1.4 Cart

5.6 Track order
Test Pass/Fail
Track Order with Order id Pass
Show the order Status Pass
Table 1.5 Track order
5.7 Results & Challenges

The application can actually be used for any Ecommerce application in a definitely major
way. It mostly is basically easy to use, since it uses the GUI provided in the user dialog, which
mostly is quite significant. User friendly screens literally are provided in a subtle way. The
application kind of is kind of easy to use and interactive making online shopping a
recreational activity for users, which specifically is fairly significant. It has been thoroughly
tested and implemented, showing how it literally is basically easy to use, since it particularly
uses the GUI provided in the user dialog in a big way.
Challenges
To remain on Safer Edge and deliver the desired results to the client you need to shift the
focus on quality and performance of your E-commerce website while shrinking timeline as
much as possible
27
In general Automation Testing starts by selecting right test automation framework which
directly impacts on the result of the test automation project. The framework must include the
test scripts and the scenarios of various automated processes.
Based on the framework, the testers can easily execute the tests and obtain relevant results by
generating test reports. But selecting right tool to automate E-commerce Website depends on
many key parameters. It is always important to compare the available tools based on key
parameters like features, performance, extensibility, licensing cost, maintenance cost, and
Training and support.
You must take advantage of many open source test automation tools to automate more testing
efforts without investing additional funds.
 E-commerce websites are much entangled in nature, automating each action is not
possible because we cannot assume the nature of the customer.
 Continuous changes for e-commerce demands Regression so run regression test suit
every day to keep track the effects of change.
 Always go with Automating Integration type of scenarios that should cover from
selecting a link on home page till checkout and payment gateway page. Hereby, you
can at least cover maximum user experience with E-commerce Website, so that
adequate testing can be achieved by automating regression cycle.
 Never waste time automating on the unstable application. A simple change will affect
your whole test suits and you have to recreate it.
 Homepage of E-commerce Website is very important and contents many information

and 1000 of links associated with each product and these links grow up every day as
new offers or product is added to a page. So before proceeding to regression testing its
best to verify every link in page by using HTTP status code.
 When you are executing test scripts on a different browser at the same time. If a
product is added to shopping cart or removed that information should be reflected in
other browsers too.
 When you running test parallel this will obviously fail your script in such scenario you
have to periodically refresh your page to retain cart information. In real-time you may
come across this scenario such as a user may sometimes use mobile e-commerce app
and also a mobile e-commerce web application.
 Don’t neglect to verify each product details and pricing details whether it is 10
products or 1000 products it should be as per the seller requirement. This is the phase
where you can make or break a customer slight mistake will lead to a big loss.
 Create yourself a lot of interrupted scenarios that usually user come across design your
script very robust so that your script affords it and still run and pass the script.
 For Example, you stored all the card information and clicked on submit due to low
charge or network issue application stuck. In this case, a user is notified about his
28
transaction status through email and message to phone you should validate this email
or message in a test script.
 Web element of E-commerce website keeps changing so always create manual path.
Some Web Elements attributes will be the same so there will be no unique way of
distinguishing in such scenario use contains () method of paths or scroll into view.
 Automate Accessibility Testing by keyboard actions without using mouse action you
definitely will come across some of the problems and fix it. This plays a significant
role in user interface testing.
 Tester should be carefully designed the scenario and add initiate checkpoint and insert
login script whenever it is required.
 Maintain different scripts for a different mode of payment to avoid confusion. Check if
what happens if an order is canceling after payment.
 Performance testing in other hand plays a very crucial role. The factors you need to
test here request per second, Transaction Per minute, Execution per click, a Response
time of page load, duration of the task, Length of time between click and page display
and DNS lookup.
 Security Testing is where customer trust is gained on which e-commerce is built so

here you have to spend a lot of time testing on DENIAL OF SERVICE ATTACK, User
Account security, Data confidentiality, content security, credit card security, disable
non-essential services. SSL Certificate Validation.
 Automating Localization testing is very challenging in e-commerce because of

Compliance with accessibility standards to support multi-lingual markets and business
regions.
5.8 Chapter Summary

This chapter give a detail about testing of website with checking some functions.
29
06 Conclusion

This is essentially the final chapter of the project report in a big aspect. The project's overall
accomplishments are reviewed extensively in this chapter. Following that, it discusses the
system"s weaknesses, which are rather serious. Following that, it genuinely provides
suggestions for various system improvements, indicating that it mostly makes
recommendations for various system improvements, which is pretty significant. The chapter
truly comes to a conclusion with some final comments, which notably indicates how following
that, it really gives recommendations for different system enhancements, which literally is
rather substantial.
6.2 Achievement of the Project

The project went through a number of processes to deliver a full solution for an online definitely
retail website in an unobtrusive approach. As stated in Chapter 1.2, a specific set of objectives
was defined after a careful analysis of the project"s goal and research direction. All of the
project's activities were largely geared at achieving these goals in a big way. The prototype
software developed at the end of the project fulfilled these objectives in the following ways,
which for all intents and purposes is fairly significant.:
 Objective 01 was I was ecstatic to discover previously unpublished efforts for subtly
automating the item ordering operation. The technologies employed in web application
development are summarised below, sort of further demonstrating how I was ecstatic to
come across earlier efforts for automating the item ordering method, which is fairly
crucial.
 Objective 02 was making things sort of simple and really easy Check out form, pleased
with sort of simple form functionality very such as shipping address and fairly other
needed details in a particularly major way.
 Objective 03 was to provide an easy-to-use web-based interface where consumers could

browse for items, see detailed product descriptions, and place orders.
 Objective 04 was a search engine that allows users to quickly and easily find things that
meet their needs. The search engine would provide a list of items based on the search
word, which the user could then filter based on several factors.
 Objective 05 was a drag and drop feature that would allow customers to add or remove
products from the shopping basket by dragging the product into or out of the shopping
cart.
It took an unusually lengthy time to accomplish the task. Within the time constraints, it was
truly intended to incorporate as many features as genuinely feasible in a generally large style.
The Functional Requirements were met in a significant degree. Some typically non-functional
for the most part system demands have not been satisfied fundamentally in a subtle way. These
are undoubtedly the most important elements and carry the most weight, which is particularly
critical. Several needs are essentially not completed because of time restrictions, which is fairly
30
important. However, because they are relatively lower priority characteristics, their
disappearance would not have a substantial impact for all intents and purposes.
6.3 Limitations of the System

The technology also has certain drawbacks, which is quite significant. The system''s order cart
has basic functionality but does not offer extensive order cart customization options. In addition,
server side programming actually is used to handle validation and nearly all application
functionality. It places additional strain on the server, especially when the programme receives
a particularly large number of viewers. The for all intents and purposes basic function for
tracking orders is used, particularly contrary to popular belief. This constraint can be mitigated
by verifying data on the client side with client-side languages for all intents and purposes such
as JavaScript or HTML 5 in a subtle way. In addition, the order model has been established.
However, the controllers and functions for pushing data into the order table actually have not
been built in a sort of big way. As a result, the orders that for the most part have been placed
cannot be seen, contrary to popular belief.
6.4 Future Recommendations

In addition to the unfulfilled needs, there are more ways to truly improve the project. The user
acceptability testing respondents also offer some suggestions for improvement. Improvements
might include:
 Overcoming the limits listed in Section 6.3.

 Adding a secure payment system with several payment options.
 Adding order delivery tracking using a map.
 Managing client loyalty and discount vouchers.
 Transitioning the system to a progressive web application
 Create a mobile phone application.
6.5 Personal Reflection

I have gained some experiences and developed skills through the project. I also became aware
of some aspects which needs improvements.
This project aids in the comprehension of the development of an interactive web page and the
technology utilised to achieve it. The project's architecture, which contains a Data Model and a
Process Model, shows how the database is formed with multiple tables and how data is retrieved
and processed from the tables. The project's development has provided me with detailed
understanding of how PHP is utilised to create a website, how it connects to the database to get
data, and how the data and web pages are adjusted to present the user with a shopping cart
application.
31
6.6 Concluding Remarks

Using responsive design for the frontend is clearly the best way for a modern website. As for
the back end, I think using pure PHP was not the most efficient way to do, but it was a better
way for me to learn coding
32
References
[1] php.net. What is PHP. Date of Retrieval 12.05.2022,
http://php.net/manual/en/intro-whatis.php
[2] nlindia. Why Choose PHP Framework for E-Commerce Website. Date of Retrieval 12.05.2022,
http://www.nlindia.com/php-framework-ecommerce-website-development.html
[3] Wikipedia. Model–view–controller. Date of Retrieval 12.05.2022,
https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
[4] apachefriends. XAMPP. Date of Retrieval 12.05.2022,
https://www.apachefriends.org/index.html
[5] Wikipedia. Responsive web design. Date of Retrieval 12.05.2022,
https://en.wikipedia.org/wiki/Responsive_web_design
[6] justcoding. Responsive Web Design introduce. Date of Retrieval 12.05.2022,
http://justcoding.iteye.com/blog/1972890
[7] getbootstrap. Grid system. Date of Retrieval 12.05.2022,
https://getbootstrap.com/docs/4.0/layout/grid/
[8] w3school. W3.CSS Responsive Fluid Grid. Date of Retrieval 12.05.2022,
https://www.w3schools.com/w3css/w3css_grid.asp
[9] w3school. CSS Media Queries. Date of Retrieval 12.05.2022,
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
[10] Pinnaclecart Cart
https://www.pinnaclecart.com/blog/7-key-features-online-shoppers-demand-from-an-online-store/
[11] Methodology
https://www.digitaldesignsolutions.co/methodology/
[12] HTML Skills
https://www.tutorialspoint.com/html/index.htm
[13] HTML
https://www.codecademy.com/learn/learn-html
[14] CSS Skilss
https://web.dev/learn/css/
[15] Function Detail for shopping web
https://www.proteusthemes.com/blog/10-functionalities-that-every-e-commerce-store-needs-in-2019/
[16] Shopping website in Pakistan
https://www.stackoftuts.com/internet-marketing/top-15-online-shopping-sites-in-pakistan-2019/
33
Acknowledgements
Words cannot explain how grateful I am to my professor and University for its tremendous
patience and input. I certainly could not have gone on this path without the help of my
Supervisor, who kindly shared his knowledge and skills. This initiative would also not have
been feasible without the great support of my parents, which funded my study. I am also
thankful to my teachers and cohort members, particularly my class mates, for editing assistance,
late-night feedback sessions, and moral support. Thank you also to our advisor, research
assistants, and study participants who influenced and motivated me.
34

Chongqing University of Science and Technology: Graduation Project Design of Website For Online Shopping

Uploaded by

Copyright:

Available Formats

You might also like

Chongqing University of Science and Technology: Graduation Project Design of Website For Online Shopping

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chongqing University of Science and Technology: Graduation Project Design of Website For Online Shopping

Uploaded by

Copyright:

Available Formats

Chongqing University of Science and Technology

Graduation Project Design of Website for

Title Design of Website for Online Shopping

College School of Intelligent Technology and Engineering

Major Computer Science and Technology

Student Name Zarafshan Arfan

Student Number 2018490075

Supervisor Chengyuan Chen

Author: Zarafshan Arfan

3.6 ER Diagram ................................................................................................................. 12

1.1 Chapter overview

1.3 Statement of the Problem

1.4 Aim of Project

1.6 The application's necessity

 A search engine that would display the results.

1.7 Project Scope

1.8 Platform Specifications – Deployment

1.9 Chapter Summary

2.2 Information Gathering

2.3 System Feasibility

2.3.1 Economic Feasibility

2.3.2 Technical Feasibility

2.3.3 Behavioral Feasibility

2.4 System requirements

2.4.1 Non-functional requirements

2.4.2 Functional requirements

Register new user

2.5 Chapter Summary

3.3 Input and output design

3.3.1 Input design

3.3.2 Output design

3.4 Database Design

 MySQL is a database system used on the web

Figure 3.1 Database Diagram

3.5 System Tools

3.5.1 Front End

HTML (Hyper Text Markup Language)

CSS (Cascading Style Sheets)

3.5.2 Back End

Figure 3.2 Login

Figure 3.3 User Detail

Figure 3.4 Product Detail

Figure 3.5 Product Orders

Figure 3.6 Complete Diagram

3.7 Data flow diagram

Figure 3.7 Login data flow diagram

Figure 3.8 Registration DFD

Figure 3.9 Admin DFD

3.8 Chapter Summary

4.1 Chapter Overview

4.2 User Interface

Figure 4.1 Homepage

4.2.2 User Login/Registration Detail

Figure 4.2 User Login/Registration Page

4.2.3 Product Detail Page

Figure 4.3 Product Detail page

4.2.4 Checkout Page