Internshala - Webdevelopment - Report (1) MD HASNAIN

A REPORT OF SIX WEEKS INDUSTRIAL TRAINING
At
INTERNSHALA
SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENT FOR THE AWARD
OF THE DEGREE OF
BACHELOR OF TECHNOLOGY
INFORMATIONTECHNOLOGY
MARCH-APRIL 2023
SUBMITTED BY
MD HASNAIN
DEPARTMENT OF INFORMATION TECHNOLOGY

HALDIA INSTITUTE OF TECHNOLOGY, HALDIA
1
CERTIFICATE FOR TRAINING COMPLETION
2
DECLARATION
DEPARTMENT OF INFORMATION TECHNOLOGY
HALDIA INSTITUTE OF TECHNOLOGY
CANDIDATE’S DECLARATION
I, MD HASNAIN hereby declare that I have undertaken six weeks industrial
training at INTERNSHALA during a period from 6th MARCH to 18th APRIL in
partial fulfillment of requirements for the award of degree of B-Tech
(INFORMATION TECHNOLOGY) at Haldia Institute of Technology, Haldia. The
work which is being presented in the training report submitted to the Department of
INFORMATION TECHNOLOGY at Haldia Institute of Technology, Haldia is an
authentic record of training work.
Signature of Student
MD HASNAIN(00219027)
3
ABSTRACT
The aim of this Bachelor’s thesis was to develop a WordPress mobile-first style
website for the customer. The main purpose of the development was to learn website
designing principles and creating a responsive website for the mobile and desktop
platforms.The development process began defining the requirements of the website and
creating the requirements document. Then the next step was learning how to design a
website layout and to choose the colour scheme for the site. The website was
constructed by NetBeans IDE 8.2 RC, Bootstrap and Wampserver. The result of the
website was as desired. The website scaled all the different platforms, and all the
required requirements were fulfilled.
4
ACKNOWLEDGEMENT
This work is just not an individual contribution till its completion. I take this
opportunity to express a deep gratitude towards my teacher, for providing excellent
guidance encouragement and inspiration throughout the training work without his
invaluable guidance, this work would never have been a successful one.
I wish to express my sincere thanks to all department faculties and staff members
for their support.
I would also like to thank all my classmates for their valuable guidance and helpful
discussion.
Last but not the least, we wish to thank our parents for financing our studies in this
college as well as for constantly encouraging us to learn engineering. Their personal
sacrifice in providing this opportunity to learn engineering is gratefully acknowledged.
5
ABOUT THE COMPANY
Internshala is an internship and online training platform, based in Gurgaon, India.

Founded by Sarvesh Agrawal, an IIT Madras alumnus, in 2010, the website helps
students find internships with organizations in India. The platform, which was founded
in 2010, started out as a WordPress blog that aggregated internships across India and
articles on education, technology and the skill gap. They coat themselves as “We are a
technology company on a mission to equip students with relevant skills & practical
exposure through internships and online training. Imagine a world full of freedom
and possibilities. A world where you can discover your passion and turn it into your
career. A world where your practical skills matter more than your university degree. A
world where you do not have to wait till 21 to taste your first work experience. A
world where you graduate fully assured, fully confident, and fully prepared to stake a
claim on your place in the world”.Internshala launched its online training in 2014.
As of 2018, the platform had 3.5 million students and 80,000 companies.
In August 2016, Telangana's not-for-profit organization, Telangana Academy for Skill and
Knowledge (TASK) partnered with Internshala to help students with internship resources
and career services. In September 2016, Team Indus, Google XPRIZE shortlisted entity,
partnered with Internshala for college outreach for its initiative, Lab2Moon.
In 2011, the website became a part of NASSCOM 10K Start-ups. In 2015, Internshala
was a finalist in People Matters Tech HR 2015 Spotlight Awards under 'Futurism in
Recruitment' category.
6
TABLE OF CONTENTS
Topics Page no.
Certificate by Company…................................................................................................2
Candidate’s Declaration…................................................................................................3
Abstract…...........................................................................................................................4
Acknowledgement…..........................................................................................................5
About the Company….......................................................................................................6
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 Hyperlink…............................................................................................13
2.1.6 Cascading Style Sheets (CSS)................................................................13
2.1.7 Box Model…..........................................................................................13
2.1.8 Fonts…...................................................................................................14
2.1.9 Navigation Bar…...................................................................................14
2.1.10 Forms…................................................................................................14
2.1.11 Assignment….......................................................................................16
2.1.12 Output…...............................................................................................22
2.2.0 BOOTSTRAP…...................................................................................23
2.2.1 Breakpoints…........................................................................................24
2.2.2 Jumbotrons and Glyphicons…..............................................................24
2.2.3 Thumbnails…........................................................................................25
2.2.4 Forms….................................................................................................25
7
2.2.5 Assignment…........................................................................................26
2.2.6 Output…................................................................................................36
2.3.0 STRUCTURED QUERY LANGUAGE (SQL).................................38
2.3.1 SQL Introduction…...............................................................................38
2.3.2 Introduction to DBMS….......................................................................38
2.3.3 Creating Database…..............................................................................38
2.3.4 Data Definition Language(DDL)...........................................................39
2.3.5 Alter and Drop…...................................................................................40
2.3.6 Foreign Key & Truncate…....................................................................40
2.3.7 Data Manipulation Language(DML).....................................................41
2.3.8 Assignment…........................................................................................42
2.3.9 Output…................................................................................................43
2.4.0 PHP (Hypertext Preprocessor)...........................................................44
2.4.1 PHP Introduction…...............................................................................44
2.4.2 Basics…………………………………………………………….. 44
2.4.3 Variables, Data types and Operators…..................................................44
2.4.4 Function, Array and Strings…...............................................................45
2.4.5 Loops…..................................................................................................45
2.4.6 Assignment….........................................................................................47
2.4.7 Output….................................................................................................57
CHAPTER 3 PROJECT RESULT AND DISCUSSION
3.1 Coding…..................................................................................................60
3.2 Output……………………………………………………………… 81
3.3 Discussion….............................................................................................85
CHAPTER 4 PROJECT CONCLUSION
4.1 Conclusion….............................................................................................86
4.2 Future Scope…..........................................................................................87
References….............................................................................................................88
8
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 behavior and visuals that run in the user
browser, while back-end developers deal with the servers.
9
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 freeCodeCamp (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.
10
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>
11
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>
<h2>I am Heading</h2>
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.
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.
12
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
2.1.7 BOX MODEL
1) Each and every element can be considered as a box.

2) Innermost box called content contains content which could be image , text.
13
3) Padding clears the area around the content. It is always transparent .
4) Padding is surrounded by a border whose colour can be chosen.
5) 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.
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=”msd”
</a>
2.1.10 FORMS
It collects information stored in databases or sent to the server. Using the <form>
element to create form.
<form>
<input type=”text” placeholder =”Enter first Name” name=”First name”><br><br>
<input type=”submit”>
14
2.1.11 ASSIGNMENT
★ TO CREATE AN INDEX PAGE FOR AN ECOMMERCE WEBSITE.
1) INDEX.html:
<!DOCTYPE html>
<html>
<head>
<title>Lifestyle Store!</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="header">
<div class="inner-header">
<div class="logo">
LifeStyle Store
</div>
<div class="header-link">
SignUp
</div>
<div class="header-link">
Login
</div>
</div>
</div>
<div class="content">
<div class="banner-image">
<div class="inner-banner-image">
<div class="banner-content">
<h1>We sell lifestyle.</h1>
<p>Flat 40% OFF on premium brands</p>
15
<button class="button">Shop Now</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="items">
<a href="#">
<img src="images/watch.jpg" class="thumbnails">
<div class="caption">
<h2>Watches</h2>
<p>Original watches from the best brands.</p>
</div>
</a>
</div>
<div class="items">
<a href="#">
<img src="images/camera.jpg" class="thumbnails">
<h2>Camera</h2>
<p>Choose among the best in the world.</p>
</div>
</a>
</div>
<div class="items">
<a href="#">
<img src="images/shirt.jpg" class="thumbnails">
<h2>Shirts</h2>
<p>Our exquisite collection of shirts.</p>
</div>
16
</a>
</div>
</div>
<footer>
<p>Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000 00000</p>
</div>
</footer>
</body>
</html>
2) STYLE.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;
}
a{
text-decoration: none;
17
background-color: transparent;
color:#ededed;
}
.logo{ flo
at: 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(../img/intro-bg_1.jpg) no-repeat center;
background-size: cover;
}
.inner-banner-image{
padding-top: 12%;
18
width:80%;
margin:auto;
}
.banner_content {
position: relative;
padding-top: 6%;
padding-bottom: 6%;
overflow:hidden;
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;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
float:left;
margin-left:1%;
}
.thumbnail{ di
splay: block;
19
max-width: 100%;
height: auto;
}
.caption{ co
lor:#000;
padding:0px 10px 10px;
font-weight: bold;
text-align: center;
}
footer{
background-color: #000;
color:#fff;
font-size:14px;
} .button{ c
olor: #fff;
background-color: #c9302c;
border-color: #ac2925;
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
20
OUTPUT :
★ INDEX PAGE :
21
BOOTSTRAP
2.2.1 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.2 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.3 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”
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>
23
2.2.4 THUMBNAILS
Thumbnails are reduced versions of audio and videos.
Thumbnails take the available width.
<h1>Thumbnails<h1>
<div class=”col-sm-4”>
<a href=”#”><img src=”img path” alt=”Responsive image”></a>
Adding <a> 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>
2.2.5 FORMS
FORM STYLING :
<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;
}
24
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”>
STYLING CHECKBOXES AND RADIO BUTTONS :
<div class=”checkbox”>
I want to order :
<label>
<input type=”checkbox” name=”food” value=”coffee” checked>Coffee
</label>
.label { padding-left:20px;
margin-bottom:20px; }
2.2.6 ASSIGNMENT
★ TO BUILD ALL THE MAIN PAGES OF THE ECOMMERCE WEBSITE
USING BOOTSTRAP FRAMEWORK.
1) INDEX.html :
<!DOCTYPE html>
<html>
<head>
<title>LifeStyle Stores</title>

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

<scrip src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

25
<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

</head>
<body>
<nav class="nav navbar-fixed-top navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavBar">
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">LifeStyle Stores</a>
</div>
<div class="collapse navbar-collapse" id="mynavBar">
<ul class="nav navbar-nav navbar-right">
<li><a href="login.html"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<li><a href="signup.html"><span class="glyphicon glyphicon-user"></span> SignUp</a></li>
</ul>
</div>
</div>
</nav>
<div id="banner-image">
<div id="banner_content">
<h1>We sell lifestyle</h1>
<p>Flat 40% OFF</p>
<a href="products.html">
<button class="btn btn-danger btn-lg active">Shop Now</button>
</a>
26
</div>
</div>
</div>
<footer>
Copyright <span class="glyphicon glyphicon-copyright-mark"></span> LifeStyle Stores.
All Rights Reserved | Contact Us: +91 90000 00000
</div>
</footer>
</body>
</html>
2) STYLE.css :
#banner-image {
padding-top: 75px;
text-align: center;
color: #f8f8f8;
background: url("images/intro-bg_1.jpg");
background-position: center;
background-repeat: no-repeat;
} #banner_content {
position: relative;
padding-top: 6%;
padding-bottom: 6%;
margin: 12% auto;
max-width: 660px;
} footer {
27
position: fixed;
padding: 10px 0;
text-align: center;
bottom: 0;
color: #9d9d9d;
width: 100%;
} .panel-margin {
margin-top: 80px;
}.text-centre {
text-align: center;
}
3) SIGN UP.html :
<!DOCTYPE html>
<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"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</head>
<body>
28
</button>
<a href="index.html" class="navbar-brand">LifeStyle Stores</a>
</div>
<li><a href="login.html"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<li><a href="signup.html"><span class="glyphicon glyphicon-user"></span> SignUp</a></li>
</ul>
</div>
</div>
</nav>
<div class="container panel-margin">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">SignUp</h2>
</div>
<div class="panel-body">
<form>
<div class="form-group">
<input type="text" class="form-control" name="name" placeholder="Name" required>
</div>
<input type="email" class="form-control" name="email" placeholder="Email" required>
</div>
29
<input type="password" class="form-control" name="password" placeholder="Password"
required>
</div>
<input type="number" class="form-control" name="contact" placeholder="Contact" required>
</div>
<input type="text" class="form-control" name="city" placeholder="City" required>
</div>
<input type="text" class="form-control" name="address" placeholder="Address" required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="panel-footer">
Already have an account?Click <a href="login.html">here</a> to create one.
</div>
</div>
</div>
<footer>
</div>
</footer>
</body>
</html>
30
4) SETTINGS.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheethref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/
css/bootstrap.min.css"">
</head>
<body>
</button>
</div>
<li><a href="cart.html"><span class="glyphicon glyphicon-shopping-cart">
</span> Cart</a></li>
31
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Settings</a></li>
<li><a href="logout.html"><span class="glyphicon glyphicon-log-out">
Logout</span></a></li>
</ul>
</div>
</div>
</nav>
<h2 class="panel-title">Change Password</h2>
</div>
<form>
<input type="password" class="form-control" name="name" placeholder="Old Password"
required>
</div>
<input type="password" class="form-control" name="email" placeholder="New Password"
required>
</div>
<input type="password" class="form-control" name="password" placeholder="Re-type New
Password" required>
</div>
<button type="submit" class="btn btn-primary">Change</button>
</form>
</div>
</div>
</div>
32
<footer>
</div>
</footer>
</body>
</html>
5) CART.html :
<!DOCTYPE html>
<html>
<head>
<title>My Cart</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7
/css/bootstrap.min.css" >

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class="nav navbar-inverse navbar-fixed-top">
33
</button>
</div>
<li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> Cart</a></li>
<li><a href="settings.html"><span class="glyphicon glyphicon-user"></span>
Settings</a></li>
<li><a href="logout.html"><span class="glyphicon glyphicon-log-out"></span>
Logout</a></li>
</ul>
</div>
</div>
</nav>
<table class="table table-hover">
<tr>
<th>Item Number</th>
<th>Item Name</th>
<th>Price</th>
<th></th>
</tr>
<tr>
<td>1</td>
<td>Watch</td>
<td>0</td>
34
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>Total: <i class="fa fa-rupee"></i> 0</td>
<td><a href="success.html" class="btn btn-primary">Confirm Order</a></td>
</tr>
</table>
</div>
<footer>
</div>
</footer>
</body>
</html>
35
OUTPUT :
1) INDEX PAGE :
2) SIGN UP PAGE:
36
3) SETTINGS PAGE :
4) CART PAGE :
37
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.
38
MYSQL DATABASES :
3.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.
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));
39
3.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;
3.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.
40
Data Definition Language(DDL)
1) Primary key
2) Alter command
3) Drop command
4) Foreign key
5) Truncate
3.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.
41
3.3.8 ASSIGNMENT
★ TO CREATE THE DATABASE AND THE TABLES TO STORE THE USER DATA.
Items:
CREATE TABLE ìtems` (
ìd` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
`price` int(11) NOT NULL,
PRIMARY KEY (ìd`)
); Users:
CREATE TABLE ùsers` (
`name` varchar(255) NOT NULL,
èmail` varchar(255) NOT NULL,
`password` varchar(255) NOT NULL,
`contact` varchar(255) NOT NULL,
`city` varchar(255) NOT NULL,
àddress` varchar(255) NOT NULL,
PRIMARY KEY (ìd`)
) ;Users_items:
CREATE TABLE ùsers_items` (
ùser_id` int(11) NOT NULL,
ìtem_id` int(11) NOT NULL,
`status` enum('Added to cart','Confirmed') NOT NULL,
PRIMARY KEY (ìd`),
KEY ìtem_id` (ìtem_id`),
KEY ùser_id` (ùser_id`),
CONSTRAINT ùsers_items_ibfk_1` FOREIGN KEY (ùser_id`) REFERENCES ùsers` (ìd`),
CONSTRAINT ùsers_items_ibfk_2` FOREIGN KEY (ìtem_id`) REFERENCES ìtems` (ìd`)
);
42
1) LOGIN PAGE :
2) WORKING AREA :
43
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;
44
$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 ;
}
?>
<body>
$var=1;
45
$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 of characters that can contain spaces and numbers.
<?php
$variable1=18;
echo”The value of variable1 is “$variable1”
To calculate string length ;
<?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.
46
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
2.4.6 ASSIGNMENT
★ TO BUILD ALL THE MAIN PAGES OF THE ECOMMERCE WEBSITE
USING PHP FRAMEWORK.
1)INDEX.php:
<?php
// if already logged in, go to products page
if(isset($_SESSION["email_id"])){
header("location: products.php");
}
require "./includes/common.php";
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/
47
</head>
<body>
<?php
require './includes/header.php';
?>
<div id="banner-image">
<h1>We sell lifestyle</h1>
<p>Flat 40% OFF</p>
<a href="products.php">
<button class="btn btn-danger btn-lg active">Shop Now</button>
</a>
</div>
</div>
</div>
<?php
require './includes/footer.php';
?>
</body>
</html>
2) INDEX.CSS :
#banner-image {
padding-top: 75px;
48
text-align: center;
color: #f8f8f8;
background: url("images/intro-bg_1.jpg");
background-position: center;
background-repeat: no-repeat;
}
#banner_content {
position: relative;
padding-top: 6%;
padding-bottom: 6%;
margin: 12% auto;
max-width: 660px;
} footer {
position: fixed;
padding: 10px 0;
text-align: center;
bottom: 0;
color: #9d9d9d;
width: 100%;
}
.panel-margin {
margin-top: 80px;
}
.text-centre {
text-align: center;
}
49
3) SIGN UP.php :
<?php
if(isset($_SESSION["id"])){
header("location: products.php");
}
require "./includes/common.php";
?>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<?php
require "./includes/header.php";
?>
<h2 class="panel-title">SignUp</h2>
</div>
50
<form method="post" action="signup_script.php">
<input type="text" class="form-control" name="name" placeholder="Name" required>
</div>
<input type="email" class="form-control" name="email" placeholder="Email" required>
</div>
<input type="password" class="form-control" name="password" placeholder="Password"
required>
</div>
<input type="number" class="form-control" name="contact" placeholder="Contact" required>
</div>
<input type="text" class="form-control" name="city" placeholder="City" required>
</div>
<input type="text" class="form-control" name="address" placeholder="Address" required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="panel-footer">
Already have an account?Click <a href="login.html">here</a> to create one.
</div>
</div>
</div>
<?php
require "./includes/footer.php";
51
?>
</body>
</html>
4) SETTINGS.php :
<?php
require './includes/common.php';
// check if logged in if(!
isset($_SESSION["email_id"])){
header("location: index.php");
}
?>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<?php
?>
52
<h2 class="panel-title">Change Password</h2>
</div>
form action="settings_script.php" method="post">
<input type="password" class="form-control" name="old_pass" placeholder="Old
Password" required>
</div>
<input type="password" class="form-control" name="new_pass" placeholder="New
Password" required>
</div>
<input type="password" class="form-control" name="retype_new_pass" placeholder=
"Re-type New Password" required>
</div>
</form>
</div>
</div>
</div>
<?php
?>
</body>
</html>
53
5) CART.php :
<?php
require './includes/common.php';
// check if logged in if(!
isset($_SESSION["email_id"])){
header("location: login.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>My Cart</title>
<linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/

<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/
css/font-awesome.min.css">
</head>
<body>
<?php
// get the products purchased by the user
$user_id = $_SESSION["id"];
54
$query = "SELECT p.id, p.name, p.price FROM items p INNER JOIN users_items up ON
up.item_id = p.id WHERE up.user_id = '$user_id' AND up.status = 'Added to cart'";
$result = mysqli_query($conn, $query) or die(mysqli_error($conn));
if(mysqli_num_rows($result) == 0){
echo '<h4 class="container panel-margin">Add products to cart first.
Goto <a href="products.php">Products</a> page.</h4>';
}else{
$total = 0;
?>
<table class="table table-hover">
<tr>
<th>Item Name</th>
<th>Price</th>
<th></th>
</tr>
<?php while($row = mysqli_fetch_array($result)){ ?>
<tr>
<td><?php echo $row["id"] ?></td>
<td><?php echo $row["name"] ?></td>
<td><?php $total += $row["price"]; echo $row["price"] ?></td>
<td><a href="cart-remove.php?id=<?php echo $row["id"]; ?>">Remove</a></td>
</tr>
<?php
}
?>
<tr>
<td></td>
<td></td>
<td>Total: <i class="fa fa-rupee"></i> <?php echo $total; ?></td>
55
<td><a href="success.php" class="btn btn-primary">Confirm Order</a></td>
</tr>
</table>
</div>
<?php
}
?>
</body>
</html>
56
OUTPUT :
1) HOME PAGE :
2) SIGN UP PAGE :
57
3) CART PAGE :
4) SETTINGS PAGE :
58
TRAINING PROJECT STATEMENT
➔ TO BUILD AN E-COMMERCE WEBSITE FOR AN E-STORE.

The website will consist of HTML, CSS, BOOTSTRAP, PHP and MYSQLI code.
The website will consist of 8 HTML pages. The HTML, CSS and BOOTSTRAP
part of your code decides how your website will look, while the PHP and MySQL
part decides how it will Function. E-store is an awesome e-commerce website which
has been developed using PHP, Bootstrap and MySQL as part internshala online
training.
They will be structured as follows:
1) HTML , CSS AND BOOTSTRAP : where you will design the look of each page
of your website.
2) PHP & MySQLi: where you will add functionality to the website. This will allow
you to allow users to register and buy flowers on the website.
3) Advanced PHP Exercise: where you will add advanced features, such as
validations and security to the website.
Apart from these pages, we will need to make some small pages which will
only PHP code.
59
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">

<link href="css/bootstrap.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 style="padding-top: 50px;">

<?php
60
include 'includes/header.php';
?>

<div id="content">

<div id = "banner_image">
<center>
<h1>LifeStyle Store</h1>
<h4><p>Flat ₹2,000  OFF  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>


<div class="container text-center">
<div id="item_list">
<div class="panel-heading color">
<h3style="color:orange">Choose  From  wide &nbsp
;ranges  of  brands</h3>
</div>
61
<div class="col-sm-3">
<div class="thumbnail">
<img src="./img/watch.png" alt="watch" >
<h3>watch</h3>
</div>
</div>
</a>
</div>
<img src="./img/camera.png" alt="camera" >
<h3>Camera</h3>
</div>
</div>
</a>
</div>
<img src="./img/Shirts.png" alt="Shirts" >
<h3>Shirts</h3>
</div>
</div>
</a>
</div>
62
<img src="./Canon.png" alt="Canon" >
<h3>Canon</h3>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>

</div>

<?php
include 'includes/footer.php';
?>

</body>
</html>
2) SIGNUP.php :
<?php
} ?>
63
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sign Up | E-Store.com</title>
<link rel="shortcut icon" href="./img/srtcticon.png" type="image/png">

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

</head>
<body>
<?php include "includes/header.php"; ?
<div class="row">
<img src="./img/signuppage.jpg">
</div>
<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>
<input type="email" class="form-control" placeholder="Email"
64
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" name="email" required>
<?php
if(isset($_GET["m1"])){
echo $_GET['m1'];
}
?>
</div>
<input type="password" class="form-control" placeholder="Password"
pattern=".{6,}" name="password" required>
</div>
<input type="text" class="form-control" placeholder="Contact" maxlength="10"
size="10" name="contact" required>
<?php
if(isset($_GET["m2"])){
echo $_GET['m2'];
}
?>
</div>
<input type="text" class="form-control" placeholder="City" name="city" >
</div>
<input type="text" class="form-control" placeholder="Address name="address" >
</div>
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
Already have an account ?<a href="login.php"> Login</a>
65
</div>
</form>
</div>
</div>
</div>
<?php include "includes/footer.php"; ?>
</body>
</html>
3) HOME.php :
<?php
// Redirects the user to the products page if logged in.
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login | Life Style Store</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<?php include 'includes/header.php'; ?>
<div id="content">
66
<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" >
<h4>LOGIN</h4>
</div>
<p class="text-warning"><i>Login to make a purchase</i><p>
<form action="login_submit.php" method="POST">
<input type="email" class="form-control" placeholder="Email" name="email"
required = "true">
</div>
<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>
67
4) CONFIRM.php :
<?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'];
}
?>
68
5) SUCCESS.php :
<?php
if (!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>


</head>
<body>
<div class="container-fluid" id="content">
69
<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
if (!isset($_SESSION['email'])) {
header('location: index.php');
} ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Settings | E-Store.com</title>


70
</head>
<body>
<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">
<input type="password" class="form-control" name="old_password"
pattern=".{6,}" placeholder="Old Password" required>
</div>
<input type="password" class="form-control" name="new_password"
pattern=".{6,}" placeholder="New Password" required>
</div>
<input type="password" class="form-control" name="repnew_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>
</form>
71
</div>
</div>
</div>
<?php include 'includes/footer.php'; ?>
</body>
</html>
7) CART.php :
<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cart | Life Style Store</title>

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

</head>
<body style="padding-top: 50px;">

<?php
include 'includes/header.php';
72
?> 
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<table class="table table-striped">

<?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 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>
73
<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>

<?php include 'includes/footer.php';?>

</body>
</html>
74
8) SUCCESS.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>Success | Life Style Store</title>
</head>
<body>
<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>
9) MODAL.php :


<div class="modal fade" id="loginmodal" role="dialog">
<div class="modal-dialog">

75
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 style="color:red;"><span class="glyphicon glyphicon-lock"></span> Login</h4>
</div>
<div class="modal-body">
<form role="form">
<label for="username"><span class="glyphicon glyphicon-user"></span>Username</label>
<input type="text" class="form-control" id="username" placeholder="Enter email">
</div>
<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>
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
</div>
76
10) 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;
}
.rmvb{
list-style: none;
padding-left: 50px;
}
.color{
text-align: center;
text-transform: uppercase;
}
.thumbnail1{
77
overflow: auto;
padding: 10px 0 0 10px;
}
#banner_image {
text-align: center;
color: #f8f8f8;
background: url(../img/bg.jpg) no-repeat center center;
}
#banner_content {
position: relative;
padding-top: 6%;
padding-bottom: 6%;
margin-top: 12%;
margin-bottom: 12%;
max-width: 600px;
border-radius: 25px;
}
.modal-header, .close{
background-color:orange;
color: white !important;
text-align: center;
font-size: 50px;
}
.modal-footer{
background-color: #f9f9f9;
}
#item_list {
78
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{ flo
at: left; width:
33.33%;
padding: 5px;
}
.row:after{ c
ontent: "";
display: table;
clear: both;
}
79
#thmb{ f
loat: left;
padding: 0 20px 0 30px;
}
#bdy{
padding-top: 80px;
}
.thumbnail1{ o
verflow: auto;
padding: 10px 0 0 10px;
}
.red{ co
lor: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_link{
color:#0000ff;
}
80
OUTPUT :
1)HOME PAGE :
2) LOGIN PAGE :
81
3) SIGN UP PAGE :
4) SETTINGS PAGE :
82
5) PRODUCTS PAGE :
6)CART PAGE :
83
7) SUCCESS PAGE :
8) NAVIGATION BAR :
84
3.2 DISCUSSION
The above code is an Home Page of an Lifestyle Store created for the shopping
of watches, shirts and cameras. In this as a web developer created a website of
Lifestyle store in which a user can sign up in the website and can order items by
adding them to the cart and placing orders anytime. The web page is made very
user friendly so that it can be easily operated by the user .The home page is very
simple and convenient to use. The user can even signout from the website if
required. If the user forgets the password he/she can even change the password.
85
CHAPTER 4 PROJECT CONCLUSION
4.1 CONCLUSION
After this six weeks of training at Internshala I get an introduction to the web
Development and also able to create my own website page using various method
like Netbeans , Bootstrap and Wampserver(PhpMyadmin). This course gives a basic
idea to a person about creating a web page using different languages and styling
over a course of Six weeks so that a person can become comfortable in the field
and he/she if wanted can be able to pursue a career in this and can go deep into
the libraries used in the training. The Languages such as HTML, SQL and PHP are
very easy and user friendly so that a person can able to focus more on the web
developing aspect on the other hand he/she can also able to switch to the web
designing in web development if he/she is comfortable in it.
4.2 FUTURE SCOPE

The Web Developer bears the responsibility for the coding, design, and layout of the
website according to the company’s specifications. A website is more important than
anything for every business when it comes to reaching clients online. Every business
knows today the need to have a website and is trying to design and create the best
website to take its products or services online. With incredible progress in launching
websites, businesses are searching for people who can build outstanding designs and
platforms for their online presence.Web developers and designers bring their technical
skills and experience to the creation and production of exclusive websites capable of
attracting the crowd. They are striving to create more reliable sites through all-new
frameworks, tools, and advancements.
86
1) ARTIFICIAL INTELLIGENCE
Artificial intelligence does not need to be introduced. Every article on technology,
which we read on the web, reflecting the need for AI and how it would be the
next thing on the web.
AI is the future trend of web space development. It is justified as a lot of

progress and advancements have been made in the field of Artificial Intelligence.
Leading corporate companies like Google and Microsoft have launched their AI
technology for the public, you can build your custom websites with the power
of AI.
2) INTERNET OF THINGS(IOT)
It’s a technology that is emerging at a faster rate than imagined. IoT is a future
technology that makes our lives in management easy and efficient.Web developers
are not directly linked to IoT, but will soon be involved in developing web
applications that are needed for analysis and data for their operations. Few
companies have started using Application Programming Interfaces, which are used
by web developers to communicate with IoT. It would involve a connection
between applications and physical devices that would require flexible developers.
3) VIRTUAL REALITY
Virtual reality is the long-awaited dynamic that many thought would take the
world by storm, affecting everything in its path. Virtual reality is designed to affect
many different elements of web design for a variety of different reasons. VR is
sculpting a web path and is set to affect web design in many interesting new
ways. Some MNCs and giants, such as Google and Microsoft, have already
implemented virtual reality or web VRs. Virtual reality can simply be defined as
the process of implementing computer technology to create a stimulating
environment.
87
REFERENCE
1) https://:youtube.com
2) https://trainings.internshala.com/
3) https://www.wikipedia.org/
4) https://github.com/
5) https://www.scribd.com/
6) https://stackoverflow.com/
88

Internshala - Webdevelopment - Report (1) MD HASNAIN

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Internshala - Webdevelopment - Report (1) MD HASNAIN

Uploaded by

Copyright:

Available Formats

A REPORT OF SIX WEEKS INDUSTRIAL TRAINING

DEPARTMENT OF INFORMATION TECHNOLOGY

DEPARTMENT OF INFORMATION TECHNOLOGY

HALDIA INSTITUTE OF TECHNOLOGY

I, MD HASNAIN hereby declare that I have undertaken six weeks industrial

training at INTERNSHALA during a period from 6th MARCH to 18th APRIL in

partial fulfillment of requirements for the award of degree of B-Tech

(INFORMATION TECHNOLOGY) at Haldia Institute of Technology, Haldia. The

INFORMATION TECHNOLOGY at Haldia Institute of Technology, Haldia is an

authentic record of training work.

Internshala is an internship and online training platform, based in Gurgaon, India.

Topics Page no.

1.1 WEB DEVELOPMENT

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

Bootstrap is a free and open-source CSS framework directed at responsive, Mobile-

2.1.0 HTML (FRONT END DEVELOPMENT)

2.1.1 HTML INTRODUCTION

2.1.2 HTML PAGE STRUCTURE

2.1.4 TEXT FORMATTING

2.1.6 CASCADING STYLE SHEETS (CSS)

2.1.7 BOX MODEL

1) Each and every element can be considered as a box.

2.1.9 NAVIGATION BAR

2.2.1 BOOTSTRAP INTRODUCTION ( FRONT END DEVELOPMENT)

Linking Javascript File(Jquery) :

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

★ Second method to link Bootstrap file :

2.2.3 JUMBOTRON AND GLYPHICONS

2.3.1 SQL INTRODUCTION ( BACK END DEVELOPMENT)

SQL is a domain-specific language used in programming and designed for

2.3.3 CREATING DATABASE

3.3.4 DATA DEFINITION LANGUAGE(DDL)

3.3.6 FOREIGN KEY AND TRUNCATE

To view relation views add storage to innodb operations.

3.3.7 DATA MANIPULATION LANGUAGE(DML)

2.4.1 PHP INTRODUCTION ( BACK END DEVELOPMENT )

2.4.3 VARIABLES , DATA TYPES AND OPERATORS

2.4.4 FUNCTIONS , ARRAYS AND STRINGS

➔ TO BUILD AN E-COMMERCE WEBSITE FOR AN E-STORE.

3.1 PROJECT CODE

4.2 FUTURE SCOPE

AI is the future trend of web space development. It is justified as a lot of

You might also like