E-COMMERCE WEBSITE

M-ONN: SHOPPING CART, PAYMENT& ORDER

MANAGEMENT

ARUNKUMAR M

Register No: 71762251004

DISSERTATION SUBMITTED IN PARTIAL FULFILLMENT OF THE

REQUIREMENTS FOR THE DEGREE OF
MCA(Computer Applications)
OF ANNA UNIVERSITY

May 2024

DEPARTMENT OF COMPUTER APPLICATIONS

COIMBATORE INSTITUTE OF TECHNOLOGY
(Autonomous Institution affiliated to Anna University)
COIMBATORE – 641014
 COIMBATORE INSTITUTE OF TECHNOLOGY
(Autonomous Institution affiliated to Anna University)
COIMBATORE – 641014

E-COMMERCE WEBSITE
M-ONN: SHOPPING CART, PAYMENT& ORDER MANAGEMENT

A project report submitted by

ARUNKUMAR M
(Register No: 71762251004)

in partial fulfillment of the

requirements for the degree of
M.C.A. (Master of Computer Applications)
of Anna University

May 2024
 COIMBATORE INSTITUTE OF TECHNOLOGY
(Autonomous Institution affiliated to Anna University)
COIMBATORE – 641014

(Bonafide Certificate)

Project Work & Viva voce

Fourth Semester

E-COMMERCE WEBSITE
M-ONN: SHOPPING CART, PAYMENT& ORDER MANAGEMENT

Bonfide record of Work done by

ARUNKUMAR M
(Register No: 71762251004)
Submitted in partial fulfillment of the
requirements for the degree of
M.C.A. (Master of Computer Applications)
of Anna University

May 2024

_____________ ________________
Faculty Guide Head of the Department

Submitted for the viva-voce held on _________________

__________________ __________________
Internal Examiner External Examiner
 CONTENTS

CHAPTER PAGE NO
ACKNOWLEDGEMENT i
SYNOPSIS ii
PREFACE iii
I INTRODUCTION 1
1.1 ORGANIZATION PROFILE 1
1.2 PROBLEM DEFINITION 2
1.3 SYSTEM ENVIRONMENT 4
II SYSTEM ANALYSIS 5
2.1 SYSTEM DESCRIPTION 5
2.2 USE CASE MODEL 7
2.3 SOFTWARE REQUIREMENTS SPECIFICATION 8
2.4 TEST PLAN 12
III SYSTEM DESIGN 15
3.1 ARCHITECTURAL DESIGN 15
3.2 STRUCTURAL DESIGN 17
3.3 BEHAVIOURAL DESIGN 22
3.4 TABLE DESIGN 27
3.5 USER INTERFACE DESIGN 29
3.6 NAVIGATION DESIGN 35
3.7 CODE DESIGN 36
IV SYSTEM TESTING 40
4.1 TEST CASES AND TEST REPORTS 41
V SYSTEM IMPLEMENTATION 46
VI CONCLUSION 47
BIBLIOGRAPHY 48
 ACKNOWLEDGEMENT

I sincerely thank Dr. A. RAJESWARI, Principal, Coimbatore Institute of Technology,

Coimbatore, for giving me an opportunity to undertake this full-time industry project.

I express my thanks to Dr. K. SAKTHIMALA, Dean, Department of Computing, Coimbatore

Institute of Technology, Coimbatore, for providing facilities to carry out this project.

I profoundly thank Dr. R. S. SOMASUNDARAM, Head, Department of Computer

Applications, Coimbatore Institute of Technology, Coimbatore, for providing with the necessary
library and laboratory facilities to complete the project.

I would like to thank my tutors Dr. L. YAMUNADEVI Assistant Professor (S.G) & Dr. R.
ASHOK KUMAR, Associate Professor, Department of Computer Applications, Coimbatore Institute
of Technology, Coimbatore for the encouragement to complete this project.

I feel proud to have worked under the able guidance of my guide Dr. L. YAMUNADEVI
Assistant Professor (S.G), Department of Computer Applications,Coimbatore Institute of Technology,
for suggestions and great support in all my efforts to improve the project in the right way for the
successful completion of the project.

I also express my sincere thanks to my external supervisor Mr. DAVID MILLER,

BusinessWebSolutions, Delhi, for helping me to do this project work.

I also express my sincere thanks to all faculty and technical staff of the Department of Computer
Applications for their motivation and encouragement and also thank all the hands and minds that
helped me.

i
 SYNOPSIS

E-commerce Platform for Mobile Automatic Starter Controllers: A Focus on Shopping

Cart, Payment Processing, and Order Fulfilment

The aim of the e-commerce site is to provide a seamless shopping experience for mobile
automatic starter controllers. The focus is on offering high-quality products, ensuring user-
friendly navigation, and maintaining robust security measures. BWS (Business Web
Solutions), a web development agency assisting businesses since 2018, provides a wide array
of services and quality work.

The existing manual process of maintaining a client enquiry record, client info, day-to-day

activities, and billing is tough. Therefore, a system or application that can complete these tasks in

an easy-to-us manner is what can be achieved by this system.

The M-ONN website also includes a variety of tools and resources to help customers know
about the different products available according to their needs. These resources include a video
with clear explanation of how to use and where to use with the demonstration. Customers can also
sign up for M-ONN’s rewards program, which offers exclusive discounts, free shipping, and other
benefits.

For developing the website the frontend is developed using React.js and the backend is with
node.js which provides robust facilities to develop the website and the MySQL database is used
to store the data.

ii
 PREFACE

CHAPTER I – INTRODUCTION gives an introduction about the organization where the

project was done. It also introduces the project, giving a description about the system that was
built and the environment in which it was developed and deployed.

CHAPTER II - SYSTEM ANALYSIS analyzes the system to be developed using the use case
model which gives an insight into the user requirements. The test plan for the project explains the
schedule, the testing techniques and the tools used.

CHAPTER III - SYSTEM DESIGN explains the design of the system that is developed with
related diagrams which outline the different phases of system development and elucidates the user
interface flow.

CHAPTER IV - SYSTEM TESTING gives the various test cases and test results.

CHAPTER V – SYSTEM IMPLEMENTATION gives the implementation of the system and

installation procedures.

CHAPTER VI – CONCLUSION concludes the project with suggestions for future

enhancements.

iii
 CHAPTER I
INTRODUCTION

This section gives a detailed description of the organization for which the system is
developed along with the overview of the application and the problems associated with goals
and the scope of the proposed system. It also specifies the system environment used in the
development of the proposed system and gives a brief introduction about the various
technologies used in the development of the system.

1.1 ORGANIZATION PROFILE

Business Web solutions(BWS) is an MSME (Govt. of India) organization, a Web

Development Agency helping Businesses to grow by providing various technical supports. BWS
was established in 2018 by a passionate team of freelancers primarily as a Web Development
company on the principles of high standards, ethics, and genuine customer service and since
then they have provided boost to many small and big businesses and gained their trusts with
repetitive project orders. BWS’s Headquarter is located in Indiana (USA) and another office in
New Delhi (India).
They provide a wide array of Services and quality work in the domain of web development,
web designing and redesigning old websites, website management, domain, hosting, content
writing, responsive websites, social and email marketing, digital marketing and cyber security
awareness Camps.
Business Web solutions also take up consulting, design, and digital products to the Indian
sub-continent region.

1
1.2 PROBLEM DEFINITION

OBJECTIVE

The main objective of this eCommerce website is to facilitate the online buying and selling
of goods or services. Here are some specific objectives that an eCommerce website may
have:

• Increase Sales: This website aims to increase sales by providing customers with an
easy-to-use platform to purchase products or services online.
• Expand Customer Base: This website can help expand a company's customer base by
making products or services available to a global audience.
• Improve Customer Experience: An e-Commerce website can improve the
customer
Experience by providing a user-friendly interface, fast checkout process, and
secure payment options.
• Increase Brand Awareness: An eCommerce website can help increase brand awareness
by showcasing products or services and providing relevant information about the
company and its mission.

SCOPE

The project is about to handle all the information of the site regarding members. Also,
it manages resources which were managed and handled by manpower previously. The main
purpose of the project is to integrate distinct sections of the site into consistent manner so that
complex functions can be handled smoothly. The project aims at the following matters

• Automation of product manipulation.

• To manage information of different types of items.

• Consistently update information of all the item.

• Managing security by providing authorized email & password. Manages database

efficiently.

2
USERS
Customers: The primary users who visit the website to browse products, make purchases,
and engage with the brand.
Administrators: Those responsible for managing the website's content, inventory, orders,
and customer interactions.

LIMITATION

Security Concerns: E-commerce websites are vulnerable to cyber threats such as data
breaches, payment fraud, and identity theft.
Technical Issues: Users may encounter performance issues, such as slow page loading
times, broken links, or system crashes.
Competition: The online marketplace is highly competitive, making it challenging for e-
commerce websites to stand out and attract customers.
Trust and Credibility: Building trust with customers can be difficult, especially for new or
lesser-known e-commerce brands.
Logistical Challenges: Managing inventory, order fulfillment, shipping, and returns can be
complex and costly, particularly for small businesses.
Regulatory Compliance: E-commerce websites must adhere to various regulations and
standards related to data protection, consumer rights, and online sales tax.
User Experience: Poor website design, navigation, or usability can frustrate users and lead
to abandoned carts or negative reviews.
Scalability: As traffic and sales volume grow, e-commerce websites may struggle to scale
their infrastructure and resources to meet demand effectively.

3
1.3 SYSTEM ENVIRONMENT

HARDWARE CONFIGURATION

● RAM :8 GB RAM (minimum)

● Storage : 50 GB SSD (Solid State Drive) (recommended)
● Processor : Intel Core i5 or equivalent AMD processor (minimum)

SOFTWARE CONFIGURATION

● Operating System : Windows10(or above),macOS,Linux (alternative for experienced users)

● Front-end : React.js (JavaScript library) , HTML,CSS, JavaScript,Bootstrap
● Back-end : MySQL
● Server framework : Nodejs
● Editor : Visual studio code, CodePen

4
 CHAPTER II

SYSTEM ANALYSIS

System analysis is the overall analysis of the system before implementation and for arriving
at a precise solution. Careful analysis of a system before implementation prevents post
implementation problems that might arise due to bad analysis of the problem statement. Thus
the necessity for systems analysis is justified. Analysis is the first crucial step, detailed study of
the various operations performed by a system and their relationships within and outside of the
system. Analysis is defining the boundaries of the system that will be followed by design and
implementation.

2.1 SYSTEM DESCRIPTION

EXISTING SYSTEM:

The existing system for shopping is walk-in shopping at the store. All the processes such as
going to the store, viewing the products, paying money and purchasing the item are done by
directly visiting the store. This seems to be a time and energy consuming process for this modern
world and modern people.

DRAWBACKS:

● Users must go to shop directly and shop for it.

● Difficult to identify the required product in the store.

● Description of the product limited.

● Time consuming and energy consuming process.

● No data security.

5
PROPOSED SYSTEM

The proposed solution for the e-commerce website project revolves around a holistic
approach aimed at overcoming existing challenges and optimizing user experience. Key
elements of the solution include:
• Seamless User Experience: Prioritizing the development of an intuitive and visually
appealing interface, ensuring easy navigation and hassle-free browsing for users
across all devices.
• Efficient Backend Management: Implementing a robust backend infrastructure will
streamline inventory management, order processing, and customer relationship
management, thereby reducing operational inefficiencies and enhancing overall
productivity.
• Secure Transaction Processing: Integration of state-of-the-art security protocols
and encryption techniques will safeguard user data and financial transactions,
instilling trust and confidence in the site.
• Enhanced Discoverability: Through strategic search engine optimization (SEO)
techniques and targeted marketing efforts, it will increase the visibility of the
website, attracting a larger audience and driving organic traffic.
• Personalization and Recommendation Engines: Leveraging data analytics and
machine learning algorithms, it will offer personalized product recommendations and
tailored shopping experiences to users, ultimately leading to higher conversion rates
and customer satisfaction.

2.2 USE CASE MODEL

A UML use case diagram is the primary form of system/software requirements for a
new software program underdeveloped. Use cases specify the expected behavior. It is an
effective technique for communicating system behavior in the user's terms by specifying all
externally visible system behavior.

6
 Figure 2.1 Use Case Model for Workflow

This use case diagram depicts the interactions between various actors in an e-commerce
system, including customers (existing and guest users), sellers, administrators, and a
payment service.
Customer (Existing User): The existing user can browse products, apply filters to narrow
down search results, add items to the cart, finalize the cart, proceed to checkout, track their
order, and rate and review products.
Customer (Guest User): The guest user can browse products, apply filters to narrow down
search results, add items to the cart, finalize the cart, and proceed to checkout. They can also
choose to register as a client during checkout.
Seller: The seller can edit their certificate, post products, and manage their inventory.

Administrator: The administrator can register clients, manage user accounts, and confirm
shipments.
Payment Service: The payment service interacts with the customer to process payments.

7
 2.3 SOFTWARE REQUIREMENTS SPECIFICATION

FUNCTIONAL REQUIREMENTS

SHOPPING CART

Adding Products to Cart:

When a customer selects a product, they have the option to add it to their cart.The
customer can specify the quantity they wish to add, or by default, it's added as one.Once added,
the product is stored in the cart with its details such as name, price, quantity, and any other
relevant information.
Viewing Cart Contents:

Customers can view all the products they've added to their cart. Each product is displayed
with its name, price, quantity, and subtotal (price,quantity).The total price of all products in the
cart is displayed at the bottom.
Updating Quantity:

Customers can update the quantity of any product in their cart. They can increase or
decrease the quantity of a product, or even remove it altogether. Upon updating the quantity, the
subtotal for that product and the total price for the entire cart are recalculated.
Reviewing Total Price:

The total price of all products in the cart is prominently displayed. This total price is
dynamically updated as the customer makes changes to their cart (adding, removing, or updating
quantities).
Adding More Products:

Customers have the option to continue browsing and adding more products to their cart.
They can add multiple products simultaneously or one by one. The cart updates in real-time to
reflect the newly added products and their respective prices.

Removing Products from Cart:

If a customer decides they no longer want a particular product, they can remove it from
their cart. Upon removal, the product is deleted from the cart, and the total price is updated
accordingly.
8
Handling Discounts or Promotions:

If there are any applicable discounts or promotions, they are applied to the cart's total
price, the discounted price is displayed to the customer for transparency.
Saving Cart for Later:

Customers might want to save their cart for future purchases. They have the option to
save the current state of their cart for later retrieval, this allows them to continue shopping without
losing the products they've already selected.
Checkout Process Integration:

Integration with the checkout process is essential. Customers should be able to

seamlessly transition from reviewing their cart to completing their purchase, the cart's contents
and total price should be carried over to the checkout page for payment processing.

SHIPPING

Proceeding to Shipping:

Once the customer has finished adding products to the cart and reviewing them, they
have the option proceed to the shipping stage, this stage involves entering the necessary shipping
details such as name, address, city, pincode, and country.
Entering Shipping Address:

The customer is prompted to enter their shipping address details, including full name,
complete address (street address, building/house number), city, pincode, and country,the interface
ensures a user-friendly experience with clear input fields and validation for accurate information.
Integration with Shiprocket API:

Once the shipping details are entered, the cart module integrates with the Shiprocket API
to calculate shipping costs and provide available shipping options. Shiprocket offers various
shipping options based on factors like delivery speed, courier service, and package dimensions,the
customer can select their preferred shipping method from the options provided.

Address Validation:

Shiprocket's API performs address validation to ensure the accuracy of the provided
shipping address.It checks for any errors or inconsistencies in the address format and suggests
9
corrections if necessary. This helps prevent delivery delays or returns due to incorrect addresses.
Reviewing Shipping Details:

Before finalizing the shipping process, the customer is given the opportunity to review
the entered shipping details, including the address and selected shipping method. They can make
any necessary edits or corrections before proceeding to the next step.
Completing the Shipping Process:

Once the shipping details are confirmed, the customer proceeds to the final step of the
shipping process. This may involve confirming payment details, selecting any additional shipping
services (e.g., insurance, package tracking), and reviewing the order summary. Upon completion,
the order is finalized, and the shipping label is generated through Shiprocket's platform.

PAYMENT

Proceeding to Payment:

After finalizing the shipping details, the customer proceeds to the payment stage. Here,
they can select their preferred payment method from the available options, such as PayPal or
Google Pay.
Selecting Payment Method:

The customer chooses Razorpay as their payment method from the provided options.
Razorpay offers a secure and convenient payment gateway for processing transactions.
Integration with Razorpay API:

Upon selecting Razorpay, the cart module integrates with the Razorpay API to facilitate
payment processing. The customer is redirected to Razorpay's secure payment portal to complete
the transaction.
Completing Payment:

In the Razorpay payment portal, the customer enters their payment details, such as card
information or UPI credentials. They then authenticate the transaction using any additional
security measures, such as OTP verification.
Order Placement:

Upon successful payment authorization, Razorpay confirms the transaction and notifies the
website. The order is then placed successfully on the website, and the customer receives an order
10
confirmation email or message.
Order Status:

The website updates the order status to "Placed" and provides the customer with an order
reference number for tracking purposes.
Confirmation:

The customer receives a confirmation message on the website confirming that their order
has been successfully placed and payment has been processed.

NON-FUNCTIONAL REQUIREMENTS

● Performance: The website should be able to handle a large number of users and
transactions without slowing down or crashing. It should have fast page load times and
quick response times to user actions.
● Reliability: The website should be reliable and available to users at all times, with
minimal downtime for maintenance or updates.

● Security: The website should be secure, with measures in place to protect user data and
prevent unauthorized access. It should have SSL encryption for secure transactions, and
secure storage of user data.
● Usability: The website should be easy to use and navigate for users of all levels of
technical expertise. It should have a simple and intuitive interface and clear navigation
paths.
● Scalability: The website should be able to scale up or down to accommodate changes in
user traffic and transaction volume.

11
2.4 TEST PLAN

A test plan documents the strategy that will be used to verify and ensure that a product or
system meets its design specifications and other requirements. A plan typically contains a
detailed understanding of the eventual workflow.

TESTING FACTORS

Test factors or issues means that a testing issue applies to software to achieve quality. All the
functional features specified in the requirement analysis are to be tested. The testing factors are,

● System reliability

● System usability

● Data Scalability

TEST SCOPE

Every functionality of the proposed application is considered as important and need to be

tested for the good working of the application. So, all the functionalities will come under the in-
scope of the system. The scope of testing the application is to make the developers understand
the bugs, errors that are occurring in the application. It is also to solve the problems that may
occur during the usage, or at least identify the errors and give a detailed recommendation of best
practices to the users to minimize the error while operating the application.
Below are the types of testing that will be supported

Manual Testing (Regression & Data Validation)

API Testing

Mobile Testing

The below platform, browsers and devices are considered in scope of testing
12
 Windows/Google Chrome (Desktop), iOS/Safari (Secondary)

Android/Google Chrome (Mobile), iOS/Safari (Mobile Secondary)

TEST FACTORS

● Authorization: Whether the user is valid or not to correct the application. Ensures the user
credentials are correct for accessing the environment.

● Access Control: Authorized to access specific services. Separates generic and specific
access control to avoid data breaches.

● Correctness: Meet user requirements in terms of inputs and outputs.

● Ease of Use: User friendly screens.

● Reliability: Recover from abnormal situations. During unexpected issues the server should
remain un-manipulated.

● Portable: Run on different platforms.

● Performance: Each process must be executed within the time limit specified and could be
optimized based on the time taken.

● Maintainable: Long time serviceable to customers. Ex: Adding rules as per user demand

13
TESTING TECHNIQUES

1. Black Box Testing: Black box testing focuses on testing the application's functionalities
without knowledge of its internal code structure. Testers interact with the application's
user interface and inputs to validate output behaviour and expected outcomes.
2. White Box Testing: White box testing involves examining the application's internal code
and logic to ensure all branches and paths are tested for accuracy and completeness.
Testers analyse the code structure to identify potential vulnerabilities and ensure proper
error handling.
3. Integration Testing: Integration testing verifies that different modules or components of
the application work together seamlessly. Testers test the interaction between various parts
of the application to ensure they communicate effectively and produce the expected
results.
4. Regression Testing: Regression testing involves repeatedly testing previously
implemented functionalities to ensure that new changes or updates do not introduce
defects or regressions. Testers rerun existing test cases to verify that the application still
behaves as expected after modifications.

14
 CHAPTER III

SYSTEM DESIGN

System design is the process of defining the elements of a system such as the
architecture, modules and components, the different interfaces of those components and the data
that goes through that system. It is meant to satisfy specific needs and requirements of a
business or organization through the engineering of a coherent and well running system. System
design implies a systematic approach to the design of a system.

3.1 ARCHITECTURAL DESIGN

Architectural design is the process of defining a collection of structure of data, hardware
and software components and their interfaces to establish the framework for the development of
a computer-based system. It focuses on the decomposition of a system into different components
and their interactions to satisfy functionality and performance requirements as well as
non-functional requirements of the system. The software that is built for computer-based
systems can exhibit one of the many architectural styles or patterns. An architectural pattern is a
general, reusable solution to a commonly occurring problem in software architecture within a
given context.

Figure 3.1 Architecture Diagram

15
 ● Web servers serve static assets and proxy requests to application servers
● Application servers process ecommerce business logic and authentication logic
● Databases store user and other dynamic data
● Firewall and load balancers provide network components for load balancing and network
security

3.2 STRUCTURAL DESIGN

Structural design is the methodical investigation of the stability, strength and rigidity of
structures. The basic objective in structural analysis and design is to produce a structure capable
of resisting all applied loads without failure during its intended life.

CLASS DIAGRAM

A class diagram is a type of static structure diagram in the Unified Modeling Language
(UML) that represents the structure and behavior of a system by modeling its classes, attributes,
methods, and relationships among them. It provides a visual representation of the system's
classes and how they interact with each other.

Composition is a stronger form of aggregation (e.g if customer deletes

his account all the associated items like cart, reviews , orders will be deleted )

Aggregation between Customer and ShoppingCart,Order, and Payment

classes. A customer can have one shopping cart, many orders, and many payments.

Inheritance (Generalization)- A seller is a specific type of customer who can

also sell products.

16
 Figure 3.2 Class Diagram

Customer: A user account with details like login ID, password, email, etc. It can interact with the
Shopping Cart, add/update profile and login/register.
Seller: A user account with details similar to Customer. It can interact with Products, add/update
profile and login/register.
Product: An item for sale with details like product ID, name, cost, seller ID etc. Customers can
view details and add them to the cart.
Shopping Cart: A temporary storage for products a customer intends to buy. It allows
adding/updating items and checking out.
Order: A record of a purchase made by the Customer.
Payment: A class to handle payment transactions.

17
MODULE DIAGRAM

A module refers to a self-contained unit of code that performs a specific set of related
functions or tasks. A module is typically designed to be reusable and can be integrated with
other modules to build a larger system or application. The following are the modules worked in
with.

Figure 3.3 Module Diagram

18
 The process starts at the home page form there the customer the customer can either Sign-
Up for a new account or Sign-In to their existing account. Once the customer is logged in (either
through sign up or sign in),they can browse products and add them to their Shopping Cart. From
the Shopping Cart, They can proceed to Checkout. During checkout, the customer will need to
provide their Shipping Information. This likely involves integrating with a shipping API like
ShipRocket. Next, they will need to provide their Payment Information ,This likely involves
integrating with a payment processing API like RazorPay. Once the payment is successful, the
customer will receive an Invoice.

HOME PAGE

This is the main page of this website. All the product details and their categories are found
in this module. By selecting the product, customers can view the detailed description of the
product. This page is common for all the users.

SIGN UP

When a new customer visits the webpage, customers can create a new account using their
login credentials like name, gender, date of birth, phone number, address, email id, password. By
registering these details a new account will be created and the details will be stored in the
database.

SIGN IN

In the Sign up module ,if the user has already registered they can log in through their
registered mail id and password. If not a new account should be created to proceed

PROFILE
The registered details can be viewed in this module. If the user wants to update any login
details in their page that can be done in this module. The edited details will be updated in the
website.
SHOPPING CART

Users should be able to add products to a shopping cart and remove products from the cart before

checkout.

19
PAYMENT GATEWAY INTEGRATION

The platform should have a payment gateway that allows users to securely pay for their purchases

using credit cards, debit cards, or other forms of payment.

ORDER TRACKING AND MANAGEMENT

Users should be able to track the status of their orders and view their order history.
SHIPPING AND DELIVERY MANAGEMENT

The platform should have a system for managing shipping and delivery of products,
including tracking information and delivery notifications.

LOG OUT

Signed users can log out from the created account on this website. This will remove their
entire account from the website. If the user wants to log in again , they can log in through the
login module.

E-R DIAGRAM

An ER (Entity-Relationship) diagram is a visual representation of entities, attributes, and

relationships in a database. It is used to model and design databases in a clear and
understandable way. ER diagrams are typically used by database designers and administrators to
create a blueprint of the database before it is implemented.

The below Figure 3.3 depicts the entities like admin, customer, order and products and
their relationships with the other entities with the attributes of the entities with the specified
keys.

20
 Figure 3.3 Entity Relationship Diagram

This ERD explains a customer relationship management system.

Customer: This entity represents a customer of the system. It has attributes like customer ID
(P_Id),contact number (C_contactNo), email, username, password.

Order: This entity represents an order placed by a customer. It has attributes like order ID (order
id), order date (o_date), and quantity.

Product: This entity represents a product sold by the system. It has attributes like product ID
(Prod id), product name (Prod_name), cost price (Cost_price), and sale price (Sale_price).

Category: This entity represents a category that a product belongs to. It has an attribute, category
ID (Category_id).

Payment: This entity represents a payment made by a customer for an order. It has attributes like
payment mode (P Mode) and amount.

21
The relationships between the entities are as follows:

Customer Places Orders: A customer can place multiple orders. This is a one-to-many
relationship between Customer and Order. An order is placed by one customer, but a customer
can place many orders.

Order Contains Products: An order can contain one or more products. This is a many-to-many
relationship between Order and Product. An order can contain many products, and a product can
be included in many orders.

Product Belongs to Category: A product belongs to one category. This is a one-to-many

relationship between Category and Product. A category can have many products, but a product
belongs to only one category.

Order Has Payment: An order has one payment. This is a one-to-one relationship between Order
and Payment. An order has one payment associated with it, and a payment is associated with one
order.

3.3 BEHAVIOURAL DESIGN

Behavioural models show the dynamic behaviour of the system as its executing. They
show what happens or what’s supposed to happen when a system occurs with an error

ACTIVITY DIAGRAM

Activity diagram is a graphical representation of an executed set of procedural system

activities and considered a state chart diagram variation. Activity Diagrams is used to illustrate
the flow of control in a system and refer to the steps involved in the execution of a use case. This
diagram depicts the graphical representations of workflows of stepwise activities and actions of
the website.

22
 Figure 3.4 Activity Diagram For User

The above figure3.4 shows the activities done by the user when logging in to the website
portal. It outlines the steps involved, including creating and editing profile and accounts, payment
procedures and placing the orders.
23
 Figure 3.5 Activity Diagram For Admin

The above figure3.5 shows the activities done by the admin when logging in to the website
portal. It outlines the steps involved, including product management, customer management and
order management.

24
 Start

Figure 3.6 Activity Diagram For Cart To Checkout

This diagram is a flowchart depicting a M-ONN Product order process. It starts with a
customer searching for a product. If a product is found, the customer can choose to view it or set up its
parameters (e.g., customized, fully built, etc.). Then, the selected product is added to the cart.

For registered users, the diagram shows an option to view previously saved carts. After adding
items to the cart, the customer can proceed to checkout, where they will choose a payment type,
delivery type, and address. Finally, the diagram shows success and failure options for payment.

25
3.7 SEQUENCE DIAGRAM

A sequence diagram simply depicts interaction between objects in a sequential order i.e. the order
in which these interactions take place. We can also use the terms event diagrams or event scenarios to
refer to a sequence diagram. Sequence diagrams describe how and in what order the objects in a system
function.

Figure 3.7 Sequence Diagram

26
 Customer Login: The customer initiates the interaction by logging into the website. The
website verifies the customer's credentials.

Successful Login: If the credentials are valid, the website grants access to the customer
profile.

Product Search: The customer searches the database for product information. The website
returns the product information to the customer.

Product Purchase: The customer places an order for the product. The website sends the
order details to the product database.

Payment: The customer makes a payment. The website sends the payment details to a
payment gateway (Databine in this case).

Order Confirmation: Once the payment is successful, the website confirms the order
with the customer.

3.8 TABLE DESIGN

Table 3.1 Admin table

Field Name Data Type Size Constraint Description

UserId varchar 10 Primary Key Enter Username
EmailId varchar 10 Not Null Enter emailid
password varchar 20 Not Null Enter Password

Table 3.2 Customer table

Field Name Data Type Size Constraint Description

cid varchar 10 Primary Key Customer Id
Cname varchar 20 Not Null Customer Name
cmobile varchar 10 Not Null Company
Mobile
emailid varchar 30 Not Null Email id
address varchar 60 Not Null Address

27
 Table 3.3 Product table

Field Name Data Type Size Constraint Description

castno varchar 10 Primary Key Cast Id
pname varchar 20 Not Null Product Name
quantity int 10 Not Null Quantity of
product
costprice int 15 Not Null Cost price of
product
salesprice int 10 Not Null Sales price of
product
gstno varchar 16 Not Null GST Number
Table 3.4 Order table

Field Name Data Type Size Constraint Description

oid varchar 10 Primary Key Order Id
odate Date 10 Order Date
cid varchar 20 Foreign Key Customer Id
(Customer)
cname varchar 10 Not Null Customer Name
cmobile int 10 Not Null Customer
Mobile No
castno varchar Not Null Product Id
pname varchar 20 Not Null Product name
quantity Int 10 Not Null Quantity
salesprice Int 10 Not Null Sales Price
sdate date 10 Not Null Sales Date
total varchar 10 Not Null Total Amount

Table 3.5 Payment table

Field Name Data Type Size Constraint Description

invoiceno varchar 10 Primary Key Invoice number
cname varchar 20 Foreign Key Customer name
invoicedate date Not Null Invoice date
delivarydate date Not Null Delivery date
modeofpay varchar 10 Not Null Payment mode
otherref varchar 20 Not Null Other reference
oid varchar 10 Foreign Key Order id
(Order)
dispatch_docno varchar 10 Not Null Dispatch
number
destination varchar 20 Not Null Destination

28
despatch_through varchar 20 Not Null Dispatch
Through Mode
srno varchar 10 Not Null Serial Number
particular varchar 255 Not Null particular
total int 10 Total Amount

3.8 USER INTERFACE DESIGN

User Interface (UI) Design focuses on anticipating what users might need to do and
ensuring that the interface has elements that are easy to access, understand, and use to facilitate
those actions. UI brings together concepts from interaction design, visual design, and
information architecture.

Screen 3.1 Login page

29
 The screen 3.1 shows the login and registration page where the user have to login to visit the
website. New user can signup and the old users can signin the form.

Screen 3.2 Forgot password

The screen 3.1 shows than when the user forgets the password can fill this form for the recovery

Screen 3.3 Homepage Layouts

30
 Screen 3.4 Homepage Layouts

The Screen 3.3 depicts the homepage layout of the MONN e-commerce website for
shopping and the services provided by website

31
 Screen 3.5 Store page

The above screen 3.4 depicts the products available in the store page, the users can scroll
and get the product information.

Screen 3.6 Product description page

The Screen 3.5 shows the description of the product when selected. The user is
able to know the use of the product here.
32
 Screen 3.7 Add new admin

The above Screen 3.6 shows that the new user can be added to the portal such as the
customers or admins .

Screen 3.8 Add new product

Screen 3.7 shows that the admin is able to add products to the site. The new product can
be uploaded and the products can be managed here.

33
 Screen 3.9 All product CRUD

Screen 3.8 depicts that in the Admin panel of the website, the creation, updation and the
deletion of the products can be done when the inventory varies.

34
3.5 NAVIGATION DESIGN

logout

Figure 3.10 Navigation Diagram

The above Figure 3.8 shows the navigation of the different pages of the website. The
process typically starts with browsing products on the homepage then login for a personalized
experience. Customers can then explore product listings and detailed descriptions before adding
items to their cart. The checkout process involves reviewing the order summary, entering secure
payment information, providing a shipping address, and finally placing the order and can
logout.

35
3.6 CODE DESIGN

import React, { useState } from 'react';

function RegistrationForm() {
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [errorMessage, setErrorMessage] = useState('');

const handleSubmit = async (event) => {

event.preventDefault();

// Basic validation (more can be added)

if (!email || !password || !confirmPassword) {
setErrorMessage('Please fill in all required fields');
return;
}

if (password !== confirmPassword) {

setErrorMessage('Passwords do not match');
return;
}

// Replace with your backend API call

try {
const response = await fetch('/api/register', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ firstName, lastName, email, password }),

36
 }
);

if (!response.ok) {
throw new Error(`Registration failed with status ${response.status}`
);
}

const data = await response.json();

console.log('Registration successful:', data);
// Redirect to login page or show success message
} catch (error) {
console.error('Registration error:', error);
setErrorMessage(error.message);
}
};

return (
<form onSubmit={handleSubmit}>
<h2>Register</h2>
{errorMessage && <p className="error">{errorMessage}</p>}
<div className="form-group">
<label htmlFor="firstName">First Name</label>
<input
type="text"
id="firstName"
name="firstName"
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
required
/>
</div>
37
<div className="form-group">
<label htmlFor="lastName">Last Name</label>
<input
type="text"
id="lastName"
name="lastName"
value={lastName}
onChange={(e) => setLastName(e.target.value)}
required
/>
</div>
<div className="form-group">
<label htmlFor="email">Email</label>
<input
type="email"
id="email"
name="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input
type="password"
id="password"
name="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
38
 </div>
<div className="form-group">
<label htmlFor="confirmPassword">Confirm Password</label>
<input
type="password"
id="confirmPassword"
name="confirmPassword"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
required
/>
</div>
<button type="submit">Register</button>
</form>
);
}

export default RegistrationForm;

The above is the sample code for User Registration Form Sample code. The user and
the admin can be able to fill the form and enter the website.

39
 CHAPTER IV
SYSTEM TESTING

In a software development project, errors can be injected at any stage during the
development. Testing performs a very critical role for quality and for ensuring the reliability of
software. During testing, the program to be tested is executed with a set of test cases, and the
output of the program for the test cases is evaluated to determine if the program is performing
as it is expected to. The main objective of testing is to uncover errors from the system. For the
uncovering process users have to give proper input data to the system. So users should be more
conscious of giving input data. It is important to give correct inputs to efficient testing. Testing
is a process of executing a program with the intent of finding an error.
Testing is a crucial element of software quality assurance and presents ultimate review
of specification, design and coding. System Testing is an important phase. Testing represents
an interesting anomaly for the software. Thus a series of testing are performed for the proposed
system before the system is ready for user acceptance testing. A good test case is one that has a
high probability of finding an undiscovered error. A successful test is one that uncovers an
undiscovered error.

4.1 TEST CASES AND TEST REPORTS

Test cases are built around the requirements and specifications i.e., what the system is
supposed to do. Test cases are generally driven from the external descriptions of the framework
and design parameters. Each test case contains item criteria such as:

● PASS - All expected results are achieved and/or all unexpected events are resolved

● PASS WITH EXCEPTIONS - Unexpected events require alternative procedures that

have been implemented and those events are called as exceptions

● FAIL - Testing process response does not confirm the expected results.

40
 Table 4.1 Test cases and Reports
Test Test Test Case Pre- Steps Test Expected Actual Re
Case Scenario condi Data Result Result ma
id tion rk

TC_1 Admin_Logi Login for Login Fill - Admin Admin Pass

n registered admin Credenti username should is able
als
with Username and login to login
and password password successfully successf
and click ully
on the
login
button.

TC_2 Admin After Admin Admin - Admin can Admin Pass

Dashboard Successfully Login Can See her is able
Admin Login Access Dashboard to
Redirect To Change with Access change
Admin Password Reports Password
Dashboard and and
Reports Manage
in Admin Reports
Dashboard

TC_3 Change Admin can Admin Fill valid - Admin can Admin Pass
Password change password Dashbo username change is able
ard
with existing Access , old password to
username password successfully change
and fill with valid passwords
new username ds.
password
and click
on button.

41
TC_4 Logout Admin and Click on - Should Session Pass
Customer can logout destroy the is
logout from the button. session destroy
system and return ed
to Login success
page.. fully
and
headed
to
Login
page.
TC_5 Customer Customer can Fill the - Custom Pass
Add Customer Customer Customer er Data
Details and Details Data can is able
Admin Can and Click Manage to
Manage that on Button Successfull Manage
Details y Successf
ully
TC_6 Product Admin can Add Fill all - Product and Product Pass
Product details Product Vendor data and
and Admin Can Details can Manage Vendor
Manage that with Successfull data is
Details Vendor y able to
Details Manage
and Click Successf
on Button ully.
Order Customer can add Fill Sales Sales Sales
order Details and Details Details Data is
TC_7 Pass
Admin Can with manage able to
Manage that Specific Successfull Manage
Details, if Customer y Successf
Customer Not in and Click ully
Database, then on
Button if

42
 New Customer Customer
Added Not in
Database,
then New
Customer
Added

TC_8 Reports Admin Can Admin - Reports Reports Pass

Manage Reports Can generated able to
with Specific Search Successfull generat
Date wise or Product y e
Product Id Id or Successf
Enter ully
Dates
and Click
on
Button
and Also
Print the
Report

Table 4.2 Overall Test cases and Reports

Test Case Description Status

User Registration - Valid credentials Passed
User Registration - Invalid credentials Passed
User Login - Valid credentials Passed
User Login - Invalid credentials Passed
Product Catalog - Display all products Passed
Product Catalog - Filter products Passed
Product Catalog - Verify product details Passed
Shopping Cart - Add items Passed
Shopping Cart - Remove items Passed
Shopping Cart - Total price calculation Passed
Checkout Process - Enter shipping information Passed
Checkout Process - Enter billing information Passed
Checkout Process - Payment methods Passed

43
Checkout Process - Order confirmation page Passed
Website Navigation - Intuitive navigation Passed
Website Navigation - Consistent navigation Passed
Mobile Responsiveness - Display and functionality Passed
Mobile Responsiveness - Accessible features Passed
Accessibility - Screen reader compatibility Passed with
exceptions
Security - Data encryption during transmission Passed
Security - HTTPS implementation Passed
Security - Authentication bypass vulnerabilities Passed
Security - Payment gateway integration security Passed
Performance - Load testing Passed
Performance - Stress testing Passed with
exceptions
Compatibility - Browser compatibility Passed
Compatibility - Device compatibility Passed
Recovery - Backup procedures Passed with
exceptions
Recovery - Data restoration process Passed
Recovery - Error handling Passed with
exceptions
User Acceptance Testing (UAT) - End-user feedback Passed

The table outlines the test cases and their respective statuses for evaluating the e-commerce
website selling mobile automatic static controllers. It covers various critical aspects such as user
registration, product catalog, shopping cart functionality, checkout process, website navigation,
mobile responsiveness, accessibility, security measures, performance testing, compatibility
across browsers and devices, recovery procedures, localization support, and user acceptance
testing.

Each test case description corresponds to a specific functionality or feature of the website,
while the "Status" column indicates whether the test case has passed successfully. The "Passed"
status signifies that the corresponding feature or functionality has been thoroughly tested and
functions as expected without any issues.

The test plan ensures that users can seamlessly register and log in, browse through the
product catalog with ease, add/remove items from the shopping cart, and complete the checkout
process smoothly. It also verifies the website's navigation is intuitive, the layout is responsive
across various devices, and accessibility standards are met for users with disabilities.
44
 Security testing ensures that sensitive data is encrypted, authentication mechanisms are
robust, and payment transactions are secure. Performance testing evaluates the website's
response under different load conditions, while compatibility testing ensures consistent
functionality across different browsers and devices.

Additionally, recovery procedures are tested to ensure data backup and restoration
mechanisms are reliable in case of system failures. Localization testing confirms support for
multiple languages and currency conversion.

45
 CHAPTER V
SYSTEM IMPLEMENTATION

The following applications are installed for the development of the project

1. Install Integrated Development Environment (IDE):

• Visual studio code has been used to code the project. The proper and appropriate
version of it is to be installed from the website
• Download and install the IDE according to the instructions provided on the official
website.
2. Install MySQL Database:
• Download and install MySQL Community Server from the official website.
• Follow the installation wizard to set up MySQL, including configuring the root
password and creating a user account for the Expense Tracker application.
• Optionally, install MySQL Workbench for graphical administration and database
management.
3. Create a CodePen Account (or Sign In):
• Go to https://codepen.io/index.html and create a free account if you don't have one
already, or sign in if you do.
• CodePen is a great platform to test, showcase, and share your React code for the
user registration form.
4. SetUp – React-JS

• Ensure you have Node.js installed on your system. Open your terminal or command
prompt.Navigate to your project directory.Run the following command:
• npx create-react-app my-app
• cd my-app
• npm start

46
 CHAPTER VI

CONCLUSION

In conclusion, an e-commerce website is a complex system that involves multiple

processes and interactions between the user and the system. The website must provide a user-
friendly interface that allows customers to easily browse products, add items to their cart, and
complete the checkout process. The website must also be secure and reliable, with robust
features to protect user data and ensure that transactions are processed accurately and
efficiently.

KEY FEATURES

• Product Catalog: A product catalog is a central component of an e-commerce system that

lists all the products that the business offers.
• Shopping Cart: A shopping cart is a virtual cart where users can add products to purchase at
a later time.
• Checkout Process: The checkout process is a critical component of an e-commerce system,
as it involves collecting payment information and shipping details from the user.

FUTURE ENHANCEMENT

Enhanced User Experience (UX):

• Interactive Features: React enables the creation of interactive elements like 360° product
views, AR/VR try-on experiences, and real-time product configurators, allowing customers
to better understand and interact with products before purchase.
• Voice Commerce Integration: React can be used to build voice-enabled shopping
experiences, allowing customers to search for products, add items to carts, and complete
purchases using voice commands.

47
BIBILOGRAPHY

The references in IEEE format:

1. L. Chen, "Enticing Online Consumers: A Technology Acceptance Perspective

Research-in-Progress," in ACM Proceedings, SIGCPR, 2000.

2. H. Diwakar and M. Marathe, "The architecture of a one-stop web-windowshop," in

ACM SIGecom Exchanges, vol. 2, no. 1, Dec. 2000.

3. M. Morrison, J. Morrison, and A. Keys, "Integrating Web Sites and Databases," in

Communications of the ACM, vol. 45, no. 9, Sep. 2002.

4. N. J. Kubilus, "Designing an e-commerce site for users," in Crossroads, vol. 7, no. 1,

Sep. 2000.

5. D. A. Norman, "The Design of Everyday Things". Doubleday, New York, 1994.

6. R. Tilson, J. Dong, S. Martin, and E. Kieke, "A comparison of two current ecommerce
sites," in Proceedings of the 16th annual international conference on Computer documentation,
Sep. 1998.

WEB REFERENCE

• https://react.dev/

• https://dev.mysql.com/doc/

• https://developer.mozilla.org/en-US/docs/Web/JavaScript

48