Guía 18

Guía 18

DAWM / Proyecto04

</link>

Actividades previas

Schema DB

  1. Descargue el archivo security.
  2. Acceda a MySQL Workbench y ejecute el script.

  3. Obtenga el diagrama entidad-relación de la base en la opción: Database > Reverse engineer

CRUD UI

  1. Descargue el archivo template_crud. Fuente: Tutorial Republic - Snippets

  2. Compruebe el funcionamiento de las ventanas modales con las Add User, Edit y Delete.

Módulos globales

  1. Instale los módulos mysql2, express-generator, express-cli, sequelize, sequelize-cli y sequelize-auto de manera global.

     npm i -g mysql2 express-generator express-cli sequelize sequelize-cli sequelize-auto

  2. Compruebe el funcionamiento de los comandos, con:

     express --help
 sequelize-cli --help
 sequelize-auto --help

    NOTA: En caso de no obtener una respuesta de los comandos, consulte la sección de errores No se reconoce como comando.

Actividades en clases

Github

  1. Cree un repositorio en GitHub con el nombre security.
  2. Asegúrese de marcar la opción Add .gitignore y seleccione la opción Node.
  3. Clone y acceda a la carpeta en el directorio local.

Express - Proyecto Base

  1. Dentro de la carpeta security, mediante la línea de comandos:

    • Inicialice un proyecto en Express, con:
     express --view=ejs .
    • Instale localmente los módulos sequelize (ORM para acceder a la BD mediante Objetos), mysql2, dotenv y nodemon.
     npm install --save sequelize mysql2 dotenv nodemon

  2. Agregue el script autostart en ./package.json.

     ...
   "scripts": {
     "start": "node ./bin/www",
     "autostart": "nodemon ./bin/www"
   },
 ...

  3. Desde la línea de comandos, inicie el servidor:

     npm run autostart
  4. Compruebe la salida de la URL http://localhost:3000/users
  5. (STOP 1) Versiona local y remotamente el repositorio security.

Express - Archivos estáticos y Vistas

  1. Coloque los archivos estáticos:
    • ‘crud-style.css’ dentro de la carpeta ‘security/public/stylesheets’.
    • ‘crud-javascript.js’ dentro de la carpeta ‘security/public/javascripts’.

  2. Cree el archivo ‘security/views/crud.ejs’. Copie todo el contenido de test.html dentro de ‘security/views/crud.ejs’.

  3. Edite la vista ‘security/views/crud.ejs’, con:

    • Coloque la ruta a la carpeta con los archivos estáticos.
     ...
 <!-- 1. Referencia al archivo estático dentro de public -->

 <!-- <link rel="stylesheet" href="./crud-style.css"> -->
 <link rel="stylesheet" href="stylesheets/crud-style.css">
    
 ...
    
 <!-- 2. Referencia al archivo estático dentro de public -->

 <!-- <script src="./crud-javascript.js" defer></script> -->
 <script src="javascripts/crud-javascript.js" defer></script>
 ...

  4. Edite el enrutador ‘security/routes/users.js’, con:

    • El nombre de la vista, sin la extensión ‘ejs’.
     ...

 /* GET users listing. */
 router.get('/', function(req, res, next) {
    
   /* 1. Renderización de la vista crud.ejs */
   res.render('crud');
    
 });

 module.exports = router;
  5. Compruebe la salida de la URL http://localhost:3000/users
  6. (STOP 2) Versiona local y remotamente el repositorio security.

Express - Users.findAll

  1. Dentro de la carpeta security, mediante la línea de comandos:

    • Genere los archivos de configuración de Sequelize, con:
     sequelize init
    • Reconstruya los modelos con las credenciales de acceso al motor de bases de datos, con:
     sequelize-auto -h 127.0.0.1 -d security  -p 3306 -u <USUARIO_ADMIN> -x <CONTRASEÑA>

  2. Modifique el archivo ‘config/config.json’, en el ambiente development, con las credenciales de acceso al motor de bases de datos.

     "development": {
   "username": "<USUARIO_ADMIN>",
   "password": "<CONTRASEÑA>",
   "database": "security",
   "host": "127.0.0.1",
   "dialect": "mysql"
 }

  3. Edite el enrutador ‘security/routes/users.js’, con:

    • Configuración de conexión (en ‘models/index.js’),
    • Estructura de modelos (de ‘models/init-models’),
    • Carga los modelos de acuerdo con la configuración de la conexión,
    • Cargar la colección de usuarios mediante el método findAll.
    • Pasar la colección de usuarios a la vista.
     ...
 var express = require('express');
 var router = express.Router();

 /* 1. Cargue los modelos de acuerdo con la configuración de la conexión */
 const sequelize = require('../models/index.js').sequelize;
 var initModels = require("../models/init-models");
 var models = initModels( sequelize );  

 /* GET users listing. */
 /* 2. Convierta el callback en asíncrono */
 router.get('/', async function(req, res, next) {

   /* 3. Uso del método findAll */
   let usersCollection = await models.users.findAll({ })

   /* 4. Paso de parámetros a la vista */
   res.render('crud', { title: 'CRUD with users', usersArray: usersCollection });

 });

 module.exports = router;

  4. Edite la vista ‘security/views/crud.ejs’, con:

    • La renderización de las variables mediante las etiquetas <%= %> y <% %>, de EJS.
     ...
 <!-- 3. Título de la página -->
 <title><%= title %></title>
 ...
 <!-- 4. Título de la tabla -->
 <h2><%= title %></h2>
 ...
 <!-- 5. Arreglo de usuarios -->
 <tbody>
     <% usersArray.forEach( user => { %>
     <tr>
         <td>
             <span class="custom-checkbox">
                 <input type="checkbox" id="checkbox1"
                     name="options[]" value="1">
                 <label for="checkbox1"></label>
             </span>
         </td>
         <td><%= user.iduser %></td>
         <td><%= user.name %></td>
         <td>
             <!-- 
                 Dato relacionado

                 users->users_roles->roles.name
              -->
         </td>
         <td>
             <a href="#editEmployeeModal" class="edit"
                 data-toggle="modal"><i
                     class="material-icons"
                     data-toggle="tooltip"
                     title="Edit">&#xE254;</i></a>
             <a href="#deleteEmployeeModal"
                 class="delete" data-toggle="modal"><i
                     class="material-icons"
                     data-toggle="tooltip"
                     title="Delete">&#xE872;</i></a>
         </td>
     </tr>
     <% }) %>
 </tbody>

  5. Compruebe la salida de la URL http://localhost:3000/users

  6. (STOP 3) Versiona local y remotamente el repositorio security.

Actividad en grupo

En grupos de tres (3) personas, completen el diagrama de secuencia de un requerimiento GET exitoso.

Documentación

Fundamental

Términos

Sequelize, ORM, archivos estáticos, vista, enrutador, modelo, renderización, encriptación, SALT

Referencias