En este artículo, vamos a crear un sistema de gestión de albergues. Se utiliza un sistema de gestión de albergues para administrar el registro de estudiantes de una universidad a la que la universidad proporciona un albergue, donde una universidad puede ver todos los datos de los estudiantes, incluidos sus nombres, número de registro, fecha de nacimiento, ciudad, número de teléfono, teléfono del padre número, número de habitación y nombre del albergue. La universidad puede agregar nuevos estudiantes, eliminar el registro de los estudiantes existentes y cambiar el número de habitación de los estudiantes.
Funcionalidades: una universidad puede hacer lo siguiente con este sistema de gestión de albergues:
- Mostrar registros de estudiantes
- Agregar nuevos estudiantes
- Eliminar registros de estudiantes
- Obtenga información particular del estudiante por su número de registro
- Actualizar el número de habitación del estudiante
Enfoque: Vamos a utilizar Body Parser mediante el cual podemos capturar los valores de entrada del usuario del formulario, como el nombre del estudiante, el número de registro, la fecha de nacimiento, la ciudad, el número de teléfono, el número de teléfono del padre, el número de habitación y el nombre y la tienda del albergue. ellos en una colección. Luego enviaremos los datos del estudiante a la página web usando EJS. EJS es un middleware que facilita el envío de datos desde su archivo de servidor (app.js o server.js) a una página web.
También vamos a crear la Ruta de Eliminación para eliminar registros de Estudiantes, una Ruta de Información para obtener información sobre un Estudiante por su Número de Lista y una Ruta de Actualización para actualizar el número de habitación de un Estudiante.
Implementación: A continuación se muestra la implementación paso a paso del enfoque anterior.
Paso 1: Configuración del proyecto
Inicializa NPM: cree y ubique la carpeta de su proyecto en la terminal y escriba el comando
npm init -y
Inicializa nuestra aplicación de Node y crea un archivo package.json.
Instale dependencias: ubique el directorio de su proyecto raíz en la terminal y escriba el comando
npm install express ejs body-parser
Para instalar Express, EJS y Body Parser como dependencias dentro de su proyecto
Crear archivo de servidor: cree un archivo ‘app.js’, dentro de este archivo se requiere el módulo Express y cree una ‘aplicación’ constante para crear una instancia del módulo express, luego configure EJS como el motor de vista predeterminado.
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
Reorganice sus directorios: se requiere usar ‘.ejs’ como extensión para el archivo HTML en lugar de ‘.html’ para usar EJS dentro de él. Luego, debe mover todos los archivos ‘.ejs’ en el directorio de vistas dentro de su directorio raíz. EJS busca por defecto los archivos ‘.ejs’ dentro de la carpeta de vistas.
Use la variable EJS: dentro de su archivo .ejs actualizado, debe usar variables EJS para recibir valores de su archivo de servidor. Puede declarar variables en EJS como
<%= variableName %>
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <%= variableName %> </body> </html>
Envíe datos a una variable: dentro de su archivo de servidor ( app.js o index.js ), puede enviar un archivo EJS junto con algunos datos utilizando el método de procesamiento.
app.get("/", (req, res) => {
res.render("home", { variableName: "Hello Geeks!" })
})
Javascript
const express = require('express')
const app = express()
app.set('view engine', 'ejs')
app.get("/", (req, res) => {
res.render("home", { variableName: "Hello Geeks!" })
})
app.listen(3000, (req, res) => {
console.log("App is running on port 3000")
})
Obtener datos del formulario a app.js: para recibir valores de entrada de un formulario, tenemos que usar un paquete de Nodes llamado body-parser.
Instale el analizador de cuerpo:
npm install body-parser
Requerir módulo analizador de cuerpo:
const bodyParser = require('body-parser')
Y entonces:
app.use( bodyParser.json() );
app.use(bodyParser.urlencoded({
extended: true
}));
Entonces podemos manejar los datos del formulario usando el objeto de solicitud.
Paso 2: Obtenga los registros de los estudiantes: Tenemos una variedad de estudiantes con diferentes propiedades. Enviemos la array a nuestra página web. En el paso anterior, solo enviamos un valor a la variable, ahora estamos enviando la array completa.
Javascript
const express = require('express')
const bodyParser = require('body-parser')
const students = [{
name: "Aditya Gupta",
rollNo: 413020,
dataOFBirth: "29/09/2000",
city: "Mirzapur",
number: 6388339966,
fatherNumber: 6388339977,
roomNo: 23,
hostelName: "BH-2"
}]
const app = express()
app.set('view engine', 'ejs')
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}))
app.get("/", function (req, res) {
res.render("home", {
data: students
})
})
app.listen(3000, (req, res) => {
console.log("App is running on port 3000")
})
Dado que tenemos tantos elementos dentro de nuestra array y tenemos que imprimir cada uno de ellos, tenemos que usar For Each Loop para recorrer cada elemento dentro de nuestra colección y mostrar los detalles.
HTML
<!DOCTYPE html>
<html>
<head>
<title>LMS</title>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h1>All Books</h1>
<table>
<tr>
<th>Name</th>
<th>Roll No.</th>
<th>Room No.</th>
<th>Hostel Name</th>
</tr>
<% data.forEach(element=> { %>
<tr>
<td>
<%= element.name %>
</td>
<td>
<%= element.rollNo %>
</td>
<td>
<%= element.roomNo %>
</td>
<td>
<%= element.hostelName %>
</td>
</tr>
<% }) %>
</table>
</body>
</html>
Paso 3: agregue estudiantes a la lista: para esto, debemos crear un formulario y manejar los datos del formulario dentro de nuestro archivo ‘app.js’ usando Body Parser.
<form action="/" method="post">
<input type="text" placeholder="Name" name="name">
<input type="text" placeholder="Roll No." name="rollNo">
<input type="text" placeholder="DOB" name="dateOfBirth">
<input type="text" placeholder="City" name="city">
<input type="text" placeholder="Number" name="number">
<input type="text" placeholder="Father's Number" name="fatherNumber">
<input type="text" placeholder="Room No." name="roomNo">
<input type="text" placeholder="Hostel Name" name="hostelName">
<button type="submit">Add</button>
</form>
Manejar datos de formulario dentro de ‘app.js’: tenemos que obtener valores de un formulario usando req.body.valueName, y luego organizarlo como un objeto y empujarlo dentro de la array de nuestro estudiante.
app.post("/", (req, res) => {
const name = req.body.name
const rollNo = req.body.rollNo
const dateOfBirth = req.body.dateOfBirth
const city = req.body.city
const number = req.body.number
const fatherNumber = req.body.fatherNumber
const roomNo = req.body.roomNo
const hostelName = req.body.hostelName
students.push({
name: name,
rollNo: rollNo,
dateOfBirth: dateOfBirth,
city: city,
number: number,
fatherNumber: fatherNumber,
roomNo: roomNo,
hostelName: hostelName
})
res.render("home", {
data: students
})
})
Paso 4: Más información: Actualización de la página web dando una opción ‘más’ : Tenemos que crear un formulario que envíe al estudiante el número de lista de los datos que queremos obtener del archivo del servidor ‘app.js’.
<form action="/information" method="post">
<input type="number" style="display: none;"
name="rollNo" value="<%= element.rollNo %>">
<button type="submit">More Info.</button>
</form>
Para obtener información sobre los estudiantes, debemos crear una ruta de información en la que vamos a obtener el número de registro del estudiante solicitado y buscar el elemento que tiene el mismo número de registro, y enviar todos los datos sobre ese estudiante a la página web en JSON.
app.post('/information', (req, res) => {
var requestedRollNo = req.body.rollNo;
students.forEach(student => {
if (student.rollNo == requestedRollNo) {
res.json(student)
}
})
})
Paso 5: Actualizar número de salón: Actualización de la página web dando una opción de ‘actualización’ : Tenemos que crear un formulario que envíe el número de lista del estudiante, qué número de salón queremos actualizar y el nuevo número de salón al archivo del servidor ‘app.js’ .
<form action="/update" method="post">
<input type="number" style="display: none;"
name="rollNo" value="<%= element.rollNo %>">
<input type="number" name="newroomno">
<button type="submit">Update</button>
</form>
Para actualizar el número de habitación, tenemos que crear una ruta actualizada donde vamos a obtener el número de lista del estudiante y buscar el elemento que tiene el número de lista, y cambiar la propiedad del número de habitación del elemento al valor obtenido del formulario de actualización.
app.post('/update', (req, res) => {
var requestedRollNo = req.body.rollNo;
var newRoomNo = req.body.newroomno;
students.forEach(student => {
if (student.rollNo == requestedRollNo) {
student.roomNo = newRoomNo;
}
})
res.render("home", {
data: students
})
})
Paso 6: Eliminar registro: Actualización de la página web dando una opción de eliminación: Tenemos que crear un formulario que envíe el número de registro del estudiante que queremos eliminar al archivo del servidor ‘app.js’.
<form action="/delete" method="post">
<input type="number" style="display: none;"
name="rollNo" value="<%= element.rollNo %>">
<button type="submit">Delete</button>
</form>
Para eliminar un estudiante, tenemos que crear una ruta de eliminación en la que vamos a obtener el número de lista del estudiante solicitado y buscar el elemento que tiene el mismo número de lista y eliminar el elemento.
app.post('/delete', (req, res) => {
var requestedRollNo = req.body.rollNo;
var j = 0;
students.forEach(students => {
j = j + 1;
if (students.rollNo === requestedRollNo) {
students.splice((j - 1), 1)
}
})
res.render("home", {
data: students
})
})
Código completo:
index.ejs
HTML
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h1>All Students</h1>
<table>
<tr>
<th>Name</th>
<th>Roll No.</th>
<th>Room No.</th>
<th>Hostel Name</th>
<th>More Info.</th>
<th>Update Room No.</th>
<th>Delete</th>
</tr>
<% data.forEach(element=> { %>
<tr>
<td>
<%= element.name %>
</td>
<td>
<%= element.rollNo %>
</td>
<td>
<%= element.roomNo %>
</td>
<td>
<%= element.hostelName %>
</td>
<td>
<form action="/information" method="post">
<input type="number" style="display: none;"
name="rollNo" value="<%= element.rollNo %>">
<button type="submit">More Info.</button>
</form>
</td>
<td>
<form action="/update" method="post">
<input type="number" style="display: none;"
name="rollNo" value="<%= element.rollNo %>">
<input type="number" name="newroomno">
<button type="submit">Update</button>
</form>
</td>
<td>
<form action="/delete" method="post">
<input type="number" style="display: none;"
name="rollNo" value="<%= element.rollNo %>">
<button type="submit">Delete</button>
</form>
</td>
</tr>
<% }) %>
</table>
<h1>Add Student</h1>
<form action="/" method="post">
<input type="text" placeholder="Name" name="name">
<input type="number" placeholder="Roll No." name="rollNo">
<input type="text" placeholder="DOB" name="dateOfBirth">
<input type="text" placeholder="City" name="city">
<input type="number" placeholder="Number" name="number">
<input type="number" placeholder="Father's Number"
name="fatherNumber">
<input type="number" placeholder="Room No." name="roomNo">
<input type="text" placeholder="Hostel Name" name="hostelName">
<button type="submit">Add</button>
</form>
</body>
</html>
aplicación.js
Javascript
const express = require('express')
const bodyParser = require('body-parser')
const students = [{
name: "Aditya Gupta",
rollNo: 413020,
dateOfBirth: "29/09/2000",
city: "Mirzapur",
number: 6388339966,
fatherNumber: 6388339977,
roomNo: 23,
hostelName: "BH-2"
}]
const app = express()
app.set('view engine', 'ejs')
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}))
app.get("/", function (req, res) {
res.render("home", {
data: students
})
})
app.post("/", (req, res) => {
const name = req.body.name
const rollNo = req.body.rollNo
const dateOfBirth = req.body.dateOfBirth
const city = req.body.city
const number = req.body.number
const fatherNumber = req.body.fatherNumber
const roomNo = req.body.roomNo
const hostelName = req.body.hostelName
students.push({
name: name,
rollNo: rollNo,
dateOfBirth: dateOfBirth,
city: city,
number: number,
fatherNumber: fatherNumber,
roomNo: roomNo,
hostelName: hostelName
})
res.render("home", {
data: students
})
})
app.post('/information', (req, res) => {
var requestedRollNo = req.body.rollNo;
students.forEach(student => {
if (student.rollNo == requestedRollNo) {
res.json(student)
}
})
})
app.post('/update', (req, res) => {
var requestedRollNo = req.body.rollNo;
var newRoomNo = req.body.newroomno;
students.forEach(student => {
if (student.rollNo == requestedRollNo) {
student.roomNo = newRoomNo;
}
})
res.render("home", {
data: students
})
})
app.post('/delete', (req, res) => {
var requestedRollNo = req.body.rollNo;
var j = 0;
students.forEach(student => {
j = j + 1;
if (student.rollNo === requestedRollNo) {
students.splice((j - 1), 1)
}
})
res.render("home", {
data: students
})
})
app.listen(3000, (req, res) => {
console.log("App is running on port 3000")
})
Producción:
