INDUSTRIAL TRAINING REPORT

A report submitted in partial fulfillment of the requirements for the Award of

Diploma
in
electro
by

Febin.a
Reg No20200739
Under Supervision of
Mrs. Aswin.shashi

KELTRON KNOWLEDGE CENTRE

Vazhuthacadu, Trivandrum
(Duration : 20.12.2021 to 02.01.2022)

DEPARTMENT OF COMPUTER ENGINEERING

YOUNUS COLLEGE OF POLYTECHNIC

THALACHIRA, KOTTARAKKARA

JANUARY 2022
Page 1 of 44
 YOUNUS COLLEGE OF POLYTECHNIC
THALACHIRA, KOTTARAKKARA

DEPARTMENT OF COMPUTER ENGINEERING

CERTIFICATE

This is to certify that the “ Industrial Training Report ” submitted by SOORAJ

S (Reg No.19138288) is a work done by her and submitted during 2021-2022

academic year, in partial fulfillment of the requirements for the award of

Diploma in COMPUTER ENGINEERING, at KELTRON KNOWLEDGE

CENTRE,

Vazhuthacadu, Trivandrum.

Dept. Industrial Training Cordinator KARTHIKA R S

SOORAJ S Head of the Department

Dept. of CS

Page 2 of 44
 Paste your certificate
color copy given from the company here

Page 3 of 44
 ACKNOWLEDGEMENT

First I would like to thank Mrs. POORNIMA, HR, Head of KELTRON

KNOWLEDGE CENTRE, Vazhuthacadu, Trivandrum for giving me the
opportunity to do an internship within the organization.

I also would like all the people that worked along with me KELTRON
KNOWLEDGE CENTRE, Vazhuthacadu, Trivandrum with their patience
and openness they created an enjoyable working environment.

It is indeed with a great sense of pleasure and immense sense of gratitude that I
acknowledge the help of these individuals.

I am highly indebted to Principal for the facilities provided to accomplish this

industrial training.

I would like to thank my Head of the Department And College internship

coordinator for her constructive criticism throughout my industrial training and
advices to get and complete internship in above said organization.

I am extremely great full to my department staff members and friends who

helped me in successful completion of this internship.

SOORAJ S

(Reg. No. 19138288)

Page 4 of 44
 ABSTRACT

Organization Information

Keltron hires you more to mould you meet larger challenges than extract what

is in you. We believe that, as you grow, so does the organization. Our

philosophy is to make technology make a difference in your life, and in the

lives of people around you. To help us do this, we encourage you to find better

ways to what we have been doing and to what we would do next. At Keltron,

you can build a fulfilling career in technology, manufacturing, consulting, e-

governance, marketing and sales and general administration functions and have

the opportunity to rub shoulders with leaders in the trade.

Programs and opportunities:

This ground up approach helps us deliver not only the solution to our clients

but also add value to At the core Keltron operates in three specific domains

namely Software Development, Website Design& Development and

Geographic Information Services. We also offer our services in building E-

Commerce solutions, Search Engine Optimization (SEO) and Database

Administration services. Under each division we further provide specific

industry solutions on focused domains with cutting edge technologies. We

Page 5 of 44
emphasize on building relationships with our clients by delivering projects on

time and within budget.

Methodologies:

We follow a structured methodology for our projects which starts from

designing the solution to the implementation phase. Well planned Project
reduces the time to deliver the project and any additional ad-hoc costs to our
clients, hence we dedicate majority of our time understanding our clients
business and gather requirements. This ground up approach helps us deliver
not only the solution to our clients but also add value to your investments.

Key parts of the report:

Under each division we further provide specific industry solutions on

focused domains with cutting edge technologies.

Benefits of the Company/Institution through our report:

Under each division we further provide specific industry solution on focused

domains with cutting edge technologies. We emphasize on building
relationships with our clients by delivering projects on time and within
budget

Page 6 of 44
S.no CONTENTS Page no

1. Introduction 8

2. THE IMPORTANCE OF WEB DEVOLPEMENT 9

3. TECHNOLOGIES 10

4. HTML 12

5. CSS 27

6. JAVASCRIPT 28

7. PHP 29

8. CREATE A WEBSITE USING HTML CSS AND 31

JAVASCRIPT THAT STORES DATA IN
FIREBASE

9. CONCLUSIONS 44

Page 7 of 44
 INTRODUCTION TO WEB DEVELOPMENT

Web programming, also known as web development, is the creation of

dynamic web applications. Examples of web applications are social networking

sites like Facebook or e-commerce sites like Amazon.

The good news is that learning web development is not that hard!

In fact, many argue it’s the best form of coding for beginners to learn. It’s

easy to set up, you get instant results and there’s plenty of online training

available. A lot of people learn web coding because they want to create the next

Facebook or find a job in the industry. But it’s also a good choice if you just

want a general introduction to coding, since it’s super easy to get started. No

matter whether you’re looking for a career or just want to learn coding, learning

how to develop for the web is for you. It’s one of the smartest decisions you

will ever make!

Page 8 of 44
 THE IMPORTANCE OF WEB DEVOLPEMENT

For very large organizations, web development teams can be made up of

hundreds of people. An ever growing set of tools and technologies means that
developers can build even more dynamic and interactive websites.

For example, online retailers such as Amazon and auction sites like
eBay have changed the way consumers find and buy goods.

The web development teams behind those websites are making the user
journey easy to enable consumers to buy as quickly as possible. Thus
increasing sales. Also, the design is key in attracting consumers to use the
websites repeatedly.

Furthermore blogs are changing the way people communicate and

write about their own experiences.

An excellent blog can raise interest in your business and provide users
with valuable content. This is all part of the clients experience when they
visit your website.

Additionally, the rise in cloud services such as dropbox and google drive
means that users can now interact with applications from many locations.

For example, you no longer need to work on or visit a website from a

single workstation. A good responsive website is accessible from any device
and any location.

Page 9 of 44
 TECHNOLOGIES

There are two main categories of coding, scripting and programming

for creating Web Applications:

I.Client Side Scripting / Coding - Client Side Scripting is the type of code that
is executed or interpreted by browsers.
Client Side Scripting is generally viewable by any visitor to a site (from
the view menu click on "View Source" to view the source code).

Below are some common Client Side Scripting technologies:

 HTML (Hyper Text Markup Language)
 CSS (Cascading Style Sheets)
 JavaScript
 Ajax (Asynchronous JavaScript and XML)
 jQuery (JavaScript Framework Library - commonly used in Ajax
development)
 Moo Tools (JavaScript Framework Library - commonly used in Ajax
development)
 Dojo Toolkit (JavaScript Framework Library - commonly used in Ajax
development)

Page 10 of 44
II.Server Side Scripting / Coding - Server Side Scripting is the type of code
that is executed or interpreted by the web server.
Server Side Scripting is not viewable or accessible by any visitor or
general public.

Below are the common Server Side Scripting technologies:

 PHP (very common Server Side Scripting language - Linux / Unix
based Open Source - free redistribution, usually combines with
MySQL database)
 Zend Framework (PHP's Object Oriented Web Application
Framework)
 ASP (Microsoft Web Server (IIS) Scripting language)
 ASP.NET (Microsoft's Web Application Framework - successor of
ASP)
 ColdFusion (Adobe's Web Application Framework)
 Ruby on Rails (Ruby programming's Web Application Framework -
free redistribution)
 Perl (general purpose high-level programming language and
Server Side Scripting Language - free redistribution - lost its
popularity to
PHP)
 Python (general purpose high-level programming language and Server
Side Scripting language - free redistribution)

Page 11 of 44
 HTML (HYPERTEXT MARKUP LANGUAGE)

What is HTML?

HTML is the language in which most websites are written. HTML is

used to create pages and make them functional.

The code used to make them visually appealing is known as CSS and we
shall focus on this in a later tutorial. For now, we will focus on teaching you
how to build rather than design.

The History of HTML

HTML was first created by Tim Berners-Lee, Robert Cailliau, and others
starting in 1989. It stands for Hyper Text Markup Language.

Hypertext means that the document contains links that allow the
reader to jump to other places in the document or to another document
altogether. The latest version is known as HTML5.

A Markup Language is a way that computers speak to each other to

control how text is processed and presented. To do this HTML uses two
things: tags and attributes

HTML Tags

An HTML tag is a piece of markup language used to indicate

the beginning and end of an HTML element in an HTML document.

Page 12 of 44
As part of an HTML element, HTML tags help web browsers convert HTML
documents into web pages. For example, the <p tag is used to organize
text >
content into paragraph elements and the <img tag is used to
>
embed image elements.

Many tags, though not all, use an opening tag and closing tag to wrap
around the content that they are used to modify. Closing tags are denoted
with a backslash like this: </tag_name>. HTML tags are not visible in the
browser.

Basic HTML Tags

Tag Description

<!DOCTYPE> Defines the document type

<html> Defines an HTML document

<title> Defines a title for the document

<body> Defines the document’s body

<h1> to <h6> Defines HTML headings

<p> Defines a paragraph

<br> Inserts a single line break

<hr> Defines a thematic change in the content

<!–…–> Defines a comment

Page 13 of 44
Formatting Tags

Tag Description

<acronym> Not supported in HTML5. Use <abbr> instead.

Defines an acronym

<abbr> Defines an abbreviation or an acronym

Defines contact information for the author/owner of a

<address> document/article

<b> Defines bold text

Isolates a part of text that might be formatted in a different

<bdi> direction from other text outside it

<bdo> Overrides the current text direction

<big> Not supported in HTML5. Use CSS instead.

Defines big text

<blockquote> Defines a section that is quoted from another source

<center> Not supported in HTML5. Use CSS instead.

Defines centered text

<cite> Defines the title of a work

<code> Defines a piece of computer code

<del> Defines text that has been deleted from a document

<dfn> Represents the defining instance of a term

<em> Defines emphasized text

<font> Not supported in HTML5. Use CSS instead.

Page 14 of 44
 Defines font, color, and size for text

<i> Defines a part of text in an alternate voice or mood

<ins> Defines a text that has been inserted into a document

<kbd> Defines keyboard input

<mark> Defines marked/highlighted text

<meter> Defines a scalar measurement within a known range (a gauge)

<pre> Defines preformatted text

<progress> Represents the progress of a task

<q> Defines a short quotation

Defines what to show in browsers that do not support ruby

<rp> annotations

Defines an explanation/pronunciation of characters (for East Asian

<rt> typography)

<ruby> Defines a ruby annotation (for East Asian typography)

<s> Defines text that is no longer correct

<samp> Defines sample output from a computer program

<small> Defines smaller text

<strike> Not supported in HTML5. Use <del> or <s> instead.

Defines strikethrough text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

Page 15 of 44
 <time> Defines a date/time

<tt> Not supported in HTML5. Use CSS instead.

Defines teletype text

<u> Defines text that should be stylistically different from normal text

<var> Defines a variable

<wbr> Defines a possible line-break

Forms and Input Tags

Tag Description

<form> Defines an HTML form for user input

<input> Defines an input control

<textarea> Defines a multiline input control (text area)

<button> Defines a clickable button

<select> Defines a drop-down list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<label> Defines a label for an <input> element

<fieldset> Groups related elements in a form

<legend> Defines a caption for a <fieldset> element

<datalist> Specifies a list of pre-defined options for input controls

<keygen> Defines a key-pair generator field (for forms)

<output> Defines the result of a calculation

Page 16 of 44
Frame Tags

Tag Description

<frame> Not supported in HTML5.

Defines a window (a frame) in a frameset

<frameset> Not supported in HTML5.

Defines a set of frames

<noframes> Not supported in HTML5.

Defines an alternate content for users that do not support frames

<iframe> Defines an inline frame

Images Tags

Tag Description

<img> Defines an image

<map> Defines a client-side image-map

<area> Defines an area inside an image-map

Used to draw graphics, on the fly, via scripting (usually

<canvas> JavaScript)

<figcaption> Defines a caption for a <figure> element

Page 17 of 44
 <figure> Specifies self-contained content

Audio / Video Tags

Tag Description

<audio> Defines sound content

Defines multiple media resources for media elements (<video>

<source> and <audio>)

<track> Defines text tracks for media elements (<video> and <audio>)

<video> Defines a video or movie

Links Tags

Tag Description

<a> Defines a hyperlink

Defines the relationship between a document and an external

<link> resource (most used to link to style sheets)

<nav> Defines navigation links

Page 18 of 44
Lists Tags

Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dir> Not supported in HTML5. Use <ul> instead.

Defines a directory list

<dl> Defines a description list

<dt> Defines a term/name in a description list

<dd> Defines a description of a term/name in a description list

<menu> Defines a list/menu of commands

Defines a command/menu item that the user can invoke from a

<menuitem> popup menu

Tables Tags

Tag Description

<table> Defines a table

<caption> Defines a table caption

Page 19 of 44
 <th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

Specifies column properties for each column within a

<col> <colgroup> element

Specifies a group of one or more columns in a table for

<colgroup> formatting

Styles and Semantics Tags

Tag Description

<style> Defines style information for a document

<div> Defines a section in a document

<span> Defines a section in a document

<header> Defines a header for a document or section

<footer> Defines a footer for a document or section

<main> Specifies the main content of a document

Page 20 of 44
 <section> Defines a section in a document

<article> Defines an article

<aside> Defines content aside from the page content

<details> Defines additional details that the user can view or hide

<dialog> Defines a dialog box or window

<summary> Defines a visible heading for a <details> element

Meta Info Tags

Tag Description

<head> Defines information about the document

<meta> Defines metadata about an HTML document

Specifies the base URL/target for all relative URLs in a

<base> document

<basefont> Not supported in HTML5. Use CSS instead.

Specifies a default color, size, and font for all text in a document

Page 21 of 44
 Programming Tags

Tag Description

<script> Defines a client-side script

Defines an alternate content for users that do not support client-

<noscript> side scripts

<applet> Not supported in HTML5. Use <embed> or <object> instead.

Defines an embedded applet

<embed> Defines a container for an external (non-HTML) application

<object> Defines an embedded object

<param> Defines a parameter for an object

Generic Attributes

Here's a table of some other attributes that are readily usable with many of the
HTML tags.

Attribute Options Function

align right, left, center Horizontally aligns tags

Page 22 of 44
valign top, middle, bottom Vertically aligns tags within an HTML
element.

bgcolor numeric, hexidecimal, Places a background color behind

RGB values an element

background URL Places a background image behind

an element

id User Defined Names an element for use with Cascading

Style Sheets.

class User Defined Classifies an element for use with

Cascading Style Sheets.

width Numeric Value Specifies the width of tables, images, or

table cells.

height Numeric Value Specifies the height of tables, images, or

table cells.

title User Defined "Pop-up" title of the elements.

Example for CSS

<!DOCTYPE HTML>
Page 23 of 44
<!-- This is how HTML comments look like -->

<html>

<!-- the title will appear on the page-->

<head>

<title>Employee Interests Survey</title>

</head>

<body>

<!-- as it is a survey form, we will need to submit the details, hence we use
form
-->

<!-- We can give absolute url, or relative url like /nextpage.jsp, and specify
POST or GET method -->

<form action="http://google.co.in">

<!-- If we remove this, every thing will move to the left of the page-->

<div align="center">

<!--Adds a heading to the form-->

<h1>Employee Interests Survey form</h1>

Enter your name:

<!-- Input type text for small texts, specify

size -->

<input type="text" name="UserName"

size=35 maxlength=35 value="">

<!--Adds spaces - remove and see what

happens -->
Page 24 of 44
</br></br>

Enter your department:

<input type="text" name="Deptt" size=35 maxlength=35 value=""> </br> </br>

Tell us a little about yourself:

<!-- For writing lot of text like descriptions with text wrapping,

if you dont want text wrapping, you can add wrap = "off" (horizontal scrollbar -
->

<textarea name="Comments" cols=30 rows=4></textarea> </br> </br>

Do you exercise at home?

<!-- Radio buttons help you choose one out of the many values -->

<input type="radio" name="exe" value=1>Yes

<input type="radio" name="exe" value=2>No

</p>

How do you like to read about your favorite topics?

<p>

<!--Checkbox lets you select multiple options -->

<input type="checkbox" name="Books">Books

<input type="checkbox" name="Web">Online resources

<input type="checkbox" name="Phone">Phone apps

<input type="checkbox" name="Magazines">Magazines

</p>

What genre of movies do you like?

<!--Select box lets you choose one of the multiple dropdown options--
>

<select name="moviepref" ><option> Page 25 of 44

<option value=1 selected = "true">comedy

<option value=2 >romance

<option value=3 >thriller

<option value=4 >horror

<option value=5 >biopic

</select>

</br></br>

<!--submits the information entered in the form by the user -->

<input type=submit value="Submit form">

</div>

</form>

</body>

</html>

OutPut:

Page 26 of 44
 CSS: CASCADING STYLE SHEETS

Cascading Style Sheets (CSS) is a stylesheet language used to describe

the presentation of a document written in HTML or XML (including XML
dialects such as SVG, MathML or XHTML). CSS describes how elements
should be rendered on screen, on paper, in speech, or on other media.

Example for CSS

<!DOCTYPE html>
<html>
<head><>Page Title</>
<
style>
body {
b
ackgr
ound-
color:
lightb
lue;
}
h
1{
c
olor:
white;
t
ext-
align:
center
;
}
p
{
font-family: Page 27 of 44

verdana; font-size:
20px;
OutPut :

JAVASCRIPT

JavaScript is a text-based programming language used both on the

client- side and server-side that allows you to make web pages interactive.
Where HTML and CSS are languages that give structure and style to web
pages, JavaScript gives web pages interactive elements that engage a user.

One of many JavaScript HTML methods is getElementById().

The example below "finds" an HTML element (with id="demo"), and

changes the element content (innerHTML) to "Hello JavaScript":

Page 28 of 44
Example Program

<!DOCTYPE html>

<html>

<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" = "Hello

JavaScript!"'>Click Me!</button>

</body>

</html>

OutPut :

PHP HYPERTEXT PREPROCESSOR

PHP, a server-side language that has been around for more than 25 years, tends
to evoke some strong opinions among developers today. Whenever a new
programming language or tool emerges, you’ll probably find a discussion over
where PHP is ‘dead’. It is true that PHP has slipped down the rankings of the
Page 29 of 44
most popular programming languages, from 5th in 2017 to 8th in 2020 as per
the Stack Overflow annual developer survey. And yet, PHP continues to be
used by nearly 80% of all websites, powering some major platforms like
Wordpress and Facebook. So what gives?

WHY IS PHP STILL SO WIDELY USED?

PHP (Hypertext Preprocessor) is known as a general-purpose scripting language
that can be used to develop dynamic and interactive websites. It was among the
first server-side languages that could be embedded into HTML, making it easier
to add functionality to web pages without needing to call external files for data.
Its use has evolved over the years, with regular upgrades (version 8.0 was
released in November 2020) adding features and unlocking new capabilities.

Example Program

<!DOCTYPE html>

<html>

<body>

<h1>My first PHP page</h1>

<?php

echo "Hello World!";

?>

</body>

</html>
Page 30 of 44
OutPut :

CREATE A WEBSITE USING HTML CSS AND JAVASCRIPT

THAT STORES DATA IN FIREBASE

Step by Step Implementation:

Step 1: Firstly, We are going to create a project on Firebase to connect our

static web page. Visit the Firebase page for configuring your project. Visit the
website and click the On Add Project button as shown below.

Page 31 of 44
Step 2: Give a Name to your project and click on the Continue button.

Step 3: Now click on the Continue button.

Page 32 of 44
Step 4: Now choose Default Account For Firebase and click on the
Create Project button.

Step 5: Now your project is created and you are now good to
go.

Page 33 of 44
Step 6: Now click on the 3rd icon that’s the Web button(</>).

Step 7: Give a nickname to your web project and click on the Register
App button.

Page 34 of 44
Step 8: Now you will see the configuration of your App like this. Copy
this code somewhere as we will use it later.

Step 9: Click on the Realtime Database as shown below.

Page 35 of 44
Step 10: Now click on the Create Database button.

Step 11: Now click on the Test Mode and then click on the Enable button.

Page 36 of 44
Step 12: Activate Firebase Storage. Click on Storage button in the left and
the click on Get Started.

After that this box will pop up . Click on Next.

Page 37 of 44
Then Click on Done.

Project Setup:

Now Create an HTML file and copy the script code which you copied in Step
8. The following file is just a sample for you to understand how to configure
your project.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Collecting Data</title>

<script src=

"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
Page 38 of 44
 </script>

<link rel="stylesheet" href=

"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"

integrity=
"sha384-
TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2x
Xr2"

crossorigin="anonymous">

</head>

<body class="container" style="margin-top: 50px;

width: 50%; height:auto;">

<h2 class="text-primary" style=

"margin-left: 15px; margin-bottom: 10px">

Hey There,Help Us In Collecting Data

</h2>

<form class="container" id="contactForm">

<div class="card">

<div class="card-body">

<div class="form-group">

<label for="exampleFormControlInput1">

Enter Your Name

Page 39 of 44
 </label>

<input type="text" class="form-control"

id="name" placeholder="Enter your name">

</div>

<div class="form-group">

<label for="exampleFormControlInput1">

Email address

</label>

<input type="email" class="form-control"

id="email"
placeholder="name@example.com">

</div>

</div>

<button type="submit" class="btn btn-primary"

style="margin-left: 15px; margin-top: 10px">

Submit
</button>

</div>

</form>

<script src= "https://

www.gstatic.com/firebasejs/3.7.4/firebase.js">
Page 40 of 44
</script>

<script>

var firebaseConfig = {

apiKey: "Use Your Api Key Here",

authDomain: "Use Your authDomain Here",

databaseURL: "Use Your databaseURL Here",

projectId: "Use Your projectId Here",

storageBucket: "Use Your storageBucket Here",

messagingSenderId: "Use Your messagingSenderId Here",

appId: "Use Your appId Here"

};

firebase.initializeApp(firebaseConfig);

var messagesRef = firebase.database()

.ref('Collected Data');

document.getElementById('contactForm')

.addEventListener('submit', submitForm);

function submitForm(e) {

e.preventDefault();

Page 41 of 44
 // Get values

var name = getInputVal('name');

var email = getInputVal('email');

saveMessage(name, email);

document.getElementById('contactForm').reset();

// Function to get get form values

function getInputVal(id) {

return document.getElementById(id).value;

// Save message to firebase

function saveMessage(name, email) {

var newMessageRef = messagesRef.push();

newMessageRef.set({

name: name,

email:

email,

});

</script>

</body>

</html> Page 42 of 44
Output:

Entering some sample values of Name and Email address in the given form
as shown below.

After clicking the Submit button, the data is getting stored in the real-
time database as shown below.

Page 43 of 44
 CONCLUSIONS
Summary

In today's Web development, a good page design is essential. A bad design will
lead to the loss of visitors and that can lead to a loss of business. In general, a
good page layout has to satisfy the basic elements of a good page design. This
includes color contrast, text organization, font selection, style of a page, page
size, graphics used, and consistency. In order to create a well-designed page for
a specific audience. The developer needs to organized and analyze the users'
statistics and the background of the users. Although it can be hard to come up
with a design that is well suited to all of the users, there will be a design that is
appropriate for most of the audience. The better the page design, the more hits a
page will get. That implies an increase in accessibility and a possible increase
in business.

Recommendation

After analyzing all the researched information and feedback from different
users, I would recommend that a general purposed Web site should use non-
frame pages and graphics navigation bar with rollover effects. In addition to
the graphic navigation bar with rollover effects, each page should also have a
text- only navigation bar for easy control. The developer should also create a
Cascading Style Sheet to control the font and font-size and use the style sheet
throughout the site to obtain a consistent look and feel.

Page 44 of 44