AGENDA
• BIENVENIDA Y REFLEXIÓN
• CRUD Node.js – Express - Mysql
• Cierre
CRUD JAVASCRIT CON FRAMEWORD EXPRESS NODE.JS - MYSQL
Versiones instaladas
• Node.js: Node –v
Node.js XAMPP
• NPM – v Extensiones a ocupar
expressjs
No se puede ejecutar este script en el
sistema actual
Solución:
Comandos –
Get-ExecutionPolicy -list
set-ExecutionPolicy RemoteSigned –Force
Ir a Regedit
gpedit.msc
Video: https://www.youtube.com/watch?
v=gm0gexHWDy0&ab_channel=Onslaugth
Administrador de plantillas
Componentes de
Windows
Windows Powershell
Clic derecho sobre activar la
ejecución de scrits
Opción editar
Cambiar la opción a Habilitada
Cambiar la opción :
Permitir solo scrits firmados
Instalar express
• npm install express --save
• npm install express-generator -g para que ordene todo nuestro
proyecto.
Motor de Plantilla instalar en consola
express - -view=ejs
Todo lo que se re quiere en el proyecto se instala con los comandos den
la consola:
npm install
NPM
START
Código para correr en el servidor
Instalar nodemon guardar autimaticamente
los cambios en el proyecto
npm install nodemon -g
BASE DE DATOS
NPM INSTALL MYSQL
http://localhost/phpmyadmin/
CREAR BASE DE DATOS EN MYSQL
Nombre: Librería_BD
Tabla: libro con 3 campos: id, nombre, imagen
Crear una carpeta llamada config en el árbol
de carpetas del proyecto
• Crear un archivo llamado conexion.js
Crear una carpeta en Views
• Escribirle el nombre de la carpeta dentro de views libros
cambiamos el index.js de
routes
Resultado
“OJO” Instalar el módulo de npm install mysql
Agregamos datos a la base de datos en la
tabla libros:
presionamos continuar,
Listo!
Routes = index.js
Controllers = librosController.js
Corremos con nodemon start en la terminal
Resultados:
digitamos en el navegador
localhost:3000
CREANDO EL
MODEL
Crear el modelo
Creamos la carpeta model y el archivo de texto libro.js
Controllers actualizado en libroController.js
Creando nuestras
Propias rutas
Creamos dentro de la carpeta routes
• Creamos el archivo libros.js
Copiamos lo que hay en lo que existe en
index.js de la carpeta routes
Carpeta Routes: libros.js
Modificamos el App.js Agregamos esta
línea de código
Agregamos esta
línea de código
Agregamos esta
ruta al navegador
• Modificados el index.js del routes
Vamos a dejar libre el index.js de las
rutas para inicio de sesión
Instalar la extensión de bootstraps
Motor de plantilla Bootstrap
Copiar el código de l pagina de boostrar a la pagina index.ejs de la vista, en la carpeta libro
<link rel ="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-
xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+
N" crossorigin ="anonymous">
index.ejs de la vista libros que está dentro de
la carpeta libros.
Modificamos el libroController.js
Agregamos este código
index.ejs de vistas de la carpeta libros
Resultado
agregamos en index.ejs un <div
class=”container”>
Creamos un botón para registrar
botón para crear
registros
Creamos un archivo dentro de views, libros
crear.ejs
Creamos la nueva ruta para la página crear
Modificamos controllers librosController.js
Resultado
Crear un Layouts en la carpeta vista
• encabezado.ejs
• pie.ejs
• encabezado.ejs
Crear un Layouts en la carpeta vista
• encabezado.ejs
• pie.ejs
• pie.ejs
Agregar código
index.ejs queda así :
Agregar código
actualizamos crear.ejs Agregar código
Agregar código
Recepcionar datos de crear.ejs
Agregar esta ruta
en crear.ejs
modificamos la ruta de libros.js
Instalar body parse en la terminal
• npm install body-parser –g
Actualizar el app.js
Agregar código
Agregar código
Modificamos el controller, librosController.js
Agregar código
Resultado
Sentencia para modificar el modelo libro.js
Modificamos el controller, librosController.js
Agregar código
Resultado
Guardar la imagen en repositorio routes:
libros.js
Agregamos en Vista: crear.ejs
Agregar código
modificamos librosController.js
Agregar código
Modificamos libro.js del model
Agregar código Agregar código
Resultado
Para cargar la Imagen en el index.ejs
Resultado
Darle estilo a los botones eliminar y editar
Programar el botón Eliminar
cambiar el boton de eliminar en submit en index.ejs
Modificamos librosController.js
Agregar código
Agregar código
Modificamos la ruta libros.js
Agregar código
Modificamos la ruta libro.js del model
Agregar código
Resultado
Continúen con el botón editar
