Synopsis

1
1. INTRODUCTION

Computers have become a way of life for today’s high society.

Many aspects of modern life that we have come to accept as

common place would not be possible if there were no computers.

Today computers are used extensively in many areas of business,

industry, science, education etc.

The business-to-consumer aspect of e-commerce is the most visible

business use of the World Wide Web. An online store is a virtual

store on the Internet where customers can browse the catalog and

purchase products of interest.

Electronic Commerce (e-commerce) applications supports the

interaction between different parties participating in a commerce

transaction via the network, as well as the management of the data

involved in the process, as more people gain confidence in current

encryption technologies, more and more users can be expected to

frequently purchase items online.

2
2. OBJECTIVE

The Project entitled “Online Clothing Store” deals with

development of an e-commerce website for clothing Shops. It

provides the user with a catalog of different clothing available for

purchase in the store. In order to facilitate online purchase a

shopping cart is provided to the user. 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.

A good e-commerce site should present the following factors to

the customers for better usability -:

• Effective categorical organization of products.

• Consistent layout of product information.

• Obvious shopping links or buttons.

• Minimal and effective security notifications or messages.

• Another important factor in the design of an e-commerce site

is feedback.
3
3. DATA MODEL DESCRIPTION

A data model is a conceptual representation of the data structures

that are required by a database. It defines primary data objects,

composition of cache data object and attributes of the object.

relationships between each object and other object and between

objects and the processes.

List of Tables:

1. Login

2. Customers

3. Products

4. Category

5. Cart

6. Order details

7. Payment

8. Feedback

4
Tables:

Admin Table

Field Data Type Constraint

ID Int Primary Key

Email VarChar(50) Null

FullName VarChar(50) Null

Password VarChar(50) Null

Customer Table

Field Data Type Constraint

ID Int(10) Primary Key

First_Name Character(20) Not Null

Last_Name Character(20) Not Null

Date_of_Birth Date Not Null

Address Character(30) Not Null

Mobile_No. Number Not Null

5
Products Table

Field Data Type Constraint

Product_ID Int(10) Primary Key

Product_Name Character(20) Not Null

Product_Price Number(5) Not Null

Product_Image VarChar(100) Not Null

Product_Stock Float Not Null

Product_Category_ID Number(10) Not Null

Category Table

Field Data Type Constraint

Category_ID Int(10) Primary Key

Category_Name Character(20) Not Null

6
Cart Table

Field Data Type Constraint

Product_ID Int(10) Primary Key

Product_Quantity Int(10) Not Null

Order Details Table

Field Data Type Constraint

Order_ID Int(10) Primary Key

Order_Name Character(20) Not Null

Order_User_ID Int(10) Primary Key

Order_User_Name Character(20) Not Null

Order_Amount Float Not Null

Order_Quantity Int(10) Not Null

Order_Ship_Address VarChar(100) Not Null

Order_Date Date Not Null

Order_Tracking_No. VarChar(80) Not Null

7
Payment Table

Field Data Type Constraint

Payment_ID Int(10) Primary Key

User_ID Int(10) Primary Key

Order_ID Int(10) Primary Key

Payment_Type VarChar(50) Not Null

Amount Int(5) Not Null

Provider VarChar(50) Not Null

Status VarChar(50) Not Null

Feedback Table

Field Data Type Constraint

User_ID Int(10) Primary Key

Email VarChar(50) Not Null

Name VarChar(30) Not Null

Feedback VarChar(500) Not Null

8
Main Description of the module:

All the above mentioned data are stored in the backend and can be

retrived reports with filtering options.

In this module a user id and password is provided to the

Administrator and user, to provide access control. The

Administrator has the rights to make modifications from time to

time. The user can purchase items from the website but does have

the rights to make modifications in the way it performs. A shopping

cart and payment gateway is provided to the customer.

ER-Diagram:

An Entity-Relationship Model (ERM) is an abstract and conceptual

representation of data. Entity-Relationship Modelling is a database

modelling method used to provide a type of conceptual schema or

semantic data model of a system.

An entity may be defined as a thing which is recognized as being

capable of an independent existence and which can be uniquely

identified.
9
ER-Diagram

10
4. DATA FLOW DIAGRAM

Data flow diagrams (DFD) are part of a structed model in the

development of software. They are a graphical technique that

depicts information flow and the transforms that are applied as

data move from input to output. Basically, the function of DFDs is

to show the user a graphical analysis of a software system. It is like

a flowchart, except DFDs show the flow of data throughout the

system.

Data Flow Diagram Symbol -:

: Data Flow

: Process

: Entity

: Data Store

11
0 Level Data Flow Diagram

A 0-Level Data Flow Diagram is a graphical representation of the

flow and process of an e-commerce platform, showing the different

roles and responsibilities between Users, Guests, and Admins. This

type of diagram provides an overview of the different parts that

make up a system and the relations they have with each other.

The 0 Level DFD describe the all user module who operate the

system. Below data flow diagram of online shopping site shows the

two user can operate the system Admin and Member user.

0 Level DFD

12
1st Level Admin Side Data Flow Diagram

1st level DFD describe the functionality of Admin, who is an owner

of the website. Admin can first add category of item, data stores of

shipping, Bill, Payment, Customer and Sales.

Main entities and output of First level DFD

 Processing Product records and generate report of all product

 Processing Category records and generate report of

all category

 Processing Sales records and generate report of all sales

 Processing Customer records and generate report of

all customer

 Processing Payment record and generate report of all payment

 Processing Bill records and generate report of all bill

 Processing Shipping records and generate report of

all shipping

13
1st Level Admin Side Data Flow Diagram

14
2nd Level Admin Side Data Flow Diagram

15
1st Level User Side Data Flow Diagram

The user is all people who operate or visit our website. User is a

customer of a website. User can first select product but user must

have to register in our system to purchase any item from our

website. Once registered he can login to site and buy item by

making online payment through any bank debit card.

16
2nd Level User Side Data Flow Diagram

This level provides an even more detailed view of the system by

breaking down the sub-processes identified in the level 1 DFD into

further sub-processes.

17
5. REPORT GENERATION

List of reports that are likely to be generated :

 Customer reports: These reports display specific

information to track order and reward point for each

customer using the store.

 Order reports: The following information will be displayed

about customer order:

o Customer Name

o E-mail

o Total number of orders made by this customer

o Total number of products purchased by this customer

 Products viewed report: The product view report gives

you an idea of what are being viewed the most, or least in

the

shop.

 Returns Report: The returns report shows how

many returns were requested within a given time

18
frame.

19
6. HARDWARE AND SOFTWARE REQUIRED

Hardware Required:

 Processor : Pentinum IV or Above

 Ram : 2 GB or Above

 Hard Disk : 50 GB or Above

 Cache Memory : 128 KB or Above

 Input Devices : Keyboard, Mouse

 Output Devices : Monitor

Software Required:

 Operating System : Linux, Mac, Windows XP,

Windows 7, 8, 8.1, 10, 11

 Code Editor, Browser

Programming Languages:

 Front End : HTML, CSS, JavaScript

 Back End : MySQL, Node.js

11
0
7. SCOPE OF THE PROJECT

E-commerce had bloomed over the years and is one of the fastest-

growing domains in the online world. Though it took some time for

this to be accepted by the end-users, today we are at a point

where the majority of the people love to shop online.

There were numerous concerns revolving around online shopping

at its launch, but over years people tend to have started trusting e-

commerce for all their shopping needs.

In India, people prefer shopping online these days rather than

having to visit the physical store. The payment features that are

smart and secure as well as the cash on delivery (COD), which

makes the payment, even more, safer with hassle-free shipping,

easy returns and reach out.

20
8. BIBLIOGRAPHY

 System Analysis and Design (SAD)

IGNOU reference books

 Introduction to Database Management System

IGNOU reference books

 Introduction to Software Engineering

IGNOU reference books

21
Project Report

22
 1.INTRODUCTION AND OBJECTIVES

Introduction

Computer plays an important role in our daily life. Anything

we want we can get only in a single click. Speed, reliability and

accuracy of the computer make it a powerful tool for

different purposes. A very important and basic need of

today’s modern business world is the quick availability and

processing of

information using computer. One can easily get the type of required

information within a fraction of a second. The Project that I have

taken is also in this category which is used in daily life whenever

we want to purchase any item we can easily get it at our home or

desired location.

E-commerce, short for electronic commerce, refers to the

buying and selling of goods and services over the internet. In

this digital marketplace, transactions are conducted

electronically, allowing businesses and consumers to engage in

23
commerce without the

need for physical presence. E-commerce encompasses a wide range

24
 of activities, including online retail, electronic payments, internet

banking, and online auctions. The business-to-consumer aspect of

e-commerce is the most visible business use of the world wide web.

Objectives of the Project

An online store is a virtual store on the Internet where customers

can browse the catalog and purchase products of interest.

Electronic Commerce (e-commerce) applications supports the

interaction between different parties participating in a commerce

transaction via the network, as well as the management of the data

involved in the process, as more people gain confidence in current

encryption technologies, more and more users can be expected to

frequently purchase items online.

The objective of the project on Online Shopping Portal is to develop

a GUI based automated system, which will cover all the information

related to the Books purchase which is used in our daily life. For

example – Course books, Self help books, Novels and many more

25
other books. So by this GUI based automated system if a user

wants to purchase something then with a single mouse click one

can order his Product.

The objective of an e-commerce website project is to establish a

robust online platform that facilitates efficient buying and selling

activities over the internet. One primary goal is to broaden market

reach and accessibility, allowing businesses to transcend

geographical boundaries. Achieving this involves creating a user-

friendly website with responsive design to ensure seamless access

across various devices.

Diversifying the product showcase is another key objective,

requiring the implementation of a well-organized catalog with

detailed descriptions, images, and user-friendly filtering options.

The focus extends to enhancing user engagement and experience

through interactive features, personalized recommendations,

and

an intuitive interface. Security is paramount, aiming to ensure trust

in online transactions. This objective involves integrating robust

26
 payment gateways, encryption protocols, and SSL certificates to

safeguard customer data. Building a sense of community and

customer loyalty is also crucial, achieved through features like

customer reviews, forums, and loyalty programs.

Efficient order management, data analytics for decision-making,

and mobile optimization are additional objectives. The project aims

to ensure scalability, allowing for future growth, and compliance

with legal considerations, including data protection laws and

online trading regulations. Moreover, the focus is on innovation

and

adaptability, staying ahead of technological trends and

continuously improving the website based on user feedback and

industry

advancements.

Project Category

This project belongs to E-Commerce web portal that is a paperless

27
exchange of business information using electronic data

interchange,

28
electronic mail electronic fund transfer & other networked based

technologies.

These static pages will be available in project

 Home page with good UI

 Home page will contain an animated slider for images banner

 Home page will contain an animated slider for best

selling products

 In home page at top there will be a search box bar

available that will help users to search any product

 User can choose any category ‘Novels’, ‘Self help books’ etc.

that will be available on the home page.

 On the footer there will be all the categories mentioned,

users can choose easily any of them.

 Contact us page will be available in the project.

29
Technologies used in Project Development

HTML

Page Layout has been designed in HTML.

CSS

CSS has been used for all the designing part

JavaScript

All the validation task and animations has been developed by

JavaScript.

Node.js

It is used to store the data of webpage into MySQL.

MySQL

MySQL database has been used as database for the project.

21
0
Hardware and Software Requirements

At Developer Side:

During System development, I have to design both static and

dynamic website interfaces, create website functions and a

database system, edit photos and pictures, so it has a set of

hardware and software requirements.

 Pentium 2.4 GHz or above Processor

 2 GB RAM or Above

 40 GB Hard Disk Space

 Front End : HTML, CSS, JavaScript

 Back End : Node.js and MySQL Database

 Code Editor : Notepad or any code editor

At System User Side:

The following is the requirement for the system users including

members and administrators.

 Intel Pentium 4 Processor

21
1
  20 GB Hard Disk Space

 Operating System – Windows XP (or later)

 Browser (IE 7.O or Above, Mozilla Firefox, Google

Chrome, Edge)

 Browser must be JavaScript Enabled

About Technology

 HTML

To Publish information for global distribution, one needs a

university understood language, a kind of publishing mother

tongue that all computers may potentially understand. The

publishing

language used by the World wide web is HTML (Hyper Text Markup

Language).

HTML Gives authors the means to

 Publish online documents with headings, text, tables,

list, photos, etc.

30
  Retrieve online information via hypertext links, at the click

of a button

 Design forms for conducting transactions with remote

services, for use in searching information, making

reservation, ordering products etc.

 Includes spread sheets, video clips, sound clips, and

other applications directly in the documents.

Some HTML Tags

<HTML> : Starting an HTML tag

<HEAD> : Creating a web page’s heading

<TITLE> : Giving a web page’s title

</HEAD> : Ending a web page’s heading

<BODY> : Starting a web page’s body

</BODY> : Ending a web page’s body

</HTML> : Ending a web page

31
HTML 5.0

HTML 4.0 extends with mechanisms for style sheets, scripting,

frames embedding objects, improved support for right to left and

mixed direction texts, richer tables amd enchantments to form,

offering improved accessibilities for people with disability.

 JavaScript

JavaScript, originally supported by Netscape Navigator, is the most

popular Web scripting language today. JavaScript lets you embed

programs right in your Web pages and run these programs using

the Web browser. You place these programs in a <SCRIPT> element.

If you want to write directly to the Web page, place it in the

<BODY> element.

Example:

<HTML>

<HEAD>

32
 <TITLE></TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE=”JavaScript”><SCRIPT>

</BODY>

</HTML>

JavaScript Objects

JavaScript is an Object-oriented Programming language. JavaScript

comes with a number of predefined objects.

Objects of the JavaScript

 Document: Corresponds to the current Web page’s body.

Using this object, you have access to the HTML of the page

itself, including the links, images and anchors in it.

 Form: Holds information about HTML forms in the current

page.
33
  Frame: Refers to a frame in the browser’s window.

 History: Holds the records of sites the Web browser has

visited before reaching the current page.

 Location: Holds information about the location of the

current web page.

 Navigator: Refers to the browser itself, letting you

determine what browser the user has.

 Window: Refers to the current browser window.

JavaScript Events

 On Click: Occurs when an element is clicked

 On Focus: Occurs when an element gets the focus.

 On Mouse Down: Occurs when a mouse button goes down.

JavaScript Function

Declaration of function

Syntax: function function name()

34
 ……..

……..

Write these functions in <SCRIPT> tag.

 Classification of Database

There are 3 types of database approaches given below.

1. Hierarchical Database

In this type of model data is represented in simple tree

structured. The record at the top of three is known as root,

the root may have any number of dependents. Each of

these may have any number of low level dependents and so

on up to any number of levels. The disadvantages of the

approach are that no independent

record occurrence can exist without it’s superior.

35
2. Network Database

In Network database, data is represented by Network

structure. In this approach record occurrence can have any

number of superiors as well as any number of immediate

dependents thus allow many to many correspondence directly

than a hierarchical approach. The main disadvantage of the

Network model is data representation is very complex

resulting in complexity of the DML (Data

Manipulation Language).

3. Relational Database

The Relational model represents data and relationships

among data by a collection of tables each of which has a

number of columns with unique names.

36
  MySQL

MySQL is the world’s most popular open source database software,

with over 100 million copies of its software downloaded or

distributed throughout its history. With its superior speed,

reliability, and ease of use, MySQL has become the preferred choice

for Web, Web 2.0, Saas, ISV, Telecom companies and forward-

thinking corporate IT Managers because it eliminates the major

problems associated with downtime, maintenance and

administration for modern, online applications.

Many of the world’s largest and fastest-growing organizations use

MySQL to save time and money powering their high-volume

Websites, critical business systems, and packaged software-

including industry leaders such as Yahoo!, Alcatel-Lucent, Google,

Nokia, YouTube, Wikipedia, etc.

37
  The SQL Language

SQL is the language for relational database. SQL is a non-procedural

i.e., when we use SQL we specify what we want to be done not

how to do it.

Features of SQL

 SQL is an interactive query language.

 SQL is a database administration language.

 SQL is a database programming language.

 SQL is a client/server language.

 SQL is a distributed database language.

 SQL is a database gateway language.

Basic SQL Commands

 Data Definition Language commands (DDL)

 Data Manipulation Language commands (DML)

 Transaction Control Language commands (TCL)

 Data Control Language (DCL)

38
  Node.js

Node.js, often referred to as Node, is a powerful open-source and

cross-platform JavaScript runtime environment.

JavaScript Runtime Environment

 Node.js allows you to execute JavaScript code outside of a

web browser. Traditionally, JavaScript was mainly used for

client-side scripting within browsers. However, Node.js

extends its capabilities to the server-side as well.

 It’s built on Chrome’s V8 JavaScript engine, which compiles

and executes JavaScript at lightning speeds.

Event-Driven and Non-Blocking

 Node.js provides an event-driven, non-blocking

(asynchronous) I/O model. This means it can handle multiple

tasks simultaneously without waiting for one to finish before

moving on to the next.

39
  Asynchronous programming is crucial for building

scalable applications that can handle many concurrent

requests.

Cross-Platform

 Node.js runs on various operating systems,

including Windows, Linux, Unix, and

macOS.

 Its versatility makes it a popular choice for developing a

wide range of applications.

Use Cases and Advantages

 RESTful APIs and Microservices: Node.js is commonly used

for building RESTful APIs and microservices due to its

lightweight and scalability.

 Real-Time Web Apps: Applications requiring real-time

communication (chat, gaming, social media updates,

etc.) benefit from Node.js.

 Fast Execution: Thanks to the V8 engine, Node.js executes

40
code swiftly.

40
 Easy to Learn: If you already know JavaScript for front-end

development, learning Node.js is a natural extension.

 Data Streaming: Node.js efficiently handles I/O processes,

such as transcoding media files during uploads.

 Non-Blocking Event-Driven Architecture: Unlike traditional

web servers, Node.js handles concurrent requests effectively.

 Corporate Support: The Node.js community supports

its development and adoption.

41
 2.SYSTEM DESIGN

Preliminary Design

The activity deals with certain design issues, which are to be

finalized in consultation with the user. The two most

important

design issues of relevance to the user are the automation boundary

and the human - machine interface. The output of the activity is

the user implementation model. The major part of the user

implementation. model is the specification for the user interface of

the proposed system. The user implementation model is also

referred to as the physical model of the proposed system. The user

implementation model is also referred to as the physical model of

the proposed system. The model, in addition to the essential

model, defines the following for the proposed system.

 Automation boundary

 Report layouts

 Layouts of the source documents

42
  Screen layouts for the data entry forms

 Menu

Software Development Life Cycle

Systems are created to solve problems. One can think of the

systems approach as an organized way of dealing with a problem.

In this dynamic world, the subject System Analysis and Design

(SAD), mainly deals with the software development activities.

Following are the different phases of software development cycle:

 System study: It involves understanding the existing system

(if any) and identifying areas for improvement.

 Feasibility study: It assesses whether the proposed software

project is technically, economically, and operationally

feasible.

 System analysis: It involves creating detailed specifications

for the software components.

43
  System design: It defines the overall structure,

modules, interfaces, and data flow.

 Coding: It involves writing the source code based on

the design specifications.

 Testing: It includes unit testing, integration testing,

system testing, and user acceptance testing.

 Implementation: It involves installing the software on

users’ machines or servers.

 Maintenance: It includes ongoing support, bug

fixes, enhancements, and updates.

Economic Feasibility

Economic analysis is the most frequently used technique for

evaluating the effectiveness of a proposed system. More

commonly known as cost/benefit analysis; in this procedure we

determine the benefits and savings that are expected from a

proposed system and compare them with costs. We found the

44
benefits outweigh the

45
 costs; we take a decision to design and implement the new

proposed system. We classified the costs of Online Shoes Shop

according to the phase in which they occur. As we know that the

system development costs are usually one-time costs that will not

recur after the project has been completed. For calculating the

Development costs we evaluated certain cost categories viz.

 Personal costs

 Computer usage

 Supply and equipment costs

 Cost of any new computer equipment and software

Operational Feasibility

Operational feasibility criteria measure the urgency of the problem

(survey and study phases) or the acceptability of a solution

(selection, acquisition and design phases).

46
UML (Unified Modify Language)

The Unified Modelling Language (UML) is a standard language for

specifying, visualizing, constructing, and documenting the artifacts

of software systems, as well as for business modelling and other

non- software systems. The UML represents a collection of best

engineering practices that have proven successful in the

modelling of large and complex systems. The UML is a very

important part of

developing object oriented software and the software development

process. The UML uses mostly graphical notations to express the

design of software projects. Using the UML helps project teams.

Goals of UML

The primary goals in the design of the UML, were:

 Provide users with a ready-to-use, expressive visual

modelling language so they can develop and exchange

meaningful models.

 Provide extensibility and specialization mechanism to

extend the core concepts.

47
  Be independent of particular programming languages

and development processes.

 Provide a formal basis for understanding the modelling

 Support higher-level development concepts such as

collaborations, frameworks, patterns and

components.

 Integrate best practices

UML Diagram Types

1. USE CASE

A use case is a set of scenarios that describing an interaction

between a use and a system. A use case diagram displays the

relationship among users and use cases. The two main components

of a use case diagram are use cases and actors.

48
The user will interact with the system we are modelling. A use case

is an external view of the system that represents some action the

user might perform in order to complete a task.

49
Sale

41
0
Service

50
3. SYSTEM ANALYSIS

The objective of the system analysis activity is to develop

structured system specification for the proposed system. The

structured system specification should describe what the proposed

system would do; independent of the technology, which will be

used to

implement these requirements. The structured system

specification will be used to implement these requirements. The

structured system specification will be called the essential model.

The Essential model may itself consist of multiple models,

modelling different aspect of the system. The data flow diagrams

may model the data and their relationships and the state transition

diagram may model time dependent behaviour of the system. The

essential model thus consists of the following.

 Context diagram

 Levelled data flow diagrams

 Process specification for elementary bubbles

51
 Data dictionary for the flow and stores on the DFDs

52
4. SYSTEM DESIGN

The most creative and challenging phase of System Development

Life Cycle (SDLC) is Software Design. SDS is systematic

documentation of design. A design process involves "conceiving

and planning out in the mind" and "making drawing pattern or

sketch".

The term "design" describes a final system and the process by

which it is developed. It assist in catching potential errors before

the implementation phase itself which had been very costly to

remove otherwise.

System Design is a solution how to translate the system

requirement into a blue print for constructing the software. The

goal of SDS is not only to produce a correct design but the best

possible one within the limitation imposed by the requirements

and the physical and social environment in which the system will

operate.

53
 System design involves transformation of the user implementation

model into software design. The design specification of the

proposed system consists of the following.

 Database scheme

 Structure charts

 Pseudo codes for the modules in structure charts

Module Description

Data Modelling - Data modelling defines primary data objects,

composition of each data object, and attributes of the object,

relationships between each object and other objects and between

objects and the processes.

List of Tables:

 Login

 Customers

 Products

54
  Category

 Cart

 Order details

 Payment

 Feedback

Customer Registration Functionality:

 Log in for customer

 Change password for customer

 Edit Profile for customer

 Registration for customer

 Forget password for customer

Shopping Cart Functionality:

 Add product to shopping cart

 Listing of all products of shopping cart for a customer

 Remove products from the shopping cart

 Manage Shipments/Payments

55
  Adding shipment and payment details

 Add Sample/Normal Credit Card Details (Not Real)

 Make the payment

 Manage orders

 View all the orders

 View all the products of orders

 Shopping Experience

 Filter Products According to the category

 View all the details of the product

 Add to cart functionality for adding product to shopping cart

 Filter products according to manufacture and Company

These are the Functionality performed by the admin

 Login for Admin

 Forget password for Admin

 Edit profile for

Admin Manage Customer

 Adding New Customer

56
  Edit the Exiting Customer

 View profile of the Customer

 Listing of all

Customer Manage

Products

 Add Products

 View Details of the Products

 Listing of all the products

 Filter Products according to

Company Manage Products

Company/Manufacturer

 Add manufacturer for the products

 Listing of the Manufacturer

 Filter

manufacturer Manage

Orders

57
 Listing of the Orders

 Filter orders according to customer

 Change the status of the orders

58
Manage Shipments

 Listing of the Shipments

 Change the status of the

shipments Reports of the project online

Shopping

 Report of all Products

 Report of all Customers

 Report of all Orders

 Report of all shipments

 Report of all Products Manufacturer

59
ER Diagram

In software engineering, an entity-relationship model (ERM) is an

abstract and conceptual representation od data. Entity-relationship

modelling is a database modelling method, used to produce a type

of conceptual schema or semantic data model of a system, often a

relational database, and its requirements in a top-down fashion.

ER Diagrams are most often used to design or debug relational

databases in the fields of software engineering, business

information systems, education and research.

There are three main objects on an ER Diagram:

 Entities

 Relations

 Attributes

51
0
The symbols used in ER Diagrams are:

Symbols Purpose

Represent Entity sets

Represents attributes

Represent Relationship Sets

Line Represent flow

51
1
ER DIAGRAM

60
Activity Diagram

Activity Diagram describe the workflow behaviour of a system.

Activity diagrams are similar to state diagrams because activities

are the state of doing something. The diagrams describe the

state of activities by showing the sequence of activities

performed.

Activity diagrams can show activities that are conditional or

parallel.

61
 Flowchart

Data Flow Diagram

Data flow diagrams (DFD) are part of a structured model in the

development of software. They are a graphical technique that

depicts information flow and transforms that are applied as data

move from input to output. Basically, the function of DFDs is to

show the user a graphical analysis of a software system. It is like a

62
flowchart, except DFDs show the flow of data throughout the

system.

The following are some DFD symbols used in the projects

: Data Flow

: Process

: Entity

: Data Store

Levels of DFD

The complexity of the business system means that it is responsible

to represent the operations of any system of single data flow

diagram. At the top level, an overview of the different systems in an

63
organisation is shown by the way of context analysis diagram.

When exploded into DFD

They are represented by:

 LEVEL-0 : System Input/ Output

 LEVEL-1 : Subsystem Level Dataflow

 LEVEL-2 : File Level Detail Data Flow

The input and output data shown should be consistent from one

level to the next.

LEVEL-0 : System Input/ Output

A level-0 DFD describes the system-wide boundaries, dealing

inputs to and outputs from the system and major processes. This

diagram is similar to the combined user-level context diagram.

LEVEL-1 : Subsystem Level Dataflow

A level-1 DFD describes the next level of details within the system,

detailing the data flows between subsystems, which make up the

whole.

64
LEVEL-2 : File Level Detail Data Flow

All the projects are feasible given unlimited resources and infinite

time. It is both necessary and prudent to evaluate the feasibility of

the project at the earliest possible time.

0 Level Data Flow Diagram

A 0-Level Data Flow Diagram is a graphical representation of the

flow and process of an e-commerce platform, showing the different

roles and responsibilities between Users, Guests, and Admins. This

type of diagram provides an overview of the different parts that

make up a system and the relations they have with each other.

65
1st Level Admin Side Data Flow Diagram

1st level DFD describe the functionality of Admin, who is an owner

of the website. Admin can first add category of item, data stores of

shipping, Bill, Payment, Customer and Sales.

Main entities and output of First level DFD

 Processing Product records and generate report of all product

 Processing Category records and generate report of

all category

 Processing Sales records and generate report of all sales

 Processing Customer records and generate report of

all customer

 Processing Payment record and generate report of all payment

 Processing Bill records and generate report of all bill

 Processing Shipping records and generate report of

all shipping

66
1st Level Admin Side Data Flow Diagram

67
2nd Level Admin Side Data Flow Diagram

68
1st Level User Side Data Flow Diagram

The user is all people who operate or visit our website. User is a

customer of a website. User can first select product but user must

have to register in our system to purchase any item from our

website. Once registered he can login to site and buy item by

making online payment through any bank debit card.

69
2nd Level User Side Data Flow Diagram

This level provides an even more detailed view of the system by

breaking down the sub-processes identified in the level 1 DFD into

further sub-processes.

70
 Level – 0 DFD

For Registration

For Login

71
For Buying Product

72
5. DATABASE DESIGN

The data in the system has to be stored and retrieved from

database. Designing the database is part of system design.

Data

elements and data structures to be stored have been identified

at analysis stage. They are structured and put together to design

the data storage and retrieval system.

A database is a collection of interrelated data stored with minimum

redundancy to serve many users quickly and efficiently. The general

objective is to make database access easy, quick, inexpensive and

flexible for the user. Relationships are established between the

data items and unnecessary data items are removed. Normalization

is done to get an internal consistency of data and to have minimum

redundancy and maximum stability. This ensures minimizing data

storage required, minimizing chances of data inconsistencies and

optimizing for updates. The MS Access database has been chosen

for developing the relevant databases.

73
Overview of Database

74
User Management

75
Product Management

76
Shopping Process

77
MySQL Database

78
 User Table

Purchase Table

79
6. TESTING

Testing is the process of executing a program with the intent of

finding errors. Although software testing is itself an expensive

activity, yet launching of software without may lead to cost

potentially much higher than that of testing, especially in systems

where human safety is involved. Effective software testing will

contribute to the delivery of higher quality software products, more

satisfied users, and lower maintenance costs, more accurate and

reliable results. Software testing is necessary and important activity

of software development process.

Testing Objectives:

 Testing is the process of executing a program with the

intent of finding an error.

 A good test case design is one that has a probability of

finding an as yet undiscovered error.

 A successful test is one that uncovers an as yet undiscovered

error.
80
 These above objectives imply a dramatic change in view port.

Testing cannot show the absence of defects, it can only show that

software errors are present.

Structural Testing

Structural Testing takes into account the internal mechanism of a

system or component. Fatigue Testing is carried out with the

objective of determining the relationship between the stress range

and the number of times it can be applied before causing failure. So

when your product's structural durability needs to be predicted,

verified and validated, turn to DTB's Structural Testing and Fatigue

Testing experts. We provide you with the necessary structural

testing and fatigue testing equipment and personnel to test the

design and manufacturing integrity of your product. Call upon our

vast experience in commercial and military applications.

Typically this will count how many times each statement is

executed. At end, print out report showing which statements have

81
 and have not been executed. Problems with flow graph derived

testing:

 Data complexity not taken into account.

 Does not test all paths in combination.

Functional Testing

It is very useful and convenient in support of functional testing.

Although JMeter is known more as a performance testing tool,

functional testing elements can be integrated within the Test

Plan, which was originally designed to support load testing. Many

other load-testing tools provide little or none of this feature,

restricting themselves to performance-testing purposes. Besides

integrating

functional-testing elements along with load-testing elements in the

Test Plan, you can also create a Test Plan that runs these

exclusively. In other words, aside from creating a Load Test Plan, it

also allows you to create a Functional Test Plan. This flexibility is

82
certainly

resource-efficient for the testing project.

83
Interface Testing

Usually done at integration stage when modules or sub-systems

are combined. Objective is to detect errors or invalid assumptions

about interfaces between modules. Reason these are not shown

up in unit testing is that test case may perpetuate same incorrect

assumption made by module designer. Particularly important

when OO development has been used.

Four types of interfaces:

1. Parameter: data (or occasionally function references)

passed from one unit to another.

2. Shared memory: block of memory shared between units (e.g.

global variable). One places data there and the other retrieves

it.

3. Procedural: object-oriented or abstract data type form

of interface, encapsulating several procedures.

4. Message passing: one sub-system requests a service by passing

a message. Client-Server interface also used by some OO

architectures.
84
Three common kinds of interface errors:

 Interface misuse: caller gives wrong number/types/order

of parameters or sends invalid message.

 Interface misunderstanding: caller misunderstanding

specification of called component and provides or receives

data in legal but unexpected form.

 Timing errors: producer/consumer of data operates at

different speeds and data is accessed before being ready.

"Race conditions".

Common manifestations are when each unit assumes the other

one is checking for invalid data (failure to check return status) and

the consequences of when such a fault is propagated to other

units.

Testing Process

Best testing process is to test each subsystem separately, as we

have done in my project. Best done during implementation. Best

done after small sub-steps of the implementation rather than large

85
chunks. Once each lowest level unit has been tested, units are

86
combined with related I units and retested in combination. These

proceeds hierarchically bottom-up until the entire system is tested

as a whole.

Typical levels of testing:

 Unit-procedure, function, method

 Module -package, abstract data type, class

 Sub-system collection of related modules, cluster of

classes, method-message paths

 Acceptance testing - whole system with real data

(involve customer, user, etc.)

Alpha testing is acceptance testing with a single client (common for

bespoke systems)

Beta testing involves distributing system to potential customers to

use and provide feedback. In, this project, Beta testing has been

followed. This exposes system to situations and errors that might

not be anticipated by us.

87
7. CODE

Login Page
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device- width, initial-
scale=1.0">
<title>Book Store - Login</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Book Store</h1>
<form id="loginForm">
<input type="text"
id="username"
placeholder="Username" required>
<input type="password"
id="password" placeholder="Password"
required>
<button type="submit">Login</button>
88
</form>
<div class="links">

89
 <a href="#"
id="forgotPassword">Forgot Password?</a>
<a href="#" id="signUp">Sign Up</a>
</div>
</div>

<script src="script.js"></script>
</body>
</html>

CSS
body {
font-family: Arial, sans-
serif; margin: 0;
padding: 0;
display: flex;
justify-content:
center; align-items:
center; height:
100vh;
background-color: #f0f0f0;
}

.container {

81
0
text-align: center;

81
1
}

h1 {
margin-bottom: 30px;
}

form {
margin-bottom: 20px;
}

input[type="text"],
input[type="password"],
button {
padding: 10px;
margin-bottom:
10px; width: 100%;
box-sizing: border-box;
}

button {
background-color:
#4CAF50; color: white;
border: none;

81
2
 cursor: pointer;
}

button:hover {
background-color: #45a049;
}

.links a {
margin-right: 10px;
text-decoration:
none; color:
#007bff;
}

.links a:hover {
text-decoration: underline;
}

JAVASCRIPT
document.getElementById('loginForm').addEventList
en er('submit', function(event) {
event.preventDefault(); // Prevent
form submission
// Here you can add your login logic,
e.g., sending the data to a server
81
3
 // For demonstration, let's just log
the credentials to the console
const username =
document.getElementById('username').value;
const password =
document.getElementById('password').value;
console.log("Username:",
username);
console.log("Password:",
password);
});

document.getElementById('forgotPassword').addEven
tL istener('click', function(event) {
event.preventDefault();
alert("Forgot password functionality
not implemented yet!");
});

document.getElementById('signUp').addEventListene
r( 'click', function(event) {
event.preventDefault();
alert("Sign up functionality not
implemented yet!");
});

90
 Home Page
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device- width, initial-
scale=1.0">
<meta http-equiv="X-UA-
Compatible" content="ie=edge">
<!-- <link rel="stylesheet" href="/style.css">
-->
<title> Online Book Store</title>
<!-- favicon -->
<link rel="icon"
href="https://yt3.ggpht.com/a/AGF-
l78km1YyNXmF0r3- 0CycCA0HLA_i6zYn_8NZEg=s900-c-
k-c0xffffffff-no-rj- mo" type="image/gif"
sizes="16x16">
<!-- header links -->
<script
src="https://kit.fontawesome.com/4a3b1f73a2.js
"></s cript>
<link
href="https://fonts.googleapis.com/css?
family=Lato& display=swap" rel="stylesheet">
<!-- slider links -->
<!-- <script
src="http://code.jquery.com/jquery-
3.4.1.min.js" integrity="sha256-

91
CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo
=" crossorigin="anonymous"></script> -->

92
 <script src="js/jQuery3.4.1.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/s
lick- carousel/1.9.0/slick.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/s
lick- carousel/1.9.0/slick-theme.min.css">
</head>

<body>
<!-- HEADER -->
<div id="1"></div>
<script>
load("header.html"
); function
load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(1).innerHT
ML =
req.responseTex
t;
}
</script>
<!-- SLIDER -->
<div id="2"></div>
<script>
load("slider.html"
); function
load(url)
{
93
req = new
XMLHttpRequest();
req.open("GET", url,
false); req.send(null);

94
 document.getElementById(2).innerHT
ML = req.responseText;
}
</script>

<!-- CONTENT SECTION -->

<div id="3"></div>
<script>
load("content.html"
); function
load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(3).innerHT
ML =
req.responseTex
t;
}
</script>

<!-- FOOTER -->

<div id="4"></div>
<script>
load("footer.html"
); function
load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(4).innerHT
95
 ML =
req.responseTex
t;
}
</script>

96
</body>

<!-- slider JS START -->

<script
src="https://cdnjs.cloudflare.com/ajax/libs/slic
k- carousel/1.9.0/slick.min.js"></script>
<script>
$(document).ready(function()
{
$
('#containerSlider').s
lick({ dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500,
});
});
</script>
<!-- slider JS ENDS -->

<!-- content JS -->

<script src="content.js"></script>

</html>

CSS
body
{
margin: 0;
97
 font-family: 'Lato', sans-serif;
}
h1
{
width: 90%;
margin: auto;
padding: 50px
0;
letter-spacing:
2px; font-weight:
700;
text-transform: capitalize;
}
#containerClothing, #containerAccessories
{
display: grid;
grid-gap: 70px 20px;
grid-template-columns: repeat(5,
1fr); width: 90%;
margin: auto;
padding-bottom: 40px;
}
#bo
x
{ width: 100%;
background-color:
white; align-content:
center; border-
radius: 10px;
box-shadow: 1px 2px 6px 2px rgb(219, 219, 219);
}
#box:hover
{
98
 box-shadow: 1px 6px 3px 0 rgb(185, 185, 185);
}

99
#containerClothing img
{
width: 100%;
border-top-left-radius:
10px; border-top-right-
radius: 10px;
}
#containerAccessories img
{
width: 100%;
border-top-left-radius:
10px; border-top-right-
radius: 10px;
}
#details
{
padding: 0 15px;
text-transform: capitalize;
}
#box a
{
text-decoration:
none; color: rgb(29,
29, 29);
}
h3
{
font-size: 16px;
}
h4
{
font-weight: 100;
}
91
0
h2
{

91
1
 color: rgb(3, 94, 94);
}

/* MEDIA QUERY
*/

@media(max-width: 1070px)
{
h1
{
font-size: 25px;
}
#containerClothing, #containerAccessories
{
width: 95%;
grid-gap:
10px;
}
}
@media(max-width: 850px)
{
h1
{
width: 80%;
}
#containerBook, #containerAccessories
{
display: grid;
grid-gap: 70px 20px;
grid-template-columns: repeat(3,
1fr); width: 80%;
}
}
91
2
@media(max-width: 650px)
{
h1
{
font-size: 20px;
}
h1
{
width: 90%;
}
#containerClothing, #containerAccessories
{
width: 90%;
}
}
@media(max-width: 600px)
{
h1
{
width: 70%;
}
#containerClothing, #containerAccessories
{
width: 70%;
}
}
@media(max-width: 505px)
{
h1
{
width: 80%;
}

91
3
 #containerBook, #containerAccessories
{
width: 80%;
grid-template-columns: repeat(2, 1fr);
}
}

JAVASCRIPT

//

console.clear();

let contentTitle;

console.log(document.cookie);
function
dynamicClothingSection(ob) {
let boxDiv =
document.createElement("div");
boxDiv.id = "box";

let boxLink = document.createElement("a");

// boxLink.href = '#'
boxLink.href = "/contentDetails.html?" + ob.id;
// console.log('link=>' + boxLink);

let imgTag = document.createElement("img");

// imgTag.id = 'image1'
// imgTag.id =
ob.photos imgTag.src
= ob.preview;

91
4
let detailsDiv =
document.createElement("div");
detailsDiv.id = "details";

let h3 = document.createElement("h3");

91
5
 let h3Text =
document.createTextNode(ob.name);
h3.appendChild(h3Text);

let h4 = document.createElement("h4");
let h4Text =
document.createTextNode(ob.brand);
h4.appendChild(h4Text);

let h2 = document.createElement("h2");
let h2Text = document.createTextNode("rs " +
ob.price);
h2.appendChild(h2Text);

boxDiv.appendChild(boxLink);
boxLink.appendChild(imgTag);
boxLink.appendChild(detailsDiv);
detailsDiv.appendChild(h3);
detailsDiv.appendChild(h4);
detailsDiv.appendChild(h2);

return boxDiv;
}

// TO SHOW THE RENDERED CODE IN CONSOLE

// console.log(dynamicClothingSection());

//

console.log(boxDiv)

let mainContainer =
document.getElementById("mainContaine
100
r"); let containerClothing =
document.getElementById("containerClothing");

100
let containerAccessories =
document.getElementById("containerAccessori
es");
//
mainContainer.appendChild(dynamicClothingSectio
n('h ello world!!'))

// BACKEND CALLING

let httpRequest = new XMLHttpRequest();

httpRequest.onreadystatechange =

function() {
if (this.readyState === 4) {
if (this.status == 200) {
// console.log('call successful');
contentTitle =
JSON.parse(this.responseText); if
(document.cookie.indexOf(",counter=") >=
0) {
var counter =
document.cookie.split(",")[1].split("=")[1];
document.getElementById("badge").inner
HTML
= counter;
}
for (let i = 0; i < contentTitle.length; i++)
{
if (contentTitle[i].isAccessory) {
console.log(contentTitle[i]);
containerAccessories.appendChild(
dynamicBookSection(contentTitle[i])
101
 );
} else {
console.log(contentTitle[i]
);
containerBook.appendChild
(

101
 bookSection(contentTitle[i])
);
}
}
} else {
console.log("call failed!");
}
}
};
httpRequest.ope
n( "GET",
"https://5d76bf96515d1a0014085cf9.mockapi.io/
prod uct",
true
);
httpRequest.send();

Product Page
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device- width, initial-
scale=1.0">
<meta http-equiv="X-UA-
Compatible" content="ie=edge">
<title> CONTENT DETAILS | E-COMMERCE WEBSITE BY
EDYODA </title>
102
 <!-- favicon -->
<link rel="icon"
href="https://yt3.ggpht.com/a/AGF-
l78km1YyNXmF0r3- 0CycCA0HLA_i6zYn_8NZEg=s900-c-
k-c0xffffffff-no-rj- mo" type="image/gif"
sizes="16x16">
<!-- <link rel="stylesheet" href="/box1.css"> -
->
<link rel="stylesheet"
href="css/contetDetails.css">
<link
href="https://fonts.googleapis.com/css?
family=Lato& display=swap" rel="stylesheet">
<!-- header links -->
<script
src="https://kit.fontawesome.com/4a3b1f73a2.js
"></s cript>
<link
href="https://fonts.googleapis.com/css?
family=Lato& display=swap" rel="stylesheet">

</head>

<body>
<!-- HEADER -->
<div id="1"></div>
<script>
load("header.html"
); function
load(url)
{
req = new
XMLHttpRequest();
103
req.open("GET", url,
false); req.send(null);

103
 document.getElementById(1).innerHT
ML = req.responseText;
}
</
script>

<div id="containerProduct">
<!-- JS rendered code -->
</div>

<script src="/contentDetails.js"></script>

<!-- FOOTER -->

<div id="4"></div>
<script>
load("footer.html"
); function
load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(4).innerHT
ML =
req.responseText;
}
</
script>
</body>
</html>

CSS
104
body
{
margin: 0;

104
 text-transform: capitalize;
font-family: 'Lato', sans-
serif; font-weight: 100;
}

#containerProduct
{
padding-top: 80px;
}
#containerD
{
width: 90%;
margin: auto;
display: grid;
grid-template-columns: 1fr
2fr; padding: 80px 40px;
}
#imageSection
{
width: 80%;
margin: auto;
}
#imageSection img
{
width: 100%;
float: right;
border-radius: 10px;
box-shadow: 1px 2px 6px 2px rgb(219, 219, 219);
}
#imageSection img:hover
{
box-shadow: 1px 0px 9px 1px rgb(3, 122, 122);

105
}

#productDetails
{
width: 100%;
}
h1
{
font-size: 35px;
letter-spacing:
1px; word-spacing:
2px;
}
h4
{
font-size: 15px;
font-weight:
bold;
color: rgb(3, 122,
122); letter-spacing:
1px; word-spacing:
2px;
}
#productPreview
{
padding-bottom: 10px;
}
#productPreview > img
{
width: 50px;
padding: 10px
10px; border-
106
 radius: 15px;
cursor: pointer;
}

106
p
{
font-size: 15px;
word-spacing: 2px;
letter-spacing:
1px; line-height:
25px;
}
button
{
padding: 10px
15px; color:
white;
background-color: rgb(3, 122,
122); border: none;
border-radius:
5px; cursor:
pointer; font-
size: 20px;
}
button a
{
text-decoration:
none; font-size:
18px;
}
button:hover
{
background-color: rgb(3, 94, 94);
}
button a:focus
{
outline: none;
107
}

107
/* MEDIA QUERY
*/

@media(max-width: 1300px)
{
h1
{
font-size: 28px;
}
#productPreview > img
{
width: 40px;
padding: 10px
10px;
padding-bottom: 30px;
}
button
{
padding: 8px 13px;
background-color: rgb(3, 122,
122); border: none;
border-radius:
5px; cursor:
pointer;
}
}

@media(max-width: 1170px)
{
h1
{
font-size: 22px;
}
108
#productPreview > img

108
 {
width: 40px;
padding: 10px
10px;
padding-bottom: 30px;
}
button a
{
font-size: 15px;

}
h4, p
{
font-size: 13px;
}
h3
{
font-size: 15px;
}

@media(max-width: 900px)
{
/* #containerProduct
*/ #containerD
{
width: 60%;
margin: auto;
display: grid;
grid-template-columns: 1fr;
}
#imageSection
109
 {
width: 100%;
text-align: center;
}
#imageSection img
{
text-align:
center; width:
70%;
float: none;
}
#productDetails
{
width: 100%;
}
#button
{
text-align: center;
}
}

@media(max-width: 650px)
{
#containerD
{
width: 80%;
}
}
JAVASCRIPT
console.clear()

let id = location.search.split('?')[1]
110
console.log(id)

if(document.cookie.indexOf(',counter=')>=0)
{
let counter =
document.cookie.split(',')
[1].split('=')[1]
document.getElementById("badge").innerHT
ML = counter
}

function dynamicContentDetails(ob)
{
let mainContainer =
document.createElement('di
v')
mainContainer.id = 'containerD'
document.getElementById('containerProduct')
.app
endChild(mainContainer);

let imageSectionDiv =
document.createElement('di
v')
imageSectionDiv.id = 'imageSection'

let imgTag =
document.createElement('img')
imgTag.id = 'imgDetails'
//imgTag.id =
ob.photos imgTag.src
= ob.preview

111
 imageSectionDiv.appendChild(imgT

ag) let productDetailsDiv =

document.createElement('div')
productDetailsDiv.id = 'productDetails'

112
 // console.log(productDetailsDiv);

let h1 = document.createElement('h1')
let h1Text =
document.createTextNode(ob.name)
h1.appendChild(h1Text)

let h4 = document.createElement('h4')
let h4Text =
document.createTextNode(ob.brand)
h4.appendChild(h4Text)
console.log(h4);

let detailsDiv =
document.createElement('div')
detailsDiv.id = 'details'

let h3DetailsDiv =
document.createElement('h3') let
h3DetailsText = document.createTextNode('Rs
' + ob.price)
h3DetailsDiv.appendChild(h3DetailsText)

let h3 =
document.createElement('h3') let
h3Text =
document.createTextNode('Descripti
on') h3.appendChild(h3Text)

let para =
document.createElement('p') let
paraText =
113
document.createTextNode(ob.descript
ion) para.appendChild(paraText)

let productPreviewDiv
=
document.createElement('di
v')

114
 productPreviewDiv.id = 'productPreview'

let
h3ProductPreviewDiv =
document.createElement('h3
')
let h3ProductPreviewText =
document.createTextNode('Product
Preview')
h3ProductPreviewDiv.appendChild(h3ProductPrev
ie wText)
productPreviewDiv.appendChild(h3ProductPreviewD
iv)

let i;
for(i=0; i<ob.photos.length; i++)
{
let
imgTagProductPreviewDiv =
document.createElement('img')
imgTagProductPreviewDiv.id =
'previewImg'
imgTagProductPreviewDiv.src =
ob.photos[i]
imgTagProductPreviewDiv.onclick =
function(event)
{
console.log("clicked" + this.src)
imgTag.src = ob.photos[i]
document.getElementById("imgDetails
").s
rc = this.src

115
 }
productPreviewDiv.appendChild(imgTagProdu
ct PreviewDiv)
}

let buttonDiv = document.createElement('div')

116
 buttonDiv.id = 'button'

let buttonTag =
document.createElement('butto
n')
buttonDiv.appendChild(buttonTag)

buttonText =
document.createTextNode('Add to Cart')
buttonTag.onclick = function()
{
let order = id+"
" let counter =
1
if(document.cookie.indexOf(',counter=')>=0)
{
order = id + " " +
document.cookie.split(',')
[0].split('=')[1]
counter =
Number(document.cookie.split(',')[1].split('=')
[1])
+ 1
}
document.cookie = "orderId=" +
order + ",counter=" + counter
document.getElementById("badge").innerHTML
= counter
console.log(document.cookie)
}
buttonTag.appendChild(buttonText)

117
 console.log(mainContainer.appendChild(imageSe
ct ionDiv));
mainContainer.appendChild(imageSectionDiv)

118
 mainContainer.appendChild(productDetailsDi
v) productDetailsDiv.appendChild(h1)
productDetailsDiv.appendChild(h4)
productDetailsDiv.appendChild(detailsDiv)
detailsDiv.appendChild(h3DetailsDiv)
detailsDiv.appendChild(h3)
detailsDiv.appendChild(para)
productDetailsDiv.appendChild(productPreviewD
iv
)

productDetailsDiv.appendChild(buttonDiv)

return mainContainer
}

// BACKEND CALLING

let httpRequest = new XMLHttpRequest()

{
httpRequest.onreadystatechange = function()
{
if(this.readyState === 4 && this.status ==
200)
{
console.log('connected!!
'); let contentDetails =
JSON.parse(this.responseText)
{
console.log(contentDetails);
119
 dynamicContentDetails(contentDetail
s)
}
}
else
{
console.log('not connected!');
}
}
}

httpRequest.open('GET',
'https://5d76bf96515d1a0014085cf9.mockapi.io/prod
uc t/'+id, true)
httpRequest.send()

Shopping Cart
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device- width, initial-
scale=1.0">
<meta http-equiv="X-UA-
Compatible" content="ie=edge">
120
 <title> Cart | E-COMMERCE WEBSITE BY EDYODA
</title>
<link rel="stylesheet" href="css/cart.css">
<!-- favicon -->
<link rel="icon"
href="https://yt3.ggpht.com/a/AGF-
l78km1YyNXmF0r3- 0CycCA0HLA_i6zYn_8NZEg=s900-c-
k-c0xffffffff-no-rj- mo" type="image/gif"
sizes="16x16">
<!-- header links -->
<script
src="https://kit.fontawesome.com/4a3b1f73a2.js
"></s cript>
<link
href="https://fonts.googleapis.com/css?
family=Lato& display=swap" rel="stylesheet">

</head>
<body>
<!-- HEADER -->
<div id="1"></div>
<script>
load("header.html"
); function
load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(1).innerHT
ML =
req.responseTex
t;
121
 }
</script>

122
 <!-- CART CONTAINER -->
<div id="cartMainContainer">
<h1> Checkout </h1>
<h3 id="totalItem"> Total Items: 0 </h3>

<div id="cartContainer">
<!-- JS rendered code -->
</div>

</div>

</body>
<!-- FOOTER -->
<div id="4"></div>
<script>
load("footer.html"
); function
load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(4).innerHT
ML =
req.responseTex
t;
}
</script>
<script src="/cart.js"></script>
</html>

123
CSS
body

124
{
margin: 0;
font-family: 'Lato', sans-serif;
}
#cartMainContainer
{
padding: 90px 50px;
}
#cartContainer
{
display: grid;
grid-template-columns: 1fr
1fr; grid-gap: 20px;
}
im
g
{ width:
80px;
float:
left;
border-radius:
} 10px; margin-
right: 50px;
#boxContainer
{
{

}
#bo
x
125
d ding: 20px;
i width: 100%;
s /* float: left; */
p
l
a
y background-color: white;
:

g
r
i
d
;

g
r
i
d
-
g
a
p
:

2
0
p
x
;

p
a
d
126
 box-shadow: 1px 2px 2px rgb(219 219, 219)
6px , ;
border-radius: 10px;
width: 100%;
/* margin: auto */
padding: 20px 10px;
}
#box:hover
{
box-shadow: 0px 1px 3px 2px rgb(185, 185, 185);
}
#totalContainer
{
width: 50%;
padding:
20px;
margin:
auto;
background-color:
white; border-radius:
10px;
box-shadow: 1px 2px 6px 2px rgb(219, 219, 219);
}
#totalContainer:hover
{
box-shadow: 0px 1px 3px 2px rgb(185, 185, 185);
}
button
{
padding: 8px 12px;
background-color: rgb(3, 122,
122); border: none;

127
 border-radius:
5px; cursor:
pointer;
}
button a

128
{
text-decoration:
none; color: white;
font-size: 15px;
}
button:hover
{
background-color: rgb(3, 94, 94);
}
button a:focus
{
outline: none;
}

/* MEDIA QUERY
*/

@media(max-width: 800px)
{
im
g
{ width: 60px;
margin-right: 20px;

}
h3, h4
{
font-size: 14px;
}
h2
{
font-size: 18px;
}
129
 #cartMainContainer
{
padding: 90px 20px;
}
}
@media(max-width: 555px)
{
#cartContainer
{
display: grid;
grid-template-columns: 1fr;
}
#boxContainer
{
padding:
20px; width:
80%;
}
}

JAVASCRIPT
console.clear();

if(document.cookie.indexOf(',counter=')>=0)
{
let counter =
document.cookie.split(',')
[1].split('=')[1]
document.getElementById("badge").innerHT
ML = counter
130
}

131
let cartContainer =
document.getElementById('cartContain
er')

let boxContainerDiv =
document.createElement('div')
boxContainerDiv.id = 'boxContainer'

// DYNAMIC CODE TO SHOW THE SELECTED ITEMS IN

YOUR CART
function dynamicCartSection(ob,itemCounter)
{
let boxDiv =
document.createElement('div')
boxDiv.id = 'box'
boxContainerDiv.appendChild(boxDiv)

let boxImg =
document.createElement('img')
boxImg.src = ob.preview
boxDiv.appendChild(boxImg)

le boxh3 = document.createElement('h3')
t
le h3Text = +
t document.createTextNode(ob.name
' × ' itemCounter)
+
// let h3Text =
document.createTextNode(ob.name)
boxh3.appendChild(h3Te
xt)
boxDiv.appendChild(box
h3)
132
 let boxh4 = document.createElement('h4')
let h4Text =
document.createTextNode('Amount: Rs' +
ob.price)
boxh4.appendChild(h4Te
xt)
boxDiv.appendChild(box
h4)

133
 // console.log(boxContainerDiv);

buttonLink.appendChild(buttonText)
cartContainer.appendChild(boxContainerDiv)
cartContainer.appendChild(totalContainerDiv)
// let cartMain = document.createElement('div')
// cartmain.id = 'cartMainContainer'
// cartMain.appendChild(totalContainerDiv)

return cartContainer
}

let totalContainerDiv =
document.createElement('div')
totalContainerDiv.id =
'totalContainer'

let totalDiv =
document.createElement('div')
totalDiv.id = 'total'
totalContainerDiv.appendChild(totalDiv)

let totalh2 =
document.createElement('h2') let h2Text
= document.createTextNode('Total
Amount')
totalh2.appendChild(h2Text)
totalDiv.appendChild(totalh2)

// TO UPDATE THE TOTAL AMOUNT

function amountUpdate(amount)
{
let totalh4 = document.createElement('h4')
134
 // let totalh4Text =
document.createTextNode(amount)

135
 let totalh4Text =
document.createTextNode('Amount: Rs ' +
amount)
totalh4Text.id = 'toth4'
totalh4.appendChild(totalh4Text)
totalDiv.appendChild(totalh4)
totalDiv.appendChild(buttonDiv)
console.log(totalh4);
}

let buttonDiv =
document.createElement('div')
buttonDiv.id = 'button'
totalDiv.appendChild(buttonDiv)

let buttonTag =
document.createElement('button')
buttonDiv.appendChild(buttonTag)

let buttonLink =
document.createElement('a')
buttonLink.href = '/orderPlaced.html?'
buttonTag.appendChild(buttonLink)

buttonText = document.createTextNode('Place
Order') buttonTag.onclick = function()
{
console.log("clicked")
}
//dynamicCartSection()
// console.log(dynamicCartSection());

136
// BACKEND CALL
let httpRequest = new
XMLHttpRequest() let totalAmount =
0

137
httpRequest.onreadystatechange = function()
{
if(this.readyState === 4)
{
if(this.status == 200)
{
// console.log('call
successful'); contentTitle =
JSON.parse(this.responseText)

let counter =
Number(document.cookie.split(',')
[1].split('=')[1])
document.getElementById("totalItem"
).in nerHTML = ('Total Items: ' + counter)

let item =
document.cookie.split(',')[0].split('=')
[1].split(" ")
console.log(counte
r)
console.log(item)

let i;
let totalAmount = 0
for(i=0; i<counter; i+
+)
{
let itemCounter = 1
for(let j = i+1; j<counter; j++)
{
)
Number(item[i])
138
if(Number(item[j])
==

{
itemCounter
+=1;

139
 }
}
totalAmount +=
Number(contentTitle[item[i]-1].price) * itemCounter
dynamicCartSection(contentTitle[i
te m[i]-1],itemCounter)
i += (itemCounter-1)
}
amountUpdate(totalAmount)
}
}
els
e
{ console.log('call failed!');

}
}

httpRequest.open('GET',
'https://5d76bf96515d1a0014085cf9.mockapi.io/prod
uc t', true)
httpRequest.send()

140
8. OUTPUT OF SCREEN

Login Page

141
Home Page

142
Product Page

143
Shopping Cart

144
9. IMPLEMENTATION OF SECURITY

E-commerce Implementing security measures in an e-commerce

website is crucial to protect user data, ensure transaction integrity,

and maintain the trust of your customers. Here are some key

security implementations:

 User Authentication: Used strong authentication

methods such as password hashing and salting, multi-

factor

authentication (MFA), or OAuth for user login. Ensured that

passwords are stored securely and not in plaintext format.

 Session Management: Implementing secure session

management techniques to prevent session hijacking and

fixation attacks. Used secure cookies, session tokens, and

enforce session timeouts to mitigate the risk of

unauthorized access to user accounts.

 Input Validation: Validate and sanitize all user input to

prevent common vulnerabilities such as SQL injection, cross-

145
site

scripting (XSS), and command injection attacks.

146
 Cross-Site Request Forgery (CSRF) Protection: Implemented

CSRF tokens to protect against CSRF attacks, where an

attacker tricks a user into performing unintended actions on

your website. Validate CSRF tokens with each request to

ensure

they originated from your website.

 Regular Security Audits and Penetration Testing: Conducted

regular security audits and penetration testing to identify

and remediate security vulnerabilities in your e-commerce

application. Perform code reviews, vulnerability assessments,

and security scans to ensure the robustness of your security

measures.

 Data Backup and Disaster Recovery: Implemented robust

data backup and disaster recovery procedures to protect

against data loss and ensure business continuity in the event

of a

security breach or system failure. Regularly backup critical

data and test restoration procedures to verify their

147
effectiveness.

148
10. LIMITATIONS OF PROJECT

Here are some limitations of my ecommerce website, I am

currently working to fix most of them:

 Limited Payment Options: My project only support a

few payment gateways due to technical constraints or

lack of integration resources.

 Basic Security Measures: While I implement security

features like HTTPS and basic encryption, my project lack

advanced

security measures such as two-factor authentication or

robust data encryption protocols.

 Limited Product Inventory: Due to time and resource

constraints, my project feature a limited number of products

or product categories compared to real-world ecommerce

platforms.

 Simplified Search and Filtering:My project offer basic

search and filtering functionalities.

149
 Performance Limitations: Your project may experience

performance issues, such as slower page loading times or

occasional server downtime, especially when handling a

large number of concurrent users or transactions.

 Lack of Personalization: Unlike advanced ecommerce

platforms, your project may not offer personalized product

recommendations or user-specific content based on past

browsing behaviour or purchase history.

 Limited Customer Support: Your project may only

provide basic customer support options such as email or

contact

forms, lacking features like live chat support or 24/7

customer service availability.

 Minimal Analytics and Reporting: While you may

incorporate basic analytics tools, your project may lack

comprehensive reporting features for analysing sales trends,

customer behaviour, or website performance.

150
11. FUTURE SCOPE OF PROJECT

E-commerce had bloomed over the years and is one of the fastest-

growing domains in the online world. Though it took some time for

this to be accepted by the end-users, today we are at a point

where the majority of the people love to shop online. There were

numerous concerns revolving around online shopping at its launch,

but over years people tend to have started trusting e-commerce

for all their shopping needs. In India, people prefer shopping online

these days rather than having to visit the physical store. The

payment features that are smart and secure as well as the cash

on delivery (COD), which makes the payment, even more, safer

with hassle-free shipping, easy returns and reach out.

Here are some potential future scope areas my e-commerce

website for books:

 Enhanced Recommendation System: Implement a more

advanced recommendation system based on user behaviour,

preferences, and past purchases. This could involve machine

151
 learning algorithms to provide personalized

book recommendations.

 Social Integration: Integrate social media platforms to

allow users to share their favourite books, reviews, and

purchases with their friends. Implement social login

options for easier registration and sharing.

 Mobile Application Development: Expand the project by

developing a mobile application for the e-commerce

platform, catering to users who prefer shopping on their

smartphones or tablets. Ensure seamless synchronization

between the website and the mobile app.

 Enhanced Security Measures: Strengthen security measures

to protect user data, payment transactions, and sensitive

information from cyber threats and data breaches.

Implement encryption, two-factor authentication, and regular

security

audits.

152
12. CONCLUSION

Online shopping is the process whereby consumers directly buy

goods or services from a seller in real-time, without an

intermediary service, over Give interactive product guides to keep

visitors entertained and engaged at the same time.

This is a web-based online shopping portal. The purpose of this

portal is to automate and facilitate the whole process of shopping.

This portal fixes the limitation and problems of paper based

processes.

This project Online Shopping System is very helpful for where the

customer can directly buy the products or items from home

through internet connection on mobile or system. This project

reduces lot of work load for customer as well as owner. The

transaction of money is completed in real time system. Some of the

online shops are

Flipkart, Amazon etc.

Customer can find Shoes easily category or by word. After viewing

153
the descriptions selecting their required brands and on

154
confirmation they can add to their shopping cart and buy. The

buyer can choose the mode of payment and can easily pay for the

bought products.

In conclusion, the development of an ecommerce website for books

has been a challenging yet rewarding journey. Throughout the

process, various aspects of web development, user experience

design, and business logic have been explored and implemented.

The project aimed to provide users with a seamless shopping

experience while also offering a platform for book enthusiasts to

discover, purchase, and engage with a wide range of literary

content.

155
13. BIBLIOGRAPHY

An Introduction to Database Management System IGNOU

reference book

 Introduction to Software Engineering IGNOU reference book

 HTML & CSS

Internet Concepts and Web Design (IGNOU reference book)

https://www.w3schools.com/html

 JavaScript

https://www.w3schools.com/javascript

 www.google.com

156