COLLEGE OF TECHNOLOGY AND

ENGINEERING
MAHARANA PRATAP UNIVERSITY OF AGRICULTURE &
TECHNOLOGY
Udaipur (Raj.)

A
PROJECT 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 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 Head of Departrment of Electronics

and Communication (DR. Navneet Agrawal) 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.

 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.

Certificate for Training Completion
 TABLE OF CONTENTS

Topics Page no.

Acknowledgement …………………………………………… 2
Declaration……………………………………………………. 3
Certificate………………………………………………………4
Abbreviation…………………………………………………... 7
Abstract ……………………………………………………….. 8
CHAPTER 1: INTRODUCTION
1.1 Introduction to Web Development………………………… 9
1.2 Software Used…………………………………………….. 10
CHAPTER 2: TRAINING WORK UNDERTAKEN
2.1.0 HTML……………………………………………………11
2.1.1 HTML Introduction………………………………………11
2.1.2 HTML Page Structure……………………………………11
2.1.3 Tags and Elements……………………………………….12
2.1.4 Text Formatting…………………………………………..12
2.1.5 Hyperlinks………………………………………………..13
2.1.6 Cascading Style Sheets (CSS)..........................................13
2.1.7 Box Model……………………………………………… 14
2.1.8 Fonts……………………………………………………. 14
2.1.9 Navigation Bar…………………………………………..14
2.1.10 Forms…………………………………………………..15
2.2.0 BOOTSTRAP…………………………………………..16
2.2.1 Breakpoints………………………………………………17
2.2.2 Jumbotrons and Glyphicons……………………………...17
2.2.3 Thumbnails……………………………………………….18
2.2.4 Forms……………………………………………………..19
 2.3.0 STRUCTURED QUERY LANGUAGE (SQL).......................... 20
2.3.1 SQL Introduction……………………………………………......... 20
2.3.2 Introduction to DBMS……………………………………………... 20
2.3.3 Creating Database………………………………………………...... 20
2.3.4 Data Definition Language (DDL)...................................................... 21
2.3.5 Alter and Drop………………………………………………........... 22
2.3.6 Foreign Key & Truncate………………………………………….... 23
2.3.7 Data Manipulation Language (DML)................................................ 24
2.4.0 PHP (Hypertext Preprocessor)..................................................... 25
2.4.1 PHP Introduction……………………………………....................... 25
2.4.2 Basics………………………………………………......................... 25
2.4.3 Variables, Data types and Operators………………………..........… 25
2.4.4 Function, Array and Strings………………………………................ 26
2.4.5 Loops………………………………………………........................... 28
CHAPTER 3 PROJECT RESULT AND DISCUSSION
3.1 Coding………………………………………..............................……. 29
3.2 Output………………………………..............................…………….. 49
3.3 Discussion………………………………...........................…………….53

CHAPTER 4 PROJECT CONCLUSION

4.1 Conclusion………………………………………............................... 54
References………………………………………………………………..55
 ABBREVIATION

HTML – Hypertext Markup Language

CSS – Cascaded Style Sheets

SQL – Structured Query Language

JS – JavaScript

PHP –Hypertext Preprocessor

2
 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.

3
 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.

4
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.

5
 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>

6
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

7
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

8
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

9
Navigation Bar and logo are together often referred to as a header. Navigation bar links
different sections within a page.
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”>

10
 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”

11
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”>

This is a jumbotron
12
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>

13
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;}

14
 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.

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

15
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.

16
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;

17
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

18
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.

19
 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;
$var2=12;

20
 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;
}
?>
<body>
$var=1;
$var=2;

21
 $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

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

22
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

23
 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 -->

24
 <?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>
25
<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>
26
<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');
} ?>

27
 <!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"
28
 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>

29
</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">

30
<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>
31
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 (!

32
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">

33
 <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>

34
<!—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=”enew_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>

35
</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

36
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>
37
<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>

38
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>

39
<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;
}

40
.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;

41
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;

}
42
#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;}

43
3.2 OUTPUT

1)Home page:

44
2)Login Page:

3)Sign Up Page:

45
4)Settings Page:

5)Products Page:

46
6)Cart Page:

7)Success Page:

8)Navigation bar:

47
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.

48
 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.

49
REFERENCES

1) https://:youtube.com

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

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

4) https://github.com/

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

50