A PROJECT ON Ecommerce Website
A PROJECT ON Ecommerce Website
A PROJECT ON
Ecommerce Website
B5IT
Prepared by:
Supervised by:
Dr. Hashem
21/10/2024
CHPTER 1: INTRODUCTION
1.1 Introduction
E-commerce (electronic commerce) is the buying and selling of goods and services, or the
transmitting of funds or data, over an electronic network, primarily the internet. These business
transactions occur either as business-to-business (B2B), business-to-consumer(B2C),
consumer-to-consumer or consumer-to-business.
Yemen is a developing country and Information Communication and technology are playing
their important roles in development of the country. By ecommerce we mean Buying and
selling of products or services over electronic systems such as the Internet and other computer
networks. In truth in Yemen, we have very less ways to pay our bills online or trade online.
But that does not mean we cannot. There are new players on Yemeni, ground like Bazzarry,
Open Market, Mahlati etc who wants to revolutionize the way Yemeni ecommerce field is
taken. With launch of these services many new start-ups can easily sell their products and
services online. These services have lots of potential and we hope it will succeed and bring a
change in the Yemeni ecommerce field. There are big and old player like Bazzarry.com in
Yemen which is already popular for its money transfer and online shops.
E-commerce is fast gaining ground as an accepted and used business paradigm. More and more
business houses are implementing web sites providing functionality for performing commercial
transactions over the web. It is reasonable to say that the process of shopping on the web is
becoming commonplace.
The objective of this project is to develop a general-purpose e-commerce store where any
product can be bought from the comfort of home through the Internet.
An online store is a virtual store on the Internet where customers can browse the catalog and
select products of interest. The selected items may be collected in a shopping cart. At checkout
time, the items in the shopping cart will be presented as an order. At that time, more information
will be needed to complete the transaction.
1
1.2 Problem Statement
In context of Yemen many organizations/ businesses are still doing physical shopping business
and they are trying and wanted to shift online so that they can provide their services. So, this
project will help them to provide these services online.
1.3 Objective
Ecommerce websites make an online business interactive with easy sharing of reviews &
timely surveys. Understanding your customers views about offerings and feedback system can
improve them in real-time.
1.To make Ecommerce website which will help the organization to operate them in
business-to-consumer(B2C) model.
1.4.1 Scope
1.4.2 Limitations
Though e-commerce offers many advantages to customers, business, society and nation, there
are still some areas of concern that need to be addressed.
2
1.5 Report Organization
Chapter 1: Describes Introduction of the project, Problem statement, Objective, Scope and
Limitation of the project.
Chapter 3: Describes System Analysis, Requirement Analysis, Design including Use Case
Diagram, Gantt Chart, Entity Relationship Diagram and Dataflow Diagram.
Chapter 5: Presents the Conclusion on Limitations and Future Enhancement are briefly
explained.
3
CHAPTER 2: BACKGROUND STUDY AND LITERATURE
REVIEW
In today's world the use and access to the internet is so high so most of the people are busy on
their own work so we have developed this module so that user can create and access to their
account through the use of internet and general concept and terminologies are mentioned
below.
• Create New Account: A user can create an account through registration process and
user can create an account when there is access of internet through this module.
• Login: After creation of account user can login through their detail and can access to
their e-commerce through this module
• Surfing: After successful login user can surf through different categories to buy
whatever they need.
• Add to cart: After finding the desired items you can add them to cart and proceed to
cash out,
• Payment: After adding items to cart, user can add or delete those items and proceed for
the final payment.
In a developing country like Yemen, e-commerce was initially started introduced in 1999, with
the concept of shipping presents and gifts, allowing Yemenis travelling overseas, particularly
in Saudi Arabia, to give presents to friends, loved ones and relatives. E-commerce though is
popular currently still is at the infancy stage currently in Yemen whether it being B2B or B2C
e-Commerce. E-commerce marketplace such as Bazzarry, Open Market, , Mahlati are currently
present in Yemen which act as an online marketplace for merchants to communicate and sell
products. There are currently various online payment gateways available such as Al-kurimi,
M-Floos which are mobile wallets, Al-Qutibi, local bank payment used for making payments.
But people should have dollar account to make payment to merchants in foreign currency.
4
Mobile e-commerce is also growing popular now-a-days. Out of total population, 60% have
internet access and 95% out of those population will access through mobile Trade
Administration.
This shows increasing number of broadband users and people going online that results in more
potential online consumers. At present, people are moving to online business from traditional
approach. Also, there is increase in number of people purchasing online from ecommerce
providers such as online marketplace. We can take example of Bazzarry, established in 2018.
It is considered the most popular e-commerce marketplace currently in Yemen. Bazzarry has
been able to provide its services through website and mobile application. It supports payments
though Debit/Credit cards, and Al-kurimi (a mobile wallet for making online payment). So that
ecommerce business is a growing platform and has potential but has some challenges such as
security, payment gateways, transportation, manpower. But quality service and product is a
challenge .
5
Technology is covered almost all across the world. There are various available models for
describing the technology acceptance. One of them is Technology acceptance model, a tool
used for assessing new technology acceptance based on user perceptions. According to
Technology acceptance model, that explains two factors for accepting of computer system by
its intended users, the first is perceived usefulness and second is perceived ease of use. When
a technology is invented, the inventor believes that it is useful and user-friendly, but the
potential consumers may not embrace it.
6
CHAPTER 3: SYSTEM ANALYSIS AND DESIGN
Considering the fact that this project involves design and implementation of a software system
regardless that is web-based, it will be important to mention and consider some models used in
software development and deployment, some general models of software development are
namely:
The waterfall model fits the development of this website. The main aim of using this approach
is we can focus on each part of the model during development and come back to it if need be.
The project can easily de broken down into different parts based on this model.
This is the model that will be used to develop the E-Commerce system. However, feedback
loops will be allowed during the whole software development process. The model chosen for
this project has to favours two developers for a project. Because we are the only ones who are
going to implement this project. We find this model suitable for us to follow.
Waterfall methodology is used while building this website. This project has specific
documentation, fixed time, fixed requirements, well-understanding technology so in order to
build this system waterfall methodology can be properly utilized.
7
Fig 3.1: Waterfall model
8
3.1.1 Requirements
Requirement analysis is done so that the project gets the necessary features and will be easy
for analysing system. It is a key instrument used to determine the needs and expectations of a
new product. In this project requirements are categorized into two parts i.e. functional
requirements and non-functional requirements.
For any system, there are functional and non-functional requirements to be considered while
determining the requirements of the System.
I. Functional requirement
In this project the functional requirements are categorized into two different models i.e., User
Module and Admin Module. Under User Model user can easily use the features like
registration, login, viewing products, and adding products to cart. Whereas Admin Module
consists of using the system as an administrative which consists of features like managing
products. The Functional requirements in the project are mentioned below.
User Module:
Admin Module:
9
3.1.2 Use Case Diagram
A use case diagram is used in this project which will help to understand the dynamics of a
system, we need to use different types of diagrams. Use case diagram is one of them and its
specific purpose is to gather system requirements and actors a graphic depiction of interactions
among different elements in a system. From the diagram we can clearly see the two actors i.e.
Admin and user. The rectangle box is the system boundary and the Include is the necessary and
must be required in order to get access to the system. And the Extend is the add on and will
redirect the system. The main function used by Admin actor is that it must login into the system
and after login admin will be able to add items, view items, manage items, and be able to delete
items. On the other side User actor will must first register into system and then he will be
redirected to login page and user will be able to view items, order items and be able to use add
to cart feature.
A feasibility study is an evaluation and analysis of a project or system that somebody has
proposed. Following feasibilities were studied before building the system to see if the system
could be built with exact requirements in required time.
I. Technical Feasibility
In order to design this system, it uses existing technologies, software and hardware so there is
no technological hurdle to build this system.
• VS Code
• Firebase
• Apache [Xampp]
• Minimum Windows 10 required.
11
II. Economic Feasibility
Before the development of a system, the proposed system should be studied whether or not it
is within the budget estimated by the organization. The project that we are developing is within
the cost estimation of the organization. The project cost is less and no more burdens are needed.
The system development does not have any requirement of expensive hardware and software.
The platform are open sources and the resources required for the project are also open source.
Hence the project is said to be economically feasibility
These include the reliability, maintainability, usability, supportability. The proposed system is
operationally feasible as it is reliable for all type of user i.e., whether or not the user has the
knowledge of computer or not. The proposed system is supported for a small to large-scale
organization. It is simple and easy to use due to simple user interface and its operational
feasible.
12
3.1.4 Entity Relationship Diagram (ERD)
Entity Relationship Diagram (ERD) is used in this project as it helps to analyse in the database
and helps us to produce a well-designed database. It is considering a best practice to complete
ERD before implementing database. From the figure we can see that the diagram is categorized
in four types of entity set i.e., Registration, User, Admin, Products. And Registration has four
types of attributes i.e. Username, Password, Email, Phone no in which Email is primary key
and Registration have one to many Relationship with User. User have three attributes i.e., User
id, Username, and Password in which User id is primary key. User have many to one
relationship with Admin. Admin have three attributes i.e., Admin id, Name, and Password in
which Admin id is primary key. Admin have privilege to manage user. User also have one to
many Relationship with Products. Products have four attributes i.e. Product id, Product name,
Price, and Picture in which Product id is primary key and Picture is derived attribute as it
various on different products.
Data Flow Diagram (DFD) is used in this project as it helps to represents the information flow
for any process or system. It shows data inputs, outputs, storage points, and the routes between
each destination using defined symbols such as rectangles, circles, and arrows, as well as short
text labels. DFD are classified into three model i.e., level 0, level 1, and level 2. Each update
in level consists of expanding the model.
The Level 0 DFD Diagram for E-commerce Website contains the basic yet general process of
the system. Its purpose is to give the system analyst and programmers the basis for further
process. The reason why the DFD Level were done one-by-one is to see and avoid flaws while
still designing the diagram.
DFD Level 0 presents the main idea to be the basis for the proceeding levels. The basic idea is
represented by a single process consisting the main process, users and data. As we can see from
the diagram the DFD Level 0 represents website, Admin, and User. Admin Send the
Price and Product info to the website and receives Purchase details. Whereas Users send
purchase.
14
3.1.7 Data Flow Diagram Level 1
The DFD Level 1 Diagram for E-commerce Website provides a broad overview and greater
depth of DFD Level 0. The single process node from the context diagram is broken down into
sub processes to see the included data that may enter and exits system.
DFD Level 1 lists all of the included processes that make up the entire system. It is the
broadened context terms that consist of several processes derived from the main process. They
were also numbers to see that were all part of the single process from E-Commerce Website
DFD Level 0. As we can see from the diagram the DFD Level 1 represents Process 1.1 as
Manage customer information and flow the data to Admin Entity and Receives data from user.
Process 1.2 represents Manage product information and Receives data from both Admin and
User entity.
15
3.1.8 Data Flow Diagram Level 2
The Level 2 DFD for E-commerce Website portrays deeper concepts of DFD level 1. It can be
used to plan or record all of the specific/necessary information about how the system works.
After presenting the DFD levels 0 and 1, next to that is level 2. The DFD Level 2 was
considered as the highest abstraction of E-Commerce Website Data Flow Diagram. This level
is expected to have the complete and detailed illustration of the project.
DFD Level 2 represents the system’s specified modules as well as the data that flows between
them. These modules include the data flow, processes, external entities and the databases. Each
of them serves as the guide on how to build the system. As we can see database i.e., user and
product give data to 2.1 2.2 Admin and User. User sends Order info and gets Price info and
purchase update as well Admin sends price info, Products update and receives Orders.
16
3.2 System Design
Considering the fact that this project involves design and implementation of a software system
regardless that is web-based, it will be important to mention and consider some models used in
software development and deployment. System development is the process of creating or
altering systems, along with the processes, practices, models, and methodologies used to
develop them.
In the shopping website, users Interact with the system through a simple user Interface. The
shopping website uses three tier architecture. The data is collected from the users and stored in
the database through which the server provides cart detail to the user. In order to perform
transaction to the user, the system uses different database tables including different attribute
for each entity. user has a unique account number which makes them different from other users.
In this way our system architecture is designed which is an abstract view of the system.
A three-tiered architectural design to a business system consists of the Presentation Layer, the
Business/Service Layer, and the Data Layer. These layers are independent of each other and if
need be, can run on separate servers. Each tier is developed and maintained as independent
modules.
Presentation Layer
This is the entry point into a three-tiered architecture. This is the top level of the application. It
is most often referred to as the Graphical User Interface, or GUI for short. Other terms would
be client view or front-end view. From this level, content or data is sent to browsers in the form
of JSON and transformed into HTML, JavaScript, and CSS. Frameworks or libraries that are
leveraged in rendering or processing of this information are MVC Razor, Vue.js, React, and
Angular to name a few.
In fact, an entirely new career path for developers has been forged in this layer. If there's one
takeaway, the beginning and the end of processing requests or data in a three-tiered application
is in this layer.
17
Requests are usually in the form of objects that represent data that your application is wanting
to retrieve or save. For instance, you may be wanting to set up a new customer or you may be
wanting to get transaction history of what an existing customer has purchased through your
business or website.
Validation is also done in this layer to ensure that all required data elements that are needed to
process a request are present. If required data elements are missing, processing the request is
halted, and the user is notified what data is missing.
Business/Service Layer
This layer contains logic that will take the requests or objects that are sent from the Presentation
Layer and begin to use business rules or business logic to determine how to save or process
data. Examples of this would be the following:
• A customer logs into your eCommerce site to purchase products. Based on their order
history, you could have a business rule in place that automatically gives preferred
customer discounts or shipping rates. This would be for example a Customer Response
object.
• Your payments have different payment types, i.e. check, credit card, ACH, but they are
saved as transactions. Business rules or logic will take these different types and
transform them into a transaction object and pass them to the Data Layer for saving.
Transformation will always occur when creating, updating, or deleting data. They are
transformed or mapped to what are called Data Transformation Objects, or DTO’s for short.
These are data containers for moving data between layers. Once transformed these objects will
be passed to the final layer, the Data Layer.
Data Layer
This is the final layer in the three-tiered architecture. This layer receives the transformed
objects or DTO from the Business/Service Layer and converts them to Entity objects that
represent database tables. The main rule to follow in this layer is that there should not be any
additional business rules or logic run on the objects.
18
Saving of the data to your database should happen here. This is done in the form or LINQ to
SQL or stored procedures. Your data layer can connect to a database directly to save the data
or it can be passed to a web service that will handle the saving of data.
19
3.2.2 Database Schema Design
Database schema design organizes the data into separate entities, determines how to create
relationships between organized entities, and how to apply the constraints on the data.
Designers create database schemas to give other database users a logical understanding of the
data. From the following schema we can see that Admin, Product List, Product, Order, User,
Order History have relationship with each other’s and data is stored according to the
requirements by admin and user.
20
3.2.3 Physical DFD
The physical data flow diagram shows how the system will be constructed. Physical data flow
diagrams are often more complex than logical data flow diagrams simply because of the many
data stores present in a system. The acronym CRUD is often used for Create, Read, Update,
and Delete, the activities that must be present in a system for each master file. A CRUD matrix
is a tool to represent where each of these processes occurs in a system. Physical data flow
diagrams also have intermediate data stores, often a transaction file or a temporary database
table. Intermediate data stores often consist of transaction files used to store data between
processes. Because most processes that require access to a given set of data are unlikely to
execute at the same instant in time, transaction files must hold the data from one process to the
next. From the diagram User choses product to be purchased and selects the products from the
products/category database and the products are the transferred to the cart then the value is then
referred to the check in page after the final order referred by user then it is verified and approved
by Admin.
21
CHAPTER 4: IMPLEMENTATION AND TESTING
4.1 Implementation
Implementation basically means the phase where the system is actually being built. Firstly, all
the information that we gathered is studied and analysed and implemented a system in
operation for users. It is one of the most important phases of any project. Implementation
usually consists of coding; testing, installation, documentation, training and support. Different
tools and technologies that have been used to develop the system which are already discuss in
the previous chapter. It is basically converting system design specification into working
software.
The various system tools that have been used in developing both the front-end and backend of
the project are being discussed in this chapter.
Front-end
Bootstrap, HTML, CSS, and JavaScript are used for developing the front-end.
• CSS (Cascading Style Sheets):CSS is a style sheet language used for describing the
look and formatting of a document written in a markup language.CSS is used to
define styles for web pages, including the design, layout, and variations in the display
for different devices and screen sizes. CSS is used as front-end and with the help of
CSS designing text and adding colours in text and Inline CSS is used as managing
page design and font.
22
• Java script: Java Script 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 popup
windows displaying different alerts in the system like "Added to cart successfully",
"Login successful", "Invalid Username/ Invalid Password ".
• Bootstrap: It includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image etc. It also gives support for JavaScript
plugins. design and customize responsive sites with Bootstrap, most popular front-end
open-source toolkit, featuring Sass variables. Bootstrap helps to quickly and easily
design the webpages.
Back-end
The back-end is implemented using Firebase which used to design the database.
• Firebase: Firebase is used as Back-end in this project. The Firebase is used for server-
side processing on the web server. Firebase is a set of components that provide
developers with a framework to implement complex functionality. Firebase provides
state services that can be utilized to manage session variables across multiple Web
servers in a server form.
23
4.1.2 Implementation Details of Modules
After the design was made and the problems arising from the design process were clarified
and dealt with, it was time to start implementing the application. Implementing application of
this scale requires lots of resources and explaining the whole implantation process will not be
clarified in this paper. However major important aspects in the implementation will be
described. Some modules of the shopping websites are listed below:
• Header: It displays the header with the logo of the shopping website, social media or
the login. It is used in the navbar of the homepage. It is used in order to provide links
to different pages of the website.
• Breadcrumbs: It is used to automatically display the path taken to get to the page.
• Register Form: It is used in order to register the new users to the website. It contains
the text field like email, username and password. The information entered is further
stored to be used in the login page.
• Login Form: It is used in order to provide the user the gateway to the website. It uses
the data like username and password from register form to authenticate the user and
give further access.
• Shopping Cart: It displays the quantity of products and the prices of the products which
is to be bought by the user.
• Product Modules: Since the shopping website offers two different Shopping categories,
Product modules divides different products according to their categories. Users can
select the products according io their choices.
• User Module: It provides information related to the user. It Provides information like
cart detail, product detail, login, register and logout.
• Admin Module: It provides information to the admin. It provides information like user
detail, Admin can add or remove products etc.
24
4.2 Testing
Testing is done to check the behaviour of a complete and fully integrated software product
based on the software requirement specification document. For the application or website to
be deployed it has to be tested. Hence test cases will be written to test this application. They
are many types of tests to be carried out on a web application from performance, functionality,
database loading time, response time, server time handling, user's actions and many others. We
will not carry out all types of tests for the application considering the time scale to present this
project Hence performance check related to upload time, memory usage will be part of a future
test. We will focus the test cases on functionality, security and performance. So that various
types of testing procedures were performed in order to check the working mechanism and
correctness of the system. Some of the types of testing that we did are described below:
1. Verify that all the specified fields are present on the registration page.
2. Verify that clicking submits button after entering all the required fields, submits the data to
the server.
3. Verify that not filling the optional fields and clicking the submit button will still send data
to the server without any validation error.
4. Check validation on the phone no and email fields (only valid phone no and valid email Ids
should be allowed).
25
4.2.2 Test Case for System Testing
26
Table 2: Login page Test case
27
Table 3: Shopping cart Test case
28
CHAPTER 5: CONCLUSION AND FUTURE RECOMMENDATION
5.1. Outcome
When this project is completed, the users will be able to buy various products. After filling the
register form, user can view and buy different products online through web browser. User can
easily add and remove products from the cart.
5.2. Conclusion
The electronic shop was developed using Firebase, HTML,CSS and Javascript technology.
Any consumer can browse products, add, replace or delete a product from the cart. The
consumer can log in, with his information such as his email and password. If the login does not
go through, the user can re-register. After login, the user can see the product in the cart and
proceed onwards. The administrator can verify the order. However, the consumer can still look
at the orders in his or her account. The ordered is saved in the database
Choosing Firebase for this project is because it is very simple and easy to use, it could handle
a lot of data , this is widely used all over the world.
As complementing the end of the project, we realized that there are many enhancements that
can be made on the application. Some of these ideas came from those who tested the application
following the specification because they were realistic to achieve in this given amount of time.
Any other enhancements to the application can be done in future development of the
application.
29
5.3. Future Recommendation
Here is what can be added in the future on this website to increase its usability, user experience
and portability of the website. There is a lot to be done hence this application can be considered
as a starting point for something big to come. It will need more time and resources for all these
to be done but it is still very realistic and possible to achieve.
30
APPENDICES
31
Fig: User Login
32
Fig: Admin Home Page
33
Fig: Cart Page
34
Fig: Featured Products Page
35