Training Report

On
Web Development
Submitted in fulfilment of the requirement for the award of
the degree of
Bachelor of Computer Applications
(Batch 2022-2025)

By
Mandeep Kumar
Roll No. 1322290
Under the Supervision of Dr. Bharati Sharma
Assistant Professor
M.M. Institute of Computer Technology & Business
Management Maharishi Markandeshwar (Deemed to be
University), Mullana (Ambala)
(NAAC accredited Grade ‘A++’ University)

August 2024

1
DECLARATION

I hereby declare that the work which is being presented in

this report in partial fulfilment of the requirement for the
award of the degree of BACHELOR OF COMPUTER
APPLICATIONS submitted at M.M. Institute of Computer
Technology & Business Management, MMICT&BM.
Maharishi Markandeshwar (Deemed to be University),
Mullana, Ambala is an authentic work done by me during a
period from 01 July 2024 to 26 August 2024 under the
Guidance of Dr. Bharti Sharma.
The work presented in this report has not been submitted by
me for the award of any other degree of this or any other
Institute/University.

Signature:
Name: Mandeep Kumar
Roll no.: 1322290

This is to certify that the above statement made by the

candidate is correct to best of my knowledge and belief.

Date: Signature:
Place: Dr. B h a r a ti S h ar m a
Assistant Professor

2
COMPANY CERTIFICATES

3
 About internshala

We are a technology company on a mission to equip students with

relevant skills & practical exposure to help them get the best
possible start to their careers.
Imagine a world full of freedom and possibilities. A world where you
can discover your passion and turn it into your career.
A world where you graduate fully assured, confident, and prepared to
stake a claim on your place in the world.

We give quality education to our student so that they are able to solve
complex queries and develop good quality software product that is
robust.

We are serving our students with the world-class services for more
than ten years now. The students are delivered with the best IT
solutions after we have developed a great understanding of their
business and requirements.

4
 ACKNOWLEDGEMENT

We would like to express our gratitude to everyone engaged in this

initiative for their cooperation in ensuring its success. We would like
to offer our heartfelt appreciation to everyone who assisted us in
completing our project efficiently.

The BCA with MMICT&BM gave us an excellent chance to contribute

to the project. We especially thank Internshala for guiding us to
successfully complete the project.
We would like to express our gratitude to our module leaders, for
overseeing and aiding us in completing this training successfully.

I would like to express my special thanks to our internal

supervisor Dr. Bharti Sharma.
In this aspect, I am eternally grateful to you. I would like to
acknowledge that this project was completed entirely by me
and not by someone else.

Mandeep Kumar
Roll no. 1322290

5
Internshala Certificate

6
 ABSTRACT

The PG Life Web Application is designed to streamline the

process of finding and booking Paying Guest (PG)
accommodations across various cities in India. The project was
developed as part of a comprehensive web development training
program offered by Internshala, which covered technologies such
as HTML, CSS, Bootstrap, DBMS, PHP, JavaScript, and React.
The application provides users with a seamless experience,
allowing them to search for, filter, and book PGs based on their
preferences. This report covers the entire development process,
including the system analysis, design, implementation, and
testing phases.

List of Diagrams
Diagram Page
Number
System Architecture Diagram 23
Database Schema Diagram 32
Use Case Diagram 33
User Interface Flow Diagram 36

List of Tables
Table Page
Number
User Table Schema 29
PG Listings Table Schema 33
Bookings Table Schema 38
Test Cases and Results 39

7
 List of Abbreviations

Abbreviation Full Form

PG Paying Guest
HTML HyperText Markup Language
CSS Cascading Style Sheets
DBMS Database Management System
PHP Hypertext Preprocessor
JS JavaScript
UI User Interface

Index
Chapter Page Number

Introduction 9

System Analysis 32
Development Environment 32
System Design 33
Implementation and Testing 36
Conclusion 40
Bibliography 40

8
Introduction to Web Development
1. Understanding Web Development
Web development is the process of creating websites and web
applications that are accessible over the internet or an intranet. It
encompasses everything from simple static pages of plain text to
complex web-based applications, e-commerce platforms, and social
network services.
Web development is broadly divided into two main categories:
• Frontend Development: This involves creating the visual and
interactive aspects of a website. It includes everything the user sees
and interacts with, such as the layout, design, and user interface
(UI). Frontend development primarily uses languages like HTML,
CSS, and JavaScript.
• Backend Development: This focuses on the server-side of web
applications. It involves creating and managing databases, server
logic, authentication, and APIs that support the frontend. Backend
development uses languages and frameworks like PHP, Python,
Ruby on Rails, Node.js, and databases like MySQL and MongoDB.

2. The Evolution of Web Development

The field of web development has evolved significantly since the early
days of the internet. Initially, websites were simple and static,
consisting mostly of text and images. Over time, as the demand for
more dynamic and interactive content grew, so did the complexity of
web development.
• Static Websites (1990s): In the early 1990s, websites were
created using HTML (HyperText Markup Language) and were
mostly static. These sites could not interact with users beyond
displaying content.
• Dynamic Websites (2000s): With the advent of server-side
scripting languages like PHP and ASP.NET, websites became more
dynamic, allowing user interaction and database integration.
9
 • Web 2.0 (Mid-2000s): This era brought about the rise of social
media, user-generated content, and interactive web applications.
Technologies like AJAX (Asynchronous JavaScript and XML)
enabled more responsive and interactive web experiences.
• Modern Web Development (2010s-Present): The modern web is
characterized by responsive design, mobile-first approaches,
single-page applications (SPAs), and progressive web apps (PWAs).
Frameworks like React, Angular, and Vue.js have become popular
for building sophisticated user interfaces.

3. Key Technologies in Web Development

Web development relies on a variety of technologies, each playing a
crucial role in creating a functional and engaging web experience:
• HTML (HyperText Markup Language): The backbone of any
website, HTML is used to structure content on the web. It defines
elements like headings, paragraphs, links, images, and more.
• CSS (Cascading Style Sheets): CSS is used to style and layout
web pages. It controls the visual appearance of the website,
including colors, fonts, spacing, and positioning of elements.
• JavaScript: JavaScript is a powerful scripting language that adds
interactivity to websites. It enables features like form validation,
animations, dynamic content updates, and more.
• Frameworks and Libraries: Frontend frameworks like React,
Angular, and Vue.js simplify the process of building complex user
interfaces. Backend frameworks like Express.js, Django, and Ruby
on Rails help streamline server-side development.
• Version Control Systems: Tools like Git and platforms like
GitHub are essential for managing code and collaborating with
other developers.
• Web Servers and Hosting: Web servers like Apache and Nginx
serve web content to users. Hosting services like AWS, Heroku,
and Netlify provide the infrastructure to deploy and scale websites.
10
4. The Importance of Web Development
Web development is a critical skill in the digital age, where an online
presence is vital for businesses, organizations, and individuals. Well-
designed websites and applications can enhance user engagement,
drive business growth, and provide valuable services to users. As
technology continues to evolve, the demand for skilled web developers
remains high, making it a lucrative and fulfilling career path.

5. Future Trends in Web Development

The future of web development is shaped by emerging technologies and
trends:
• Artificial Intelligence (AI) and Machine Learning (ML): AI and ML
are being integrated into web applications to provide personalized user
experiences, chatbots, and advanced data analytics.
• WebAssembly: WebAssembly is a low-level assembly-like language
that enables high-performance applications on the web, bringing near-
native performance to web applications.
• Serverless Architecture: Serverless computing allows developers to
build and deploy applications without managing servers, leading to
more scalable and cost-effective solutions.
• Progressive Web Apps (PWAs): PWAs offer the best of both web and
mobile apps, providing a seamless experience across different devices
and platforms.

11
 Organisation profile

Internshala is a prominent Indian online platform specializing in

internships and training opportunities. Founded in 2010 by Sarvesh
Agrawal, the company aims to bridge the gap between students and
organizations by providing a seamless platform for internships,
training, and career development.
Mission and Vision
Mission:
Internshala's mission is to empower students by offering them access
to quality internship opportunities, skill development programs, and
career guidance, helping them to bridge the gap between academic
learning and practical work experience.
Vision:
To be the leading platform for internships and online training in India,
contributing to the professional growth of students and the success
of organizations by fostering a productive internship ecosystem.
Services and Offerings
1. Internships: Internshala provides a wide range of internship
opportunities across various industries and job roles. These
internships are designed for students at different stages of their
academic journey, offering practical experience and exposure to real-
world work environments.
2. Online Trainings: The platform offers online training programs in
diverse fields such as programming, data science, digital marketing,
and design. These courses are tailored to help students and
professionals develop in-demand skills and enhance their
employability.
3. Scholarships and Competitions: Internshala organizes scholarships
and competitions to encourage students' participation and recognize
their talents. These initiatives are aimed at providing financial
support and fostering a competitive spirit among students.

12
 4. Career Guidance: Internshala also provides resources and tools for
career planning and development. This includes resume-building
tips, interview preparation guidance, and industry insights to help
students make informed career choices.
Key Features
• User-Friendly Interface: The platform is designed to be intuitive and
easy to navigate, making it simple for students and employers to find
and apply for internships or training programs.
• Diverse Opportunities: Internshala features internships and training
programs from various sectors, including technology, business, arts,
and social impact, catering to a wide range of interests and career
goals.
• Employer Services: Organizations can post internship openings,
access a pool of potential candidates, and manage applications
through the platform. Internshala also offers tools for employer
branding and recruitment.
Impact and Reach
Internshala has made a significant impact in the Indian internship
and training landscape. With over 10 million students registered on
the platform, it has facilitated internships for thousands of students
across the country. The platform's extensive network of companies
and organizations helps bridge the gap between academic education
and practical work experience.
Corporate Culture
Internshala fosters a dynamic and inclusive work environment. The
company values innovation, collaboration, and continuous learning,
which are reflected in its approach to providing services and
interacting with users. The team at Internshala is dedicated to
supporting students and organizations, driven by a commitment to
making a positive impact on career development.

13
Headquarters and Global Presence
Internshala is headquartered in Gurgaon, Haryana, India. While its
primary focus is on the Indian market, the company’s growing
reputation and success have garnered attention from international
students and organizations interested in its services.
Future Outlook
Internshala continues to evolve with the changing needs of students
and the job market. The company is focused on expanding its
offerings, enhancing its platform capabilities, and exploring new
opportunities for growth and innovation in the realm of internships
and career development.
In summary, Internshala is a leading platform in India dedicated to
connecting students with meaningful internship experiences and skill
development programs. Its commitment to enhancing career
prospects for students and supporting organizations in their
recruitment efforts underscores its role as a pivotal player in the
internship and training ecosystem.

14
 Scholiverse Education Private Limited

1. Introduction
Scholiverse Education Private Limited, widely recognized as the
parent company of Internshala, is a key player in India's educational
and career tech landscape. Founded by Sarvesh Agrawal, the
company is headquartered in Gurgaon, India. Internshala, its
flagship platform, was created to bridge the gap between students
and career opportunities, particularly focusing on internships and
practical training programs.

2. Vision and Mission

Scholiverse's mission is to empower students by providing them with
meaningful internships and skill-based training. The platform is
committed to helping students gain real-world experience, thus
enhancing their employability. Internshala operates on the principle
that quality education should be accessible to all, aligning with its
15
 mission to democratize career opportunities across India.

3. Products and Services

The primary product of Scholiverse is Internshala, which offers a
range of services:
Internship Listings: A platform for students to find internships in
various fields such as engineering, management, design, content
writing, and more.
Online Training: Skill-based courses in areas like web development,
digital marketing, data science, and programming languages.
Career Guidance: * Articles, webinars, and resources aimed at
helping students navigate their career paths.

4. Unique Selling Proposition (USP)

Internshala stands out in the market due to several unique features:
Free Access: The platform is free for both students and companies,
unlike many competitors who operate on a freemium model.
Verified Listings: Internshala only publishes internships with
stipends (except for NGOs) and verifies each company before listing,
ensuring quality and trustworthiness.
Focus on Student-Centric Services: The platform emphasizes
student welfare, offering training programs that are both affordable
and industry-relevant.

5. Financial Performance
Scholiverse Education Private Limited has shown a mixed financial
performance over recent years:
Revenue: For the financial year ending on March 31, 2023, the
company's operating revenue was reported to be within the range of
INR 1 crore to INR 100 crore.
EBITDA: The EBITDA saw a significant decline of approximately
138% over the previous year, which could indicate challenges in
16
 managing operational costs.
Net Worth: Despite the decline in EBITDA, the company's net worth
increased by around 741%, suggesting a strategic shift or capital
infusion that positively impacted its balance sheet.

6. Recent Developments and Funding

In May 2022, Scholiverse raised fresh capital through a Series A
funding round, although the exact amount was not disclosed. This
investment is expected to support the company's expansion plans,
particularly in enhancing its technology and scaling its services to a
broader audience.

7. Management and Leadership

Sarvesh Agrawal, the founder and CEO of Scholiverse, is an alumnus
of IIT Madras, where he pursued an Integrated B.Tech and MTech in
Civil Engineering. His background includes experience as a Senior
Business Analyst at Capital One in the UK, which equipped him with
the skills and vision to build and lead Internshala.

8. Social Impact
Internshala has had a significant impact on the student community
in India:
Career Opportunities: By connecting students with internships,
Internshala has played a crucial role in enhancing employability and
career readiness among India's youth.
Skill Development: The platform's affordable training programs have
helped thousands of students acquire new skills, making them
competitive in the job market.

9. Challenges and Opportunities

While Scholiverse has made significant strides, it faces challenges
typical of startups in the ed-tech space:
17
 Scalability: Expanding operations while maintaining the quality of
services is a continuous challenge.
Competition: The ed-tech sector is highly competitive, with
numerous players offering similar services, which puts pressure on
innovation and customer retention.
10. Future Outlook
Scholiverse aims to further develop Internshala's platform by
integrating advanced technologies such as AI and machine learning
to personalize the student experience. The company is also exploring
partnerships and collaborations to expand its reach both in India and
globally.

11. Corporate Social Responsibility (CSR)

As part of its CSR initiatives, Scholiverse is focused on making career
opportunities accessible to students from underprivileged
backgrounds. The company regularly conducts free webinars,
workshops, and other educational activities aimed at empowering
these students.
12. Conclusion
Scholiverse Education Private Limited, through Internshala, has
positioned itself as a vital player in India's career tech industry. With
a strong focus on quality, accessibility, and student welfare, the
company is well-poised to continue its growth and impact on the
Indian education sector.

18
 Introduction of project
Table of Contents
1. Title Page
2. Introduction
2.1 Background
2.2 Objectives
2.3 Scope
3. Development Process and Methodology
3.1 Training and Learning Sources
3.2 Implementation
4. Literature Review
5. System Design and Architecture
5.1 System Overview
5.2 System Architecture
5.3 Database Design
5.4 UI/UX Design
6. Technologies Used
7. Implementation
7.1 User Registration and Login
7.2 Search and Filter Functionality
7.3 PG Listings and Details
7.4 Booking Process
7.5 Additional Features
8. Testing and Validation
8.1 Testing Overview
8.2 Test Cases
8.3 Results
8.4 User Feedback

19
 9. Results and Discussion
9.1 Project Outcomes
9.2 Challenges and Solutions
10. Conclusion and Future Work
10.1 Conclusion
10.2 Future Work
11. References

1. Title Page
Project Title: "PG Life Web Application"
Your Name: Mandeep kumar
Course Details: Bachelor of Computer Applications (BCA)
Institution Name: MMICT&BM
Submission Date: 27 Aug. 2024

2. Introduction
2.1 Background
In today's fast-paced world, finding suitable accommodation in a new
city can be a daunting task. This challenge is particularly significant
for students and professionals who often have to relocate for education
or work. The traditional methods of finding PG accommodations are
often time-consuming and unreliable. With the rise of digital
platforms, there is a growing need for an online solution that simplifies
this process. The PG Life Web Application aims to fill this gap by
providing an efficient, user-friendly platform where users can search
for and book PG accommodations with ease.

2.2 Objectives
The primary objectives of the PG Life Web Application are:
• To develop a responsive web application that allows users to find and

20
 book PG accommodations across various cities.
• To implement a secure user authentication system for login and
registration.
• To provide a robust search functionality that filters PG listings based
on user preferences such as location, price, and amenities.
• To create a seamless booking process where users can reserve
accommodations online.
• To ensure that the application is scalable and can handle a large
number of users and listings.
2.3 Scope
The scope of the PG Life Web Application includes:
• Catering to students, professionals, and anyone looking for PG
accommodations in major cities.
• Covering multiple cities with a diverse range of PG options.
Providing detailed information about each PG, including price,
location, amenities, and user reviews.
• Implementing a feedback system where users can rate and review
PGs they have stayed in.
• Future expansion to include additional features such as online
payment integration and real-time booking confirmation.

3. Development Process and Methodology

3.1 Training and Learning Sources
The development of the PG Life Web Application was largely
carried out as part of an 8-week web development training
program offered by Internshala. The training provided
comprehensive video tutorials on various web technologies,
including HTML, CSS, Bootstrap, PHP, JavaScript, and React.
Each module of the training was accompanied by assignments,
which helped reinforce the concepts and guided the step-by-
step development of the project.
21
 3.2 Implementation
Throughout the training, I followed the structured learning path
provided by Internshala. This involved:
• Watching Training Videos: The training videos were my
primary learning resource, offering detailed explanations
and demonstrations of each technology used in the project.
I applied the concepts learned in these videos directly to
the development of the PG Life Web Application.
• Completing Assignments: After each video module, I
completed the corresponding assignments, which were
designed to be practical and project-oriented. These
assignments played a crucial role in shaping the core
features of the application.
• Additional Research: For certain advanced features and
troubleshooting, I supplemented my learning by consulting
additional resources, including YouTube tutorials and
technical blogs found through Google searches. These
resources provided valuable insights and solutions to
specific challenges encountered during the project.

3.3 Contributions
The combined approach of structured training and
independent research allowed me to develop a fully functional
and responsive web application. The training assignments laid
the foundation for the project, while additional research helped
refine and enhance the final product.

4. Literature Review
Several online platforms offer PG booking services, but most lack
comprehensive search filters, user-friendly interfaces, or real-time
22
 availability updates. Websites like OYO Rooms provide basic listings,
but they often do not allow users to book directly through the
platform or lack detailed information about the PGs.

The PG Life Web Application differentiates itself by offering a more

interactive and user-focused experience. The integration of advanced
search features, real-time booking, and a responsive design using
Bootstrap ensures that users can find and book PGs with minimal
effort. This project also emphasizes the importance of user
authentication and data security, which are critical factors in modern
web applications.

5. System Design and Architecture

5.1 System Overview
The PG Life Web Application follows a client-server architecture where
the frontend interacts with the backend server to fetch and display
data. The frontend is built using HTML, CSS, Bootstrap, and React,
ensuring.
The backend is developed using PHP, which handles server-side logic
and database interactions. The database management system
(DBMS) used is MySQL, where all user data, PG listings, and booking
details are stored.

5.2 System Architecture

The application is divided into the following modules:
• Frontend (Client-Side): The user interface where users interact
with the application. Built using HTML, CSS, Bootstrap for
responsive design, and React for dynamic content rendering.
• Backend (Server-Side): Handles requests from the frontend,
processes business logic, and communicates with the database.
Developed using PHP.
• Database: MySQL is used to store user information, PG listings,
23
 bookings, and other necessary data.

5.3 Database Design

The database schema consists of several tables:
• Users Table: Stores user information like username, password
(encrypted), contact details, etc.
• PG Listings Table: Contains details of PGs such as location,
price, amenities, availability, and images.
• Bookings Table: Records booking transactions, including user
ID, PG ID, booking date, and status.

5.4 UI/UX Design

The user interface is designed to be intuitive and easy to navigate.
Bootstrap is used to ensure the application is responsive across
different devices. The design focuses on simplicity, with clear
navigation menus, search options, and visually appealing layouts.

6. Technologies Used
• HTML, CSS, and Bootstrap
HTML (HyperText Markup Language) is used to structure the web
pages, while CSS (Cascading Style Sheets) is employed to style the
components. Bootstrap, a popular CSS framework, is used for
responsive design, ensuring that the application looks good on all
devices.
• JavaScript and React
JavaScript is the core scripting language that makes the web pages
interactive. React, a powerful JavaScript library, is used to build the
user interface. React allows the application to dynamically update
content without reloading the page, providing a smooth user
experience.
• PHP
24
 PHP (Hypertext Preprocessor) is used for server-side scripting. It
processes requests from the client, interacts with the database, and
returns the appropriate data to be displayed on the frontend.
• DBMS (MySQL)
MySQL is the database management system used to store all the data
required by the application. It is a relational database that provides
an efficient way to organize and manage user data, PG listings, and
booking records.
• Version Control (Git)
Git is used for version control, allowing the development process to
be managed efficiently. By using Git, changes to the codebase are
tracked, and different versions of the application can be managed,
making collaboration easier.

7. Implementation
7.1 User Registration and Login
The application includes a secure user registration and login system.
New users can create an account by providing their name, email,
password, and contact details. Passwords are encrypted using secure
hashing algorithms before being stored in the database. Upon
successful registration, users can log in using their email and
password. The login process includes session management to keep
users logged in until they choose to log out.

25
Login Page Image:-

Signup Page Image:-

26
7.2 Search and Filter Functionality
The search functionality allows users to find PG
accommodations based on various criteria such as city, price
range, and amenities. The search bar is prominently placed on
the homepage, and users can refine their search results using
filters. The search results are dynamically updated using React,
providing a fast and responsive user experience.
Image:-

7.3 PG Listings and Details

Each PG listing includes detailed information such as the name
of the PG, location, price, available amenities, and photos. Users
can click on a listing to view more details, including a description
of the PG, user reviews, and contact information. The listings
page is designed to be intuitive, with clear labels and easy
navigation.

27
 Image:-

7.4 Booking Process

The booking module allows users to reserve a PG. After selecting
a PG, users can view available dates and confirm their booking.
The booking details are stored in the database, and a
confirmation is sent to the user.
Image:-

7.5 Additional Features

Additional features include the ability for users to view their
booking history, update their profiles, and manage their
account settings. The application also includes an admin panel
where PG owners can manage their listings, update

28
 availability, and view booking statistics.

8. Testing and Validation

8.1 Testing Overview
The application underwent rigorous testing to ensure it meets
all functional and non-functional requirements. Testing
included unit testing of individual components, integration
testing of interconnected modules, and system testing to
validate the complete application.
8.2 Test Cases
Several test cases were created to test different aspects of the
application. For example:
• User Registration: Test the registration process with valid and
invalid data inputs to ensure proper validation and error
handling.
• Search Functionality: Test the search feature by inputting
various criteria and verifying that the results match the
expected output.
• Booking System: Test the booking process by simulating
multiple bookings and ensuring that the availability and
booking details are accurately recorded.

8.3 Results
The testing phase revealed a few minor bugs, such as issues
with form validation and session management. These issues
were promptly addressed, and the application was retested to
ensure they were resolved. The final version of the application
passed all test cases successfully, with no major issues
remaining.
8.4 User Feedback
29
 User feedback was collected during the testing phase from a
group of potential users. The feedback was generally positive,
with users praising the ease of use and the comprehensive
search functionality. Some users suggested additional features,
such as the ability to save favorite listings, which could be
considered for future updates.

9. Results and Discussion

9.1 Project Outcomes
The PG Life Web Application successfully meets its objectives,
providing a platform that simplifies the process of finding and
booking PG accommodations. The application is user-friendly,
responsive, and secure, making it a valuable tool for students
and professionals.
9.2 Challenges and Solutions
During the development process, several challenges were
encountered. For example, integrating the various frontend and
backend technologies required careful planning and execution.
The team also faced issues with database performance, which
were resolved by optimizing queries and indexing key tables.
Another challenge was ensuring the application was responsive
and worked well on both desktop and mobile devices. This was
addressed by using Bootstrap and thoroughly testing the
application on different screen sizes.

10. Conclusion and Future Work

10.1 Conclusion
In conclusion, the PG Life Web Application is a robust and
efficient platform that addresses the challenges of finding and
booking PG accommodations. The application leverages modern
30
 web technologies to provide a seamless user experience, making
it a valuable resource for students and professionals across
various cities.
10.2 Future Work
There are several potential areas for future development:
• Payment Integration: Implementing an online payment
system to allow users to pay for their bookings directly
through the application.
• Real-Time Availability: Adding features to display real-
time availability of PGs to prevent double bookings.
• User Profiles: Enhancing user profiles with additional
features such as saved searches, favorite listings, and
booking history.
• Mobile App Development: Expanding the platform to
include a mobile app version for Android and iOS users.

11. References
Include this section with a list of the resources you consulted during
your project:
• Internshala Training Videos: A comprehensive web
development training program covering HTML, CSS, Bootstrap,
PHP, JavaScript, React, and other technologies.
• YouTube Tutorials: Various tutorials on specific topics such as
implementing login systems, database connections, and React
components.
• Google Search: Articles and blogs on web development
practices, troubleshooting, and best practices in coding and
design.

31
 System Analysis

Feasibility Study
A feasibility study was conducted to determine the practicality of
developing the PG Life Web Application. The study considered
technical, economic, and operational feasibility:
• Technical Feasibility: The required technologies, such as HTML,
CSS, Bootstrap, PHP, JS, and React, are well within the developer's
skill set and are readily available.
• Economic Feasibility: The project is cost-effective, as it primarily
requires time and effort, with minimal financial investment for
hosting and domain registration.
• Operational Feasibility: The application is designed to meet the
needs of users looking for PG accommodations, making it a valuable
tool for students and professionals.

Hardware and Software Requirements

Hardware Requirements:
• Processor: Intel i3 or higher
• RAM: 4GB or higher
• Storage: 20GB free space
Software Requirements:
• Operating System: Windows 10 or higher
• Development Tools: Visual Studio Code, XAMPP for PHP and
MySQL, Node.js for React
• Web Browsers: Google Chrome, Mozilla Firefox

Development Environment
Introduction of Technology Used
The PG Life Web Application was developed using a variety of web

32
 technologies:
• HTML/CSS/Bootstrap: Used for creating the structure, styling,
and responsive design of the web pages.
• JavaScript (JS): Used for adding interactivity and dynamic
content to the web pages.
• React: A JavaScript library used for building user interfaces and
managing the state of the application.
• PHP: A server-side scripting language used for handling backend
logic and interacting with the database.
• MySQL: A relational database management system used to store
user data, PG listings, and bookings.
• Bootstrap: Used for ensuring that the application is responsive
and works well on various devices.

System Design
Modular Description
The system is divided into several modules, each responsible for
specific functionalities:
• User Authentication Module: Handles user registration, login,
and session management.
• Search and Filter Module: Allows users to search for PGs based
on location, price, and amenities.
• PG Listings Module: Displays detailed information about available
PGs, including photos, descriptions, and reviews.
• Booking Module: Manages the booking process, ensuring that
users can reserve PGs based on their preferences.
• Admin Module: Allows the administrator to manage PG listings,
user accounts, and bookings.

33
User Interface Diagram
The User Interface (UI) Diagram provides a visual representation of the
flow between different screens and functionalities within the
application.
Diagram Description:
• Login Page: Users can log in or register.
• Home Page: Includes a search bar and navigation menu.
• Search Results Page: Displays PG listings based on user search
criteria.
• PG Details Page: Shows detailed information about a selected PG,
including amenities, price, and availability.
• Booking Confirmation Page: Allows users to confirm their booking.

Signup

Search
Bar

34
 PG LIST
HERE

Database Schema Diagram

The Database Schema Diagram illustrates the structure of the
database, showing how different tables are related to each
other.

35
Diagram Description:
• Users Table: Stores user information such as user ID, name, email,
and password.
• PG Listings Table: Contains details about each PG, including PG ID,
location, price, amenities, and availability.
• Bookings Table: Records bookings made by users, including booking
ID, user ID, PG ID, booking date, and status.
• Reviews Table: Stores user reviews for PGs, including review ID, user
ID, PG ID, rating, and comments.

Implementation and Testing

Implementation and Screenshots
The implementation of the PG Life Web Application involved several
steps:
• Frontend Development: The user interface was developed using
HTML, CSS, and Bootstrap, with React used for managing dynamic
content.
• Backend Development: PHP was used for server-side logic,
including user authentication and interaction with the MySQL
database.
• Database Design: MySQL was used to design the database schema,
with tables for users, PG listings, bookings, and reviews.

Screenshots:
• Login Page

36
• Home Page with Search Bar

37
• PG Listings Page

• Booking Page

38
 • Admin Dashboard

Testing
The application underwent rigorous testing to ensure functionality,
usability, and security. Testing included:
• Unit Testing: Testing individual components such as forms, buttons,
and API calls.
• Integration Testing: Ensuring that different modules work together
as expected.
• System Testing: Validating the complete application against the
requirements.

Test Cases and Results:

• User Registration: Test with valid and invalid inputs to ensure proper
validation.
• Search Functionality: Verify that search results match the input
criteria.
39
 • Booking Process: Ensure that bookings are accurately recorded and
reflected in the database.

Conclusion
The PG Life Web Application successfully meets the objectives outlined at
the beginning of the project. It provides a user-friendly platform for finding
and booking PG accommodations, with robust features and a responsive
design. The project demonstrated the effective use of modern web
technologies, and the application is well-positioned for future
enhancements, such as payment integration and a mobile app version.

Bibliography
Include references to all the resources used during the project, including:
• Internshala Training Videos: Web development training program.
• YouTube Tutorials: Tutorials on specific technologies and features.
• Google Articles: Articles and blogs on web development best
practices.

40