En este artículo, vamos a crear un sistema de gestión de bibliotecas. Un sistema de gestión de bibliotecas se utiliza básicamente para administrar el registro de libros de una biblioteca, donde un bibliotecario puede ver todos los libros disponibles, agregar nuevos libros, eliminar libros, publicar libros y devolver libros.
Funcionalidades: Un bibliotecario puede hacer lo siguiente con este Sistema de Gestión de Bibliotecas:
- Mostrar libros disponibles
- Añadir nuevos libros
- Eliminar libros
- Emitir libros
- Devolver Libros
Enfoque: Vamos a utilizar Body Parser mediante el cual podemos capturar los valores de entrada del usuario desde el formulario, como el nombre del libro, el nombre del autor, las páginas y el precio, y almacenarlos en una colección. Luego vamos a enviar los datos del libro 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 borrado para borrar libros, una Ruta de emisión para emitir los libros y una Ruta de devolución para devolver los libros.
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 el EJS como el motor de visualización 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: Obtener libros disponibles: Tenemos una variedad de libros 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 books = [{
bookName: "Rudest Book Ever",
bookAuthor: "Shwetabh Gangwar",
bookPages: 200,
bookPrice: 240,
bookState: "Available"
},
{
bookName: "Do Epic Shit",
bookAuthor: "Ankur Wariko",
bookPages: 200,
bookPrice: 240,
bookState: "Available"
}
]
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: books
})
})
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>ChatRoom</title>
</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>
<body>
<h1>All Books</h1>
<table>
<tr>
<th>Book Name</th>
<th>Book Author</th>
<th>Book Pages</th>
<th>Book Price</th>
<th>Book Availability</th>
<th>Issue</th>
<th>Return</th>
<th>Delete</th>
</tr>
<% data.forEach(element=> { %>
<tr>
<td>
<%= element.bookName %>
</td>
<td>
<%= element.bookAuthor %>
</td>
<td>
<%= element.bookPages %>
</td>
<td>
<%= element.bookPrice %>
</td>
<td>
<%= element.bookState %>
</td>
</tr>
<% }) %>
</table>
</body>
</html>
Paso 3: agregue libros 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="Book Name"
name="bookName">
<input type="text" placeholder="Book Author"
name="bookAuthor">
<input type="text" placeholder="Book Pages"
name="bookPages">
<input type="text" placeholder="Book Price"
name="bookPrice">
<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 libro.
app.post("/", (req, res) => {
const inputBookName = req.body.bookName
const inputBookAuthor = req.body.bookAuthor
const inputBookPages = req.body.bookPages
const inputBookPrice = req.body.bookPrice
books.push({
bookName: inputBookName,
bookAuthor: inputBookAuthor,
bookPages: inputBookPages,
bookPrice: inputBookPrice,
bookState: "Available"
})
res.render("home", {
data: books
})
})
Paso 4: Emitir libros: actualizar la página web dando una opción de emisión: tenemos que crear un formulario que envíe el nombre del libro que queremos emitir al archivo del servidor ‘app.js’.
<form action="/issue" method="post">
<input type="text" style="display: none;"
name="bookName" value="<%= element.bookName %>">
<button type="submit">Issue</button>
</form>
Para emitir un libro, tenemos que crear una ruta de emisión donde vamos a obtener el nombre del libro solicitado y buscar el elemento que tiene el mismo nombre de libro, y cambiar la propiedad de estado del elemento a Emitido .
app.post('/issue', (req, res) => {
var requestedBookName = req.body.bookName;
books.forEach(book => {
if (book.bookName == requestedBookName) {
book.bookState = "Issued";
}
})
res.render("home", {
data: books
})
})
Paso 5: Devolver libros: Actualización de la página web dando una opción de devolución: Tenemos que crear un formulario que envíe el nombre del libro que queremos devolver al archivo del servidor ‘app.js’.
<form action="/return" method="post">
<input type="text" style="display: none;"
name="bookName" value="<%= element.bookName %>">
<button type="submit">Return</button>
</form>
Para devolver un libro, tenemos que crear una ruta de retorno donde vamos a obtener el nombre del libro solicitado y buscar el elemento que tiene el mismo nombre de libro, y cambiar la propiedad de estado del elemento a Disponible.
app.post('/return', (req, res) => {
var requestedBookName = req.body.bookName;
books.forEach(book => {
if (book.bookName == requestedBookName) {
book.bookState = "Available";
}
})
res.render("home", {
data: books
})
})
Paso 6: Eliminar libros: actualizar la página web dando una opción de eliminación: tenemos que crear un formulario que envíe el nombre del libro que queremos eliminar al archivo del servidor ‘app.js’.
<form action="/delete" method="post">
<input type="text" style="display: none;"
name="bookName" value="<%= element.bookName %>">
<button type="submit">Delete</button>
</form>
Para eliminar un libro, tenemos que crear una ruta de eliminación donde vamos a obtener el nombre del libro solicitado y buscar el elemento que tiene el mismo nombre de libro, y eliminar el elemento.
app.post('/delete', (req, res) => {
var requestedBookName = req.body.bookName;
var j = 0;
books.forEach(book => {
j = j + 1;
if (book.bookName == requestedBookName) {
books.splice((j - 1), 1)
}
})
res.render("home", {
data: books
})
})
Ejemplo: a continuación se muestra el código completo para crear un sistema de gestión de bibliotecas con Node.js:
app.js
const express = require('express')
const bodyParser = require('body-parser')
const books = [{
bookName: "Rudest Book Ever",
bookAuthor: "Shwetabh Gangwar",
bookPages: 200,
bookPrice: 240,
bookState: "Available"
},
{
bookName: "Do Epic Shit",
bookAuthor: "Ankur Wariko",
bookPages: 200,
bookPrice: 240,
bookState: "Available"
}
]
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: books
})
})
app.post("/", (req, res) => {
const inputBookName = req.body.bookName
const inputBookAuthor = req.body.bookAuthor
const inputBookPages = req.body.bookPages
const inputBookPrice = req.body.bookPrice
books.push({
bookName: inputBookName,
bookAuthor: inputBookAuthor,
bookPages: inputBookPages,
bookPrice: inputBookPrice,
bookState: "Available"
})
res.render("home", {
data: books
})
})
app.post('/issue', (req, res) => {
var requestedBookName = req.body.bookName;
books.forEach(book => {
if (book.bookName == requestedBookName) {
book.bookState = "Issued";
}
})
res.render("home", {
data: books
})
})
app.post('/return', (req, res) => {
var requestedBookName = req.body.bookName;
books.forEach(book => {
if (book.bookName == requestedBookName) {
book.bookState = "Available";
}
})
res.render("home", {
data: books
})
})
app.post('/delete', (req, res) => {
var requestedBookName = req.body.bookName;
var j = 0;
books.forEach(book => {
j = j + 1;
if (book.bookName == requestedBookName) {
books.splice((j - 1), 1)
}
})
res.render("home", {
data: books
})
})
app.listen(3000, (req, res) => {
console.log("App is running on port 3000")
})
home.ejs
<!DOCTYPE html>
<html>
<head>
<title>LMS</title>
</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>
<body>
<h1>All Books</h1>
<table>
<tr>
<th>Book Name</th>
<th>Book Author</th>
<th>Book Pages</th>
<th>Book Price</th>
<th>Book Availability</th>
<th>Issue</th>
<th>Return</th>
<th>Delete</th>
</tr>
<% data.forEach(element=> { %>
<tr>
<td>
<%= element.bookName %>
</td>
<td>
<%= element.bookAuthor %>
</td>
<td>
<%= element.bookPages %>
</td>
<td>
<%= element.bookPrice %>
</td>
<td>
<%= element.bookState %>
</td>
<td>
0 <form action="/issue" method="post">
<input type="text" style="display: none;"
name="bookName"
value="<%= element.bookName %>">
<button type="submit">Issue</button>
</form>
</td>
<td>
<form action="/return" method="post">
<input type="text" style="display: none;"
name="bookName"
value="<%= element.bookName %>">
<button type="submit">Return</button>
</form>
</td>
<td>
<form action="/delete" method="post">
<input type="text" style="display: none;"
name="bookName"
value="<%= element.bookName %>">
<button type="submit">Delete</button>
</form>
</td>
</tr>
<% }) %>
</table>
<h1>Add Book</h1>
<form action="/" method="post">
<input type="text" placeholder="Book Name"
name="bookName">
<input type="text" placeholder="Book Author"
name="bookAuthor">
<input type="text" placeholder="Book Pages"
name="bookPages">
<input type="text" placeholder="Book Price"
name="bookPrice">
<button type="submit">Add</button>
</form>
</body>
</html>
Producción:
