SlideShare a Scribd company logo
1 of 21
RV College of
Engineering
Go, change the world
Web Page development for
listing properties
Department of Electronics & Telecommunication
Engineering, RVCE
Student Name - Rishabh Jain
USN – 1RV21ET044
Internal Guide Name - Prof.Shambulinga M.
Designation – Assistant Professor
Dept. of ETE RVCE
Company Name - Internshala
Summer Internship-1 -21ETI310
Go, change the world
CONTENT
Thursday,30 March 2023 Dept of EtE, RV COLLEGE OF ENGINEERING 2
S.NO CONTENT
1. Summary
2. About the company
3. About the department
4. List of the task performed
5. Client server network
6. HTML, CSS and its properties
7. Database Management System
8. Web page Development for listing properties
8.1 Index page
8.2 Property list
8.3 Property detail
9 Reflection-Learning outcomes
10 Certificate
Go, change the world
SUMMARY
S.N
o
Company Internal Guide Duration in Weeks External Guide
1 Internshala Prof.Shambulinga M.
(Assistant Professor)
8 weeks Anuj Kalbalia
(Founder,Ungineering)
SUMMARY OF INTERNSHIP
Go, change the world
SUMMARY OF INTERNSHIP
Internshala is a popular online platform that connects students and young
professionals with employers offering internships in various fields. One of
the popular categories on Internshala is web development, which is a field
of software engineering focused on building web applications and
websites using technologies such as HTML, CSS, JavaScript, and various
web frameworks.
Overall, an internship in web development through Internshala can
provide valuable hands-on experience, networking opportunities, and a
chance to explore a career in web development. It can also be a stepping
stone to a full-time job or further education
Thursday,30 March 2023 Dept of EtE, RV COLLEGE OF ENGINEERING 4
Go, change the world
ABOUT THE COMPANY
Internshala is an Indian company that provides an online internship
platform for students and recent graduates. It was founded in 2010 by
Sarvesh Agrawal and is headquartered in Gurgaon, India.
Internshala provides internship opportunities across various industries
such as engineering, management, media, law, design, and more.
Internshala has partnered with over 100,000 companies and has helped
more than 5 million students find internships and training opportunities.
The company has received several awards, including the Best
Educational Website award at the Indian Education Awards in 2017 and
2018.
Thursday,30 March 2023 Dept of EtE, RV COLLEGE OF ENGINEERING 5
Go, change the world
ABOUT THE DEPARTMENT
Web development refers to the process of creating and maintaining websites or web
applications. It involves designing, coding, testing, and publishing web pages Web
development can be broadly classified into two categories: Front-end development
and Back-end development.
• Front-end development involves designing and developing the user interface of
the website or web application using HTML, CSS, and JavaScript..
• Back-end development involves creating and maintaining the server-side of the
website or web application.
• Full-stack development is a combination of front-end and back-end
development and involves creating and maintaining both the client-side and
server-side of the website or web application.
Thursday,30 March 2023 Dept of EtE, RV COLLEGE OF ENGINEERING 6
Go, change the world
LIST OF TASK PERFORMED
• Study how the client server network work Learns about the http
request and how the web browser and web server works with each
other and learn how the ip address is used for communication
between systems
• Learn about Html and basic CSS properties box model, font family,
inspect element, flex box and how the bootstrap can used to reduce
the work and make the project more easy to understand.
• Learn about the Data Base Management System (DBMS) and also
learn how the user data is stored
• In the end of the project create the web page to display the listing of
pg in different city.
Thursday,30 March 2023 Dept of EtE, RV COLLEGE OF ENGINEERING 7
Fig 1.1 Client server network
Fig 1.2 Web page for listing properties
Go, change the world
CLIENT SERVER NETWORK
Thursday,30 March 2023 RV COLLEGE OF ENGINEERING 8
In web development, a client-server network architecture is a common model
used to facilitate communication between the user's web browser (the client)
and the web server that hosts the website. In the project Xamp is used to create
the web server in the system itself .The client-server model works as follows:
• The user opens their web browser and enters a URL (Uniform Resource
Locator) to access a website.
• The browser sends a request to the web server for the page or resource
associated with the URL.
• The web server receives the request and processes it, generating a response
that contains the requested data.
• The server sends the response back to the client's browser, which displays
the data on the user's screen.
Fig 2.1 Process of http request and response
Go, change the world
HTML AND CSS
Thursday,30 March 2023 RV COLLEGE OF ENGINEERING 9
1. HTML (Hypertext Markup Language) is the standard markup language used to create
web pages. It defines the structure of a web page and its content using various elements
such as headings, paragraphs, links, images, tables, and forms.
2. CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation
of HTML documents. It allows web designers to control the layout, typography, and
color of a web page. Some common properties in CSS include:
• Font properties: used to specify the font family, size, style, weight, and color of text.
• Box model properties: used to control the size, padding, border, and margin of elements.
Positioning properties: used to position elements on the page, including relative, absolute,
fixed, and sticky positioning.
• Display properties: used to control how elements are displayed, including block, inline,
and flex display.
Fig 2.2 HTML
Fig 2.1 CSS
Fig 2.3 CSS properties
Go, change the world
Date Base Management System(DBMS)
Thursday,30 March 2023 Dept of EtE, RV COLLEGE OF ENGINEERING 10
Fig 3.2 PhpMyAdmin server used for forming database
A Database Management System (DBMS) is a software system
that allows users to manage databases. It enables users to store,
organize, retrieve and manipulate data in a structured way. DBMS
provides data security, consistency, integrity, backup and recovery.
It is used in various industries such as finance, healthcare,
education, and government. There are different types of DBMS
including relational, NoSQL and object-oriented. Relational DBMS
is the most common type and it organizes data into tables that can
be linked together through relationships. Overall, DBMS is an
essential tool for managing large amounts of data
efficiently and securely.
Go, change the world
Web Page for Listing Properties
Thursday,30 March 2023 Dept of EtE, RV COLLEGE OF ENGINEERING 11
The web page for listing properties (project) consist of 3 web page which are
connect through anchor tag the different element use in creating the web page is
HTML, CSS, bootstrap The code is written in the vs code editor the different
tools of bootstrap used in the project such as carosel, modal, sticky image, bread
crumb etc. the different part of the page are divided into class and each class is
edited with different properties using class and selectors The file from the
bootstrap it taken from the internshala which helps in designing and adding
properties to the different element just by using the class name of it apart from
this the image folder used in the project is also given during the internship itself
The three page are-
• Index page
• Property list
• Property detail
Fig 4.1 Index page of project
Go, change the world
Thursday,30 March 2023 RV COLLEGE OF ENGINEERING 12
INDEX PAGE
START
BANGALORE MUMBAI
HOME PROPERTY LIST
PAGE
PG
LIFE SIGNUP LOGIN MAJOR
CITIES
ENTER
DETAIL
CREATE
ACCOUNT
ENTER
DETAIL DELHI
Go, change the world
Thursday,30 March 2023 RV COLLEGE OF ENGINEERING 13
INDEX PAGE
The index page consist of following things-
• The PG life button which take the page to home page
• Login page which has option for entering detail of the
user and on clicking on the login button user redirect to
the home page
• Create account option is also their which has option to
already account which go the login page
• There is search option also but is does not connect to any
another page
• There are option of major cities which transfer page to
property details
Fig 5.1 Top of the index page
Fig 5.2 Bottom of the index page
Go, change the world
Thursday,30 March 2023 RV COLLEGE OF ENGINEERING 14
PROPERTY LIST PAGE
START
Property
detail
page
PROPERTY 1 PROPERTY 2 PROPERTY 3
View
DETAIL
View
DETAIL
View
DETAIL
FILTERS
OKAY
Go, change the world
Thursday,30 March 2023 RV COLLEGE OF ENGINEERING 15
PROPERTY LISTING PAGE
Page 2 to the project contains the listing properties
in the web site it contain the option for the filter and
sorting apart for this now breadcrumb can be visible
in the navigation bar which led the user to the home
page apart from this the signup and login option are
present in the sticky top of the web page the lising
property is divided in to the different div and it
show the rating price and view option clicking on
the view option led to the final page to the project
property details
Fig 6.1 Top of the listing page
Fig 6.2 Bottom of the Listing page
Go, change the world
Thursday,30 March 2023 RV COLLEGE OF ENGINEERING 16
PROPERTY DETAIL PAGE
START
RENT NOW
SIGNUP
LOGIN
ENTER
DETAIL
CREATE
ACCOUNT
ENTER
DETAIL
Go, change the world
PROPERTY DETAIL PAGE
The property detail page is the last page of the project it
contain the detail of the specific property which include
the amenities such Wi-Fi, ac, food etc. apart from this the
rent option is also available in the page. The property
page also contain the testimonials of the people apart
from this the property detail page has carousel which is
moving image which we use by taking files from
bootstrap apart from this the property detail page it also
contain the rating by the user
Thursday,30 March 2023 Dept of EtE, RV COLLEGE OF ENGINEERING 17
Fig 7.1 Top of the property detail page
Fig 7.2 Bottom of the Listing page
Go, change the world
LEARNING OUTCOMES
Thursday,30 March 2023 Dept of EtE, RV COLLEGE OF ENGINEERING 18
Learning outcomes for a web development internship include:
• Understanding the basics of web development: HTML, CSS, and
JavaScript
• Learning how to build websites using popular front-end frameworks like
Bootstrap, React
• Gaining hands-on experience with server-side programming languages
such as PHP
• Understanding how to create and manage databases using MySQL or
MongoDB Learning about web application security
• Understanding how to deploy websites and applications to a server or
cloud-based platform
• Learning how to collaborate with a team and communicate effectively.
Fig 8.1 Learning Outcomes
Go, change the world
Thursday,30 March 2023 RV COLLEGE OF ENGINEERING 19
REFERENCES
Here are some of the reference used for making project –
[1] J. Smith, "A Comparison of Front-End Frameworks for Web Development," IEEE International Conference on Web
Services, 2018, pp. 78-85
[2] S. Kumar and R. Sharma, "Responsive Web Design: A Comprehensive Study," IEEE International Conference on
Computing, Communication and Automation, 2017, pp. 68-74
[3] J. Doe and M. Singh, "Web Security: Threats and Countermeasures," IEEE International Conference on Computer
and Communications Security, 2019, pp. 215- 222.
[4] R. Gupta and A. Singh, "Web Accessibility: A Review of Guidelines and Techniques," IEEE International
Conference on Advances in Computing, Communication and Information Science, 2020, pp. 124-131.
[5] N. Patel and V. Shah, "Performance Analysis of Web Applications Using Different Metrics," IEEE International
Conference on Emerging Trends in Technology and Applied Sciences, 2018, pp. 89-96.A Complete Overview On: Web-
development Ayush Mauryavans
Go, change the world
CERTIFICATE
Thursday,30 March 2023 Dept of EtE, RV COLLEGE OF ENGINEERING 20
.
Go, change the world
Thursday,30 March 2023 RV COLLEGE OF ENGINEERING 21
THANK YOU

More Related Content

Similar to internship final web development ppt[1].pptx

Welcome to International Journal of Engineering Research and Development (IJERD)
Welcome to International Journal of Engineering Research and Development (IJERD)Welcome to International Journal of Engineering Research and Development (IJERD)
Welcome to International Journal of Engineering Research and Development (IJERD)
IJERD Editor
 
WEB MARKETING- SEO AND SMO
WEB MARKETING- SEO AND SMOWEB MARKETING- SEO AND SMO
WEB MARKETING- SEO AND SMO
Ajay Kumar
 
A survey of web metrics
A survey of web metricsA survey of web metrics
A survey of web metrics
unyil96
 
HIDDAYAT RESUME-SHAREPOINT DEVELOPER
HIDDAYAT RESUME-SHAREPOINT DEVELOPERHIDDAYAT RESUME-SHAREPOINT DEVELOPER
HIDDAYAT RESUME-SHAREPOINT DEVELOPER
HIDDAYAT RASHEED
 

Similar to internship final web development ppt[1].pptx (20)

Alumni Management System -Web Application
Alumni Management System -Web ApplicationAlumni Management System -Web Application
Alumni Management System -Web Application
 
Welcome to International Journal of Engineering Research and Development (IJERD)
Welcome to International Journal of Engineering Research and Development (IJERD)Welcome to International Journal of Engineering Research and Development (IJERD)
Welcome to International Journal of Engineering Research and Development (IJERD)
 
IJIRT155558_PAPER.pdf
IJIRT155558_PAPER.pdfIJIRT155558_PAPER.pdf
IJIRT155558_PAPER.pdf
 
collage website report to programming code
collage website report to programming codecollage website report to programming code
collage website report to programming code
 
Expanse tracker
Expanse trackerExpanse tracker
Expanse tracker
 
Component based User Interface Rendering with State Caching Between Routes
Component based User Interface Rendering with State Caching Between RoutesComponent based User Interface Rendering with State Caching Between Routes
Component based User Interface Rendering with State Caching Between Routes
 
Karthikeyan_Resume
Karthikeyan_ResumeKarthikeyan_Resume
Karthikeyan_Resume
 
Analyzing bootsrap and foundation font-end frameworks : a comparative study
Analyzing bootsrap and foundation font-end frameworks : a comparative studyAnalyzing bootsrap and foundation font-end frameworks : a comparative study
Analyzing bootsrap and foundation font-end frameworks : a comparative study
 
Tapas Ghosh
Tapas GhoshTapas Ghosh
Tapas Ghosh
 
Web application architecture guide how it works types, components, best pract...
Web application architecture guide how it works types, components, best pract...Web application architecture guide how it works types, components, best pract...
Web application architecture guide how it works types, components, best pract...
 
WEB MARKETING- SEO AND SMO
WEB MARKETING- SEO AND SMOWEB MARKETING- SEO AND SMO
WEB MARKETING- SEO AND SMO
 
PresentationofINTERship.pdf
PresentationofINTERship.pdfPresentationofINTERship.pdf
PresentationofINTERship.pdf
 
A survey of web metrics
A survey of web metricsA survey of web metrics
A survey of web metrics
 
Web design
Web designWeb design
Web design
 
Industrial Training and Practice (ITP).pptx
Industrial Training and Practice (ITP).pptxIndustrial Training and Practice (ITP).pptx
Industrial Training and Practice (ITP).pptx
 
Full Resolt Report
Full Resolt ReportFull Resolt Report
Full Resolt Report
 
HIDDAYAT RESUME-SHAREPOINT DEVELOPER
HIDDAYAT RESUME-SHAREPOINT DEVELOPERHIDDAYAT RESUME-SHAREPOINT DEVELOPER
HIDDAYAT RESUME-SHAREPOINT DEVELOPER
 
Technical Lead (Azure , SharePoint, ASP.Net ), 12+ years exp.
Technical Lead (Azure , SharePoint, ASP.Net ), 12+ years exp.Technical Lead (Azure , SharePoint, ASP.Net ), 12+ years exp.
Technical Lead (Azure , SharePoint, ASP.Net ), 12+ years exp.
 
Architecting an ASP.NET MVC Solution
Architecting an ASP.NET MVC SolutionArchitecting an ASP.NET MVC Solution
Architecting an ASP.NET MVC Solution
 
Web Layout Generation (IC-SCCE 2006)
Web Layout Generation (IC-SCCE 2006)Web Layout Generation (IC-SCCE 2006)
Web Layout Generation (IC-SCCE 2006)
 

Recently uploaded

Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
Standard vs Custom Battery Packs - Decoding the Power Play
Standard vs Custom Battery Packs - Decoding the Power PlayStandard vs Custom Battery Packs - Decoding the Power Play
Standard vs Custom Battery Packs - Decoding the Power Play
Epec Engineered Technologies
 
Integrated Test Rig For HTFE-25 - Neometrix
Integrated Test Rig For HTFE-25 - NeometrixIntegrated Test Rig For HTFE-25 - Neometrix
Integrated Test Rig For HTFE-25 - Neometrix
Neometrix_Engineering_Pvt_Ltd
 
Hospital management system project report.pdf
Hospital management system project report.pdfHospital management system project report.pdf
Hospital management system project report.pdf
Kamal Acharya
 

Recently uploaded (20)

Ghuma $ Russian Call Girls Ahmedabad ₹7.5k Pick Up & Drop With Cash Payment 8...
Ghuma $ Russian Call Girls Ahmedabad ₹7.5k Pick Up & Drop With Cash Payment 8...Ghuma $ Russian Call Girls Ahmedabad ₹7.5k Pick Up & Drop With Cash Payment 8...
Ghuma $ Russian Call Girls Ahmedabad ₹7.5k Pick Up & Drop With Cash Payment 8...
 
Bhubaneswar🌹Call Girls Bhubaneswar ❤Komal 9777949614 💟 Full Trusted CALL GIRL...
Bhubaneswar🌹Call Girls Bhubaneswar ❤Komal 9777949614 💟 Full Trusted CALL GIRL...Bhubaneswar🌹Call Girls Bhubaneswar ❤Komal 9777949614 💟 Full Trusted CALL GIRL...
Bhubaneswar🌹Call Girls Bhubaneswar ❤Komal 9777949614 💟 Full Trusted CALL GIRL...
 
Thermal Engineering -unit - III & IV.ppt
Thermal Engineering -unit - III & IV.pptThermal Engineering -unit - III & IV.ppt
Thermal Engineering -unit - III & IV.ppt
 
Online electricity billing project report..pdf
Online electricity billing project report..pdfOnline electricity billing project report..pdf
Online electricity billing project report..pdf
 
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
 
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptxHOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
 
DC MACHINE-Motoring and generation, Armature circuit equation
DC MACHINE-Motoring and generation, Armature circuit equationDC MACHINE-Motoring and generation, Armature circuit equation
DC MACHINE-Motoring and generation, Armature circuit equation
 
Hostel management system project report..pdf
Hostel management system project report..pdfHostel management system project report..pdf
Hostel management system project report..pdf
 
Jaipur ❤CALL GIRL 0000000000❤CALL GIRLS IN Jaipur ESCORT SERVICE❤CALL GIRL IN...
Jaipur ❤CALL GIRL 0000000000❤CALL GIRLS IN Jaipur ESCORT SERVICE❤CALL GIRL IN...Jaipur ❤CALL GIRL 0000000000❤CALL GIRLS IN Jaipur ESCORT SERVICE❤CALL GIRL IN...
Jaipur ❤CALL GIRL 0000000000❤CALL GIRLS IN Jaipur ESCORT SERVICE❤CALL GIRL IN...
 
A Study of Urban Area Plan for Pabna Municipality
A Study of Urban Area Plan for Pabna MunicipalityA Study of Urban Area Plan for Pabna Municipality
A Study of Urban Area Plan for Pabna Municipality
 
Computer Networks Basics of Network Devices
Computer Networks  Basics of Network DevicesComputer Networks  Basics of Network Devices
Computer Networks Basics of Network Devices
 
AIRCANVAS[1].pdf mini project for btech students
AIRCANVAS[1].pdf mini project for btech studentsAIRCANVAS[1].pdf mini project for btech students
AIRCANVAS[1].pdf mini project for btech students
 
NO1 Top No1 Amil Baba In Azad Kashmir, Kashmir Black Magic Specialist Expert ...
NO1 Top No1 Amil Baba In Azad Kashmir, Kashmir Black Magic Specialist Expert ...NO1 Top No1 Amil Baba In Azad Kashmir, Kashmir Black Magic Specialist Expert ...
NO1 Top No1 Amil Baba In Azad Kashmir, Kashmir Black Magic Specialist Expert ...
 
Standard vs Custom Battery Packs - Decoding the Power Play
Standard vs Custom Battery Packs - Decoding the Power PlayStandard vs Custom Battery Packs - Decoding the Power Play
Standard vs Custom Battery Packs - Decoding the Power Play
 
💚Trustworthy Call Girls Pune Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top...
💚Trustworthy Call Girls Pune Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top...💚Trustworthy Call Girls Pune Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top...
💚Trustworthy Call Girls Pune Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top...
 
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptxS1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
 
Integrated Test Rig For HTFE-25 - Neometrix
Integrated Test Rig For HTFE-25 - NeometrixIntegrated Test Rig For HTFE-25 - Neometrix
Integrated Test Rig For HTFE-25 - Neometrix
 
Hospital management system project report.pdf
Hospital management system project report.pdfHospital management system project report.pdf
Hospital management system project report.pdf
 
Tamil Call Girls Bhayandar WhatsApp +91-9930687706, Best Service
Tamil Call Girls Bhayandar WhatsApp +91-9930687706, Best ServiceTamil Call Girls Bhayandar WhatsApp +91-9930687706, Best Service
Tamil Call Girls Bhayandar WhatsApp +91-9930687706, Best Service
 
Electromagnetic relays used for power system .pptx
Electromagnetic relays used for power system .pptxElectromagnetic relays used for power system .pptx
Electromagnetic relays used for power system .pptx
 

internship final web development ppt[1].pptx

  • 1. RV College of Engineering Go, change the world Web Page development for listing properties Department of Electronics & Telecommunication Engineering, RVCE Student Name - Rishabh Jain USN – 1RV21ET044 Internal Guide Name - Prof.Shambulinga M. Designation – Assistant Professor Dept. of ETE RVCE Company Name - Internshala Summer Internship-1 -21ETI310
  • 2. Go, change the world CONTENT Thursday,30 March 2023 Dept of EtE, RV COLLEGE OF ENGINEERING 2 S.NO CONTENT 1. Summary 2. About the company 3. About the department 4. List of the task performed 5. Client server network 6. HTML, CSS and its properties 7. Database Management System 8. Web page Development for listing properties 8.1 Index page 8.2 Property list 8.3 Property detail 9 Reflection-Learning outcomes 10 Certificate
  • 3. Go, change the world SUMMARY S.N o Company Internal Guide Duration in Weeks External Guide 1 Internshala Prof.Shambulinga M. (Assistant Professor) 8 weeks Anuj Kalbalia (Founder,Ungineering) SUMMARY OF INTERNSHIP
  • 4. Go, change the world SUMMARY OF INTERNSHIP Internshala is a popular online platform that connects students and young professionals with employers offering internships in various fields. One of the popular categories on Internshala is web development, which is a field of software engineering focused on building web applications and websites using technologies such as HTML, CSS, JavaScript, and various web frameworks. Overall, an internship in web development through Internshala can provide valuable hands-on experience, networking opportunities, and a chance to explore a career in web development. It can also be a stepping stone to a full-time job or further education Thursday,30 March 2023 Dept of EtE, RV COLLEGE OF ENGINEERING 4
  • 5. Go, change the world ABOUT THE COMPANY Internshala is an Indian company that provides an online internship platform for students and recent graduates. It was founded in 2010 by Sarvesh Agrawal and is headquartered in Gurgaon, India. Internshala provides internship opportunities across various industries such as engineering, management, media, law, design, and more. Internshala has partnered with over 100,000 companies and has helped more than 5 million students find internships and training opportunities. The company has received several awards, including the Best Educational Website award at the Indian Education Awards in 2017 and 2018. Thursday,30 March 2023 Dept of EtE, RV COLLEGE OF ENGINEERING 5
  • 6. Go, change the world ABOUT THE DEPARTMENT Web development refers to the process of creating and maintaining websites or web applications. It involves designing, coding, testing, and publishing web pages Web development can be broadly classified into two categories: Front-end development and Back-end development. • Front-end development involves designing and developing the user interface of the website or web application using HTML, CSS, and JavaScript.. • Back-end development involves creating and maintaining the server-side of the website or web application. • Full-stack development is a combination of front-end and back-end development and involves creating and maintaining both the client-side and server-side of the website or web application. Thursday,30 March 2023 Dept of EtE, RV COLLEGE OF ENGINEERING 6
  • 7. Go, change the world LIST OF TASK PERFORMED • Study how the client server network work Learns about the http request and how the web browser and web server works with each other and learn how the ip address is used for communication between systems • Learn about Html and basic CSS properties box model, font family, inspect element, flex box and how the bootstrap can used to reduce the work and make the project more easy to understand. • Learn about the Data Base Management System (DBMS) and also learn how the user data is stored • In the end of the project create the web page to display the listing of pg in different city. Thursday,30 March 2023 Dept of EtE, RV COLLEGE OF ENGINEERING 7 Fig 1.1 Client server network Fig 1.2 Web page for listing properties
  • 8. Go, change the world CLIENT SERVER NETWORK Thursday,30 March 2023 RV COLLEGE OF ENGINEERING 8 In web development, a client-server network architecture is a common model used to facilitate communication between the user's web browser (the client) and the web server that hosts the website. In the project Xamp is used to create the web server in the system itself .The client-server model works as follows: • The user opens their web browser and enters a URL (Uniform Resource Locator) to access a website. • The browser sends a request to the web server for the page or resource associated with the URL. • The web server receives the request and processes it, generating a response that contains the requested data. • The server sends the response back to the client's browser, which displays the data on the user's screen. Fig 2.1 Process of http request and response
  • 9. Go, change the world HTML AND CSS Thursday,30 March 2023 RV COLLEGE OF ENGINEERING 9 1. HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It defines the structure of a web page and its content using various elements such as headings, paragraphs, links, images, tables, and forms. 2. CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of HTML documents. It allows web designers to control the layout, typography, and color of a web page. Some common properties in CSS include: • Font properties: used to specify the font family, size, style, weight, and color of text. • Box model properties: used to control the size, padding, border, and margin of elements. Positioning properties: used to position elements on the page, including relative, absolute, fixed, and sticky positioning. • Display properties: used to control how elements are displayed, including block, inline, and flex display. Fig 2.2 HTML Fig 2.1 CSS Fig 2.3 CSS properties
  • 10. Go, change the world Date Base Management System(DBMS) Thursday,30 March 2023 Dept of EtE, RV COLLEGE OF ENGINEERING 10 Fig 3.2 PhpMyAdmin server used for forming database A Database Management System (DBMS) is a software system that allows users to manage databases. It enables users to store, organize, retrieve and manipulate data in a structured way. DBMS provides data security, consistency, integrity, backup and recovery. It is used in various industries such as finance, healthcare, education, and government. There are different types of DBMS including relational, NoSQL and object-oriented. Relational DBMS is the most common type and it organizes data into tables that can be linked together through relationships. Overall, DBMS is an essential tool for managing large amounts of data efficiently and securely.
  • 11. Go, change the world Web Page for Listing Properties Thursday,30 March 2023 Dept of EtE, RV COLLEGE OF ENGINEERING 11 The web page for listing properties (project) consist of 3 web page which are connect through anchor tag the different element use in creating the web page is HTML, CSS, bootstrap The code is written in the vs code editor the different tools of bootstrap used in the project such as carosel, modal, sticky image, bread crumb etc. the different part of the page are divided into class and each class is edited with different properties using class and selectors The file from the bootstrap it taken from the internshala which helps in designing and adding properties to the different element just by using the class name of it apart from this the image folder used in the project is also given during the internship itself The three page are- • Index page • Property list • Property detail Fig 4.1 Index page of project
  • 12. Go, change the world Thursday,30 March 2023 RV COLLEGE OF ENGINEERING 12 INDEX PAGE START BANGALORE MUMBAI HOME PROPERTY LIST PAGE PG LIFE SIGNUP LOGIN MAJOR CITIES ENTER DETAIL CREATE ACCOUNT ENTER DETAIL DELHI
  • 13. Go, change the world Thursday,30 March 2023 RV COLLEGE OF ENGINEERING 13 INDEX PAGE The index page consist of following things- • The PG life button which take the page to home page • Login page which has option for entering detail of the user and on clicking on the login button user redirect to the home page • Create account option is also their which has option to already account which go the login page • There is search option also but is does not connect to any another page • There are option of major cities which transfer page to property details Fig 5.1 Top of the index page Fig 5.2 Bottom of the index page
  • 14. Go, change the world Thursday,30 March 2023 RV COLLEGE OF ENGINEERING 14 PROPERTY LIST PAGE START Property detail page PROPERTY 1 PROPERTY 2 PROPERTY 3 View DETAIL View DETAIL View DETAIL FILTERS OKAY
  • 15. Go, change the world Thursday,30 March 2023 RV COLLEGE OF ENGINEERING 15 PROPERTY LISTING PAGE Page 2 to the project contains the listing properties in the web site it contain the option for the filter and sorting apart for this now breadcrumb can be visible in the navigation bar which led the user to the home page apart from this the signup and login option are present in the sticky top of the web page the lising property is divided in to the different div and it show the rating price and view option clicking on the view option led to the final page to the project property details Fig 6.1 Top of the listing page Fig 6.2 Bottom of the Listing page
  • 16. Go, change the world Thursday,30 March 2023 RV COLLEGE OF ENGINEERING 16 PROPERTY DETAIL PAGE START RENT NOW SIGNUP LOGIN ENTER DETAIL CREATE ACCOUNT ENTER DETAIL
  • 17. Go, change the world PROPERTY DETAIL PAGE The property detail page is the last page of the project it contain the detail of the specific property which include the amenities such Wi-Fi, ac, food etc. apart from this the rent option is also available in the page. The property page also contain the testimonials of the people apart from this the property detail page has carousel which is moving image which we use by taking files from bootstrap apart from this the property detail page it also contain the rating by the user Thursday,30 March 2023 Dept of EtE, RV COLLEGE OF ENGINEERING 17 Fig 7.1 Top of the property detail page Fig 7.2 Bottom of the Listing page
  • 18. Go, change the world LEARNING OUTCOMES Thursday,30 March 2023 Dept of EtE, RV COLLEGE OF ENGINEERING 18 Learning outcomes for a web development internship include: • Understanding the basics of web development: HTML, CSS, and JavaScript • Learning how to build websites using popular front-end frameworks like Bootstrap, React • Gaining hands-on experience with server-side programming languages such as PHP • Understanding how to create and manage databases using MySQL or MongoDB Learning about web application security • Understanding how to deploy websites and applications to a server or cloud-based platform • Learning how to collaborate with a team and communicate effectively. Fig 8.1 Learning Outcomes
  • 19. Go, change the world Thursday,30 March 2023 RV COLLEGE OF ENGINEERING 19 REFERENCES Here are some of the reference used for making project – [1] J. Smith, "A Comparison of Front-End Frameworks for Web Development," IEEE International Conference on Web Services, 2018, pp. 78-85 [2] S. Kumar and R. Sharma, "Responsive Web Design: A Comprehensive Study," IEEE International Conference on Computing, Communication and Automation, 2017, pp. 68-74 [3] J. Doe and M. Singh, "Web Security: Threats and Countermeasures," IEEE International Conference on Computer and Communications Security, 2019, pp. 215- 222. [4] R. Gupta and A. Singh, "Web Accessibility: A Review of Guidelines and Techniques," IEEE International Conference on Advances in Computing, Communication and Information Science, 2020, pp. 124-131. [5] N. Patel and V. Shah, "Performance Analysis of Web Applications Using Different Metrics," IEEE International Conference on Emerging Trends in Technology and Applied Sciences, 2018, pp. 89-96.A Complete Overview On: Web- development Ayush Mauryavans
  • 20. Go, change the world CERTIFICATE Thursday,30 March 2023 Dept of EtE, RV COLLEGE OF ENGINEERING 20 .
  • 21. Go, change the world Thursday,30 March 2023 RV COLLEGE OF ENGINEERING 21 THANK YOU