Web Development Mid Sem Report Mohit Saini Full
Uploaded by
mohitsainig436Web Development Mid Sem Report Mohit Saini Full
Uploaded by
mohitsainig436**Web Development Mid-Semester Viva Report**
**Name:** Mohit Saini
**Course:** Web Development (Internshala)
**Institution:** JECRC University
**Duration:** 6 Weeks
**Project:** pgLife - A PG Finder Web Application
---
**Table of Contents**
1. Introduction to Web Development
2. HTML: Structure of Web Pages
3. CSS: Styling the Web
4. XAMPP: Server Environment (Apache & PHP)
5. PHP: Server-Side Scripting
6. DBMS: Database Concepts with SQL
7. JavaScript: Client-Side Interactivity
8. AJAX: Asynchronous Web Interactions
9. React: Building Dynamic UIs
10. Project: pgLife
11. Challenges Faced and Solutions
12. Learnings and Takeaways
13. Conclusion
14. References
15. Appendix (Screenshots, Code Snippets)
---
[Full content inserted from document editor, already structured for each section. For PDF rendering, we'll
clean and flatten the markdown styling.]
1. Introduction to Web Development
Web development refers to the creation and maintenance of websites. It involves aspects such as web
design, web publishing, web programming, and database management. In this course, I explored both
front-end and back-end development, acquiring skills essential for building dynamic web applications.
There are two main categories in web development:
- Front-end Development (Client-side)
- Back-end Development (Server-side)
2. HTML: Structure of Web Pages
HTML (HyperText Markup Language) is used to structure a web page and its content. I learned about:
- Basic page structure using <html>, <head>, and <body>
- Text formatting with headings <h1> to <h6>, paragraphs <p>, and spans
- Forms and their input types
- Semantic tags like <article>, <section>, and <footer>
Sample Code:
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
3. CSS: Styling the Web
CSS (Cascading Style Sheets) enhances the visual presentation of web pages. Key concepts covered:
- Selectors and Properties
- Layout with Flexbox and Grid
- Media Queries for Responsive Design
- Transitions and Animations
Sample Code:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
h1 {
color: #333;
4. XAMPP: Server Environment (Apache & PHP)
XAMPP is a local server package that includes Apache and MySQL. It helps run PHP scripts and manage
databases offline. I used it to:
- Start and stop Apache and MySQL servers
- Access phpMyAdmin
- Test PHP code locally
5. PHP: Server-Side Scripting
PHP is a scripting language used for back-end development. I used it to:
- Handle form submissions
- Connect with MySQL databases
- Implement user authentication
- Perform CRUD operations
Sample Code:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
?>
6. DBMS: Database Concepts with SQL
I learned about:
- Database normalization
- Writing SQL queries for SELECT, INSERT, UPDATE, DELETE
- Joins and aggregate functions
Sample Code:
CREATE TABLE users (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100),
email VARCHAR(100)
);
7. JavaScript: Client-Side Interactivity
JavaScript enables interactivity on websites. I explored:
- Variables and Data Types
- Functions and Events
- DOM Manipulation
- ES6 Features (Arrow Functions, Let/Const)
Sample Code:
document.getElementById("btn").onclick = function() {
alert("Button clicked!");
};
8. AJAX: Asynchronous Web Interactions
AJAX allows web pages to communicate with the server without reloading. Key learning points:
- XMLHttpRequest and Fetch API
- Dynamic content updates
Sample Code:
fetch('data.json')
.then(response => response.json())
.then(data => console.log(data));
9. React: Building Dynamic UIs
React is a JavaScript library for building user interfaces. Concepts covered:
- Components and Props
- State Management
- JSX Syntax
- Lifecycle Methods
Sample Code:
function Greeting(props) {
return <h1>Hello, {props.name}</h1>;
}
10. Project: pgLife
pgLife is a PG listing platform where users can:
- Search PGs by city and amenities
- View details and reviews
- Create accounts and log in securely
Technologies Used:
- HTML/CSS/JS for front-end
- PHP & MySQL for backend
- React for enhanced UI
Features:
- User Authentication (Login/Signup)
- PG Listing with Filters
- Review System
- Admin Panel
11. Challenges Faced and Solutions
- Setting up XAMPP: Resolved port conflicts by changing Apache config.
- Database connection errors: Used error handling and proper credentials.
- AJAX calls not working: Ensured correct endpoint and CORS settings.
12. Learnings and Takeaways
- Full-stack development principles
- Real-world problem solving
- Project lifecycle from ideation to deployment
- Responsive and dynamic UI creation
13. Conclusion
The Web Development course offered by Internshala was a comprehensive learning journey. From building
basic web pages to deploying a complete PG listing application, each module reinforced my understanding
and practical abilities. The project helped in consolidating concepts across front-end and back-end
development.
14. References
- Internshala Web Development Course Material
- W3Schools
- MDN Web Docs
- Stack Overflow
15. Appendix
[Include screenshots of pgLife application interfaces, database structure, and key UI components.]
