0% found this document useful (0 votes)
2 views8 pages

Express.js Home Button Example

The document contains three Express.js applications demonstrating various functionalities. The first app showcases routing with parameters, query parameters, and redirection, while the second app implements CRUD operations with an in-memory student database. The third app introduces custom middleware for logging requests and includes sample routes for demonstration.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
2 views8 pages

Express.js Home Button Example

The document contains three Express.js applications demonstrating various functionalities. The first app showcases routing with parameters, query parameters, and redirection, while the second app implements CRUD operations with an in-memory student database. The third app introduces custom middleware for logging requests and includes sample routes for demonstration.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

(a)

const express = require("express");


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

// Reusable HTML Home Button


const homeButton = `<p><a href="/" style="text-decoration:none;
color:white;">
<button style="background-color:#4CAF50; color:white; padding:10px 20px;
border:none; border-radius:5px;">🏠 Go to Home</button>
</a></p>`;

// Route 1: Home Page


[Link]("/", (req, res) => {
[Link](`
<h1>Welcome to the FSD Lab</h1>
<p>This is the home page. Try visiting the following routes:</p>
<ul>
<li><a href="/user/YourName">/user/YourName</a> – Route
Parameter</li>
<li><a href="/search?keyword=nodejs">/search?keyword=nodejs</a>
– Query Parameter</li>
<li><a href="/google">/google</a> – Redirect to Google</li>
<li><a href="/current-url">/current-url</a> – Show full URL</li>
</ul>
`);
});

// Route 2: Route with Parameter


[Link]("/user/:name", (req, res) => {
const name = [Link];
[Link](`
<h2>Hello, ${name}!</h2>
<p>This page demonstrates Route Parameters in [Link].</p>
${homeButton}
`);
});

// Route 3: Query Parameters


[Link]("/search", (req, res) => {
const keyword = [Link];
[Link](`
<h2>Search Results</h2>
<p>You searched for: <strong>${keyword}</strong></p>
<p>This page demonstrates Query Parameters in [Link].</p>
${homeButton}
`);
});

// Route 4: Redirect to Google


[Link]("/google", (req, res) => {
[Link]("[Link]
});

// Route 5: Show Current Full URL


[Link]("/current-url", (req, res) => {
const fullUrl = [Link] + "://" + [Link]("host") + [Link];
[Link](`
<h2>Current URL</h2>
<p>You are currently visiting: <strong>${fullUrl}</strong></p>
<p>This page demonstrates how to build URLs in [Link].</p>
${homeButton}
`);
});
// Start Server
[Link](port, () => {
[Link](`Server running at [Link]
});

(b) const express = require("express"); // Importing Express framework


const app = express(); // Creating an Express application
const port = 3000; // Defining the port to run the server

// STEP 2: Middleware to handle form and JSON data


[Link]([Link]()); // Middleware to parse JSON body
[Link]([Link]({ extended: true })); // Middleware to parse form
data

// STEP 3: In-memory database (just a list of students)


let students = []; // Example format: { id: 1, name: 'Vijay' }

// STEP 4: Reusable "Home Button" HTML (added on every page)


const homeButton = `
<p>
<a href="/" style="text-decoration:none;">
<button style="background-color:#4CAF50; color:white; padding:10px
20px; border:none; border-radius:5px;">🏠 Home</button>
</a>
</p>
`;

// ROUTE 1: Home Page


[Link]("/", (req, res) => {
[Link](`
<h1>🧪 Full Stack Lab: HTTP Methods</h1>
<p>Perform CRUD operations using different HTTP methods:</p>
<ul>
<li><a href="/students">GET /students</a> – View All Students</li>
<li><a href="/form">POST /students</a> – Add New Student via
Form</li>
<li>DELETE /students/:id – Use Postman to delete student</li>
</ul>
`);
});
// Explanation: Home page with links to test each feature

// ROUTE 2: View all students (GET)


[Link]("/students", (req, res) => {
let output = `<h2>📋 Student List</h2>`;
if ([Link] === 0) {
output += `<p>No students added yet.</p>`;
} else {
output += `<ul>`;
[Link]((s) => {
output += `<li>🆔 ID: ${[Link]} — 👤 Name: ${[Link]}</li>`;
});
output += `</ul>`;
}
[Link](output + homeButton);
});
// Explanation: Displays all stored students using GET method

// ROUTE 3: Show form to add new student


[Link]("/form", (req, res) => {
[Link](`
<h2>➕ Add New Student</h2>
<form method="POST" action="/students">
<label>🆔 ID: <input type="number" name="id" required
/></label><br/><br/>
<label>👤 Name: <input type="text" name="name" required
/></label><br/><br/>
<button type="submit">Submit</button>
</form>
${homeButton}
`);
});
// Explanation: Displays a form where user enters student ID and Name (POST)

// ROUTE 4: Add new student using POST


[Link]("/students", (req, res) => {
const { id, name } = [Link];
const exists = [Link]((s) => [Link] == id);

if (exists) {
return [Link](
`<p style="color:red;">❌ Student with ID ${id} already exists.</p>` +
homeButton
);
}

[Link]({ id: parseInt(id), name }); // Add to in-memory DB


[Link](
`<p style="color:green;">✅ Student Added: ID=${id}, Name=${name}</p>`
+
homeButton
);
});
// Explanation: Accepts form data and adds student if ID doesn't already exist

// ROUTE 5: Delete a student using DELETE method (Test in Postman)


[Link]("/students/:id", (req, res) => {
const id = parseInt([Link]);
const index = [Link]((s) => [Link] === id);

if (index === -1) {


return [Link](404).send({ message: "❌ Student not found." });
}

[Link](index, 1); // Remove the student from the array


[Link]({ message: `✅ Student with ID ${id} deleted successfully.` });
});
// Explanation: Deletes student by ID using DELETE HTTP method (via API client
like Postman)

// STEP 6: Start the Express server


[Link](port, () => {
[Link](`🚀 Server running at [Link]
});
// Explanation: Starts the server on localhost:3000

(c)
cod// Step 1: Import express
const express = require("express");
const app = express();
const port = 3000;

// Step 2: Create custom middleware to log request info


const loggerMiddleware = (req, res, next) => {
[Link](`[LOG] ${new Date().toISOString()} - ${[Link]} ${[Link]}`);
next(); // Proceed to the next middleware or route handler
};

// Step 3: Use the middleware globally


[Link](loggerMiddleware);

// Step 4: Reusable home button for all responses


const homeButton = `
<p>
<a href="/" style="text-decoration:none;">
<button style="background-color:#4CAF50; color:white; padding:10px
20px; border:none; border-radius:5px;">🏠 Home</button>
</a>
</p>
`;

// Step 5: Home route


[Link]("/", (req, res) => {
[Link](`
<h1>Express Middleware Demo</h1>
<p>Try these routes:</p>
<ul>
<li><a href="/about">About Page</a></li>
<li><a href="/contact">Contact Page</a></li>
</ul>
`);
});

// Step 6: Sample route - About


[Link]("/about", (req, res) => {
[Link](
`<h2>About Page</h2><p>This page shows middleware in action.</p>$
{homeButton}`
);
});

// Step 7: Sample route - Contact


[Link]("/contact", (req, res) => {
[Link](
`<h2>📞 Contact Page</h2><p>Request was logged using middleware.</p>$
{homeButton}`
);
});

// Step 8: Start the server


[Link](port, () => {
[Link](`Server running at [Link]
});

You might also like