A

Learning Project-II Report

On

“ECOMMERCE WEBSITE”
Submitted in partial fulfillment of
The requirements for the 4th Semester Sessional
Examination of
BACHELOR OF TECHNOLOGY
IN

COMPUTER SCIENCE & ENGINEERING

By

RAJDEEP PUROHIT-22UG010300

SAMEER KU PANDA-22UG010595

SANGRAM PANIGRAHY-22UG010432

DEPARTMENT OF COMPUTER SCIENCE &

ENGINEERING

GIET UNIVERSITY, GUNUpUR

 2023 - 24

GIET UNIVERSITY,GUNUPUR
Dist. - Rayagada, Odisha-765022,Contact:- +91
7735745535, 06857-250170,172,Visit us:-www.giet.edu

Department of Computer Science&Engineering

CERTIFICATE

This is to certify that the project work entitled “ECOMMERCE

WEBSUTES” is done BY RAJDEEP PUROHIT-22UG010300,
SANGRAM PANIGRAHY-22UG010559 , SAMEER KU PANDA-
22UG010432 -in partial fulfillment of the requirements for the 3rdSemester
Sessional Examination of Bachelor of Technology in Computer Science and
Engineering during the academic year 2023-24. This work is submitted to the
department as a part of evaluation of 3rd Semester Learning Project-I.

Proctors ClassTeacher

Project Coordinator HoD, CSE,2nd year

2ndYear
2
 ACKNOWLEDGEMENT

We express our sincere gratitude to Mr. Radhanath Patra of Computer science and engineering
for giving us an opportunity to accomplish the project. Without her active support and guidance,
this project report has not been successfully completed.

We also thank our class teacher Mr. Sucheta Krupalini Moharana for her constant support and
guidance provided during this project period.

We also thank Dr. Bhavani Sankar Panda, Project Coordinator, Dr Sachikanta Dash, Head of the
Department of Computer Science and Engineering, Prof. (Dr.) Sanjay Kumar Kuanar, Dy. Dean,
Computational Science, SOET for their consistent support, guidance and help.

Rajdeep purohit-22UG010300

Sangram panigrahy-22UG010559

Sameer ku panda-22UG010432

3
 DECLARATION

We hereby declare that project titled “E-COMMERCES WEBSITES ” is a bonafide

original record done by us at GIET University, Gunupur towards the partial fulfillment of
requirement of Learning Project – 02, 4th Semester, School of Engineering and
Technology, Department of Computer Science and Engineering during the period of 2023-
204 in GIET University, Gunupur, also we state that this project has not been submitted
anywhere in the partial fulfillment for any degree of this or any other University.

Rajdeep purohit-22UG010300

Sangram panigrahy-22UG010559

Sameer ku panda-22UG010432

4
 ABSTRACT

The exponential growth of e-commerce has revolutionized the way

businesses operate and consumers shop. In this digital age, having a robust
online presence is imperative for businesses to thrive. This project aims to
design and develop an innovative e-commerce website that not only
provides a seamless shopping experience for customers but also offers
powerful tools and features for merchants to effectively manage their online
stores.

The proposed e-commerce platform will incorporate cutting-edge

technologies and user-centric design principles to create a dynamic and
engaging shopping environment. Key features will include a responsive and
intuitive user interface, personalized product recommendations, secure
payment processing, and efficient order management systems. Additionally,
advanced search and filtering capabilities will enhance the discoverability of
products, while integrated social media and marketing tools will facilitate
customer engagement and retention.

Furthermore, the website will prioritize scalability and performance,

ensuring smooth operation even during peak traffic periods. Backend
functionalities will include inventory management, analytics, and customer
relationship management tools to empower merchants with valuable insights
and tools for business growth.

Overall, this project endeavors to leverage the latest advancements in e-

commerce technology to deliver a comprehensive and user-friendly platform
that meets the needs of both customers and merchants in the competitive
online marketplace.
5
INDEX
1. INTRODUCTION

1.1 Introduction

1.2 Problem introduction

1.3 Modules in the project

2. REQUIREMENTS SPECIFICATION

2.1 Introduction

2.2 Hardware requirements

2.3 Software requirements

3. MARKET ANALYSIS

3.1 Market trends

3.2 Competitors

3.3 Potential Challenges

3.4 Research on the furniture industry

4. DESIGN

4.1 System Design

4.1.1 Introduction to UML

4.1.2 UML Diagrams of our project

5. SYSTEM IMPLEMENTATION

5.1 Introduction

5.2 Sample code

6. TESTING

6
 6.1 Introduction

6.2 testing methods

7. SAMPLE SCREENSHOTS

8. CONCLUSION

CHAPTER 1
INTRODUCTION
1.1 Introduction:

.In an era dominated by digital innovation and rapid technological advancement, the
landscape of commerce has undergone a profound transformation. The rise of e-commerce
has fundamentally altered the way businesses operate and consumers shop, ushering in an
era of unparalleled convenience, accessibility, and opportunity. As the boundaries of
traditional brick-and-mortar stores blur in the wake of online marketplaces, the need for
dynamic, user-centric e-commerce platforms has never been more pronounced.

This project represents a comprehensive endeavor to conceptualize, design, and develop a

cutting-edge e-commerce website poised to redefine the online shopping experience. With
a keen focus on innovation, usability, and scalability, our aim is to create a platform that
not only meets the diverse needs of modern consumers but also empowers merchants to
thrive in the competitive digital marketplace.

As we embark on this journey, our vision is clear: to leverage the latest advancements in
technology, design, and user experience to craft a dynamic and immersive online shopping
destination. Through meticulous research, strategic planning, and collaborative iteration,
we seek to transcend the conventional boundaries of e-commerce, setting new standards of
excellence and paving the way for unprecedented growth and success.

7
This introduction sets the stage for an ambitious exploration into the complexities of e-
commerce website development, highlighting the transformative potential of our project
and underscoring its significance in shaping the future of online commerce. With
innovation as our guiding principle and user satisfaction as our ultimate goal, we are poised
to embark on a journey of discovery, creativity, and achievement in the dynamic world of
e-commerce..

1.2 Problem Introduction:

Trust and Security Concerns:

E-commerce transactions often involve sharing sensitive personal and financial

information, leading to concerns about data security and privacy.Instances of data
breaches, fraudulent activities, and identity theft undermine trust between consumers and
online retailers, hindering adoption and growth.

User Experience Challenges:

Navigating through cluttered interfaces, cumbersome checkout processes, and slow

loading times can frustrate users, leading to high bounce rates and abandoned carts.Lack
of personalized recommendations and intuitive search functionalities limit the ability of
consumers to discover relevant products, resulting in suboptimal shopping experiences.

Accessibility Issues:

Not all e-commerce websites are designed to accommodate users with disabilities, thereby
excluding a significant portion of the population from accessing goods and services online.
Inadequate support for different devices and internet connections further exacerbates
accessibility challenges, alienating potential customers and limiting market reach.

Supply Chain Disruptions:

Global events, such as pandemics, natural disasters, and geopolitical tensions, can disrupt
supply chains, leading to inventory shortages, shipping delays, and price fluctuations.These
disruptions undermine the reliability and predictability of e-commerce operations,
impacting customer satisfaction and brand reputation.

Marketplace Fragmentation:

The proliferation of multiple e-commerce platforms and marketplaces often results in

fragmentation, making it challenging for both consumers and merchants to navigate and

8
compare offerings effectively. Fragmentation also leads to inconsistencies in pricing,
product information, and customer service standards, complicating decision-making
processes for users.

Objective:-

Describe the main goal of the eCommerce website (e.g., selling products, customer
engagement, scaling business operations)

1. Enhance User Experience:

2. Ensure Trust and Security:
3. Optimize Accessibility:
4. Strengthen Supply Chain Resilience:
5. Foster Marketplace Integration:
6. Drive Conversion and Retention:
7. Facilitate Merchant Empowerment:

Scope of the Project:-

Scope of project document for an eCommerce website is essential for ensuring

that all stakeholders have clear expectations and understand the parameters of
the project. This document outlines the features, timeline, budget, and resources
required to successfully deliver the eCommerce website. Here’s a detailed scope
of project outline for an eCommerce website:

1. Project Overview
 Objective: Describe the main goal of the eCommerce website (e.g., selling
products, customer engagement, scaling business operations).
 Background: Provide context or background information why the project is
being initiated.
 Scope Statement: Briefly define what the project will deliver and outline the
boundaries of the project.

2. Project Features and Functionalities

 Product Catalogue: Structure for listing products including categories, sub-
categories, and detailed product pages.

9
  Shopping Cart and Checkout Process: Mechanisms for adding items to a cart
and securely processing payments.
 User Account System: Registration, user profiles, order history, and account
management.
 Search Functionality: Advanced search options by various filters like price,
category, brand, etc.
 Security Features: Implementations to ensure data protection, secure
transactions, and compliance with relevant standards (e.g., PCI DSS for payment
security).
 Customer Support Features: email support, and customer service tools.
 Backend Management: Admin panel for managing products, orders, customers,
and other backend functionalities.

3. Technology Stack
 Frontend: Technologies like HTML, CSS, JavaScript, Bootstrap.
 Backend: Server, database, and application logic technologies such as Python
Django.
 Database: .Python Django admin.
 Hosting/Cloud Services: AWS, Azure, or Google Cloud for hosting and storage
needs.

4. Project Deliverables
 Design Mockups: Visual designs of the website's layout and user interface.
 Technical Specifications: Detailed documentation of the architecture and
technologies used.
 Development Milestones: Phased breakdown of development stages.
 Testing Reports: Documentation of testing phases, issues found, and their
resolutions.
 User Manuals/Documentation: Guides for users and administrators on how to
use the website.

5. Timeline
 Project Kick-off: Start date of the project.
 Milestones: Key milestones with expected completion dates.
 Final Delivery: Expected launch date of the website.

6. Budget
 Estimate Costs: Breakdown of costs associated with each phase or deliverable of
the project.
 Payment Terms: Schedule for payments based on milestones or specific dates.

10
7. Roles and Responsibilities
 Project Manager: Oversees the project, ensuring it stays on track with scope,
budget, and timeline.
 Developers: Responsible for the coding of the website.
 Designers: Handle the visual elements of the website.
 Quality Assurance: Ensure the site works as expected and is bug-free.
 Marketing Team: Plan and execute marketing strategies.

8. Assumptions and Constraints

 Assumptions: Conditions expected to be in place (e.g., availability of all
necessary APIs).
 Constraints: Limitations or restrictions (e.g., budget constraints, technological
limitations).

9. Risks and Mitigation

 Identify Risks: List potential risks to the project (e.g., timeline delays, budget
overruns).
 Mitigation Strategies: Approaches to minimize or manage these risks.

10. Approval
 Sign-off: Names and signatures of key stakeholders approving the project scope.

By carefully defining the scope, features, and expectations of the eCommerce

website project, you can ensure a more streamlined and efficient project flow,
helping to avoid common pitfalls such as scope creep or budget overruns.

1.3 MODULES:
The entire project mainly consists of 1 modules, which are

 Admin module

1.3.1 Admin module:

User Authentication and Account Management:

User registration

User login/logout

Forgot password/reset password functionality

11
User profile management

Product Management:
Product catalog management
Product categories and subcategories
Product attributes and variations (e.g., size, color)
Product search and filtering
Shopping Cart and Checkout:
Adding/removing items to/from cart
Viewing/editing cart contents
Proceeding to checkout
Multiple payment options (credit/debit card, PayPal, etc.)
Order summary and confirmation
Order Management:
Order processing
Generating invoices
Order tracking and status updates
Managing returns and refunds
Search and Navigation:
Advanced search functionality (keyword, category, filters)
Autocomplete suggestions
Faceted search (filtering by attributes)
Sorting options (price, popularity, etc.)
User Reviews and Ratings:
Allowing users to leave reviews and ratings for products
Displaying average ratings and reviews on product pages
Moderation tools for managing reviews (approve, delete, flag)
Product Recommendations:
Personalized product recommendations based on user behavior and preferences
Related products/up-sells/cross-sells on product pages and checkout
Security and Compliance:
Implementing security measures (SSL encryption, firewall, secure authentication)
Compliance with data protection regulations (GDPR, CCPA)
Regular security audits and vulnerability assessments
Customer Support:
Live chat support
Help desk/ticketing system
12
Knowledge base/FAQs
Marketing and Promotions:
Discount codes/coupons
Newsletter subscriptions
Promotional banners and pop-ups
CHAPTER 2
REQUIREMENT SPECIFICATION
2.1 INTRODUCTION:
Requirement Specification document for an eCommerce website involves summarizing
key information that gives readers (typically project stakeholders and the development
team) a clear overview of the project's goals, scope, and relevance. This section sets the
stage for more detailed descriptions in the subsequent parts of the document.

2.2 HARDWARE REQUIREMENTS:

Hardware requirements for an eCommerce website can vary significantly depending on
the scale of the operation, expected traffic, and the complexity of the site’s
functionalities. Below are general guidelines covering the hardware needed for small,
medium, and large-scale eCommerce setups. These requirements aim to ensure that the
website operates efficiently and can handle expected user traffic and data processing
needs.

HARDWARE REQUIREMENTS FOR PRESENT PROJECT:

PROCESSOR : Intel dual Core ,i5

RAM : 8 GB

HARD DISK : 1 TB

2.3 SOFTWARE REQUIRENTS:

For an eCommerce website to function effectively and meet the expectations of its users,
it must be built on a solid foundation of software requirements. These requirements
encompass not just the specific applications and tools needed but also cover architectural,
performance, and security considerations.

SOFTWARE REQUIREMENTS FOR PRESENT PROJECT:

OPERATING SYSTEM : Windows 11/ XP/8
13
BACK END : Python

DATABASE : Django

CHAPTER 3
ANALYSIS
3.1 EXISTING SYSTEM:
The existing system in an e-commerce website comprises a comprehensive platform
designed to facilitate online retail operations and transactions between businesses and
consumers. At its core, the website features a user-friendly interface, offering intuitive
navigation and visually appealing layouts across various pages, including home, product
listings, and checkout. Users can create accounts, log in securely, and manage their
profiles, including personal information and order histories. The product catalog is
meticulously managed, allowing administrators to add, update, and categorize products
with detailed descriptions, images, and pricing. A robust shopping cart system enables
users to add items, review their selections, and proceed seamlessly through the checkout
process, which includes selecting shipping methods and completing secure transactions
through integrated payment gateways.

3.2 PROPOSED SYSTEM:

The proposed system for the e-commerce website aims to build upon the existing
foundation by introducing enhancements and new features to further streamline the
shopping experience for users and empower administrators. One key aspect of the
proposed system is the refinement of the user interface, focusing on improved aesthetics
and enhanced usability to make navigation more intuitive and engaging. Additionally, the
proposed system will prioritize mobile responsiveness, ensuring seamless access and
functionality across various devices. To enrich the product discovery process, advanced
search and filtering capabilities will be implemented, enabling users to easily find
relevant items based on their preferences and requirements. Personalization features, such
as tailored product recommendations and customized offers, will also be integrated to
enhance user engagement and satisfaction

3.3 FEASIBILITY STUDY

Conducting a feasibility study for an e-commerce website involves assessing various
factors to determine the viability and potential success of the project. One crucial aspect
14
of the feasibility study is market analysis, which involves evaluating the demand for the
products or services offered by the website within the target market. This includes
analyzing market trends, competition, and consumer preferences to identify opportunities
and potential challenges. Additionally, the study examines the technical feasibility of the
project, considering factors such as website development costs, infrastructure
requirements, and scalability. Assessing the financial feasibility involves estimating the
initial investment required to develop and launch the website, as well as projecting
revenue streams and profitability over time. Legal and regulatory considerations, such as
compliance with data protection laws and e-commerce regulations, are also evaluated to
ensure the website operates within legal boundaries.
3.3.1 Economic Feasibility
Economic feasibility in ecommerce is crucial for assessing the financial
viability of an online business venture. It involves evaluating the costs associated
with setting up and running the ecommerce platform against the potential
revenue and profitability.Startup costs, including website development, hosting,
and initial inventory procurement, need to be carefully considered. Operational
costs such as marketing, customer support, and technology infrastructure must
also be factored in. Additionally, logistics and shipping costs play a significant
role in determining the overall economic feasibility.

3.3.2 Technical Feasibility

Technical feasibility in ecommerce refers to the assessment of whether the
proposed ecommerce solution can be implemented using the available
technology and resources. It involves evaluating the technical requirements,
infrastructure, and capabilities needed to develop and maintain the ecommerce
platform. One of the key aspects of technical feasibility is the selection of the
right ecommerce platform and technology stack. The platform should be able to
support the desired features and functionalities of the ecommerce website, such
as product catalog management, shopping cart, payment gateway integration,
and order management.

3.4 SOFTWARE SPECIFICATION

HTML:
HTML or Hypertext Markup Language is the standard markup language used to
create web pages.
HTML is written in the form of HTML elements consisting of tags enclosed in angle
brackets (like <html>). HTML tags most commonly come in pairs like <h1> and </h1>,
although some tags represent empty elements and so are unpaired, for example <img>.
The first tag in a pair is the start tag, and the second tag is the end tag (they are also

15
called opening tags and closing tags). Though not always necessary, it is best practice to
append a slash to tags which are not paired with a closing tag.
The purpose of a web browser is to read HTML documents and compose them into
visible or audible web pages. The browser does not display the HTML tags, but uses the
tags to interpret the content of the page. HTML describes the structure of a website
semantically along with cues for presentation, making it a markup language rather than
a programming language.
HTML elements form the building blocks of all websites. HTML allows images and
objects to be embedded and can be used to create interactive forms. It provides a means
to create structured documents by denoting structural semantics for text such as headings,
paragraphs, lists, links, quotes and other items. It can embed scripts written in languages
such as JavaScript which affect the behavior of HTML web pages.

CASCADING STYLE SHEETS (CSS):

It is a style sheet language used for describing the look and formatting of a document
written in a markup language. While most often used to style web
pages and interfaces written in HTML and XHTML, the language can be applied to any
kind of XML document, including plain XML, SVG and XUL. CSS is a cornerstone
specification of the web and almost all web pages use CSS style sheets to describe their
presentation.
CSS is designed primarily to enable the separation of document content from document
presentation, including elements such as the layout, colors, and fonts.[1] This separation
can improve content accessibility, provide more flexibility and control in the
specification of presentation characteristics, enable multiple pages to share formatting,
and reduce complexity and repetition in the structural content .
CSS can also allow the same markup page to be presented in different styles for different
rendering methods, such as on-screen, in print, by voice (when read out by a speech-
based browser or screen reader) and on Braille-based, tactile devices. It can also be used
to allow the web page to display differently depending on the screen size or device on
which it is being viewed. While the author of a document typically links that document to
a CSS file, readers can use a different style sheet, perhaps one on their own computer, to
override the one the author has specified. However if the author or the reader did not link
the document to a specific style sheet the default style of the browser will be applied.

MySQL:

16
 MySQL is developed, distributed, and supported by Oracle Corporation. MySQL is a
database system used on the web it runs on a server. MySQL is ideal for both small and
large applications. It is very fast, reliable, and easy to use. It supports standard SQL.
MySQL can be compiled on a number of platforms.

The data in MySQL is stored in tables. A table is a collection of related

data, and it consists of columns and rows. Databases are useful when storing information
categorically.

FEATURES OF MySQL:

Internals and portability:

 Written in C and C++.

 Tested with a broad range of different compilers.

 Works on many different platforms.

 Tested with Purify (a commercial memory leakage detector) as well as with Val grind,
a GPL tool.
 Uses multi-layered server design with independent modules.

Security:
 A privilege and password system that is very flexible and secure, and that enables
host-based verification.

 Password security by encryption of all password traffic when you connect to a server.

Scalability and Limits:

 Support for large databases. We use MySQL Server with databases that contain 50
million records. We also know of users who use MySQL Server with 200,000 tables
and about 5,000,000,000 rows.

 Support for up to 64 indexes per table (32 before MySQL 4.1.2). Each index may
consist of 1 to 16 columns or parts of columns. The maximum index width is 767
bytes for InnoDB tables, or 1000 for MyISAM; before MySQL 4.1.2, the limit is 500
bytes. An index may use a prefix of a column for CHAR, VARCHAR, BLOB,
or TEXT column types.

CONNECTIVITY:
Clients can connect to MySQL Server using several protocols:

17
  Clients can connect using TCP/IP sockets on any platform.

 On Windows systems in the NT family (NT, 2000, XP, 2003, or Vista), clients
can connect using named pipes if the server is started with the --enable-named-
pipe option. In MySQL 4.1 and higher, Windows servers also support shared-
memory connections if started with the --shared-memory option. Clients can
connect through shared memory by using the --protocol=memory option.

 On UNIX systems, clients can connect using Unix domain socket files.

LOCALIZATION:
 The server can provide error messages to clients in many languages.
 All data is saved in the chosen character set.
CLIENTS AND TOOLS:

 MySQL includes several client and utility programs. These include both
command-line programs such as mysqldump and mysqladmin, and
graphical programs such as MySQL Workbench.
 MySQL Server has built-in support for SQL statements to check, optimize,
and repair tables. These statements are available from the command line
through the mysqlcheck client. MySQL also includes myisamchk, a very
fast command-line utility for performing these operations
on MyISAM tables.
 MySQL programs can be invoked with the --help or -? option to obtain
online assistance.

WHY TO USE MySQL:

• Leading open source RDBMS

• Ease of use – No frills
• Fast
• Robust
• Security
• Multiple OS support
• Free
• Technical support
• Support large database– up to 50 million rows, file size limit up to 8 Million TB

PYTHON:
18
Python is a versatile programming language that can be incredibly useful in the
context of ecommerce. With its simplicity and readability, Python allows
developers to quickly build and deploy ecommerce solutions, making it an ideal
choice for businesses looking to create efficient and scalable online stores..

WHY TO USE PYTHON:

1. Ease of Learning and Use

2. Rich Ecosystem of Libraries and Frameworks
3. Scalability
4. Integration Capabilities
5. Security

PYHON PROPERTIES:

1. Thread Priority: In multithreading, you can set the priority of a

thread to determine its importance relative to other threads. However,
Python's standard library does not directly support setting thread
priorities, as the underlying operating system's scheduler typically
determines thread priorities.
2. Queue Priority: Python's queue module includes PriorityQueue,
which allows you to enqueue items with an associated priority. Items
are dequeued based on their priority, with lower values indicating
higher priority.
3. Task Priority: When managing tasks in a scheduler or event loop,
you might assign priorities to tasks to control their execution order.
Libraries like asyncio provide ways to handle task priorities.
4. Operator Priority: In Python, operator precedence determines the
order in which operations are evaluated in expressions. Understanding
operator precedence is important for writing correct and efficient
code.

19
 CHAPTER 4
DESIGN
4.1 SYSTEM DESIGN:

4.1.1INTRODUCTION TO UML:

UML Design
A UML design for a Library Management System includes a class diagram with
classes such as Book, Member, and Library, illustrating their relationships and attributes.
Associations depict how Members borrow Books, and aggregations show how Books are
part of the Library. Use case diagrams outline interactions, covering scenarios like
borrowing and returning books. A sequence diagram showcases the flow of actions
during a book checkout. Additionally, state diagrams model the lifecycle of a Book or
Member, transitioning between states like available, borrowed, or suspended. The design
ensures a comprehensive representation of the system's structure, behavior, and user
interactions
A UML
such asathe
borrowing
during
Member,
ensures Book,
Associations
part of book
interactions in
adesign
and aareturning
Library.concise
Member,
for
indepict aUse
how
checkout.
transitioning
comprehensive
concise manner.
Library
and
case Library,
Management
Members
diagrams
Additionally,
books.
between
manner. illustrating
borrow
A sequence
representation
states state
like System
outline
Books, their
diagrams
diagram
ofavailable,
the includes
system's relationships
interactions,
and athe
showcases
model
borrowed, class
aggregations
covering
structure,
or diagram
and
showattributes.
with
scenarios
lifecycle
the flow
behavior, how
of
suspended. classes
like
Books
actions
a Book
and
Theuseror are
design
The UML is a language for:
 Visualizing
 Navigation
 Presentation
 Responsive
Visualizing

20
 Through UML we see or visualize an existing system and ultimately we visualize
how the system is going to be after implementation. Unless we think, we cannot implement.
UML helps to visualize, how the components of the system communicate and interact with
each other.
Navigation
The Library Management System's UML design includes key navigation
components. The system comprises classes like Book, Member, and Transaction,
interconnected through associations. Navigation involves creating instances, such as
adding a Book to the catalog or registering a Member. The system allows searching for
books and checking availability, with associations enabling transactions like borrowing
and returning. Utilizing use case diagrams, it illustrates interactions between actors (e.g.,
Librarian, Member). Class diagrams showcase relationships, and sequence diagrams
depict the flow during operations like book checkout. Overall, the UML design ensures
efficient navigation and interaction within the Library Management System, enhancing
functionality and user experience.

Presentation
The Library Management System is a comprehensive software solution designed
to streamline library operations. It facilitates efficient cataloging, tracking, and retrieval
of books, ensuring seamless resource management. Users can easily search for and
borrow books, while administrators manage inventory, memberships, and overdue fines
effortlessly. The system's user-friendly interface enhances accessibility, promoting a
smooth library experience for both staff and patrons. Additionally, it incorporates
features like real-time data updates, automated notifications, and analytics tools to
optimize library performance. Overall, the Library Management System modernizes
library administration, promoting organizational efficiency and an enhanced user
experience.

Responsive
A responsive library management system adapts seamlessly to various devices and
screen sizes, ensuring an optimal user experience. Whether accessed on desktops, tablets,
or smartphones, the system's interface dynamically adjusts, maintaining functionality and
readability. This responsiveness enhances accessibility and usability, allowing librarians
and patrons to efficiently manage and access library resources from any device. This
adaptability not only improves user satisfaction but also promotes effective information
retrieval and management, contributing to the overall efficiency and effectiveness of the
library's operations.

4.2 UML Approach

UML Diagram

A diagram is the graphical presentation of a set of elements, most often

21
 rendered as a connected graph of vertices and arcs . you draw diagram to
visualize a system from different perspective, so a diagram is a projection into
a system. For all but most trivial systems, a diagram represents an elided view
of the elements that make up a system. The same element may appear in all
diagrams, only a few diagrams , or in no diagrams at all. In theory, a diagram
may contain any combination of things and relationships. In practice, however,
a small number of common combinations arise, which are consistent with the
five most useful views that comprise the architecture of a software-intensive
system. For this reason, the UML includes nine such diagrams:
1. Class diagram
2. Object diagram
3. Use case diagram
4. Sequence diagram
5. Collaboration diagram
6. State chart diagram
7. Activity diagram
8. Component diagram
9. Deployment diagram

USE CASE DIAGRAM:

A usecase diagram in the Unified Modeling Language(UML) is atype of behavioral
diagram defined by and created from a use-case analysis.its purpose is to present a
graphical overview of the functionality provided by a system in terms of actors, their
goals(represented as use cases),and any dependencies between those use cases.

Use case diagrams are formally included in two modeling languages defined by
the OMG:theunfied modeling language(UML) and the systems modeling
language(sysML)

22
SYSTEM DESIGN AND SPECIFICATIONS
The system design and specifications for this project outline the
architecture, components, and functionality of the collaborative music
playback system. Here's an overview:

Architecture:

The system follows a client-server architecture, where the server hosts the
backend logic and data storage, while the client interacts with the user through
a web-based interface.

Backend components include Django framework for server-side logic, Spotify API
integration for music playback functionality, and a PostgreSQL database for
storing user data and room information.

Frontend components utilize React.js for building interactive user interfaces and
managing state.
23
Components:

Backend Components:

Django REST framework for building RESTful APIs to

handle user authentication, room management, music playback
control, and voting.

Spotify API integration for authenticating users, accessing music

catalogs, controlling playback, and retrieving song information.

PostgreSQL database for storing user profiles, room details, playback history,
and voting data.

Frontend Components:

React.js for building modular UI components, managing state, and handling

user interactions.

Material-UI library for designing responsive and visually appealing user interfaces.

React Router for client-side routing to navigate between different views within
the application.

Functionality:

User Authentication: Users can log in to the system using their Spotify accounts
to access the collaborative music playback features.

Room Management: Hosts can create a room and generate a unique code that
other users can use to join the room. Hosts can also set room preferences such
as playback control permissions and voting requirements.

Music Playback: Users can play, pause, skip tracks, and adjust playback volume
24
within the room. Playback control permissions are determined by the host's
settings.

Synchronization: Playback is synchronized across all connected users in the same

room to ensure a consistent listening experience.

Voting System: Users can vote to skip tracks, and tracks are skipped when
the required number of votes is reached.

Real-time Updates: Hosts can update playback control settings and voting
requirements in real-time, reflecting changes immediately for all users in the
room.

Specifications:

System supports concurrent user sessions with efficient handling of

authentication and session management.

Integration with Spotify API ensures seamless access to music catalogs,

playback control, and user authentication.

Web-based interface is responsive, user-friendly, and accessible across

different devices and screen sizes.

Backend APIs follow RESTful principles, with clear endpoints,

request/response formats, and error handling mechanisms.
Data storage and retrieval operations are optimized for performance and
scalability, ensuring smooth operation even under high user loads.

SOFTWARE DESIGN

In designing the software following principles are followed:

Modularity and partitioning: Software is designed such that, each system

should consists of hierarchy of modules and serve to into separate function.
25
Coupling: Modules should have little dependence on other modules of asystem.
Cohesion: Modules should carry out in a single processing function.

Shared use: Avoid duplication by allowing a single module bcalled by other

that need the function it provides.

MODULE DESIGN
The major modules of the project are:

Home Module

Spotify Login Module

Create Room Module

Join Room Module

Update Room Module

Music Player Module

Home Module:

Displays the home page of the application.

26
Provides options for users to create or join rooms..

Includes features for browsing and searching for existing rooms.

Spotify Login Module:

Integrates Spotify authentication for user login.

Handles the OAuth flow for obtaining user authorization.

Retrieves user profile information and access tokens for Spotify API interaction.

Create Room Module:

Allows authenticated users to create new rooms.

Generates a unique room code for each created room.

Sets room preferences such as playback control and voting options.

Join Room Module:

Enables users to join existing rooms using room codes.

Validates room codes and grants access to authorized users.

Provides feedback on successful or failed room joining attempts.

Update Room Module:

Facilitates room settings updates by the host.

27
Allows hosts to modify playback control permissions, voting rules, etc.

Ensures that only authorized hosts can update room settings.

Music Player Module:

Displays information about the currently playing song, including the title,
artist, album cover, playback progress, and voting details.

Users can interact with the music player through buttons such as play,
pause, and skip. These buttons trigger actions to control the playback
accordingly.

It also displays the number of votes each song has received for skipping

Allows users to vote on whether to skip the current track.

DATABASE DESIGN
MODEL NAME: Room
Field name Data Type

code CharField

host CharField

guest_can_pause BooleanField

votes_to_skip IntegerField

created_at DateTimeField

current_song CharField

MODEL NAME: SpotifyToken

Field name Data Type

28
 user CharField

created_at DateTimeField

refresh_token CharField

access_token CharField

expires_in DateTimeField

token_type CharField

MODEL NAME: Vote

Field name Data Type

user CharField

created_at DateTimeField

song_id CharField

room CharField

INPUT/OUTPUT DESIGN
Input Design
The input design for the collaborative music playback system involves
defining how users interact with the application to input commands,
preferences, and data. Here's an overview of the input design:

User Interface (UI):

The UI includes various input elements such as text fields, buttons, dropdowns,
and sliders.

Users interact with these elements to perform actions like logging in, creating
rooms, joining rooms, controlling playback, and voting on tracks.

29
Authentication Inputs:

Input fields for users to enter their login credentials (username/email and
password) during the authentication process.

OAuth login buttons to initiate authentication with third-party services like

Spotify.

Room Creation Inputs:

Text fields for specifying room preferences such as roomname, playback

control permissions, and voting rules.

Buttons to confirm room creation and submit the preferences.

Room Joining Inputs:

Text field for entering the room code when joining an existing room.

Button to submit the room code and join the room.

Room Update Inputs:

Input fields or dropdowns to adjust room settings such as playback control

permissions, voting thresholds, and other configurations.

 Buttons to apply the changes and update the room settings.

Playback Control Inputs:

Playback control buttons for playing, pausing, skipping tracks, adjusting volume,
and seeking within tracks.

Slider or input field for controlling volume level.

30
Voting Inputs:

Voting buttons or checkboxes displayed during track playback to allow users to

vote on track skipping.

Feedback messages indicating the status of the vote .

Output Design
❖ The output design of the project involves presenting information and
feedback to users based on their interactions with the system. Here's an
overview of the output design elements in our collaborative music playback
system:
User Interface: The system provides a user-friendly interface using React and
Material-UI components. It includes screens for different functionalities like
home, room creation, room joining, music playback, and settings.

Room Information: Upon joining a room or creating a new one, users see
relevant information such as the room code, current song details, playback
controls, and voting status.

Music Playback: The output design includes a music player interface with
controls for play, pause, and skip. It also displays the current song's title, artist,
album cover, playback progress, and voting details.

Real-time Updates: Users receive real-time updates on song changes,

playback status, and voting results. This ensures that everyone in the room
stays synchronized with the latest information.

31
DATA MODEL(LIKE DFD)

A Data Flow Diagram (DFD) is a traditional visual representation of the

information flows within a system. A neat and clear DFD can depict the right
amount of the system requirement graphically. It can be manual, automated,
or a combination of both.

It shows how data enters and leaves the system, what changes the
information, and where data is stored.

The objective of a DFD is to show the scope and boundaries of a system as

a whole. It may be used as a communication tool between a system analyst
and any person who plays a part in the order that acts as a starting point for
redesigning a system. The DFD is also called as a data flow graph or bubble
chart.

Data Flow Diagrams are of two types:

1) Physical Data Flow Diagrams: These are implementation-

dependent i.e., they show the actual devices, departments,

people, etc., involved in the system.
2) Logical Data Flow Diagrams: These diagrams describe the

system independently of how it is actually implemented, they

show what takes places, rather than how an activity is
accomplished.
Standard Symbol of DFD

➢ Data Flow: Data move in a specific direction from an origin to

destination. The data flow is a “packet” of data.
32
 ➢ Process: People, procedures or devices that produce
data. The physical component is not identified.

➢ Source or Destination of Data: External sources or destinations

of data, which may be people or organizations or other entities.

➢ Data Source: Here a process references the data in the system.

LEVEL 0 DFD
This is the highest-level DFD, which provides an overview of the entire
system. It shows the major processes, data flows, and data stores in the
system, without providing any details about the internal workings of these
processes.

33
 It is also known as a context diagram. It’s designed to be an abstraction
view, showing the system as a single process with its relationship to
external entities. It represents the entire system as a single bubble with
input and output data indicated by incoming/outgoing arrows.

Level 1 DFD
This level provides a more detailed view of the system by breaking down
the major processes identified in the level 0 DFD into sub-processes. Each
sub-process is depicted as a separate process on the level 1 DFD. The data
flows and data stores associated with each sub-process are also shown.

In 1-level DFD, the context diagram is decomposed into multiple

bubbles/processes. In this level, we highlight the main functions of the
system and breakdown the high-level process of 0-level DFD into
subprocesses.

34
ENTITY RELATIONSHIP MODEL
ER model stands for an Entity-Relationship model. It is a high-level data
model. This model is used to define the data elements and relationship for a
specified system.

It develops a conceptual design for the database. It also develops a very

simple and easy to design view of data.

In ER modeling, the database structure is portrayed as a diagram called an

entity-relationship diagram.
35
5.1 USE CASE DIAGRAM
A Use Case Diagram is a type of Unified Modeling Language (UML) diagram that
represents the interaction between actors (users or external systems) and a
system under consideration to accomplish specific goals. It provides a high-
level view of the system’s functionality by illustrating the various ways users can
interact with it.

36
37
 5.1 CLASS DIAGRAM
Class diagrams are a type of UML (Unified Modeling Language) diagram used in
software engineering to visually represent the structure and relationships of
classes within a system

i.e. used to construct and visualize object-oriented systems.

Class diagrams provide a high-level overview of a system’s design, helping
to communicate and document the structure of the software. They are a
fundamental tool in object-oriented design and play a crucial role in
the software development lifecycle.

CHAPTER 5
SYSTEM IMPLEMENTATION

5. IMPLEMENTATION:

5.1 Inroduction:
Implementation is the stage of the project when the theoretical design is turned out into
a working system. Thus it can be considered to be the most critical stage in achieving a
successful new system and in giving the user, confidence that the new system will work
and be effective.

38
 The implementation stage involves careful planning, investigation of the existing system
and it’s constraints on implementation, designing of methods to achieve changeover and
evaluation of changeover methods.

5.2 Sample Code:

6. {% load static %}
7. <!DOCTYPE html>
8. <html lang="en">
9. <head>
10. <meta charset="utf-8" />
11. <meta content="width=device-width, initial-scale=1.0" name="viewport" />
12.
13. <title>{% block title %} {% endblock title %}</title>
14. <meta content="" name="description" />
15. <meta content="" name="keywords" />
16.
17. <link
18.
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,60
0,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,4
00,400i,500,500i,600,600i,700,700i"
19. rel="stylesheet"
20. />
21.
22. <link
23. href="{% static '/assets/vendor/bootstrap/css/bootstrap.min.css' %}"
24. rel="stylesheet"
25. />
26. <link
27. href="{% static '/assets/vendor/bootstrap-icons/bootstrap-icons.css' %}"
28. rel="stylesheet"

39
29. />
30.
31. <link
32. href="{% static '/assets/vendor/glightbox/css/glightbox.min.css' %}"
33. rel="stylesheet"
34. />
35. <link
36. href="{% static '/assets/vendor/remixicon/remixicon.css' %}"
37. rel="stylesheet"
38. />
39. <link
40. href="{% static '/assets/vendor/swiper/swiper-bundle.min.css' %}"
41. rel="stylesheet"
42. />
43.
44. <link href="{% static '/assets/css/style.css' %}" rel="stylesheet" />
45. <link
46.
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
47. rel="stylesheet"
48. />
49. <link
50. rel="stylesheet"
51. href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.5.2/css/all.min.css"
52. integrity="sha512-
SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX
3pBnMFcV7oQPJkl9QevSCWr3W6A=="
53. crossorigin="anonymous"
54. referrerpolicy="no-referrer"
55. />
56. </head>
40
57.
58. <body>
59. <!-- ======= Header ======= -->
60. <header id="header" class="fixed-top">
61. <div class="container d-flex align-items-center justify-content-between">
62. <a href="/" class="logo"
63. ><img
64. src="{% static '/assets/img/logo.png'%}"
65. alt="error"
66. class="img-fluid"
67. style="max-width: 300px; height: 300px"
68. /></a>
69.
70. <nav id="navbar" class="navbar">
71. <ul>
72. <li><a class="nav-link scrollto" href="/">Home</a></li>
73. <li><a class="nav-link scrollto" href="/about">About</a></li>
74. <li><a class="nav-link scrollto" href="/checkout/">Checkout</a></li>
75. <li>
76. <a class="nav-link scrollto" href="/profile"
77. >My Profile <i class="fa-regular fa-user"></i
78. ></a>
79. </li>
80. <button
81. type="button"
82. class="nav-link scrollto bg-danger p-3 m-2 text-white"
83. id="popcart"
84. data-container="body"
85. data-toggle="popover"
86. data-placement="bottom"
87. data-html="true"
88. >
41
89. <i class="fa-solid fa-cart-shopping"></i> Cart(<span id="cart"
90. >0</span
91. >)
92. </button>
93.
94. {% if request.user.is_authenticated %}
95. <li>
96. <a class="nav-link scrollto" href="/auth/logout/"
97. >Log Out <i class="fa-solid fa-right-from-bracket"></i
98. ></a>
99. </li>
100. {% else %}
101. <li class="dropdown">
102. <a href="#"
103. ><span>Sign In <i class="fa-solid fa-user"></i></span>
104. <i class="bi bi-chevron-down"></i
105. ></a>
106. <ul>
107. <li>
108. <a href="/auth/signup/"
109. >Sign Up <i class="fa-solid fa-user"></i
110. ></a>
111. </li>
112. <li>
113. <a href="/auth/login/"
114. >Log In <i class="fa-solid fa-user"></i
115. ></a>
116. </li>
117. </ul>
118. </li>
119. {% endif %}
120. <li>
42
121. <a class="nav-link scrollto p-2 m-2" href="/contact"
122. >Contact<i class="fa-solid fa-address-card"></i
123. ></a>
124. </li>
125. </ul>
126. <i class="bi bi-list mobile-nav-toggle"></i>
127. </nav>
128. </div>
129. </header>
130. <!-- End Header -->
131.
132. <!-- ======= Hero Section ======= -->
133. <section id="hero">
134. <div class="hero-container">
135. {% block content %} {% endblock content %}
136. </div>
137. </section>
138. <!-- End Hero -->
139.
140. <main id="main">{% block body %} {% endblock body %}</main>
141.
142. <!-- ======= Footer ======-->
143. <footer id="footer">
144. <div class="footer-top">
145. <div class="container">
146. <div class="row">
147. <div class="col-lg-3 col-md-6 footer-contact">
148. <h3>Shopify</h3>
149. <p>
150. Rajnagar College Street <br />
151. Kendrapara,Odisha<br />

43
152. India,754225 <br /><br />
153. <strong>Phone:</strong> 8459624632<br />
154. <strong>Email:</strong> [email protected]<br />
155. </p>
156. </div>
157.
158. <div class="col-lg-2 col-md-6 footer-links">
159. <h4>Useful Links</h4>
160. <ul>
161. <li>
162. <i class="bx bx-chevron-right"></i> <a href="/">Home</a>
163. </li>
164. <li>
165. <i class="bx bx-chevron-right"></i>
166. <a href="/about">About us</a>
167. </li>
168. <li>
169. <i class="bx bx-chevron-right"></i>
170. <a href="/service">Services</a>
171. </li>
172. <li>
173. <i class="bx bx-chevron-right"></i>
174. <a href="#">Terms of service</a>
175. </li>
176. <li>
177. <i class="bx bx-chevron-right"></i>
178. <a href="#">Privacy policy</a>
179. </li>
180. </ul>
181. </div>
182.
183. <div class="col-lg-3 col-md-6 footer-links">
44
184. <h4>Our Services</h4>
185. <ul>
186. <li>
187. <i class="bx bx-chevron-right"></i> <a href="#">Web Design</a>
188. </li>
189. <li>
190. <i class="bx bx-chevron-right"></i>
191. <a href="#">Web Development</a>
192. </li>
193. <li>
194. <i class="bx bx-chevron-right"></i>
195. <a href="#">Product Management</a>
196. </li>
197. <li>
198. <i class="bx bx-chevron-right"></i> <a href="#">Marketing</a>
199. </li>
200. <li>
201. <i class="bx bx-chevron-right"></i>
202. <a href="#">Graphic Design</a>
203. </li>
204. </ul>
205. </div>
206.
207. <div class="col-lg-4 col-md-6 footer-newsletter">
208. <h4>Join with us</h4>
209. <p>Together, we can make the world a better place.</p>
210. <form action="" method="post">
211. <input type="email" name="email" /><input
212. type="submit"
213. value="Subscribe"
214. />
215. </form>
45
216. </div>
217. </div>
218. </div>
219. </div>
220.
221. <div class="container d-md-flex py-4">
222. <div class="me-md-auto text-center text-md-start">
223. <div class="copyright">
224. &copy; Copyright <strong><span>Shopify</span></strong
225. >. All Rights Reserved
226. </div>
227. <div class="credits">
228. Designed by <a href="https://bootstrapmade.com/">BBB Group</a>
229. </div>
230. </div>
231. <div class="social-links text-center text-md-right pt-3 pt-md-0">
232. <a href="#" class="twitter"><i class="bi bi-telegram"></i></a>
233. <a href="#" class="facebook"><i class="bi bi-meta"></i></a>
234. <a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
235. <a href="#" class="google-plus"><i class="bi bi-skype"></i></a>
236. <a href="#" class="linkedin"><i class="bi bi-linkedin"></i></a>
237. </div>
238. </div>
239. </footer>
240. <a
241. href="#"
242. class="back-to-top d-flex align-items-center justify-content-center"
243. ><i class="bi bi-arrow-up-short"></i
244. ></a>
245.
246. <!-- JS Files -->

46
247. <script src="{% static '/assets/vendor/bootstrap/js/bootstrap.bundle.min.js '
%}"></script>
248. <script src="{% static '/assets/vendor/glightbox/js/glightbox.min.js'
%}"></script>
249. <script src="{% static '/assets/vendor/isotope-layout/isotope.pkgd.min.js '
%}"></script>
250. <script src="{% static '/assets/vendor/swiper/swiper-bundle.min.js '
%}"></script>
251. <script src="{% static '/assets/vendor/php-email-form/validate.js '
%}"></script>
252.
253. <!-- JS File -->
254. <script src="{% static '/assets/js/main.js' %}"></script>
255. </body>
256. </html>

257. {% extends "base.html" %} {% block title %} Home {% endblock title %}

258. {% block body %}
259. {% load static %}
260. <section id="portfolio" class="portfolio">
261. <div class="container">
262. {% for message in messages %}
263.
264. <div
265. class="alert alert-{{message.tags}} alert-dismissible fade show"
266. role="alert"
267. >
268. <strong>{{message}}</strong>
269. <button
270. type="button"
271. class="btn-close"
272. data-bs-dismiss="alert"

47
273. aria-label="Close"
274. ></button>
275. </div>
276. {% endfor %}
277.
278. <div class="section-title">
279. <h2>WELCOME TO SHOP</h2>
280. <h3>Check our <span>Products</span></h3>
281. </div>
282.
283. {% for product,range,nSlides in allProduct %} {% comment %} filter out the
284. category {% endcomment %}
285. <h3 class="my-3 text-center text-success bg-light">
286. {{product.0.category}}
287. </h3>
288. <div class="container">
289. <div class="row">
290. {% for i in product %}
291.
292. <div class="col-md-3 mt-3">
293. <img
294. src="/media/{{i.image}}"
295. class="card-img-top"
296. alt="..."
297. height="200px"
298. width="150px"
299. />
300. <div class="card-body">
301. <h5 class="card-title" id="namepr{{i.id}}">
302. {{i.product_name|slice:"0:10"}} ...
303. </h5>
304. <p class="card-text">{{i.desc|slice:"0:20"}} ...</p>
48
305. <h6 class="card-title">
306. Price:<span id="pricepr{{i.id}}">{{i.price}}</span>
307. </h6>
308. <span id="divpr{{i.id}}" class="divpr">
309. <button id="pr{{i.id}}" class="btn btn-danger cart btn-sm mt-0">
310. AddToCart<i class="fa-solid fa-cart-shopping"></i>
311. </button>
312. </span>
313.
314. <a href="/media/{{i.image}}"
315. ><button id="test" class="btn btn-dark btn-sm cart">
316. <i class="fa-solid fa-eye"></i>
317. </button></a
318. >
319. </div>
320. </div>
321. {% endfor %}
322. </div>
323. </div>
324. {% endfor %}
325. </div>
326. </section>
327.
328. <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-
2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
329. <script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-
wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6Z
Oblgut" crossorigin="anonymous"></script>

49
330. <script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-
B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv
9k" crossorigin="anonymous"></script>
331.
332.
333. <script>
334.
335. if (localStorage.getItem('cart')==null){
336. var cart={}
337. }else{
338. cart=JSON.parse(localStorage.getItem("cart"))
339. updateCart(cart)
340. }
341.
342. {% comment %} button.cart is a function {% endcomment %}
343.
344.
345. $('.divpr').on('click','button.cart',function(){
346. var idstr=this.id.toString();
347. console.log(idstr);
348.
349.
350. if(cart[idstr]!=undefined){
351. qty=cart[idstr][0]+1;
352.
353. }else{
354. qty=1;
355. {% comment %} name+ pr{{1}} ==namepr{{1}} {%
endcomment %}
356. name=document.getElementById('name'+idstr).innerHTML;
50
357. price=document.getElementById('price'+idstr).innerHTML;
358. cart[idstr]=[qty,name,price];
359. console.log(cart)
360. }
361. updateCart(cart);
362. localStorage.setItem('cart', JSON.stringify(cart));
363. document.getElementById('cart').innerHTML = Object.keys(cart).length;
364. console.log( Object.keys(cart).length)
365. document.getElementById("popcart").click();
366. })
367.
368.
369.
370. $('#popcart').popover();
371. updatePopover(cart);
372. function updatePopover(cart) {
373.
374.
375. console.log('we are inside update popover');
376.
377. var popStr = "";
378. var popStr = popStr + "<h5> cart for your items in my shopping cart </h5>
<div class='mx-2 my-2'>";
379. var i = 1;
380. for (var item in cart) {
381. popStr = popStr + "<b>" + i + "</b>. ";
382. popStr = popStr + document.getElementById('name' +
item).innerHTML.slice(0, 19) + "..." + "<b>" +cart[item][0] + "</b>"+ "Qty" +
'<br>';
383. i = i + 1;
384. }
385.
51
386. popStr = popStr + "</div> <a href='/checkout/'><button class='btn btn-
success' id='clearCart'>Checkout</button></a> <button class='btn btn-dark'
onclick='clearCart()' id='clearCart'>ClearCart</button>"
387. document.getElementById('popcart').setAttribute('data-content', popStr);
388. $('#popcart').popover('show');
389. document.getElementById("popcart").click();
390. }
391.
392. function clearCart() {
393. cart = JSON.parse(localStorage.getItem('cart'));
394. for (var item in cart) {
395. document.getElementById('div' + item).innerHTML = '<button id="' +
item + '" class="btn btn-danger cart">AddtoCart <i class="fa-solid fa-cart-
shopping"></i> <i class="fa-solid fa-cart-shopping"></i></button>'
396. }
397. localStorage.clear();
398. cart = {};
399. updateCart(cart);
400.
401. let clear= document.getElementById("popcart").click();
402. document.getElementById("popcart").click();
403.
404. }
405.
406. function updateCart(cart) {
407. var sum = 0;
408. for (var item in cart) {
409. sum = sum + cart[item][0];
410. document.getElementById('div' + item).innerHTML = "<button
id='minus" + item + "'class='btn btn-success minus'>-</button> <span id='val" +
item + "''>" + cart[item][0] + "</span> <button id='plus" + item + "' class='btn
btn-success plus'> + </button>";
52
411. }
412. localStorage.setItem('cart', JSON.stringify(cart));
413. document.getElementById('cart').innerHTML = sum;
414. console.log(cart);
415. updatePopover(cart);
416. document.getElementById("popcart").click();
417. }
418.
419. //if plus or minus button is clicked change the cart as well as the display value
420. $('.divpr').on("click", "button.minus", function() {
421.
422. a = this.id.slice(7, );
423. cart['pr' + a][0] = cart['pr' + a][0] - 1;
424. cart['pr' + a][0] = Math.max(0, cart['pr' + a][0]);
425. document.getElementById('valpr' + a).innerHTML = cart['pr' + a][0];
426. updateCart(cart);
427.
428.
429. })
430.
431.
432. $('.divpr').on("click", "button.plus", function() {
433.
434. a = this.id.slice(6, );
435. cart['pr' + a][0] = cart['pr' + a][0] + 1;
436. document.getElementById('valpr' + a).innerHTML = cart['pr' + a][0];
437. updateCart(cart);
438. })
439. </script>
440. {% endblock body %

53
Ecommereceapp.views:-

from email.message import EmailMessage

from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
import json
from math import ceil
from django.shortcuts import render, redirect, HttpResponse
from django.contrib import messages
from ecommerce import settings
from ecommerceapp import keys
from ecommerceapp.models import Contact, OrderUpdate, Orders, Payment, Product,
ReturnRequest
from PayTm import Checksum
import razorpay
from razorpay.errors import BadRequestError
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
import time
from django.template.loader import render_to_string
from django.utils.http import urlsafe_base64_decode, urlsafe_base64_encode
from ecommerceapp.utils import TokenGenerator, generate_token
from django.utils.encoding import force_bytes, force_str
from django.contrib.auth.models import User
from django.utils.http import urlsafe_base64_encode
from django.utils.encoding import force_bytes
from django.contrib.auth.tokens import default_token_generator as generate_token
from django.template.loader import render_to_string

# Create your views here.

54
MERCHANT_KEY = keys.MK

@csrf_exempt
def index(request):
allProduct = []
catprods = Product.objects.values('category', 'id')
cats = {item['category'] for item in catprods}

for cat in cats:

prod = Product.objects.filter(category=cat)

numprod = len(prod)

nslides = numprod//4 + ceil((numprod/4)-(numprod//4))

allProduct.append([prod, range(1, nslides), nslides])

params = {'allProduct': allProduct}

return render(request, 'index.html', params)

@csrf_exempt
def contact(request):
if request.method == 'POST':
name = request.POST['name']
email = request.POST['email']
desc = request.POST['desc']
number = request.POST['pnumber']
myquery = Contact(name=name, email=email,
desc=desc, phonenumber=number)
myquery.save()
55
 messages.info(request, "Message Sent Successfully")
return redirect('/contact')

return render(request, 'contact.html')

@csrf_exempt
def about(request):
print("hello")
return render(request, 'about.html')

@csrf_exempt
def checkout(request):
if not request.user.is_authenticated:
messages.warning(request, "Login & Try Again")
return redirect('/auth/login')

if request.method == "POST":
items_json = request.POST.get('itemsJson', '')
name = request.POST.get('name', '')
amount = int(request.POST.get('amt'))
email = request.POST.get('email', '')
address1 = request.POST.get('address1', '')
address2 = request.POST.get('address2', '')
city = request.POST.get('city', '')
state = request.POST.get('state', '')
zip_code = request.POST.get('zip_code', '')
phone = request.POST.get('phone', '')
Order = Orders(items_json=items_json, name=name, amount=amount, email=email,
address1=address1,

56
 address2=address2, city=city, state=state, zip_code=zip_code,
phone=phone)
Order.save()
value = Order.email

update = OrderUpdate(order_id=Order.order_id,
update_desc="the order has been placed", email=email)
update.save()
thank = True
return render(request, 'paytm.html', {'value': email, 'id': Order.order_id})

return render(request, 'checkout.html')

@csrf_exempt
def paym(request, data):

if request.method == 'POST':
value = request.POST.get('value')
amountpaid = request.POST.get('amountpaid')
print(amountpaid)
print(type(amountpaid))
if amountpaid == '0':
paymentstatus = "COD"
else:
paymentstatus = "PAID"
card_no = request.POST.get('card_number')
cvv_no = request.POST.get('cvv')
payment = Payment(email=value, amountpaid=amountpaid, oid=data,
paymentstatus=paymentstatus, card_no=card_no, cvv_no=cvv_no)
payment.save()
return render(request, "index.html")
57
 return render(request, 'paytm.html')

@csrf_exempt
def profile(request):
if not request.user.is_authenticated:
messages.warning(request, "Login & Try Again")
return redirect('/auth/login')

currentuser = request.user.username
items = Orders.objects.filter(email=currentuser)

if items.exists():
ll = set()
for i in items:
myid = i.order_id
ll.add(myid)

status = OrderUpdate.objects.filter(order_id__in=ll)
# for j in status:
# print(j.update_desc)

context = {"items": items, "status": status}

return render(request, "profile.html", context)

else:
return render(request, "index.html")

@csrf_exempt
def cancel(request, data):
print("cancel")
58
 items = Payment.objects.filter(oid=data)
for obj in items:
Orders.objects.filter(order_id=obj.oid).delete()
OrderUpdate.objects.filter(order_id=obj.oid).delete()
Payment.objects.filter(oid=obj.oid).delete()

return render(request, "cancel.html", {'value': 'Cancellation'})

@csrf_exempt
def returnPrd(request, data):
print("return")
print(type(data))
if request.method == "POST":

items = Payment.objects.filter(oid=data)
for i in items:
price = i.amountpaid

email = request.POST.get('email')
reason = request.POST.get('reason')
account = request.POST.get('account')
order = ReturnRequest(oid=data, email=email,
price=price, bankaccount=account, reason=reason)
order.save()
items = Payment.objects.filter(oid=data)
for obj in items:
Orders.objects.filter(order_id=obj.oid).delete()
OrderUpdate.objects.filter(order_id=obj.oid).delete()
Payment.objects.filter(oid=obj.oid).delete()

return render(request, "cancel.html", {'value': 'Return'})

59
 return render(request, 'Refund.html')

authentication.views:-

from django.shortcuts import render, redirect, HttpResponse

from django.contrib.auth.models import User
from django.views.generic import View
from django.contrib import messages
from django.template.loader import render_to_string
from django.utils.http import urlsafe_base64_decode, urlsafe_base64_encode
from .utils import TokenGenerator, generate_token
from django.utils.encoding import force_bytes, force_str, DjangoUnicodeDecodeError
from django.core.mail import EmailMessage
from django.conf import settings
from django.contrib.auth import authenticate, login, logout
from django.contrib.auth.tokens import PasswordResetTokenGenerator

def signup(request):

if request.method == 'POST':
email = request.POST['email']
password1 = request.POST['pass1']
password2 = request.POST['pass2']
if password1 != password2:
messages.warning(request, "Password not matching")
return render(request, 'signup.html')
else:
try:
if User.objects.get(username=email):
messages.info(request, "Email already exist")
return redirect('/auth/signup')
60
 except Exception as e:
pass

user = User.objects.create_user(email, email, password1)

user.is_active = False
user.save()
email_subject = "Activate Your Account"
message = render_to_string('activate.html', {
'user': user,
'domain': 'http://127.0.0.1:8000',
'uid': urlsafe_base64_encode(force_bytes(user.pk)),
'token': generate_token.make_token(user)
})

email_msg = EmailMessage(
email_subject, message, settings.EMAIL_HOST_USER, [email])
email_msg.send()
messages.info(
request, "Please check your mail to activate the account ")

return redirect('/auth/login')

return render(request, 'signup.html')

class ActivateAccountView(View):
def get(self, request, uidb64, token):
try:
uid = force_str(urlsafe_base64_decode(uidb64))
user = User.objects.get(pk=uid)
except Exception as e:
user = None
61
 if user is not None:
user.is_active = True
user.save()
messages.info(request, "Account Activated Successfully")
return redirect('/auth/login')
return render(request, 'activatefail.html')

def handlelogin(request):
if request.method == 'POST':

username = request.POST['email']
password = request.POST['password']
user = authenticate(username=username, password=password)

if user is not None:

login(request, user)
messages.success(request, "Logged in successfully")
return redirect('/')
else:
messages.warning(request, "Invalid Username or Password")
return redirect('/auth/login')
return render(request, 'login.html')

def handlelogout(request):
messages.info(request, "Logged out Successfully")
logout(request)
return redirect('/auth/login')

62
class RequestResetEmailView(View):
def get(self, request):
return render(request, 'request-reset-email.html')

def post(self, request):

email = request.POST['email']
user = User.objects.filter(email=email)

if user.exists():
# current_site=get_current_site(request)
email_subject = '[Reset Your Password]'
message = render_to_string('reset-user-password.html', {
'domain': '127.0.0.1:8000',
'uid': urlsafe_base64_encode(force_bytes(user[0].pk)),
'token': PasswordResetTokenGenerator().make_token(user[0])
})
print(message)
email_message = EmailMessage(
email_subject, message, settings.EMAIL_HOST_USER, [email])
email_message.send()

messages.info(
request, f"WE HAVE SENT YOU AN EMAIL WITH INSTRUCTIONS ON
HOW TO RESET THE PASSWORD {message} ")
return render(request, 'request-reset-email.html')

class SetNewPasswordView(View):
def get(self, request, uidb64, token):
context = {
'uidb64': uidb64,
'token': token
63
 }
try:
user_id = force_str(urlsafe_base64_decode(uidb64))
user = User.objects.get(pk=user_id)

if not PasswordResetTokenGenerator().check_token(user, token):

messages.warning(request, "Password Reset Link is Invalid")
return render(request, 'request-reset-email.html')

except DjangoUnicodeDecodeError as identifier:

pass

return render(request, 'set-new-password.html', context)

def post(self, request, uidb64, token):

context = {
'uidb64': uidb64,
'token': token
}
password = request.POST['pass1']
confirm_password = request.POST['pass2']
if password != confirm_password:
messages.warning(request, "Password is Not Matching")
return render(request, 'set-new-password.html', context)

try:
user_id = force_str(urlsafe_base64_decode(uidb64))
user = User.objects.get(pk=user_id)
user.set_password(password)
user.save()
messages.success(
request, "Password Reset Success Please Login with NewPassword")
64
 return redirect('/auth/login/')

except DjangoUnicodeDecodeError as identifier:

messages.error(request, "Something Went Wrong")
return render(request, 'set-new-password.html', context)

return render(request, 'set-new-password.html', context)

Login.html:-
{% extends "base.html" %} {% block title %} SignUp {% endblock title %}

{% block content %}
<div class="card bg-transparent mt-5 px-5 p-5 border border-white">

<h2 class="text-light">Login</h2>

{% for message in messages %}

<div class="alert alert-{{message.tags}} alert-dismissible fade show" role="alert">
<strong>{{message}}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
</button>
</div>
{% endfor %}
<form action="/auth/login/" method="post" >
{% csrf_token %}
<br />
<label class="text-light" for="email">Email</label>
<div class="form-group">
<input
type="email"
class="form-control"
65
 id="email"
name="email"
required
/>
</div>
<label class="text-light" for="password">Password</label>
<div class="form-group">
<input
type="Password"
class="form-control"
id="pass1"
name="password"
required
/>
</div>
<button type="submit" class="btn bg-success m-3">SignIn</button>
<br />
<span class="text-light">Forget Password? <a href="/auth/request-reset-
email/">Reset</a></span>
<br />
<span class="text-light">New User? </span><a href="/auth/signup/">Signup
Here!</a>
<br />
</form>
</div>
{% endblock content %}
ecommereceapp.urls:-
from django.urls import path
from ecommerceapp import views

urlpatterns = [
66
 path('', views.index, name='index'),
path('contact', views.contact, name='contact'),
path('about', views.about, name='about'),
path('checkout/', views.checkout, name='checkout'),
path('payment/<str:data>', views.paym, name='paym'),
path('profile', views.profile, name='profile'),
path('cancel/<str:data>', views.cancel, name='cancel'),
path('returnPrd/<str:data>', views.returnPrd, name='returnPrd'),
]
Ecommereceapp.models:-
from django.db import models

# Create your models here.

class Contact(models.Model):
name = models.CharField(max_length=50)
email = models.EmailField()
desc = models.TextField(max_length=50)
phonenumber = models.IntegerField()

def __str__(self):
return self.name

class Product(models.Model):
product_id = models.AutoField
product_name = models.CharField(max_length=100)
category = models.CharField(max_length=100, default="")
subcategory = models.CharField(max_length=50, default="")
price = models.IntegerField(default=0)

67
 desc = models.CharField(max_length=300)
image = models.ImageField(upload_to='images')

def __str__(self):
return self.product_name

class Cart(models.Model):
product_id = models.AutoField
product_name = models.CharField(max_length=100)
category = models.CharField(max_length=100, default="")
subcategory = models.CharField(max_length=50, default="")
price = models.IntegerField(default=0)
desc = models.CharField(max_length=300)
image = models.ImageField(upload_to='images')

def __str__(self):
return self.product_name

class Orders(models.Model):
order_id = models.AutoField(primary_key=True)
items_json = models.CharField(max_length=5000)
amount = models.IntegerField(default=0)
name = models.CharField(max_length=90)
email = models.CharField(max_length=90)
address1 = models.CharField(max_length=200)
address2 = models.CharField(max_length=200)
city = models.CharField(max_length=100)
state = models.CharField(max_length=100)
zip_code = models.CharField(max_length=100)
phone = models.CharField(max_length=100, default="")
68
 def __str__(self):
return str(self.order_id)+"id"

class Payment(models.Model):
oid = models.CharField(max_length=500, blank=True, null=True)
email = models.CharField(max_length=500, blank=True, null=True)
amountpaid = models.CharField(max_length=500, blank=True, null=True)
paymentstatus = models.CharField(max_length=20, blank=True)
card_no = models.CharField(max_length=20, blank=True)
cvv_no = models.CharField(max_length=20, blank=True)
def __str__(self):
return str(self.oid)+"id"
class ReturnRequest(models.Model):
oid = models.CharField(max_length=500, blank=True, null=True)
email = models.CharField(max_length=500, blank=True, null=True)
reason = models.CharField(max_length=500, blank=True, null=True)
bankaccount = models.CharField(max_length=500, blank=True, null=True)
price=models.CharField(max_length=500, blank=True, null=True)
def __str__(self):
return self.oid
class OrderUpdate(models.Model):
update_id = models.AutoField(primary_key=True)
email = models.CharField(max_length=500, blank=True, null=True)
order_id = models.IntegerField(default="")
update_desc = models.CharField(max_length=5000)
delivered = models.BooleanField(default=False)
timestamp = models.DateField(auto_now_add=True)

def __str__(self):
return str(self.order_id)+"id"
69
admin.py:-
from django.contrib import admin
from ecommerceapp.models import Contact, Product, Orders,
OrderUpdate,Payment,ReturnRequest
# Register your models here.
admin.site.register(Contact)
admin.site.register(Product)
admin.site.register(Orders)
admin.site.register(OrderUpdate)
admin.site.register(Payment)
admin.site.register(ReturnRequest)

authentication views.py:-
from django.shortcuts import render, redirect, HttpResponse
from django.contrib.auth.models import User
from django.views.generic import View
from django.contrib import messages
from django.template.loader import render_to_string
from django.utils.http import urlsafe_base64_decode, urlsafe_base64_encode
from .utils import TokenGenerator, generate_token
from django.utils.encoding import force_bytes, force_str, DjangoUnicodeDecodeError
from django.core.mail import EmailMessage
from django.conf import settings
from django.contrib.auth import authenticate, login, logout
from django.contrib.auth.tokens import PasswordResetTokenGenerator

70
def signup(request):

if request.method == 'POST':
email = request.POST['email']
password1 = request.POST['pass1']
password2 = request.POST['pass2']
if password1 != password2:
messages.warning(request, "Password not matching")
return render(request, 'signup.html')
else:
try:
if User.objects.get(username=email):
messages.info(request, "Email already exist")
return redirect('/auth/signup')
except Exception as e:
pass

user = User.objects.create_user(email, email, password1)

user.is_active = False
user.save()
email_subject = "Activate Your Account"
message = render_to_string('activate.html', {
'user': user,
'domain': 'http://127.0.0.1:8000',
'uid': urlsafe_base64_encode(force_bytes(user.pk)),
'token': generate_token.make_token(user)
})

email_msg = EmailMessage(
email_subject, message, settings.EMAIL_HOST_USER, [email])
email_msg.send()
71
 messages.info(
request, "Please check your mail to activate the account ")

return redirect('/auth/login')

return render(request, 'signup.html')

class ActivateAccountView(View):
def get(self, request, uidb64, token):
try:
uid = force_str(urlsafe_base64_decode(uidb64))
user = User.objects.get(pk=uid)
except Exception as e:
user = None

if user is not None:

user.is_active = True
user.save()
messages.info(request, "Account Activated Successfully")
return redirect('/auth/login')
return render(request, 'activatefail.html')

def handlelogin(request):
if request.method == 'POST':

username = request.POST['email']
password = request.POST['password']
user = authenticate(username=username, password=password)

if user is not None:

72
 login(request, user)
messages.success(request, "Logged in successfully")
return redirect('/')
else:
messages.warning(request, "Invalid Username or Password")
return redirect('/auth/login')
return render(request, 'login.html')

def handlelogout(request):
messages.info(request, "Logged out Successfully")
logout(request)
return redirect('/auth/login')

class RequestResetEmailView(View):
def get(self, request):
return render(request, 'request-reset-email.html')

def post(self, request):

email = request.POST['email']
user = User.objects.filter(email=email)

if user.exists():
# current_site=get_current_site(request)
email_subject = '[Reset Your Password]'
message = render_to_string('reset-user-password.html', {
'domain': '127.0.0.1:8000',
'uid': urlsafe_base64_encode(force_bytes(user[0].pk)),
'token': PasswordResetTokenGenerator().make_token(user[0])
})
print(message)
73
 email_message = EmailMessage(
email_subject, message, settings.EMAIL_HOST_USER, [email])
email_message.send()

messages.info(
request, f"WE HAVE SENT YOU AN EMAIL WITH INSTRUCTIONS ON
HOW TO RESET THE PASSWORD {message} ")
return render(request, 'request-reset-email.html')

class SetNewPasswordView(View):
def get(self, request, uidb64, token):
context = {
'uidb64': uidb64,
'token': token
}
try:
user_id = force_str(urlsafe_base64_decode(uidb64))
user = User.objects.get(pk=user_id)

if not PasswordResetTokenGenerator().check_token(user, token):

messages.warning(request, "Password Reset Link is Invalid")
return render(request, 'request-reset-email.html')

except DjangoUnicodeDecodeError as identifier:

pass

return render(request, 'set-new-password.html', context)

def post(self, request, uidb64, token):

context = {
'uidb64': uidb64,
74
 'token': token
}
password = request.POST['pass1']
confirm_password = request.POST['pass2']
if password != confirm_password:
messages.warning(request, "Password is Not Matching")
return render(request, 'set-new-password.html', context)

try:
user_id = force_str(urlsafe_base64_decode(uidb64))
user = User.objects.get(pk=user_id)
user.set_password(password)
user.save()
messages.success(
request, "Password Reset Success Please Login with NewPassword")
return redirect('/auth/login/')

except DjangoUnicodeDecodeError as identifier:

messages.error(request, "Something Went Wrong")
return render(request, 'set-new-password.html', context)

return render(request, 'set-new-password.html', context)

ecommerece setting.py:-
"""
Django settings for ecommerce project.

Generated by 'django-admin startproject' using Django 5.0.2.

For more information on this file, see

https://docs.djangoproject.com/en/5.0/topics/settings/
75
For the full list of settings and their values, see
https://docs.djangoproject.com/en/5.0/ref/settings/
"""

import os
from pathlib import Path
from django.contrib import messages

# Build paths inside the project like this: BASE_DIR / 'subdir'.

BASE_DIR = Path(__file__).resolve().parent.parent

# Quick-start development settings - unsuitable for production

# See https://docs.djangoproject.com/en/5.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!

SECRET_KEY = 'django-insecure-pga!!vv*2r5bs@$in59e0b_jgelt245uf++i!c-
hwd$n61jgjn'

# SECURITY WARNING: don't run with debug turned on in production!

DEBUG = True

ALLOWED_HOSTS = []

RAZORPAY_KEY_ID = 'rzp_test_rTNEOIsekkL69o'
RAZORPAY_KEY_SECRET = 'MbtzIL6vt2aYOFbKIOLL5Ny3'

# Email

EMAIL_HOST = 'smtp.gmail.com'
76
EMAIL_HOST_USER = '[email protected]'
EMAIL_HOST_PASSWORD = 'ovnd mtrv mrvo rzoc'
EMAIL_PORT = 587
EMAIL_USE_TLS = True

EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'

# DEFAULT_FROM_EMAIL = 'noreply<[email protected]>'

# Application definition

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'ecommerceapp',
'authenticate',
]

MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
77
]

ROOT_URLCONF = 'ecommerce.urls'

TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ["templates"],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]

WSGI_APPLICATION = 'ecommerce.wsgi.application'

# Database
# https://docs.djangoproject.com/en/5.0/ref/settings/#databases

DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}
78
# Password validation
# https://docs.djangoproject.com/en/5.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
{
'NAME':
'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]

# Internationalization
# https://docs.djangoproject.com/en/5.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True
79
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/5.0/howto/static-files/
STATIC_URL = '/static/'

STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
# Default primary key field type
# https://docs.djangoproject.com/en/5.0/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
MESSAGE_TAG = {
messages.ERROR: 'danger',
}

Order cancel.html :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Redirecting...</title>
<style>
/* Optional: Add some CSS for styling */
body {
font-family: Arial, sans-serif;

80
 background-color: #f0f0f0;
text-align: center;
padding-top: 100px;
}
h1 {
color: #333;
}
</style>
</head>
<body>
<h1>Your {{value}} has Succesfully send</h1>
<h1>Redirecting...</h1>
<p>You will be redirected to another page in a few seconds...</p>

<script>
// Redirect after 5 seconds
setTimeout(function() {
window.location.href = '/'; // Replace with the URL of the page you want to
redirect to
}, 5000); // 5000 milliseconds = 5 seconds
</script>
</body>
</html>

Order cheackout.html:-
{% extends 'base.html' %}
{% block title %}
Check Out
{% endblock title %}
{% block content %}

81
<h1>Welcome to Dhamaka Sale</h1>

{% endblock content %}
{% block body %}
{% load static %}

<!-- ======= Portfolio Section ======= -->

<section id="portfolio" class="portfolio">
<div class="container">
{% for message in messages %}

<div
class="alert alert-{{message.tags}} alert-dismissible fade show"
role="alert"
>
<strong>{{message}}</strong>
<button
type="button"
class="btn-close"
data-bs-dismiss="alert"
aria-label="Close"
></button>
</div>
{% endfor %}

<div class="section-title">
<h2>Welcome to Shop</h2>
<h3>Checkout Page </h3>
</div>

82
 <div class="container">
<div class="col my-4">
<h2>Step 1 - My Awesome Cart Express Checkout - Review Your Cart
Items</h2>
<div class="my-4">
<ul class="list-group" id="items">

</ul>

<nav aria-label="breadcrumb">
<ol class="breadcrumb mt-3">
<li class="breadcrumb-item active" aria-current="page">Your Cart Total Is
<b>Rs. <span id="totalprice"></span> <span id="amount"></span></b>. Enter your
details below & place your order. Thanks for using Shopping Cart</li>
<li</li>
</ol>
</nav>

</div>
</div>
<div class="col my-4">
<h2>Step 2 - Enter Address & Other Details:</h2>
<form method="post" action="/checkout/">{% csrf_token %}
<input type="hidden" name="itemsJson" id="itemsJson">

<input type="hidden" id="amt" name="amt">

<div class="form-row">
83
 <div class="form-group col-md-6">
<label for="inputname">Name</label>
<input type="text" class="form-control mt-3" id="name" name="name"
placeholder="Name" required>
</div>
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control mt-3" id="email"
name="email" placeholder="Please Enter register email" value="{{user.email}}"
required>
</div>

</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputAddress">Address</label>
<input type="text" class="form-control mt-3" id="address1"
name="address1" placeholder="1234 Main St" required>
</div>
<div class="form-group col-md-6">
<label for="inputAddress">Address line 2</label>
<input type="text" class="form-control mt-3" id="address2"
name="address2" placeholder="1234 Main St" required>
</div>
</div>

<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>

84
 <input type="text" class="form-control mt-3" id="city" name="city"
required>
</div>
<div class="form-group col-md-6">
<label for="inputState">State</label>
<input type="text" class="form-control mt-3" id="state" name="state"
placeholder="Enter State" required>
</div>
</div>

<div class="form-row">
<div class="form-group col-md-6">
<label for="inputZip">Pin Code</label>
<input type="number" class="form-control mt-3" id="zip_code"
name="zip_code" required>
</div>
<div class="form-group col-md-6">
<label for="inputZip">Phone Number</label>
<input type="number" class="form-control mt-3" id="phone"
name="phone" required>
</div>
<br>

<button id="btn" type="submit" class="btn btn-success btn-sm btn-block col-

md-4">Place Order</button>
</form>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
85
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-
wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-
B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>

<script>
if (localStorage.getItem('cart') == null) {
var cart = {};
} else {
cart = JSON.parse(localStorage.getItem('cart'));
}
console.log(cart);

var sum = 0;
var totalPrice = 0;
if ($.isEmptyObject(cart)) {
//if object is empty
mystr = `<p>Your cart is empty, please add some items to your cart before checking
out!</p>`
$('#items').append(mystr);
} else {
for (item in cart) {
let name = cart[item][1];
let qty = cart[item][0];
let itemPrice = cart[item][2];

86
 sum = sum + qty;
totalPrice = totalPrice + qty* itemPrice;

mystr = `<li class="list-group-item d-flex justify-content-between align-items-

center">
${name}
<div><b> Price : ${itemPrice}</b></div>
<span class="badge badge-primary badge-pill">${qty}</span>
</li>`
$('#items').append(mystr);
}
document.getElementById('totalprice').innerHTML=totalPrice

}
document.getElementById('totalprice').innerHTML = totalPrice;

$('#itemsJson').val(JSON.stringify(cart));

{% if thank %}
alert('Thanks for ordering with us. Your order is is {{id}}. Use it to track your order
using our order tracker');
localStorage.clear();
document.location = "/";
{% endif %}

var test = `${totalPrice}`;

document.getElementById("amt").value = test;
</script>

87
{% endblock body %}

Signup.html:-
{% extends "base.html" %} {% block title %} SignUp {% endblock title %}

{% block content %}
<div class="card bg-transparent mt-5 px-5 p-1 border border-white">

<h2 class="text-light">Signup</h2>

{% for message in messages %}

<div class="alert alert-{{message.tags}} alert-dismissible fade show" role="alert">
<strong>{{message}}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
</button>
</div>
{% endfor %}
<form action="/auth/signup/" method="post">
{% csrf_token %}
<br />
<label class="text-light" for="email">Email</label>
<div class="form-group">
<input
type="email"
class="form-control"
id="email"
name="email"
required
/>
</div>
<label class="text-light" for="pass1">Password</label>
<div class="form-group">
88
 <input
type="Password"
class="form-control"
id="pass1"
name="pass1"
required
/>
</div>
<label class="text-light" for="pass2">Confirm Password</label>
<div class="form-group">
<input
type="Password"
class="form-control"
id="pass2"
name="pass2"
required
/>
</div>
<button type="submit" class="btn bg-success m-3">SignIn</button>
<br />
<span class="text-light">Already User?</span> <a href="/auth/login/">Login
Here!</a>
<br />
</form>
</div>
{% endblock content %}

89
 CHAPTER 6
TESTING
6.1 INTRODUCTION TO SYSTEM TESTING:

System testing in the context of ecommerce involves testing the entire

ecommerce system, including the website, databases, servers, and
integrations with external systems, to ensure that it functions correctly and
meets the requirements of users and stakeholders.

In ecommerce, system testing is critical to ensure that the website is secure,

reliable, and performs well under various conditions. It involves testing
different aspects of the ecommerce system, such as:

1. Functionality: Testing the functionality of the website, including

browsing products, adding items to the cart, and checking out, to
ensure that all features work as expected.
2. Performance: Testing the performance of the website under normal
and peak traffic conditions to ensure that it loads quickly and responds
to user actions in a timely manner.
3. Security: Testing the security of the website to ensure that user data,
such as personal and payment information, is protected from
unauthorized access and cyber attacks.

90
 4. Compatibility: Testing the website on different devices, browsers,
and operating systems to ensure that it is compatible and displays
correctly for all users.
5. Integration: Testing the integration of the website with external
systems, such as payment gateways, inventory management systems,
and shipping providers, to ensure that data is exchanged correctly and
transactions are processed smoothly.
6. Usability: Testing the usability of the website to ensure that it is easy
to navigate, intuitive to use, and meets the needs of users.

TYPES OF TESTING:
Unit Testing:

- In ecommerce, unit testing is a crucial aspect of ensuring the quality and

reliability of the software. Unit testing involves testing individual
components or units of code in isolation to verify that they work as
expected. In the context of ecommerce, this means testing functions,
methods, and classes that handle specific tasks such as processing payments,
managing inventory, or displaying product information. By isolating and
testing these units of code, developers can identify and fix bugs early in the
development process, leading to a more stable and robust ecommerce
system. Unit testing also helps ensure that future changes or updates to the
codebase do not introduce new bugs or issues, making it easier to maintain
and update the ecommerce platform over time
Integration Testing:

- Integration testing in ecommerce involves testing the interactions between different

components of the ecommerce system to ensure they work together seamlessly. This
includes testing the integration of the ecommerce website with external systems such as
payment gateways, inventory management systems, and shipping providers. Integration
testing in ecommerce is crucial to ensure that data is exchanged correctly, transactions are
processed accurately, and the overall user experience is smooth and error-free. By
identifying and fixing integration issues early in the development process, ecommerce
businesses can ensure that their systems are reliable and provide a seamless shopping
experience for customers.
Performance Testing:

91
 - Performance testing in ecommerce involves evaluating the speed,
responsiveness, and stability of an online store under various conditions. It
helps ensure that the website can handle a high volume of users and
transactions without slowdowns or crashes. Performance testing typically
includes load testing, stress testing, and scalability testing to identify and
address any bottlenecks or performance issues. By conducting performance
testing, ecommerce businesses can optimize their websites for better user
experience, reduce bounce rates, and improve overall customer satisfaction.

Security Testing:

-Security testing in ecommerce involves evaluating the website's security

measures to identify vulnerabilities and protect customer data. This includes
conducting tests such as penetration testing, vulnerability scanning, and
security audits to ensure that the website is secure from potential threats
such as hacking, data breaches, and fraud. By regularly conducting security
testing, ecommerce businesses can identify and mitigate security risks,
protect customer information, and build trust with their customers.

Regression Testing:

- Regression testing in ecommerce involves retesting the entire ecommerce

system, including the website, databases, and integrations, to ensure that
new changes or updates do not negatively impact existing functionality. This
type of testing is crucial in ecommerce to maintain the integrity and stability
of the system, especially when new features or enhancements are introduced.
By conducting regression testing regularly, ecommerce businesses can
ensure that their website continues to function correctly and delivers a
seamless shopping experience to customers.

Continuous Monitoring and Feedback:

-Continuous monitoring and feedback are crucial aspects of ecommerce that

help businesses ensure the smooth functioning of their online stores and
meet the evolving needs of customers. By continuously monitoring website
performance, traffic, and user behavior, ecommerce businesses can identify
92
and address issues promptly, such as slow loading times or broken links, to
provide a seamless shopping experience. Additionally, collecting feedback
from customers through surveys, reviews, and social media helps businesses
understand customer preferences and satisfaction levels, enabling them to
make informed decisions about product offerings, marketing strategies, and
website improvements. This iterative process of monitoring and feedback
allows ecommerce businesses to adapt quickly to changes in the market and
maintain a competitive edge.

Functional test:
Functional tests provide systematic demonstrations that functions tested are available
as specified by the business and technical requirements, system documentation, and user
manuals.

Functional testing is centered on the following items:

Valid Input : identified classes of valid input must be accepted.

Invalid Input : identified classes of invalid input must be rejected.

Functions : identified functions must be exercised.

Output : identified classes of application outputs must be exercised.

Systems/Procedures: interfacing systems or procedures must be invoked.

Organization and preparation of functional tests is focused on requirements, key

functions, or special test cases. In addition, systematic coverage pertaining to identify
Business process flows; data fields, predefined processes, and successive processes must
be considered for testing. Before functional testing is complete, additional tests are
identified and the effective value of current tests is determined.

System Test:

93
 System testing in ecommerce involves testing the entire ecommerce system,
including the website, databases, servers, and integrations, to ensure it
functions correctly. This includes testing functionality, performance under
various conditions, security, compatibility with different devices and
browsers, integration with external systems, and usability. The goal is to
identify and fix issues before the website is launched, ensuring a positive user
experience and reducing the risk of errors and downtime.

Acceptance Testing:
User Acceptance Testing is a critical phase of any project and requires
significant participation by the end user. It also ensures that the system meets
the functional requirements.

TEST CASE ID: 001

Description: Verify that the `Room` model is correctly created with the required fields.

Test Steps:

Create a new `Room` object.

Access its attributes.

Expected Results: The `Room` object should have all the required fields (`code`,

`host`, `guest_can_pause`, `votes_to_skip`).

Actual Results: All required fields are present and accessible.

TEST CASE ID: 002

Description: Test the functionality of creating a new room.

94
Test Steps:

Call the API endpoint for creating a room.

Provide valid input data.

Expected Results: A new room should be created in the database with the provided data.

Actual Results: The API endpoint successfully creates a new room in the database.

TEST CASE ID: 003

Description: Verify that users can join a room using a valid room code.

Preconditions: A valid room exists with an active session.

Test Steps:

Enter a valid room code.

Click on the "Join Room" button.

Expected Results: The user should be redirected to the room page and successfully join the
room.

Actual Results: The user is redirected to the room page and can interact with the room's
features.

TEST CASE ID: 004

Description: Verifies the functionality of updating room details, including votes to skip and
guest can pause settings.

Preconditions:

The host is authenticates and logged into the system.

The host has created a room .

Test Steps:

95
Click on the “setting” button.

Give inputs fields for updating the room, including votes to skip and guest can pause.

Click the “Update” button to apply the changes.

Click the “Close” button.

Expected Results: The host should be able to update the room details without encountering
any errors and a confirmation message should displayed to notify the host.

Actual Results: The host is able to update the room and a confirmation message “Room
Updated Successfully” is displayed.

TEST CASE ID: 005

Description: Test the functionality of playing a song in the room.

Preconditions: A valid room exists with at least one song in the playlist.

Test Steps:

Click on the "Play" button in the room.

Expected Results: The song should start playing in the room's music player.

Actual Results: The song starts playing, and users in the room can hear it.

TEST CASE ID: 006

Description: Verify that the `Room` model correctly handles invalid input data.

Test Steps:Attempt to create a `Room` object with missing or invalid data.

Expected Results: The creation of the `Room` object should fail, and appropriate error
handling should be in place.

Actual Results: The creation fails when invalid data is provided, and the error is handled
properly.

96
TEST CASE ID: 007

Description: Test the functionality of retrieving the current song in a room.

Test Steps:

Call the method to retrieve the current song in a room.

Expected Results: The method should return the details of the current song being played in
the room.

Actual Results: The method successfully retrieves the current song details.

TEST CASE ID: 008

Description: Verify that users can leave a room without any issues.

Preconditions: The user is currently in a room.

Test Steps:

Click on the "Leave Room" button.

Expected Results: The user should be redirected to the homepage or a different page, and
their session in the room should be terminated.

Actual Results: The user is successfully removed from the room, and the session is
terminated.

TEST CASE ID: 009

Description: Test the functionality of skipping a song in the room.

Preconditions: A valid room exists with multiple songs in the playlist.

Test Steps:

Click on the "Skip Song" button in the room.

97
Expected Results: The current song should be skipped, and the next song in the playlist
should start playing.

Actual Results: The current song is skipped, and the next song starts playing as expected.

TEST CASE ID: 010

Description: Test the integration between the Spotify API and the application backend.

Preconditions: The application is authenticated with the Spotify API.

Test Steps:

Trigger an action in the application that interacts with the Spotify API, such as playing a
song.

Expected Results: The application successfully communicates with the Spotify API and
performs the desired action.

Actual Results: The action is executed, and the Spotify API responds appropriately.

These test cases cover various aspects of the project to ensure the robustness and reliability
of the application.

CHAPTER 7
SAMPLE SCREENSHOTS

98
HOME PAGE:

LOGIN PAGE:

99
SIGNUP PAGE:

100
LIST OF PRODUCTS:

101
CHEACKOUT:-

ENTER THE ADDRESS DETAILS:-

MY PROFILE:

102
103
CONTACTUS PAGE:-

ADMIN PAGE:-

104
PRODUCT ADD PAGE:-

ORDER UPDATE PAGE:-

105
RETURN REQUEST PAGE:-

8.CONCLUSION:

the development of an e-commerce website presents a dynamic opportunity to

engage with a vast online audience and drive business growth in the digital age. Through
meticulous planning, innovative design, robust development, and seamless integration of
user-friendly features, an e-commerce platform can serve as a powerful tool to enhance
customer experience, streamline transactions, and ultimately, propel the success of the
business. By prioritizing user needs, implementing cutting-edge technologies, and
maintaining a focus on adaptability and scalability, an e-commerce website project has
the potential to not only meet but exceed the evolving demands of today's online
marketplace. As businesses continue to embrace digital transformation, investing in a
well-executed e-commerce website project is essential for staying competitive, fostering
customer loyalty, and achieving long-term success in the ever-evolving landscape of
online commerce.

The music streaming application project has been a journey of innovation and
creativity, aiming to deliver a seamless and immersive listening experience to users

106
 worldwide. As we conclude this project, it's essential to reflect on the
accomplishments, challenges faced, and the overall impact of the application.

Throughout the development process, our team worked tirelessly to bring the vision
of the application to life. We started with a clear understanding of the user needs and
market trends, which guided our decisions at every stage of development. From
designing the user interface to implementing complex backend functionalities, each
aspect of the application was crafted with precision and attention to detail.

One of the key achievements of this project is the successful implementation of core
features such as playlist management, playback controls, and integration with third-
party APIs like Spotify. These features not only enhance the user experience but also
differentiate the application from competitors in the crowded music streaming
market.

Moreover, the application's scalability and robustness were prioritized from the
outset, ensuring that it can handle a large user base and adapt to changing demands
over time. By leveraging modern technologies and best practices in software
development, we built a foundation that can support future growth and expansion.

However, the journey was not without its challenges. From technical hurdles to
tight deadlines, our team encountered various obstacles along the way. Yet, through
collaboration, perseverance, and innovative problem-solving, we overcame these
challenges and delivered a product that we are proud of.

One of the critical aspects of the project was testing and quality assurance. Rigorous
testing was conducted at every stage of development to identify and address
any issues promptly. Unit tests, integration tests, and system tests were carried out
meticulously to ensure that the application performs reliably across different devices
and platforms.

Looking ahead, there are opportunities for further enhancement and refinement of the
application. Future iterations could focus on introducing advanced features such as personalized
recommendations, social integration, and offline mode to enrich the user experience further.
Additionally, continuous updates and improvements will be essential to stay ahead of the
competition and meet evolving user expectations

107
FUTURE ENHANCEMENT
There are several areas where the music streaming application can be enhanced to
provide an even better user experience, stay competitive in the market, and meet
evolving user needs. Here are some potential future enhancements:

Enhanced Recommendation Engine

Implement a sophisticated recommendation system that leverages machine learning

algorithms to suggest personalized playlists, songs, and artists based on user
preferences, listening history, and contextual data such as time of day, mood, and
activity.

Social Features

Introduce social features that enable users to connect with friends, share playlists,
collaborate on playlists, and see what their friends are listening to. This could include
features such as following other users, liking and commenting on playlists, and creating
collaborative playlists.

User Profiles

Create user profiles that allow users to customize their experience, view their listening
history, manage their playlists, and see recommendations tailored to their preferences.
User profiles could also include social elements such as profile pictures, bios, and
follower counts.

108
Offline Mode

Enable users to download songs, albums, and playlists for offline listening, allowing
them to enjoy music even when they don't have

Lyrics Integration

Integrate lyrics into the application, allowing users to view lyrics while listening to songs.
This could enhance the listening experience and make it easier for users to singalong to
their favorite songs.

Podcasts and Audiobooks

Expand the content library to include podcasts, audiobooks, and other spoken-word
content. This would appeal to users who are interested in a wider range of audio content
beyond music.

Live Events and Concerts

Partner with artists, labels, and event organizers to provide access to live events,
concerts, and exclusive performances through the application. This could include live
streams, virtual concerts, and ticket sales for in-person events.

Accessibility Features

Improve accessibility features such as screen reader support, keyboard navigation,

109
and high contrast mode to make the application more inclusive and accessible to
userswith disabilities.

Integration with Smart Devices

Integrate the application with smart devices such as smart speakers, smart TVs, and
wearables to provide a seamless and integrated listening experience across different
devices and platforms.

BIBLOGRAPHY

1. PHP MySQL Website Programming: Problem - Design – Solution byChris

Lea, Mike Buzzard, Dilip Thomas , Jessey White-Cinis
2. Beginning PHP5, Apache, and MySQL Web Development (Programmer to
Programmer) by Elizabeth Naramore
3. MySQL/PHP Database Applications, 2nd Edition by Brad Bulger
4. How to Do Everything with PHP and MySQL by Vikram Vaswani

110