Laboratorio de Desarrollo de Aplicaciones Web
channell5604Apuntes6 de Septiembre de 2023
2.144 Palabras (9 Páginas)90 Visitas
[pic 1] | Laboratorio de Desarrollo de Aplicaciones Web Avanzado | Página | |
[pic 2]
[pic 3]
Alumnos | Nota | |
| ||
Grupo |
| |
Fecha de Entrega |
| |
Docente | Renato Usnayo Cáceres |
DISEÑO Y DESARROLLO DE SOFTWARE
PROGRAMA DE FORMACIÓN REGULAR
OBJETIVOS:
- Realizar una simple aplicación CRUD en Node.js y MySql SEGURIDAD:
[pic 4] | Advertencia: En este laboratorio está prohibida la manipulación del hardware, conexiones eléctricas o de red; así como la ingestión de alimentos o bebidas. |
FUNDAMENTO TEÓRICO:
- Revisar el texto guía que está en el campus Virtual.
NORMAS EMPLEADAS:
- No aplica RECURSOS:
- En este laboratorio cada alumno trabajará con un equipo con Windows 10.
METODOLOGÍA PARA EL DESARROLLO DE LA TAREA:
- El desarrollo del laboratorio es grupo de 2 o 3 personas
PROCEDIMIENTO:
Nota:
[pic 5]
Las secciones en cursivas son demostrativas, pero sirven para que usted pueda instalar las herramientas de desarrollo en un equipo externo.
[pic 6]
Procedimiento:
Paso 1: Instalación de MySQL
Descarga e instala MySQL desde el sitio web oficial: https://dev.mysql.com/downloads/
Paso 2: Creación de una base de datos y una tabla en MySQL
Abre MySQL Workbench u otra herramienta de administración de MySQL.
Crea una nueva conexión y asegúrate de tener los datos de acceso correctos.
Crea una nueva base de datos ejecutando el siguiente comando:
Cambie “nombre_de_la_base_de_datos” por el nombre que usted quiera, en este caso le llamaremos “laboratorio15”
CREATE DATABASE nombre_de_la_base_de_datos;
Selecciona la base de datos recién creada y crea una nueva tabla:
Cambie “nombre_de_la_tabla” por el nombre que usted quiera, en este caso le llamaremos “alumnos”
USE nombre_de_la_base_de_datos; CREATE TABLE nombre_de_la_tabla ( id INT AUTO_INCREMENT PRIMARY KEY, columna1 VARCHAR(255), columna2 INT, columna3 VARCHAR(255)
);
[pic 7] | Laboratorio de Desarrollo de Aplicaciones Web Avanzado | Página | 2 |
Ingrese 2 datos a la base de datos, muestre una captura de los 2 datos creados
Paso 3: Configuración del proyecto Node.js
Crea una nueva carpeta para tu proyecto.
Abre una terminal y navega hasta la carpeta del proyecto.
Inicializa un nuevo proyecto de Node.js ejecutando el siguiente comando:
npm init -y
Instala el paquete mysql ejecutando el siguiente comando:
npm install mysql
Paso 4: Creación del archivo de conexión
Crea un nuevo archivo llamado conexion.js en la carpeta de tu proyecto.
Abre conexion.js con tu editor de texto o IDE favorito.
Agrega el siguiente código para importar el paquete mysql y establecer la conexión con la base de datos:
const mysql = require('mysql');
// Configuración de la conexión a MySQL const connection = mysql.createConnection({ host: 'localhost', port: 3306, user: 'usuario_de_mysql', password: 'contraseña_de_mysql', database: 'nombre_de_la_base_de_datos' }); // Conexión a la base de datos connection.connect((error) => { if (error) { console.error('Error al conectar a MySQL: ', error); return; } console.log('Conexión exitosa a MySQL'); });
// Cerrar la conexión cuando sea necesario // connection.end(); |
Recuerda que debes reemplazar 'localhost', 'usuario_de_mysql', 'contraseña_de_mysql',
'nombre_de_la_base_de_datos', 'nombre_de_la_tabla', ‘port: 3306’, y las columnas correspondientes con los valores correctos según tu configuración de MySQL.
Paso 5: Ejecución de consultas a la base de datos
En conexion.js, agrega el siguiente código para ejecutar una consulta SELECT a la tabla:
// Ejecutar una consulta SELECT connection.query('SELECT * FROM nombre_de_la_tabla', (error, results) => { if (error) { console.error('Error al ejecutar la consulta: ', error); return; } console.log('Resultados de la consulta: ', results); }); |
Recuerda que debes reemplazar 'localhost', 'usuario_de_mysql', 'contraseña_de_mysql', 'nombre_de_la_base_de_datos', 'nombre_de_la_tabla', y las columnas correspondientes con los valores correctos según tu configuración de MySQL.
[pic 8] | Laboratorio de Desarrollo de Aplicaciones Web Avanzado | Página | 4 |
Paso 6: Ejecución del proyecto Node.js Abre una terminal y navega hasta la carpeta del proyecto. Ejecuta el siguiente comando para iniciar tu aplicación Node.js: | ||
node conexion.js | ||
EN CASO DE PRESENTAR UN ERROR PROBAR LAS SIGUIENTES SOLUCIONES ------------------------------------------------------------------------------------------------------------------ Solución 1: Actualizar el cliente de MySQL Abre una terminal y navega hasta la carpeta de tu proyecto. Ejecuta el siguiente comando para instalar una versión actualizada del paquete mysql: | ||
npm install mysql@latest | ||
Esto instalará la versión más reciente del paquete mysql.
Solución 2: Cambiar el método de autenticación en el servidor de MySQL Abre MySQL Workbench u otra herramienta de administración de MySQL. Conéctate al servidor de MySQL. Ejecuta el siguiente comando para cambiar el método de autenticación del usuario: | ||
ALTER USER 'usuario_de_mysql'@'localhost' IDENTIFIED WITH mysql_native_password BY 'contraseña_de_mysql'; |
Asegúrate de reemplazar 'usuario_de_mysql' y 'contraseña_de_mysql' con los valores correctos para tu configuración.
Reinicia el servidor de MySQL.
Después de realizar las soluciones anteriores, vuelve a ejecutar tu aplicación Node.js
------------------------------------------------------------------------------------------------------------------
Mostrar una captura de los datos de la base de datos mostrados por consola
[pic 9]
Ahora vamos a mostrar una interfaz de usuario y permitir la visualización y agregación de datos, necesitarás utilizar un framework o biblioteca de Node.js para crear una aplicación web. Utilizaremos Express.js junto con Pug (anteriormente conocido como Jade) como motor de plantillas para crear una interfaz simple.
Asegúrate de tener Express.js instalado en tu proyecto. Si no lo tienes instalado, puedes hacerlo ejecutando el siguiente comando en la terminal:
npm install express
Paso 1: Crear una carpeta "views" y una carpeta "public" En la carpeta de tu proyecto, crea una carpeta llamada "views".
Dentro de la carpeta "views", crea un archivo llamado "index.pug".
Crea una carpeta llamada "public" en la raíz de tu proyecto.
Paso 2: Configurar Express.js y Pug
Abre el archivo "conexion.js" en tu editor de texto o IDE.
...