lOMoARcPSD|39096570

20BCS2836 Purushottam Kumar Project Report

Btech Cse (Chandigarh University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)
 lOMoARcPSD|39096570

WEB DEVELOPMENT

INTERNSHALA

Submitted by
PURUSHOTTAM KUMAR
20BCS2836

in partial fulfilment of summer training for the award of the degree

of

BACHELOR OF ENGINEERING
IN
COMPUTER SCIENCE AND
ENGINEERING

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CHANDIGARH UNIVERSITY, GHARUAN, MOHALI – PUNJAB

Oct, 2022

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

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.

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

CERTIFICATE

ACKNOWLEDGEMENT

I take this opportunity to express my deep gratitude and most sincere

thanks to my project mentor, Intershala for giving most valuable
suggestion, helpful guidance and encouragement in the execution of
this project work. I would like to thank my mentor for guiding me and
I would like to thank my senior brothers.
A special acknowledgement goes to my colleagues who helped me in
completing the project by exchanging interesting ideas and sharing
their experience.

PURUSHOTTAM KUMAR
Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)
 lOMoARcPSD|39096570

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.

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

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

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

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.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

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

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 accomplish this by
writing complex codes in several languages and frameworks.

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

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.

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

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.

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

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.

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

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 later declared to be an
open-source project.

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

• 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.

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

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.

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

• 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.

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

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.

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

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.

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

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.

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

Figure-4: SIGNUP FORM

Figure-5: LOGIN FORM

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

Figure-6: PROPERTY LIST PAGE

Figure-7: PROPETY DETAILS PAGE

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

Figure-8: AMENITIES SECTION IN PROPERTY DETAILS PAGE

Figure-8: TESTIMONIAL SECTION IN PROPERTY DETAILS PAGE

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

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.

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

CHAPTER 5: RESULTS AND DISCUSSIONS

Figure- 1: Index page

Figure-2: CITIES

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

Figure-3: DATABSE TABLES

Figure-4: SIGNUP FORM

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

Figure-5: LOGIN FORM

Figure-6: PROPERTY LIST PAGE

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

Figure-7: PROPETY DETAILS PAGE

Figure-8: AMENITIES SECTION IN PROPERTY DETAILS PAGE

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

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,

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

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.

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

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.

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)

 lOMoARcPSD|39096570

REFERENCES –

• https://trainings.internshala.com/
• https://internshala.com/
• https://www.w3schools.com/

Downloaded by Soumitra kumar hota (soumitrahota2002@gmail.com)