1

INDUSTRIAL TRAINING REPORT

COMPLETED AT
BCCL

SUBMITTED IN PARTIAL FULFILLMENT FOR AWARD OF Degree of Diploma

Undertaken at:-
EDP, Kusunda Area
DHANBAD

Under the guidance of:- Submitted

By:-

Mr. Pawan Kumar Singh KRISH KUMAR RAWANI

Area manager (Computer Science & Engineering)
(System) BOARD ROLL :23301060030
B.C.C.L. DHANBAD

GOVERNMENT POLYTECHNIC DHANBAD

2

GOVERNMENT POLYTECHNIC
DHANBAD

DECLERATION

I “KRISH KUMAR RAWANI” certify that the work contained in this report is original and has
been done by under guidelines of my guide.

The work has not been submitted to any other institution for any diploma or degree.

I have followed the guidelines provided in preparing the report.

I have confirmed the norms and guidelines given in the ethical code of conduct of the institute.

Whenever I have material (data, coding, analysis, figure, text) from other sources, I have given due
credit to them by citing them in the text of the report and given their details in the reference. I have
further taken permission from the copyright owners of the sources, whenever necessary.

KRISH KUMAR RAWANI

(23301060030)

SIGNATURE OF STUDENT
3

CERTIFICATE

This is to certify that KRISH KUMAR RAWANI, a student of 2nd year Diploma in Computer
Science and Engineering at GOVERNMENT POLYTECHNIC DHANBAD has successfully
completed his project entitled “WEB DEVELOPMENT” and its industrial training 6 WEEKS at
System Department, Kusunda Area B.C.C.L, Dhanbad.

Mr. Pawan Kumar Singh,

Area Manager (System)

Kusunda Area, B.C.C.L DHANBAD

ACKNOWLEDGEMENT
4

I would like to extend our sincere thanks to our project guide Mr. Pawan Kumar Singh, Area
Manager (System). His consistent support helped me in accomplishing this project
successfully. His experience and technical skills always provided me guidance to work.

I am grateful to HRD department for granting me the permission to do this Training and
project in their esteemed organization.

I thank all the staff members of the organization for their co-operation throughout the
working of this project.

I am also thankful to my parents, seniors and my batch mates for showing their support,
cooperation and continuous motivation.

KRISH KUMAR RAWANI

Government Polytechnic Dhanbad

CONTENTS
5

SL NO. TOPICS PG. NO.

1 CERTIFICATE 5

2 INTRDUCTION 9

3 INTRODUCTION OF WEB DEVLOPMENT 10

4 FRONTED DEVLOPMENT 11-12

5 BACKEND DEVLOPMENT 13-14

6 HTML 15-16

7 CSS 17-19

8 JAVASCRIPTS 20-21

9 JQUERY 22-23

10 BOOTSTRAP 24-25

11 PHP 26-27

12 CONCLUSION 28

13 BIBLIOGRAPHY 29

14 PROJECT 30-31
6

LIST OF FIGURES

FIG NO. TOPICS PAGE NO.

1 FRONTED FIGURE 11

2 BACKEND FIGURE 13

3 HTML OUTPUT FIGURE 15

4 CSS OUTPUT FIGURE 18

5 CSS BASIC LAYOUT 19

6 JAVASCRIPT OUTPUT 21

7 FIGURE JQUERY OUTPUT 23

8 FIGURE BOOTSTRAP OUTPUT 25

9 FIGURE PHP OUTPUT FIGURE 26

10 PROJECT :1 30

11 GUARD LOGIN PAGE 31

12 ADMIN LOGIN PAGE 31

7

INTRODUCTION

Web development refers to the building, creating, and maintaining of websites. It includes aspects

such as web design, web publishing, web programming, and database management. It is the creation

of an application that works over the internet i.e., websites.

This course is designed to start you on a path toward future studies in web development and design,

no matter how little experience or technical knowledge you currently have. The web is a very big

place, and if you are the typical internet user, you probably visit several websites every day, whether

for business, entertainment or education. But have you ever wondered how these websites actually?

work? How are they built? How do browsers, computers, and mobile devices interact with the web?

What skills are necessary to build a website? With almost 1 billion websites now on the internet, the

answers to these questions could be your first step toward a better understanding of the internet and

developing a new set of internet skills.

By the end of this course, you’ll be able to describe the structure and functionality of the world wide

web, create dynamic web pages using a combination of HTML, CSS, and JavaScript, apply essential

programming language concepts when creating HTML forms, select an appropriate web hosting
service, and publish your webpages for the world to see.
8

INTRODUCTION OF WEB DEVLOPMENT

Web development refers to the building, creating, and maintaining of websites. It includes aspects such
as web design, web publishing, web programming, and database management. It is the creation of an
application that works over the internet i.e., websites.
The web development hierarchy is as follows:
 Client-side coding.
 Server-side coding.
 Database technology.

CLIENT- SIDE CODING- Client-side refers to a specific part of client/server architecture, which
is a network structure distinguishing clients or computers ordering information from servers,
hardware delivers that information and process requests.

SERVER- SIDE CODING -Server-side scripting is a technique used in web development which
involves employing scripts on a web server which produces a response customized for each user's
(client's) request to the website.

DATABASE TECHNOLOGY- Database technologies take information and store, organize, and
process it in a way that enables users to easily and intuitively go back and find details they are searching
for.

Web Development can be classified into two ways:

Frontend Development
Backend Development
9

FRONTEND DEVLOPMENT

FRONTEND DEVLOPMENT: The part of a website that the user interacts directly is

termed as front end. It for.

It is also referred to as the ‘client side’ of the application.

FIG NO.: 1

HTML: HTML stands for Hypertext Markup Language. It is used to design the front- end portion of
web pages using markup language. It acts as a skeleton for a website. since it is used to make the
structure of a website.

CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language intended
to simplify the process of making web pages presentable. It is used to style us website.

JAVASCRIPT: JavaScript is a scripting language used to provide a dynamic behavior to

us website.
10

BOOTSTRAP: Bootstrap is a free and open-source tool collection for creating responsive
websites and web applications. It is the most popular CSS framework for developing responsive,
mobile-first websites. Nowadays, the websites are perfect for all the browsers (IE, Firefox, and
Chrome) and for all size of screen.
11

BACKEND DEVLOPMENT

BACKEND DEVLOPMENT: Backend is the server side of a website. It is the part of the
website that users cannot see and interact. It is the portion of software that does not come in
direct contact with the users. It is used to store and arrange data.

Backend Roadmap:

FIG NO.: 2

PHP: PHP is a server-side scripting language designed specifically for web development.

JAVA: Java is one of the most popular and widely used programming language. It is highly scalable.

PYTHON: Python is a programming language that lets you work quickly and integrate systems
more efficiently.
12

[Link]: [Link] is an open source and cross-platform runtime environment for executing
JavaScript code outside a browser.

BACK-END FRAMEWORKS: The list of back-end frameworks is: Express, Django, Rails,
Laravel, Spring, etc.

In industrial training, I studied web technology tutorials the tutorials that I read were these:-
Web Development Tutorials
 HTML
 CSS
 JAVASCRIPT
 JQUERY
 BOOTSTRAP
 PHP
13

HTML

HTML stands for Hypertext Markup Language. It is used to design web pages using a markup
language.

It is the combination of Hypertext and Markup language. Hypertext defines the link between the web
pages. A markup language is used to define the text document within tag which defines the structure
of web pages. It is a markup language that is used by the browser to manipulate text, images, and
other content to display in the required format.

Basic coding of HTML:-

<!DOCTYPE html>
<html>

<head>
<title>Simple Web Page</title>
</head>

<body>
<h1>Welcome to GeeksforGeeks</h1>
<p>A computer science portal for geeks</p>
</body>

</html>
OUTPUT –

FIG NO. : 3
14

USE OF HTML :-

Base for creating websites: It is the basic necessity a developer should know while building a
website from scratch.

Learn web development: It is the first step towards learning Web Development. Once you learn it,
you can build simple, static websites very easily.

Can become freelancer: Since web development has the best scope in freelancing, therefore
learning it will surely help you to get the best deals of website development in the market.
15

CSS

CSS (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it
attractive. The reason for using this is to simplify the process of making web pages presentable.
pages presentable. It allows you to apply styles to web pages. More importantly, it enables you to do
this independent of the HTML that makes up each web page.

There are three types of CSS which are given below:

Inline
Internal or Embedded
External
Basic Format: It is the basic structure of HTML webpage and we use CSS style
inside webpage. In a web page, we use internal CSS (i.e., adding CSS code
inside
<head> tag of HTML code).

<!DOCTYPE html>
<html>

<head>
<title>
Simple webpage
</title>

<! -- Stylesheet of web page -->

<style>
body {
text-align: centre;
}

h1 {
colour: green;
}
</style>
</head>

<body>
<h1>Welcome to GeeksforGeeks</h1>
16

<p>A computer science portal for geeks</p>

</body>

</html>

OUTPUT –

FIG NO:4

USE OF CSS :-

BASE FOR WEB DEVLOPMENT: HTML and CSS is the basic skill developer should know. It
is the basic skill that is required for building a website.

MAKE YOUR WEBSITE LOOK ATTRECTIVE: A website that’s dull and plain will not attract
the user most probably, so adding some style would surely make your website presentable to the
user.

MAKE THE DESIGN COME LIVE: A web developer is responsible for making the design given
to him as a live product. It is used for styling to develop the design of the website.

INCREASE USER EXOERIENCE OF THE WEBSITE: A website with a simple yet beautiful
UI would help the users to go through the website easily. It is used to make the user interface
better.
17

MORE CAREER OPPORTUNITIES: Since CSS is a basic requirement while learning Web
Development, therefor there are abundant career opportunities for it. As a freelancer, you can
land up too many projects.

The most common structure of website layout is given below:

FIG NO. : 5
18

JAVASCRIPT

JavaScript is the world most popular lightweight, interpreted compiled programming language. It
is also known as scripting language for web pages. It is well-known for the development of web
pages, many non-browser environments also use it. JavaScript can be used for Client-side
developments as well as Server-side developments.

JavaScript can be added to your HTML file in two ways:

Internal JS: We can add JavaScript directly to our HTML file by writing the code inside the <script>
tag. The <script> tag can either be placed inside the <head> or the <body> tag according to the
requirement.

External JS: We can write JavaScript code in other file having an extension .jess and then link this
file inside the <head> tag of the HTML file in which we want to add this code.

Syntax:

<script>
// JavaScript Code
</script>

Practice JavaScript code:-

<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attribute values.</p>
<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>
19

<button onclick="[Link]('myImage').src='pic_bulbon.gif'">Turn on the

light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="[Link]('myImage').src='pic_bulboff.gif'">Turn off the
light</button>
</body>
</html>
OUTPUT :-

FIG NO.- 6

NOTE:- when we push light on button then bulb trun into yellow color.
20

J QUERY

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS
document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating
the terms, it simplifies HTML document traversing and manipulation, browser event handling,
DOM animations, Ajax interactions, and cross-browser JavaScript development.

Using hover() and css() methods to change the style of heading content on mouse move over.

<!DOCTYPE html>
<html>
<head>
<script src=
"[Link]
</script>
<script>
$(document).ready(function() {
$("h1").hover(function() {
$(this).css("color", "green");
}, function() {
$(this).css("color", "aliceblue");
});
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
21

OUTPUT :-

FIG NO. : 7

NOTE : In this output cursor are movable.

USE OF J QUERY –
Some of the key points that support the answer for why to use jQuery:

 It helps us to manipulate HTML and CSS.

 It helps us to manipulate DOM (Document Object Model) elements’
 Provides event methods to trigger and respond to an events on a html page such as mouse
click, keypress etc.
 Implements AJAX calls.
22

BOOTSTRAP

Bootstrap is a free and open-source tool collection for creating responsive websites and web
applications. It is the most popular HTML, CSS, and JavaScript framework for developing
responsive, mobile-first websites. Nowadays, the websites are perfect for all the browsers (IE,
Firefox, and Chrome) and for all sizes of screens(Desktop, Tablets, Phablets, and Phones). All thanks
to Bootstrap developers – Mark Otto and Jacob Thornton of Twitter, though it was later declared to
be an open- source project.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="[Link]
<script src="[Link]
<script src="[Link]
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
23

</div>
</div>
</body>
</html>

OUTPUT :

FIG NO. : 9
24

PHP

The term PHP is an acronym for Hypertext Preprocessor. It is a server-side scripting language that is
used for web development. It can be easily embedded with HTML files. HTML codes can also be
written in a PHP file. The PHP codes are executed on the server-side whereas HTML codes are
directly executed on the browser.

<?php
$txt = "PHP";
echo "I love $txt!";
?>
OUTPUT:

FIG NO. : 10

USE OF PHP :-
Easy to Learn: It is easier to learn for anyone who has come across to any programming language
for the first time.

Free of Cost: Since it is an open-source language, therefore developers are allowed to use its
Components.

Flexible: Since it is a dynamically typed language, therefore there are no hard rules on how to build
features using it.
Supports nearly all databases: It supports all the widely used databases, including MySQL, ODBC,
SQLite etc.
25

Secured: It has multiple security levels provides us a secure platform for developing websites as
it has multiple security levels.

Huge Community Support: It is loved and used by a huge number of developers. The developers
share their knowledge with other people of the community that want to know about it.
26

CONCLUSION

Under the guidance of Shri Pawan Kumar Singh Area Manager (System) Kusunda Area as a
mentor, we have got opportunity to understand the technical and managerial aspect of
WEB DEVLOPMENT project.

The main aim of studies within this project was to investigate how a website is create
in web development. We got to know about the basic & advanced techniques of the
development platform as well as saw the challenges which a computer science &
information technology has to face during coadding i.e., error, bug, hanging, syntax
, hacking fear, etc. We cleared our many basic coadding platforms. Overall, it must be
said that the web development is the basic and important fundamental part of our
programming platform. During the period of 4 weeks all the site staff helped us a lot
to provide all the information about any query. So, we are grateful to B.C.C.L.
DHANBAD For giving us the opportunity to learn and grow.
27

BIBLIOGRAPHY

MASTRING HTML, CSS & JavaScript web publishing – BPB PUBLICATION

JAVASCRIPT & JQUEWRY- JON DUCKETT

Advance WEB DEVLOPMENT- MOHAN MEHLU

REFERENCES WEBSITE:

[Link]

[Link]

[Link]

[Link]
28

PROJECT

We have a project on topic “APPOINTMENT MANAGEMENT SYSTEM”.

We have three login pages in it i.e., Guard login page, employee login and admin login page.

GUARD LOGIN PAGE

Visitors can fill their details in guard login, filled by guard of the industry or institution and
send to employee.

EMPLOYEE LOGIN PAGE

There are two options to employee :

o To accept
o To deny
If employee accepted the request, it will be set otherwise rejected/denied.
ADMIN LOGIN PAGE
It connects the guard and employee login page. The changes made by visitors or employee ,
it will show to them respectively after changing.

BASIC STRUCTURE OF APPOINTMENT MANAGEMENT SYSTEM :

FIG NO. : 10
29

SOME FRONTED WIEW

GUARD LOGIN PAGE

ADMIN LOGIN PAGE