E-Commerce Project
E-Commerce Project
BACHELOR OF TECHNOLOGY IN
COMPUTER SCIENCE AND ENGINEERING
SUBMITTED BY
January-May 2023
i
CANDIDATE’S DECLARATION
I hereby certify that the project entitled “Style Craft” submitted by Adil Arsheed (19-B.CSE274)
in partial fulfillment of the requirement for the award of degree of the B. Tech. (Computer
Science & Engineering) submitted in Department of Computer Science & Engineering, at RIMT
University, MandiGobindgarh is an authentic record of my own work carried out during a period
from January 2023 to May 2023. The matter presented in this project has not formed the basis
for the award of any other degree, diploma, fellowship or any other similar titles.
ii
ABSTRACT
The business to consumer aspect of electronic commerce (e-commerce) is the most visible
business use of the Word Wide Web. The primary goal of this e-commerce website is to sell
goods and services online. This project is a web based shopping system. The project objective is
to deliver the online shopping application. This project is an attempt to provide the advantages of
online shopping to customers of a real shop. It helps buying the products in the shop anywhere
through internet by using a web site. Thus the customer will get the service of online shopping
and home delivery from this shop. If shops are providing an online portal where their customers
can enjoy easy shopping from anywhere, the shops won‟t be losing any more customers to the
trending online shops such as flipkart or eBay. Since the application is available in the given site
it is easily accessible and always available.
In 2007 when E-Commerce entered India many retailers directly criticized that consumers would
ever take to buying fashion apparels through online. Online apparels sales in India have raised
the eyeballs of many high street retailers, breaking the age old myth nowadays they are willing to
sell their apparels through online finding that their sales percentage have dramatically increased
year on year compared to off-store sales .E-commerce is a deserving concept in the further of
apparels industry. Nearly 52% of apparels are sold in India through online, the percentage have
neither increased but not decreased. India being a conservative country for centuries forced many
retailers to adopt our traditional looks. But not nowadays, hectic competition in apparels industry
have forced retailers to throw away their traditional outfits and come out with bold and updated
looks. Consumers have also changed their preference, willingness to try a different look have
made them to look out for new things. Using this as an opportunity the e-commerce channels
introduced trending collections of fashion apparels to their door step. Understanding the
consumer's mindset they regularly upgraded their apparels to present trending preferred by the
international consumers. Innumerable collections, Discounts, 24x7 service, free home delivery
are also the other main factors that indulge consumers to prefer online.
iii
ACKNOWLEDGEMENT
A web-site as this one has required help from many quarters. We realized this when we ventured
into the area of web development. From the beginning everyone co-operated, supported us for
which we express our sincere acknowledgement. Training is the first step in the practical
field from where one learns how to apply theory principles for this the practical purposes.
To develop a successful website, one needs understanding and co-ordination from all those
who are directly and indirectly involved in this.
A person can be successful only when the team and organization for which they are working
have unlimited goal of his perseverance. We hereby, like to show our deep gratitude towards our
instructor and project in charge all faculty of college helped us very much. We are obliged to
them for successful completion of our E-Commerce Project. We the students find ourselves to be
privileged to have golden opportunity to develop website under the guidance of such people
without whom designing and developing website successfully would have been just impossible
for us. We are thankful to them. We would like to thank all those who have supported us. A
person can be successful only when the team and organization for which they are working have
unlimited goal of his perseverance. We hereby, like to show our deep gratitude towards our
instructor and project in charge all faculty of college helped us very much. We are obliged to
them for successful completion of our E-Commerce Project.
Last but not the least; Above all, we should not forget the great director of the world, „The
Almighty‟; let us thank the Almighty for His inspiration.
iv
ABOUT COMPANY
Solitaire Infosys Pvt. Ltd. is an acclaimed IT service provider contributing its part in the
development of many businesses around the globe. We visualize becoming the most trusted and
respected IT service provider across the globe with our vibrant, dynamic, and value-based IT
solutions that revolve around our clients, team, and international standards. We socialize with our
clients to get a superior cognizance of their business and requirements and help them in
fabricating websites and applications for their business. With every project that we deliver, we
deliver our respect, creativity, quality, transparency, and teamwork to our clients. We have the
experience, expertise, and capabilities to enable organizations to accelerate their service
processes in every possible way. We are known for our excellent customer satisfaction,
costeffectiveness, and innovative skills that are unparalleled.Founded in 2011 by a dynamic duo
with the same aim and zeal, we have come a long way in satisfying our clients.
We are serving our clients with the world-class services for more than seven years now. The
clients are delivered with the best IT solutions after we have developed a great understanding of
their business and requirements. Our team works on the client projects like its own and that is the
reason why we hold the edge in the league.
With every project that we deliver, we deliver our respect, creativity, quality, transparency, and
teamwork to our clients. We have the experience, expertise, and capabilities to enable
organizations to accelerate their service processes in every possible way. We are known for our
excellent customer satisfaction, cost-effectiveness, and innovative skills that are unparalleled. We
visualize becoming the most trusted and respected IT service provider across the globe with our
vibrant, dynamic, and value-based IT solutions that revolve around our clients, team, and
international standards. Solitaire Infosys Pvt. Ltd. envisions becoming a reliable partner to all its
clients and focusing on doing everything ethically and rightly. We are always open to accept our
mistakes and have the nerve to do the necessary changes.
v
TABLE OF CONTENTS
TITLE Page no
Certificate by Company i
Candidate Declaration ii
Abstract iii
Acknowledgement iv
About Company v
List of Figures vi
Chapter 1: INTRODUCTION 1-4
1.1 Project Objective 1-2
1.2 Project Overview 2
1.3 Study of the System 2
1.4 Modules 2-4
1.4.1 Administrator 3
1.4.2 Users 3-4
Chapter 2: Project Work 5-10
2.1 Online Shopping Website 5-9
2.2 Data Management 10
2.2.1 Data Description 10
2.2.2 Data Objects 10
2.2.3 Database 10
2.2.4 Relationships 10
Chapter 3: Implementation 11-16
3.1 Tools & Technologies used 11-14
3.1.1 Visual Studio 11
3.1.2 HTML 11-12
3.1.3 CSS 12
3.1.4 JavaScript 12-13
3.1.5 React js 13
3.1.6 MongoDB 13
3.1.7 Express js 14
3.1.8 Node js 14
3.2 ER Diagram 15
3.3 DFD Diagram 15
3.4 Functional Requirements 16
3.5 Non-Functional / Operational Requirements 16
Chapter 4: Results and Discussion 17-19
4.1 Snapshots 17-19
4.2 Workflow 19
Chapter 5: Conclusion and Future Scope 20
References
LIST OF FIGURES
Figure no. Title Page
1.1 Admin Module 3
1.2 User Module 4
2.1 Home Page 5
2.2 Clothing Page 6
2.3 Categories Page 6
2.4 Order Page 7
2.5 Contact Us Page 7
2.6 Register Page 8
2.7 Login Page 8
2.8 Order View for User 9
2.9 Payment Page 9
2.10 Database Table Diagram 10
2.11 Relationships 10
3.1 ER Diagram 15
3.2 DFD Diagram 15
4.1 Home Page 17
4.2 Categories Page 17
4.3 New Products 18
4.4 Our services 18
4.5 Contact Us 19
4.6 Workflow 19
CHAPTER 1: INTRODUCTION
1
• Provides the searching facilities based on various factors. Such as Clothes, Shopping
Cart, Customer, Order.
• Online E-commerce System also manage the Delivery Address details online for
Customer details, Order details, Clothes.
• It tracks all the information of Item Category, Delivery Address, Customer etc.
• Manage the information of Item Category
• Shows the information and description of the Clothes, Shopping Cart
• To increase efficiency of managing the Clothes, Item Category.
• It deals with monitoring the information and transactions of Customer.
• Manage the information of Clothes.
• Editing, adding and updating of Records is improved which results in proper resource
management of Clothes data.
Manage the information of Customer.
2
Users
1.4.1 ADMINISTRATOR
The administrator is the super user of this application. Only admin have access into this
admin page. Admin may be the owner of the shop. The administrator has all the information
about all the users and about all products.
This module is divided into different sub-modules. Manage Moderators, Manage Products,
1.4.2 USERS
Registration: A new user will have to register in the system by providing essential
details in order to view the products in the system. The admin must accept a new user
by unblocking him.
Login: A user must login with his user name and password to the system after
registration.
View Products: User can view the list of products based on their names after
successful login. A detailed description of a particular product with product name,
products details, product image, price can be viewed by users.
Search Product: Users can search for a particular product in the list by name.
3
Add to Cart: The user can add the desired product into his cart by clicking add to cart
option on the product. He can view his cart by clicking on the cart button. All products
added by cart can be viewed in the cart. User can remove an item from the cart by
clicking remove.
Submit Cart: After confirming the items in the cart the user can submit the cart by
providing a delivery address. On successful submitting the cart will become empty.
History: In the history the user will have a view of pending orders.
Edit Profile: The user can view and edit the profile.
4
CHAPTER 2: PROJECT WORK
2.1 ONLINE SHOPPING WEBSITE
Anyone can view Online Shopping portal and available products, but every user must login
by his/her Username and password in order to purchase or order products. Unregistered
members can register by navigating to registration page. Only Admin will have access to
modify roles, by default developer can only be an „Admin‟. Once user register site, his
default role will be „User‟.
Home Page: The Home Screen will consist of screen were one can browse through
the products which we have on our website.
5
Clothing Page (Products): This page consists of product details. This page appears
same for both visitors and users.
Categories Page: This page consists of various categories of clothes and electronic
devices for both men and women.
6
Order Page: Registered users can order desired products from here.
Contact Us Page: Visitors and Registered users can contact website owners or
administrators from here.
7
8
Fig 2.7: Login Page
Order View For User: Once users order item they are able to see ordered
products and grand total.
Payment Page: Once users orders products they are redirected to payment page.
9
Fig 2.9: Payment Page
10
2.2 DATA MANAGEMENT
2.2.1 DATA DESCRIPTION
This database consists of:-
Users: User and Admin information is added to database with Unique ID based on their
roles.
Shopping: Complete products information is stored in this table.
Orders: Customer ordered products, status and delivery information is stored in this
table.
2.2.2 DATA OBJECTS
User: ID, UserName, Password, Email, Role.
Shopping: ID, Product, Product ID, Cost, Category, Image, Description.
Orders: ID, Client, Product, Quantity, Price, Date, OrderShipped. 2.2.3 DATABASE
2.2.4 RELATIONSHIPS
11
CHAPTER 3: IMPLEMENTATION
3.1 TOOLS AND TECHNOLOGIES USED
3.1.1 VISUAL STUDIO
Visual Studio is an Integrated Development Environment(IDE) developed by Microsoft to
develop GUI(Graphical User Interface), console, Web applications, web apps, mobile apps,
cloud, and web services, etc. With the help of this IDE, you can create managed code as well
as native code. It uses the various platforms of Microsoft software development software like
Windows store, Microsoft Silverlight, and Windows API, etc. It is not a language-specific
IDE as you can use this to write code in C#, C++, VB(Visual Basic), Python, JavaScript, and
many more languages. It provides support for 36 different programming languages. It is
available for Windows as well as for MacOS. Features include support for debugging, syntax
highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.
3.1.2 HTML
HTML stands for HyperText Markup Language. It is used to design web pages using a
markup language. HTML is the combination of Hypertext and Markup language. Hypertext
defines the link between web pages. A markup language is used to define the text document
within the tag which defines the structure of web pages. This language is used to annotate
(make notes for the computer) text so that a machine can understand it and manipulate text
accordingly. Most markup languages (e.g. HTML) are human-readable. The language uses
tags to define what manipulation has to be done on the text. HTML is a markup language
used by the browser to manipulate text, images, and other content, in order to display it in the
required format.
Description of HTML example:
<!DOCTYPE>: It defines the document type or it instruct the browser about the version of
HTML.
<html > :This tag informs the browser that it is an HTML document. Text between html tag
describes the web document. It is a container for all other elements of HTML.
<head>: It should be the first element inside the <html> element, which contains the
metadata(information about the document). It must be closed before the body tag opens.
<title>: As its name suggested, it is used to add title of that HTML page which appears at the
top of the browser window. It must be placed inside the head tag and should close
immediately.
12
<body>: Text between body tag describes the body content of the page that is visible to the end
user. This tag contains the main content of the HTML document.
<h1>: Text between <h1> tag describes the first level heading of the webpage.
<p> : Text between <p> tag describes the paragraph of the webpage.
3.1.3 CSS
Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to
simplify the process of making web pages presentable. CSS allows you to apply styles to web
pages. More importantly, CSS enables you to do this independent of the HTML that makes
up each web page. It describes how a webpage should look: it prescribes colors, fonts,
spacing, and much more. In short, you can make your website look however you want. CSS
lets developers and designers define how it behaves, including how elements are positioned
in the browser. While html uses tags, CSS uses rulesets. CSS is easy to learn and understand,
but it provides powerful control over the presentation of an HTML document.
What does CSS do:
You can add new looks to your old HTML documents.
You can completely change the look of your website with only a few changes in CSS code.
Why use CSS: These are the three major benefits of CSS:
1) Solves a big problem
Before CSS, tags like font, color, background style, element alignments, border and size had
to be repeated on every web page. This was a very long process. For example: If you are
developing a large website where fonts and color information are added on every single page,
it will be become a long and expensive process. CSS was created to solve this problem. It
was a W3C recommendation.
2) Saves a lot of time
CSS style definitions are saved in external CSS files so it is possible to change the entire
website by changing just one file.
3) Provide more attributes
CSS provides more detailed attributes than plain HTML to define the look and feel of the
website.
3.1.4 JAVASCRIPT
JavaScript is a lightweight, cross-platform, and interpreted compiled programming language
which is also known as the scripting language for webpages. It is well-known for the
development of web pages, many non-browser environments also use it. JavaScript can be
13
used for Client-side developments as well as Server-side developments. Javascript is both
imperative and declarative type of language. JavaScript contains a standard library of objects,
like Array, Date, and Math, and a core set of language elements like operators, control
structures, and statements.
3.1.5 REACT js
The React.js framework is an open-source JavaScript framework and library developed by
Facebook. It‟s used for building interactive user interfaces and web applications quickly and
efficiently with significantly less code than you would with vanilla JavaScript.In React, you
develop your applications by creating reusable components that you can think of as
independent Lego blocks. These components are individual pieces of a final interface, which,
when assembled, form the application‟s entire user interface. React‟s primary role in an
application is to handle the view layer of that application just like the V in a model-
viewcontroller (MVC) pattern by providing the best and most efficient rendering execution.
Rather than dealing with the whole user interface as a single unit, React.js encourages
developers to separate these complex UIs into individual reusable components that form the
building blocks of the whole UI. In doing so, the ReactJS framework combines the speed and
efficiency of JavaScript with a more efficient method of manipulating the DOM to render
web pages faster and create highly dynamic and responsive web applications.
3.1.6 MONGODB
MongoDB the most popular NoSQL database, is an open-source document-oriented database.
The term „NoSQL‟ means „non-relational‟. It means that MongoDB isn‟t based on the
tablelike relational database structure but provides an altogether different mechanism for
storage and retrieval of data. This format of storage is called BSON (similar to JSON
format). Below are the few of the reasons as to why one should start using MongoDB
1. Document-oriented – Since MongoDB is a NoSQL type database, instead of having
data in a relational type format, it stores the data in documents. This makes MongoDB
very flexible and adaptable to real business world situation and requirements.
2. Ad hoc queries – MongoDB supports searching by field, range queries, and regular
expression searches. Queries can be made to return specific fields within documents.
3. Indexing – Indexes can be created to improve the performance of searches within
MongoDB. Any field in a MongoDB document can be indexed. MongoDB supports
searching by field, range queries, and regular expression searches. This makes
MongoDB very flexible and adaptable to real business world situation and
requirements.
14
3.1.7 Express js
Express is a fast, assertive, essential and moderate web framework of Node.js. You can
assume express as a layer built on the top of the Node.js that helps manage a server and
routes. It provides a robust set of features to develop web and mobile applications. Let's see
some of the core features of Express framework: It can be used to design single-page,
multipage and hybrid web applications. It allows to setup middlewares to respond to HTTP
Requests. It defines a routing table which is used to perform different actions based on HTTP
method and URL. Node.js that helps manage a server and routes. It provides a robust set of
features to develop web and mobile applications.Let's see some of the core features of
Express framework:It can be used to design single-page, multi-page and hybrid web
applications. It allows to setup middlewares to respond to HTTP RequestsIt allows to
dynamically render HTML Pages based on passing arguments to templates.
3.1.8 Node js
Node.js is a server-side platform built on Google Chrome's JavaScript Engine (V8 Engine).
Node.js was developed by Ryan Dahl in 2009 and its latest version is v0.10.36. The
definition of Node.js as supplied by its official documentation is as follows. Node.js is an
open source, cross-platform runtime environment for developing server-side and networking
applications. Node.js applications are written in JavaScript, and can be run within the Node.js
runtime on OS X, Microsoft Windows, and Linux.Node.js also provides a rich library of
various JavaScript modules which simplifies the development of web applications using
Node.js to a great extent. Node.js is a platform built on Chrome's JavaScript runtime for
easily building fast and scalable network applications. Node.js uses an event-driven,
nonblocking I/O model that makes it lightweight and efficient, perfect for data-intensive
realtime applications that run across distributed devices. Node.js is an open source,
crossplatform runtime environment for developing server-side and networking applications.
Node.js applications are written in JavaScript, and can be run within the Node.js runtime on
OS X, Microsoft Windows, and Linux.Node.js also provides a rich library of various
JavaScript modules which simplifies the development of web applications using Node.js to a
great extent. Node.js is a platform built on Chrome's JavaScript runtime for easily building
fast and scalable network applications.
15
3.2 ER DIAGRAM
16
3.4 FUNCTIONAL REQUIREMENTS
Key functional requirements of ecommerce websites include:
Third-party integrations.
Mobile responsiveness.
Product attributes.
Checkout and checkout process.
Social sharing, usability, security, and performance.
17
CHAPTER 4: RESULTS AND DISCUSSION
4.1 SNAPSHOTS
Homepage: The Home Screen will consist of screen were one can browse through the
products which we have on our website.
Categories Page: This page consists of various categories of clothes and electronic
devices for both men and women.
18
New Products: This shows the new products available on the website.
19
Contact Us: A contact page provides guidance for existing customers and offers an
overview of your brand for new visitors.
4.2 WORKFLOW
20
CHAPTER 5: CONCLUSION AND FUTURE SCOPE
The project entitled “Style Craft” was completed successfully. The system has been
developed with much care and free of errors and at the same time it is efficient and less time
consuming. The purpose of this project was to develop a web application and an android
application for purchasing items from a shop.
This project helped us in gaining valuable information and practical knowledge on
several topics like designing web pages using HTML, CSS and JavaScript usage of
responsive templates, designing of android applications, and management of database using
MongoDB . The entire system is secured. Also the project helped us understanding about the
development phases of a project and software development life cycle. We learned how to test
different features of a project.
This project has given us great satisfaction in having designed an application which can
be implemented to any nearby shops or branded shops selling various kinds of products by
simple modifications.
There is a scope for further development in our project to a great extend. A number of
features can be added to this system in future like providing moderator more control over
products so that each moderator can maintain their own products. Another feature we wished
to implement was providing classes for customers so that different offers can be given to
each class. System may keep track of history of purchases of each customer and provide
suggestions based on their history. These features could have implemented unless the time
did not limited us.
21
REFERENCES
https://www.w3schools.com/html/ https://www.tutorialspoint.com/css/index.htm
https://www.javatpoint.com/javascript-tutorial
https://www.w3schools.com/python/
https://www.mongodb.com/docs/manual/tutorial/getting-started/
22