Scribd
Cargar
87 vistas

CRUD Javascript Express - Mysql

El documento presenta una introducción al desarrollo de una aplicación CRUD (crear, leer, actualizar, eliminar) con Node.js, Express y MySQL. Explica cómo instalar las dependencias necesarias, crear la base de datos y tablas, y programar las rutas y controladores para permitir el CRUD de registros. Además, muestra cómo agregar Bootstrap para dar estilo y cargar imágenes.

Cargado por

KATHERINE ODALYS AGUILAR ESCOBAR
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
87 vistas

CRUD Javascript Express - Mysql

El documento presenta una introducción al desarrollo de una aplicación CRUD (crear, leer, actualizar, eliminar) con Node.js, Express y MySQL. Explica cómo instalar las dependencias necesarias, crear la base de datos y tablas, y programar las rutas y controladores para permitir el CRUD de registros. Además, muestra cómo agregar Bootstrap para dar estilo y cargar imágenes.

Cargado por

KATHERINE ODALYS AGUILAR ESCOBAR
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 65

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/[email protected]/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

También podría gustarte