Mohit Swfinal Report Web
Mohit Swfinal Report Web
1
CERTIFICATE FOR TRAINING COMPLETION
2
CANDIDATE’S DECLARATION
I, Mohit Solanki hereby declare that I have undertaken six weeks industrial training at
W3School in partial fulfillment of requirements for the award of degree of B-Tech (Computer
Science and Engineering) at University College Of Engineering & Technology. The work which is
being presented in the training report submitted to the Department of Computer Science &
Engineering at University College Of Engineering & Technology, Bikaner is an authentic record of
training work.
Signature of Student
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
TABLE OF CONTENTS
Certificate by Company……………………………………………………………….. 2
Candidate’s Declaration………………………………………………………………. 3
Abstract…………………………………………………………………………………. 4
Acknowledgement…………………………………………………………………….... 5
2.1.5 Hyperlink…………………………………………………………..… 13
2.1.8 Fonts………………………………………………………………… 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.4 Forms………………………………………………………………. 25
2.2.5 Assignment…………………………………………………………. 26
2.2.6 Output……………………………………………………………… 36
2.3.8 Assignment………………………………………………………… 42
2.3.9 Output……………………………………………………………... 43
2.4.2 Basics…………………………………………………………….. 44
2.4.5 Loops………………………………………………………………. 45
2.4.6 Assignment………………………………………………………... 47
7
2.4.7 Output……………………………………………………………... 57
3.1 Coding……………………………………………………………… 60
3.2 Output……………………………………………………………… 81
3.3 Discussion…………………………………………………………… 85
4.1 Conclusion………………………………………………………….... 86
References……………………………………………………………………… 88
8
CHAPTER 1: INTRODUCTION
(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,
clientside/server-side scripting, Web server and network security configuration, and
ecommerce 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.
Frontend 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 :
2) BOOTSTRAP:
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
10
CHAPTER 2: TRAINING WORK UNDERTAKEN HTML & CSS ,
BOOTSTRAP, SQL, PHP
HTML stands for HyperText Markup Language. ( HTML ) is the standard markup
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
<!DOCTYPE html>
<!-
-->
<html>
<head>
<title> </title>
</head>
<body>
11
</body>
</html>
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.
<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
<h2>I am Heading</h2>
These tags help the browser know about the special importance of text , not just
2.1.5 HYPERLINKS
Any content , image or text can be linked to a new page. The text linked is called
target=”_self”
Cascading Style Sheets is a style sheet language used for describing the
cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
13
2.1.7 BOX MODEL
❖ Innermost box called content contains content which could be image , text.
2.1.8 FONTS
Properties :
1) Font Style 2) Font Variant 3) Font weight 4) Font Size 5) Line height
Navigation links are added using the <nav> tag. Using the <ul> tag inside the
14
To create logo in navigation bar ;
<div id=”header”>
</a>
2.1.10 FORMS
It collects information stored in databases or sent to the server. Using the <form>
<form>
<input type=”text” placeholder =”Enter first Name” name=”First name”><br><br>
<input type=”submit”>
2.1.11 ASSIGNMENT
1)INDEX.html :
<!DOCTYPE html>
<html>
<head>
<title>Lifestyle Store!</title>
</head>
<body>
<div class="header">
<div class="inner-header">
15
<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">
</div>
</div>
</div>
</div>
<div class="container">
<div class="items">
<a href="#">
<div class="caption">
<h2>Watches</h2>
16
<p>Original watches from the best brands.</p>
</div>
</a>
</div>
<div class="items">
<a href="#">
<div class="caption">
<h2>Camera</h2>
</div>
</a>
</div>
<div class="items">
<a href="#">
<div class="caption">
<h2>Shirts</h2>
</div>
</a>
</div>
</div>
<footer>
<div class="container">
<p>Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000 00000</p>
</div>
</footer>
17
</body>
</html>
2) STYLE.css :
body{ margin-
rgba(0, 0, 0, 0.7);
max-width: 660px;
}
.container{ width:90%;
margin:auto;
overflow:hidden;
.items{
width:30%;
display: block;
padding: 4px;
marginbottom:20px;
lineheight:1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
float:left;
marginleft:1%;
}
.thumbnail{ display:
block; max-width:
100%; height: auto;
}
.caption{
color:#000;
18
padding:0px 10px 10px;
font-weight: bold;
text-align: center;
}
footer{ backgroundcolor:
#000; color:#fff;
fontsize:14px; }
.button{ color:#fff;
background-color: #c9302c;
border-color: #ac2925;
padding: 10px 16px; font-
size: 18px; line-
height: 1.3333333;
border-radius: 6px;
19
OUTPUT :
★ INDEX PAGE :
20
BOOTSTRAP
Bootstrap is one of the simplest to implement and use in the market. Its
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
“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”
21
2.2.4 THUMBNAILS
<div class=”container”>
<h1>Thumbnails<h1>
<div class=”col-sm-4”>
. thumbnail { padding:4px;
<div class=”content”>
<h3> </h3>
<p> </p>
</div>
2.2.5 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”>
22
<input type=”text” class=”form-control” name=”first_name placeholder=”first_name”>
</div>
.form-group { margin-bottom:5px;
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>
<div class=”checkbox”>
I want to order :
<label>
</label>
.label { padding-left:20px; marginbottom:20px;
2.2.6 ASSIGNMENT
1)INDEX.html :
23
<!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>
</head>
<body>
<div class="container">
<div class="navbar-header">
</button>
</div>
24
<li><a href="signup.html"><span class="glyphicon glyphicon-user"></span> SignUp</a></li>
</ul>
</div>
</div>
</nav>
<div id="banner-image">
<div class="container">
<div id="banner_content">
<a href="products.html">
</a>
</div>
</div>
</div>
<footer>
<div class="container">
</div>
</footer>
</body>
</html>
2)STYLE.css :
#banner-image {
padding-top: 75px;
padding-bottom: 50px;
25
text-align: center;
color: #f8f8f8;
background: url("images/intro-bg_1.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover; }
padding-top: 6%;
padding-bottom: 6%;
margin: 12% auto; background-
color: rgba(0, 0, 0, 0.7);
max-width: 660px;
} footer {
position: fixed; padding:
10px 0; text-align: center;
bottom: 0; background-
color: #101010; color:
#9d9d9d; width:
100%; } .panel-margin {
margin-top: 80px;
marginbottom: 80px;
}.textcentre { text-align:
center;
26
4) SETTINGS.html :
<html>
<head>
<title>LifeStyle Stores</title>
css/bootstrap.min.css"">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="navbar-header">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</span> Cart</a></li>
Logout</span></a></li>
</ul>
</div>
</div>
</nav>
<div class="panel-heading">
</div>
<div class="panel-body">
<form>
<div class="form-group">
required>
</div>
<div class="form-group">
required>
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Re-type New
Password" required>
</div>
28
<button type="submit" class="btn btn-primary">Change</button>
</form>
</div>
</div>
</div> <footer>
<div class="container">
</div>
</footer>
</body>
</html>
29
OUTPUT :
1) INDEX PAGE :
2) SIGN UP PAGE:
:
3) SETTINGS PAGE
30
4) CART PAGE :
31
STRUCTURED QUERY LANGUAGE((SQL)
A system application for creating and managing your databases , access and can
DBMS Types :
2)RDBMS
INTRODUCTION TO SQL
32
MYSQL DATABASES :
1) Commands in SQL
PRIMARY KEY:
VARCHAR(30), category
33
3.3.5 ALTER AND DROP
We can alter the structure of the existing table.
1)add 2)drop
3)change 4)modify
DROP COMMAND :
Syntax :
DROP database-name.table-name
another table.
34
TRUNCATE :
1) Primary key
2) Alter command 3) Drop command
4) Foreign key
5) Truncate
INSERT :
UPDATE :
DELETE :
a row ; make sure it does not have a primary key or foreign key
35
For ex : DELETE FROM users WHERE id=’ ‘ ;
SELECT :
Select command is used to pull out the existing data from tables.
SELECT * FROM ‘ ‘
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
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
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
36
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.
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.
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.
37
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.
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/
38