ClubEnsayos.com - Ensayos de Calidad, Tareas y Monografias
Buscar

Laboratorio de Desarrollo de Aplicaciones Web

channell5604Apuntes6 de Septiembre de 2023

2.144 Palabras (9 Páginas)89 Visitas

Página 1 de 9

[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.

...

Descargar como (para miembros actualizados) txt (13 Kb) pdf (221 Kb) docx (234 Kb)
Leer 8 páginas más »
Disponible sólo en Clubensayos.com