AIGS- Acharya Institute of Graduate Studies, Bengaluru-560107

W E B B A S E D A P P L I C AT I O N U S I N G M E R N

SUMANT
KUMAR(P18AJ22S126111)
 Contents
 Company profile
 Abstract
 Introduction
 Existing system
 Proposed system
 Project module description
 Design (Context Diagram/DFD/Use
case Diagram/ Activity diagram/ER
Diagram)
 Implementation (screen shot)
 Conclusion
 Future enhancement
 Company Profile

EduPhoenix Solutions is a professional website designing company in

Bangalore, who is creative, driven and solution oriented. We design your
website to represent your presence on the web in ways that are up-trend
and market defined. We providing web design services in Bangalore, our
collective experience in working with a wide array of clients and
technology has enabled us to provide the right solution for your needs.
 Abstract
The E-Commerce Web Application is a dynamic and user-friendly
platform designed to facilitate online buying and selling. Developed
using a combination of HTML, CSS, JavaScript, and PHP, this application
provides a seamless and interactive shopping experience for users.

Key Features:
 User Authentication:
 Secure user registration and login system.
 Password encryption for enhanced security.
 Product Catalog:
 Organized product categories and subcategories.
 Dynamic product pages with detailed descriptions, images, and prices.
 Shopping Cart:
 Interactive shopping cart for users to add, update, and remove items.
 Real-time calculation of total order value .
 FEATURES OF ROLLOMAN
 Checkout Process:
 Streamlined checkout process with multiple payment
options.
 Address validation and order confirmation. USERS’s PRODUC PAYMENT
 User Dashboard: ACCOUNT T METHODS
• Personalized user profiles displaying order history and DETAILS
preferences.
 Admin Panel:
 Secure admin login for managing products, orders, and
users.
 Analytics and reporting tools for tracking sales and site

performance.
 Security Measures:
 Implementation of HTTPS for secure data transfer.
LOGIN SEARCH CART
 Input validation and protection against common web
AND A DETAILS
vulnerabilities. REGISTRATIO PRODUC
N T
 INTRODUCTION
What is E-Commerce
 Commonly know as Electronic Marketing.
 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.
 “It consist of buying and selling good and services over an
electronic systems such as the internet and other computer
network.”
THE PROCESS OF E-COMMERCE

Buyer
Tradition
al
Delivery Electronic
Distributi
on 1.Search
5.After- and
Sales Identificatio
Service n

2.Selection
4.Product and
and Service Negotiation
Delivery

3.Purgchasi
ng
The include manual processes, paper-existing system might
based documentation, and possibly some basic tools for
managing tasks and projects related to Rolloman.
 Some key points of Existing System:

1. Market Research

2. Define Goals and Objectives

3. Choose a Platform

4. User-Friendly Design

5. Product Listings and Descriptions

6. Secure Payment Gateway
7. Shipping and Delivery

8. Customer Support
10. Social Media Integration
 Proposed system

The proposed system outlines the objectives, scope, and key

features that the project aims to achieve.
 Feature of Proposed System:

1. User-Friendly Interface

2. Product Catalog

3. Secure Checkout Process

4. Account Management

5. Inventory Management

6. Multiple Payment Options

7. Shipping Options
 Project module descrip
 In the context of an e-commerce web application, a "project module" typically refers to a
specific functional component or feature of the overall system. Below is a breakdown of
various project modules that are commonly found in e-commerce applications:
 User Management Module:
 User Registration: Allows users to create accounts with necessary details.
 User Login/Logout: Authentication process for secure access.
 User Profile: Enables users to manage personal information and preferences.
 Password Recovery: A mechanism for users to reset forgotten passwords.
 Product Management Module:
 Product Catalog: Displays a list of products with details and images.
 Product Search: Allows users to search for products based on various criteria.
 Product Details Page: Shows detailed information about a specific product.
 Shopping Cart Module:
 Add to Cart/Remove from Cart: Users can add products to their shopping cart
and modify the quantity.
 Cart Summary: Displays an overview of items in the cart with the total cost.
 Proceed to Checkout: Initiates the checkout process.
 Checkout Module:
 Address Entry: Users provide shipping and billing information.
 Order Summary: Displays a summary of the order before finalizing the purchase.
 Payment Processing: Integrates with a payment gateway for secure transactions.
 Order Confirmation: Sends confirmation emails and updates the order status.
 Order Management Module:
 Order History: Users can view their past orders and track current orders.
 Order Processing: Allows administrators to manage and fulfill orders.
 Invoice
Each of these modules contributes
Generation: Generates toinvoices
the overall functionality
for completed and success of an e-commerce
orders.
web application.
 Design
 Context Diagram
In a e-commerce website designed for a retail chain, a context diagram is used to
show the relationship among the external components made up of the customers,
staff, management, and payment system.
 Design
 USE CASE DIAGRAM
The use case diagram for e-commerce website is the behavioral diagram that
summarizes activities done in the e-commerce website and its user details. It
depicts the graphical representation of the system’s behavioral structure .
 Design
 Activity Diagram
E-Commerce Website Activity Diagram (Seller and Buyer Side) – This diagram shows the flow of
activities when a buyer and seller get to communicate through the website. It clarifies the included
processes and the exchange of request between the buyer and the website as well as the seller.
 Design
 DATA FLOW DIAGRAM
A data flow diagram is a graphical representation of the flow of data through an
information model. A data flow diagram can also be used for the visualization of
data processing.
0 Level DFD:
The context diagram is an alternative name for the Level 0 DFD Diagram for E-
commerce Website. Users, the main process, and data flow make up its parts.
Also, the project concept is demonstrated using the single process visualization.

Price Details Purchase/ order Details

Product Record
0.0

Website E-commerce Customer

Admin Customer info
website

Customer info

Purchase/ order Details Payment Details

 Design
1 Level DFD:
level 1 shows the broader details of E-commerce Website DFD Level 0. This is to
clarify the paths (flow) of data and its transformation from input to output.

Customer info 1.1 Customer info

Manage
Customer Order Details
Order Details information

1.2 Product Details

Manage
Product
information

Category list

Customers Purchase Details Website

Admin
Payment Details

List of price

1.4 1.3

Manage Manage
Transactio Payment
ns Revenue

Receipt Details Transaction update

 Design
2Level DFD
Level 2 DFD for E-commerce Website is also the highest abstraction of the data
flow diagram. This level also broadens the idea from the DFD level 1. It includes
the sub-processes from level 1 as well as the data that flows.

However, not all of the processes in the project must have sub-processes. Only
provide this diagram if needed. As long as your previous diagrams were clear and
precise, this level is not required.
 Design
ER-Diagram
Creating a complete Entity-Relationship Diagram (ERD) for an entire e-commerce
web application is quite complex due to the multitude of entities and relationships
involved.
 Implementation
 Register Page
(screen shot)
 Login Page
In this page the user can Register with our The user can login with their username and
website with their personal details which is password to search items, view products,
secure. Search items selling and buying.

Register Page Screenshot Login Page Screenshot

 USERS ACCOUNT
 Home page
This is the homepage of Rolloman E-commerce where user can search products,
view products, Order Products see their profile etc.

Homepage Screenshot
 SEARCH A
PRODUCT
 Search item
In this page user can search Products.
It is an important aspect as it helps a user in searching any product which he/she needs directly
instead of exploring the whole website. For searching, a user enters the required product name and
that product with some related products comes down in the form of a list.

Search items Screenshot

 PRODUCTS CATEGORY
 Product Category
In this page the user can see all of the Products Category.

Category Screenshot
 LATEST PRODUCTS & WISH
LIST
 Latest Products  Product Add to Wish list
In this page the user can see all the
In this page the user can see all the Latest Products.
Wishes Items.

Latest products Screenshot Add to Wish Item Screenshot

 PRODUCTS
DETAILS
 Product View
In this page the user can see the Products Details view.

Product View Screenshot

 CART DETAILS & FOOTER
 Product Add to Cart VIEW
 Footer view
In this page the user can see all of the Add In this page the user can see all of the
Items in Shopping Cart. footer details.
User can simply add a product to cart the cart so that
when he want to order different types of items he can
view all those items in his cart and order them .User can
also vary the count of number of items needed by him.

Add to Cart Screenshot footer view Screenshot

 PAYMENT
METHODS
 Order details
In this page the user can see all of the Orders Details.
It comprises of all the payment options which user can select to order a
product. There are various options for payment like:

CASH ON DELIVERY

DIRECT BANK TRANSFER

CREDIT CARD PAYMENT

Order details Screenshot

 CONCLUSION
The E-Commerce website project is developed
using PHP, MySQL, CSS, Bootstrap, and JavaScript.
It prioritizes user and administrator needs, offering
essential features such as product browsing, cart
management, checkout, and detailed
administrative functionalities. The project is
designed with flexibility for future enhancements
and is characterized by a user-friendly interface.
In India the market share is divided amongst several
ecommerce companies, each coming up with its own business
model. As a result, customers have a wide range of products
and services to choose from.
 FUTURE
WORK

 Future e-commerce enhancements for Rolloman:

1.Personalization: Advanced algorithms for personalized recommendations.
2.Augmented Reality (AR): Visualizing products before purchase.
3.Chatbots and AI: Efficient customer support.
4.Voice Search: Convenient shopping via voice-activated devices.
5.Social Commerce: Direct purchases through social media.
6.Block chain Security: Secure transactions and build trust.
7.Mobile Optimization: Seamless experience on smartphones.
8.Data Analytics: Insights for informed business decisions.