AGENDA
• BIENVENIDA Y REFLEXIÓN
• CRUD [Link] – Express - Mysql
• Cierre
CRUD JAVASCRIT CON FRAMEWORD EXPRESS [Link] - MYSQL
Versiones instaladas
• [Link]: Node –v
[Link] 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
[Link]
Video: [Link]
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
[Link]
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 [Link]
Crear una carpeta en Views
• Escribirle el nombre de la carpeta dentro de views libros
cambiamos el [Link] 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 = [Link]
Controllers = [Link]
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 [Link]
Controllers actualizado en [Link]
Creando nuestras
Propias rutas
Creamos dentro de la carpeta routes
• Creamos el archivo [Link]
Copiamos lo que hay en lo que existe en
[Link] de la carpeta routes
Carpeta Routes: [Link]
Modificamos el [Link] Agregamos esta
línea de código
Agregamos esta
línea de código
Agregamos esta
ruta al navegador
• Modificados el [Link] del routes
Vamos a dejar libre el [Link] 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 [Link] de la vista, en la carpeta libro
<link rel ="stylesheet"
href="[Link]
integrity="sha384-
xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+
N" crossorigin ="anonymous">
[Link] de la vista libros que está dentro de
la carpeta libros.
Modificamos el [Link]
Agregamos este código
[Link] de vistas de la carpeta libros
Resultado
agregamos en [Link] un <div
class=”container”>
Creamos un botón para registrar
botón para crear
registros
Creamos un archivo dentro de views, libros
[Link]
Creamos la nueva ruta para la página crear
Modificamos controllers [Link]
Resultado
Crear un Layouts en la carpeta vista
• [Link]
• [Link]
• [Link]
Crear un Layouts en la carpeta vista
• [Link]
• [Link]
• [Link]
Agregar código
[Link] queda así :
Agregar código
actualizamos [Link] Agregar código
Agregar código
Recepcionar datos de [Link]
Agregar esta ruta
en [Link]
modificamos la ruta de [Link]
Instalar body parse en la terminal
• npm install body-parser –g
Actualizar el [Link]
Agregar código
Agregar código
Modificamos el controller, [Link]
Agregar código
Resultado
Sentencia para modificar el modelo [Link]
Modificamos el controller, [Link]
Agregar código
Resultado
Guardar la imagen en repositorio routes:
[Link]
Agregamos en Vista: [Link]
Agregar código
modificamos [Link]
Agregar código
Modificamos [Link] del model
Agregar código Agregar código
Resultado
Para cargar la Imagen en el [Link]
Resultado
Darle estilo a los botones eliminar y editar
Programar el botón Eliminar
cambiar el boton de eliminar en submit en [Link]
Modificamos [Link]
Agregar código
Agregar código
Modificamos la ruta [Link]
Agregar código
Modificamos la ruta [Link] del model
Agregar código
Resultado
Continúen con el botón editar
