A PROJECT REPORT ON

“E-commerce for electronic devices”

A major project report submitted in partial fulfilment of the requirements

for the award of the Degree of Bachelor of Technology

In

Computer Science and Engineering

Submitted by

[Full Name of the student][Reg. Number ]

Under the supervision of

[Supervisior Name ]

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

GANDHI ENGINEERING COLLEGE, BHUBANESWAR
Gandhi Vihar, Madanpur, Bhubaneswar-752054 2019-2023
 Certificate
This is to certify that the work in the Project entitled E-commerce for

electronic devices by [Student Name], bearing [[Link].], is a record of an

original research work carried out under my supervision and guidance in

fulfilment of the requirements for the award of the degree of Doctor of

Philosophy in Computer Science & Engineering. Neither this project nor any

part has been submitted for any degree or academic award elsewhere.

To the best of my knowledge, [Student Name] bears a good moral

character and decent behaviour.

Jyotiranjan Sahoo
Designation of the Supervisor,

Department of Computer Science & Engineering,

Gandhi Engineering Collage,

Bhubaneswar
 ACKNOWLEDGEMENT

Our sincere thanks to Dr Dushmanta Kumar Padhi, Professor and Head of

the Department of Computer Science & Engineering, Gandhi Engineering

College (GEC), Bhubaneswar, for his encouragement and valuable suggestions

during the period of our Project work.

No words would suffice to express my regards and gratitude to Jyotiranjan

Sahoo, Department of Computer Science & Engineering, for his inspiring

guidance and constant encouragement, immense support and help during the

project work.

Place: GEC Name: Prithivi Sharma

Date: 20/03/24 Reg Number: 2001292117

Abstract

The project focuses on creating a user-friendly platform that seamlessly integrates various electronic

products, catering to the evolving needs of tech-savvy consumers. Emphasizing a responsive design,

secure payment gateways, and robust inventory management, the website aims to provide a

streamlined and enjoyable shopping experience. Through strategic implementation of features such

as detailed product descriptions, customer reviews, and personalized recommendations, the platform

seeks to enhance user engagement and satisfaction. The report also delves into the challenges faced

during development and discusses potential future enhancements to ensure the website remains

competitive in the dynamic landscape of electronic commerce.

Table of Contents
Chapter 1. Introduction 1
1.1 Introduction to Project 1
1.2 Project Category 2
1.3 Objectives 3
1.4 Problem Formulation 3
1.5 Identification/Reorganisation of Need 4
1.6 Existing System 4
1.7 Proposed System 4
1.8 Unique Feature of the System 5

Chapter 2. Requirement Analysis and System Specification 6

2.1 Feasibility Study 6
2.1.1 Technical Feasibility 6
2.1.2 Economical Feasibility 6
2.1.3 Operational Feasibility 6
2.2 Software Requirement Specification Document 6
2.2.1 Data Requirement 6
2.2.2 Function Requirement 7
2.2.3 Performance Requirement 7
2.2.4 Dependability Requirement 7
2.2.5 Maintainability Requirement 9
2.2.6 Security Requirement 10
2.2.7 Look and Feel Requirement 11
2.3 Validation 11
2.4 Expected Hurdles 11
2.5 Software Development Life Cycle (SDLC) 11

Chapter 3 System Design 14

3.1 Design Approach 14
3.2 Structured Analysis and Design Tools 14
 3.2.1 DFD’s (Data Flow Diagrams) 14
3.2.2 Data Dictionary 18
3.2.3 Structured Charts 20
3.2.4 Flowcharts 21
3.3 User Interface Design 23
3.4 Database Design 24
3.5 ER Diagram 25
3.6 Normalization 26
3.7 Database Manipulation 26
3.8 Database Connection Controls 28
3.9 String Methodology 29
Chapter 4. Implementation, Testing, and Maintenance 31
4.1. Introduction to Languages, IDE’s, Tools and Technologies used for 31
implementation
4.2. Coding standards of Language used 35
4.3. Introduction to Tools and Technologies 38
4.4. Testing Techniques and Test Plans 42
4.5. Project Scheduling 44
4.5.1. WBSe3r4 47
4.5.2. PERT 49
4.5.3. GANTT Charts 50
4.6 Testing Techniques and Test Plans 51
Chapter 5. Results and Discussions 55
5.1. User Interface Representation (of Respective Project) 55
5.2. Brief Description of Various Modules of the system 56
5.3. Snapshots of system 58
5.4. Back Ends Representation (Database to be used) 61
5.5. Snapshots of Database Tables 63
Chapter 6. Conclusion 67
Chapter 7. Reference 68
List of Tables
Table 1. Customer Table 18
Table 2. Address Table 18
Table 3. Shopping Cart Table 19
Table 4. Payment Table 19
Table 5. Product Table 19
Table 6. Order Table 20
Table 7. Product in Cart 20
Table 8. Phase planning 45
Table 9. Milestone achievement 46
List of Figures

Fig 1. Level 0 DFD 15

Fig 2. Level 1 Admin Side DFD 16
Fig 3. Level 1 User Side DFD 16
Fig 4. Level 2 Admin Side DFD 17
Fig 5. Level 2 User Side DFD 17
Fig 6. Structure Chart 21
Fig 7. Flowchart 22
Fig 8. Home Page 23
Fig 9. Sign-Up Page 23
Fig 10. User management 24
Fig 11. ER Diagram 25
Fig 12. Normalization 26
Fig 13. WBS 48
Fig 14. Pert Chart 49
Fig 15. Gantt Chart 50
Fig 16. Home Page 57
Fig 17. Product List Page 58
Fig 18. PDP 58
Fig 19. Cart 59
Fig 20. Check-Out 60
Fig 21. Customer Database Table 62
Fig 22. Products Database Table 62
Fig 23. Categories Database Table 63
Fig 24. Order Database Table 64
Fig 25. Wishlist Database Table 65
Fig 26. Shipping Database Table 65
Chapter 1: Introduction

1.1 Introduction to Project

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 (such as computers, mobile phones, electronic items, and home appliances) can be

bought from the comfort of home through the Internet. However, for implementation

purposes, this paper will deal with an online book store.

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.

Usually, the customer will be asked to fill or select a billing address, a shipping address, a

shipping option, and payment information such as credit card number. An e- mail notification

is sent to the customer as soon as the order is placed.

1
1.2 Project category

The project falls under the category of Internet-based Application Development.

1. Website Development:

- Designing and creating the user interface (UI) and user experience (UX) of the website.

- Implementing responsive design for compatibility across various devices (desktop,

mobile).

2. Backend Development:

- Creating a database to store product information, user data, and transaction details.

- Implementing server-side scripting for functionalities like user authentication, order

processing.

3. Payment Integration:

- Integrating with payment gateways to facilitate online transactions securely.

- Ensuring compliance with industry standards for handling sensitive financial information.

4. Product Management:

- Building a system for adding, updating, and removing products from the inventory.

- Implementing features such as product categories, search, and filters.

5. User Authentication:

- Creating a secure user registration and login system.

- Allowing users to manage their profiles, track orders, and view order history.

6. Order Processing:

2
 - Developing a smooth checkout process, including cart management

1.3 Objective

• Establish an Online Marketplace: Create a user-friendly platform for buying and

selling electronic devices.

• Enhanced User Experience: Develop features that enhance the overall shopping

experience, including user-friendly interfaces, secure payment gateways, and

personalized recommendations.

• Vendor Management System: Implement a robust system for vendors to manage

their product listings, track orders, and interact with customers.

• Integration of Secure Payment Systems: Ensure the integration of secure payment

gateways to facilitate safe and reliable transactions.

• User Reviews and Ratings: Implement a feedback system to allow users to review

and rate products, enhancing transparency and trust.

1.4 Problem Formulation:

The traditional shopping for electronic devices involves physical stores, limiting accessibility

and convenience. Customers often face challenges in finding specific products, comparing

prices, and obtaining detailed information about the latest gadgets. This project aims to

address these issues by providing a centralized platform for electronic device enthusiasts.

3
1.5 Identification/Reorganization of Need:

The need for a specialized e-commerce platform for electronic devices arises from the

growing demand for convenient online shopping experiences. Users require a dedicated space

where they can explore a wide range of electronic products, make informed decisions, and

easily complete transactions.

1.6 Existing System:

Currently, electronic devices are sold through various online marketplaces, but there is a lack

of focus on creating a dedicated platform for this niche. The existing systems may not offer

specific features tailored to the needs of electronic device shoppers, such as detailed product

specifications, comprehensive reviews, and a seamless vendor management system.

1.7 Proposed System:

The proposed system is an e-commerce platform designed exclusively for electronic devices.

It will provide a user-friendly interface, real-time inventory updates, secure payment options,

and a comprehensive vendor management system. The platform will be optimized for

electronic device enthusiasts, offering a one-stop-shop for all their needs.

4
 1.8 Unique Features of the System:

• Product Specification Comparison: Users can easily compare specifications of

different electronic devices to make informed decisions.

• Expert Reviews and Guides: Provide expert reviews and guides to help users

understand the latest trends, technologies, and features in electronic devices.

• Exclusive Deals and Offers: Offer exclusive deals and discounts to registered users,

fostering customer loyalty.

• AI-Powered Recommendations: Implement an AI-driven recommendation system

that suggests products based on user preferences and browsing history.

• Vendor Dashboard: Vendors will have a dedicated dashboard to manage their

product listings, track orders, and communicate with customers.

By combining these unique features, the proposed system aims to create a specialized and efficient

platform for electronic device enthusiasts, catering to their specific needs in the online shopping

space.

5
Chapter 2

Requirement Analysis and System Specification

2.1 Feasibility Study

Feasibility study for our e-commerce project involves a systematic process to evaluate its

viability and potential success.

2.1.1 Technical Feasibility

Determine whether our team has the necessary expertise to implement the feature and

estimate the time and resources required for its development

2.1.2 Economical Feasibility

The business objective is to increase user productivity and satisfaction by providing

an intelligent task prioritization system. The scope includes the integration of the AI-

based feature within the existing software, as well as any necessary training for users

to understand and use the feature effectively

2.1.3 Operational Feasibility

Collecting data on competitors who may already be offering similar features and

determine the unique selling points of your proposed solution.

2.2. Software Requirement Specification Document (SRS)

2.2.1 Data Requirement

- Define the data model for the electronic devices catalog, user profiles, order history,

and payment details.

- Specify the database schema and relationships.

6
2.2.2 Functional Requirement

By conducting the requirements analysis we listed out the requirements that are useful

to restate the problem definition.

- User Registration and Authentication

- Product Catalog and Search

- Shopping Cart and Checkout

- Order Management

- User Profile Management

- Payment Gateway Integration

- Product Reviews and Ratings

2.2.3 Performance Requirement

• A customer should easily find the right product for them, understand what

problems it solves, and make a purchase without contacting us.

• No multistep checkout: users must reach the “add to cart” button in one step

from PDP.

- Response time for user interactions (e.g., page loading, search queries).

The website’s homepage should load in less than 4 seconds.

2.2.4 Dependability Requirement

Dependability is a crucial aspect for an e-commerce website to ensure that it operates

reliably and consistently.

Here are some key dependability requirements for our e-commerce website:

7
1. Availability:

- This website should be available and accessible to users 24/7, with minimal

downtime.

2. Reliability:

- Ensured that the website functions reliably without errors or crashes.

3. Performance:

- Optimize website performance to provide fast loading times for pages and

transactions.

- Conduct load testing to assess the website's ability to handle peak traffic without

degradation in performance.

4. Scalability:

- Implemented scalability measures to handle the growth in the number of products,

users, and transactions.

5. Data Integrity:

- Implement mechanisms to ensure the integrity of data, especially during

transactions.

- Use encryption for sensitive data such as customer information and payment

details.

6. Security:

- Regularly update and patch software to address security vulnerabilities.

7. Backup and Recovery:

- Regularly back up critical data and implement a reliable data recovery plan.

- Test backup and recovery processes to ensure they can be quickly and effectively

executed in case of data loss or system failure.

8
2.2.5 Maintainability Requirement

1. Modularity and Code Organization:

- Utilize modular design principles to compartmentalize code into manageable and

reusable components.

- Adopt a consistent coding style and documentation to enhance readability and ease

of understanding.

2. Version Control:

- Implement a version control system (e.g., Git) to track changes, collaborate

efficiently, and roll back to previous states if necessary.

- Enforce a branching strategy that separates development, testing, and production

environments.

3. Automated Testing:

- Develop and maintain a comprehensive suite of automated tests for functionality,

performance, and security.

- Implement continuous integration and continuous deployment (CI/CD) pipelines

to automate testing and deployment processes.

4. Scalability:

- Design the architecture with scalability in mind to handle increased traffic and data

volume.

- Regularly conduct performance testing to identify bottlenecks and optimize

accordingly.

5. Documentation:
9
 - Maintain up-to-date documentation for the entire system, including codebase,

APIs, and databases.

- Provide clear instructions for troubleshooting common issues and performing

routine maintenance tasks.

6. Security Updates:

- Stay abreast of the latest security threats and vulnerabilities.

- Promptly apply security patches and updates to frameworks, libraries, and

dependencies.

7. Logging and Monitoring:

- Implement robust logging mechanisms to capture relevant information for

debugging and analysis.

- Set up monitoring tools to detect performance issues, anomalies, and potential

security breaches.

8. User Feedback and Analytics:

- Collect and analyse user feedback to identify pain points and areas for

improvement.

- Utilize analytics to track user behaviour, assess feature usage, and guide decision-

making for updates.

2.2.6 Security Requirement

- Secure user data through encryption and secure authentication.

- Implement secure payment processing.

- Guard against common security threats (SQL injection, cross-site scripting).

10
 2.2.7 Look and Feel Requirement

- Design an intuitive and user-friendly interface for the e-commerce platform.

- Ensure consistency in layout and navigation.

2.3. Validation

- Conduct thorough testing of each module to ensure functionality and performance.

- Using test cases to validate security measures.

- Get feedback from potential users through beta testing.

2.4. Expected Hurdles

- Integration challenges with external systems and APIs.

- Ensuring the security of user data and financial transactions.

- Addressing performance issues, especially during high traffic periods.

- Managing the learning curve for users and staff.

2.5. SDLC Model

Use the Agile development model to iteratively develop and enhance the e-commerce

platform. This allows for continuous feedback, adaptation to changing requirements, and

faster delivery of features.

Integrating the Agile Development Model in E-commerce Website Development

In the dynamic landscape of e-commerce, the success of a website is contingent on its ability

to adapt swiftly to changing market trends and user preferences. The Software Development

Life Cycle (SDLC) plays a pivotal role in shaping the efficiency and effectiveness of the

development process. This report delves into the significance of integrating the Agile
11
Development Model within the SDLC framework for the development of an e-commerce

website.

Agile Development Model Overview:

The Agile Development Model is an iterative and incremental approach to software

development, emphasizing flexibility, collaboration, and customer feedback. It is well-suited

for projects with evolving requirements, making it an ideal choice for the ever-evolving and

competitive e-commerce industry.

Key Principles of Agile:

1. Customer Collaboration over Contract Negotiation: Agile places a strong emphasis on

continuous customer involvement throughout the development process, ensuring that the final

product aligns closely with customer expectations and needs.

2. Responding to Change over Following a Plan: Agile embraces changes in requirements

even late in the development process, allowing e-commerce websites to quickly adapt to

market shifts and technological advancements.

3. Individuals and Interactions over Processes and Tools: Agile values communication and

collaboration among team members, fostering a dynamic and responsive development

environment.

4. Working Software over Comprehensive Documentation: While documentation is

important, Agile prioritizes delivering a functional product, providing tangible value to end-

users.

Benefits of Agile in E-commerce Website Development:

1. Quick Adaptation to Market Changes: The iterative nature of Agile allows developers to

respond rapidly to market changes, ensuring the website remains competitive and relevant.

12
2. Continuous Improvement: Regular feedback loops enable continuous improvement,

leading to a website that is not only functional but also refined based on user experiences and

preferences.

3. Enhanced Collaboration: Agile promotes cross-functional teams and constant

communication, facilitating collaboration between developers, designers, and stakeholders,

resulting in a more cohesive and effective development process.

4. Reduced Time to Market: The incremental development approach of Agile allows for the

release of minimum viable products (MVPs) sooner, enabling a quicker time to market for e-

commerce websites.

13
Chapter 3

System Design

3.1 Design Approach

The design approach for this e-commerce platform will be Function-Oriented. This approach

is suitable for handling the complex relationships and interactions between various entities in

an e-commerce system.

3.2 Structured Analysis and Design Tools:

Our primary goal is to improve quality and reduce the risk of system failure.

3.2.1 DFD’s (Data Flow Diagrams):

Data Flow Diagrams show the flow of data from external entities into the system,

and from one process to another within the system. There are four symbols for

drawing a DFD:

1. Rectangles representing external entities, which are sources or destinations of

data.

II. Ellipses representing processes, which take data as input, validate and process it

and output it.

Ⅲ. Arrows representing the data flows, which can either, be electronic data or

physical items.

14
 IV. Open-ended rectangles or a Disk symbol representing data stores, including

electronic stores such as databases or XML files and physical stores such as filing

cabinets or stacks of paper.

Figures below are the Data Flow Diagrams for the current system. Each process within

the system is first shown as a Context Level DFD and later as a Detailed DFD. The

Context Level DFD provides a conceptual view of the process and its surrounding

input, output and data stores. The Detailed DFD provides a more detailed and

comprehensive view of the interaction among the sub-processes within the system.

• Level 0 DFD: Represents the overall system.

Fig 1

• Level 1 DFD: Breaks down the system into major processes.

o Level 1 Admin side DFD

15
 Fig 2

o Level 1 User Side DFD

Fig 3

16
• Level 2 DFD: Provides detailed data flow within each process.

Level 2 Admin side DFD

Fig 4

Level 2 User side DFD

Fig 5

17
 3.2.2 Data Dictionary:

- Contains detailed descriptions of data elements used in the system

• Customer table- this table contains the information of the customers

Table 1

Column Status Attribute DataTypes Size Description

Not Null Customer_ID VARCHAR 9 Customer identification number, it

Primary Key consists of unique number.

Not Null First_name VARCHAR 10 First name of the Customer

Not Null Last_name VARCHAR 10 Last name of the Customer

Not Null E-mail VARCHAR 20 Email address of the address

Not Null Password VARCHAR 20 Password of the Customer

Not Null Phone_No. VARCHAR 10 Phone number of the Customer

Not Null Address_ID VARCHAR 20 Postal Address of the Passenger

Foreign Key

• Address table- this table contains the information of the flight

Table 2

Column Status Column DataType Size Description

Not Null / Primary key Address_ID VARCHAR 10 Address ID (unique)

Not Null Address VARCHAR 20 Address of the customer

Not Null City VARCHAR 15 City of the customer

Not Null State VARCHAR 15 State of the customer

Not Null Pin_code INT 8 Zip of the customer city

18
 • Shopping cart table- this table contains the information of shopping cart of customer

Table 3

Column Status Attribute Data Type Size Description

Not Null

primary key Cart_ID VARCHAR 8 Shopping cart identification (unique)

Not Null Product_ID VARCHAR 8 ID of the selected product by customer

Not Null Address_ID VARCHAR 10 Customer address

Not Null Quantity INT 15 Quantity of the products

Not Null Product_Name VARCHAR 12 Name of the product

• Payment table- this table contains the information of payment of customer

Table 4

Column_Status Attribute DataType Size Description

ID of Payment given to

Not Null Payment_ID VARCHAR 10 customer

ID of product selected by

Not Null Product_ID VARCHAR 10 customer

Not Null Order_ID INT 16 Gives information of order

Not Null Amount INT 20 Information about amount

• Product table- this table contains the information of product selected by customer

Table 5

Column_Status Attribute DataType Size Description

Not Null/ Primary key Product_ID INT 10 Unique number of product in the cart

Not Null Product Name VARCHAR 15 Name of the product

19
Not Null Product Price INT 20 Price of the product

• Order table- this table contains order details

Table 6

Column_Status Attribute DataType Size Description

Not Null/Primary Gives the information of order number

Key Order_ID VARCHAR 16 which is unique

Not Null/Foreign Customer identification number, it

Key Customer_ID VARCHAR 9 consists of a unique number

Not Null/Foreign

Key Product_ID VARCHAR 10 Unique number of the product in the cart

Not Null Customer_Status VARCHAR 8 Gives the status of the customer

• Product in cart – this is an associate entity for Product and Shopping cart table

Table 7

Column_Status Attribute DataType Size Description

Not Null Product_ID VARCHAR 10 Unique number of product in the cart

3.2.3 Structured Charts:

Structure charts are used to graphically model the relationship between modules within a

system. Through the use of a hierarchical format, the sequence of processes along with the

movement of data and control parameters can be mapped for interpretation. The control

structures of sequence, selection and iteration (repetition) can all be represented within a

structure chart for an illustrated system.

20
 Fig 6 Structured Chart

3.2.4 Flowcharts:

The flowchart of our ecommerce represents a streamlined process that integrates

seamlessly with the ecommerce platform, allowing users to explore, add recommended

products to the cart, and proceed to checkout. This dynamic and personalised approach

enhances the overall user experience, aligning with our commitment to providing tailored

solutions for individual health needs.

21
Fig 7 Flow Chart

22
3.3 User Interface Design

The user interface will be designed to provide an intuitive and seamless experience for users.

• Home Page

Fig 8 home page

• Sign Up Page

User-friendly signup for easy access! and existing users can effortlessly log in for a
seamless experience.

Fig 9 Sign Up page

23
3.4 Database Design

Databases are vital tools for storing, managing, and retrieving information. They are also critical for

building an e-commerce system. A well-structured database powers e-commerce and manages all the

interactions within the system.

User management:

We have created a user table that contains all the user details along with user_payment and

user_address tables to store multiple addresses and payment details of users. This structure offers

more granular control over data while eliminating duplicate records.

Fig 10

Product management

Managing products is not simply about maintaining a list of products. You also have to manage the

inventory, discounts, categories, and other attributes of the products. So always focus on simplifying

the data structure while reducing duplicates.

24
3.5 ER Diagrams

Our ecommerce website's ER diagram depicts key entities (User, Product, Order, Payment,

Address) and their relationships. It clarifies connections: user to registration, product to orders,

and payments to transactions. These concise visual aids understanding of the interconnected

database, essential for efficient ecommerce operations.

Fig 11 ER Diagram

25
3.6 Normalization

Normalization will be applied to ensure data integrity and minimize redundancy in the database.

Fig 12 Normalization

3.7 Database Manipulation

Database manipulation for our ecommerce website involves the efficient handling and modification

of data within the database.

Database operations will be performed using SQL queries. CRUD (Create, Read, Update, Delete)

operations will be implemented for entities like User, Product, Order, and Payment.

26
 • Create

The first operation in PHP CRUD Operations, Create, is responsible for creating tables or new

records into an existing table. To do that, first, you must write the code for the webpage to

create an entry in the database.

To create the data, we need the content that is going to be inserted in the database using
the following operation:

$sql = "INSERT INTO `user`(`firstname`, `lastname`, `email`, `password`, `gender`)

VALUES ('$first_name','$last_name','$email','$password','$gender')";
$result = mysqli_query($conn, $sql);

• Read

The second operation, just as the name suggests, ‘Read’ is used to display or read the data that

is already available in the database.

To perform the operation, you need to create a page that displays the records from the table:

$sql = "SELECT * FROM `user`";

$result = mysqli_query($conn, $sql);

• Update

The third operation i.e, ‘update’ is used to change or modify the already existing data present

in the database.

To do this, you need to create another page to update the details in the database.

$sql = "UPDATE `user` SET `name` = 'FromBihar' WHERE `dest` = 'Bihar'";

$result = mysqli_query($conn, $sql);

27
 • Delete

The last operation of CRUD is Delete and just as the name suggests, it is used to delete an

existing entry or table.

To perform this operation, you must create a page that would let you choose the data entry

that you want to delete from the database.

$sql = "DELETE FROM `user` WHERE `dest` = 'Russia' LIMIT 13";

result = mysqli_query($conn, $sql);

3.8 Database Connection and control

Connecting to the Database

Now to connect our script to the MySQL databases we are using MySQLi extension.

MySQLi: MySQLi is an open-source relational database management system that is used on the web.

This database system is reliable for both small and large applications.

28
Using MySQLi: We need to create 3 variables for $servername, $username and $password. Now we

<?php

// Connecting to the Database

$servername = "localhost";

$username = "root";

$password = "";

// Create a connection

$conn = mysqli_connect($servername, $username, $password);

// Die if connection was not successful

if (!$conn){

die("Sorry we failed to connect: ". mysqli_connect_error());

else{

echo "Connection was successful";

?>
will connect to the server using mysqli_connect.

3.9 Strings Methodology

Product Descriptions and Information:

We have used Strings to store and display product information, including names, descriptions, and

specifications.

29
Used consistent and clear string formatting for product details to ensure a professional and user-

friendly presentation.

query GetProducts {

products(

where: {OR: [ { brandName: "${search_item}" }, { tag_contains_some: "${search_item}" },{

name_contains: "${search_item}" } ]

category: { _search: "${category}" }

}) {

id, name, price, productImage { url }, tag, description, brandName,category {

name

} } }

Search Functionality:

We have used String matching algorithms that is crucial for effective search functionality.

Implementing techniques like fuzzy matching or partial string matching can enhance the search

experience for users.

User Input Validation:

Strings obtained from user inputs (e.g., search queries, form submissions) should be validated and

sanitized to prevent security vulnerabilities like GraphQl,SQL injection.

30
Chapter 4

Implementation, Testing, and Maintenance

o Implementation involves turning design into actual code.

o Testing ensures software quality.

o Maintenance addresses ongoing support and enhancements.

4.1 Introduction to Languages:

Languages: The primary language used for development is JavaScript, PHP and GraphQl, along

with HTML and CSS for markup and styling.

PHP (Hypertext Preprocessor) is a widely-used, open-source scripting language primarily

designed for server-side development. Here are some key points about PHP:

[Link]-Side Execution:

• PHP code is executed on the server, not in the user’s browser.

• It processes requests, generates dynamic content, and returns the result as plain HTML to

the client.

[Link]:

• PHP files can contain a mix of text, HTML, CSS, JavaScript, and PHP code.

• You’re not limited to outputting just HTML; you can also generate images, PDF files, and

other formats.

[Link] Use Cases:

• Database Interaction: PHP can create, read, update, and delete data in databases (e.g.,

MySQL, MongoDB).

31
 • Form Handling: It collects form data submitted by users.

• Cookies: PHP can send and receive cookies for session management.

• User Access Control: It’s used to control user access to specific parts of a website.

• Encryption: PHP can encrypt data for security purposes.

[Link] we choose PHP? :

• Platform Compatibility: PHP runs on various platforms (Windows, Linux, Unix, macOS).

• Server Compatibility: It works with most web servers (e.g., Apache, IIS).

• Database Support: PHP supports a wide range of databases.

JavaScript

JavaScript is a powerful language that allows you to create dynamic and interactive web

experiences. Here’s how you can leverage it for your online store:

[Link]-Side Interactivity:

• Product Filtering and Sorting: Use JavaScript to enable users to filter products based on

categories, price ranges, or other criteria.

• Product Image Zoom: Implement image zoom functionality when users hover over

product images.

• Add to Cart: Create an interactive “Add to Cart” button that updates the cart count

dynamically.

• User Reviews and Ratings: Allow users to rate products and display average ratings using

JavaScript.

[Link] Validation:

32
 • Checkout Form: Validate user input in the checkout form (e.g., valid email addresses,

required fields).

• Credit Card Validation: Use JavaScript to validate credit card numbers and expiration

dates.

[Link] Content Loading:

• Lazy Loading Images: Load product images only when they come into the user’s viewport

to improve page speed.

• Infinite Scroll: Load additional products as the user scrolls down the page.

[Link] Experience Enhancements:

• Smooth Animations: Add subtle animations (e.g., fade-in effects, slide transitions) to

improve the overall user experience.

• Dropdown Menus: Create interactive dropdown menus for navigation.

• Product Recommendations: Use JavaScript to suggest related products based on user

behaviour.

[Link] Cart and Checkout:

• Updating Cart Totals: Dynamically calculate and update cart totals when users add or

remove items.

• Coupon Codes: Implement coupon code functionality using JavaScript.

• Address Autocomplete: Use APIs (e.g., Hygraph) to autocomplete shipping addresses.

[Link] Authentication and Security:

• Login and Registration: Create a seamless login and registration process using JavaScript.

• Client-Side Encryption: Encrypt sensitive data (e.g., passwords) before sending it to the

server.

33
[Link]-Party Integrations:

• Payment Gateways: Integrate payment gateways (e.g., PayPal, Stripe) using JavaScript

SDKs.

• Analytics: Implement tracking and analytics (e.g., Google Analytics) to monitor user

behaviour.

GraphQL

GraphQL is an open-source data query language for APIs. It provides a flexible and efficient way

to manage data by allowing clients to request exactly the data they need in a single query. Here

are the some points about GraphQL:

1. Flexible Queries:

• Clients can request specific data fields, avoiding overfetching or under-fetching.

• Unlike REST, where multiple endpoints are needed, GraphQL uses a single endpoint for

all data requests.

2. Strongly Typed-

• GraphQL schemas define clear data structures and types, reducing runtime errors.

• Types include scalar types (e.g., integers, strings) and object types (complex objects with

fields).

3. Real-time Updates:

• GraphQL supports subscriptions for real-time data interactions.

• Clients can receive updates when data changes.

4. Example:

34
 • Suppose you're building a blog application. In REST, you'd make separate requests for a

blog post and its author details.

• With GraphQL, you can request both in one query:

query {

blogPost(id: 123) {

title

content

author {

name

email

• This reduces network overhead and provides exactly the needed data.

GraphQL is versatile and efficient, making it a powerful choice for modern APIs.

4.2 Introduction to IDEs:

Introduction to Visual Studio Code (VS Code):

Visual Studio Code (VS Code) is an open-source code editor created by Microsoft. It’s

available for Windows, Linux, and macOS. Here are some key features and reasons why

developers love using VS Code:

1. Lightweight and Fast:

35
 • VS Code is lightweight, yet it packs a punch. It provides essential features without

overwhelming you.

• The startup time is quick, making it ideal for rapid development.

2. Rich Language Support:

• VS Code supports a wide range of programming languages out of the box,

including JavaScript, Python, Java, C++, and more.

• You can install additional extensions to enhance language support for specific

frameworks or tools.

3. Intuitive User Interface:

o The user interface is clean and straightforward. It consists of several key areas:

• Editor: Where you write and edit code.

• SideBar: Provides views like the Explorer (for files and folders), Git integration,

and extensions.

• Status Bar: Displays information about the current project and files.

• Activity Bar: Allows you to switch between different views (e.g., Explorer, Source

Control, Extensions).

• Panels: Show output, debug information, and integrated terminal.

o VS Code remembers your layout and settings, so it opens in the same state where you

left off.

4. Extensions and Customization:

• VS Code’s power lies in its extensions. You can install extensions for themes,

debugging, linting, and more.

• Customize keyboard shortcuts, themes, and preferences to match your workflow.

5. Integrated Terminal and Debugger:

• The integrated terminal allows you to run commands directly within VS Code.

36
 • Debugging tools are built-in, making it easy to set breakpoints, inspect variables,

and step through code.

6. Git Integration:

• VS Code seamlessly integrates with Git. You can commit, push, and pull changes

directly from the editor.

• Visualize diffs and resolve merge conflicts within the UI.

7. Extensions Marketplace:

• Explore the VS Code Marketplace to discover thousands of extensions.

• Popular extensions include Live Server (for web development), Python, ESLint,

and GitLens.

Getting Started

1. Installation:

• Download and install VS Code from the official website.

• Choose extensions relevant to your project (e.g., Python, JavaScript, HTML).

2. Basic Setup:

• Familiarize yourself with the user interface (Editor, SideBar, Status Bar, Activity

Bar, Panels).

• Create a new project folder or open an existing one.

3. Extensions:

• Explore the Extensions view (click on the square icon on the left sidebar).

• Install extensions based on your project needs.

4. Writing Code:

• Open a file in the editor and start writing code.

• Use keyboard shortcuts (Ctrl/Cmd + S for saving, Ctrl/Cmd + P for quick file

search).

37
4.3 Introduction to Tools and Technologies

In This phase we are using software development process that involves adopting and

integrating a software application into our website systems and workflows. Here are some

tools and technologies that we are using:

Frameworks and Libraries:

React (JavaScript): React (also known as [Link]) is a popular JavaScript library for building

user interfaces (UIs) on the web. Developed by Facebook, React allows developers to create

dynamic and interactive web applications. Here are the key points about React:

• Component-Based Architecture:

o React encourages breaking down the UI into smaller, reusable components.

o Each component can have its own state and props (input data).

• Virtual DOM (Document Object Model):

o React maintains an in-memory representation of the actual DOM

o When changes occur, React efficiently updates only the necessary parts of the

DOM.

• JSX (JavaScript Syntax Extension):

o JSX allows developers to write HTML-like code within JavaScript files.

o Example:

const name = "Pri";

const element = <h1>Welcome {name}</h1>;

React is widely used in modern web development, and its component-based approach

simplifies UI development.

Laravel (PHP): Laravel is an open-source PHP web application framework known for its

elegant syntax and robust features.

38
 • What is Laravel?

o Laravel follows the Model-View-Controller (MVC) architectural pattern.

o It provides powerful features like Eloquent ORM (for database interaction) and

Blade templating (for views).

o Laravel simplifies complex tasks in web development.

• Example:

o Let’s say you’re building a blog application. Here’s a simple example using

Laravel:

▪ Create a BlogPost model with fields like title, content, and author.

▪ Define routes to handle creating, reading, updating, and deleting blog

posts.

▪ Use Blade templates to display blog posts on the front end.

Laravel is widely used in industry, and mastering it equips developers with valuable skills for

building modern web applications efficiently.

Database Management Systems (DBMS):

MySQL: MySQL is an open-source Relational Database Management System (RDBMS) that

enables users to store, manage, and retrieve structured data efficiently.

• What is MySQL?

o MySQL follows the relational database model, allowing users to organize data

into tables with rows and columns.

o It’s renowned for its reliability, scalability, and ease of use.

• Using MySQL in web development

o It allow us to choose Appropriate Data Types:

39
 ▪ Use relevant data types for columns (e.g., INT for integers, VARCHAR

for variable-length strings).

▪ Avoid using VARCHAR with excessive lengths; choose the smallest

necessary size.

o Index Key Columns:

▪ Index columns used for searching or joining tables.

▪ Proper indexing improves query performance.

o Avoid SELECT * Queries:

▪ Specify only the necessary columns in your SELECT queries.

▪ Retrieving unnecessary data impacts performance.

o Use Prepared Statements or Parameterized Queries:

▪ Protect against SQL injection by using prepared statements.

▪ Bind parameters to queries dynamically.

o Normalize Your Database Schema:

▪ Organize data into separate tables to minimize redundancy.

▪ Follow normalization rules (1NF, 2NF, 3NF) to maintain data integrity.

o Regular Backups and Maintenance:

▪ Schedule regular backups of your MySQL database.

▪ Optimize tables, analyze performance, and monitor resource usage.

o Secure Your MySQL Server:

▪ Set strong passwords for users.

▪ Limit access to necessary IP addresses.

▪ Disable unnecessary services (e.g., remote access).

Version Control:

40
Git is a widely used version control system (VCS) that helps developers manage code changes,

collaborate, and track project history. Here’s a brief explanation along with an example:

1. What is Git?

o Git allows developers to:

▪ Track Changes: Record modifications to files over time.

▪ Collaborate: Work on the same codebase with others.

▪ Revert Mistakes: Easily undo changes or switch to previous versions.

2. Example:

o Imagine you’re working on a team project. Here’s how Git helps:

▪ You create a new branch for a feature: git checkout -b my-feature.

▪ Make changes, commit them: git add . and git commit -m "Add new

feature".

▪ Push your branch to a remote repository: git push origin my-feature.

▪ Collaborators review, provide feedback, and merge your changes.

Git is essential for efficient and organized software development.

Build Tools

Npm(JavaScript): npm (Node Package Manager) is a widely used package manager for

JavaScript.

1. What is npm?

o npm allows developers to discover, install, and manage code packages

(libraries, tools, and utilities) for their [Link] projects.

o It serves as a central repository where developers can share and borrow

packages.

2. Key Points:

41
 o Packages: npm hosts thousands of open-source packages that enhance

functionality, such as Express (for web servers) or lodash (for utility functions).

o [Link]: Every npm project includes a [Link] file that defines

project metadata, dependencies, and scripts.

o Command-Line Interface (CLI): Developers use the npm CLI to install,

update, and manage packages.

npm simplifies dependency management and accelerates JavaScript development.

4.4 Coding Standards of Language used in Frontend

We are developing an e-commerce website using [Link], we are basically following best

coding standards to ensure that our codes are clean, maintainable, and efficient.

Here is how we are doing it:

1. Component Structure and Organization:

o We are basically Breaking down our application into reusable components.

Each component is having a single responsibility.

o We have Organized our components into folders based on their functionality

(e.g., components, containers, pages).

o We are Using meaningful names for our components.

2. Styling:

o We are using Tailwind CSS and styled-components to encapsulate style within

components.

o We are avoiding inline styles as much as possible.

3. Code Formatting and Linting:

o We have Set up ESLint within our project with appropriate rules for React

development. Because ESLint statically analyzes our code to quickly find

42
 problems. It is built into most text editors and you can run ESLint as part

of your continuous integration pipeline.

o We are using tool Prettier for auto format our code. Because Prettier

removes all original styling and reprints your code from scratch,

considering line length and wrapping code when necessary.

4. Component Lifecycle Methods:

o We are using React Hooks (e.g., useEffect, useState) instead of class-based

lifecycle methods.

5. Routing:

o We are Implementing client-side routing using libraries like React Router.

o We have defined routes for different pages (e.g., product listing, product details,

cart, checkout).

o We are using useNavigate() and useLocation() hooks to navigate and passing

parameters.

6. API Calls and Data Fetching:

o We are using Gql to fetch our data from api.

o We also handling loading, error, and success states when fetching data.

o This is how our query looks like :-

const GetItems = async () => {

const query = gql` query GetItems {

items {

id

name

icons {

url

} } } `;

43
 const results = await request("<apiLink>", query);

return results;};

7. Error Handling:

o Implemented proper error handling for API requests and other critical parts of

our application.

o We have wrote the code to display user-friendly error messages.

8. Accessibility:

o Ensured that our components are accessible by following WCAG guidelines.

o Used semantic HTML elements (e.g., <nav>, <button>, <input>).

o Provided alt text for images.

9. Testing:

o Written a unit tests for individual components, functions, and utilities.

o Tested component rendering, props, state changes, and interactions.

o Tested interactions between components.

o Verified that components work together as expected.

o Tested on various devices and screen sizes.

4.5 Project Scheduling

Project Overview

o Purpose: The purpose of this project is to create an e-commerce platform specifically

tailored for electronic devices. It will serve as a digital marketplace where customers

can explore, compare, and purchase a wide range of electronic gadgets, appliances,

and accessories.

o Goals:

44
 ➢ Establish a user-friendly interface that enhances the shopping experience for

customers.

➢ Provide detailed product information, specifications, and reviews.

➢ Enable secure online transactions and payment gateways.

o Scope:

➢ The website will cover various categories of electronic devices, including

smartphones, laptops, cameras, wearables, home appliances, and audio

equipment.

➢ The project will focus on front-end development, back-end integration, and

database management.

o Features and Functionalities:

➢ User registration and login.

➢ Product catalog with detailed descriptions, high-quality images, and customer

reviews.

➢ Shopping cart and checkout process.

➢ Secure payment gateways (credit cards, digital wallets, etc.).

➢ Order tracking and status updates.

➢ Customer support and FAQs.

➢ Newsletter subscription and promotional offers.

➢ Search functionality with filters (brand, price range, specifications).

45
 Table 8:Phase planning

Phase Number Phase Name Description

1 Planning project scope, gather requirements, and create a detailed

project plan on notion

2 Design Develop wireframes, design layouts, and user interfaces for

the website on figma.

3 Development Build the front-end and back-end components, integrate

databases, and implement features.

4 Testing Conduct thorough testing, including functionality, usability,

security, and performance tests.

5 Deployment Deploy the website to production servers and make it

accessible to users.

6 Maintenance Ongoing maintenance, bug fixes, updates, and

enhancements.

Table 9:Milestone achievement

Milestone Description Target Date

Project Kickoff Officially start the project, 24/01/2024

assemble the team, and set

expectations.

Wireframes Ready Complete wireframes and obtain 26/01/2024

stakeholder approval.

Front-End Development Complete Finish building the user interface 01/02/2024

and ensure responsiveness.

46
Back-End Integration Done Integrate databases, APIs, and 11/02/2024

server-side logic.

User Acceptance Testing (UAT) Conduct UAT with real users to 26/02/2024

validate functionality.

Go-Live Launch the website for public 03/03/2024

access.

4.5.1 Work Breakdown Structure (WBS):

Project Planning (Phase 1):

➢ Task 1.1: Define project scope and objectives

o Description: Gather requirements from stakeholders, identify project

boundaries, and set clear goals.

➢ Task 1.2: Assemble project team

o Description: Identify team members, roles, and responsibilities.

➢ Task 1.3: Develop project plan

o Description: Create a detailed plan outlining project phases, milestones, and

timelines.

Design and Development (Phase 2):

➢ Task 2.1: Create wireframes (UI/UX design)

o Description: Design the layout of key pages (home, product listings, checkout).

➢ Task 2.2: Front-end development

o Description: Build user interfaces using HTML, CSS, and JavaScript.

➢ Task 2.3: Back-end development

47
 o Description: Develop server-side logic, APIs, and database integration.

➢ Task 2.4: Implement product catalog

o Description: Add product listings, descriptions, and images.

Testing and Quality Assurance (Phase 3):

➢ Task 3.1: Functional testing

o Description: Verify that all features work as expected.

➢ Task 3.2: Usability testing

o Description: Evaluate user experience and navigation.

➢ Task 3.3: Security testing

o Description: Ensure data protection and secure transactions.

➢ Task 3.4: Performance testing

o Description: Test website speed, responsiveness, and scalability.

Deployment and Launch (Phase 4):

➢ Task 4.1: Go-live

o Description: Make the website accessible to users.

Post-Launch and Maintenance (Phase 5):

➢ Task 5.1: Monitor performance

o Description: Track website metrics (errors).

➢ Task 5.2: Regular updates

o Description: Apply security patches, add new features, and improve content.

48
 Fig 13 WBS

4.5.2 PERT CHART

A PERT chart is a visual project management tool used to map out and track tasks and

timelines within a project.

The acronym PERT stands for Project (or Program) Evaluation and Review Technique.

It provides a graphical representation of a project’s tasks, their interdependencies, and the

estimated timeframes for completion

Here is how our pert chart looks like:

49
 Fig 14 Pert Chart

PERT analysis calculation

Optimistic time estimate(O): 30

Pessimistic time estimate(P): 45
Most likely time estimate(M): 55

PERT estimate 49.17

Standard deviation 2.5

PERT formula: (O+4M+P)/6

4.5.3 GANTT CHART

A Gantt chart is a horizontal bar chart used in project management to visually represent a

project plan over time.

Purpose: It shows the timeline, status, and task assignments for each project task.

Gantt charts simplify communication, making it easier to keep project teams and stakeholders

informed about project progress and deadlines

Here is how our gantt Chart looks like:

50
 Fig 15 Gantt Chart

4.6 Testing Techniques and Test Plans

Since e-commerce applications operate on an international scale, they need to fulfill certain

requirements before they can be launched. For this reason, web apps have to go through

diverse forms of testing to ensure that every facet of the system works flawlessly.

So, here is a list of e-commerce testing techniques and approaches that we are going through:

1. Functional Testing:

Objective: Verify basic usability and mainline functions.

Here are some Important traits that we have tested include:

• Login/ Sign-in system

• Search and filters page

• Order details page

• Order tracking
51
 • Shopping cart page

• Checkout page

2. Usability Testing for User Experience (UX)

An e-commerce website’s usability is critical in facilitating users during the purchase.

Comprehensive usability testing creates a superior app experience.

Objective: Identify usability issues and improve overall satisfaction.

• Homepage Navigation: Observed how users interact with navigation menus, banners,

and featured products.

• Product Page: Evaluated layout, readability, and ease of accessing product details.

• Mobile Responsiveness: Tested on various devices to ensure consistent UX.

3. Security Testing:

The risk of theft, fraud, and security breaches is a real threat to e-commerce apps. No one

likes to get stuck on the payments page. So, it is crucial to ensure a safe, smooth, and secure

payment process by testing thoroughly.

Objective: Assess responsiveness and stability under different conditions.

Security Testing addresses the following parameters:

• Ensure all supported and secured payment options.

• Verify that all the data exchanges and transmissions between the user’s device and the

app server occur through HTTPS protocol.

• Encryption of the user’s data like credit/debit card details, bank account credentials,

and other confidential data should occur over a secured channel.

• Validate whether there is any information loss during the transmission and ensure that

the recovery systems work perfectly in case of any loss.

52
 • Check whether the encryption of the sensitive information is successful and no storage

of passwords in the cookies.

4. Performance Testing:

Slow performance can kill performance even on a web app that gets a great score. That is why

performance testing is crucial in SDLC. It guarantees that the e-commerce apps function

smoothly across all browsers.

Objective: Assess responsiveness and stability under different conditions.

Types of performance testing we have performed:

• Load Testing: Simulate concurrent users to evaluate server performance.

• Stress Testing: Push the system to its limits (e.g., during peak traffic).

• Scalability Testing: Ensure the app handles increased load gracefully.

5. Challenges and Considerations:

• Dynamic Content: E-commerce sites frequently update (new products, offers).

o Variability: Dynamic elements introduce variability, making it harder to predict

user interactions.

o Consistency: Ensuring consistent behavior across different states of dynamic

content.

o Edge Cases: Testing scenarios when content changes rapidly or unexpectedly.

• Target Audience: Tailor testing to match our specific user demographics.

o Prioritization: we have focused on addressing pain points that matter most to

your target users.

o Effective Communication: Crafting messages that resonate with our audience

leads to better engagement.

53
 o Test Scenarios: Create realistic test scenarios based on real-world user

interactions relevant to your audience.

6. Sample Test Cases:

We have Created a detailed test plan for our e-commerce website. Ensuring it covers all critical

areas, including functional, security, and performance testing. A well-structured test plan

ensures our site works perfectly.

• Testing auto-scroll behaviour, refresh intervals, hover interactions, and click

functionality.

• Ensuring it loads promptly and doesn’t hinder other content visibility.

54
Chapter 5

Results and Discussions

This section provides valuable insights, highlights key findings, and discusses critical aspects of our

project.

5.1 User Interface Representation:

5.1.1 Homepage:

• The homepage serves as the gateway to our e-commerce site. Here’s how it might look:

o Hero Banner: A large, eye-catching image showcasing featured products or

promotions.

o Navigation Bar: Clear menus (e.g., “Shop,” “Categories,” “Sale”) for easy

exploration.

o Search Bar: Allows users to quickly find specific products.

o Featured Products: Displayed in a grid format with high-quality images and brief

descriptions.

5.1.2 Product Listing Page:

• When users click on a category or search result, they land on a product listing page:

o Grid View: Products displayed in a grid, showing images, prices, and ratings.

o Sorting Options: Dropdown to sort by relevance, price, or popularity.

o Filters: Sidebar with filters (e.g., color, brand).

o Pagination: Navigation to move between pages of products

5.1.3 Product Detail Page:

55
 Clicking on a product lead to its detail page:

o Product Image: High-resolution image.

o Product Title and Description: Clear information about the item.

o Price and Availability: Noticeably display.

o Add to Cart Button: Encourages users to take action.

o Ratings and Reviews: User-generated feedback.

5.1.4 Shopping Cart Page:

• After adding products, users visit the cart:

o Product Summary: List of items, quantities, and prices.

o Subtotal and Total: Calculated dynamically.

o Checkout Button: Directs users to the payment process

5.1.5 Checkout Process:

• The checkout process involves multiple steps:

o Shipping Information: Collects delivery details.

o Payment Options: Choose credit card, PayPal, or other methods.

o Order Summary: Review before finalizing the purchase.

o Confirmation Page: Displays order number and estimated delivery date.

5.2 Various Modules of the System:

E-commerce systems consist of interconnected modules that handle specific functions. These

modules ensure smooth operations and a seamless user experience.

These modules handle specific functions and contribute to the overall functionality of the platform:

5.2.1 Cart and Checkout Module:

56
Description: This module manages the shopping cart and the checkout process.

Functionality:

• Users can add products to their cart.

• Calculate the total cost.

• Proceed to checkout for payment.

5.2.2 Product Information Management (PIM) Module:

Description: PIM handles product data, descriptions, and attributes.

Functionality:

• Stores product details (e.g., name, price, description).

• Manages product categories and variations (e.g., sizes, colors).

5.2.3 Order Management Module:

Description: Manages orders from creation to fulfilment.

Functionality:

• Tracks order status (processing, shipped, delivered).

• Handles cancellations and returns.

• Updates inventory after successful orders.

5.2.4 Personalization Engine:

Description: Customizes the user experience based on individual preferences.

Functionality:

• Recommends personalized products

• Displays relevant content (e.g., “You might also like…”).

57
 5.2.5 Content Management System (CMS):

Description: Manages website content and pages.

Functionality:

• Creates and edits products.

• Publishes products.

• Manages product metadata.

5.3 Snapshots of system

These snapshots visually represent different aspects of our system

Homepage Snapshot:

Fig. 16 Home Page

Description:

• The homepage showcases featured products, navigation menus, and promotional banners.

58
Product Listing Page Snapshot:Users can explore product categories and access search functionality.

Fig. 17 Product List Page

Description:

• The product listing page displays products in a grid format.

• Users can sort products, apply filters, and view details.

Product Detail Page Snapshot:

Fig 18 PDP

59
Description:

Clicking on a product lead to its detail page.

• Users see high-resolution images, product descriptions, and pricing.

• They can add the item to their cart.

Shopping Cart Snapshot:

Fig 19 Cart

Description:

• The shopping cart page shows a summary of selected items.

• Users can review quantities, prices, and proceed to checkout.

Checkout Process Snapshot:

60
 Fig

Fig.

20 Check-Out

Description:

• The checkout process involves multiple steps.

• Users provide shipping information, choose payment options, and confirm their order.

5.4 Backends Representation (Database):

Products Table:

• This table stores information about the products available for purchase on the e-commerce

platform.

• Each product entry includes details such as the product name, description, price, stock

availability, and any other relevant attributes.

• The product ID serves as the primary key to uniquely identify each product.

Customers Table:

61
 • The customers table holds data related to the users who register on the e-commerce site.

• It includes fields like customer ID, name, contact information, shipping address, and login

credentials.

• The customer ID acts as the primary key to distinguish individual customers.

Orders Table:

• The orders table records information about customer orders.

• Each order entry contains details such as the order ID, customer ID (linked to the customers

table), order date, and total amount.

• Additionally, it may include shipping details, payment status, and other relevant order-related

data.

Additional Tables:

Depending on the e-commerce system’s complexity, additional tables can be added to support specific

functionalities:

• Shipping Table: Stores shipping details, including tracking numbers, delivery status, and

carrier information.

• Categories Table: Manages product categories and their hierarchical relationships.

• Product Reviews Table: Captures customer reviews and ratings for products.

• Wish List Table: Allows customers to maintain a list of products they are interested in

purchasing.

These tables form the backbone of the system, ensuring smooth transactions and a seamless shopping

experience for users.

62
5.5 Snapshots of Database Tables

1. Snapshot of Customers Table:

Stores information about registered customers who use our e-commerce site.

Fig 21 Customer Database Table

Fields:

• customer_id: Unique identifier for each customer.

• first_name, last_name: Customer’s name.

• email: Customer’s email address (used for login).

• password: Encrypted password for authentication.

2. Snapshot of Products Table:

Contains details about the products available for purchase.

Fig 22 Products Database Table

63
Fields:

• product_id: Unique identifier for each product.

• name: Product name.

• tag: keywords for Product.

• brand_name: Product brand name.

• price: Product price.

• description: Brief description of the product.

• price: Price of the product.

• stock_quantity: Available stock quantity.

• category_id: Foreign key linking to the Categories table.

3. Snapshot of Categories Table:

Categorizes products for easy navigation.

Fig 23 Categories Database Table

Fields:

• category_id: Unique identifier for each category.

64
 • name: Category name (e.g., “Electronics,” “Clothing,” “Home Decor”).

4. Snapshot of Orders Table:

Records customer orders.

Fig

24 Order Database Table

Fields:

• order_id: Unique identifier for each order.

• Name: Name of a Person.

• Phone: Phone number of a Person

• Address: Address of a Person.

• Pin: address pin code.

• customer_id: Foreign key linking to the Customers table.

• order_date: Date when the order was placed.

• total_amount: Total cost of the order.

• order_item_id: Unique identifier for each order item.

• order_id: Foreign key linking to the Orders table.

• product_id: Foreign key linking to the Products table.

• quantity: Quantity of the product ordered.

subtotal: Subtotal cost for this item (quantity * product price).

65
5. Snapshot of Wishlists Table:

Stores products that customers are interested in but haven’t added to their cart.

Fig 25 Wishlist Database Table

Fields:

• wishlist_id: Unique identifier for each wishlist.

• customer_id: Foreign key linking to the Customers table.

• product_id: Foreign key linking to the Products table.

7. Snapshot of Shipping Table:

Fig 26 Shipping Database Table

Manages shipping details for orders.

Fields:

• shipping_id: Unique identifier for each shipping record.

• order_id: Foreign key linking to the Orders table.

• shipping_address: Address for product delivery.

• shipping_status: Current status of shipping (e.g., shipped, out for delivery)

66
Chapter 6

Conclusion & Future Scope

Our e-commerce website aims to address the current needs in electronic fields. It provides a platform

for users to purchase mobiles, laptops, tablets, and other items. Users can register an account, log in,

select products, add them to their cart, and complete the checkout process. They can also modify or

repair their product with the help of our website. The project streamlines the online shopping

experience, allowing users to conveniently buy products from the comfort of their homes.

In Future we are thinking of enhancing our user experience like continuously improve the user

interface, navigation, and overall experience to attract more customers. Implement features like

personalized recommendations, user reviews, and easy returns. Extend the project by creating a

mobile app for seamless shopping on smartphones and tablets. Explore additional payment options

(e.g., digital wallets) to cater to diverse user preferences.

67
7. References / Bibliography

• [Link]

• [Link]

• [Link]

• [Link]

• [Link]

• [Link]

• [Link]

• [Link]

• [Link]

• [Link]

• [Link]

• [Link]

68