Practical 1
Using various HTML tags for creating different web pages.
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tags Example</title>
</head>
<body>
<h1>Welcome to Web Development II</h1>
<p>This is a sample page to demonstrate various HTML tags.</p>
<p><strong>Bold Text</strong></p>
<p><em>Italic Text</em></p>
<p><u>Underlined Text</u></p>
<p><mark>Highlighted Text</mark></p>
<h2>Types of Lists</h2>
<ul>
<li>Unordered List Item 1</li>
<li>Unordered List Item 2</li>
</ul>
<ol>
<li>Ordered List Item 1</li>
<li>Ordered List Item 2</li> </ol>
<h2>Student Information</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Course</th>
</tr>
<tr>
<td>John Doe</td>
<td>20</td>
<td>Web Development</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>22</td>
<td>Database Systems</td>
</tr>
</table>
<h2>Registration Form</h2>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br> <label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Register"> </form>
<h2>Links and Images</h2>
<p><a href="[Link] [Link]</a></p>
<img src="[Link] alt="Example Image" width="200">
<h2>Multimedia</h2>
<h3>Audio</h3>
<audio controls>
<source src="audio-file.mp3" type="audio/mpeg"> Your browser
does not support the audio element. </audio>
<h3>Video</h3>
<video width="320" height="240" controls> <source
src="video-file.mp4" type="video/mp4"> Your browser does
not support the video tag. </video>
<header>
<h1>Website Header</h1>
<p>This is the main header of the website.</p> </header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul> </nav>
<main>
<section>
<h2>Main Content Section</h2>
<p>This is the main content of the page.</p>
</section> </main>
<footer>
<p>© 2024 My Website</p> </footer>
</body>
</html>
Output :
Practical 2
Using various Form tags for interactivity, authentication, date validation etc.
Code : <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Tags Example</title>
</head>
<body>
<h1>Form Examples for Interactivity, Authentication, and Validation</h1>
<!-- Text Input for Name -->
<h2>Basic Information</h2>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<!-- Email Input for Authentication -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<!-- Password Input for Authentication -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<!-- Phone Number with Pattern Validation -->
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}"
placeholder="1234567890"><br><br>
<!-- Number Input with Range -->
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="99" required><br><br>
<!-- Date Input for Date of Birth Validation -->
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" max="2006-12-31" required><br><br>
<!-- Color Picker -->
<label for="color">Favorite Color:</label>
<input type="color" id="color" name="color"><br><br>
<!-- Radio Buttons for Gender Selection -->
<label>Gender:</label><br>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label><br><br>
<!-- Dropdown for Country Selection -->
<label for="country">Country:</label>
<select id="country" name="country">
<option value="India">India</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="Canada">Canada</option>
</select><br><br>
<!-- Checkbox for Terms and Conditions -->
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">I agree to the terms and conditions</label><br><br>
<!-- Range Slider for Satisfaction Rating -->
<label for="satisfaction">Satisfaction (1-10):</label>
<input type="range" id="satisfaction" name="satisfaction" min="1" max="10" value="5"><br><br>
<!-- File Upload for Profile Picture -->
<label for="profilePic">Upload Profile Picture:</label>
<input type="file" id="profilePic" name="profilePic" accept="image/*"><br><br>
<!-- Date and Time for Event Selection -->
<label for="event">Event Date and Time:</label>
<input type="datetime-local" id="event" name="event"><br><br>
<!-- Submit Button -->
<input type="submit" value="Submit">
</form>
</body> </html>
Output :
Practical 3
Using Semantic HTML tags /tags associated with interactivity.
Code : <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic HTML and Interactivity</title>
</head>
<body>
<!-- Header: Using semantic header tag for main navigation and logo -->
<header>
<h1>My Web Development Page</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- Main content with sections and interactivity elements -->
<main>
<!-- About Section -->
<section id="about">
<h2>About Us</h2>
<p>We specialize in creating interactive and responsive web applications using modern
technologies.</p> </section>
<!-- Services Section with Interactivity Elements -->
<section id="services">
<h2>Our Services</h2>
<!-- Article tag to represent individual service information -->
<article>
<h3>Web Development</h3>
<p>We offer full-stack web development services.</p>
<button onclick="alert('Learn more about Web Development')">Learn More</button>
</article>
<article>
<h3>SEO Optimization</h3>
<p>Improve your website's visibility in search engines with our SEO services.</p>
<button onclick="alert('Learn more about SEO Optimization')">Learn More</button>
</article>
</section>
<!-- Form Section for Contacting Us -->
<section id="contact">
<h2>Contact Us</h2>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea><br><br>
<input type="submit" value="Send Message">
</form>
</section>
</main>
<!-- Aside: Additional interactive content related to main content -->
<aside>
<h3>Upcoming Events</h3>
<p>Don't miss our upcoming webinar on web accessibility!</p>
<button onclick="alert('Sign up for the webinar')">Sign Up</button>
</aside>
<!-- Footer with social media links -->
<footer>
<p>© 2024 My Web Development Page</p>
<ul>
<li><a href="[Link]
<li><a href="[Link]
<li><a href="[Link]
</ul>
</footer>
</body> </html>
Output :
Practical 4 :
Using DHTML tags in concern to client server application
Code : <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DHTML Example - Client-Server Interaction</title>
<style> #response {
margin-top: 20px; padding:
10px; border: 1px solid #ccc;
background-color: #f9f9f9;
}
.loading { font-
weight: bold; color: blue;
}
</style>
</head>
<body>
<h1>Interactive Content with DHTML</h1>
<button onclick="fetchData()">Get Server Data</button>
<div id="response">Server response will appear here.</div>
<script>
function fetchData() {
const responseDiv = [Link]('response'); [Link] = '<p
class="loading">Loading data...</p>';
const xhr = new XMLHttpRequest();
[Link]('GET', '[Link] true);
[Link] = function () { if ([Link] === 4 && [Link] ===
200) { const data = [Link]([Link]);
[Link] = `<h3>${[Link]}</h3><p>${[Link]}</p>`;
} };
[Link]();
}
</script>
</body>
</html>
Output :
Practical 5
Using JavaScript/CSS for dynamic web pages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Web Page with JavaScript and CSS</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f4f8;
display: flex; flex-direction:
column; align-items: center;
margin: 0;
} h1 {
color: #333;
margin-top: 20px;
}
#dynamicBox { width:
200px; height: 200px;
background-color: #3498db;
display: flex;
align-items: center;
justify-content: center;
color: white; font-size:
20px; font-weight:
bold; margin-top:
20px;
transition: transform 0.3s, background-color 0.3s;
}
#changeColorButton, #toggleTextButton {
padding: 10px 20px; font-size: 16px;
margin: 10px; cursor: pointer;
border: none; border-radius: 5px;
background-color: #3498db; color:
white;
transition: background-color 0.3s;
}
#changeColorButton:hover, #toggleTextButton:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<h1>Interactive Box with JavaScript and CSS</h1>
<div id="dynamicBox">Hover Me!</div>
<button id="changeColorButton">Change Color</button>
<button id="toggleTextButton">Toggle Text</button>
<script>
const dynamicBox = [Link]('dynamicBox'); const
changeColorButton = [Link]('changeColorButton'); const
toggleTextButton = [Link]('toggleTextButton');
[Link]('mouseover', function() {
[Link] = 'scale(1.1)';
});
[Link]('mouseout', function() {
[Link] = 'scale(1)';
});
[Link]('click', function() {
const colors = ['#e74c3c', '#9b59b6', '#f1c40f', '#1abc9c'];
const randomColor = colors[[Link]([Link]() * [Link])];
[Link] = randomColor;
});
[Link]('click', function() {
[Link] = [Link] === 'Hover Me!' ? 'Hello World!' : 'Hover Me!';
});
</script>
</body>
</html>
Output :
Practical 6
Utilize HTML/CSS and JavaScript frameworks (ReactJS, NextJS) to construct dynamic user interfaces.
Code : [Link]
import React, { useState } from "react"; import
"./[Link]";
function App() {
const [count, setCount] = useState(0); const [darkMode,
setDarkMode] = useState(false);
const incrementCount = () => setCount(count + 1); const
toggleTheme = () => setDarkMode(!darkMode);
return (
<div className={`App ${darkMode ? "dark" : "light"}`}>
<header className="App-header">
<h1>Dynamic User Interface</h1>
<p>Count: {count}</p>
<button onClick={incrementCount}>Increment Count</button>
<button onClick={toggleTheme}>
Switch to {darkMode ? "Light" : "Dark"} Mode
</button>
</header>
</div>
);
} export default App;
[Link]
.App {
text-align: center; }
.App-logo { height:
40vmin; pointer-events:
none; }
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34; min-
height: 100vh; display: flex; flex-
direction: column; align-items:
center; justify-content: center; font-
size: calc(10px + 2vmin); color:
white;
}
.App-link { color:
#61dafb; }
@keyframes App-logo-spin { from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}}
Output :
Practical 7
Create various databases using SQL/MongoDB/or other to show interactivity.
CREATE DATABASE interactiveDB;
USE interactiveDB;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL, email
VARCHAR(100) NOT NULL, password
VARCHAR(100) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
INSERT INTO users (username, email, password) VALUES
('alice', 'alice@[Link]', 'alice123'),
('bob', 'bob@[Link]', 'bob123'); SELECT *
FROM users;
const mysql = require('mysql2'); const connection
= [Link]({
host: 'localhost', user:
'yourUsername', password:
'yourPassword', database:
'interactiveDB'
});
[Link]((err) => {
if (err) throw err;
[Link]("Connected to MySQL database.");
});
function addUser(username, email, password) {
const query = 'INSERT INTO users (username, email, password) VALUES (?, ?, ?)';
[Link](query, [username, email, password], (err, results) => { if
(err) throw err;
[Link]("User added:", results);
}); }
addUser('david', 'david@[Link]', 'david123');
Practical 8
Perform CRUD operations using React JS as frontend technology and Node JS as backend
technology.
Code Frontend
[Link]
import React, { useEffect, useState } from "react"; import api
from "./api";
function App() {
const [users, setUsers] = useState([]);
const [formData, setFormData] = useState({ name: "", email: "", age: "" });
const fetchUsers = async () => { const
response = await [Link]("/users");
setUsers([Link]);
};
useEffect(() => { fetchUsers();
}, []);
const handleSubmit = async (e) => {
[Link](); if (formData._id) {
await [Link](`/users/${formData._id}`, formData);
} else {
await [Link]("/users", formData);
}
setFormData({ name: "", email: "", age: "" }); fetchUsers();
};
const handleEdit = (user) => { setFormData(user);
};
const handleDelete = async (id) => { await
[Link](`/users/${id}`); fetchUsers();
};
return (
<div>
<h1>CRUD Application</h1>
<form onSubmit={handleSubmit}>
<input type="text"
placeholder="Name"
value={[Link]}
onChange={(e) => setFormData({ ...formData, name: [Link] })}
/>
<input type="email"
placeholder="Email"
value={[Link]}
onChange={(e) => setFormData({ ...formData, email: [Link] })}
/>
<input
type="number"
placeholder="Age"
value={[Link]}
onChange={(e) => setFormData({ ...formData, age: [Link] })}
/>
<button type="submit">Submit</button>
</form>
<ul>
{[Link]((user) => (
<li key={user._id}>
{[Link]} - {[Link]} - {[Link]} years
<button onClick={() => handleEdit(user)}>Edit</button>
<button onClick={() => handleDelete(user._id)}>Delete</button>
</li>
))}
</ul>
</div>
);
} export default App;
[Link] import axios from
'axios';
export default [Link]({ baseURL:
'[Link] });
Backend
// [Link]
const express = require("express"); const
mongoose = require("mongoose"); const
cors = require("cors"); const app =
express(); const PORT = 5001;
[Link](cors()); [Link]([Link]());
mongoose
.connect("mongodb://localhost:27017/crudDB")
.then(() => [Link]("Connected to MongoDB")) .catch((err) =>
[Link]("Database connection error:", err));
[Link](PORT, () => {
[Link](`Server running on [Link]
});
const User = require("./models/User");
// CREATE
[Link]("/users", async (req, res) => { try {
const user = new User([Link]); await
[Link](); [Link](201).json(user);
} catch (error) {
[Link](400).json({ message: [Link] });
}
});
// READ
[Link]("/users", async (req, res) => {
try {
const users = await [Link]();
[Link](users); }
catch (error) {
[Link](500).json({ message: [Link] });
}
});
// UPDATE
[Link]("/users/:id", async (req, res) => { try {
const user = await [Link]([Link], [Link], {
new: true, }); [Link](user); } catch (error) {
[Link](400).json({ message: [Link] });
}
});
// DELETE
[Link]("/users/:id", async (req, res) => { try {
await [Link]([Link]); [Link]({
message: "User deleted" });
} catch (error) {
[Link](500).json({ message: [Link] });
}
});
[Link] const mongoose =
require("mongoose");
const UserSchema = new [Link]({
name: String,
email: String, age:
Number,
});
[Link] = [Link]("User", UserSchema);
Output
Practical 9
Develop robust back-end systems using [Link].
Code
[Link]
const express = require('express'); const connectDB
= require('./db'); const authRoutes =
require('./routes/auth'); const protectedRoutes =
require('./routes/protected'); const cors =
require('cors'); const app = express();
// Connect to MongoDB connectDB();
[Link](cors()); [Link]([Link]());
// Routes
[Link]('/api/auth', authRoutes); [Link]('/api',
protectedRoutes);
const PORT = [Link] || 5000; [Link](PORT,
() => {
[Link](`Server running on [Link] });
[Link]
const mongoose = require("mongoose"); require("dotenv").config();
const connectDB = async () => {
try {
await [Link]([Link].MONGO_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,
});
[Link]("MongoDB connected.");
} catch (error) {
[Link]("MongoDB connection error:", error);
[Link](1);
}
};
[Link] = connectDB;
models/[Link]
const mongoose = require("mongoose"); const
bcrypt = require("bcryptjs");
const UserSchema = new [Link]({
name: { type: String, required: true }, email: {
type: String, required: true, unique: true },
password: { type: String, required: true }, });
[Link]("save", async function (next) { if
(![Link]("password")) return next(); const salt
= await [Link](10); [Link] = await
[Link]([Link], salt); next();
});
[Link] = [Link]("User", UserSchema);
// routes/[Link] const express =
require("express"); const User =
require("../models/User"); const jwt =
require("jsonwebtoken"); const bcrypt
= require("bcryptjs");
require("dotenv").config(); const router
= [Link]();
// Register User
[Link]("/register", async (req, res) => {
const { name, email, password } = [Link];
try {
const user = new User({ name, email, password });
await [Link]();
[Link](201).json({ message: "User registered successfully" });
} catch (error) {
[Link](500).json({ error: [Link] });
}
});
// Login User
[Link]("/login", async (req, res) => {
const { email, password } = [Link];
try {
const user = await [Link]({ email }); if (!user) return
[Link](400).json({ message: "User not found" });
const isMatch = await [Link](password, [Link]);
if (!isMatch) return [Link](400).json({ message: "Invalid
credentials" });
const token = [Link]({ id: user._id }, [Link].JWT_SECRET, {
expiresIn: "1h",
});
[Link]({ token });
} catch (error) {
[Link](500).json({ error: [Link] });
}
});
[Link] = router;
.env
PORT=5001
MONGO_URI=mongodb://localhost:27017/backendDB
JWT_SECRET=aerondhruvaerondhruvaerondhruvaerondhruv
// middleware/[Link] const jwt =
require("jsonwebtoken");
require("dotenv").config();
const auth = (req, res, next) => { const
token = [Link]("x-auth-token"); if
(!token)
return [Link](401).json({ message: "No token, authorization denied" });
try {
const decoded = [Link](token, [Link].JWT_SECRET);
[Link] = decoded; next(); } catch (error) {
[Link](401).json({ message: "Token is not valid" });
}
};
[Link] = auth;
// routes/[Link] const express =
require("express"); const auth =
require("../middleware/auth"); const router
= [Link]();
[Link]("/dashboard", auth, (req, res) => {
[Link]({ message: `Welcome to your dashboard, user ID: ${[Link]}` });
});
[Link] = router;
Output
Practical 10
Showing database interactivity using PHP/Python/or any current technology used in web
industry.
Code Frontend
[Link]
import React, { useEffect, useState } from "react"; import
api from "./api";
function App() {
const [users, setUsers] = useState([]);
const [formData, setFormData] = useState({ name: "", email: "", age: "" });
const fetchUsers = async () => { const
response = await [Link]("/users");
setUsers([Link]);
};
useEffect(() => {
fetchUsers();
}, []);
const handleSubmit = async (e) => {
[Link](); if
(formData._id) {
await [Link](`/users/${formData._id}`, formData);
} else {
await [Link]("/users", formData);
}
setFormData({ name: "", email: "", age: "" });
fetchUsers();
};
const handleEdit = (user) => {
setFormData(user);
};
const handleDelete = async (id) => {
await [Link](`/users/${id}`);
fetchUsers();
};
return (
<div>
<h1>CRUD Application</h1>
<form onSubmit={handleSubmit}>
<input type="text"
placeholder="Name"
value={[Link]}
onChange={(e) => setFormData({ ...formData, name: [Link] })}
/>
<input
type="email"
placeholder="Email"
value={[Link]}
onChange={(e) => setFormData({ ...formData, email: [Link] })}
/>
<input
type="number"
placeholder="Age"
value={[Link]}
onChange={(e) => setFormData({ ...formData, age: [Link] })}
/>
<button type="submit">Submit</button>
</form>
<ul>
{[Link]((user) => (
<li key={user._id}>
{[Link]} - {[Link]} - {[Link]} years
<button onClick={() => handleEdit(user)}>Edit</button>
<button onClick={() => handleDelete(user._id)}>Delete</button>
</li>
))}
</ul>
</div>
);
} export default
App;
[Link] import axios from
'axios';
export default [Link]({
baseURL: '[Link] });
Backend
// [Link]
const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors"); const app
= express(); const PORT = 5001;
[Link](cors()); [Link]([Link]());
mongoose
.connect("mongodb://localhost:27017/crudDB")
.then(() => [Link]("Connected to MongoDB"))
.catch((err) => [Link]("Database connection error:", err));
[Link](PORT, () => {
[Link](`Server running on [Link]
});
const User = require("./models/User");
// CREATE
[Link]("/users", async (req, res) => {
try {
const user = new User([Link]);
await [Link]();
[Link](201).json(user); } catch
(error) {
[Link](400).json({ message: [Link] });
}
});
// READ
[Link]("/users", async (req, res) => {
try {
const users = await [Link]();
[Link](users);
} catch (error) {
[Link](500).json({ message: [Link] });
}
});
// UPDATE
[Link]("/users/:id", async (req, res) => {
try {
const user = await [Link]([Link], [Link], {
new: true, }); [Link](user); } catch (error) {
[Link](400).json({ message: [Link] });
}
});
// DELETE
[Link]("/users/:id", async (req, res) => {
try {
await [Link]([Link]);
[Link]({ message: "User deleted" });
} catch (error) {
[Link](500).json({ message: [Link] });
}
});
[Link] const mongoose =
require("mongoose");
const UserSchema = new [Link]({
name: String,
email: String, age:
Number,
});
[Link] = [Link]("User", UserSchema);
Output
Practical 11
Any current web industry relevant example of database usage and interactivity using
any suitable backend technology.
Code
[Link]
const express = require('express'); const connectDB = require('./db'); const authRoutes = require('./routes/auth'); const
protectedRoutes = require('./routes/protected'); const cors = require('cors'); const app = express();
// Connect to MongoDB connectDB();
[Link](cors()); [Link]([Link]());
// Routes
[Link]('/api/auth', authRoutes); [Link]('/api', protectedRoutes);
const PORT = [Link] || 5000; [Link](PORT, () => {
[Link](`Server running on [Link]
});
[Link]
const mongoose = require("mongoose"); require("dotenv").config();
const connectDB = async () => { try {
await [Link]([Link].MONGO_URI, { useNewUrlParser: true,
useUnifiedTopology: true,
});
[Link]("MongoDB connected.");
} catch (error) {
[Link]("MongoDB connection error:", error); [Link](1);
}
};
[Link] = connectDB;
models/[Link]
const mongoose = require("mongoose"); const bcrypt = require("bcryptjs");
const UserSchema = new [Link]({ name: { type: String, required: true }, email: { type: String, required: true,
unique: true }, password: { type: String, required: true }, });
[Link]("save", async function (next) { if (![Link]("password")) return next(); const salt = await
[Link](10); [Link] = await [Link]([Link], salt); next();
});
[Link] = [Link]("User", UserSchema);
// routes/[Link] const express = require("express"); const User = require("../models/User"); const jwt = require("jsonwebtoken");
const bcrypt = require("bcryptjs"); require("dotenv").config(); const router = [Link]();
// Register User
[Link]("/register", async (req, res) => {
const { name, email, password } = [Link]; try {
const user = new User({ name, email, password }); await [Link]();
[Link](201).json({ message: "User registered successfully" });
} catch (error) {
[Link](500).json({ error: [Link] });
}
});
// Login User
[Link]("/login", async (req, res) => {
const { email, password } = [Link]; try {
const user = await [Link]({ email }); if (!user) return [Link](400).json({ message: "User not found" });
const isMatch = await [Link](password, [Link]); if (!isMatch) return [Link](400).json({ message:
"Invalid credentials" });
const token = [Link]({ id: user._id }, [Link].JWT_SECRET, { expiresIn: "1h",
});
[Link]({ token }); } catch (error) {
[Link](500).json({ error: [Link] });
}
});
[Link] = router;
.env
PORT=5001
MONGO_URI=mongodb://localhost:27017/backendDB
JWT_SECRET=aerondhruvaerondhruvaerondhruvaerondhruv
// middleware/[Link] const jwt = require("jsonwebtoken"); require("dotenv").config();
const auth = (req, res, next) => { const token = [Link]("x-auth-token"); if (!token)
return [Link](401).json({ message: "No token, authorization denied" });
try {
const decoded = [Link](token, [Link].JWT_SECRET); [Link] = decoded; next(); } catch (error) {
[Link](401).json({ message: "Token is not valid" });
}
};
[Link] = auth;
// routes/[Link] const express = require("express"); const auth = require("../middleware/auth"); const router =
[Link]();
[Link]("/dashboard", auth, (req, res) => {
[Link]({ message: `Welcome to your dashboard, user ID: ${[Link]}` });
});
[Link] = router;
Output
INDEX
[Link]. NAME OF PRACTICAL SIGN
1 Using various HTML tags for creating different web pages.
Using various Form tags for interactivity, authentication,
2 date validation etc
3 Using Semantic HTML tags /tags associated with interactivity.
4 Using DHTML tags in concern to client server application
5 Using JavaScript/CSS for dynamic web pages.
Utilize HTML/CSS and JavaScript frameworks (ReactJS,
6 NextJS) to construct dynamic user interfaces.
Create various databases using SQL/MongoDB/or other to
7
show interactivity.
Perform CRUD operations using React JS as frontend
8 technology and Node JS as backend
technology
9 Develop robust back-end systems using [Link].
Showing database interactivity using
10 PHP/Python/or any current technology used in web industry.
Any current web industry relevant example of database usage
11 and interactivity using any suitable backend technology.