INTERNSHIP REPORT

A report submitted in partial fulfilment of the requirements for the Award of Degree of

BACHELOR OF ENGINEERING
in
ELECTRONICS AND COMMUNICATION ENGINEERING
by

NANDYALA KALAM BASHA

1604-20-735-014

Under Supervision of
B. SUCHARITA

ASSISTANT PROFESSOR, DEPT. OF ECE

MUFFAKHAM JAH COLLEGE OF ENGINEERING AND TECHNOLOGY

BANJARA HILLS, HYDERABAD

DEPARTMENT OF ELECTRONICS AND COMMUNICATION ENGINEERING

MUFFAKHAM JAH COLLEGE OF ENGINEERING AND TECHNOLOGY (THE
SULTAN UL ULOOM EDUCATION SOCIETY)
Affiliated to Osmania University & Recognised by AICTE
Banjara Hills, Hyderabad 500034
2020-2024
 ACKNOWLWDGEMENT

First, I would like to thank Dr Ayehsa Naaz, Head, Department of Electronics and
Communication Engineering for giving me the opportunity to do an internship within the
institution.

I am highly indebted to Mrs. B. Sucharita, our guide and internship co-ordinator, for his
support, guidance, and the facilities provided to accomplish this internship.

I also would like all the people that worked along with me at MJCET, Hyderabad, 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 extremely great full to my department staff members and friends who helped me in
successful completion of this internship.

NANDYALA KALAM BASHA

1604-20-735-014
 WEB DEVELOPMENT
INTERSHALA

ABOUT THE COMPANY

Internshala is a dot com business with the heart of dot org.

Internshala is an internship and online training platform, based in
Gurgaon, India. Founded by Sarvesh Agrawal, an IIT Madras
alumnus, in 2010, the Internshala helps students find internships
with organisations in India.
Technology company on a mission to equip students with relevant
skills & practical exposure to help them get the best possible start
to their careers.
CERTIFICATE
 ABSTRACT
Internshala is an internship and online training platform, based in Gurgaon, India.
Founded by Sarvesh Agrawal, an IIT Madras alumnus, in 2010, the Internshala
helps students find internships with organisations in India.
Technology company on a mission to equip students with relevant skills &
practical exposure to help them get the best possible start to their careers.

Construct the web application with web development tools (HTML, CSS, Js,
React, Bootstrap, DBMS, PHP), utilising all the ideas covered in the course and
concepts taught in the training, and create the database for the application with
PhpMyAdmin.

The website is called PGLife. this project keeping in mind how challenging it is
for the students to search for good accommodation when they join
college/university. I guess we all might also have faced the challenge of finding
good accommodation when you joined college.
So, this web application helps the students to get PGs in their desired cities with
wonderful amenities and this web application have fully functional features which
meets the requirements of today's generation.
 LIST OF FIGURES AND TABLES

Figure — 1 Index page

Figure — 2 Cities Page
Figure — 3 Database tables
Figure — 4 Signup form page
Figure — 5 Login form page
Figure — 6 Property list page
Figure — 7 property details page
Figure — 8 Amenities section in property details page
Figure — 9 Testimonials section in property details page
Figure — 10 Dashboard page
 CONTENTS
Title Page i
Certificate ii
Acknowledgement iii
List of Figures iV

List of Tables V

List of Photographs Vi

ABSTRACT
CONTENTS
CHAPTER 1 INTRODUCTION
1.1 Section 1
1.2 Section 2
1.3 Section 3
CHAPTER 2 THEORY
2.1 Section 1
2.2 Section 2
CHAPTER 3
3.1 Section
3.2 Section
CHAPTER 4 METHODOLOGY ADOPTED
4.1 Section
4.2 Section
CHAPTER 5 RESULTS AND DISCUSSIONS
5.1 Section
5.2 Section
CHAPTER 6 CONCLUSIONS AND FUTURE SCOPE OF STUDY
REFERENCES
Appendix
 1

CHAPTER-1: INTRODUCTION

WEB DEVELOPMENT

Web development is the building and maintenance of websites; it's the work that
happens behind the scenes to make a website look great, work fast, and perform
well with a seamless user experience.

Web developers, or ‘devs’, do this by using a variety of coding languages. The

languages they use depends on the types of tasks they are preforming and the
platforms on which they are working.

Web development skills are in high demand worldwide and well paid too —
making development a great career option. It is one of the easiest accessible
higher paid fields as you do not need a traditional university degree to become
qualified.

Front-end development, web content development, client-side/server-side

scripting, and network security settings are all part of the web development
process. Web development, in a wide sense, refers to all the actions, updates, and
operations required to create, maintain, and administer a website to assure its
optimal functionality, user experience, and speed.

Web development is quickly becoming one of the most appealing in today's

times. But what precisely is a web developer, and what does one do? A web
developer or programmer is a person who converts a web design, which has been
generated by a customer or a design team, into a website. They accomplishthis by
writing complex codes in severallanguages and frameworks.
 2

Web developers create the layout of a website, such as a visually appealing home
page and a user-friendly design (frontend which is seen by the user), and they
may also produce content for it. Developers ensure that a website is functioning
on all web browsers after it is launched, testing and updating it as needed. A
server, an application, and a database make up a website's back end. A back-end
developer creates and maintains the technology that enables the components that
allow the website's user-facing side to exist. They also use databases (a database
is an organized collection of data) as they support better data access.

The field of web development is generally broken down into front-end (the user-
facing side) and back-end (the server side).

A front-end dev takes care of layout, design and interactivity using HTML, CSS
and JavaScript. They take an idea from the drawing board and turn it into reality.

What you see and what you use, such as the visual aspect of the website, the drop-
down menus, and the text, are all brought together by the front-end dev, who
writes a series of programmes to bind and structure the elements, make them look
good and add interactivity. These programmes are run through a browser.

The backend developer engineers what is going on behind the scenes. This is
where the data is stored, and without this data, there would be no frontend. The
backend of the web consists of the server that hosts the website, an application
for running it and a database to contain the data.
 3

The backend dev uses computer programmes to ensure that the server, the
application, and the database run smoothly together. This type of dev needs to
analyse what a company's needs are and provide efficient programming
solutions. To do all this amazing stuff they use a variety of server-side languages,
like PHP, Ruby, Python and Java.

If both Frontend and Backend development appeal to you, you could consider
becoming a Full-Stack Developer.

Full-stackers take care of both the front-end and the back-end and need to know
how the web works on all levels, in order to determine how the client- and server-
sides will relate.
 4

CHAPTER-2: THEORY

• HTML
HTML stands for Hypertext Markup Language and it is a widely used
programming language used to develop web pages. HTML is a markup
language that is used to create web pages. It defines how the web page
looks and how to display content with the help of elements. It forms or
defines the structure of our Web Page. thus, it forms or defines the structure
of our Web Page. We must remember to save your file with
.html extension. In this HTML Tutorial, we'll understand all the basic
concepts required to kick-start your journey in HTML.

• CSS

CSS (Cascading Style Sheets) is used to style and lay out web pages — for
example, to alter the font, colour, size, and spacing of your content, split it
into multiple columns, or add animations and other decorative features.
This module provides a gentle beginning to your path towards CSS mastery
with the basics of how it works, what the syntax looks like, and how you
can start using it to add styling to HTML.

• JavaScript

Client-side: It supplies objects to control a browser and its Document

Object Model (DOM). Like if client-side extensions allow an application
to place elements on an HTML form and respond to user events such as
mouse clicks, form input, and page navigation. Useful libraries for the
client-side are AngularJS, ReactJS, VueJS and so many others.
 5

Server-side: It supplies objects relevant to running JavaScript on a server.

Like if the server-side extensions allow an application to communicate
with a database and provide continuity of information from one invocation
to another of the application, or perform file manipulations on a server.
The useful framework which is the most famous these days is node.js.

Imperative language — In this type of language we are mostly concern

about how it is to be done. It simply controls the flow of computation. The
procedural programming approach, object, oriented approach comes under
this like async await we are thinking what it is to be done further after async
call.

Declarative programming — In this type of language we are concern about

how it is to be done, basically here logical computation require. Here main
goal is to describe the desired result without direct dictation onhow to get
it like arrow function do.

• Bootstrap

Bootstrap is a free and open-source tool collection for creating responsive

websites and web applications. It is the most popular HTML, CSS, and
JavaScript framework for developing responsive, mobile-first websites. It
solves many problems which we had once, one of which is the cross-
browser compatibility issue. Nowadays, the websites are perfect for all the
browsers (IE, Firefox, and Chrome) and for all sizes of screens (Desktop,
Tablets, Phablets, and Phones). All thanks to Bootstrap developers -Mark
Otto and Jacob Thornton of Twitter, though it was laterdeclared to be an
open-source project.
 6

• DBMS

A database management system (or DBMS) is essentially nothing more

than a computerized data-keeping system. Users of the system are given
facilities to perform several kinds of operations on such a system for either
manipulation of the data in the database or the management of the database
structure itself. Database Management Systems (DBMSs) are categorized
according to their data structures or types.

• PHP

The term PHP is an acronym for PHP: Hypertext Preprocessor. PHP is a

server-side scripting language designed specifically for web development.
It is open source which means it is free to download and use. It is very
simple to learn and use. The files have the extension “.php”.

Rasmus Lerdorf inspired the first version of PHP and participated in the
later versions. It is an interpreted language, and it does not require a
compiler.

PHP code is executed in the server. It can be integrated with many

databases such as Oracle, Microsoft SQL Server, MySQL, PostgreSQL,
Sybase, and Informix. It is powerful to hold a content managementsystem
like WordPress and can be used to control user access.

It supports main protocols like HTTP Basic, HTTP Digest, IMAP, FTP,
and others. Websites like www.facebook.com and www.yahoo.com are
also built on PHP. One of the main reasons behind this is that PHP can be
easily embedded in HTML files and HTML codes can also be written in a
PHP file.
 7

The thing that differentiates PHP from the client-side language like HTML
is, that PHP codes are executed on the server whereas HTML codes are
directly rendered on the browser. PHP codes are first executed on the server
and then the result is returned to the browser.

The only information that the client or browser knows is the result returned
after executing the PHP script on the server and not the actual PHP codes
present in the PHP file. Also, PHP files can support other client-side
scripting languages like CSS and JavaScript.

• React js

ReactJS is an open-source, component-based front-end library responsible

only for the view layer of the application. It is maintained by Facebook.

React uses a declarative paradigm that makes it easier to reason about your
application and aims to be both efficient and flexible. It designs simple
views for each state in your application and React will efficiently update
and render just the right component when your data changes. The
declarative view makes your code more predictable and easier to debug.

A React application is made of multiple components, each responsible for

rendering a small, reusable piece of HTML. Components can be nested
within other components to allow complex applications to be built out of
simple building blocks. A component may also maintain an internal state
— for example, a TabList component may store a variable corresponding
to the currently open tab.
 8

• SCOPE OF WEB DEVELOPMENT

Web designing or web development is a short-term professional job-

oriented course. There are huge opportunities available for the students
who want to work in this field. Many private and public organizations hire
web designer for their online work and website development. With the
rapid advent of online industry, the demand of web development
professionals is increasing, and this has created a huge job opportunity for
the aspirants in the upcoming days.

Also, an experienced person in this field can also work as a freelancer;

there are many online companies which provide online projects to the
individuals.
 9

CHAPTER-3

PGLife

Construct the web application with web development tools (HTML, CSS,
Js, React, Bootstrap, DBMS, PHP), utilising all the ideas covered in the
course and concepts taught in the training, and create the database for the
application with PhpMyAdmin.

The website is called PGLife. this project keeping in mind how challenging
it is for the students to search for good accommodation when they join
college/university. I guess we all might also have faced the challenge of
finding good accommodation when you joined college.

So, this web application helps the students to get PGs in their desired cities
with wonderful amenities and this web application have fully functional
features which meets the requirements of today's generation.

The very first thing is we need to design the web interface with the help of
HTML, CSS, Bootstrap. We need to create an index page which works as
index for all the pages, then we need to create login and signup page which
slides on the index page when we click on the login/signup button, we also
need to create property list page which shows the properties of the selected
city, followed with property list page, we also need to create property
details page which gives the detailed structure of particularproperty and at
last we need to design dashboard page. This page will be accessible only if
the user logs in. We will check if the user logged in or not with the help of
PHP sessions.
 10

Figure- 1: Index page

Figure-2: CITIES

After this, JavaScript takes the role to add the functionalities of hover and
On Click event handlers.

We also need to create database, for this, we are using PhpMyAdmin. We

need 7 tables to store the varies of information which we will get from the
user.
 11

Figure-3: DATABASE TABLES

• Users — in users table we will store the details of the user who had signed
up in the PGLife website.
• Cities — in this tables will store the details of the cities where the properties
are located.
• Properties- in this table we will store the detail information of the property
which includes the details of property description, rent details and address,
etc.,
• User_interested_properties — In this table, we will store the properties
which were plotted as interested by the user along with the details of the
user which marked it as interested.
• Testimonials — In this table, we will store the reviews on the property
guven by the customer.
• Amenities — In this table, we will store all the amenities provided by all
the properties like (WIFI, geyser, food, parking) facilities provided by the
property owner.
12

Figure-4: SIGNUP FORM

Figure-5: LOGIN FORM

 Figure-6: PROPERTY LIST PAGE

Saxena's Paying Guest

€ 5,000/-

Figure-7: PROPETY DETAILS PAGE

13
 Amenities
Building CommonAtea Bedroom Washroom
O Power Backup @ Bed with Mattress @ Geyser
B Lift Air Conditioner
@ Water Purifier
sec Dining
fa Washing Machine

Figure-8: AMENITIES SECTION IN PROPERTY DETAILS PAGE

N1 0 U0 A2 LGjl 12

What people say

and stocked with all basic amenities and services and

- Ashutosh Gowariker

and stacked with all basic amenities and services and

Figure-8: TESTIMONIAL SECTION IN PROPERTY DETAILS PAGE

14
 CHAPTER 4: METHODOLOGY ADOPTED

Construct the web application with web development tools (HTML, CSS, Js,
React, Bootstrap, DBMS, PHP), utilising all of the ideas covered in the course
and concepts taught in the training, and create the database for the application
with PhpMyAdmin.
The website is called PGLife. this project keeping in mind how challenging it is
for the students to search for good accommodation when they join
college/university. I guess we all might also have faced the challenge of finding
good accommodation when you joined college.
So, this web application helps the students to get PGs in their desired cities with
wonderful amenities and this web application have fully functional features which
meets the requirements of today's generation.
Each web-based project will be based on HTML and CSS. I have used HTML
and CSS to give the basic structure to the web application.

I have also used Bootstrap front-end framework. This is used to make the
website easier and faster. It includes pre-defined templates to make the web
page more interactive.

PHP works as the back bone of this project as we know that retrieving data from
the from the database is very much important. Front-end JavaScript also plays a
major role to make a web page interactive.

15
CHAPTER 5: RESULTS AND DISCUSSIONS

Happiness Per S9uare Foot

Major Cities

Figure- 1: Index page

Major Cities

1 1C M BA1 B EN GA SP H YD E RA BA D

Figure-2: CITIES

16
 emenúes’

Q user inleresteü properties Bro¥‹se SŁuctLre.. ğ. SeaicŁ _yc Intel @ EmDğ' Ø DroD ïł InnoDB. iik8mß.8 -General ci ^8. e ïie
Ï Bbleș Sum 1e2 InnoDB utÏ8mb4peãeral ci 208.a Kie ee

Figure-3: DATABSE TABLES

Figure-4: SIGNUP FORM

17
 Figure-5: LOGIN FORM

Rs5000/
°' t

Rs 600O/•

Figure-6: PROPERTY LIST PAGE

18
 Saxena's Paying Guest
H.No. 3958 Kaseru Walan, Pahar Ganj, New Delhi, Delhi 1 OOSS

Figure-7: PROPETY DETAILS PAGE

Amenities
Building CommonAtea Bedroom Washroom
O Power Backup @ Bed with Mattress @ Geyser
B Lift Air Conditioner
@ Water Purifier
pt Dining
@ Washing Machine

Figure-8: AMENITIES SECTION IN PROPERTY DETAILS PAGE

19
Figure-9: TESTIMONIAL SECTION IN PROPERTY DETAILS PAGE

The very first thing is we need to design the web interface with the help of
HTML, CSS, Bootstrap. We need to create an index page which works as
index for all the pages, then we need to create login and signup page which
slides on the index page when we click on the login/signup button,

20
we also need to create property list page which shows the properties of the
selected city, followed with property list page, we also need to create
property details page which gives the detailed structure of particular
property and at last we need to design dashboard page. This page will be
accessible only if the user logs in. We will check if the user logged in or
not with the help of PHP sessions.

After this, JavaScript takes the role to add the functionalities of hover and
On Click event handlers.

We also need to create database, for this, we are using PhpMyAdmin. We

need 7 tables to store the varies of information which we will get from the
user.

21
 CHAPTER 6 -- CONCLUSINS AND SCOPE FOR FUTURE STUDY

This course has been helpful to me. Also, my confidence in web development
developed because of the organised material, which included educational
modules, assessments, hands-on practise, and assistance.

This web development training included instructive videos, tasks, projects, and
a practise environment where I could put what I learned into reality. This helped
to solidify my comprehension and application of the topics. and it was apleasure
to work on the project.

Web designing or web development is a short-term professional job-oriented

course. There are huge opportunities available for the students who want to work
in this field. Many private and public organizations hire web designer for their
online work and website development. With the rapid advent of online industry,
the demand of web development professionals is increasing, and this has created
a huge job opportunity for the aspirants in the upcoming days.

Also, an experienced person in this field can also work as a freelancer; there are
many online companies which provide online projects to the individuals.

22
REFERENCES —

• https://trainings.internsha1a.com/
• https://internsha1a.com/
• https://www.w3schoo1s.com/

23