NPTEL SOLUTIONS
Human Computer Interaction (In English) 12 Weeks Course
Week 3 : Assignment 3
Week 4 : Assignment 4
Blockchain and its Applications
Week 3 : Assignment 3
Week 4 : Assignment 4
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.
Exercise - 3: Express JS – Cookies, Sessions, Authentication
- 3a. Write a program for session management using cookies and sessions
- 3b. Write a program for user authentication.
Exercise-4: Express JS – Database, RESTful APIs
- 4a. Write a program to connect MongoDB database using Mangoose and perform CRUD operations.
- 4b.Write a program to develop a single page application using RESTful APIs.
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.
Exercise-8: React JS – React Router, Updating the Screen
- 8a.Write a program for routing to different pages using react router.
- 8a.Write a program for routing to different pages using react router.
Exercise-9: React JS – Hooks, Sharing data between Components
- 9a.Write a program to understand the importance of using hooks.
- 9b.Write a program for sharing data between components.
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');
});
// 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}`);
});
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');
});
Exercise-9: React JS – Hooks, Sharing data between Components
- 9a.Write a program to understand the importance of using hooks.
- 9b.Write a program for sharing data between components.