COLLEGE OF TECHNOLOGY AND ENGINEERING

MAHARANA PRATAP UNIVERSITY OF AGRICULTURE &

TECHNOLOGY
Udaipur (Raj.)

A
Training Report
On
Web Development

submitted in partial fulfilment for the award of the Degree of Bachelor of Technology in
Department of Electronics and Communication Engineering
Session (2020-2021)

SUBMITTED TO: SUBMITTED BY:

Dr. Navneet Kumar Agrawal Tanvi Karad
Head of Department (ECE) B.Tech Second Year
Electronics and Communication
Engineering
 ACKNOWLEDGEMENT

Until it is finished, this work cannot be considered an individual contribution. I would want to

take this time to show my sincere gratitude to my teacher for all of the outstanding advice,

inspiration, and encouragement they have given me during the training process. Without their

vital advice, this work would not have been a success.

I want to sincerely thank the faculty and personnel of the department for their support.

Additionally, I want to thank all of my classmates for their insightful advice and beneficial

discussions.

I also want to express our gratitude to our parents for supporting our college education and

for never giving up on our desire to become engineers. Their sacrifice in providing this

opportunity to learn engineering is gratefully acknowledged.

2
 DECLARATION

I hereby declare that I have undertaken eight weeks of training at INTERNSHALA during a

period from 1st July to 12th August, the Project titled “Web Development” was created by

me and has not been copied from any other source. It has not been submitted anyplace else

for the award of any other degree. It has been submitted in partial fulfilment of the

requirement for the award of the Bachelor of Technology in Electronics and Communication

Engineering, MPUAT Udaipur.

3
Certificate for Training Completion

4
 TABLE OF CONTENTS

Topics Page no.

Acknowledgement …………………………………………………….. 2
Declaration…………………………………………………………………. 3
Certificate…………………………………………………………………… 4
Abbreviation………………………………………………………………. 8
Abstract ……………………………………………………………………. 9
CHAPTER 1: INTRODUCTION

1.1 Introduction to Web Development……………………………………. 10

1.2 Software Used…………………………………………………………………... 11

CHAPTER 2: TRAINING WORK UNDERTAKEN

2.1.0 HTML……………………………………………………………………………. 12

2.1.1 HTML Introduction………………………………………………............. 12

2.1.2 HTML Page Structure……………………………………………….......... 12

2.1.3 Tags and Elements…………………………………………………........... 13

2.1.4 Text Formatting……………………………………………………............. 13

2.1.5 Hyperlinks………………………………………………………..………………. 14

2.1.6 Cascading Style Sheets (CSS)............................................. 14

2.1.7 Box Model…………………………………………………………................. 15

2.1.8 Fonts………………………………………………………………………………….. 15

2.1.9 Navigation Bar……………………………………………………………………. 15

2.1.10 Forms………………………………………………………………………………. 16

2.1.11 Assignment……………………………………………………….................. 16

2.1.12 Output………………………………………………………………………………. 21

2.2.0 BOOTSTRAP……………………………………………………................... 22

5
 2.2.1 Breakpoints………………………………………………............................ 23

2.2.2 Jumbotrons and Glyphicons……………………………………………….. 23

2.2.3 Thumbnails…………………………………………………………………………. 24

2.2.4 Forms…………………………………………………………………………………. 25

2.2.5 Assignment………………………………………………………………………… 26

2.2.6 Output……………………………………………………………………………….. 44

2.3.0 STRUCTURED QUERY LANGUAGE (SQL)............................... 46

2.3.1 SQL Introduction…………………………………………………................. 46

2.3.2 Introduction to DBMS……………………………………………............... 46

2.3.3 Creating Database………………………………………………................... 46

2.3.4 Data Definition Language (DDL)................................................ 47

2.3.5 Alter and Drop…………………………………………………….................... 48

2.3.6 Foreign Key & Truncate…………………………………………................. 49

2.3.7 Data Manipulation Language (DML).......................................... 50

2.3.8 Assignment…………………………………………………………..................... 51

2.3.9 Output…………………………………………………………….......................... 52

2.4.0 PHP (Hypertext Preprocessor)................................................. 53

2.4.1 PHP Introduction…………………………………………………...................... 53

2.4.2 Basics……………………………………………………………............................. 53

2.4.3 Variables, Data types and Operators………………………..........………. 53

2.4.4 Function, Array and Strings……………………………………….................. 54

2.4.5 Loops………………………………………………………………............................ 56

CHAPTER 3 PROJECT RESULT AND DISCUSSION

3.1 Coding……………………………………………………………..............................… 57

3.2 Output………………………………………………………..............................……. 77

3.3 Discussion……………………………………………………...........................……… 81

6
CHAPTER 4 PROJECT CONCLUSION

4.1 Conclusion………………………………………………………….......................... 82

References………………………………………………………………………………………… 83

7
 ABBREVIATION

HTML – Hypertext Markup Language

CSS – Cascaded Style Sheets

SQL – Structured Query Language

JS – JavaScript

PHP –Hypertext Preprocessor

8
 ABSTRACT

The goal of this bachelor's thesis was to create a WordPress website for the client that was

optimised for mobile use. The development's major goal was to become familiar with

website design fundamentals and build a responsive website that would work on both

desktop and mobile devices. The requirements document for the website was created

before the development process ever started. The following stage was to learn how to build

a website layout and select the site's colour palette. The website was built using

Wampserver, Bootstrap, and NetBeans IDE 8.2 RC. The website's outcome was what was

anticipated. The website scaled across all of the various platforms, and all of the necessary

conditions were met.

9
 CHAPTER 1: INTRODUCTION

1.1 WEB DEVELOPMENT

Web development is the work involved in developing a Web site for the Internet (World Wide
Web) or an intranet (a private network). Web development can range from developing a
simple single static page of plain text to complex Web-based Internet applications (Web apps),
electronic businesses, and social network services. A more comprehensive list of tasks to
which Web development commonly refers, may include Web engineering, Web design, Web
content development, client liaison, client-side/server-side scripting, Web server and network
security configuration, and e-commerce development.

Among Web professionals, "Web development" usually refers to the main non-design aspects
of building Web sites: writing markup and coding. Web development may use content
management systems (CMS) to make content changes easier and available with basic
technical skills.

For larger organizations and businesses, Web development teams can consist of hundreds of
people (Web developers) and follow standard methods like Agile methodologies while
developing Web sites. Smaller organizations may only require a single permanent or
contracting developer, or secondary assignment to related job positions such as a graphic
designer or information systems technician. Web development may be a collaborative effort
between departments rather than the domain of a designated department. There are three
kinds of Web developer specialization: front-end developer, back-end developer, and full-
stack developer. Front-end developers are responsible for behaviour and visuals that run in
the user browser, while back-end developers deal with the servers.

10
1.2 SOFTWARE USED

1) NETBEANS:

NetBeans is an integrated development environment (IDE) for Java. NetBeans allows

applications to be developed from a set of modular software components called modules.
NetBeans runs on Windows, macOS, Linux and Solaris. In addition to Java development, it has
extensions for other languages like PHP, C, C++, HTML5, and JavaScript. Applications based on
NetBeans, including the NetBeans IDE, can be extended by third party developers.

2) BOOTSTRAP:

Bootstrap is a free and open-source CSS framework directed at responsive, Mobile-first front-
end web development. It contains CSS- and (optionally) JavaScript-based design templates for
typography, forms, buttons, navigation, and other interface components. Bootstrap is the
seventh-most-starred project on GitHub, with more than 142,000 stars, behind free Code
Camp (almost 312,000 stars) and marginally behind Vue.js framework.

3) WAMPSERVER:

WampServer refers to a solution stack for the Microsoft Windows operating system, created
by Romain Bourdon and consisting of the Apache web server, OpenSSL for SSL support, MySQL
database and PHP programming language.

11
 CHAPTER 2: TRAINING WORK UNDERTAKEN

HTML & CSS, BOOTSTRAP, SQL, PHP

2.1.0 HTML (FRONT END DEVELOPMENT)

2.1.1 HTML INTRODUCTION

HTML stands for HyperText Markup Language. (HTML) is the standard markup language for
documents designed to be displayed in a web browser. It can be assisted by technologies such
as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. HTML is used to
design the structure of a web page. It is a set of instructions on how to display content on a
web page. With HTML constructs, images and other objects such as Interactive forms may be
embedded into the rendered page. HTML provides a means to create structured documents
by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and
other items. HTML documents are written in html editors. Since the html document is written
in plain, we can use any text editor. Ex: notepad, notepad++, sublime text, eclipse, NetBeans
etc.

2.1.2 HTML PAGE STRUCTURE

<!DOCTYPE html>

<!- -
Add your comments here
-- >

<html>

<head>

<title> </title>

</head>

<body>

</body>

</html>

12
2.1.3 TAGS AND ELEMENTS

HTML TAGS:

HTML tags are the hidden keyword within a web page that define how the browser must
format and display the contents. Most of these tags have 2 parts: opening tag and closing tag.

<p>: Opening Tag </p>: Closing Tag

Opening Tag and Closing Tag together are called as a Container.

<html>

Tags are used to inform the browser how to format or display the text, except for the
declaration of document type and comment. Comments can be included with html tags also.

<body>

It contains all the visible contents of the page. It may include texts, links and tables, or videos.

<div>
It is used to create different sections in a web page.

2.1.4 TEXT FORMATTING

There are six different heading tags.

<h1> I am Heading </h1>

I am Heading
<h2> I am Heading </h2>

I am Heading

13
Number defines the size of the text.
<i>: Tag to make text look italic.
<strong>: Tag to make text look bold.
<em>: Tag to make text look italic. (Important italic)

These tags help the browser know about the special importance of text, not just styling. It also
helps in SEO purposes.
<u>: Tag element is used to underline text.
<mark>: Tag element is used to highlight text.

2.1.5 HYPERLINKS

Any content, image or text can be linked to a new page. The text linked is called anchor text.
Link is created using html <a> click here </a> link.
href= “hypertext reference” <a href = “” >click here</a>
target= “_blank”
<a href = “link” target= “_blank” >
This will open in another tab.
target = “_self”
<a href = “link” target = “_self”>
This will open in the same tab.

2.1.6 CASCADING STYLE SHEETS (CSS)

Cascading Style Sheets is a style sheet language used for describing the presentation of a
document written in a markup language such as HTML. CSS is a cornerstone technology of the
World Wide Web, alongside HTML and JavaScript.
There are three ways of Styling:
1) Inline 2) Internal 3) External

14
2.1.7 BOX MODEL

❖ Each and every element can be considered as a box.

❖ Innermost box called content contains content which could be image, text.

❖ Padding clears the area around the content. It is always transparent.

❖ Padding is surrounded by a border whose colour can be chosen.

❖ Margin clears the area outside the border. Default margin is 0. Margin is also transparently
applied.

2.1.8 FONTS

Properties:
1) Font Style 2) Font Variant 3) Font weight 4) Font Size 5) Line height 6) Font family
Font size and Font family are mandatory.
For Ex: h4 {font: italic small-caps bolder 28px arial, sans-serif;}
Comma is used in font family if there is unavailability of any font.

2.1.9 NAVIGATION BAR

Navigation Bar and logo are together often referred to as a header. Navigation bar links
different sections within a page.

15
Navigation links are added using the <nav> tag. Using the <ul> tag inside the <nav> tag we can
create a navigation bar.

To create logo in navigation bar:

<div id= “header”>
<a href = “#” class = “logo”>
<img src = “./img/logo.jpg” alt = “image”>
</a>
</div>

2.1.10 FORMS

It collects information stored in databases or sent to the server. Using the

element to create form.
<form>
<input type= “text” placeholder = “Enter first Name” name = “First name”><br><br>
<input type = “Submit”>

2.1.11 ASSIGNMENT
★ TO CREATE AN INDEX PAGE FOR AN ECOMMERCE WEBSITE.

1)index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome | Life Style Store</title>
<!-- Custom CSS -->
<link href="index.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="inner-header">

16
 <div class="logo"><a href="#">Lifestyle Store</a></div>
<div class="header-link"><a href="#">Login</a></div>
<div class="header-link"><a href="#">Sign up</a></div>
</div>
</div>

<div class="content">
<!--Main banner image-->
<div class = "banner_image">
<div class="inner-banner-image">
<center>
<div class="banner_content">
<h1>We sell lifestyle.</h1>
<p>Flat 40% OFF on premium brands </p>
<br/>
<a href="products.html" class="button">Shop
Now</a>
</div>
</center>
</div>
</div>
<!--Main banner image end-->
<!--Item categories listing-->
<div class="container">
<div class="items">
<a href="#" >
<img src="./camera.jpg" alt="" class="thumbnail">
<div class="caption">
<h2>Cameras</h2>
<p>Choose among the best available in the
world.</p>
</div>
</a>
</div>
<div class="items">
<a href="" >
<img src="./watch.jpg" alt="" class="thumbnail">
<div class="caption">
<h2>Watches</h2>
<p>Original watches from the best brands.</p>
</div>
</a>
</div>
<div class="items">
<a href="" >
<img src="./shirt.jpg" alt="" class="thumbnail">
<div class="caption">
<h2>Shirts</h2>
<p>Our exquisite collection of shirts.</p>

17
 </div>
</a>
</div>
</div>
</div>
<!--Item categories listing end-->

<!--Footer-->
<footer>
<div class="container">
<center>
<p>Copyright &copy; Lifestyle Store. All Rights
Reserved | Contact Us: +91 90000 00000</p>
</center>
</div>
</footer>
<!--Footer end-->

</body>
</html>

2)index.css

body{
width: 100%;
height: 100%;
margin: 0;
}

.header{
background-color:#000;
color:#fff;
border-color: #080808;
min-height: 50px;
border: 1px solid transparent;
}

.inner-header{
width:80%;
margin:auto;

18
}

a{
text-decoration: none;
background-color: transparent;
color:#ededed;
}

.logo{
float: left;
height: 50px;
padding: 15px;
font-size: 20px;
font-weight: bold;
}

.header-link{
float:right;
font-size:14px;
height: 50px;
padding: 15px 15px;
font-size:16px;
font-weight: bold;
}

.content{
min-height: 600px;
}

.banner_image {
padding-bottom: 50px;
margin-bottom: 20px;
text-align: center;
color: #f8f8f8;
background: url(./intro-bg_1.jpg) no-repeat center;
background-size: cover;
}

.inner-banner-image{
padding-top: 12%;
width:80%;
margin:auto;
}

.banner_content {
position: relative;
padding-top: 6%;
padding-bottom: 6%;
overflow:hidden;

19
 margin-bottom: 12%;
background-color: rgba(0, 0, 0, 0.7);
max-width: 660px;
}

.container{
width:90%;
margin:auto;
overflow:hidden;
}

.items{
width:30%;
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
float:left;
margin-left:1%;
}

.thumbnail{
display: block;
max-width: 100%;
height: auto;
}

.caption{
color:#000;
padding:0px 10px 10px;
font-weight: bold;
text-align: center;
}

footer{
background-color: #000;
color:#fff;
font-size:14px;
}

.button{
color: #fff;
background-color: #c9302c;
border-color: #ac2925;
padding: 10px 16px;
font-size: 18px;

20
 line-height: 1.3333333;
border-radius: 6px;

2.1.12 OUTPUT:

★ INDEX PAGE:

21
 BOOTSTRAP

2.2.0 BOOTSTRAP INTRODUCTION (FRONT END DEVELOPMENT)

Bootstrap is a free and open-source CSS framework directed at responsive, mobile first
front-end web development. It contains CSS and JavaScript-based design templates for
typography, forms, buttons, navigation, and other components.

Bootstrap is one of the simplest to implement and use in the market. Its implementation is
as simple as importing a CSS and using the classes available. Bootstrap’s responsiveness
makes it all much simpler. It can intelligently sense the device’s resolution and screen width
and adjust the content accordingly. Bootstrap is supported by the huge open-source
community present on GitHub. Any bugs or issues are resolved in no time for the releases.

Linking JavaScript File (jQuery):

JavaScript is used to make the page more dynamic, to add effects, animation etc. JavaScript
files in the JS folder of bootstrap are used to add predefined JavaScript functions in the html
code. Script element in html is used to embed script within an html document.

<script type = “text”/JavaScript src = “bootstrap/js/bootstrap.min.js”></script>

★ Second method to link Bootstrap file:

“https://max.edn.bootstrapedn.com/bootstrap/3.3.7/css/bootstrap.min.js”

“https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery/1.12.4/jquery.min.js”

“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”

22
2.2.1 BREAKPOINTS

MULTIPLE CLASSES:

It is one of the best ways of defining complex web pages layout and design. At times we have
to make minor changes in an element while keeping everything else just the same. This can
be achieved using multiple classes on the element we plan to make changes to. Use of
multiple classes on an element is a core part of designing web pages using BOOTSTRAP,
Bootstrap has a number of predefined classes.

BREAKPOINTS IN BOOTSTRAP:

DEVICES BREAKPOINT

Large Devices >=1200px

Medium Devices 992px to 1199px

Small Devices 768px to 991px

Extra Small Devices <768px

2.2.2 JUMBOTRON AND GLYPHICONS

Jumbotron is a big box for calling extra attention to some special attention content or
information. Class Jumbotron is used to create jumbotrons. It is represented in grey box and
round colors. It also enlarges the text inside it. Jumbotron takes the full width of the
element.

<body>

<div class = “container”>

<h1>This is a jumbotron</h1>

<div class = “jumbotron”>

23
This is a jumbotron
We can also insert tables, content, text etc inside a jumbotron.

GLYPHICONS: It is the icon displayed on any web page.

<body>

<div class = “container”>

<h3>search</h3>

<h3 search <span class = “glyphicon glyphicon_search” </span></h3>

2.2.3 THUMBNAILS
Thumbnails are reduced versions of audio and videos.
Thumbnails take the available width.
<div class = “container”>
<h1>Thumbnails</h1>
<div class = “col-sm-4”>
<a href = “#”> <img src = “img path” alt = “Responsive image”> </a>
Adding tag to make thumbnails clickable.
Thumbnails are treated as links using anchor tags.
.thumbnail {
padding:4px;
border:1px solid #ddd;
border-radius:4px;
}
To add content in thumbnail;
<div class = “content”>
<h3> </h3>
<p> </p>
</div>

24
2.2.4 FORMS

FORM STYLING:
<div class = “container”>
<div class = “row”>
<div class = “col-xs-4”>
<h1>Styling forms</h1>
By default, form-control class can take the entire width for the element.
<form>
<div class = “form_group”>
<input type = “text” class = “form-control” name = “first_name placeholder = “first_name”>
</div>

.form-group {
margin-bottom:5px;
}
To stop users from entering data add disabled attributes.
To make the first name and last name appear above the input field use <label> tag.
<div class = “form_group”>
<label = “first-name”>First Name </label>
<input type = “text” class = “form-control” name = “first_name”>
</div>

STYLING CHECKBOXES AND RADIO BUTTONS:

<div class = “checkbox”>
I want to order:
<label>
<input type = “checkbox” name = “food” value= “coffee” checked>Coffee
</label>
</div>

.label {
padding-left:20px;
margin-bottom:20px;}

25
2.2.5 ASSIGNMENT
★ TO BUILD ALL THE MAIN PAGES OF THE ECOMMERCE WEBSITE USING BOOTSTRAP
FRAMEWORK.

1)index.html:

<!DOCTYPE html>
<html>
<head>
<title>LIFESTYLE STORE</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="stylesheet" href="style.css" type="text/css"/>

<!--jQuery library-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></scri
pt>

<!--Latest compiled and minified JavaScript-->

<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></sc
ript>
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Lifestyle
Store</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">

26
 <li><a href="signup.php"><span class="glyphicon
glyphicon-user"></span> Sign Up</a></li>
<li><a href="login.php"><span class="glyphicon
glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<div id="banner_image">
<div class="container">
<div id="banner_content">
<h1>We sell lifestyle</h1>
<p>Flat 40% OFF on all premium brands</p>
<a href="products.html" class="btn btn-danger btn-lg
active">Shop Now</a>
</div>
</div>
</div>
<a href="login.html">loginpage</a>
<div id="content">
<div class="container-fluid decor_bg" id="login-panel">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary" >
<div class="panel-heading">
<h4>LOGIN</h4>
</div>
<div class="panel-body">
<p class="text-warning"><i>Login to make a
purchase</i><p>
<form role="form" action="login_submit.html"
method="POST">
<div class="form-group">
<input type="email" class="form-
control" placeholder="Email" name="e-mail" required>
</div>
<div class="form-group">
<input type="password" class="form-
control" placeholder="Password" name="password" required>
</div>
<button type="submit" name="submit"
class="btn btn-primary">Login</button><br><br>
</form><br/>
</div>
<div class="panel-footer"><p>Don't have an
account? <a href="signup.html">Register</a></p></div>
</div>
</div>
</div>

27
 </div>
</div>
<a href="./signuppage.html"></a>
<div class="container">
<div class="row row_style">
<div class="col-xs-5 col-lg-offset-2">
<form>
<h2>SIGN UP</h2>
<div class="form-group">
<input type="text" class="form-control"
placeholder="Name" name="Name">
</div>
<div class="form-group">
<input type="e-mail" class="form-control"
placeholder="E-mail" name="E-mail">
</div>
<div class="form-group">
<input type="password" class="form-control"
placeholder="Password" name="Password">
</div>
<div class="form-group">
<input type="contact" class="form-control"
placeholder="Contact" name="Contact">
</div>
<div class="form-group">
<input type="text" class="form-control"
placeholder="City" name="City">
</div>
<div class="form-group">
<input type="text" class="form-control"
placeholder="Address" name="Address">
</div>
<button class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron jumbotron_style">
<h1>Welcome to our Lifestyle store!</h1>
<p> We have the best cameras,watches and shirts for you.No
need to hunt it around,we have all in one
place.
</p>
</div>
<a href="./productspage.html"></a>
<div class="padding-20"></div>
<div class="row text-center">
<div class="col-md-3 col-sm-6">

28
 <div class="thumbnail">
<img src="./2.jpg" alt="Nikon">
<div class="caption">
<h3>Nikon NX21</h3>
<p>Rs.36000.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 ">
<div class="thumbnail">
<img src="./3.jpg" alt="Sony">
<div class="caption">
<h3>Sony LDS</h3>
<p>Rs.32000.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6 ">

<div class="thumbnail">
<img src="./4.jpg" alt="cannon">
<div class="caption">
<h3>Cannon EDS70D</h3>
<p>Rs.29000.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 ">
<div class="thumbnail">
<img src="./5.jpg" alt="Panasonic">
<div class="caption">
<h3>Lumix2</h3>
<p>Rs.33000.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="./10.jpg" alt="watch">
<div class="caption">
<h3>Y&K</h3>
<p>Rs.3000.00</p>
<button class="add-to-cart">Add to Cart</button>

29
 </div>
</div>
</div>
<div class="col-md-3 col-sm-6 ">
<div class="thumbnail">
<img src="./18.jpg">
<div class="caption">
<h3>Casio G-Shock</h3>
<p>Rs.6000.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6 ">

<div class="thumbnail">
<img src="./19.jpg" alt="Watch">
<div class="caption">
<h3>Omega</h3>
<p>Rs.2000.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 ">
<div class="thumbnail">
<img src="./20.jpg" alt="Watch">
<div class="caption">
<h3>Diesel 3bar</h3>
<p>Rs.3300.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="./13.jpg" alt="Tommy">
<div class="caption">
<h3>Tommy Hilfigher</h3>
<p>Rs.3600.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6 ">

<div class="thumbnail">

30
 <img src="./23.jpg" alt="U.S.Polo">
<div class="caption">
<h3>U.S. Polo</h3>
<p>Rs.970.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6 ">

<div class="thumbnail">
<img src="./24.jpg" alt="cannon">
<div class="caption">
<h3>Allen Solly</h3>
<p>Rs.2900.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 ">
<div class="thumbnail">
<img src="./25.jpg">
<div class="caption">
<h3>UCB</h3>
<p>Rs.960.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>

</div>
<div class="padding-20"></div>
</div>
<div class="row decor_bg">
<div class="col-md-6 col-md-offset-3">
<table class="table table-striped">
<thead>
<tr>
<th>Item Number</th>
<th>Item Name</th>
<th>Price</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td><td>Total</td><td>Rs </td><td><a
href='success.html' class='btn btn-primary'>Confirm Order</a></td>
</tr>

31
 </tbody>
</table>
</div>
</div>
<div class="container-fluid" id="content">
<div class="row">
<div class="col-lg-4 col-lg-offset-4" id="settings-container">
<h4>Change Password</h4>
<form action="settings_script.html" method="POST">
<div class="form-group">
<input type="password" class="form-control"
name="old-password" placeholder="Old Password" required>
</div>
<div class="form-group">
<input type="password" class="form-control"
name="password" placeholder="New Password" required>
</div>
<div class="form-group">
<input type="password" class="form-control"
name="password1" placeholder="Re-type New Password" required>
</div>
<button type="submit" class="btn btn-
primary">Change</button>
</form>
</div>
</div>
</div>
<div class="container-fluid" id="content">
<div class="col-md-12">
<div class="jumbotron">
<h3 align="center">Your order is confirmed. Thank you for
shopping with us.</h3><hr>
<p align="center">Click <a href="products.html">here</a>
to purchase any other item.</p>
</div>
</div>
</div>
<footer>
<div class="container">
<center>
Copyright © Lifestyle Store. All Rights Reserved and Contact
Us: +91 90000 00000
</center>
</div>
</footer>
</body>
</html>

32
2)style.css:

.navbar {
background-color:#000;
color:#fff;
border-color: #080808;
min-height: 50px;
border: 1px solid transparent;
}

.row {
margin-right: -15px;
margin-left: -15px;
}

.col-sm-4 {
padding: 5px;
}

.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}

.caption {
color:#000;
padding:0px 10px 10px;
font-weight: bold;
text-align: center;
}

#banner_image {
padding-top: 75px;
padding-bottom: 50px;
text-align: center;
color: #f8f8f8;
background: url(https://i1.wp.com/www.farawaylucy.com/wp-
content/uploads/2017/01/man-packing-his-things-on-vacation-picjumbo-
com_edit.jpg?fit=4000%2C2667&ssl=1) no-repeat center center;
background-size: cover;
}

33
#banner_content {
position: relative;
padding-top: 6%;
padding-bottom: 6%;
margin-top: 12%;
margin-bottom: 12%;
background-color: rgba(0, 0, 0, 0.7);
max-width: 660px;
}
footer
{
padding: 10px 0;
background-color: #101010;
color:#9d9d9d;
bottom: 0;
width: 100%;
}

.container-fluid {
padding: 1px;
}

.decor_bg {
padding: 1px;
}

.col-md-4 {
padding: 1px;
}

.col-md-offset-4 {
padding: 1px;
}

.panel {
padding: 5px;
color: blue;
border: 5px;
}

.panel-primary {
border: 1px;
width: 100%;
}

.panel-heading {
color: blue;

34
 padding: 15px;

3)signuppage.html

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>

<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></scri
pt>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></sc
ript>
<title>Sign Up</title>
<link href="style.css" rel="stylesheet">
</head>

<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target="#mynavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand">Lifestyle
store</a>
</div>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav navbar-right">

35
 <li><a href="sign.php" class=""><span class="glyphicon
glyphicon-user">SignUp</span></a></li>
<li><a href="login.php"><span class="glyphicon
glyphicon-log-in">Login</span></a></li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="container">
<div class="row row_style">
<div class="col-xs-5 col-lg-offset-2">
<form>
<h2>SIGN UP</h2>
<div class="form-group">
<input type="text" class="form-control"
placeholder="Name" name="Name">
</div>
<div class="form-group">
<input type="e-mail" class="form-control"
placeholder="E-mail" name="E-mail">
</div>
<div class="form-group">
<input type="password" class="form-control"
placeholder="Password" name="Password">
</div>
<div class="form-group">
<input type="contact" class="form-control"
placeholder="Contact" name="Contact">
</div>
<div class="form-group">
<input type="text" class="form-control"
placeholder="City" name="City">
</div>
<div class="form-group">
<input type="text" class="form-control"
placeholder="Address" name="Address">
</div>
<button class="btn btn-primary">Submit</button>
</form>
</div>

</div>

</div>

36
 </main>
<footer>
<div class="container">
<center>
Copyright © Lifestyle Store. All Rights Reserved and Contact
Us: +91 90000 00000
</center>
</div>
</footer>

</body>

</html>

4)productspage.html

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>

<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></scri
pt>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></sc
ript>
<title>Products</title>

<link href="style.css" rel="stylesheet">

</head>

<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">

37
 <button type="button" class="navbar-toggle" data-
toggle="collapse" data-target="#mynavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand">Lifestyle
store</a>
</div>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav navbar-right">

<li><a href="cart.html"><span class="glyphicon

glyphicon-shopping-cart">Cart</span></a></li>
<li><a href="settings.html"><span class="glyphicon
glyphicon-user">Settings</span></a></li>
<li><a href="logout.html"><span class="glyphicon
glyphicon-log-out">Logout</span></a></li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="container">
<div class="jumbotron jumbotron_style">
<h1>Welcome to our Lifestyle store!</h1>
<p> We have the best cameras,watches and shirts for you.No
need to hunt it around,we have all in one
place.
</p>
</div>
<div class="padding-20"></div>
<div class="row text-center">
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="img/camera.jpg" alt="Nikon">
<div class="caption">
<h3>Nikon NX21</h3>
<p>Rs.36000.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 ">
<div class="thumbnail">
<img src="img/camera2.jpg" alt="Sony">
<div class="caption">
<h3>Sony LDS</h3>

38
 <p>Rs.32000.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6 ">

<div class="thumbnail">
<img src="img/camera3.jpg" alt="cannon">
<div class="caption">
<h3>Cannon EDS70D</h3>
<p>Rs.29000.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 ">
<div class="thumbnail">
<img src="img/camera4.jpg" alt="Panasonic">
<div class="caption">
<h3>Lumix2</h3>
<p>Rs.33000.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="img/watch.jpg" alt="watch">
<div class="caption">
<h3>Y&K</h3>
<p>Rs.3000.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 ">
<div class="thumbnail">
<img src="img/watch2.jpg">
<div class="caption">
<h3>Casio G-Shock</h3>
<p>Rs.6000.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>

39
 <div class="col-md-3 col-sm-6 ">
<div class="thumbnail">
<img src="img/watch3.jpg" alt="Watch">
<div class="caption">
<h3>Omega</h3>
<p>Rs.2000.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 ">
<div class="thumbnail">
<img src="img/watch4.jpg " alt="Watch">
<div class="caption">
<h3>Diesel 3bar</h3>
<p>Rs.3300.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="img/shirt.jpg" alt="Tommy">
<div class="caption">
<h3>Tommy Hilfigher</h3>
<p>Rs.3600.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6 ">

<div class="thumbnail">
<img src="img/shirt2.jpg" alt="U.S.Polo">
<div class="caption">
<h3>U.S. Polo</h3>
<p>Rs.970.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6 ">

<div class="thumbnail">
<img src="img/shirt3.jpg" alt="cannon">
<div class="caption">
<h3>Allen Solly</h3>

40
 <p>Rs.2900.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 ">
<div class="thumbnail">
<img src="img/shirt4.jpg">
<div class="caption">
<h3>UCB</h3>
<p>Rs.960.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>

</div>
<div class="padding-20"></div>
</div>
</main>
<footer>
<div class="container">
<center>
Copyright © Lifestyle Store. All Rights Reserved and Contact
Us: +91 90000 00000
</center>
</div>
</footer>

</body>

</html>

5)loginpage.html

<!DOCTYPE html>

<html>

<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

41
 <script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></scri
pt>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></sc
ript>
<title>Login</title>

<link href="style.css" rel="stylesheet">

</head>

<body>

<header>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target="#mynavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand">Lifestyle
store</a>
</div>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="sign.html" class=""><span
class="glyphicon glyphicon-user">SignUp</span></a></li>
<li><a href="login.html"><span class="glyphicon
glyphicon-log-in">Login</span></a></li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="container">
<div class="row row_style">

<div class="col-xs-5 col-lg-offset-2">

<div class="panel panel-primary">
<div class="panel-heading">
<h2>LOGIN</h2>
</div>
<div class="panel-body">
<p class="text-warning">Login to make a
purchase</p>

42
 <form>
<div class="form-group">
<input type="text" placeholder="E-mail"
class="form-control" name="E-mail">
</div>
<div class="form-group">
<input type="text" placeholder="Password"
class="form-control" name="Password">
</div>
<button class="btn btn-primary">Login</button>
<div class="panel-footer">
<p>Don't have an account?Register</p>
</div>
</form>
</div>
</div>
</div>

</div>
</div>
</main>
<footer>
<div class="container">
<center>
Copyright © Lifestyle Store. All Rights Reserved and Contact
Us: +91 90000 00000
</center>
</div>
</footer>
</body>

</html>

43
2.2.6 OUTPUT:
1) INDEX PAGE:

2)Sign Up Page:

44
3)Settings Page:

4)Cart Page:

45
 STRUCTURED QUERY LANGUAGE((SQL)

2.3.1 SQL INTRODUCTION (BACK-END DEVELOPMENT)

SQL is a domain-specific language used in programming and designed for managing data held
in a relational database management system, or for stream processing in a relational data
stream management system. A database server is a computer program that provides
database services to other programs or computers, as defined by the client-server model.

2.3.2 INTRODUCTION TO DBMS

A system application for creating and managing your databases, access and can modify your
Data. DBMS works in an efficient and secured manner.

DBMS Types:

1) Flat file database

2) Relational database: 1) hierarchical database

2)RDBMS

3) No SQL: 1) Key value 2) column oriented 3) document oriented 4) Graph DB

2.3.3 CREATING DATABASE

In technical terms; database is a set of multiple tables. Tables may be connected to each other
by the concept of foreign keys.

INTRODUCTION TO SQL

Structured Query Language:

1) It is used to communicate with the database.

2) My SQL is an open source dbms.

46
3) My SQLi is an advanced version of My SQL.

MYSQL DATABASES:

2.3.4 DATA DEFINITION LANGUAGE(DDL)

1) Commands in SQL

Create command is used to create databases and tables.

For ex: CREATE database temp_db;

$ always write database names in your query

Data contains actual values corresponding to each column of the table.

47
PRIMARY KEY:

Primary key is a number uniquely associated with each row or record.

For ex: CREATE TABLE temp_db_products (id INT NOT NULL, name VARCHAR (30), category

INT (30), PRIMARY KEY (id));

2.3.5 ALTER AND DROP

We can alter the structure of the existing table.

Four keywords used with alter command are:

1)add 2) drop

3)change 4) modify

Ex: To add a column to an existing table.

ALTER table database-name.table-name ADD column-new data-type (length constraints)

To add a column from an existing table.

ALTER table database-name.table-name DROP column-name.

DROP COMMAND:

Syntax:

DROP database-name.table-name

DROP database temp_db;

48
2.3.6 FOREIGN KEY AND TRUNCATE

Mapping between two tables is done using foreign key.

A foreign key is a key used to link two tables together. This is sometimes also called a
referencing key .

A Foreign Key is a column or a combination of columns whose values match a Primary Key in
a different table.

To view relation views add storage to innodb operations.

Relation views provide functionality to link columns of one table to columns of another table.

TRUNCATE:

Truncate command deletes all the records inside the table.

Used when we only want to keep the structure of the table and delete the data.

PhpMyAdmin allows users to execute truncate commands without using the SQL command.

Data Definition Language (DDL)

1) Primary key

2) Alter command

3) Drop command

4) Foreign key

5) Truncate

49
2.3.7 DATA MANIPULATION LANGUAGE(DML)

A collection of those commands that help to INSERT, DELETE, MODIFY or pull out data from
the database.

INSERT :

This command is used to insert data into the tables.

For ex : INSERT INTO database-name (name, category) values(‘ ‘,’ ‘)

UPDATE : This command is used to update the existing data in tables.

For ex : UPDATE database-name SET first_name =’ ‘ WHERE users.id= 1 ;

DELETE : This command is used to delete an entire row from a table.

To delete a row ; make sure it does not have a primary key or foreign key

For ex : DELETE FROM users WHERE id= ‘ ’ ;

SELECT : Select command is used to pull out the existing data from tables.

SELECT * FROM ‘ ’

Use * to Display all the columns.

50
2.3.8 ASSIGNMENT

★ TO CREATE THE DATABASE AND THE TABLES TO STORE THE USER DATA.

Items:

CREATE TABLE `items` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(255) NOT NULL,

`price` int(11) NOT NULL,

PRIMARY KEY (`id`)

); Users:

CREATE TABLE `users` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(255) NOT NULL,

`email` varchar(255) NOT NULL,

`password` varchar(255) NOT NULL,

`contact` varchar(255) NOT NULL,

`city` varchar(255) NOT NULL,

`address` varchar(255) NOT NULL,

PRIMARY KEY (`id`)

) ;Users_items:

CREATE TABLE `users_items` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`user_id` int(11) NOT NULL,

`item_id` int(11) NOT NULL,

51
 `status` enum('Added to cart','Confirmed') NOT NULL,

PRIMARY KEY (`id`),

KEY `item_id` (`item_id`),

KEY `user_id` (`user_id`),

CONSTRAINT `users_items_ibfk_1` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`),

CONSTRAINT `users_items_ibfk_2` FOREIGN KEY (`item_id`) REFERENCES `items` (`id`) );

2.3.9 OUTPUT

1)Login Page:

2)Working area:

52
 PHP (HYPERTEXT PREPROCESSOR)

2.4.1 PHP INTRODUCTION (BACK-END DEVELOPMENT)

PHP is a server-side scripting language which is used to perform operations on databases. In

building dynamic pages and websites functionality. PHP code is usually processed on a web
server by a PHP interpreter implemented as a module, a daemon or as a Common Gateway
Interface (CGI) executable. On a web server, the result of the interpreted and executed PHP
code which may be any type of data, such as generated HTML or binary image data – would
form the whole or part of a HTTP response.

2.4.2 BASICS
PHP STRUCTURE:
<!DOCTYPE html>
<html>
<head>
<title> <?php echo “ “ ?> </title>
</head>
<body>
<?php
Echo “ “ ?>
</body>
</html>

2.4.3 VARIABLES, DATA TYPES AND OPERATORS

To write variable name in php
$variable_name
<body>
<?php
$var1=18;

53
 $var2=12;
Echo gettype($var1);
?>
</body>
To perform addition :
<?php
$var1=18;
$var2=12;
$sum=$var1 + $var2 ;
Echo $sum;
?>

CONCATENATION:

Concatenation is an addition of combining two strings to make it one string.

<?php
$var1= “Hello”;
$var2= “Internshala”;
Echo $var1.$var2;
?>

2.4.4 FUNCTIONS, ARRAYS AND STRINGS

FUNCTIONS:
A function is an independent code that performs a particular task.
<?php
Function sum ($parameter1, $parameter2)
{$addition = $parameter1+$parameter2;
Return addition;
}
?>

54
 <body>
$var=1;
$var=2;
$sum=sum($var1, $var2);
Echo “ Sum of two variables is “. $sum.” ;
?>

If passed with function call, it will have that value and if not passed , it will have that value and
if not passed it will use the default value.

ARRAYS:
An array is a special variable, which can hold more than one value at a time.
Stores integers, strings and other arrays etc.
<body>
<?php
$numbers = array(18,12)
$sum=$numbers[0] + $numbers[1];
echo “Sum of two variables is “.sum” “;
echo “length of the array is “.sizeof($numbers)”;
Array can be 1D,2D and 3D.

STRINGS:

A string is a set characters that can contain spaces and numbers.

<?php

$string1= “ “;

$length_of_string .strlen($string1);

Echo $length_of_string

55
Double quotes inside single quotes will be considered as strings. Single quotes inside Quotes
will be considered as strings.

2.4.5 LOOPS

A loop consists of two parts, a body of a loop and a control statement. The control statement
is a combination of some conditions that direct the body of the loop to execute until the
specified condition becomes false. The purpose of the loop is to repeat the same code a
number of times.

THREE TYPES OF LOOPS:

1) FOR LOOP 2) WHILE LOOP 3) DO WHILE LOOP

56
 CHAPTER 3 PROJECT RESULT

3.1 PROJECT CODE

1) INDEX.php:

<?php require("includes/common.php"); if
(isset($_SESSION['email'])) { header('location:
products.php');
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home | E-Store.com</title>
<link rel="shortcut icon" href="img\srtcticon.png" type="image/png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="./css/style.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</head>
<body style="padding-top: 50px;">
<!-- Header -->

57
 <?php

include 'includes/header.php';
?>
<!--Header end-->
<div id="content">
<!--Main banner image-->
<div id = "banner_image">
<div class="container">
<center>
<div id="banner_content">
<h1>LifeStyle Store</h1>
<h4><p>Flat &nbsp;&#8377;2,000&nbsp;&nbsp;OFF&nbsp;&nbsp;on all
products.</p></h4>
<br>
<br>
<a href="products.php" class="btn btn-danger btn-lg active">Shop Now</a>
</div>
</center>
</div>
</div>
<br>
<br>
<!--Main banner image end-->
<!--Item categories listing-->
<div class="container text-center">
<div id="item_list">
<div class="panel panel-default">
<div class="panel-heading color">

<h3style="color:orange">Choose&nbsp;&nbsp;From&nbsp;&nbsp;wide&nbsp;&nbsp
;ranges&nbsp;&nbsp;of&nbsp;&nbsp;brands</h3></div>

58
<div class="panel-body">
<div class="col-sm-3">
<a href="products.php">
<div class="thumbnail">
<img src="./img/watch.png" alt="watch" >
<div class="caption">
<h3>watch</h3>
</div>
</div>
</a>
</div>
<div class="col-sm-3">
<a href="products.php">
<div class="thumbnail">
<img src="./img/camera.png" alt="camera" >
<div class="caption">
<h3>Camera</h3>
</div>
</div>
</a>
</div>
<div class="col-sm-3">
<a href="products.php">
<div class="thumbnail">
<img src="./img/Shirts.png" alt="Shirts" >
<div class="caption">
<h3>Shirts</h3>
</div>
</div>
</a>
</div>
59
<div class="col-sm-3">
<a href="products.php">
<div class="thumbnail">
<img src="./Canon.png" alt="Canon" >
<div class="caption">
<h3>Canon</h3>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!--Item categories listing end-->
</div>
<!--Footer-->
<?php
include 'includes/footer.php';
?>
<!--Footer end-->
</body>
</html>

2)SignUp.php

<?php require("includes/common.php"); if
(isset($_SESSION['email'])) { header('location: products.php');
} ?>

60
 <!DOCTYPE html>
<html lang="en">
<head>
<title>Sign Up | E-Store.com</title>
<link rel="shortcut icon" href="./img/srtcticon.png" type="image/png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<?php include "includes/header.php"; ?
<div class="container">
<div class="row">
<div class="col-sm-7">
<img src="./img/signuppage.jpg">
</div>
<div class="col-sm-5">
<h2 style="color:orange">SIGN UP</h2>
<form action="signup_script.php" method="POST">
<div class="form-group col-sm-10">
<inputclass="form-control" placeholder="Name" name="name"
pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" required>
</div>
<div class="form-group col-sm-10">
<input type="email" class="form-control" placeholder="Email"
61
 pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" name="email" required>
<?php if(isset($_GET["m1"])){ echo
$_GET['m1'];
}
?>
</div>
<div class="form-group col-sm-10">
<input type="password" class="form-control" placeholder="Password" pattern=".{6,}"
name="password" required>
</div>
<div class="form-group col-sm-10">
<input type="text" class="form-control" placeholder="Contact" maxlength="10" size="10"
name="contact" required>
<?php if(isset($_GET["m2"])){ echo
$_GET['m2'];
}
?>
</div>
<div class="form-group col-sm-10">
<input type="text" class="form-control" placeholder="City" name="city" >
</div>
<div class="form-group col-sm-10">
<input type="text" class="form-control" placeholder="Address name="address" >
</div>
<div class="col-sm-10">
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
<div class="col-sm-10">
Already have an account ?<a href="login.php"> Login</a>

62
</div>
</form>
</div>
</div>
</div>
<?php include "includes/footer.php"; ?>
</body>
</html>

3)Home.php:

<?php require("includes/common.php");
// Redirects the user to the products page if logged in.
if (isset($_SESSION['email'])) { header('location:
products.php');
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login | Life Style Store</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<?php include 'includes/header.php'; ?>
<div id="content">

63
<div class="container-fluid decor_bg" id="login-panel">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary" >
<div class="panel-heading">
<h4>LOGIN</h4>
</div>
<div class="panel-body">
<p class="text-warning"><i>Login to make a purchase</i><p>
<form action="login_submit.php" method="POST">
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" name="email"required =
"true">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" name="password"
required = "true">
<button type="submit" name="submit" class="btn btn-primary">Login</button><br><br>
<?php echo $_GET['error']; ?>
</form><br/>
</div>
<div class="panel-footer"><p>Don't have an account?
<a href="signup.php">Register</a></p></div>
</div>
</div>
</div>
</div>
</div>
<?php include 'includes/footer.php'; ?>
</body>
</html>
64
4)Confirm.php:

<?php require("includes/common.php");
$email = $_POST['e-mail'];
$email = mysqli_real_escape_string($con, $email);
$password = $_POST['password'];
$password = mysqli_real_escape_string($con, $password);
$password = MD5($password);
// Query checks if the email and password are present in the database.
$query = "SELECT id, email FROM users WHERE email='" . $email . "' AND password='"
. $password . "'";
$result = mysqli_query($con, $query)or die($mysqli_error($con));
$num = mysqli_num_rows($result);
// If the email and password are not present in the database, the mysqli_num_rows returns 0, it is
assigned to $num.
if ($num == 0) {
$error = $$_GET['error'];
$error = "<span class='red'>Enter Correct Email and Password Combination</span>";
header('location: login.php?error=' . $error);
} else {
$row = mysqli_fetch_array($result);
$_SESSION['email'] = $row['email'];
$_SESSION['user_id'] = $row['id']; header('location:
products.php');
}
?>

5)Success.php:

<?php require("includes/common.php"); if

65
(!isset($_SESSION['email'])) {header('location: index.php');
}
$user_id = $_SESSION['user_id'];
$item_ids_string = $_GET['itemsid'];
//We will change the status of the items purchased by the user to 'Confirmed'
$query = "UPDATE users_items SET status='Confirmed' WHERE user_id=" . $user_id . " AND
item_id IN (" . $item_ids_string . ") and status='Added to cart'";
mysqli_query($con, $query) or die($mysqli_error($con));
?>
<!DOCTYPE html>
<head>
<title>Success | Life Style Store</title>
<link rel="shortcut icon" href="img\srtcticon.png" type="image/png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<?php include 'includes/header.php'; ?>
<div class="container-fluid" id="content">

66
 <div class="col-md-12">
<div class="jumbotron">
<h3 align="center">Your order is confirmed. Thank you for shopping with us.</h3><hr>
<p align="center">Click <a href="products.php">here</a> to purchase any other item.</p>
</div>
</div>
</div>
<?php include("includes/footer.php");
?>
</body>
</html>

6)Settings.php:

<?php require(“includes/common.php”); if
(!isset($_SESSION[‘email’])) { header(‘location: index.php’);
} ?>
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Settings | E-Store.com</title>
<link rel=”shortcut icon” href=”img\srtcticon.png” type=”image/png”>
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
<!—Bootstrap Core CSS 
<link href=”css/bootstrap.css” rel=”stylesheet”>
<!—Custom CSS 
<link href=”css/style.css” rel=”stylesheet”>
<!—jQuery 
<script src=”js/jquery.js”></script>

67
<!—Bootstrap Core JavaScript 
<script src=”js/bootstrap.min.js”></script>
</head>
<body>
<?php include ‘includes/header.php’; ?>
<div class=”container-fluid” id=”content”>
<div class=”row”>
<div class=”col-lg-4 col-lg-offset-4” id=”settings-container”>
<h4>Change Password</h4>
<form action=”settings_script.php” method=”POST”>
<div class=”form-group”>
<input type=”password” class=”form-control” name=”old_password”pattern=”.{6,}”
placeholder=”Old Password” required>
</div>
<div class=”form-group”>
<input type=”password” class=”form-control” name=”new_password”pattern=”.{6,}”
placeholder=”New Password” required>
</div>
<div class=”form-group”>
<input type=”password” class=”form-control” name=”68enew_password”pattern=”.{6,}”
placeholder=”Re-type New Password” required>
</div>
<div><b class=”red”>
<?php if(isset($_GET[“error”])){echo
$_GET[‘error’];
} ?>
</b></div>
<br>
<button type=”submit” class=”btn btn-primary">Change</button>
</form>
</div>

68
</div>
</div>
<?php include 'includes/footer.php'; ?>
</body>
</html>

7)Cart.php:

<?php require("includes/common.php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cart | Life Style Store</title>
<link rel="shortcut icon" href="img\srtcticon.png" type="image/png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="./css/style.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</head>
<body style="padding-top: 50px;">
<!-- Header -->
<?php

69
include 'includes/header.php';
?> <!--Header end-->
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<table class="table table-striped">
<!--show table only if there are items added in the cart-->
<?php
$sum = 0;
$user_id = $_SESSION['user_id'];
$query = "SELECT items.price AS Price, items.id, items.name AS Name FROM users_items
JOIN items ON users_items.item_id = items.id WHERE users_items.user_id='$user_id' and
status='Added to cart'";
$result = mysqli_query($con, $query)or die($mysqli_error($con)); if
(mysqli_num_rows($result) >= 1) {
?>
<thead>
<tr>
<th>Item Number</th>
<th>Item Name</th>
<th>Price</th>
<th></th>
</tr>
</thead>
<tbody>
<?php
while ($row = mysqli_fetch_array($result)) {
$sum+= $row["Price"];
$id="";
$id .= $row["id"] . ",";echo "<tr>
<td>" . "#" . $row["id"] . "</td>

70
<td>" . $row["Name"] . "</td>
<td>Rs " . $row["Price"] . "</td>
<td><a href='cart-remove.php?id={$row['id']}'class='remove_item_link'>
X </a></td></tr>"; }
$id = rtrim($id, ",");echo "<tr>
<td></td>
<td>Total</td>
<td>Rs " . $sum . "</td>
<td><a href='success.php?itemsid=".$id ."'class='btn btn-primary'>Confirm
Order</a></td></tr>";
?>
</tbody>
<?php
} else {
echo "<center><h2>Add items to the cart first!</h2></center>";
}
?>
<?php
?>
</table>
</div>
</div>
</div>
<!--Footer-->
<?php include 'includes/footer.php';?>
<!--Footer end-->
</body>
</html>

71
8)Modal.php:

<!-- Modal -->

<div class="modal fade" id="loginmodal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 style="color:red;"><span class="glyphicon glyphicon-lock"></span> Login</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="username"><span class="glyphicon glyphicon-user"></span>Username</label>
<input type="text" class="form-control" id="username" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-default btn-success btn-block"><span class="glyphicon
glyphicon-off"></span> Login</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-left"
data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>

72
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
</div>

9)Style.css

body, html {
width: 100%;
height: 100%;
}
body{
padding-top:100px;
}
body, h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 550;
}
#content{
min-height: 600px;
}

73
.rmvb{
list-style: none; padding-left: 50px;
}
.color{
text-align: center;
text-transform: uppercase;
}
.thumbnail1{
overflow: auto; padding: 10px 0 0 10px;
}
#banner_image { padding-bottom: 50px; margin-
bottom: 20px; text-align: center; color: #f8f8f8;
background: url(../img/bg.jpg) no-repeat center center;background-size: cover;
}
#banner_content {position: relative; padding-top:
6%;
padding-bottom: 6%;
margin-top: 12%;
margin-bottom: 12%;
background-color: rgba(0, 0, 0, 0.5); max-width: 600px;
border-radius: 25px;
}
.modal-header, .close{ background-color:orange;

74
color: white !important; text-align: center;
font-size: 50px;
}
.modal-footer{ background-color: #f9f9f9;
}
#item_list {
padding-top: 50px;
}
/*This code ensures that when we navigate to a particular section of a page, the section does not
get lost behind the header*/
display: block; content: " "; margin-top: -85px;
height: 85px; visibility: hidden;
}
#login-panel .panel-footer{font-weight:normal;
}
footer { position: relative;
background-color: #3d3d3d;
color:white; width: 100%;
bottom: 0;
font-weight: 300;
}
.columnf{ float: left; width: 33.33%;padding:
5px;
}
.row:after{ content: ""; display: table;
clear:both;
}
#thmb{

float: left;

padding: 0 20px 0 30px;

}
75
#bdy{

padding-top: 80px;

padding-bottom: 20px;

.thumbnail1{

overflow: auto;

padding: 10px 0 0 10px;

.red{

color:red;

#settings-container{

margin-bottom:10px;

} .navbar-brand{

font-size:20px;

@media(max-width:768px) {#banner_content {
padding-bottom: 15%;
}

footer{

text-align:left;

remove_item_linl{

color:#0000ff;}

76
3.2 OUTPUT

1)Home page:

77
2)Login Page:

3)Sign Up Page:

78
4)Settings Page:

5)Products Page:

79
6)Cart Page:

7)Success Page:

8)Navigation bar:

80
3.3 DISCUSSION

The Home Page of a lifestyle store where customers may buy watches, shirts, and cameras is

represented by the code above. In this, a web developer built a lifestyle store's website where

customers could register, add goods to their carts, and place orders at any time. The website

has been designed to be very user-friendly so that users can utilise it with ease. The home

page is incredibly user-friendly and easy to use. If necessary, the user can even log out of the

website. The user can even change their password if they lose it.

81
 CHAPTER 4 PROJECT CONCLUSION

4.1 CONCLUSION

I learned about web programming throughout this eight week of training at Internshala, and

I was also able to make a page for my website utilising tools like NetBeans, Bootstrap, and

Wampserver (PhpMyAdmin). This eight-week course teaches students a fundamental

understanding of how to build web pages using a variety of programming languages and

styling so that they can get familiar with the subject and, if they so choose, pursue a career in

it and go deeply into the training libraries. A person can focus more on the web development

element by using languages like HTML, SQL, and PHP because they are simple and user-

friendly, but if they become familiar with it, they can also transition to web designing.

82
REFERENCES

1) https://:youtube.com

2) https://trainings.internshala.com/

3) https://www.w3schools.com/

4) https://github.com/

5) https://www.wikipedia.org/

83