ABSTRACT

The process of purchasing goods and services from sellers over the Internet is
known as online shopping. Sellers have sought to market their items to
consumers who spend time online since the inception of the WWW(World
Wide Web). Shoppers may purchase comfortably from their own homes while
seated in front of the computer.

A person only has to log on to the Internet, visit the shopping website, and
choose the products he/she desires. The products are held in a virtual shopping
cart until the customer is ready to make his/her purchase. The shoppers can
remain in comfort of their homes as they does their shopping, and the process
can be conducted in anytime in the morning or late at night with little time.
Online stores almost never close.

Few components to create an effective online shopping site:-

HTML

CSS

PHP
MYSQL
FORMS
XAMPP

Keywords: HTML,CSS,PHP,MYSQL,FORMS,XAMPP.
 LIST OF FIGURES

Figure No. Figure Caption Page No.

Figure 1 Data Security 13
Figure 2 Exception handling 14
Chapter 1

INTRODUCTION

An online shopping service that lets merchants to sell their wares to customers
who surfs onto the internet. Shoppers may purchase comfortably from their own
homes while seated in front of the computer.

The objective of this project is to create an online shopping website with data
base connectivity which could allow user to register onto the website and
facilitate user friendly, smooth interface to buy commodities.
The site is very convenient where the buyer can leisurely purchases the desired
products from home via internet on mobile or system.

It is developed using HTML, CSS, JS, PHP, MYSQL, GITHUB, 000webhost,

Mobile response, Forms, Xampp.

HTML

The Standard Markup Language for writings intended to be seen on a web

browser is HTML, or HyperText Markup Language. Programming languages
like JavaScript and technologies like Cascading Style Sheets (CSS) can be
helpful.

HTML documents are downloaded from an internet server or locally saved files
by web browsers, who then transform them into multimedia sites. Initially,
HTML included visual clues for the document's appearance and logically
represented the structure of a web page.

JavaScript and other scripting languages can be inserted into HTML to run
programmes that modify the behaviour and content of web pages. CSS decides
how fabric is designed and how it is laid out. The world wide web consortium
(W3C), which previously maintained the HTML standards and now does the
same for the CSS standards, has pushed the use of CSS during the past decade.

CSS

Cascading Style Sheets, or CSS, is a sheet language for describing the

appearance of a page created using a language similar to HTML. In addition to
HTML and JavaScript(JS), CSS is a crucial part of the world wide web.

Layout, colour, and font may all be separated from content using the style sheet
known as CSS. By specifying the relevant CSS in a separate.css file, this
separation can improve the accessibility of the content, give more flexibility and
control when defining presentational characteristics, and enable multiple sites to
share formatting. This separation can also reduce complexity and iteration in the
structural content and enable the.css file to be cached to speed up page load
times between the pages that share the file and its formatting.

The separation of formatting and content also makes it possible to provide the
same markup page in various rendering styles for various rendering methods,
including on-screen, in print, by voice (through a speech-based browser or
screen reader), and on Braille-based tactile devices. If the content is viewable on
a mobile device, CSS has formatting guidelines for different display types.
JS

It's possible that JavaScript, often known as JS, is an ECMAScript-compliant

computer language. High-level, multi-paradigm programming language
JavaScript is frequently just-in-time compiled. This language has first-class
functions, prototype-based object orientation, dynamic typing, and curly-bracket
syntax.

Along with HTML and CSS, JavaScript is one of the fundamental technologies
of the World Wide Web. It is used client-side by over 97 percent of websites for
web page behaviour, frequently incorporating third-party libraries. Most web
browsers come with a specific JavaScript engine that can be used to execute the
code on the user's device.

The multi-paradigm language JavaScript allows for event-driven, functional, or

imperative development. Among other things, it includes APIs for working with
text, dates, regular expressions, common data structures, and the Document
Object Model (DOM).

The ECMAScript standard does not include any input/output (I/O) functions,
such as networking, storage, or graphics. In reality, the web browser or another
runtime system provides JavaScript APIs for I/O.

PHP

PHP is a general-purpose scripting language that is focused on web

development.

On an internet server, PHP code is often processed by a PHP interpreter, which

can be implemented as a module, a daemon, or a conventional Gateway
Interface (CGI) executable. Any form of data, such as generated HTML or
binary image data, might be the result of the interpreted and executed PHP
code, which would make up all or part of an HTTP response on a web server.
The development of that answer can be streamlined or coordinated using a
variety of web template systems, online content management systems, and web
frameworks.

PHP can also be used for a wide range of programming activities unrelated to
the web, like the control of robotic drones and standalone graphical
applications. Direct execution of PHP code is also possible from the command
line.

MySQL

Possibly a free and open-source electronic database management system is

MySQL (RDBMS). A relational database structures data into one or more data
tables where different data kinds can be linked to one another. Programmers can
create, modify, and extract data from relational databases using the
programming language SQL. They can also manage user access.

In addition to relational databases and SQL, an RDBMS like MySQL

collaborates with an operating system to implement an electronic database as
part of a computer's storage system, manages users, permits network access, and
facilitates database integrity testing and backup generation.

In addition to being available as free and open-source software under the terms
of the GNU General Public License, MySQL is also offered under a number of
proprietary licenses. Although MySQL has standalone clients that enable SQL
communication with a MySQL database, it is more typical for MySQL to be
used in conjunction with other programmes to build applications that need the
functionality of relational databases.
GitHub

A company called GitHub, Inc. focuses on Git-based software development and

version control. Distributed version control and ASCII text file management
(SCM) functionality from Git are also included. Every project has collaboration
and access control tools like wikis, task management, continuous integration,
bug tracking, and feature requests. Its headquarters are in California, and as of
2018, it has been a Microsoft subsidiary. It is a well-liked platform for open-
source project hosting.

000webhost

A few helpful features provided by 000webhost, a free website hosting

service, include a website builder, WordPress support, and no
advertisements.
CLICK HERE to visit our website.

XAMPP

The Apache HTTP Server, MariaDB database, and interpreters for PHP and
Perl scripts are the main components of the Apache Friends-created XAMPP
cross-platform web server solution stack. Moving from a local test server to a
live server is simple because most real-world web server deployments employ
the same components as XAMPP.

Data Security
As of today, data security is one the prime concern of every user because if their
data is shared to an unauthorised user, there is a high chance of fraud. The
growth of hackers have led all the IT related companies to spend allot of money
on ensuring that the data of their users are safe.

Data security can be achieved through a variety of means. Hashing is one of

these approaches. A one-way function called hashing creates a distinct message
digest from an input text file or string. There are no keys utilised. The
communication is encoded in such a way that it can only be accessed by those
who have been given permission to do so. In order to prevent unauthorised users
from accessing the data in a file, it is used to render the file unreadable.

In this project, we have used this hashing function on the user’s password, so
even if our database is hacked even then the hacker will not be able to steal the
user password as the password stored in database is in the hash code which
cannot be reversed/converted.

Figure 1: Data Security

Error handling
Error handling is a technique used to alter the normal course of code execution
when an error or other exceptional circumstance arises. This situation is known
as an exception or error. Typically, when an exception is triggered, the
following occurs: - A predetermined(custom) error handler function will take
over code execution.

In order to improve the user experience, developers must be able to handle

errors effectively. Nobody wants to go to a website that is riddled with
problems. Error management is a difficult undertaking that necessitates strong
debugging abilities. There are a variety of ways to handle failures, however we
chose the if else approach in our project. We generated error variables and put
the error message in a string, then we constructed the else block for every if
statement that could result in an error, and the error variable was printed in an
alert box. We'd also like to mention a website, stack overflow, which was really
helpful in resolving the issue.
Figure 2: Exception handling
Chapter 2

ANALYSIS

Due to the ease it offers, many people choose to shop online.

For instance, customers who visit a nearby (physically present) store must drive
there, find a parking space, and then browse the merchandise until they find
what they want to buy. After finding the items they want to purchase, they
might have to wait in lengthy lines at the cash register.

In contrast, an online store can assist buyers in avoiding these drawbacks.

One merely needs to access the Internet, go to the shopping website, and select
the goods they want. Until the buyer is ready to make a purchase, the items are
kept in a virtual shopping cart. The consumers can remain in comfort of their
homes as they accomplishes their shopping, and the process can be completed at
anytime in the morning or late at night with minimal time. Almost never close,
online shops.
Chapter 3

DESIGN

To begin, we looked at a variety of shopping websites and made a list of the

most crucial things to look for in a shopping website. We learned typography,
colour theory, user experience, user interface, and other critical web designer
abilities by reading papers about them.

We designed various paper drawings with web design abilities in mind, which
we would subsequently put into practise with the help of coding. All of the
crucial characteristics that we observed before when browsing other purchasing
websites were included in those designs. We also designed a form that users
will utilise to register for and login to our website. We built a number of pages
that would be connected together.

After finishing the layout of our website, we realised that we needed to create a
logo for it, so we learned how to do it using the canvas tool and made one for
our website.

Creating a design was very helpful for us, it helped us in visualizing the final
website and also acted as a model by which we would be developing the
webpages of our website. All these designs were later implemented with the
help of different languages such as HTML, CSS, JS, PHP, mySQL.
Chapter 4

IMPLEMENTATION

As there were three members in our group and all of us lives in different cities,
it was quite difficult for us to code the website all together as everyone would
be contributing. So, in order have our project smoothly running we found a
solution to our problem i.e. GitHub. We learnt the basics of GitHub and how the
push and pull requests works and later used these features to develop our
website.

To convert our paper designed model into an internet working website, we had
to learn languages such as the HTML and CSS. After learning HTML and CSS
we were able to build our static website with the help of VS Code text Editor.
The next task was to make this website mobile responsive, so in order to
achieve that we wrote different media queries for different screen sizes in the
CSS file.

After finishing up with the responsive design, next task was to learn JS and how
to interact JS with HTML on a web page. We wrote various lines of scripts and
embed it into the html file by the internal JS which included various functions
like onclick(), alert() and also created various user defined functions.

As we see in so many websites nowadays have to login and register forms

embed, so we thought to add that feature in our website too. For that after allot
of surfing on the internet we learnt how it is done. So we learnt basics of PHP
language and mySQL and also installed the Xampp application to run localhost
server on our machine. We created forms(login & register) with the help of
HTML, added post method to the form and name attributes with to the input
tags to access it with PHP language. Then we wrote code in PHP language to
create different checks related to login & register. Also we did the exception
handling part quite well so the user don’t end up with some unexpected result or
error. Then we created a database using myPHPadmin panel on the localhost
and linked it to our project in the config.php file.

After finishing the project, it is always a dream of every person who learns web
development to have his website accessible by everyone just like we search
google.com. So, we found a website called 000webhost which allows to host a
website completely free of cost. So, we created an account on 000webhost and
hosted our PHP & mySQL website after going through some of the tutorials.

Here’s the link to our website:-

https://triad-e-commerce-site.000webhostapp.com/Triad/account.php