Amir Internship File

A Summer Training Report
on
“Hostel PG LIFE”
Submitted for partial fulfillment for the award of the degree
Bachelor of Computer Application (BCA)
Department of Computer Application
Session 2021-24
College of Innovative Management and Science
Submitted to Submitted By
Dr. Manish Kumar AMIR HUSAIN
2111730580013
ACKNOWLEDGEMENT
At the very beginning I would like to the Founders & developers of INTERNSHALA and also all
employees of INTERNSHALA by whom active response I was able to complete my great summer
training.
I will be highly grateful to INTERNSHALA for rending his valuable guidance and help to know more
about working of a website, and how a web-application or a website works and developed
and also providing internal guidance for preparing this report.
I am also very thankful to INTERNSHALA for providing their immense help and support.
And I would like to express my gratitude towards my college COLLEGE OF INNOVATIVE

MANAGEMENT AND SCIENCE,LUCKNOW and My Head of Department Dr. Manish Kumar Sir
for their kind cooperation and encouragement which help me in completion of this project.
NAME- AMIR HUSAIN
COURSE- BCA Sem - 5
Roll No.- 2111730580013
COLLEGE- CIMS,LUCKNOW
Declaration
This is certify that the work reported in the present project entitled “HOSTEL PG LIFE ” is a record of
work done by us in Bachelor of Computer Application, College of Innovative Management and
science, Lucknow.
The reports are based on the project work done entirely by us and not copied from any other sources.
AMIR HUSAIN
BCA 5th semester
2111730580013
Content
S. No. Topic Page No.

1. Introduction to Organization 1
2. Introduction of Technology 2
3. Introduction of Project 3
4. Home page 4-9

using HTML and
CSS
5. ScreenShot 10
of Home
page
6. Properties list Page 11-18
using HTML and
CSS
7. ScreenShot of Properties list Page 18-19
with
Sign-UP and Login Page
8. Properties Description 20-28
Page Using HTML and
CSS
9. ScreenShot 29
Of Product Description Page
10. JavaScript for 30

Pages
Functionalities
11. Conclusion 31
12. Bibliography 32
Introduction to Organization
Internshala Website
Internshala is a popular Indian internship search platform. It offers internships across
various industries and fields, including engineering, management, media, design, and
more. The platform was launched in 2010 and has since helped thousands of
students and professionals find internships that match their interests and
qualifications.
How Internshala Works

Internshala works as a bridge between companies and students/professionals
looking for internships. Companies can post their internship requirements on the
platform, and interns can apply for those that match their qualifications. The
platform also offers various training programs and courses to help people develop
their skills and improve their chances of landing an internship.
Features of Internshala
 Internships across various industries and fields
 Virtual internships that can be done from anywhere
 Courses and training programs to improve skills
 Easy application process
 Internship alerts through email and notifications
Benefits of Using Internshala

 Access to a wide range of internships across various industries
 Opportunity to develop skills and gain experience
 Quick and easy application process
 Option to apply for virtual internships from anywhere
 Possibility of getting hired by the company after the internship
Role
Internshala is an excellent platform for students and professionals looking for
internships in India. It offers a wide range of internship opportunities, training
programs, and courses, making it easier for people to find the right internship and
improve their skills. Its user-friendly interface and easy application process make it a
popular choice among job seekers. Overall, if you're looking for an internship in India,
Internshala is definitely worth checking out.
Introduction to Technology
How website works:
Client request for
Server returns the response HTML,CSS,JS
Role of HTML :-
 Hyper text markup language.

 It is basically a standard markup language for giving a static skeleton to web application
and sites.
 It’s a well standardized System.
Role of CSS :-
 Cascading Style Sheets.

 It use a separate language from HTML, CSS allows you to apply consistent styling of
elements across all pages on your site, so that all headings, lists, and paragraphs look
and act the same on every page of a site.
Role of JavaScript :-
 High-level dynamic interpreted programming language.

 It allows client-side scripting to create completely dynamic web application and
websites.
Role of PHP :-
 Dynamic content: PHP is a more dynamic use of code. For example, when you enter
welcome/html you will always receive the response, ‘Welcome!’, however when you
request welcome.php, depending on the time of day, you may receive ‘Good Morning!’.
This indicates that PHP produces more dynamic coded content.
 Easy to learn: PHP is considered one of the easiest, most common web development
languages, compared to another popular one like Java.
 Open source and free: The components of the language are free, so all you have to do is
hire some Zen Cart web developers to have your projects completed cost-effectively.
 Easy to deploy: Many hosting companies are willing to offer a server for companies that
run using PHP.
 Reliable: The web language is rather efficient because it possesses a scalable code.
 Fast processing: PHP uses its own memory space, automatically reducing the loading
time for the server. This allows a faster processing capacity which is incredibly beneficial
for websites with high traffic.
 Secure: Known for its vast layers of security protection.
 User-friendly: Not only is PHP easy to learn but it’s also easy to use with a high level of
simplicity at the root of its function.
 Easy to integrate: There’s no need to re-code or re-develop because PHP is easy to
coordinate with all company software.
Role of React :-
 React is an excellent framework for web development in 2023. It’s easy to learn, and it
offers a lot of benefits over other JavaScript libraries, including those that are more
popular. With the growing popularity of React, it’s not hard to understand why a lot of
people are choosing to use the React framework for their web development processes.
 React offers an amazing ecosystem, tons of features and tools, and tremendous
community support, and also is SEO-friendly. However, more than knowing all these
benefits, you must know how they contribute to your web development process is
required.
 The main reason why React is so popular is that it offers developers an easy way to
create applications with a lot of functionality at once. This means that your app doesn’t
need to be as complicated as other frameworks; instead, you can focus on building
features in your app rather than how to get those features up and running on the web.
This can help make your app easier for users to understand and use! There are multiple
platforms based on React to create web applications, mobile applications, and cross-
hybrid Platform for Desktops.
Introduction of Project
Hostel and Pg Web Development Project
The Hostel and Pg Web Development Project is a website development initiative that
aims at providing an online platform where people seeking accommodation can find
available hostels and PGs (paying guest accommodations) in their desired location.
The website also provides an opportunity for hostel and PG owners to promote their
services and facilities online.
Features of the Website

 Easy-to-use interface
 An ability to filter hostels and PGs based on location, price range, and facilities
offered
 Search for nearby hostels and PGs through its location-based search option
 Feature to book hostel or PG accommodation online, without physically visiting it
 Integration with popular payment gateways to ensure secure payment for the
booked accommodation
 User review system, where users can rate and review hostels and PGs they have
stayed at
 An administrative dashboard for hostel and PG owners to manage their profiles, edit
facilities offered, view bookings, and respond to reviews and inquiries made by users
Technology Stack
The Hostel and Pg Web Development Project uses a range of technologies to ensure
seamless user experience, security, and reliability. These include:
 Frontend: HTML5, CSS3, JavaScript, Bootstrap

 Backend: PHP7,React Framework, MySQL Database
 Payment Gateway: PayPal Integration
Idea
The Hostel and Pg Web Development Project is a significant initiative that solves the
problem faced by students, working professionals, and job-seekers in finding
affordable and reliable accommodation. With the use of top-notch technologies, the
website can provide a user-friendly interface, secure payment gateway, and robust
security features.
Home page using HTML and CSS
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Just Relax PG</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&a
mp;display=swap" rel="stylesheet">
<link href="css/common.css" rel="stylesheet"> <link href="css/home.css" rel="stylesheet">
</head>
<body>
<div class="header sticky-top">
<nav class="navbar navbar-expand-md navbar-light">
<a class="navbar-brand" href="index.php">
<imgsrc="img/logo.png">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#my-navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="my-navbar">

<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#signup-modal">
<i class="fas fa-user"></i>Signup
</a>
</li>
<div class="nav-vl"></div>
<a class="nav-link" href="#" data-toggle="modal" data-target="#login-modal">
<i class="fas fa-sign-in-alt"></i>Login
</a>
</li>
</ul>
</div>
</nav>
</div>
<div id="loading">
</div>
<div class="banner-container">
<h2 class="white pb-3"><b>Just Relax PG</b> - Your Second Home</h2>
<form id="search-form" action="property_list.php" method="GET">

<div class="input-group city-search">
<input type="text" class="form-control input-city" id="city" name="city" placeholder="Enter your city to search for PGs">
<div class="input-group-append">
<button type="submit" class="btnbtn-secondary">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</form>
</div>
<div class="page-container">
<h1 class="city-heading">
Major Cities
</h1>
<div class="row">
<div class="city-card-container col-md">
<a href="property_list.php?city=Delhi">
<div class="city-card rounded-circle">
<imgsrc="img/delhi.png" class="city-img">
</div>
</a>
</div>

<a href="property_list.php?city=Mumbai">
<imgsrc="img/mumbai.png" class="city-img">
</div>
</a>
</div>

<a href="property_list.php?city=Bengaluru">
<imgsrc="img/bangalore.png" class="city-img">
</div>
</a>
</div>

<a href="property_list.php?city=Hyderabad">
<imgsrc="img/hyderabad.png" class="city-img">
</div>
</a>
</div>
</div>
</div>
<div class="modal fade" id="signup-modal" tabindex="-1" role="dialog" aria-labelledby="signup-heading" aria-hidden="true">

<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="signup-heading">Signup with <b>Just Relax PG</b></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="signup-form" class="form" role="form" method="post" action="api/signup_submit.php">
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-user"></i>
</span>
</div>
<input type="text" class="form-control" name="full_name" placeholder="Full Name" maxlength="30" required="">
</div>

<i class="fas fa-phone-alt"></i>
</span>
</div>
<input type="text" class="form-control" name="phone" placeholder="Phone Number" maxlength="10" minlength="10"
required="">
</div>

<i class="fas fa-envelope"></i>
</span>
</div>
<input type="email" class="form-control" name="email" placeholder="Email" required="">
</div>

<i class="fas fa-lock"></i>
</span>
</div>
<input type="password" class="form-control" name="password" placeholder="Password" minlength="6" required="">
</div>

<i class="fas fa-university"></i>
</span>
</div>
<input type="text" class="form-control" name="college_name" placeholder="College Name" maxlength="150" required="">
</div>
<div class="form-group">
<span>I'm a</span>
<input type="radio" class="ml-3" id="gender-male" name="gender" value="male"> Male
<label for="gender-male">
</label>
<input type="radio" class="ml-3" id="gender-female" name="gender" value="female">
<label for="gender-female">
Female
</label>
</div>
<button type="submit" class="btn btn-block btn-primary">Create Account</button>
</div>
</form>
</div>
<div class="modal-footer">
<span>Already have an account?
<a href="#" data-dismiss="modal" data-toggle="modal" data-target="#login-modal">Login</a>
</span>
</div>
</div>
</div>
</div>
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="login-heading" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<h5 class="modal-title" id="login-heading">Login with <b>Just Relax PG</b></h5>
<span aria-hidden="true">x</span>
</button>
</div>
<form id="login-form" class="form" role="form" method="post" action="api/login_submit.php">
</span>
</div>
<input type="email" class="form-control" name="email" placeholder="Email" required="">
</div>

</span>
</div>
<input type="password" class="form-control" name="password" placeholder="Password" minlength="6" required="">
</div>
<button type="submit" class="btn btn-block btn-primary">Login</button>
</div>
</form>
</div>
<span>
<a href="#" data-dismiss="modal" data-toggle="modal" data-target="#signup-modal">Click here</a>
to register a new account
</span>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="page-container footer-container">
<div class="footer-cities">
<div class="footer-city">
<a href="property_list.php?city=Delhi">PG in Delhi</a>
</div>
<a href="property_list.php?city=Mumbai">PG in Mumbai</a>
</div>
<a href="property_list.php?city=Bengaluru">PG in Bangalore</a>
</div>
<a href="property_list.php?city=Hyderabad">PG in Hyderabad</a>
</div>
</div>
<div class="footer-copyright">© 2023 Copyright <b>Just Relax PG</b><br> Made by
<a href="https://github.com/Ankit-saha-iiitbbsr" target="_blank"> ISHANT PANDEY<br></a>
<a href="index.html"> Home <br></a><a href="#"> Back to top </a></div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</body>
</html>
CSS :-
.banner-container
{ background-image:
url("../img/background.jpg");
background-attachment: fixed;
box-shadow: inset 0 0 0 2000px
#1c1c1c7a;text-align: center;
padding: 160px 15px;
}
@media (max-width: 768px) {
.banner-container
{ padding: 100px
15px;
}
}
.city-search
{ max-width:
530px;margin:
auto; position:
relative;
}
.city-heading {
text-align: center;
}
.city-card-
container { text-
align: center;
margin-top:
20px;
}
.city-card {
background-color: #ffffff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0,
0.12); display: inline-block;padding:
20px;
}
.city-card:focus,
.city-card:hover {
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.city-img
{ height:
100px;width:
100px;
}
ScreenShot of Home Page
Properties list page using HTML& CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Best PG's in Mumbai | Just Relax PG</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />

<link href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&di
splay=swap" rel="stylesheet" />
<link href="css/common.css" rel="stylesheet" />
<link href="css/property_list.css" rel="stylesheet" />
</head>
<body>
<a class="navbar-brand" href="index.html">
<imgsrc="img/logo.png" />
</a>
</button>

</a>
</li>
</a>
</li>
</ul>
</div>
</nav>
</div>
<div id="loading">
</div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb py-2">
<li class="breadcrumb-item">
<a href="index.html">Home</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
Mumbai
</li>
</ol>
</nav>
<div class="filter-bar row justify-content-around">
<div class="col-auto" data-toggle="modal" data-target="#filter-modal">
<imgsrc="img/filter.png" alt="filter" />
<span>Filter</span>
</div>
<div class="col-auto">
<imgsrc="img/desc.png" alt="sort-desc" />
<span>Highest rent first</span>
</div>
<div class="col-auto">
<imgsrc="img/asc.png" alt="sort-asc" />
<span>Lowest rent first</span>
</div>
</div>
<div class="property-card row">

<div class="image-container col-md-4">
<imgsrc="img/properties/1/1d4f0757fdb86d5f.jpg" />
</div>
<div class="content-container col-md-8">
<div class="row no-gutters justify-content-between">
<div class="star-container" title="4.5">
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<div class="interested-container">
<i class="far fa-heart"></i>
<div class="interested-text">3 interested</div>
</div>
</div>
<div class="detail-container">
<div class="property-name">Navkar Paying Guest</div>
<div class="property-address">44, Juhu Scheme, Juhu, Mumbai, Maharashtra 400058</div>
<div class="property-gender">
<imgsrc="img/male.png" />
</div>
</div>
<div class="row no-gutters">
<div class="rent-container col-6">
<div class="rent">Rs 9,500/-</div>
<div class="rent-unit">per month</div>
</div>
<div class="button-container col-6">
<a href="property_detail.html" class="btnbtn-primary">View</a>
</div>
</div>
</div>
</div>

<imgsrc="img/properties/1/eace7b9114fd6046.jpg" />
</div>
<div class="content-container col-md-8">
</div>
<div class="interested-container">
<i class="far fa-heart"></i>
<div class="interested-text">6 interested</div>
</div>
</div>
<div class="detail-container">
<div class="property-name">Ganpati Paying Guest</div>
<div class="property-address">Police Beat, Sainath Complex, Besides, SV Rd, Daulat Nagar, Borivali East, Mumbai -
400066</div>
<div class="property-gender">
<imgsrc="img/unisex.png" />
</div>
</div>
<div class="row no-gutters">
<div class="rent-container col-6">
<div class="rent">Rs 8,500/-</div>
<div class="rent-unit">per month</div>
</div>
<div class="button-container col-6">
<a href="property_detail.html" class="btnbtn-primary">View</a>
</div>
</div>
</div>
</div>

<imgsrc="img/properties/1/46ebbb537aa9fb0a.jpg" />
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="login-heading" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<h5 class="modal-title" id="login-heading">Login with PGLife</h5>
<span aria-hidden="true">×</span>
</button>
</div>
<form id="login-form" class="form" role="form">
</span>
</div>
<input type="email" class="form-control" name="email" placeholder="Email" required>
</div>

</span>
</div>
<input type="password" class="form-control" name="password" placeholder="Password" minlength="6" required>
</div>
<button type="submit" class="btnbtn-block btn-primary">Login</button>
</div>
</form>
</div>
<span>
</span>
</div>
</div>
</div>
</div>
<a href="property_list.html">PG in Delhi</a>
</div>
<a href="property_list.html">PG in Mumbai</a>
</div>
<a href="property_list.html">PG in Bangalore</a>
</div>
<a href="property_list.html">PG in Hyderabad</a>
</div>
</div>
<div class="footer-copyright">© 2020 Copyright PG Life </div>
</div>
</div>

</body>
</html>
CSS :-
.filter-bar > div
{ cursor:
pointer; font-
size: 13px; text-
align: center;
margin-bottom: 16px;
}
.filter-bar img
{ width:
40px;
height:
40px;
border-radius: 40px;
border: 1px solid
#646870;padding: 6px;
margin-right: 8px;
}

.filter-bar img
{ display: block;
margin: 0px auto 4px;
}
}
.property-card
{ background-color:
#ffffff;border-radius:
2px; padding: 15px
0px; margin: 0px auto
20px;
}
.property-card:focus,
.property-card:hover {
}
.image-container
{ text-align:
center;
}

.image-container
{ padding-bottom:12px;
}
}
.image-container img
{width: 100%;
max-width: 300px;
}
.star-container i
{ color:
#EA322E; font-
size: 10px;
margin-right:
6px;
}
.interested-
container {text-
align: center;
}
.interested-container
i {color: #EA322E;
font-size: 20px;
cursor: pointer;
}
.interested-text
{ font-size:
10px;
}
.detail-container
{ padding-bottom:
10px;
}
.property-name
{ font-size:
18px;
font-weight: 600;
}
.property-
address {color:
#6f6f6f; font-
size: 13px;
padding-bottom: 5px;
}
.property-gender img
{width: 40px;
}
.rent-container
{display: flex;
align-items: center;
}
.rent {
font-size: 18px;
font-weight:
bold;
padding-right: 10px;
}
.rent-unit
{ color:
#6f6f6f;
font-size: 12px;
}
.button-
container .btn
{font-size: 14px;
border-radius: 0px;
width: 140px; float:
right;
}
/* No Property */
.no-property-container
{ margin: 96px auto
144px;
}
.no-property-container
p {font-size: 24px;
text-align: center;
}
/* Filter Modal */
#filter-modal .modal-
dialog {max-width:
600px;
}
#filter-modal .modal-body
h5 {color: #777777;
}
#filter-modal .modal-body hr
{margin: 4px 0px;
}
button {font-size: 14px;
width: 100px;
margin: 16px;
}
#filter-modal .modal-body .btn-active

{color: #fff;
background-color: #343a40;
}
button i {margin-right: 8px;
}
#filter-modal .modal-footer button

{width: 120px;
}
ScreenShot of Properties list

Signup Page :-
Login Page :-
Properties description page using HTML& CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ganpati Paying Guest | Ramu PG</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />

<link href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&di
splay=swap" rel="stylesheet" />
<link href="css/common.css" rel="stylesheet" />
<link href="css/property_detail.css" rel="stylesheet" />
</head>
<body>
<a class="navbar-brand" href="index.html">
<imgsrc="img/logo.png" />
</a>
</button>

</a>
</li>
</a>
</li>
</ul>
</div>
</nav>
</div>
<div id="loading">
</div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb py-2">
<a href="index.html">Home</a>
</li>
<a href="property_list.html">Mumbai</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
Ganpati Paying Guest
</li>
</ol>
</nav>
<div id="property-images" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#property-images" data-slide-to="0" class="active"></li>
<li data-target="#property-images" data-slide-to="1" class=""></li>
<li data-target="#property-images" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/properties/1/1d4f0757fdb86d5f.jpg" alt="slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/properties/1/46ebbb537aa9fb0a.jpg" alt="slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/properties/1/eace7b9114fd6046.jpg" alt="slide">
</div>
</div>
<a class="carousel-control-prev" href="#property-images" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#property-images" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="property-summary page-container">

<imgsrc="img/amenities/rowater.svg">
<span>Water Purifier</span>
</div>
<div class="amenity-container">
<imgsrc="img/amenities/dining.svg">
<span>Dining</span>
</div>
<imgsrc="img/amenities/washingmachine.svg">
<span>Washing Machine</span>
</div>
</div>
<div class="col-md-auto">
<h5>Bedroom</h5>
<imgsrc="img/amenities/bed.svg">
<span>Bed with Matress</span>
</div>
<imgsrc="img/amenities/ac.svg">
<span>Air Conditioner</span>
</div>
</div>
<div class="col-md-auto">
<h5>Washroom</h5>
<imgsrc="img/amenities/geyser.svg">
<span>Geyser</span>
</div>
</div>
</div>
</div>
</div>
<div class="property-about page-container">

<h1>About the Property</h1>
<p>Furnished studio apartment - share it with close friends! Located in posh area of Bijwasan in Delhi, this house is available for
both boys and girls. Go for a private room or opt for a shared one and make it your own abode. Go out with your new friends - catch a
movie at the nearest cinema hall or just chill in a cafe which is not even 2 kms away. Unwind with your flatmates after a long day at
work/college. With a common living area and a shared kitchen, make your own FRIENDS moments. After all, there's always a Joey with
unlimited supply of food. Remember, all it needs is one crazy story to convert a roomie into a BFF. What's nearby/Your New
Neighborhood 4.0 Kms from Dwarka Sector- 21 Metro Station.</p>
</div>
<div class="property-rating">
<h1>Property Rating</h1>
<div class="row align-items-center justify-content-between">
<div class="col-md-6">
<div class="rating-criteria row">
<div class="col-6">
<i class="rating-criteria-icon fas fa-broom"></i>
<span class="rating-criteria-text">Cleanliness</span>
</div>
<div class="rating-criteria-star-container col-6" title="4.3">
</div>
</div>

<div class="col-6">
<i class="rating-criteria-icon fas fa-utensils"></i>
<span class="rating-criteria-text">Food Quality</span>
</div>
<i class="far fa-star"></i>
</div>
</div>

<div class="col-6">
<i class="rating-criteria-icon fa fa-lock"></i>
<span class="rating-criteria-text">Safety</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="rating-circle">
<div class="total-rating">4.2</div>
<div class="rating-circle-star-container">
<i class="far fa-star"></i>
</div>
</div>
</div>
</form>
</div>
<span>
</span>
</div>
</div>
</div>
</div>
<a href="property_list.html">PG in Delhi</a>
</div>
<a href="property_list.html">PG in Mumbai</a>
</div>
<a href="property_list.html">PG in Bangalore</a>
</div>
<a href="property_list.html">PG in Hyderabad</a>
</div>
</div>
<div class="footer-copyright">© 2023 Copyright Ramu PG </div>
</div>
</div>

</body>
</html>
CSS :-
.carousel img
{ height: 300px;
object-fit:
cover;
}
.property-summary
{padding: 24px;
}
.property-amenities,
.property-rating
{ background-color:
#fcfaf7;
}
.star-container i
{ color:
#EA322E; font-
size: 12px;
margin-right:
6px;
}
.interested-
container { text-
align: center;
padding-right:
42px;
}

.interested-
container
{padding-right:
0px;
}
}
.interested-container
i {color: #EA322E;
font-size: 20px;
cursor: pointer;
}
.interested-text
{ font-size:
10px;
}
.detail-container
{ padding-bottom:
10px;
}
.property-name
{ font-size:
36px; font-
weight: 600;
}

.property-name
{ font-size:
24px;
}
}
.property-
address {color:
#6f6f6f; font-
size: 16px;
padding-bottom: 5px;
}
.property-gender img
{width: 40px;
}
.rent-container
{display: flex;
align-items: center;
}
.rent {
font-size: 24px;
font-weight:
bold;
padding-right: 10px;
}
.rent {
font-size: 18px;
}
}
.rent-unit
{ color:
#6f6f6f;
font-size: 12px;
}
.button-
container .btn
{font-size: 14px;
border-radius: 0px;
width: 140px; float:
right;
}

.property-
amenities .row>div
{padding-bottom: 24px;
}
}
.amenity-container
{margin: 8px 0px;
}
.amenity-container img
{height: 20px;
margin-top: -
4px; margin-
right: 4px;
}
.rating-criteria
{ margin: 28px 0px;}
.rating-criteria-icon
{width: 14px;
}
.rating-criteria-
text {margin-
left: 8px;
}
.rating-criteria-star-
container {margin-top: -
2px;
}
.rating-criteria-star-container i
{color: #66C2BD;
font-size: 12px;
}
.rating-circle {
background-color: #66C2BD;
color: white;
text-align: center;
height: 160px;
width: 160px;
border-radius:
50%;padding-top:
32px; margin:
auto;
}
.total-rating {
font-size: 40px;
}
.rating-circle-star-
container {font-size:12px;
}
.testimonial-block
{ background-color:
#fcfaf7;padding: 0px
160px 24px;margin-top:
80px;
}

.testimonial-block
{ padding: 0px 24px
24px;
}
}
.testimonial-image-
container {text-align:
center;
}
.testimonial-img
{ width: 100px;
border-radius:
50%;position:
relative; top: -
40px;
}
.testimonial-text
{ color: #777777;
text-align:
center;position:
relative;
}
.testimonial-text i
{ font-size: 20px;
position:
absolute;left:
0px;
top: 0px;
}
.testimonial-text p
{ text-indent:
20px;
}
.testimonial-name
{ color:
#2F2E2E; text-
align: right;
font-weight:
bold; margin-
top: 12px;
}
ScreenShot Of Properties Description Page
JavaScript for Pages Functionalities
File name:- common.js

window.addEventListener("load", function () {
var signup_form = document.getElementById("signup-form");
signup_form.addEventListener("submit", function (event) {
var XHR = new XMLHttpRequest();
var form_data = new FormData(signup_form);
// On success
XHR.addEventListener("load", signup_success);
// On error
XHR.addEventListener("error", on_error);
// Set up request
XHR.open("POST", "api/signup_submit.php");
// Form data is sent with request

XHR.send(form_data);
document.getElementById("loading").style.display = 'block';event.preventDefault();
});
var login_form = document.getElementById("login-form");

login_form.addEventListener("submit", function (event) {
var XHR = new XMLHttpRequest();
var form_data = new FormData(login_form);
// On success
XHR.addEventListener("load", login_success);
// On error
XHR.addEventListener("error", on_error);
// Set up request
XHR.open("POST", "api/login_submit.php");
// Form data is sent with request

XHR.send(form_data);
document.getElementById("loading").style.display = 'block';event.preventDefault();
});
});
var signup_success = function (event)

{ document.getElementById("loading").style.display = 'none';
var response = JSON.parse(event.target.responseText);
if (response.success) {
alert(response.message);
window.location.href = "index.php";
} else {
}
};
var login_success = function (event)

var response = JSON.parse(event.target.responseText);

if (response.success) {
location.reload();
} else {
}
};
var on_error = function (event)

alert('Oops! Something went wrong.');

};
Conclusion
It is naive for an Extension professional to feel that if information is delivered during a learning activity,
the educational mission has been accomplished. The broader mandate that learning generate change
in behaviour, practice, or belief requires a much more sophisticated science and art. In today's
information-rich culture, Extension's store of information no longer makes the organization unique.
Rather, Extension's organizational strength and uniqueness lie in the experience and capability of its
professionals to motivate individuals and groups to action.
It is important for Extension educators to develop and field test useful models for program design and
delivery that include behaviour change. It is equally important for the models to be linked to sound
educational theory that will be valued by partnering agencies and understood by the targeted clientele.
The process described in this article accomplished these objectives and resulted in information that
now provides a framework for quality training in a broad range of programming. Further development of
the model has resulted in additional insights with practical application beyond the scope of this article.
BIBLIOGRAPHY
REFERENCES:-
 www.javapoint.com
 http://www.w3school.com
 www.github.com

Amir Internship File

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Amir Internship File

Uploaded by

Copyright:

Available Formats

A Summer Training Report

College of Innovative Management and Science

And I would like to express my gratitude towards my college COLLEGE OF INNOVATIVE

NAME- AMIR HUSAIN

COURSE- BCA Sem - 5

Roll No.- 2111730580013

S. No. Topic Page No.

4. Home page 4-9

10. JavaScript for 30

How Internshala Works

Benefits of Using Internshala

Server returns the response HTML,CSS,JS

 Hyper text markup language.

 Cascading Style Sheets.

 High-level dynamic interpreted programming language.

Features of the Website

 Frontend: HTML5, CSS3, JavaScript, Bootstrap

<div class="collapse navbar-collapse justify-content-end" id="my-navbar">

<form id="search-form" action="property_list.php" method="GET">

<div class="city-card-container col-md">

<div class="city-card-container col-md">

<div class="city-card-container col-md">

<div class="modal fade" id="signup-modal" tabindex="-1" role="dialog" aria-labelledby="signup-heading" aria-hidden="true">

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

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

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

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

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

<script type="text/javascript" src="js/jquery.js"></script>

<link href="css/bootstrap.min.css" rel="stylesheet" />

<div class="collapse navbar-collapse justify-content-end" id="my-navbar">

<div class="property-card row">

<div class="property-card row">

<div class="property-card row">

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

<script type="text/javascript" src="js/jquery.js"></script>

@media (max-width: 768px) {

@media (max-width: 768px) {

#filter-modal .modal-body .btn-active

#filter-modal .modal-footer button

ScreenShot of Properties list

<link href="css/bootstrap.min.css" rel="stylesheet" />

<div class="collapse navbar-collapse justify-content-end" id="my-navbar">

<div id="property-images" class="carousel slide" data-ride="carousel">

<div class="property-summary page-container">

<div class="property-about page-container">

<div class="rating-criteria row">

<div class="rating-criteria row">

<script type="text/javascript" src="js/jquery.js"></script>

@media (max-width: 768px) {

@media (max-width: 768px) {

@media (max-width: 768px) {

@media (max-width: 768px) {

File name:- common.js

// Form data is sent with request

var login_form = document.getElementById("login-form");

// Form data is sent with request

var signup_success = function (event)

var login_success = function (event)

var response = JSON.parse(event.target.responseText);

var on_error = function (event)

alert('Oops! Something went wrong.');

You might also like