Académique Documents
Professionnel Documents
Culture Documents
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.
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.
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.
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.
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.
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.
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.
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.
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 .
4.1 Implementation
Implementation of silk industry website is done by using the technologies like HTML,CSS,
Javascript ,PHP and MySQL(XAMPP).
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-->
</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>
5.1 Testing
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.
Fig.1
Fig.2
Fig.3
7.4 Cart
Fig.4
Fig.5