MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

MUMBAI

Industrial Training Report

The complete industrial training in Web Application
by
Gursali Abhishek Ishwar

Under the Guidance of

MR. Deshmukh J.V

Lecturer
Department of Computer Technology
In partial fulfillment of SIX weeks
INDUSTRIAL TRAINING
From 3 June 2024 to 13 July 2024
(Six Week)
From
Training Organization
OWNTAP CONSULTANCY SERVICES, BEED
Submitted by
Gursali Abhishek Ishwar

[Enrollment No:-2211580218]

Department of Computer Technology

 YASHWANTRAO CHAVHAN INSTITUTE OF POLYTECHNIC, BEED
(Maharashtra State Board of Technical Education, Mumbai)

Certificate
This is to certify that the INDUSTRIAL TRAINING has been successfully completed by
Students of Second Year Diploma in Computer Technology,

Student Name: - Gursali Abhishek Ishwar

(Enrollment Number: -2211580218)

This is to certify that the undersigned has satisfactorily fulfilled the requirements for the
award of the Diploma in Computer Technology for the second year (4 th Semester) Industrial
Training, as stipulated by the Maharashtra State Board of Technical Education, Mumbai.

This individual has diligently undertaken an independent endeavor during the industrial
training, which was carried out under my vigilant supervision and guidance. The content
encompassed in the industrial training report stands as a true reflection of their autonomous
efforts.

I hereby confirm that the contents presented inn this report have not been previously
submitted for the purpose of obtaining any Diploma.

Mr. Deshmukh J. V Mr. Deshmukh J. V.

(MENTOR) (HOD CM)

[Link] [Link]
External Examiner (Principal)
CERTIFICATE
 Declaration

I, Gursali Abhishek Ishwar , bearing Enrollment Number 2211580218, hereby declare

that the industrial training project entitled "Web Development" is an authentic representation
of my own work. It is the result of my diligent efforts and dedicated research during the
industrial training period conducted as part of the curriculum for the Second Year Diploma in
Computer Technology at Yashwantrao Chavhan Institute Of Polytechnic, Beed.

I further affirm that the contents of this report have not been submitted in part or whole for
the purpose of obtaining any other degree, diploma, or certification. The information
presented in this report is based on genuine research and practical experiences encountered
during my industrial training tenure at Owntap Consultancy Services

I acknowledge the guidance and support provided by my Project Supervisor, Mr.

Deshmukh J.V., and express my gratitude for their valuable insights and mentorship
throughout the course of this project. I am also thankful to the faculty and staff of
Yashwantrao Chavhan Institute Of Polytechnic, Beed for their continuous encouragement and
provision of resources.

I understand that any misrepresentation or falsification of information in this report

may result in disciplinary actions as per the institute's policies.
 Acknowledgement

It is with immense pleasure that I extend my heartfelt gratitude and profound

appreciation to my esteemed guide and mentor, Mr. Deshmukh J.V., a distinguished Lecturer
in the Computer Technology Department. Their unwavering guidance, invaluable
encouragement, and unwavering support have been pivotal in the successful completion of
my Industrial Training at OWNTAP CONSULTANCY SERVICES.

I am deeply thankful for their sagacious suggestions that have shaped the entirety of
this endeavour. Their cooperative demeanour has truly been a guiding light throughout this
journey.

I would also like to express my sincere thanks to Mr. Deshmukh J. V., the Head of the
Computer Technology Department, for entrusting me with the opportunity to undertake this
project and for extending his wholehearted support. I extend my gratitude to [Link]
[Link]., the Principal, whose support has been invaluable.

My teachers, Mrs. Gaikwad S. S., Mr. Dhase G. N., and Mr. Damkondwar G. K., Sir
have been constant pillars of support and guidance, for which I am truly thankful.

Moreover, I wish to convey my deep sense of indebtedness to my parents and family

members, whose blessings and unwavering support have provided me with the strength and
determination to overcome the challenges that lay ahead.

This report stands as a token of my appreciation for all those who have played an
indispensable role in my journey.

Gursali Abhishek Ishwar

[2211580218]
 Abstract

This industrial training program is designed to provide participants with an immersive

and hands-on experience in web development over a span of six weeks. Covering key aspects
of front-end and back-end technologies, the program aims to equip participants with a solid
foundation in modern web development practices. The curriculum includes HTML, CSS,
JavaScript, popular frameworks like Bootstrap, server-side scripting with PHP, and database
management using MySQL. Through a combination of theoretical sessions and practical
exercises, participants will gain practical insights into designing responsive and dynamic web
applications. The training also emphasizes industry best practices, collaborative coding, and
real-world project work to ensure a holistic understanding of web development essentials.
This program is tailored to enhance participants' employability by providing them with the
skills demanded by the rapidly evolving field of web development.
 Objectives

1. Skill Enhancement:
The foremost objective of this industrial training is to enhance and refine the skills I
have acquired throughout my academic journey, particularly in the areas of CSS, JavaScript,
Bootstrap, PHP, SQL, and HTML.

2. Real-World Application:
Through hands-on experience, I aim to apply theoretical knowledge gained in the
classroom to real-world scenarios. This objective is centred on bridging the gap between
academia and industry practices.

3. Technology Proficiency:
My objective is to achieve proficiency in utilizing CSS, JavaScript, Bootstrap, PHP,
SQL, and HTML for practical web development and database management projects. This
proficiency will extend my capabilities beyond theoretical understanding.

4. Project Engagement:
I aspire to actively engage in diverse projects and assignments that require the
integration of multiple technologies. This will enable me to demonstrate my ability to work
collaboratively and independently on meaningful projects.

5. Challenges as Opportunities:
I seek to confront challenges during my industrial training and view them as
opportunities for growth. These challenges will enable me to enhance problem-solving skills,
critical thinking, and adaptability.

6. Learning Outcomes:
An objective of paramount importance is to derive significant learning outcomes from
each project, assignment, and task. I aim to deepen my understanding of concepts and
applications in Computer Technology.

7. Industry Insights:
By actively participating in the industrial environment, I intend to gain insights into
industry practices, workflow dynamics, and the practical implementation of technology
solutions.

8. Networking and Collaboration:

 I aim to build valuable professional relationships by interacting with mentors,
colleagues, and industry professionals. Collaborative experiences will foster a holistic
learning environment.

9. Documented Progress:
Throughout the training period, I intend to document my progress, achievements, and
challenges faced. This objective will contribute to a comprehensive training report and serve
as a testament to my growth.

[Link] Preparedness:
Ultimately, my objective is to be well-prepared for future career endeavours. This
industrial training will not only contribute to my immediate academic journey but also
enhance my employability in the Computer Technology sector.

By accomplishing these objectives, I am committed to making the most of this industrial

training experience and harnessing its full potential for personal and professional
development
 INDEX

Sr. No Content Page No.

1 Introduction 1

2 Company Overview 2

3 Training Period 4

4 Web Development 6

5 HTML 9

6 CSS 13

7 Bootstrap 16

8 JavaScript 20

9 PHP & MySQL 28

10 Learning Outcomes 39

11 Conclusion 41

12 Recommendations 42
 1. Introduction

6-week Industrial Training Program on Web Development—a dynamic journey into the
heart of modern digital craftsmanship. This comprehensive program is meticulously crafted
to empower participants with the essential skills and insights required to thrive in the fast-
paced realm of web development.

In an era where the digital landscape is continually evolving, proficiency in web

development has become a cornerstone for success. This training is more than just a course;
it's an immersive experience designed to bridge the gap between theoretical knowledge and
practical application.

Over the next six weeks, participants will embark on a hands-on exploration of the
fundamental pillars of web development, from crafting engaging user interfaces to building
robust server-side applications. Our goal is to not only impart technical expertise but also to
foster a mindset of innovation and problem-solving—an approach that resonates with the
demands of the ever-evolving tech industry.

Get ready to unravel the intricacies of HTML, CSS, JavaScript, and delve into the
exciting realms of popular frameworks and tools. Our dedicated team of instructors, coupled
with industry-aligned projects, will guide you through this transformative learning
experience, equipping you with the skills and confidence needed to excel in the world of web
development.

Whether you're a novice seeking an introduction to the world of coding or a seasoned

developer aiming to expand your skill set, this program is tailored to meet your needs. Let's
embark on this journey together, where curiosity meets code, and innovation becomes second
nature. Welcome to the Industrial Training Program on Web Development—where your
digital future takes shape.

1
 2. Company Overview
Owntap Consultancy Services Private Ltd.

Owntap Consultancy Services Private Ltd., established in June 2020, stands as a

dynamic entity within the technological landscape, specializing in web, Android, and
application-based solutions. With a strong foundation and a commitment to innovation,
Atharva has swiftly positioned itself as a provider of cutting-edge technology services.

Mission :- Empowering Business Growth Through Technology

At the core of Owntap’s mission lies the dedication to facilitate business growth for its
clients. This mission takes shape through the strategic implementation for their client’s
visions and ideas, fuelled by the company’s exceptional skills and technological prowess. By
seamlessly translating concepts into tangible solutions, Atharva aims to be a catalyst for its
client’s success stories.

Vision:- Forging a Trusted IT Brand

Owntap's vision extends beyond the present, aspiring to establish "Soft Smart Technology"
as a trusted brand in the realm of Information Technology. This vision is rooted in the
company's commitment to delivering solutions of the highest quality, integrating the latest
advancements in technology to cater to its clients' needs. By consistently bringing together
innovation, expertise, and customer-centricity, Owntap envisions a future where it stands as a
symbol of reliability and excellence.

Areas of Expertise:-

Specializing in web, Android, and application-based solutions, Owntap Consultancy

Services Private Ltd. employs its technical acumen to craft robust digital solutions that cater
to diverse industry needs. Their expertise spans the development of websites, harnessing the
power of Android applications, and creating versatile applications that seamlessly function
across platforms.

Dedication to Excellence:-

With a journey spanning from its establishment in June 2020, Owntap has cemented
its position as a prominent player in the technology arena. Driven by a passion for excellence,
the company continues to evolve and adapt, aligning its services with the ever-changing
technological landscape. The company's commitment to quality, customer satisfaction, and

2
embracing the latest technological trends underscores its continuous pursuit of growth and
advancement.

Conclusion:-

Owntap Consultancy Services Private Ltd. embodies the spirit of innovation and
collaboration in the realm of technology solutions. Rooted in a vision to become a trusted IT
brand, the company's journey, from its inception in 2020 to the present, reflects its dedication
to empowering business growth through skillful implementation and cutting-edge technology.
As Owntap continues to shape the digital future, its commitment to excellence remains
unwavering, making it a compelling force within the information technology sector.

3
 3. Training Period

The training program started on 3 June 2024 and concluded on 13 July 2024. This 6
Weeks training period allowed me to immerse myself in various aspects of computer
technology.

WEEKLY OVERVIEW OF INTERNSHIP ACTIVITIES

Week 1 (June 3 - June 6): Introduction and Recruitment Life Cycle –

June 3: Introduction to the company.
- June 4: Introduction to the Recruitment life cycle
- June 5: Explanation of the requirement gathering phase in the Recruitment life cycle.
- June 6: Explanation of the sourcing and selection process phases in the Recruitment life
cycle.

Week 2 (June 10 - June 13): Recruitment Life Cycle and Web Development
Introduction –
June 10: Explanation of offering and document collection in the Recruitment life cycle.
- June 11: Introduction to Web Development.
- June 12: Concept of HTML.
- June 13: Advance Concept on HTML.

Week 3 (June 17 - June 20): CSS and Bootstrap –

June 17: Introduction to CSS.
- June 18: Creation of Web Layout using CSS.
- June 19: Introduction to Bootstrap.

4
- June 20: Advanced Concepts of Bootstrap.

Week 4 (June 24 - June 27): Bootstrap, JavaScript Introduction, and Client-side Coding
- June 24: Form Creation using Bootstrap.
- June 25: Animation using Bootstrap and CSS.
- June 26: Introduction to JavaScript.
- June 27: Concept of JavaScript.

Week 5 (July 1 - July 4): JavaScript, PHP Introduction, and XAMPP Setup
- July 1: DOM and BOM Concept.
- July 2: Form validation in JavaScript.
- July 3: Client-side coding using JavaScript.
- July 4: Lecture on different phases in RMG.

Week 6 (July 8 - July 11): PHP, MySQL Integration, Web Designing, and Project
Compilation
- July 8: Concepts on PHP, functions in PHP.
- July 9: Installation of XAMPP server, executing PHP programs using XAMPP server.
- July 10: How to connect with DB using MySQL server in PHP using XAMPP server.
- July 11: Sample Programs on PHP using XAMPP.

5
 4. Web Development

Abstract:
This report provides an overview of essential concepts in web development, exploring
the Internet, World Wide Web (WWW), key protocols, web servers, browsers, and related
technologies. By delving into these foundational components, this report aims to enhance the
reader's understanding of the fundamental aspects that underpin modern web development.

Introduction:
Web development is an integral part of the digital era, contributing to the creation and
maintenance of websites and web applications. This report offers insights into various aspects
of web development, spanning from the Internet's infrastructure to the protocols and
technologies that power the World Wide Web.

The Internet:
The Internet can be described as a global network of interconnected computing
resources, a dynamic network that links computers and facilitates the exchange of
information. It comprises routers, circuits, and shared resources, functioning as a network of
networks based on the TCP/IP communications protocol.

Internet-Based Services:
This section outlines some of the foundational services available to Internet users,
including email, Telnet for remote login, FTP for file transfers, Usenet news for discussions,
and the World Wide Web (WWW) as a hypertext interface to Internet resources.

The World Wide Web (WWW):

The WWW, commonly referred to as the Web, enables the exchange of information
between computers using the Hypertext Transfer Protocol (HTTP). It ties together a vast
collection of interactive multimedia resources, serving as a central hub for accessing
information online.

6
HTTP (Hypertext Transfer Protocol):
HTTP is the protocol that facilitates the transfer of hypertext documents, forming the
backbone of the World Wide Web. Standard web addresses, known as URLs, include the
HTTP prefix, indicating the protocol used for communication.

URL (Uniform Resource Locator):

Uniform Resource Locators (URLs) are used to specify addresses on the World Wide
Web. URLs consist of a protocol, a hostname, and additional information that points to
specific resources on the web.

Website and Web Pages:

A website is a collection of web pages written in HTML markup language. Each web
page is a discrete entity, and the first page of a website is commonly referred to as the home
page.

Web Server:
Web servers host websites and make them accessible over the Internet. They are
assigned unique IP addresses and are connected to the web continuously. Web addresses
(domain names) are mapped to the IP addresses of web servers.

Browser:
Web browsers are software applications used to access the Internet and view web
pages. Examples include Netscape Navigator, Microsoft Internet Explorer, and Mozilla
Firefox. Browsing involves navigating through pages of information.

SMTP Server (Simple Mail Transfer Protocol):

SMTP servers are responsible for delivering emails from one server to another. When
sending an email, an SMTP server ensures its proper delivery.

ISP (Internet Service Provider):

ISPs provide internet connectivity to users. Users purchase space on web servers from
ISPs to host their websites.

HTML (Hyper Text Markup Language):

7
 HTML is the language used to create web pages. It forms the foundation for
structuring content on websites.

Hyperlinks:
Hyperlinks, or links, are selectable elements in electronic documents that allow access
to other resources. They include buttons, icons, image maps, and clickable text links.

DNS (Domain Name System):

The DNS translates domain names (e.g., [Link]) into IP addresses,
directing users to the correct web server hosting the site.

W3C (World Wide Web Consortium):

The W3C is an international consortium focused on developing web standards and
promoting compatibility across the Internet and the Web.

Conclusion:
This report has provided a comprehensive overview of core concepts in web
development, including the Internet's structure, the significance of the World Wide Web,
essential protocols, web servers, browsers, and related technologies. This foundational
knowledge forms the bedrock for creating, hosting, and navigating web-based content

8
 5. HTML

What is HTML?

HTML is a language for describing web pages.

 HTML stands for Hyper Text Markup Language

 HTML is not a programming language, it is a markup language
 A markup language is a set of markup tags
 HTML uses markup tags to describe web pages

HTML Tags

HTML markup tags are usually called HTML tags

 HTML tags are keywords surrounded by angle brackets like <html>

 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 Start and end tags are also called opening tags and closing tags

HTML Documents in Web Pages

The purpose of a web browser (like Internet Explorer or Firefox) is to read

HTML documents and display them as web pages. The browser does not
display the HTML tags, but uses the tags to interpret the content of the page:

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

9
</html>

Latest version of HTML?

- The Current Latest version of the HTML is version 5.
- In this version new body structure is released as follows

HTML 5 Format:
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Website</title>
<link rel="stylesheet" href="./[Link]">
</head>

<body>
<h1>Welcome to My Website</h1>
</body>

</html>

HTML Semantics tags:

HTML have multiple tags for constructing the initial structure of the website.
These tags defines which element will allocate how much space in your
document.
Examples: <header>,<nav>,<main>,<article>,<section>,etc.

Block Elements:

10
These elements allocates the total width of the row and does not depend on the
content inside them.
Block Elements allocates all the width of a page that is present in particular
section of the webpage.
Example: <p>,<div>,<h1>to<h6>,<header>,<form>,<table>,etc.

Inline Elements:
Inline element does not require all the width present at the section. It only
allocates the necessary space/ width.
Examples: <a>, <span>, <big>, <br>, <i>, <b>, <img>, <input>, etc.

Multimedia Elements:
The HTML supports embedded multimedia elements, these elements can be
used for displaying video, images, playing audio, etc.
Examples: <video>, <audio>, <img>, etc.

Table & List tags:

HTML also provides some tags for a table format and list format data
visualization. These tags can be used to create table or lists in an webpage.
Examples: <Table>, <li>, <ol>, <ul>, <tr>, <th>, etc.

Forms tags:
HTML provides form elements like <input>, <textarea>, <select>, <form>,
<button>, etc., for creating interactive forms in a webpage.

Attributes of tags:
HTML provides different attributes to the tags to edits the information in tags or
the look of the tags. These attributes can be set to particular values to get
desired output.
Examples : src, alt, class, id, style, href, etc.

11
Some main basic tags in html:
1. <html>: This tag represents the root element of an HTML document and
encloses the entire content.
2. <head>: This tag contains meta-information about the document, such as
title, character encoding, stylesheets, etc.
3. <body>: This tag holds the visible content of the webpage.
4. <h1> to <h6>: These tags are used for headings, with <h1> being the
highest level and <h6> being the lowest level.
5. <p>: This tag is used to define a paragraph.
6. <a>: This tag creates a hyperlink and is used for linking to other
webpages or sections within the same webpage.
7. <img>: This tag is used to insert an image into the webpage.
8. <ul>, <ol>, <li>: These tags are used to create unordered lists, ordered
lists, and list items, respectively.
9. <br>: This tag inserts a line break within a paragraph or text.
10.<table>: This tag is used to create a table for displaying tabular data.
11.<form>: This tag is used to create a form for user input.
12.<input>: This tag creates an input field within a form for users to enter
data.
13.<select>: This tag creates a dropdown list within a form for users to
select options.
14.<textarea>: This tag creates a multiline text input field within a form.
15.<div>: This tag is a generic container that can be used to group and style
elements.
16.<span>: This tag is similar to <div> but is used for inline elements and
smaller sections of content.
17.<header>, <nav>, <section>, <article>, <footer>: These tags are part of
semantic HTML and provide clearer code organization and improve
accessibility and SEO.

12
 6. CSS

CSS stands for Cascading Style Sheets. It's a programming language used for describing the
presentation and layout of a web page written in HTML or XML. CSS allows you to control
the visual appearance of elements on a web page, including things like fonts, colors, spacing,
positioning, and more.

CSS Syntax:
CSS rules consist of a selector and a declaration block. The selector selects the HTML
element(s) you want to style, and the declaration block contains the properties and their
values.
selector {
property: value;
/* More properties... */
}

CSS Selectors:
Selectors target HTML elements for styling. Common selectors include:
Element Selector: Targets HTML elements by their element type.
Class Selector: Targets elements with a specific class attribute.
ID Selector: Targets a single element with a unique ID attribute.
Descendant Selector: Targets elements that are descendants of another element.
Pseudo-class Selector: Targets elements based on a certain state or condition.
Pseudo-element Selector: Targets a specific part of an element.

CSS Properties:
CSS properties define how an element should be styled. Some common properties include:
color: Sets the text color.
font-size: Specifies the font size.
margin: Sets the outer margin.
padding: Sets the inner padding.
border: Defines the border around an element.

13
background: Sets the background color or image.

CSS Values:
Values are assigned to properties to define specific styling. Values can be lengths (e.g.,
pixels), percentages, colors, keywords, etc

CSS Units: px:

Pixels. %: Percentage relative to parent element.
em: Relative to the font size of the element.
rem: Relative to the root font size.
vw/vh: Relative to the viewport width/height.

CSS Box Model:

The box model describes how elements are structured in terms of content, padding, border,
and margin

CSS Layout:
Positioning: Static, relative, absolute, fixed.
Floats: Element positioning.
Flexbox: Flexible box layout.
Grid: Two-dimensional layout system.
Responsive Design: Creating layouts for different screen sizes.

CSS @media Queries:

Used for responsive design, @media queries apply styles based on the device's characteristics
(e.g., screen width).

CSS Transitions and Animations:

Used to create smooth transitions and animations on element state changes.

14
CSS Frameworks:
Frameworks like Bootstrap, Foundation, and Bulman offer pre-designed CSS components
and layouts for easier web development.

CSS Best Practices:

Use meaningful class and ID names.
Keep CSS separate from HTML.
Use external stylesheets for better caching.
Minimize unnecessary CSS for better performance.
Use media queries for responsive design.

15
 7. Bootstrap

1. What is Bootstrap?
- Bootstrap is a popular open-source front-end framework for building responsive, mobile-
first web applications.
- Created by Twitter engineers and released in 2011.

2. Features:
- Responsive Design: Built-in grid system for creating responsive layouts across various
screen sizes.
- Pre-styled Components: Buttons, forms, cards, navigation bars, modals, carousels, and
more.
- Typography: Consistent and readable typography styles.
- Cross-Browser Compatibility: Designed to work well across different browsers.
-Extensive Documentation: Official documentation with examples and guidelines.

3. Getting Started:
- Include Bootstrap's CSS and JavaScript files in your HTML document. - You can use a
Content Delivery Network (CDN) or download the files.
<!—Add Bootstrap CSS link in the <head> section 
<link rel=”stylesheet”
href=”[Link]
Bootstrap JS links at the end of the <body> section -->
<script
src=”[Link]

4. Responsive Grid System:

Bootstrap uses a 12-column grid system for creating responsive layouts.
- Columns automatically adjust based on screen size.
<div class=”container”>
<div class=”row”>
<div class=”col-sm-6”>Column 1</div>

16
 <div class=”col-sm-6”>Column 2</div>
</div>
</div>

5. Components:
- Buttons, forms, cards, navigation bars, modals, carousels, dropdowns, and more.
- Styling and interactive behaviour included.
Example:
For example, a developer can use Bootstrap's button component to create a call-to-action
button with a primary color and a large size:
<button type="button" class="btn btn-primary btn-lg">Learn More</button>
This code will generate a visually appealing and responsive button with Bootstrap's default
primary color and large size.
Similarly, Bootstrap's form component can be used to create a user-friendly and consistent
form with pre-styled form controls:
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-
describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with
anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1"
placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
This code will create a form with pre-styled input fields, labels, and a submit button, making
it easy to create a user-friendly and visually appealing form.

17
Overall, Bootstrap's components make it easy for developers to create visually appealing and
responsive web interfaces with minimal effort.

6. Typography
Bootstrap provides a set of typography-related classes that can be used to style text on a
website. These classes allow developers to easily control the size, weight, alignment, and
other properties of text.
For example, the following code snippet demonstrates how to use Bootstrap's typography
classes to style text:
<p class="text-muted">This is some muted text.</p>
<p class="text-primary">This is some primary text.</p>
<h1 class="display-1">Display 1 heading</h1>
<h2 class="display-2">Display 2 heading</h2>
<h3 class="display-3">Display 3 heading</h3>
<h4 class="display-4">Display 4 heading</h4>
In this example, the text-muted and text-primary classes are used to change the color of the
text, while the display-1 to display-4 classes are used to set different sizes for the headings.
Bootstrap also provides classes to control text alignment, font weight, and other properties,
making it easy to create visually appealing and consistent typography across a website.

7. Navigation Bar:
-Create responsive navigation bars with menus and branding.
<nav class = “navbar navbar-expand-lg navbar-light bg-light>
<!—Navbar content here -->
</nav>

8. Modals: -
Display modal dialogs with content and actions.
<!-- Button to trigger the modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data
bstarget="#myModal">
Open Modal
</button>

18
<!-- Modal content -->
<div class="modal fade" id="myModal" tabindex="-1"
arialabelledby="exampleModalLabel" aria-hidden="true">
<!-- Modal content here -->
</div>

9. Carousels:
- Create image sliders and carousels.
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- Carousel content here -->
</div>

10. Utility Classes:

- Bootstrap provides a range of utility classes for quickly styling elements.
- Example: `text-center`, `bg-primary`, `d-flex`, `mx-auto`.

11. Customization:
- You can customize Bootstrap's variables to match your project's design.
Change colors, spacing, fonts, and more.

12. Integration:
- Bootstrap can be used with various front-end and back-end frameworks.
- Integrates well with JavaScript frameworks like React, Angular, and [Link]. Bootstrap is
widely used in web
development for its ease of use, responsive capabilities, and rich set of components. While
the examples provided
here cover some key features, there's much more to explore in the Bootstrap documentation:
[Bootstrap
Documentation] ([Link]

19
 8. JavaScript

Concept Learnt: -
 What is JavaScript
 History
 Tools
 Comment
 Variables
 Data Types
 JavaScript Properties
 Operators
 Conditional Statement
 Loops
 Arrays

What is JavaScript?

JavaScript is a versatile and widely used programming language primarily known for
its role in web development. It is often used to make web pages interactive and
dynamic. JavaScript can be executed in web browsers, allowing developers to create
client-side scripts that run directly in a user's browser, enabling features such as form
validation, animations, and dynamic content updates without the need to make a round
trip to the web server.

 It is a verb of the web page that defines all the actions to be performed on a webpage
 It’s an object-oriented programming language that uses JIT compiler

20
  It is everywhere and all web browsers are installed with it.
 JS application ranges from web development, mobile development etc
 JS is easy, simple and very compatible with HTML-CSS
 It is must to have skill for any software engineer role

History of JavaScript
JavaScript, or JS, was born in the mid-1990s as a way to make web pages do cool
things. It was first called "Mocha," then "LiveScript," and later "JavaScript." Despite
its name, it's not the same as Java. It became a big deal during the "Browser Wars"
when web browsers competed to support it better. Over time, it got standardized and
became even more powerful. Nowadays, JavaScript is everywhere, not just in web
browsers but also on web servers, making it a crucial part of how we use the internet.
It's like the magic behind the web!

• JavaScript founder was Brendan Eich

• He developed JS in 1995
• He also developed first JS Engine, Spider Monkey which is still
used by Mozilla Firefox
• JavaScript name was later changed to 'mocha' and 'livescript' but it still
remains JS due to some trademark reasons

Tools
For working with JavaScript, we just need 2 things

1) Text editor

 For writing and editing of JS code, we need a simple editor which can be notepad too.
 But there are other powerful editors which provide additional functionalities like
autocomplete, indentation, highlights etc.
Example: Visual Studio Code, Sublime text, Atom etc.

21
 2) Browser

All browsers come with an inbuilt JS engine.

They are used for executing JS code and also for debugging purposes.

Simple Hello world Program in JS We can write our JS in 3 ways

1) Console

Either just press Ctrl + Shift + I to open the console oryou can right click and
then go to inspect

Now since you are in console you can start writing your

code [Link]("hello world"); [Link] is used to

print output

2) Script tag

<script> tag is used for writing javascript in HTML directly.

But every [Link]() will print the output in console of

Brower.

!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<h1>My First JS Code</h1>
<script>
[Link]("Hello
World!");

22
 </script>
</body> </html>

3) External file

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<h1>My First JS Code</h1>
<script type="text/javascript" src="[Link]"></script>
</body> </html>

--------JS [Link]("Hello World!");

Variables in JavaScript
Variable is a name of a memory location where the data is stored

Syntax: - var varname = val;

In JS, variable is defined using var

keyword var name =”

Swarali”; var

roll_no=2106084;

Data Types in JavaScript

JS is a dynamically typed language and does not need to specify data typeexplicitly of
the variable.

23
Example : var num=23

var string = “hello”;

var boolean = true;

var undef var

nullValue=null;

JavaScript Properties

• JS is dynamically typed-it doesn't has to specify the type of the variable

There is no need to define the data type for variable like int, float etc. Only
let, var and const is used for variable declaration.

• JS is weakly typed -type coercions is allowed in js

when we are comparing 2 values of different types, the one type will force
other to change it type as well so that comparison can be made possible ===
can stop coercion

Operators in JavaScript
24
Conditional Statements in JavaScript
1) For loop

It is best to use when we know the specified number of times thecode should

execute. Syntax:

for( initialization; termination; updation){

}

2) While Loop
It is best to use when we know the specified expression depending on whose
value the code should execute.

Syntax:

while( expression ){

25
 3) Do- while Loop

It is best to use when we know that at least code must execute once
irrespective of the condition.

Syntax: do{
}while( expression );

Array in JavaScript
 It is used to store ordered data together.
 It is defined within square brackets( [ ] ) and can have elements of different types
 Array are special type of objects and new keyword can be used also to create
array let arr = new Array(23,'cat',new Object());

Array Methods in Javascript

 Push
 Pop
 Shift
 Unshift
 Slice

Personal response:

26
 Here in this Course, I learnt basic about JavaScript Language. This course helped me
to implement my Programming Knowledge in solving various problems related to
JavaScript.

As it was a Beginners Course it helped me to clear my doubts. This is very useful

course that every learner should do.

27
 9. PHP & MYSQL
PHP
 PHP is an amazing and popular language!
 It is powerful enough to be at the core of the biggest blogging system on the
web(wordpress)
 It is deep enough to run large social networks!
 It is also easy enough to be a beginner’s first server side language.

What is a PHP file?

 PHP files can contain text, HTML, CSS, JavaScript, and PHP code
 PHP code is executed on the server, and the result is returned to the browser as plain
HTML
 PHP files have extensions “.php”.

What can PHP Do?

 PHP can generate dynamic page content
 PHP can create, open, read, write, delete, and close files on the server
 PHP can collect form data
 PHP can send and receive cookies
 PHP can add, delete, modify data in your database
 PHP can be used to control user-access
 PHP can encrypt data.
With PHP you are not limited to output HTML. You can output images or PDF files. You can
also output any text, such as XHTML and XML.

Basic PHP Syntax

A PHP script can be placed anywhere in the document.
A PHP script starts with <?php and ends with ?>
<?php
// PHP code goes here
?>
There are two statements used for displaying the output in php.
You need to return the output or void in output; then, you can use the echo command.
The echo can accept many parameters like a string, escaping characters, and variable values.
But the print function takes only one parameter.

28
The echo command is quicker than the print function. The echo command is the most
important in PHP.

echo and print are more or less the same. They are both used to output data to the screen.
The differences are small: echo has no return value while print has a return value of 1 so it
can be used in expressions.
echo can take multiple parameters (although such usage is rare) while print can take one
argument.
We can also write html code to print different tags output in bowser.
Example:

Echo function :
<?php
echo “Hello ”,”world ”;
echo “first ”,”program”;
?>
OUTPUT
Hello world first program
--end of page—

Print function:
<?php
print “Hello ”;
print “World”;
?>
OUTPUT
Hello World
--end of page—

Variables in PHP
Variables are containers used to store information in any programming language.
PHP variables starts with the $ sign, followed by the name of the variables:
Example:
<?php

29
 $first = “Hello World”;
$x = 12;
$y =12.3;
echo $first,” “,$x,” “,$y;
?>
OUTPUT
Hello World 12 12.3
--end of page—
PHP automatically associates a data type to the variable, depending on its value. Since the
data types are not set in a strict sense, you can do things like adding a string to an integer
without causing an error.
So to determine the data type of a variable we can use var_dump() function in php.
Ex:
<?php
$x = 12;
$y= 12.7;
var_dump($x);
var_dump($y);
?>

Control Statement in php:

If statement:
if (condition) {
code to be executed if condition is true;
}
Example:
<?php
$t = 12;

if ($t < 20) {

echo "Have a good day!";
}
?>

30
 OUTPUT
Have a good day!
--end of page—

If else statement:
if (condition) {
code to be executed if condition is true;
} else {
code to be executed if condition is false;
}
Example:
<?php
$t = 21;

if ($t < 20) {

echo "Have a good day!";
} else {
Echo “Have a great day!”;
}
?>
OUTPUT
Have a great day!
--end of page—

If…..elseif…..else statement:
if (condition) {
code to be executed if this condition is true;
} elseif (condition) {
code to be executed if first condition is false and this condition is true;
} else {
code to be executed if all conditions are false;
}
example:
<?php
$t = 21;

if ($t < 20) {

31
 echo "Have a good day!";
} elseif ($t==12) {
echo “Have a fabulous day!”;
} else {
Echo “Have a great day!”;
?>
OUTPUT
Have a fabulous day!
--end of page—

Iteration control statements:

While loop:
Syntax:
while (condition is true) {
code to be executed;
}
while loop check the condition and if it is true then It executes code inside it.

Do while loop:
Syntax:
do {
code to be executed;
} while (condition is true);
do while loop executes once without checking the condition or the result of condition it
executes all code inside it once and then check the condition and if it is true then it will
execute code inside it for second time.

For loop:
Syntax:
for (init counter; test counter; increment counter) {
code to be executed for each iteration;
}

32
For loop takes in three parameters initialization of counter, condition to be checked and
increment or decrement of the counter.

For each loop:

foreach ($array as $value) {
code to be executed;
}
The foreach loop works only on arrays, and is used to loop through each key/value pair in an
array.

For every loop iteration, the value of the current array element is assigned to $value and the
array pointer is moved by one, until it reaches the last array element.

Example:

<?php
$colors = array("red", "green", "blue", "yellow");

foreach ($colors as $value) {

echo "$value <br>";
}
?>

OUTPUT:

red
green
blue
yellow

--end of page—

Function in php

There are two types of functions

1. Built in functions:

PHP has over 1000 built-in functions that can be called directly, from within a script, to
perform a specific task.

2. User defined functions:

Besides the built-in PHP functions, it is possible to create your own functions.

33
  A function is a block of statements that can be used repeatedly in a program.
 A function will not execute automatically when a page loads.
 A function will be executed by a call to the function.

Syntax :

function functionName(argument1,argument2,argument3,………) {
code to be executed;
}

PHP File handling:

PHP provides a variety of functions for file handling, allowing developers to create, read,
write, and manipulate files on the server. Here are some examples of file handling in PHP:

1. Creating a new file:

$file = fopen("[Link]", "w");
fclose($file);

2. Writing to a file:
$file = fopen("[Link]", "w");
fwrite($file, "Hello, this is a test!");
fclose($file);

3. Reading from a file:

$file = fopen("[Link]", "r");
echo fread($file, filesize("[Link]"));
fclose($file);

4. Appending to a file:
$file = fopen("[Link]", "a");
fwrite($file, "This is additional text.");
fclose($file);

34
5. Deleting a file:
unlink("[Link]");

In addition to these basic file handling functions, PHP also provides functions for checking
file existence, retrieving file information, and working with directories. With PHP's file
handling capabilities, developers can create and manage files for various purposes, such as
logging, data storage, and content management.

PHP and MYSQL connectivity

We can use MYSQL to store the data from webpages or the php script to a database table.

PHP 5 and later can work with a MySQL database using:

 MySQLi extension (the "i" stands for improved)

 PDO (PHP Data Objects)

Earlier versions of PHP used the MySQL extension. However, this extension was deprecated
in 2012.

PHP mysqli_connect() function is used to connect with MySQL database. It

returns resource if connection is established or null.

Syntax
resource mysqli_connect (server, username, password)

PHP mysqli_close() function is used to disconnect with MySQL database. It returns true if
connection is closed or false.

Syntax
bool mysqli_close(resource $resource_link)
Example:
<?php
$servername = "localhost:3360";
$username = "root";
$password = "root";

// Create connection
$conn = new mysqli($servername, $username, $password);

35
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully";
?>

Creating Database in php

For creating a database we are going to use the create database query and we are going to
execute it by using the query function of the conn object.
<?php
$servername = "localhost";
$username = "root";
$password = "root";
// Create connection
$conn = new mysqli($servername, $username, $password);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully";
$sql = "CREATE DATABASE firstphp";
if ($conn->query($sql) === TRUE) {
echo "Database created successfully";
} else {
echo "Error creating database: " . $conn->error;
}
$conn->close();
?>

Output:

Connected successfully
Database mydb created successfully.

36
Createing a table in the database in php
To create a table we are going to pass the create table query in query function of connection
object.
<?php
$servername = "localhost";
$username = "root";
$password = "root";
$database = "firstphp";

// Create connection
$conn = new mysqli($servername, $username, $password, $database);

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully",”<br>”;
$sql = "CREATE TABLE table1 (name VARCHAR(20),id INTEGER(3))";
if ($conn->query($sql) === TRUE) {
echo "table created successfully";
} else {
echo "Error creating database: " . $conn->error;
}
$conn->close();
?>
OUTPUT:

Connected successfully
table created successfully

37
Inserting record to the table in php
To insert a record we are going to use the insert query and execute it with the help of the
query function in connection.
<?php
$servername = "localhost";
$username = "root";
$password = "root";
$database = "firstphp";

// Create connection
$conn = new mysqli($servername, $username, $password, $database);

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully","<br>";
$sql = "INSERT INTO table1 VALUES('amar',39)";
if ($conn->query($sql) === TRUE) {
echo "record inserted successfully";
} else {
echo "Error creating database: " . $conn->error;
}
$conn->close();
?>
OUTPUT
Connected successfully
record inserted successfully

38
 10. Learning Outcome
1. Web Development Skills:

You'll acquire practical skills in building and designing websites. You'll learn how to
create web pages using HTML for structuring content and CSS for styling.

2. Front-End Development:

You'll understand the role of HTML and CSS in creating the user interface and visual
elements of websites. You'll gain proficiency in crafting responsive and visually appealing
designs using CSS techniques.

3. Interactive Web Pages:

Learning JavaScript enables you to add interactivity to web pages. You'll be able to
create features like form validation, animations, and dynamic content that responds to user
actions.

4. Responsive Design:

With Bootstrap, you'll learn how to create responsive and mobile-friendly websites.
This involves designing layouts that adapt smoothly to different screen sizes and devices.

5. Server-Side Programming:

PHP is a server-side scripting language. You'll learn how to use it to create dynamic
web pages, handle form data, and interact with databases.

6. Database Management:

You'll work with MySQL, a popular relational database management system, to store,
retrieve, and manage data for your web applications.

[Link]-Stack Understanding:

By combining front-end (HTML, CSS, JavaScript) and back-end (PHP, MySQL)

technologies, you'll develop a comprehensive understanding of full-stack web development.

8. Problem-Solving Skills:

As you work on projects, you'll encounter coding challenges and bugs. Debugging
and finding solutions will enhance your problem-solving abilities.

9. Project Development:

You'll likely work on real projects, which will give you experience in the complete
development lifecycle, from planning and design to implementation and deployment.

39
10. Version Control:

You might learn how to use version control systems like Git to collaborate with
others, manage code changes, and maintain project history.

11. Web Security Awareness:

With hands-on experience, you'll become more aware of security vulnerabilities and
best practices to protect web applications from potential threats.

12. Performance Optimization:

You'll learn techniques to optimize web page loading times, minimize code and
resource usage, and enhance user experience.

13. Collaboration and Communication:

In a team environment, you'll practice collaborating with colleagues, discussing

technical ideas, and effectively communicating project progress.

14. Portfolio Building:

Your training projects can become valuable additions to your portfolio, showcasing
your skills to potential employers or clients.

[Link] Relevance:

Acquiring skills in these technologies makes you a relevant candidate in the web
development job market, as they are widely used across industries.

16. Continuous Learning:

Web technologies are ever-evolving. Your training will instill the importance of
staying updated with new tools, frameworks, and techniques.

40
 11. Conclusion

In conclusion, participating in an industrial training program focused on web

development technologies such as HTML, CSS, JavaScript, Bootstrap, PHP, and MySQL can
provide you with a comprehensive skill set and valuable experience in the field of web
development. Through hand son learning and practical application, you'll achieve a variety of
important learning outcomes. By mastering HTML and CSS, you'll be able to create well-
structured and visually appealing web pages, while JavaScript will empower you to add
interactivity and dynamic features. Learning Bootstrap will enable you to design responsive
and mobile-friendly websites that adapt seamlessly to different devices.

Engaging with PHP and MySQL will give you the ability to build dynamic and
database-driven web applications, strengthening your understanding of both front-end and
back-end development. Throughout the training, you'll enhance your problem-solving skills,
project development capabilities, and familiarity with industry best practices.

Moreover, your experience in collaborating with colleagues, using version control,

and addressing security concerns will foster valuable teamwork and professionalism. As you
work on real projects, you'll contribute to your portfolio, making you a competitive candidate
in the job market.

41
 12. Recommendations
1. Set Clear Goals: Define what you want to achieve from the training. Whether it's gaining
specific technical skills, improving communication, or building a network, having clear goals
will guide your efforts.

2. Be Proactive: Take initiative in seeking out opportunities to learn and contribute. Don't
wait for tasks to be assigned; ask questions, express interest, and offer your assistance.

3. Engage with Mentors: If possible, establish a mentorship with experienced professionals in

the company. They can provide valuable guidance, share insights, and help you navigate the
industry.

4. Diversify Tasks: Seek exposure to different aspects of the industry. Try to work on various
projects or tasks to gain a well-rounded understanding of how different departments or roles
function.

5. Ask Questions: Don't hesitate to ask questions when you're unsure. This shows your
eagerness to learn and your commitment to understanding tasks thoroughly.

6. Take Notes: Keep a notebook or digital document to jot down key concepts, solutions to
problems you've encountered, and any new skills you've acquired.

7. Network: Build relationships with your colleagues and supervisors. Networking can open
doors to future opportunities, whether it's for employment, collaborations, or references.

8. Document Your Work: Maintain a record of the projects you've worked on, the tasks you've
completed, and the skills you've developed. This documentation can be valuable for future
job applications.

9. Seek Feedback: Regularly request feedback on your performance. Constructive criticism

helps you improve and demonstrates your commitment to growth.

10. Reflect: Take time to reflect on what you've learned and how you've progressed. Consider
what skills you've acquired and how they align with your career goals.

11. Stay Organized: Keep track of your assignments, deadlines, and any resources you've
been provided. Staying organized will help you manage your tasks effectively.

12. Attend Trainings and Workshops: If the company offers training sessions or workshops,
participate in them. These can expand your knowledge and provide insights beyond your
daily tasks.

13. Adapt to Company Culture: Pay attention to the company's values, culture, and work
practices. Adapting to these aspects shows your ability to fit in and contribute effectively.

14. Meet Deadlines: Consistently meet or exceed deadlines for your assignments. This
showcases your reliability and time management skills.

42
15. Stay Positive: Approach tasks with a positive attitude, even if they seem challenging. A
positive mindset not only helps you overcome obstacles but also makes you a pleasant team
member to work with.

16. Reflect on Soft Skills: Consider how you're developing soft skills like teamwork,
communication, and problem-solving. These skills are just as important as technical
expertise.

17. Immerse Yourself: Immerse yourself in the company's projects and objectives.
Understanding the company's mission and goals can help you align your efforts accordingly.

18. Express Gratitude: At the end of your training, express gratitude to your supervisors,
mentors, and colleagues for their guidance and support.

43