MEAN Lab Manual - 7 - 10

Faculty of Engineering &
Technology Subject: MSWD

Laboratory
Subject Code: 203105380
B.Tech. IT Year: 3rd Semester: 6th
Practical: 7
Aim : You are tasked with developing a user authentication API using
Node.js and Express framework. The API should allow users to sign up
with their email address and password and sign in using their credentials.
Upon successful authentication, users should receive an authentication
token that they can use to access protected routes or resources.
Requirements:
User Signup API:
 Implement a route to handle user signup requests.
 Users should be able to provide their email address and password.
 Validate the input data to ensure it meets the required criteria (e.g., valid
email format, password strength).
 Hash the user's password before storing it in the database for security.
 Return an appropriate response indicating whether the signup was successful or if
there were any errors.
User Signin API:
 Implement a route to handle user signin requests.
 Users should be able to provide their email address and password for authentication.
 Validate the user's credentials against the stored data in the database.
 Generate and return a JWT (JSON Web Token) upon successful authentication.
 Return an appropriate response indicating whether the signin was successful or
if there were any errors.
Token-Based Authentication:
 Use JWT for token-based authentication.
 Include the generated JWT token in the response payload upon successful signin.
 Use the token to authenticate subsequent requests to protected routes or resources.
 Implement middleware to verify the JWT token for protected routes and deny
access if the token is invalid or expired.
Database Integration:
 Integrate a database (e.g., MongoDB) to store user information securely.
 Define a schema for the user model including fields for email, password hash,
and any other relevant information.
 Use an ORM (Object-Relational Mapping) library like Mongoose (for
MongoDB) or Sequelize (for SQL databases) for interacting with the database.
Error Handling:
 Implement error handling mechanisms to handle scenarios such as invalid input
data, duplicate email addresses during signup, incorrect credentials during signin,
etc.
 Return appropriate HTTP status codes and error messages in the response payload.
Enrolment No. : Page 1

Laboratory
Step 1: Open Notepad and enter the below code. save it as index.js
Step 2:Write below code and save package.json file and execute.
{
"dependencies": {
"bcrypt": "^5.1.1",
"express": "^4.18.3",
"jsonwebtoken": "^9.0.2",
"mongoose": "^8.2.2",
"validator": "^13.11.0"
}
}
return res.status(401).json({ error: "Invalid credentials" });

}

Laboratory

Laboratory
Practical: 8
Aim : You are tasked with developing an online bookstore application
using Node.js and Express framework with a template engine for
rendering dynamic web pages. The application should allow users to
browse books, search for books by title or author, view book details, add
books to their cart, and proceed with the checkout process.
Requirements:
1. User Interface:
 Create a user-friendly interface where users can easily browse books, view book
details, and add them to their cart.
 Implement a search functionality allowing users to search for books by title
or author.
 Display appropriate messages for users when they add books to their cart
or complete the checkout process.
2. Book Catalog:
 Create a catalog of books with details such as title, author, price, ISBN,
and brief description.
 Use a static array or JSON file to store the book data.
3. Shopping Cart:
 Implement a shopping cart functionality allowing users to add books to
their cart and remove books from it.
 Display the contents of the shopping cart, including the titles of the books,
quantities, and total price.
4. Checkout Process:
 Allow users to proceed with the checkout process by entering their
shipping details.
 Provide a summary of the order before finalizing the purchase.
5. Template Engine:
 Use a template engine (such as EJS or Handlebars) to render dynamic web
pages.
 Create templates for displaying the book catalog, individual book details,
shopping cart contents, and checkout pages.
6. Error Handling:
 Implement error handling mechanisms to handle scenarios such as invalid
routes or missing data.
Additional Considerations:
 Ensure that the application follows best practices for code organization,
separation of concerns, and modularity.
 Use Express middleware for routing, request processing, and error handling.

Laboratory
 Implement client-side validation for forms using JavaScript where necessary.
 Make the application responsive, ensuring it works well on different screen
sizes and devices.
 Optionally, you can incorporate features like user authentication, user
reviews/ratings for books, or integration with external APIs for retrieving
book data.
Step 1:- Write below code and save it as app.js
// app.js
const express = require("express");

const bodyParser = require("body-parser");
const app = express();
const port = 3000;
// Sample book data

const books = [
{
id: 1,
title: "Book 1",
author: "Author 1",
price: 10,
isbn: "123456789",
description: "Description of Book 1",
},
{
id: 2,
title: "Book 2",
author: "Author 2",
price: 15,
isbn: "987654321",
description: "Description of Book 2",
},
];
app.set("view engine", "ejs");

app.use(bodyParser.urlencoded({ extended: true }));
// Routes
app.get("/", (req, res) => {
res.render("index", { books: books });
});
app.get("/book/:id", (req, res) => {

const bookId = req.params.id;
const book = books.find((book) => book.id ===
parseInt(bookId)); res.render("book", { book: book });

Laboratory
});
app.get("/cart", (req, res) => {

// Render shopping cart page
res.render("cart");
});
app.post("/cart/add", (req, res) => {

// Add book to shopping cart
const bookId = req.body.bookId;
const quantity = parseInt(req.body.quantity);
// Logic to add book to cart
res.redirect("/cart");
});
app.get("/checkout", (req, res) => {

// Render checkout page
res.render("checkout");
});
app.post("/checkout", (req, res) => {

// Process checkout
const shippingDetails = req.body;
// Logic to process checkout
res.render("order-summary", { shippingDetails: shippingDetails });
});
// Error handling middleware

app.use((req, res, next) => {
res.status(404).send("Sorry, can't find that!");
});
// Start server
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
Step 2: Write below code in nodepad and save it as file1.html:-

Laboratory
Step : Write below code in nodepad and save it as file2.html:-

Laboratory

Laboratory
Output:-

Laboratory
Practical: 9
Aim:- Creating a login component in Angular involves defining a component
that includes a form where users can input their credentials and a method to
handle the login process. Here's a breakdown of the steps to create a login
component in Angular:
Generate the Component:
Use Angular CLI to generate a new component named login. This will create the
necessary files and folder structure for the component.
Define HTML Template:

Implement the HTML template for the login form. This template includes input fields
for username and password, as well as a submit button.
Implement Component Class:

Write the TypeScript class for the login component. This class will contain the logic
to handle form submission and any other actions related to the login process.
Integrate with Angular Application:

Add the login component to your Angular application by including its selector in the
template of other components or directly in the app.component.html file.
Step 1: Write a below code and save it as a login.component.html:-
<div class="min-h-20 shadow-lg w-full">

<nav class="flex justify-between items-center h-full p-3">
<div>
<h1 class="text-3xl font-bold">Logo</h1>
</div>
<div>
<ul class="flex gap-10 justify-center items-center font-semibold text-lg">
<li
class="cursor-pointer hover:underline underline-offset-4 duration-300"
>
Home
</li>
<li
>
Services
</li>
<li
>
Contact Us
Enrolment No. : Page

Laboratory
</li>
<li
>
About Us
</li>
</ul>
</div>
<div class="flex gap-5">
<button
class="border p-3 pl-8 pr-8 text-lg font-semibold rounded-lg cursor-pointer hover:bg-
black hover:text-white duration-300"
>
Login
</button>
<button
class="border p-3 pl-8 pr-8 text-lg font-semibold rounded-lg cursor-pointer hover:bg-
black hover:text-white duration-300"
>
Signup
</button>
</div>
</nav>
</div>

<div class="mt-20 h-96 w-full">
<div class="flex items-cente justify-center">
<h1 class="text-2xl font-bold underline underline-offset-8">
Login Component
</h1>
</div>
<div class="mt-10 w-full justify-center flex">

<form
#myForm="ngForm"
class="flex flex-col gap-5 outline-none text-lg max-w-[200px] w-96 p-5 shadow-lg
rounded-lg"
>
<input
type="text"
class="w-full border h-full p-5 rounded-lg border-black outline-none"
placeholder="Username"
name="username"
ngModel
/>
<input
type="password"
placeholder="Password"

Laboratory
class="w-full border h-full p-5 rounded-lg outline-none border-black"
name="password"
ngModel
/>
<button
class="border p-3 border-black rounded-lg text-lg font-semibold"
(click)="onSubmit(myForm)"
>
Submit
</button>
</form>
</div>
</div>
<div class="flex justify-center flex-col items-center">

<hr />
<h1 class="text-3xl font-semibold">User Information</h1>
<h1 class="mt-10 text-xl font-semibold">{{ username }}</h1>

<h1 class="mt-3 text-xl font-semibold">{{ password }}</h1>
</div>
Step 2:Execute this code in MongoDB.

Laboratory
Step 3: Output of login form.

Laboratory
Practical: 10
An Angular service for CRUD operations using REST API is a reusable and
encapsulated component designed to facilitate Create, Read, Update, and Delete
(CRUD) operations on a server-side resource through RESTful API endpoints. Here's
a breakdown of its key components:
Angular Service: A TypeScript class decorated with the @Injectable() decorator,

allowing it to be injected into Angular components.
HTTP Client Module: The service utilizes Angular's built-in HttpClientModule to

make HTTP requests to the server.
RESTful API Endpoints: The service interacts with server-side resources via
RESTful API endpoints. These endpoints typically correspond to CRUD operations
such as creating, reading, updating, and deleting data.
Methods for CRUD Operations:
Create: Method to send HTTP POST requests to the server to create new resources.
Read: Method to send HTTP GET requests to retrieve existing resources from the
server.
Update: Method to send HTTP PUT or PATCH requests to update existing resources
on the server.
Delete: Method to send HTTP DELETE requests to remove resources from the server.
Data Handling: The service handles data transmission between the Angular
application and the server, converting data to and from JSON format as required by
the REST API.
Error Handling: It includes mechanisms to handle errors returned by the server

during CRUD operations, such as HTTP status codes and error messages.
Observable Pattern: Angular services typically return Observables to allow

asynchronous handling of HTTP requests and responses, enabling reactive
programming paradigms within Angular components.
Dependency Injection: The service can be injected into Angular components,

allowing them to leverage its functionality without directly interacting with HTTP
requests or data manipulation logic.
By encapsulating CRUD operations within a dedicated Angular service, developers

can promote code reusability, maintainability, and separation of concerns within their
Angular applications. This approach also fosters clean, modular architecture and
facilitates easier testing and debugging of CRUD functionality.

Laboratory
Step 1:-Write a below code in notepad and save it as a index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Movie Card</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.card {
background-color: #fff;
width: 300px;
padding: 20px;
border-radius:
10px;
box-shadow: 0 0 10px rgba(0, 0, 0,
0.1); text-align: center;
}
.card img {
width: 100%;

Laboratory
border-radius: 5px;

Laboratory
margin-bottom: 10px;
}
.btn {
display: inline-block;
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
text-align: center;
text-decoration: none;
color: #fff;s
background-color: #007bff;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="card">
<img
src="https://m.media
-
amazon.com/images/M/MV5BNGViM2M4NmUtMmNkNy00MTQ5LTk5MDYtNmNhOD
AzODkwOTJlXkEyXkFqcGdeQXVyMTY1NDY4NTIw._V1_FMjpg_UX1000_.jpg"
alt="Movie Poster"
/>
<h2>Movie Name</h2>
<p>IMDb Ranking: 8.0</p>

Laboratory
<p>Release Year: 2023</p>

Laboratory
<button class="btn">Update</button>
<button class="btn">Delete</button>
</div>
</body>
</html>
Step 2:- Execute a below query.
Output:-

MEAN Lab Manual - 7 - 10

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

MEAN Lab Manual - 7 - 10

Uploaded by

Copyright:

Available Formats

Faculty of Engineering &

Technology Subject: MSWD

Enrolment No. : Page 1

return res.status(401).json({ error: "Invalid credentials" });

Enrolment No. : Page 2

Enrolment No. : Page 3

Enrolment No. : Page 4

const express = require("express");

// Sample book data

app.set("view engine", "ejs");

app.get("/book/:id", (req, res) => {

Enrolment No. : Page 5

app.get("/cart", (req, res) => {

app.post("/cart/add", (req, res) => {

app.get("/checkout", (req, res) => {

app.post("/checkout", (req, res) => {

// Error handling middleware

Step 2: Write below code in nodepad and save it as file1.html:-

Enrolment No. : Page 6

Step : Write below code in nodepad and save it as file2.html:-

Step : Write below code in nodepad and save it as file3.html:-

Enrolment No. : Page 7

Step : Write below code in nodepad and save it as file4.html:-

Step : Write below code in nodepad and save it as file5.html:-

Enrolment No. : Page 8

Enrolment No. : Page 9

Define HTML Template:

Implement Component Class:

Integrate with Angular Application:

Step 1: Write a below code and save it as a login.component.html:-

<div class="min-h-20 shadow-lg w-full">

Enrolment No. : Page

<div class="mt-10 w-full justify-center flex">

Enrolment No. : Page

<div class="flex justify-center flex-col items-center">

<h1 class="text-3xl font-semibold">User Information</h1>

<h1 class="mt-10 text-xl font-semibold">{{ username }}</h1>

Step 2:Execute this code in MongoDB.

Enrolment No. : Page

Enrolment No. : Page

Angular Service: A TypeScript class decorated with the @Injectable() decorator,

HTTP Client Module: The service utilizes Angular's built-in HttpClientModule to

Methods for CRUD Operations:

Error Handling: It includes mechanisms to handle errors returned by the server

Observable Pattern: Angular services typically return Observables to allow

Dependency Injection: The service can be injected into Angular components,

By encapsulating CRUD operations within a dedicated Angular service, developers

Enrolment No. : Page

Enrolment No. : Page

Enrolment No. : Page

Enrolment No. : Page

Enrolment No. : Page

Enrolment No. : Page

You might also like