Diseño y Desarrollo de
Software
BASES DE DATOS AVANZADAS
LABORATORIO N° 08
EXPRESS CRUD
Alumno(s): Chua Quispe Ebad Nota
Grupo: “A ” Ciclo: III
Requiere No
Excelente Bueno Puntaje
Criterio de Evaluación mejora acept.
(4pts) (3pts) Logrado
(2pts) (0pts)
Identifica las principales características de la
plataforma Angular y Mean
Implementa aplicaciones empleando la
plataforma Angular y Mean
Implementa aplicaciones Web empleando la
plataforma MEAN que permiten acceder
información de una base de datos MongoDB
Verifica la ejecución de programas creados en
la plataforma MEAN
Es puntual y redacta el informe
adecuadamente
Bases de Datos Avanzadas
Laboratorio 08: Express - Crud
Objetivos:
Al finalizar el laboratorio el estudiante será capaz de:
• Instalar la plataforma de software MEAN compuesta por MongoDB, Express, Angular y [Link]
• Implementar aplicaciones en la plataforma MEAN que acceden información desde MongoDB
• Verificar el funcionamiento de aplicaciones MEAN
Seguridad:
• Ubicar maletines y/o mochilas en el gabinete del aula de Laboratorio.
• No ingresar con líquidos, ni comida al aula de Laboratorio.
• Al culminar la sesión de laboratorio apagar correctamente la computadora y la pantalla, y ordenar
las sillas utilizadas.
Equipos y Materiales:
• Una computadora con:
• Windows 7 o superior
• Instalador del software MongoDB
• Instalador del software [Link]
Procedimiento:
Estructura de la aplicación:
Componentes del lado del Servidor
Controlador Modelos
MongoDB
Rutas Server
AJ AX
Lab Setup
1. Instalación e inicialización de la base de datos MongoDB
1.1. Instale el programa MongoDB en la carpeta C:\MongoDB
1.2. Inicie la instancia de MongoDB.
Componentes del lado
1.3. Restaure la base de datos Lab02 desde el archivo de backup entregado por el instructor
Cliente
([Link])
núcleo [Link]
Guía de Laboratorio No 08-09 Pág. 2
Bases de Datos Avanzadas
2. Instalación e inicialización de la plataforma [Link]
2.1. Descargar node ([Link] ).
2.2. Doble clic al archivo anterior para instalar el software.
2.3. Desde una ventana CMD y verifique la versión instalada de Nodejs:
> node -v
3. Creación de la BD
3.1. Crear [Link]
conn = new Mongo();
db = [Link]("myappdb");
[Link](
[
{nombre: 'Jaime', apellido: 'Farfan', email: 'jfarfan@[Link]',
estado:'A', created_at: new Date('01/23/2020')}
]);
3.2. Ejecutar el archivo [Link]
4. Creación de la aplicación
4.1. Genera la ruta de carpetas \nodejs\appex03 y crea el proyecto usando express
npm install express-generator -g
express --view=hbs node-hbs
Guía de Laboratorio No 08-09 Pág. 3
Bases de Datos Avanzadas
4.2. Nos ubicamos en la carpeta NODE-HBS y luego instalamos los paquetes:
npm install body-parser
npm install mongoose
npm install
4.3. Ejecutar proyecto
npm start
4.4. Agregar en el archivo [Link]
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
4.5. Agregar en el archivo [Link] Conexión a BD
** despues de var app = express();
var mongoDB = 'mongodb://[Link]:27017/myappdb';
[Link](mongoDB, {useNewUrlParser: true,
useUnifiedTopology:true});
[Link] = [Link];
var db = [Link];
[Link]('error', [Link](console, 'MongoDB connection
error:'));
Guía de Laboratorio No 08-09 Pág. 4
Bases de Datos Avanzadas
4.6. Crear la carpeta models y dentro de ella el archivo [Link], editar models/[Link]
var mongoose = require('mongoose');
var Schema = [Link];
var UsuarioSchema = new Schema({
nombre: {type: String, required: true, max: 20},
apellido: {type: String, required: true, max: 20},
email: {type: String, required: true},
estado: {type: String, required: true, max:2},
created_at: { type: Date, default: [Link] }
});
[Link] = [Link]('Usuario', UsuarioSchema);
4.7. Crear la carpeta controllers y dentro de ella el archivo [Link], Editar el
archivo controllers/[Link]
var mongoose = require('mongoose');
var Usuario = require("../models/Usuario");
var usuarioController = {};
[Link] = function(req, res){
[Link]({}).exec(function(err, usuarios){
if( err ){ [Link]('Error: ', err); return; }
[Link]("The INDEX");
[Link]('../views/usuario/index',{usuarios:
usuarios,titulo:'INDEX'} );
});
};
[Link] = function(req, res){
[Link]({_id: [Link]}).exec(function(err,
usuario){
if( err ){ [Link]('Error: ', err); return; }
[Link]('../views/usuario/show', {usuario: usuario} );
Guía de Laboratorio No 08-09 Pág. 5
Bases de Datos Avanzadas
});
};
[Link] = function(req, res){
[Link]('../views/usuario/create');
};
[Link] = function(req, res){
var usuario = new Usuario( [Link] );
[Link](function(err){
if( err ){ [Link]('Error: ', err); return; }
[Link]("Successfully created a usuario. :)");
[Link]("/usuarios/show/"+usuario._id);
//[Link]("/usuarios");
});
};
[Link] = function(req, res) {
[Link]({_id: [Link]}).exec(function (err, usuario)
{
if (err) { [Link]("Error:", err); return; }
[Link]("../views/usuario/edit", {usuario: usuario});
});
};
[Link] = function(req, res){
[Link]( [Link], {$set: {
nombre: [Link],
apellido: [Link],
email: [Link],
estado: [Link]
}}, { new: true },
function( err, usuario){
if( err ){
[Link]('Error: ', err);
[Link]('../views/usuario/edit', {usuario: [Link]}
);
}
[Link]( usuario );
[Link]('/usuarios/show/' + usuario._id);
});
};
[Link] = function(req, res){
[Link]({_id: [Link]}, function(err){
if( err ){ [Link]('Error: ', err); return; }
[Link]("Usuario deleted!");
[Link]("/usuarios");
});
};
[Link] = usuarioController;
4.8. Creación de las rutas, crear el archivo [Link] en la carpeta routes, editar
routes/[Link]
Guía de Laboratorio No 08-09 Pág. 6
Bases de Datos Avanzadas
var express = require('express');
var router = [Link]();
var usuario = require('../controllers/[Link]');
[Link]('/', [Link]);
[Link]('/show/:id', [Link]);
[Link]('/create', [Link]);
[Link]('/save', [Link]);
[Link]('/edit/:id', [Link]);
[Link]('/update/:id', [Link]);
[Link]('/delete/:id', [Link]);
[Link] = router;
4.9. Agregar en [Link], ubicar luego de ‘[Link]('/users', usersRouter)’
var usuarios = require('./routes/usuarios');
[Link]('/usuarios', usuarios);
4.10. Creación de vistas
Crear carpetas
node-hbs/
|-/views/
|-/usuario/
|-/[Link]
|-/[Link]
|-/[Link]
|-/[Link]
Guía de Laboratorio No 08-09 Pág. 7
Bases de Datos Avanzadas
4.11. Editar el archivo usuarios/[Link]
<h1>{{title}}</h1>
<h1> Usuarios</h1>
<p >
<div class="container">
<h3><a href="/usuarios/create">Crear Usuario</a></h3>
<h1>Lista de Usuarios</h1>
{{#if usuarios }}
<table class="table table-hover">
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
<th>Estado</th>
</tr>
</thead>
<tbody>
{{# each usuarios }}
<tr>
<td><a href="/usuarios/show/{{ _id }}">{{
nombre }}</a></td>
<td>{{ apellido }}</td>
<td>{{ email }}</td>
<td>{{ estado }}</td>
</tr>
{{/each}}
</tbody>
</table>
{{~^~}}
Guía de Laboratorio No 08-09 Pág. 8
Bases de Datos Avanzadas
<div>Usuarios no encontrados.</div>
{{/if}}
</div>
</p>
4.12. Editar el archivo usuarios/[Link]
<!DOCTYPE html>
<html>
<head>
<title>Crear Usuario</title>
</head>
<body>
<div class="container">
<h3><a href="/usuarios">Lista de Usuarios</a></h3>
<h1>Crear Nuevo Usuario</h1>
<form action="/usuarios/save" method="post">
<table>
<tbody>
<tr>
<td>Nombre</td>
<td><input type="text" name="nombre"
/></td>
</tr>
<tr>
<td>Apellido</td>
<td><input type="text" name="apellido"
/></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email"
/></td>
</tr>
<tr>
<td>Estado</td>
<td><input type="text" name="estado"
/></td>
</tr>
<tr>
<td colspan="2"><input type="submit"
value="Grabar" /></td>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>
4.13. Editar el archivo usuarios/[Link]
<!DOCTYPE html>
<html>
<head>
<title>Detalle de Usuario</title>
</head>
<body>
<div class="container">
<h3><a href="/usuarios">Lista de Usuarios</a></h3>
<h1>Detalle de Usuario</h1>
<table>
<tbody>
<tr>
<td>Nombre</td>
Guía de Laboratorio No 08-09 Pág. 9
Bases de Datos Avanzadas
<td>{{ [Link] }}</td>
</tr>
<tr>
<td>Apellidos</td>
<td>{{ [Link] }}</td>
</tr>
<tr>
<td>Email</td>
<td>{{ [Link] }}</td>
</tr>
<tr>
<td>Estado</td>
<td>{{ [Link] }}</td>
</tr>
</tbody>
</table>
<h3><a href="/usuarios/edit/{{ usuario._id
}}">EDIT</a></h3>
<form action="/usuarios/delete/{{ usuario._id }}"
method="post">
<button type="submit">DELETE</button>
</form>
</div>
</body>
</html>
4.14. Editar el archivo usuarios/[Link]
<!DOCTYPE html>
<html>
<head>
<title>Editar Usuario</title>
</head>
<body>
<div class="container">
<h3><a href="/usuarios">Lista de Usuarios</a></h3>
<h1>Editar Usuario</h1>
<form action="/usuarios/update/{{ usuario._id }}"
method="post">
<table>
<tbody>
<tr>
<td>Nombre</td>
<td><input type="text" name="nombre"
value="{{ [Link] }}" /></td>
</tr>
<tr>
<td>Apellido</td>
<td><input type="text" name="apellido"
value="{{ [Link] }}" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email"
value="{{ [Link] }}" /></td>
</tr>
<tr>
<td>Estado</td>
<td><input type="text" name="estado"
value="{{ [Link] }}" /></td>
</tr>
<tr>
<td colspan="2"><button
type="submit">Update</button></td>
Guía de Laboratorio No 08-09 Pág. 10
Bases de Datos Avanzadas
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>
Ejercicio:
1. Aplicando el procedimiento de los ejercicios anteriores implemente el programa de
mantenimiento para un proyecto a elección grupal.
2. Adjunte el código fuente generado para los archivos implementados
Guía de Laboratorio No 08-09 Pág. 11
Bases de Datos Avanzadas
Guía de Laboratorio No 08-09 Pág. 12
Bases de Datos Avanzadas
Guía de Laboratorio No 08-09 Pág. 13
Bases de Datos Avanzadas
Guía de Laboratorio No 08-09 Pág. 14
Bases de Datos Avanzadas
Guía de Laboratorio No 08-09 Pág. 15
Bases de Datos Avanzadas
Guía de Laboratorio No 08-09 Pág. 16
Bases de Datos Avanzadas
Guía de Laboratorio No 08-09 Pág. 17
Bases de Datos Avanzadas
Guía de Laboratorio No 08-09 Pág. 18
Bases de Datos Avanzadas
Conclusiones:
Indicar las conclusiones que llegó después de los temas tratados de manera práctica en este
laboratorio.
• Se utilizan controladores y rutas para manejar las diferentes acciones y vistas relacionadas
• con los usuarios, productos y empleados.
• Se usa MongoDB como base de datos y Mongoose para interactuar con la base de datos
• desde la aplicación [Link].
• Usamos operaciones CRUD para las diferentes colecciones. Se pueden crear nuevos
• empleados, ver detalles, editar informacion y eliminar.
• Se pasan variables desde el controlador a las plantillas para mostrar los datos
• correspondientes.
• Usamos enlaces HTML para navegar entre las diferentes paginas y formularios HTML para
• enviar datos al servidor y realizar operaciones como crear, editar o eliminar empleados.
Guía de Laboratorio No 08-09 Pág. 19
