Syllabus

Exercise - 1: Express JS – Routing, HTTP Methods
1a. Write a program to define a route, Handling Routes, Route Parameters, Query Parameters and URL building.

const express = require('express');
const app = express();

// Middleware to parse JSON request bodies
app.use(express.json());

//  user data stored in memory
const users = {
  1: { id: 1201, name: 'DIET', email: '1201@diet.ac.in' },
  2: { id: 1202, name: 'IT DEPT', email: '1202@diet.ac.in' }
};

// Home route
app.get('/', (req, res) => {
  res.send('Welcome to the User API!');
});

// Get all users or filter by name using query parameter
app.get('/users', (req, res) => {
  const name = req.query.name;
  let result = Object.values(users);  //to convert the object to an array
  if (name) {
    result = result.filter(user => user.name.toLowerCase() === name.toLowerCase());
  }
  res.json(result);
});

// Get a specific user by route parameter (user ID)
app.get('/users/:id', (req, res) => {
  const user = users[req.params.id];
  if (user) {
    res.json(user);
  } else {
    res.status(404).send('User not found');
  }
});

// Build a sample URL for a user
app.get('/build-url/:id', (req, res) => {
  const id = req.params.id;
  const fullUrl = `${req.protocol}://${req.get('host')}/users/${id}`;
  res.send(`User URL: ${fullUrl}`);
});

// Start the server
app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

1b. Write a program to accept data, retrieve data and delete a specified resource using http methods.

 // app.js
const express = require('express');
const app = express();
const port = 3000;

// Middleware to parse JSON from request bodies
app.use(express.json());

// database to store users
let users = {
  1: { id: 1201, name: 'DIET', email: '1201@diet.ac.in' },
  2: { id: 1202, name: 'IT DEPT', email: '1202@diet.ac.in' }
};

//  Add a new user
app.post('/users', (req, res) => {
  const { id, name, email } = req.body;
  if (!id || !name || !email) {
    return res.status(400).send('Please provide id, name, and email');
  }
  if (users[id]) {
    return res.status(409).send('User already exists');
  }
  users[id] = { id, name, email };
  res.status(201).json(users[id]);
});

//  Get all users
app.get('/users', (req, res) => {
  res.json(Object.values(users));
});

//  Get user by ID
app.get('/users/:id', (req, res) => {
  const id = req.params.id;
  const user = users[id];
  if (!user) {
    return res.status(404).send('User not found');
  }
  res.json(user);
});

//  Delete user by ID
app.delete('/users/:id', (req, res) => {
  const id = req.params.id;
  if (!users[id]) {
    return res.status(404).send('User not found');
  }
  delete users[id];
  res.send(`User with ID ${id} deleted`);
});

//  Update Resource - update user by ID
app.put('/users/:id', (req, res) => {
  const id = req.params.id;
  const { name, email } = req.body;

  // Check if user exists
  if (!users[id]) {
    return res.status(404).send('User not found');
  }

  // Validate input
  if (!name || !email) {
    return res.status(400).send('Please provide both name and email');
  }

  // Update user details
  users[id].name = name;
  users[id].email = email;

  res.send(` User with ID ${id} updated successfully`);
});
  
// Start the server
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

Exercise - 2: Express JS – Templating, Form Data
2a.Write a program using templating engine.

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();

// Set up EJS as the templating engine
app.set('view engine', 'ejs');

// Use body-parser to parse incoming form data
app.use(bodyParser.urlencoded({ extended: true }));

// Serve static files (like CSS) from the "public" directory
app.use(express.static(path.join(__dirname, 'views')));

// Route to display the form
app.get('/', (req, res) => {
  res.render('index');  // Render the "index.ejs" template
});

// Route to handle form submission
app.post('/submit', (req, res) => {
  const { name, email } = req.body;
  // Render the result page and pass the submitted data
  res.render('result', { name, email });
});

// Start the server
app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

2b.Write a program to work with form data.

Exercise - 3: Express JS – Cookies, Sessions, Authentication

3a. Write a program for session management using cookies and sessions

//npm install express express-session cookie-parser
const express = require('express');
const session = require('express-session');
const cookieParser = require('cookie-parser');

const app = express();
const PORT = 3000;

app.use(cookieParser());
app.use(express.urlencoded({ extended: true }));

// Configure session middleware
app.use(session({
  secret: 'mySecretKey',
  resave: false,
  saveUninitialized: true,
  cookie: { maxAge: 60000 } // 1 minute
}));

// Home route
app.get('/', (req, res) => {
  if (req.session.username) {
    res.send(`Welcome back, ${req.session.username}! <a href="/logout">Logout</a>`);
  } else {
    res.send(`<form method="POST" action="/login">
                <input name="username" placeholder="Enter your name" required />
                <button type="submit">Login</button>
              </form>`);
  }
});

// Login route
app.post('/login', (req, res) => {
  const { username } = req.body;
  req.session.username = username;
  res.redirect('/');
});

// Logout route
app.get('/logout', (req, res) => {
  req.session.destroy();
  res.clearCookie('connect.sid');
  res.send('Logged out successfully. <a href="/">Login again</a>');
});

// Start server
app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

3b. Write a program for user authentication.

//npm install express express-session body-parser
const express = require('express');
const session = require('express-session');
const bodyParser = require('body-parser');

const app = express();
const PORT = 3000;

// Dummy user data
const USERS = {
  admin: { password: 'admin' },
  user: { password: 'user@123' }
};

app.use(bodyParser.urlencoded({ extended: true }));

app.use(session({
  secret: 'authSecret',
  resave: false,
  saveUninitialized: true
}));

// Login form
app.get('/', (req, res) => {
  if (req.session.username) {
    res.send(`Welcome, ${req.session.username}! <a href="/logout">Logout</a>`);
  } else {
    res.send(`<form method="POST" action="/login">
                <input name="username" placeholder="Username" required />
                <input type="password" name="password" placeholder="Password" required />
                <button type="submit">Login</button>
              </form>`);
  }
});

// Login handler
app.post('/login', (req, res) => {
  const { username, password } = req.body;
  const user = USERS[username];

if (user && user.password === password) {
    req.session.username = username;
    res.redirect('/');
  } else {
    res.status(401).send('Invalid credentials. <a href="/">Try again</a>');
  }
});

// Logout handler
app.get('/logout', (req, res) => {
  req.session.destroy();
  res.send('Logged out. <a href="/">Login</a>');
});

// Protected route
app.get('/dashboard', (req, res) => {
  if (req.session.username) {
    res.send(`Hello ${req.session.username}, welcome to your dashboard.`);
  } else {
    res.status(401).send('Unauthorized. <a href="/">Login</a>');
  }
});

app.listen(PORT, () => {
  console.log(`Auth server running on http://localhost:${PORT}`);
});

Exercise-4: Express JS – Database, RESTful APIs

4a. Write a program to connect MongoDB database using Mangoose and perform CRUD operations.

//npm install express mongoose body-parser
//https://www.mongodb.com/try/download/community
//https://www.mongodb.com/try/download/shell
//net start MongoDB
//mongosh
//net stop MongoDB

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json()); // Parse JSON requests

// 1. Connect to MongoDB
mongoose.connect('mongodb://127.0.0.1:27017/userdb', {
  useNewUrlParser: true,
  useUnifiedTopology: true
})
.then(() => console.log('Connected to MongoDB'))
.catch(err => console.error('MongoDB connection error:', err));

// 2. Define Schema
const userSchema = new mongoose.Schema({
  name: String,
  email: String
});

// 3. Create Model
const User = mongoose.model('User', userSchema);

// --- CRUD Routes ---

// CREATE - POST /users
app.post('/users', async (req, res) => {
  const { name, email } = req.body;
  const newUser = new User({ name, email });
  await newUser.save();
  res.status(201).json(newUser);
});

// READ - GET /users
app.get('/users', async (req, res) => {
  const users = await User.find();
  res.json(users);
});

// UPDATE - PUT /users/:id
app.put('/users/:id', async (req, res) => {
  const updatedUser = await User.findByIdAndUpdate(req.params.id, req.body, { new: true });
  res.json(updatedUser);
});

// DELETE - DELETE /users/:id
app.delete('/users/:id', async (req, res) => {
  await User.findByIdAndDelete(req.params.id);
  res.json({ message: 'User deleted' });
});

// Start server
app.listen(3000, () => console.log('Server running on http://localhost:3000'));

4b.Write a program to develop a single page application using RESTful APIs.

// server.js
const express = require('express');
const mongoose = require('mongoose');
const path = require('path');

const app = express();
const PORT = 3000;

// ----- Replace with your MongoDB connection string if needed -----
const MONGO = 'mongodb://localhost:27017/mydb';
// ---------------------------------------------------------------

app.use(express.json());
app.use(express.static(path.join(__dirname, 'public')));

// Connect to MongoDB
mongoose.connect(MONGO, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log(' MongoDB connected'))
  .catch(err => console.error(' MongoDB connect error:', err));

// Schema and Model
const userSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true }
});
const User = mongoose.model('User', userSchema);

// RESTful API

// Get all users
app.get('/api/users', async (req, res) => {
  const users = await User.find().sort({ _id: -1 });
  res.json(users);
});

// Create user
app.post('/api/users', async (req, res) => {
  try {
    const user = new User(req.body);
    await user.save();
    res.status(201).json(user); // 201 Created
  } catch (err) {
    res.status(400).json({ error: err.message });
  }
});

// Update user
app.put('/api/users/:id', async (req, res) => {
  try {
    const u = await User.findByIdAndUpdate(req.params.id, req.body, { new: true, runValidators: true });
    if (!u) return res.status(404).json({ error: 'Not found' });
    res.json(u);
  } catch (err) {
    res.status(400).json({ error: err.message });
  }
});

// Delete user
app.delete('/api/users/:id', async (req, res) => {
  try {
    const u = await User.findByIdAndDelete(req.params.id);
    if (!u) return res.status(404).json({ error: 'Not found' });
    res.json({ message: 'Deleted' });
  } catch (err) {
    res.status(400).json({ error: err.message });
  }
});

// Serve SPA (index.html is in public/)
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(PORT, () => {
  console.log(` Server running at http://localhost:${PORT}`);
});

// public/app.js
const api = '/api/users';
const usersBody = document.getElementById('usersBody');
const form = document.getElementById('userForm');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const msg = document.getElementById('msg');
const cancelEdit = document.getElementById('cancelEdit');

let editId = null;

async function fetchUsers() {
  const res = await fetch(api);
  const data = await res.json();
  renderUsers(data);
}

function renderUsers(users) {
  usersBody.innerHTML = users.map(u => `
    <tr data-id="${u._id}">
      <td>${escapeHtml(u.name)}</td>
      <td>${escapeHtml(u.email)}</td>
      <td>
        <button onclick="onEdit('${u._id}', '${escapeJs(u.name)}', '${escapeJs(u.email)}')">Edit</button>
        <button onclick="onDelete('${u._id}')">Delete</button>
      </td>
    </tr>
  `).join('');
}

function escapeHtml(str){ return String(str).replace(/[&<>"'`]/g, s=>'&#'+s.charCodeAt(0)+';'); }
function escapeJs(str){ return encodeURIComponent(str); }

// Form submit -> create or update
form.addEventListener('submit', async e => {
  e.preventDefault();
  const name = nameInput.value.trim();
  const email = emailInput.value.trim();
  if (!name || !email) return showMsg('Please fill name and email');

try {
    if (editId) {
      // update
      const res = await fetch(`${api}/${editId}`, {
        method: 'PUT', headers: {'Content-Type':'application/json'},
        body: JSON.stringify({ name, email })
      });
      if (!res.ok) throw await res.json();
      showMsg('Updated successfully');
      editId = null;
      cancelEdit.style.display = 'none';
    } else {
      // create
      const res = await fetch(api, {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({ name, email })
      });
      if (res.status !== 201) throw await res.json();
      showMsg('Added successfully');
    }
    form.reset();
    fetchUsers();
  } catch (err) {
    showMsg(err.error || err.message || 'Error', true);
  }
});

window.onEdit = (id, nameEnc, emailEnc) => {
  const name = decodeURIComponent(nameEnc);
  const email = decodeURIComponent(emailEnc);
  nameInput.value = name;
  emailInput.value = email;
  editId = id;
  cancelEdit.style.display = '';
  showMsg('Editing mode - submit to save');
};

cancelEdit.addEventListener('click', () => {
  editId = null;
  form.reset();
  cancelEdit.style.display = 'none';
  showMsg('');
});

function showMsg(text, isError=false){
  msg.textContent = text;
  msg.style.color = isError ? 'red' : 'green';
  if (!text) msg.style.display = 'none'; else msg.style.display = '';
  setTimeout(()=>{ if (!isError) msg.textContent = ''; }, 2500);
}

// initial load
fetchUsers();

Exercise-5: React JS – Render HTML, JSX, Components – function and Class

5a.Write a program to render HTML to a web page

5 b.Write a program for writing markup with JSX.

5 c.Write a program for creating and nesting components (function and class).

Exercise-6: React JS – Props and States, Styles, Respond to Events

6a.Write a program to work with props and states.

6b.Write a program to add styles (CSS & Sass Styling) and display data.

6c.Write a program for responding to events.

Exercise-7: React JS – Conditional Rendering, Rendering Lists, React Forms

7a.Write a program for conditional rendering.

7b.Write a program for rendering lists.

7c.Write a program for working with different form fields using react forms.

import React, { useState } from "react";
import ReactDOM from "react-dom/client";

function App() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    gender: "",
    agree: false
  });

function handleChange(e) {
    const { name, value, type, checked } = e.target;
    setFormData({
      ...formData,
      [name]: type === "checkbox" ? checked : value
    });
  }

function handleSubmit(e) {
    e.preventDefault();
    alert(`Form Submitted!\n${JSON.stringify(formData, null, 2)}`);
  }

return (
    <div>
      <h1>React Forms Example</h1>
      <form onSubmit={handleSubmit}>
        <label>
          Name:{" "}
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
          />
        </label>
        <br /><br />
        <label>
          Email:{" "}
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
          />
        </label>
        <br /><br />
        <label>
          Gender:{" "}
          <select
            name="gender"
            value={formData.gender}
            onChange={handleChange}
          >
            <option value="">Select</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
          </select>
        </label>
        <br /><br />
        <label>
          <input
            type="checkbox"
            name="agree"
            checked={formData.agree}
            onChange={handleChange}
          />{" "}
          I agree to terms
        </label>
        <br /><br />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

Exercise-8: React JS – React Router, Updating the Screen

8a.Write a program for routing to different pages using react router.

//npm install react-router-dom

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

// Home Component
function Home() {
  return <h2>Welcome to Home Page</h2>;
}

// About Component
function About() {
  return <h2> This is the About Page</h2>;
}

// Contact Component
function Contact() {
  return <h2>Contact us at: contact@example.com</h2>;
}

// Parent App
function App() {
  return (
    <BrowserRouter>
      <div>
        <h1>React Router Example</h1>
        {/* Navigation Links */}
        <nav>
          <Link to="/">Home</Link> |{" "}
          <Link to="/about">About</Link> |{" "}
          <Link to="/contact">Contact</Link>|{" "}
		  <a href="https://kottesandeep.blogspot.com/" target="_blank">
            My Blog
          </a>
        </nav>

{/* Routes */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

//BrowserRouter → enables routing in React app.

//Link → works like <a> but without page reload.

//Routes + Route → decides which component to show based on URL.

8a.Write a program for routing to different pages using react router.

9a.Write a program to understand the importance of using hooks.

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

function App() {
  // useState Hook — to store and update counter value
  const [count, setCount] = useState(0);

// useEffect Hook — runs when component renders or updates
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // runs again only when 'count' changes

return (
    <div>
      <h1>Understanding Hooks Example</h1>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

//useState(0) → creates a state variable count with initial value 0.

//useEffect() → performs side effects (like updating document title).

//When setCount() is called, React re-renders the component → the UI updates //automatically.

//Without Hooks, you’d have to write a Class Component and use this.state and //componentDidMount(), which is longer and harder.

9b.Write a program for sharing data between components.

Dr. K. Sandeep

Express js, React js and Mongo DB

Syllabus