Express js, React js and Mongo DB

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.
//index.ejs in views folder <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Submit Your Information</title> </head> <body> <h1>Submit Your Information</h1> <form action="/submit" method="POST"> <label for="name">Name:</label> <input type="text" name="name" id="name" required> <br><br> <label for="email">Email:</label> <input type="email" name="email" id="email" required> <br><br> <button type="submit">Submit</button> </form> </body> </html> //result.ejs in views folder <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Form Result</title> </head> <body> <h1>Form Submitted Successfully!</h1> <p><b>Name: <%= name %></b> <p><b>Email: <%= email %></b> <br> <a href="/">Go Back</a> </body> </html>

---

---

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'); }; window.onDelete = async id => { if (!confirm('Delete this user?')) return; try { const res = await fetch(`${api}/${id}`, { method: 'DELETE' }); if (!res.ok) throw await res.json(); showMsg('Deleted'); fetchUsers(); } catch (err) { showMsg(err.error || 'Error deleting', true); } }; 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(); // public/index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Users SPA</title> <style> body{font-family: Arial; max-width:900px;margin:30px auto;padding:0 10px} input, button { padding:6px; margin:4px; } table { width:100%; border-collapse:collapse; margin-top:12px } th, td { border:1px solid #ddd; padding:8px; text-align:left } tr:nth-child(even){background:#f9f9f9} .small{font-size:0.9em;color:#666} </style> </head> <body> <h1>Users — Single Page App</h1> <form id="userForm"> <input id="name" placeholder="Name" required /> <input id="email" placeholder="Email" required /> <button type="submit">Add</button> <button type="button" id="cancelEdit" style="display:none">Cancel Edit</button> </form> <div id="msg" class="small"></div> <table> <thead><tr><th>Name</th><th>Email</th><th>Actions</th></tr></thead> <tbody id="usersBody"></tbody> </table> <script src="app.js"></script> </body> </html>