1️⃣ CS Sem 1 2️⃣ CS Sem 2 3️⃣ CS Sem 3 4️⃣ CS Sem 4 5️⃣ CS Sem 5 6️⃣ CS Sem 6 💡 IT Branch 📡 ECE Branch 🏫 Class 9 🎒 Class 10 🔬 Class 11 🧪 Class 12 🎓 MCA / PG 📜 PhD / Research

BCASEM-5Web Development

Web Development Notes — BCA Sem 5

✍️ WohoTech Team📅 Last Updated: 2026-03-11📄 44 pages · 2.2 MB

Web Development — Introduction

How web works:

Browser → DNS (domain→IP) → HTTP Request → Web Server
Server → Database query → HTML/JSON response → Browser renders

Tech Stack:

Frontend:  HTML + CSS + JavaScript (React/Vue/Angular)
Backend:   Node.js / PHP / Python (Flask/Django)
Database:  MySQL / PostgreSQL / MongoDB
Hosting:   Vercel / Netlify (frontend), Railway / AWS (backend)

1. HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="BCA Web Dev Notes — WohoTech">
    <title>BCA Notes Portal</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Semantic HTML5 elements -->
    <header>
        <nav>
            <a href="/">Home</a>
            <a href="/notes">Notes</a>
            <a href="/about">About</a>
        </nav>
    </header>

    <main>
        <article>
            <h1>Data Structures Notes</h1>
            <section>
                <h2>Chapter 1: Arrays</h2>
                <p>Array is a <strong>contiguous memory</strong> block...</p>
                <ul>
                    <li>Random access O(1)</li>
                    <li>Insert/delete O(n)</li>
                </ul>
            </section>
        </article>

        <aside>
            <h3>Related Topics</h3>
            <ul><li><a href="/linked-list">Linked List</a></li></ul>
        </aside>
    </main>

    <footer>
        <p>&copy; 2026 WohoTech. All rights reserved.</p>
    </footer>

    <!-- Forms -->
    <form action="/api/login" method="POST">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required placeholder="you@example.com">

        <label for="password">Password:</label>
        <input type="password" id="password" name="password" minlength="8" required>

        <button type="submit">Login</button>
    </form>

    <!-- Media -->
    <img src="diagram.png" alt="Array diagram" loading="lazy">
    <video src="lecture.mp4" controls width="640"></video>

    <script src="app.js"></script>
</body>
</html>

2. CSS3

/* Variables & Custom Properties */
:root {
    --primary: #3b82f6;
    --bg: #f8fafc;
    --text: #1e293b;
    --radius: 8px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); }

/* Flexbox Navigation */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* CSS Grid Layout */
.notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
}

/* Card Component */
.card {
    background: white;
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Button */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: var(--primary);
    color: white;
}
.btn:hover { background: #2563eb; }

/* Responsive Design */
@media (max-width: 768px) {
    .notes-grid { grid-template-columns: 1fr; padding: 1rem; }
    nav { flex-direction: column; gap: 1rem; }
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.card { animation: fadeIn 0.3s ease; }

3. JavaScript

// Modern JavaScript (ES6+)

// Variables
const name = "Alice";        // constant (preferred)
let score = 0;               // mutable
// var — avoid (function-scoped, hoisted)

// Arrow functions
const add = (a, b) => a + b;
const greet = name => `Hello, ${name}!`;  // template literal

// Destructuring
const student = { name: "Bob", gpa: 8.5, dept: "BCA" };
const { name: studentName, gpa } = student;

const [first, second, ...rest] = [1, 2, 3, 4, 5];
// first=1, second=2, rest=[3,4,5]

// Spread operator
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];           // [1,2,3,4,5]
const merged = { ...student, year: 3 }; // add fields

// Array methods
const marks = [85, 92, 78, 95, 88];
const avg = marks.reduce((sum, m) => sum + m, 0) / marks.length;
const passed = marks.filter(m => m >= 80);  // [85,92,95,88]
const grades = marks.map(m => m >= 90 ? 'A' : 'B');  // ['B','A','B','A','B']
const highest = Math.max(...marks);  // 95

// Async/Await (fetch API)
async function fetchNotes(subject) {
    try {
        const response = await fetch(`/api/notes?subject=${subject}`);
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        const data = await response.json();
        return data.notes;
    } catch (error) {
        console.error("Failed to fetch:", error);
        return [];
    }
}

// Promises chain
fetch('/api/user')
    .then(res => res.json())
    .then(user => console.log(user.name))
    .catch(err => console.error(err));

// Classes
class NotesManager {
    #notes = [];  // private field

    constructor(subject) { this.subject = subject; }

    addNote(title, content) {
        this.#notes.push({ id: Date.now(), title, content, createdAt: new Date() });
        return this;  // method chaining
    }

    getNotes() { return [...this.#notes]; }  // return copy

    searchNotes(query) {
        return this.#notes.filter(n =>
            n.title.toLowerCase().includes(query.toLowerCase()) ||
            n.content.toLowerCase().includes(query.toLowerCase())
        );
    }
}

4. DOM Manipulation

// Select elements
const header = document.getElementById('header');
const cards = document.querySelectorAll('.card');  // NodeList
const firstBtn = document.querySelector('.btn');

// Modify content and style
header.textContent = 'Updated Title';
header.style.color = '#3b82f6';
header.classList.add('highlighted');
header.classList.toggle('dark-mode');

// Create and insert elements
function createNoteCard(note) {
    const card = document.createElement('div');
    card.className = 'card';
    card.innerHTML = `
        <h3>${note.title}</h3>
        <p>${note.content}</p>
        <button class="btn delete-btn" data-id="${note.id}">Delete</button>
    `;
    return card;
}

const grid = document.getElementById('notes-grid');
notes.forEach(note => grid.appendChild(createNoteCard(note)));

// Event Delegation (efficient — one listener for many elements)
grid.addEventListener('click', (event) => {
    const deleteBtn = event.target.closest('.delete-btn');
    if (deleteBtn) {
        const noteId = deleteBtn.dataset.id;
        deleteNoteById(noteId);
        deleteBtn.closest('.card').remove();
    }
});

// Form handling
document.getElementById('note-form').addEventListener('submit', async (e) => {
    e.preventDefault();  // prevent page reload

    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);

    const res = await fetch('/api/notes', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    });

    if (res.ok) {
        const newNote = await res.json();
        grid.appendChild(createNoteCard(newNote));
        e.target.reset();
    }
});

5. Node.js + Express REST API

// server.js
const express = require('express');
const mysql = require('mysql2/promise');
const bcrypt = require('bcrypt');
const jwt = require('jsonwebtoken');
const app = express();

app.use(express.json());
app.use(require('cors')());

// Database pool
const pool = mysql.createPool({
    host: 'localhost', database: 'bca_notes',
    user: 'root', password: 'password',
    waitForConnections: true, connectionLimit: 10
});

// Middleware: JWT auth
function authenticate(req, res, next) {
    const token = req.headers.authorization?.split(' ')[1];
    if (!token) return res.status(401).json({ error: 'No token' });
    try {
        req.user = jwt.verify(token, process.env.JWT_SECRET);
        next();
    } catch { res.status(401).json({ error: 'Invalid token' }); }
}

// Routes
app.post('/api/register', async (req, res) => {
    const { name, email, password } = req.body;
    const hashed = await bcrypt.hash(password, 12);
    const [result] = await pool.execute(
        'INSERT INTO users (name, email, password) VALUES (?, ?, ?)',
        [name, email, hashed]
    );
    res.status(201).json({ id: result.insertId, name, email });
});

app.post('/api/login', async (req, res) => {
    const { email, password } = req.body;
    const [[user]] = await pool.execute('SELECT * FROM users WHERE email = ?', [email]);
    if (!user || !(await bcrypt.compare(password, user.password)))
        return res.status(401).json({ error: 'Invalid credentials' });
    const token = jwt.sign({ id: user.id, email }, process.env.JWT_SECRET, { expiresIn: '24h' });
    res.json({ token, user: { id: user.id, name: user.name } });
});

app.get('/api/notes', authenticate, async (req, res) => {
    const { subject, search } = req.query;
    let sql = 'SELECT * FROM notes WHERE user_id = ?';
    const params = [req.user.id];
    if (subject) { sql += ' AND subject = ?'; params.push(subject); }
    if (search) { sql += ' AND (title LIKE ? OR content LIKE ?)'; params.push(`%${search}%`, `%${search}%`); }
    const [notes] = await pool.execute(sql, params);
    res.json(notes);
});

app.listen(3000, () => console.log('Server running on port 3000'));

Exam Important Questions

Semantic HTML tags kya hain? Header, footer, main, article ka use
CSS Flexbox aur Grid mein kya difference hai?
JavaScript mein var, let, const mein kya fark hai?
Synchronous aur Asynchronous JavaScript explain karo
REST API kya hai? HTTP methods explain karo
DOM manipulation — element create, modify, delete
Session aur Cookie mein kya difference hai?
Responsive design kaise banate hain? Media queries explain

Viva Questions

Q: CORS kya hota hai? A: Cross-Origin Resource Sharing — browser security policy jo different origin (domain/port/protocol) ke requests restrict karta hai. Backend pe Access-Control-Allow-Origin header set karo. Express mein cors middleware use karo.

Q: localStorage aur sessionStorage mein kya fark hai? A: localStorage: browser band hone ke baad bhi data rehta hai (persistent). sessionStorage: tab close hone pe data chala jaata hai. Both key-value stores, ~5MB limit, strings only. Sensitive data kabhi client storage mein mat rakho.

Q: REST aur GraphQL mein kya difference hai? A: REST: fixed endpoints, multiple requests needed for related data, over/under-fetching. GraphQL: single endpoint, client specify karta hai exactly kya chahiye, no over-fetching. Facebook banaya. Complex apps ke liye better.

📄 Download Complete PDF Notes

Complete Web Development notes for BCA Sem 5 — HTML5, CSS3, JavaScript, DOM, React basics, Node.js, REST APIs, MySQL with PHP/Node, responsive design with practical examples.

44 pages · 2.2 MB · Updated 2026-03-11

Free Download ↓

❓ Frequently Asked Questions

Frontend aur Backend mein kya difference hai?▾

Frontend: browser mein run hota hai — HTML (structure), CSS (style), JavaScript (behavior). User dikhta hai. Backend: server pe run hota hai — database, business logic, APIs. User nahi dikhta. Node.js/PHP/Python backend hai.

REST API kya hoti hai?▾

Representational State Transfer — HTTP verbs se resources access karna. GET (read), POST (create), PUT (update), DELETE (remove). JSON data format. Stateless — har request independent. /api/users GET → user list.

Responsive design kaise banate hain?▾

CSS media queries (@media), flexible grids (%, fr), flexible images (max-width: 100%), viewport meta tag. Mobile-first approach: pehle mobile design, phir desktop. Bootstrap/Tailwind CSS frameworks help karte hain.

JavaScript synchronous hai ya asynchronous?▾

JavaScript single-threaded aur synchronous hai, lekin async operations (fetch, setTimeout, file I/O) non-blocking hain. Event loop queued callbacks handle karta hai. async/await Promise-based async code synchronous jaise likhne deta hai.

Session aur Cookie mein kya fark hai?▾

Cookie: client (browser) pe store, server bhejta hai, size limited (4KB). Session: server pe store hota hai, client ke paas sirf session ID (cookie mein). Sensitive data session mein rakho, cookie mein nahi.

📌 Related Notes

BCASEM-5

Operating Systems Notes — BCA Sem 5

Operating Systems

BCASEM-3

Database Management System Notes — BCA Sem 3

Database Management

BCASEM-1

C Programming Notes — BCA Sem 1

C Programming

BCASEM-4

Computer Networks Notes — BCA Sem 4

Computer Networks