STYLEHUB : THE E-COMMERCE WEBSITE OCTOBER - 2024

1. Introduction
Purpose:
This project involves creating a fully functional, responsive e-commerce website
using HTML, CSS, and JavaScript. The website will allow users to browse and
search products, add items to their shopping cart, and complete purchases
through an intuitive user interface. The primary objective is to deliver a seamless
and user-friendly online shopping experience, optimized for both desktop and
mobile devices. Additionally, the website will include an admin interface for
managing products and user orders.

Scope:
The website will include the following components:
• Homepage: Displaying featured products and categories.
• Product Pages: Each product will have its own page displaying detailed
information like price, description, images, and availability.
• Shopping Cart: Users can add products, review their selection, update
quantities, and proceed to checkout.
• Checkout: The system will capture user shipping and payment details and
process their order.
• Order History: Registered users can track their past orders, including the
status of current orders.

Definitions, Acronyms, and Abbreviations:

• HTML: Hypertext Markup Language – the backbone of web content.
• CSS: Cascading Style Sheets – used for styling the website.
• JavaScript: A scripting language that enhances interactivity and
functionality.
• UI: User Interface – the design and layout of the website for users.
• UX: User Experience – how users interact with the website.
• CRUD: Create, Read, Update, delete – operations related to data
management.

DEPT : BACHELOR OF COMPUTER APPLICATIONS

JSSSTU,MYSURU
STYLEHUB : THE E-COMMERCE WEBSITE OCTOBER - 2024

2. Functional Requirements
User Management:
Users will be able to create accounts, log in, and manage their profiles. Profile
management will include updating personal information, managing addresses,
and reviewing their order history.
Product Display:
Products will be categorized for easy browsing. Each product will have an
individual page with product details (name, price, description, images, stock
availability, etc.). There will be a search functionality to help users find products
easily.
Shopping Cart:
Users can add products to their cart, modify quantities, and remove products.
The cart will dynamically display the total price of the selected items, including
any applied discounts. Users can proceed to checkout from the cart.
Checkout Process:
Users will be able to enter their shipping and payment information during the
checkout process. Once payment is confirmed, an order summary will be
displayed, and the user will receive a confirmation email. Payment options will
include credit/debit card and other methods like PayPal.
Order History:
Registered users will have access to a detailed history of their past orders,
including order status (processing, shipped, delivered) and the ability to reorder
items.
Admin Functionality:
Administrators will have access to a control panel for adding, updating, or
removing products, managing inventory levels, and viewing user orders. Admins
can also manage user accounts and view detailed sales reports.

DEPT : BACHELOR OF COMPUTER APPLICATIONS

JSSSTU,MYSURU
STYLEHUB : THE E-COMMERCE WEBSITE OCTOBER - 2024

3. Non-Functional Requirements
Performance:
The website should load within 2-3 seconds on average to avoid user
frustration. Images will be optimized, and code minimized to ensure fast load
times, even on slower internet connections.
Usability:
The website will be easy to navigate and visually appealing, with clear call-to-
action buttons. It will be responsive and work seamlessly across all major
devices (desktops, tablets, and smartphones).
Security:
The site will utilize HTTPS to secure all data transactions. User information,
especially payment details, will be encrypted using SSL/TLS protocols.
Additionally, strong password policies and secure authentication mechanisms
will be implemented.
Reliability:
The website will have minimal downtime and a high level of availability.
Redundant backups and error-handling mechanisms will be put in place to
ensure the site operates reliably.
Scalability:
The website will be designed to handle increased traffic as the number of
users grows. This will include the ability to handle a large catalog of products
and a high volume of concurrent transactions without significant
performance degradation.

4. Software and Hardware Requirements

• Software Requirements:
o Code Editor: Visual Studio Code or any other text editor for writing
HTML, CSS, and JavaScript.
o Web Browser: Google Chrome, Mozilla Firefox, or Microsoft Edge
for testing and debugging.
o Version Control: Git for tracking changes in the project and enabling
collaboration among team members.

DEPT : BACHELOR OF COMPUTER APPLICATIONS

JSSSTU,MYSURU
STYLEHUB : THE E-COMMERCE WEBSITE OCTOBER - 2024

• Hardware Requirements:
o Minimum: 4GB RAM, 500GB HDD, Dual-core processor for local
development.
o Internet: A stable connection is required for accessing resources,
version control, and testing.
o Optional: Access to a test server for simulating a real-world
environment.

5. System Architecture Diagram

User Interfaces:
• Desktop Browser: Customers can access the e-commerce website using a
desktop browser.
• Mobile Devices: Customers can also access the website using mobile
devices.

Core System (Style Hub E-com website):

The central part of the system is the e-commerce website itself, which handles
communication between the user interfaces and the various backend processes.

Backend Processes:
• Product Catalog: This section manages the list of products available on
the website. It interacts with a database that stores all product details.

DEPT : BACHELOR OF COMPUTER APPLICATIONS

JSSSTU,MYSURU
STYLEHUB : THE E-COMMERCE WEBSITE OCTOBER - 2024

• Shopping Cart: This handles customer selections as they add items to their
cart. It also connects to a database that tracks the items.
• Checkout Process: This process manages customer orders, allowing them
to finalize their purchases. It stores the transaction details in a database.
• Payment Processing: This section processes customer payments and
stores payment-related data in a secure database.
The arrows indicate the flow of data between the user interfaces, the central
website, and the backend systems. Each backend process is linked to its
respective database, which stores information related to that process.

6. Data Flow Diagram - Level 0

At Level 0, the data flow diagram (DFD) illustrates a general overview of the
system:

Customers:
• Represents the users who visit the Style Hub e-commerce website.
• The customers interact with the website to browse products, place orders,
and initiate payments.

Style Hub E-Commerce Website:

• This is the central system where the e-commerce operations take place.
• It serves as an interface between the customers and the payment gateway.
• It processes customer requests, displays products, manages shopping
carts, and handles orders.

DEPT : BACHELOR OF COMPUTER APPLICATIONS

JSSSTU,MYSURU
STYLEHUB : THE E-COMMERCE WEBSITE OCTOBER - 2024

• The website also sends transaction requests to the payment gateway after
customers proceed to checkout.

Payment Gateway:
• Once a customer places an order on the website and chooses to pay, the
website directs the customer to the payment gateway.
• The payment gateway processes the transaction securely and confirms
whether the payment was successful or not.
• After successful payment, the payment gateway sends the confirmation
back to the website.

Data Flow:
• Customers → Style Hub E-Com Website: Customers send requests to the
website, such as browsing products, adding items to their cart, and
submitting orders.
• Style Hub E-Com Website → Payment Gateway: After an order is placed,
the website forwards payment details to the payment gateway for
transaction processing.

7. Data Flow Diagram - Level 1

DEPT : BACHELOR OF COMPUTER APPLICATIONS

JSSSTU,MYSURU
STYLEHUB : THE E-COMMERCE WEBSITE OCTOBER - 2024

Customers:
Customers are at the center of this system. They interact with different
components like browsing products, managing their shopping cart, and placing
orders.

User Registration/Login:
• New customers can register or existing users can log in.
• This process interacts with the User Database, which stores user
credentials and related information.

User Database:
• Stores all customer data such as user profiles, login credentials, and
registration details.
• The user database is updated when users register or log in.

Product Browsing:
• Customers can browse products available on the e-commerce platform.
• This process retrieves information from the Product Database, which
contains product details, prices, and availability.

Product Database:
• Stores all product information, including product names, descriptions,
prices, and inventory details.
• It supplies data to the product browsing feature for customers to view.

Order Processing:
• When customers proceed to purchase, their order details are sent to the
order processing system.
• The order processing system manages the customer's request to buy
products and ensures that the transaction progresses smoothly.

Order Database:
• Contains records of all orders placed by customers.
• It stores order history, transaction details, and the status of current orders.

DEPT : BACHELOR OF COMPUTER APPLICATIONS

JSSSTU,MYSURU
STYLEHUB : THE E-COMMERCE WEBSITE OCTOBER - 2024

Shopping Cart Management:

• Customers can add items to their shopping cart, review them, and make
changes before proceeding to checkout.
• This process links with the order processing and ensures that the selected
items are ready for purchase.

Admins:
• Admins have control over the system, helping manage databases,
customer orders, and other operations.
• They interact with both the User Database and the Order Processing
system to maintain smooth operations.

Data Flow:
• Customers → User Registration/Login → User Database: Customers
register or log in, and the system verifies their information through the
user database.
• Customers → Product Browsing → Product Database: Customers browse
available products, which are fetched from the product database.
• Customers → Order Processing → Order Database: Once customers place
orders, the system processes them and stores the order details in the
order database.
• Customers → Shopping Cart Management → Order Processing: Customers
manage their shopping carts, and this data is sent to the order processing
system when they proceed to checkout.
• Admins → User Database & Order Processing: Admins have access to
manage users and orders, helping maintain and support the system's
operations.
• This diagram provides a more detailed view of the interactions and data
management within the Style Hub e-commerce system.

DEPT : BACHELOR OF COMPUTER APPLICATIONS

JSSSTU,MYSURU
STYLEHUB : THE E-COMMERCE WEBSITE OCTOBER - 2024

8. Data Flow Diagram - Level 2

Level 2 provides detailed data flow within the primary modules:

Components:
• Customers: This represents the end-users who place orders on the
website.
• Payment Gateway: This is an external service that handles the processing
of payments.
• Order Processing: This component is responsible for receiving and
processing customer orders.
• Generate Order Confirmation: This generates a confirmation message for
the customer once their order is placed successfully.
• Verify Payment: This component verifies the payment information
received from the payment gateway.
• Update Inventory: This updates the inventory database to reflect the
items purchased in the order.
• Payment Database: This database stores information related to
payments, such as payment status, transaction IDs, and payment
methods.
• Order Database: This database stores information about customer orders,
including order details, shipping address, and payment information.
• Inventory Database: This database maintains a record of the available
products and their quantities.

DEPT : BACHELOR OF COMPUTER APPLICATIONS

JSSSTU,MYSURU
STYLEHUB : THE E-COMMERCE WEBSITE OCTOBER - 2024

Data Flow:
• Customers place an order on the website.
• The Order Processing component receives the order information.
• The Order Processing component sends the order details to the Payment
Gateway for payment processing.
• The Payment Gateway processes the payment and sends a response to
the Order Processing component.
• The Order Processing component generates an Order Confirmation
message and sends it to the Customers.
• If the payment is successful, the Order Processing component verifies the
payment with the Payment Gateway.
• The Order Processing component updates the Inventory Database to
reduce the quantity of the purchased items.
• The Order Processing component stores the order information in the
Order Database.
• The Payment Gateway stores the payment information in the Payment
Database.
• This diagram provides a high-level overview of the data flow involved in a
e-commerce website. It shows how customer orders are processed,
payments are handled, and inventory is updated.

9. Use Case Diagrams

Admin:

DEPT : BACHELOR OF COMPUTER APPLICATIONS

JSSSTU,MYSURU
STYLEHUB : THE E-COMMERCE WEBSITE OCTOBER - 2024

Customers:

Payment gateway:

DEPT : BACHELOR OF COMPUTER APPLICATIONS

JSSSTU,MYSURU