Anda di halaman 1dari 16

Online Shopping Website 1BI15CS021

1.1 Introduction
An online store is a website or application by means of which goods are sold over the
internet. The user can search the products, their prices, order and pay for them.

Customer is required to login to the system or he can create an account if he not yet have
one. Customer need to provide specified details while creating an account. Customer can
login to the system to update his account if required.

Customer can browse the product and add the items to shopping cart. If the items customer
ordered is out of stock, then it will be displayed to the customer while selecting the products.
Once the items arrived, the content of number of items available will be updated.

After placing the order, the customer can make sure and distinguish their order by matching
their customer id , transaction id which will be displayed after the customer has placed
his/her order and done the payment in the bill displayed.

1.2 Problem Statement


To develop a Shopping website which can be used to search for different products.
Customers have to just register on the website and then he or she can buy various products
online and enjoy the benefits from the website.

Department of CS&E, BIT 2018-19 1


Online Shopping Website 1BI15CS021

2.1 Description of technologies required for design

Web Applications are dynamic web sites combined with server side programming which provide
functionalities such as interacting with users, connecting to back-end databases, and generating
results to browsers.

Front End Technologies:


There are two main categories of coding, scripting and programming for creating Web
Applications:
1. Client Side Scripting / Coding - Client Side Scripting is the type of code that is
executed or interpreted by browsers. Client Side Scripting is generally viewable by any
visitor to a site.
Below are the client side scripting needed to develop a website.
 HTML(Hyper Text Markup Language):
First developed by Tim Berners-Lee in 1990, HTML is short for Hypertext
Markup Language. HTML is used to create electronic documents (called pages)
that are displayed on the World Wide Web. Each page contains a series of
connections to other pages called hyperlinks.

 CSS(Cascading Style Sheet):


CSS stands for Cascading Style Sheets .CSS describes how HTML elements are
to be displayed on screen, paper, or in other media. CSS saves a lot of work. It
can control the layout of multiple web pages all at oncc. External stylesheets are
stored in CSS files.

 JavaScript:
Javascript is a dynamic computer programming language. It is lightweight and
most commonly used as a part of web pages, whose implementations allow client-
side script to interact with the user and make dynamic pages. It is an interpreted
programming language with object-oriented capabilities.

2. Server Side Scripting / Coding - Server Side Scripting is the type of code that is
executed or interpreted by the web server. Server Side Scripting is not viewable or
accessible by any visitor or general public.
Below are the server side scripting needed to develop a website.
 PHP(Hypertext Preprocessor):
PHP is a server side scripting language. that is used to develop Static websites or
Dynamic websites PHP scripts can only be interpreted on a server that has PHP
installed. The client computers accessing the PHP scripts require a web browser
only.

Department of CS&E, BIT 2018-19 2


Online Shopping Website 1BI15CS021

Back End Technologies:

 MySQL is a popular open source database management system commonly used in


web applications due to its speed, flexibility and reliability. MySQL
employs SQL, or Structured Query Language, for accessing and processing data
contained in databases.

There are many technologies available in order to develop a web application. but the above
mentioned are basics which are mandatory for the web development.

2.2 Front End Requirement Specification

Notepad ++: It is a text editor and source code editor for use with Microsoft Windows. It
supports tabbed editing, which allows working with multiple open files in a single window.
Notepad++ is a free text editor ,it supports HTML, CSS, JavaScript and so on. Following are the
features of notepad++.
 Syntax Highlighting and Syntax Folding.
 User Defined Syntax Highlighting and Folding.
 Search/Replace.
 GUI entirely customizable: minimalist, tab with close button, multi-line
tab, vertical tab and vertical document list.
 Document Map.
 Auto-completion: Word completion, Function completion and Function
parameters hint.
 Multi-Document (Tab interface).
 Multi-View.
 Zoom in and zoom out.

2.3 Back End Requirement Specification

XAMPP: is a free and open-source cross-platform web server solution stack package
developed by Apache Friends,consisting mainly of the Apache HTTP Server, MariaDB database,
MySQL and interpreters for scripts written in the PHP and Perl programming languages. Since
most actual web server deployments use the same components as XAMPP, it makes transitioning
from a local test server to a live server possible.

It provides a MySQL platform in order to create databases, tables and allow to access the stored
data both in tabular and non tabular form. It has user friendly interface which help us to
understand the software and how to use that.

Department of CS&E, BIT 2018-19 3


Online Shopping Website 1BI15CS021

3.1 Architecture

The first column of the architecture denotes the Front End Client side programming section. This
section includes various HTML tags like div, anchor, form, title etc. These tags are specified
under either head or body tags of HTML page. These basically define the layout of the page. The
other part of this section includes the CSS(Cascading style sheets) which are used for the sole
purpose of styling the web page to make it look more interactive and eye-catching. The last part
under this section is the JavaScript .These are basically used to perform actions on the basis of
how a user operates the web page or performs certain events like clicking on a button to change
page.
The second column is the Server side programming section. This section mainly deals
with the data retrieval and updating which is generally done using GET and POST methods in
the forms. Any PHP code in a requested file is executed by the PHP runtime, usually to create
dynamic web page content or dynamic images used on websites or elsewhere. The php code is
written between “<?php” and “?>”.
The last column denotes the database section. This section deals with storage of data
from websites and retrieving and updating the data as per operations done on the website like
storing username and password and validating them during login by fetching them from
database. The database are initially connected to the web pages using certain commands before
they can be used by the website.

Department of CS&E, BIT 2018-19 4


Online Shopping Website 1BI15CS021

3.2 Major Modules

 LOG-IN –The user need to use their user-id and password to log in so that they can have
their so that they can have their choice stored at a particular place and they needn’t select
products every time. The user will be logged in after his enter username and password are
successfully matched from the database.

Implementation Logic:
1. Username (Textbox): User enters username and it is validated if the username exists
or not. This is a required field.
2. Password (Textbox): User enters password and it is a password type text because it is
non-viewable.
3. Submit (Button): Credentials are submitted and verified. If verification successful
then the user is redirected to home page otherwise message is shown of incorrect
details.

 SIGNUP –Any new user can create an account or register in “Shopkart”. He can do so by
providing his details such as email id , name , phone number , address . Once the user has
entered his credentials, they will be stored in the database for future reference.

Implementation Logic:
1. User details (Textboxes) :The user enter the details as per requested.
2. Submit (Button): The user clicks the button to store his details in the database if all
the fields are correctly entered otherwise an error message to enter all fields is
displayed.

 CART -The user can select a particular product and add it to the cart. The users can add
multiple products to the cart for easy transaction. The cart functionality helps the users to
select a product and and leave it inside the cart. Thus he can decide later on what to do
rather than again searching and adding the product to the cart.

Implementation Logic:
1. Number of items (Textbox): The user can enter the quantity of items he wants to buy.
2. Payment (Radio button): The user can check the mode of payment.

 REMOVE – The user can remove the products added to the cart by clicking on the
removing button provided to remove a product from cart. This functionality helps the
user to remove the excessive products which he may have accidentally entered. He can
do this by clicking on the button provided there.

Department of CS&E, BIT 2018-19 5


Online Shopping Website 1BI15CS021

Implementation Logic:
1. Delete (Button): The user can remove an unwanted product from the cart by clicking
on this button.

 CHECKOUT - The user can purchase the products by adding them to cart. He can then
pay the amount by selecting the mode of payment specified in the page where the amount
is displayed. Thus after checking on any of the mode of payment he can click the
checkout button and complete his transaction.

Implementation Logic:
1. Checkout (Button): The user clicks on this button to finalize his transaction .

Department of CS&E, BIT 2018-19 6


Online Shopping Website 1BI15CS021

4.1 Implementation

Implementation of silk industry website is done by using the technologies like HTML,CSS,
Javascript ,PHP and MySQL(XAMPP).

Basic html tags such as <table>,<ul>,<ol>,<p>,<a>,<div>,<nav>,<body> etc are used to write


the contents into the website.

 Index.php

<html>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li><a href="index.php"><span class="glyphicon glyphicon-
home"></span>Home</a></li>
<li><a href="index.php"><span class="glyphicon glyphicon-
modal-window"></span>Product</a></li>
</ul>
<!--<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search"
id="search">
</div>
<button type="submit" class="btn btn-primary" id="search_btn"><span
class="glyphicon glyphicon-search"></span></button>
</form>-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#" class="dropdown-toggle" data-
toggle="dropdown"><span class="glyphicon glyphicon-shopping-cart"></span>Cart<span
class="badge">0</span></a>
<div class="dropdown-menu" style="width:400px;">
<div class="panel panel-success">
<div class="panel-heading">
<div class="row">
<div class="col-md-3">Sl.No</div>
<div class="col-md-3">Product Image</div>
<div class="col-md-3">Product Name</div>
<div class="col-md-3">Price in $.</div>
</div>
</div>
<div class="panel-body">
<div id="cart_product">
<div class="row">
<div class="col-md-3">Sl.No</div>
<div class="col-md-3">Product Image</div>
<div class="col-md-3">Product Name</div>
<div class="col-md-3">Price in $.</div>
Department of CS&E, BIT 2018-19 7
Online Shopping Website 1BI15CS021

</div>
</div>
</div>
<div class="panel-footer"></div>
</div>
</div>
</li>
<li><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span
class="glyphicon glyphicon-user"></span>SignIn</a>
<ul class="dropdown-menu">
<div style="width:300px;">
<div class="panel panel-primary">
<div class="panel-heading">Login</div>
<div class="panel-heading">
<form onsubmit="return false" id="login">
<label for="email">Email</label>
<input type="email" class="form-control"
name="email" id="email" required/>
<label for="email">Password</label>
<input type="password" class="form-
control" name="password" id="password" required/>
<p><br/></p>
<!--<a href="#" style="color:white; list-
style:none;">Forgotten Password</a>--><input type="submit" class="btn btn-success"
style="float:right;">
</form>
</div>
<div class="panel-footer" id="e_msg"></div>
</div>
</div>
</ul>
</li>
</ul>
</div></html>

 Inline CSS along with External CSS are used to style the html tags so that the content of
the website looks neatly and attractively. this makes the website userfriendly.
<style>
.button {
background-color: blue;
border: none;
color: white;
padding: 15px 25px;
text-align: center;
font-size: 16px;
cursor: pointer;
Department of CS&E, BIT 2018-19 8
Online Shopping Website 1BI15CS021

.button:hover {
background-color: green;
}
</style>

 Conn.php

PHP is used as server side scripting in order to connect to a database .MySQL is compatible
with PHP and xampp is used to provide both server to run php and database management
system.

<?php
$servername="localhost";
$username="root";
$pwd="";
$dbname="database_name";
$conn=mysqli_connect($servername,$username,$pwd,$dbname);
if($conn->connect_error)
die("connection failed:".$conn->connect_error);
$sql="SELECT * FROM cart";
$result=$conn->query($sql);

?>

 Login.php
<?php
#this is Login form page , if user is already logged in then we will not allow user to
access this page by executing isset($_SESSION["uid"])
#if below statment return true then we will send user to their profile.php page
if (isset($_SESSION["uid"])) {
header("location:profile.php");
}
//in action.php page if user click on "ready to checkout" button that time we will pass
data in a form from action.php page
if (isset($_POST["login_user_with_product"])) {
//this is product list array
$product_list = $_POST["product_id"];
//here we are converting array into json format because array cannot be store in
cookie
Department of CS&E, BIT 2018-19 9
Online Shopping Website 1BI15CS021

$json_e = json_encode($product_list);
//here we are creating cookie and name of cookie is product_list
setcookie("product_list",$json_e,strtotime("+1 day"),"/","","",TRUE);

}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Shop Kart</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/jquery2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wait overlay">
<div class="loader"></div>
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">Khan Store</a>
</div>
<ul class="nav navbar-nav">
<li><a href="index.php"><span class="glyphicon glyphicon-
home"></span>Home</a></li>
<li><a href="index.php"><span class="glyphicon glyphicon-
modal-window"></span>Product</a></li>
</ul>
</div>
</div>
<p><br/></p>
<p><br/></p>
<p><br/></p>
<div class="container-fluid">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" id="signup_msg">
<!--Alert from signup form-->

Department of CS&E, BIT 2018-19 10


Online Shopping Website 1BI15CS021

</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Customer Login Form</div>
<div class="panel-body">
<!--User Login Form-->
<form onsubmit="return false" id="login">
<label for="email">Email</label>
<input type="email" class="form-control"
name="email" id="email" required/>
<label for="email">Password</label>
<input type="password" class="form-
control" name="password" id="password" required/>
<p><br/></p>
<a href="#" style="color:#333; list-
style:none;">Forgotten Password</a><input type="submit" class="btn btn-success"
style="float:right;" Value="Login">
<!--If user dont have an account then he/she
will click on create account button-->
<div><a
href="customer_registration.php?register=1">Create a new account?</a></div>

</form>
</div>
<div class="panel-footer"><div id="e_msg"></div></div>
</div>
</div>
<div class="col-md-4"></div>
</div>
</body>
</html>

Department of CS&E, BIT 2018-19 11


Online Shopping Website 1BI15CS021

5.1 Testing

S.No. Module Expectation/Operation Actual Status


Name
1 Successful
Sign up Filling all details Filled
Signup
Error message
Not Filled all
Filling all details “Please fill all
details
fields..!”
2 Username and password Username:null and Error “Please fill
Login
fields not entered password:null out this field”
Valid username
Username and password
and password of Successful login
fields entered
registered user
Invalid Username
and password
(either mismatch
of username and Error “Invalid
Username and password
password or username and
fields entered
entering wrong password”
details)

3 Product added to cart on


Product added to Product added to
Cart clicking the “Add to cart”
cart cart
button
Total amount of
Changing the quantity of a Numerical value
the order is
product inside the textbox written in textbox
updated
4 Product to be
Clicking on the remove Product removed
Remove removed from the
button from the cart
cart
5 Page to be
Clicking on the checkout redirected to Page redirected to
Checkout button to complete transaction transaction
transaction successfully successful page
completed page

Department of CS&E, BIT 2018-19 12


Online Shopping Website 1BI15CS021

6.1 Applications
 This project can be extended to any other Industries and companies.
 This project can be used to view different products.
 This project can be used to view various categories available.
 This project can be used by user to store his useful products in cart.
 This can be used as an interface for any shop.

6.2 Conclusion
This application was designed to address the various inadequacies we identified in the
existing systems such as lack as centralization, lack of ease, and disregard for the back-
end user. Hopefully this newly designed system not only addresses the problems
effectively but also inspires further innovation in the field of user interfaces and data
transparency.

Department of CS&E, BIT 2018-19 13


Online Shopping Website 1BI15CS021

7.1 Home Page

Fig.1

7.2 Registration Page

Fig.2

Department of CS&E, BIT 2018-19 14


Online Shopping Website 1BI15CS021

7.3 Login Page

Fig.3

7.4 Cart

Fig.4

Department of CS&E, BIT 2018-19 15


Online Shopping Website 1BI15CS021

7.5 Transaction Successful page

Fig.5

Department of CS&E, BIT 2018-19 16

Anda mungkin juga menyukai