BE Exp3 Ayushi - Pagenumber

EXPERIMENT - 03
----------------------------------------------------------------------------------------------
Name: Ayushi Kumari Subject Code: 23CAH-705
UID: 23MCA20510 Section: 8 A
Semester: 3 Date of Performance: 16-08-2024
Subject Name: BackEnd Technologies
Aim of the experiment: Create a Sign-up page and store the inputted data by user in file.
Objective: Apply the knowledge and skills acquired to develop and deploy back-end applications,
using tools such as Node.js
Step 1: Set Up the Express Server.
mkdir Employee_Management
cd signup-app
npm init -y
npm install express body-parser fs path
Step 2: Create the Signup Form.
Create an index.html file in a public directory.
Step 3: Handle Form Submission on the Server

Create app.js to set up the Express server and handle form submissions.
Step 4: Create and Use a JSON File for Storing User Data
Create an empty users.json file in the project directory.
Code
Index.js :
<body>
<div class="container">
<h1>Employee Management System</h1>
<div class="button-container">
<button onclick="location.href='/salary-calculator'">Salary Calculator</button>
<button onclick="location.href='/signup'">Employee Sign Up</button> </div>
</div>
</body>
8
Salary-calculator.js :
<body>
<h1>Total Salary of All Employees</h1>
<h2>Total Salary: ₹ <%= totalSalary %></h2>
<button onclick="location.href='/'">Go Back</button>
</div>
</body>
signup.ejs :
<h1>Employee Sign Up</h1>
<form id="signupForm" action="/signup" method="POST" onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="position">Position:</label>
<input type="text" id="position" name="position" required>
<br>
<label for="salary">Salary:</label>
<input type="number" id="salary" name="salary" required>
<br>
<button type="submit">Sign Up</button>
</form>
<div id="signupResult"></div>
<button onclick="location.href='/'">Go Back</button>
</div>
app.js :
const express = require('express');

const fs = require('fs');
const path = require('path');
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.set('view engine', 'ejs');
app.use(express.static(path.join(__dirname, 'public')));
9
app.get('/', (req, res) => {
res.render('index'); });
app.get('/salary-calculator', (req, res) => {
const employeesPath = path.join(__dirname, 'employees.json');
fs.readFile(employeesPath, 'utf8', (err, data) => {
if (err) {
if (err.code === 'ENOENT') {
return res.render('salary-calculator', { totalSalary: 0 });
} else {
return res.status(500).send('Error reading employee data');
}
}
const employees = data ? JSON.parse(data) : [];
const totalSalary = employees.reduce((sum, employee) => sum +
parseFloat(employee.salary), 0);
res.render('salary-calculator', { totalSalary });
});
});
app.get('/signup', (req, res) => {
res.render('signup'); });
app.post('/signup', (req, res) => {
const employee = {
name: req.body.name,
email: req.body.email,
position: req.body.position,
salary: req.body.salary };
const employeesPath = path.join(__dirname, 'employees.json');
fs.readFile(employeesPath, 'utf8', (err, data) => {
if (err) {
if (err.code === 'ENOENT') {
data = '[]';
} else {
return res.status(500).send('Error reading employee data');
}}
const employees = data ? JSON.parse(data) : [];
employees.push(employee);
fs.writeFile(employeesPath, JSON.stringify(employees, null, 2), (err) => {
if (err) {
return res.status(500).send('Error saving employee data');
}
res.send(`<h2>Employee ${employee.name} signed up
successfully!</h2><br><a href="/signup">Go Back</a>`);
});
});
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on port http://localhost:${PORT}`);
});
10
OUTPUT:
11
Learning Outcomes:
 Understanding File Operations in Node.js:
Gain knowledge of how to use the Node.js fs(File System) module to perform file operationssuch as
reading from and writing to files.
 JSON Handling:
Learn how to serialize JavaScript objects into JSON format using JSON.stringify. Also learn how to
deserialize JSON data back into JavaScript objects using JSON.parse.
 Separation of Concerns:
Recognize the importance of separating data storage logic from data processing logic by using
different scripts for writing and reading data.
 Error Handling in Asynchronous Operations:
Develop skills in handling errors that may occur during file operations, such as read or writeerrors,
using error-first callback functions.
Signature……………………………
12

BE Exp3 Ayushi - Pagenumber

Uploaded by

Copyright:

Available Formats

BE Exp3 Ayushi - Pagenumber

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

BE Exp3 Ayushi - Pagenumber

Uploaded by

Copyright:

Available Formats

EXPERIMENT - 03

Step 1: Set Up the Express Server.

Step 2: Create the Signup Form.

Create an index.html file in a public directory.

Step 3: Handle Form Submission on the Server

const express = require('express');

 Understanding File Operations in Node.js:

 Error Handling in Asynchronous Operations:

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.