Question : Web Application Development
You're developing a simple web application to manage email subscriptions for a newsletter.
Follow the instructions to build the front-end and back-end of this application. You should use
stack MERN and database type MongoDB .
a) Front-end Development
1- Create a file named [Link] that includes a form to accept a user's name and
email.
2- Ensure the form sends these details to a backend script ( [Link] in [Link]).
b) Back-end and Database Setup
i) Database Connection
1- Write the code to establish a connection to your MongoDB database
2- Display relevant error messages if the connection fails.
ii) Data Insertion
1- Write the code to save the name "Ali" and email "ali@[Link]" in the database.
2- Display messages indicating success or failure.
iii) Data Retrieval and Display
1- Write the code to retrieve all names and emails from the database in alphabetical order.
2- Display the results in an HTML table or equivalent format.
3- Display relevant error messages if the retrieval fails.
c) Back-end Function and Integration
a) Function Creation
Write a function named saveSubscription (or equivalent in your stack)
that:
[Link] two parameters (name and email).
[Link] these details in the database.
[Link] true if the operation succeeds, false if it fails.
[Link] this function in an appropriate file.
b) Backend Script
Write the code for the backend script ( [Link] in [Link])
that:
[Link] a valid web page titled "Saving Email".
[Link] the saveSubscription function to save the input parameters from the front-end form.
iii. Displays appropriate error messages if the input parameters are not set.
Answer :
a) Front-end Development
- [Link] creation
<!DOCTYPE html>
<head>
<title>Email Subscription</title>
</head>
<body>
# form to accept a user's name and email
<form id="subscriptionForm">
<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>
<button type="submit">Subscribe</button>
</form>
</body>
</html>
- ensure from save-email
[Link]("subscriptionForm").addEventListener("submit",
function (e) {
const name = [Link]("name").value;
const email = [Link]("email").value;
const response = await fetch("[Link] {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: [Link]({ name, email }),
});
const result = await [Link]();
[Link](result);
});
b) Back-end and Database Setup
i) Database Connection
const mongoose = require("mongoose");
const connectDB = async () => {
try {
await [Link]("mongodb://localhost:27017/emailSubscriptions", {
useNewUrlParser: true,
useUnifiedTopology: true,
});
[Link]("Connected to MongoDB");
} catch (error) {
[Link]("Error connecting to MongoDB:", [Link]);
}
};
[Link] = connectDB;
ii) Data Insertion
- Create Schema
const mongoose = require("mongoose");
const SubscriptionSchema = new [Link]({
name: { type: String, required: true },
email: { type: String, required: true, unique: true },
});
[Link] = [Link]("Subscription", SubscriptionSchema);
- Insert data
const Subscription = require("./models/Subscription");
const saveInitialData = async () => {
try {
const newSubscription = new Subscription({ name: "Ali", email: "ali@[Link]" });
await [Link]();
[Link]("Successfully saved Ali's data!");
} catch (error) {
[Link]("Error saving Ali's data:", [Link]);
}
};
saveInitialData();
iii) Data Retrieval and Display
const express = require("express");
const Subscription = require("../models/Subscription");
const router = [Link]();
[Link]("/retrieve", async (req, res) => {
try {
const subscriptions = await [Link]().sort({ name: 1 });
[Link](subscriptions);
} catch (error) {
[Link](500).json({ message: "Error retrieving data", error: [Link] });
}
});
[Link] = router;
c) Back-end Function and Integration
a) Function Creation
const Subscription = require("../models/Subscription");
const saveSubscription = async (name, email) => {
try {
const newSubscription = new Subscription({ name, email });
await [Link]();
return true;
} catch (error) {
[Link]("Error saving subscription:", [Link]);
return false;
}
};
[Link] = saveSubscription;
c) Backend Script
const express = require("express");
const bodyParser = require("body-parser");
const connectDB = require("./db");
const saveSubscription = require("./utils/saveSubscription");
const app = express();
const PORT = 5000;
// Middleware
[Link]([Link]());
// Connect to MongoDB
connectDB();
// Routes
[Link]("/save-email", async (req, res) => {
const { name, email } = [Link];
if (!name || !email) {
return [Link](400).json({ message: "Name and email are required." });
}
const success = await saveSubscription(name, email);
if (success) {
[Link](200).json({ message: "Subscription saved successfully!" });
} else {
[Link](500).json({ message: "Failed to save subscription." });
}
});
// Start Server
[Link](PORT, () => {
[Link](`Server running at [Link]
});