INDUSTRIAL TRAINING

SUBMITTED IN PARTIAL FULFILLMENT FOR THE

REQUIREMENTS OF THE AWARDED DEGREE
OF
BACHELORS OF TECHNOLOGY
IN
ELECTRONICS AND ELECTRICAL ENGINEERING
GURU TEGH BAHADUR INSTITUTE OF TECHNOLOGY
GURU GOBIND SINGH INDRAPRASTHA UNIVERSITY
DWARKA, NEW DELHI

YEAR 2020-2024
SUBMITTED BY- DEEPANSHU MEHALAWAT

00413204920

MEHALAWATDEEPANSHU@GMAIL.COM
ELECTRONICS AND COMMUNICATION ENGINEERING

Dr. Deepali Sharma

Head of department (EEE)
 DECLARATION

I hereby declare that all the work presented in this industrial training
report for partial fulfillment of the requirements of the awarded degree
of Bachelors of Technology in Information Technology, Guru Tegh
Bahadur Institute of Technology, affiliated to Guru Gobind Singh
Indraprastha University Delhi is an authentic record of my own work
carried out from 22nd September 2023 to 4th November 2023

Deepanshu mehalawat
(00413204920)
 ACKNOWLEDGEMENT

I would like to express great gratitude towards Dr. Deepali Sharma

ma’am (HOD of EEE department) who has given us support and
suggestions, without their help I could not have presented this work up
for presentation standards. I will also take this opportunity to thank all
the others who gave us support for the project or in other aspects of
our study at Guru Tegh Bahadur Institute of Technology

Deepanshu Mehalwat (00413204920)

Date- 06/01/2023

ABSTRACT
Web development is the work involved in developing a website for the
Internet (World Wide Web) or an intranet (a private network). Web
development can range from developing a simple single static page of
plain text to complex web applications, electronic businesses, and
social network services. A more comprehensive list of tasks to which
Web development commonly refers, may include Web engineering,
Web design, Web content development, client liaison,
clientside/server-side scripting, Web server and network security
configuration, and e-commerce development.
Among Web professionals, "Web development" usually refers to the
main non-design aspects of building Web sites: writing markup and
coding. Web development may use content management systems (
CMS) to make content changes easier and available with basic
technical skills.
Web Development involves the usage of content management
system (CMS)
WordPress (WP or WordPress.org) is a free and open-source
content management system (CMS) written in hypertext preprocessor
language and paired with a MySQL or MariaDB database with
supported HTTPS. Features include a plugin architecture and a
template system, referred to within WordPress as "Themes".
WordPress was originally created as a blog-publishing system but has
evolved to support other web content types including more traditional
mailing lists and Internet fora, media galleries, membership sites,
learning management systems (LMS) and online stores. One of the
most popular content management system solutions in use,
WordPress is used by 42.8% of the top 10 million websites as of
October 2021.
Certificate Provided By the Employer
 CONTENTS

CHAPTER PAGE NO.

Title Page 1
Declaration 2
Acknowledgement 3
Abstract 4
Certificate 5
Introduction 7-8
Languages 8 Frameworks
9
Platforms 9
Project (front end) 9-20
Output (front end) 20-22
Project (back end) 22
Result 23
Summary and Conclusion 23
 1. INTRODUCTION
1.1 Web Development
1.1.1 Definition
Web Development is the work involved in developing a website for the
Internet (World Wide Web) or an intranet (a private network). Web
development can range from developing a simple single static page of
plain text to complex web applications, electronic businesses, and
social network services. A more comprehensive list of tasks to which
Web development commonly refers, may include Web engineering,
Web design, Web content development, client liaison,
clientside/server-side scripting, Web server and network security
configuration, and e-commerce development.

Web Development involves three coding languages on the front end:

HTML
CSS
JAVASCRIPT
And frameworks like node.js , react.js

Web Development also includes the usage of CMS (content

management system) softwares like WordPress:
WordPress (WP or WordPress.org) is a free and open-source
content management system (CMS) written in hypertext preprocessor
language and paired with a MySQL or MariaDB database with
supported HTTPS. Features include a plugin architecture and a
template system, referred to within WordPress as "Themes".
WordPress was originally created as a blog-publishing system but has
evolved to support other web content types including more traditional
mailing lists and Internet fora, media galleries, membership sites,
learning management systems (LMS) and online stores.
1.1.2 Applications of Web
Developmment
Web Dev is used for making websites we use everyday by the means
of internet whether it’s on pc, a tablet, a smart phone or a laptop. The
websites are then made responsive for use in every kind of device
with bigger or smaller screens. Making the website responsive means
using the website on any device be it a smartphone or a pc.
There are many applications of Web Development, including:
Agriculture
Anatomy
Adaptive Websites
Banking
Economics
Financial Market Analysis
General Gaming
Hardwriting Recognition
Information Retrieval
Insurance
Internet Fraud Detection
2. Languages
● HTML is a hypertext markup language used to write all the texts
in a website. Any text you see in a website is written and updated
through HTML.
● CSS is Cascading Style Sheets, used to style and design the
text, background, paragraphs and the whole web design is done
through CSS.
● JAVA SCRIPT is used to make the whole website functional
after HTML and CSS are used.
 3. Frameworks
Two kinds of frame works are used in Web Development.
● FRONTEND: React.
● BACKEND: Express, Node.

4. Platforms
● Mongo DB
● Node js
● Vs Code
● Any Web Browser

CMS (Content Management System)

softwares
● WordPress
● Shopify
5. PROJECT (Front end)
(Desichalchitra studio)

Project 1 Source Code:

get_header(); ?>

< div id="main-body" >

< main role="main" >

 < div class="main-banner owl-carousel owl-theme" >

< ?php
$paged = get_query_var('paged') ?
get_query_var('paged') : 1;
$custom_post_type = 'slider';
$args = array(
'post_type' => $custom_post_type,
'posts_per_page' => -1,
'post_status' => 'publish',
'order' => 'ASC',

);
$gp_query = new WP_Query($args);
while ($gp_query->have_posts()) {
$gp_query->the_post();

$thumbnail_id =
get_post_thumbnail_id(get_the_ID());
//$alt = get_post_meta($thumbnail_id,
'_wp_attachment_image_alt', true);
//$src = wp_get_attachment_image_src(
get_post_thumbnail_id(get_the_ID()), 'medium-thumbnail' );
$featured_img_url =
get_the_post_thumbnail_url(get_the_ID(),'full');
?>
< div class="carousel-item" >
< div class="container" >

< img class="bd-placeholder-img img-fluid"

src="<?php the_field('baner_image'); ?>" alt="banner1"/> < div
class="row" >
< div class="col-7 col-md-7 col-lg-7 col-xl -7
">
< div class="carousel-caption
text-left">
< h1><?php the_title(); ?></h 1>
< ?php the_content(); ? >
< div class="slide-btns"><a
class="btn1" href="/community/" role="button">BOOK AN
EVENT</a><!-- <a class="btn2"
href="https://sundancelab.com/eventon/" role="button">EVENTS</a> -
->< /div >
< /div >
< /div >
< div class="col-5 col-md-5 col-lg-5 col-xl -5
">
<!--< div class="side-img" > < img
class="img-fluid"
src="<?php the_field('side_image'); ?>" alt="Side Image"/>
< /div >-->
< /div >
< /div >
< /div >

< /div >

< ?php } ? >

< /div >

< div class="container text-center vid" >
 < div class="video-btn" >
< a id="play-video" class="video-play-button" href="#"
data-toggle="modal" data-
src="https://sundancelab.com/wpcontent/themes/sundancelab/i
mages/dance.mp4" datatarget="#myModal"><span></span></a> <
/div >

< div class="modal fade" id="myModal" tabindex="-1" role="dialog"

aria-labelledby="exampleModalLabel" aria-hidden="true">
< div class="modal-dialog" role="document" >
< div class="modal-content" >

< div class="modal-body" >

< button type="button" class="close" data-dismiss="modal"
arialabel="Close">
< span aria-hidden="true">&times;</span >
< /button >

< div class="embed-responsive embed-responsive-16by9" >

<!--< video id="video"
poster="https://sundancelab.com/wpcontent/themes/sundancelab/ima
ges/dance.jpg" width="100%" height="233" controls="">
< source src="" type="video/mp4"></video >-->

< iframe width="560" height="315"

src="https://sundancelab.com/wp-content/themes/sundancelab/image
s/dance.mp4" frameborder="0" allow="accelerometer; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
< /div >

< /div >

< ?php
echo '<script type="text/javascript"> window.onload = function () {
alert("Use Code SUNDANCER15 to
get 15% Off Your Purchase"); }
< /script>';
?>

< /div >

< /div >
< /div >
< /div >
<!-- Wrap the rest of the page in another container to center all the
content. -->
< section class="aboutus" >
< div class="container" >
< div class="row" >
< div class="col-md-5 about-left" >
<div><h6>ABOUT US</h6>
<h2>Wake Up | Shake Up | Start Up</h2>
< a class="btn-about"
href="https://sundancelab.com/about-us/">Read More</a>
< /div><img src="<?php echo
get_template_directory_uri(); ?>/images/about.png" alt="about"></a>
< /div >
< div class="col-md-7 service-list" >
< ul >
 < li><img src="<?php echo
get_template_directory_uri(); ?>/images/ab1.png" alt="Yoga"><a
href="#">Yoga</a><p>Rise and shine as you begin your day with the
practice of yoga. Experience the benefits of mindfulness, yoga, and
meditation as you calm your senses and exude positivity and
love.</p></li>
< li><img src="<?php echo
get_template_directory_uri(); ?>/images/ab2.png" alt="Dance"><a
href="#">Dance</a><p>Start your day unlike any other. Groove to an
epic dance party that energizes you to the core! Boost the happy
chemicals in your brain and start a glorious morning routine.</p></li>
< li><img src="<?php echo
get_template_directory_uri(); ?>/images/ab3.png" alt="Fitness"><a
href="#">Fitness</a><p>Expand your heart and your mind as you
undertake fitness on a whole new level. As you become a part of the
sober rave celebration, you inspire, unite and unleash the human
spirit.</p></li>
< li><img src="<?php echo
get_template_directory_uri(); ?>/images/ab4.png" alt="Health"><a
href="#">Health</a><p>The morning health routine leaves you truly
energized, happy, and hearty as you embrace a healthy lifestyle and
fun-filled fitness routine. </p></li>
< /ul >
< /div >
< /div >
< /section >
< section class="events" > < div
class="container" >
< h2>Perfect Start of the Day with Sundance</h 2> <
div class="row" >
< ?php echo do_shortcode( '[add_eventon tiles="yes"
tile_count="3" tile_bg="1"]' ); ?>
< ?php
$args = array(
'post_type' => 'post' ,
'orderby' => 'date' ,
'order' => 'DESC' ,
'posts_per_page' => 6,
'cat' => 25,
'paged' => get_query_var('paged')
);
$q = new WP_Query($args); if
( $q->have_posts() ) {
while ( $q->have_posts() ) {
$q->the_post(); ?>
< div class="col-sm-6 col-md-6 col-lg-6" >
< div class="sundancelab-sections" >

< figure><?php the_post_thumbnail('medium'); ?></figure >

< span><?php the_title(); ?></span > <
?php the_content(); ? >
< a href="<?php the_permalink(); ?>">Read
more</a>
< /div >
< /div >
< ?php }
} ?>
< /div >
< div style="text-align:center;margin-bottom:30px;"><a
class="btnevents order-3 text-center"
href="https://sundancelab.com/event/">Show More Events</a></div>
< /div >
< /section >

< section class="testimonials" >

< div id="tcb-testimonial-carousel" class="carousel slide"
data-ride="carousel">
< div class="carousel-inner" >
< ?php

$count = 1;
$custom_post_type = 'testimonials';
$args = array(

'post_type' => $custom_post_type,

'posts_per_page' => -1,

'post_status' => 'publish',

'order' => 'ASC',

);

$gp_query = new WP_Query($args);

 while ($gp_query->have_posts()) {

$gp_query->the_post();

$thumbnail_id =
get_post_thumbnail_id(get_the_ID());
$alt =
get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
$src
= wp_get_attachment_image_src (
get_post_thumbnail_id(get_the_ID()), 'medium-thumbnail' );
?>
< div class="carousel-item <?php if($count == 1 ){
echo "active"; }?>">
< div class="container" >
< div class="row" >
< div class="col-12 col-sm-12 col-md -3
col-lg-3">
< div class="testimonial-image" >
< img src="<?php echo $src[0]; ?>"
alt="user"/>
< /div >
< /div >
< div class="col-12 col-sm-12 col-md -9
col-lg-9">
< div class="testimonial-content" > <!--<
img src="<?php //echo
get_template_directory_uri(); ?>/images/star.png" alt="rating">-->
 < h3><?php the_title(); ?></h 3>
< ?php the_content(); ? > <
strong><?php
the_field('author_name');?></strong>
< /div >
< /div >
< /div >
< /div >
< /div >
< ?php $count++; } ? >
< ol class="carousel-indicators" >
< li data-target="#tcb-testimonial-carousel"
data-slide-to="0" class="active"></li>
< li data-target="#tcb-testimonial-carousel"
data-slide-to="1"></li>
< li data-target="#tcb-testimonial-carousel"
data-slide-to="2"></li>
< /ol >
< /div >
< /div >

< /section >

< section class="newsletter" >

< div class="container" > < div
class="row" >
< h6>Newsletter</h 6>
< h2>Join Our SundanceLab!</h 2>
<!--<p> Etiam ulla profecto eft ratio, cur locorum
intervallis feparentur, quos auctor naturae tot vinculis conjunxit.</p>-->
 < form >
< div class="form-row align-items-center" >

< div class="input-group" > < input

type="email"
class="form-control" id="newsletter" placeholder="E-mail goes here
...">
< button type="submit" class="btn
btn-primary">ADD</button>
< /div >
< /div >
< /form >
< /div >
< /div >
< /section >

< ?php get_footer();

OUTPUT
Project (Backend)
WordPress Admin
 6. Result
The concept of Web Development has been understood. With the
understanding of languages and frameworks the project has been
made featuring WordPress, HTML, CSS and JS.
7. Summary And Conclusion
In a nutshell, we can say that web development is an
incredible breakthrough in the field of technology. It can be
used to make various websites and web projects.