Laboratorio: Computación en el Servidor Web

Integrantes:
Orlando Tovar Valencia
Daniel Fabián Linares Cortés
Lizzeth Juliana González Durán
Jonathan Andrés Pillajo Coka

Profesor:
Javier Cubo Villalba

Universidad Internacional de La Rioja

2020
 Asignatura Datos del alumno Fecha
Computación en el Servidor Apellidos: Tovar Valencia
08-01-2020
Web Nombre: Orlando

Actividades
Laboratorio #1: Manejo de datos en el servidor e interacción
con el cliente mediante una aplicación web

Preparación del laboratorio

Para la realización de este laboratorio necesitas tener correctamente instalado el

XAMPP, así como un editor de texto, preferentemente, con resaltado sintáctico, tal
como hemos indicado a lo largo de la asignatura.

Descripción del laboratorio

En este laboratorio se pretende diseñar y desarrollar una aplicación web. La

finalidad es practicar los conocimientos adquiridos en la asignatura hasta el
momento, principalmente los relacionados con el acceso a bases de datos y la
interacción con el cliente, así como el diseño mediante la arquitectura de
aplicaciones web usando el patrón Modelo Vista Controlador (MVC). Para ello, se
puede partir del desarrollo web realizado en el anterior Trabajo, o bien partir de un
nuevo/diferente desarrollo web.

Los objetivos requeridos en el laboratorio son los siguientes:

» Diseño de la solución haciendo uso del patrón MVC (en caso de dificultad en su
uso, se puede utilizar otro diseño y también se valorará, aunque para alcanzar la
máxima puntuación será requerido el uso de MVC).
» Inclusión de formularios y tratamiento de datos en el lado del servidor.
» Conexión, consulta, inserción, actualización y borrado de datos. Se valorará
positivamente que se usen otros atributos de my_ sqli.
» Uso de clases, valorando positivamente la herencia.

Actividad No 2
 Asignatura Datos del alumno Fecha
Computación en el Servidor Apellidos: Tovar Valencia
08-01-2020
Web Nombre: Orlando

» Entrega del laboratorio

Se deberá entregar el código implementado, incluyendo todos los ficheros

necesarios para poder probar la funcionalidad requerida. Además, se deberá
entregar una memoria técnica de la actividad, detallando los aspectos
relacionados con el diseño de la solución haciendo uso del patrón MVC (en caso de
aplicarlo), los formularios, el acceso a la base de datos, y el uso de clases.
Igualmente, se solicita la entrega de capturas de imágenes que muestren
resultados del desarrollo. Recuerda que es importante mantener un buen estilo
de programación e incluir comentarios en los desarrollos.

Desarrollo de la Actividad

Laboratorio #2: Aplicación web con PHP bajo el patrón de

diseño MVC.

Herramientas y aplicaciones utilizadas:

Para el desarrollo del laboratorio No 2, se utilizaron las siguientes herramientas:

● XAMPP, el cual es un paquete de software libre, que consiste principalmente

en el sistema de gestión de bases de datos MySQL, el servidor web Apache y
los intérpretes para lenguajes de script PHP y Perl.

● Visual Studio Code: este es un editor de código fuente desarrollado por

Microsoft para Windows , Linux y macOS. Incluye soporte para la
depuración, control integrado de Git, resaltado de sintaxis, finalización
inteligente de código, fragmentos y refactorización de código.

Actividad No 2
 Asignatura Datos del alumno Fecha
Computación en el Servidor Apellidos: Tovar Valencia
08-01-2020
Web Nombre: Orlando

Diseño de la base de datos

Para el desarrollo de la actividad se creó y diseñó la base de datos con MariaDB, las
tablas resultantes para la aplicación son las siguientes:

Tablas:
- Cursos: Tabla que contiene los cursos, los cuales son configurados con su
fecha de inicio, fecha final del curso, su intensidad en cantidad de horas, el
lugar donde se va a impartir el curso, el tipo de curso y el municipio donde se
va a aplicar.
- Usuarios: Tabla que contiene los usuarios que puede ingresar al sistema.
- Tipo: Tipo de curso a impartir
- Municipios: Municipio donde si impartirá el curso
- Departamentos: Tabla departamento, la cual es la que relaciona con la
tabla municipios.

Diseño del patrón de diseño MVC

Como parte del desarrollo de la actividad No 2, se procedió a crear el patrón MVC de

forma manual, creando los propios Modelos, Vistas y Controladores, creando la
siguiente arquitectura de carpetas para el proyecto:

Actividad No 2
 Asignatura Datos del alumno Fecha
Computación en el Servidor Apellidos: Tovar Valencia
08-01-2020
Web Nombre: Orlando

Ingeniería de la Aplicación:

Diagrama de Componentes:

Diagrama de Clases:

Actividad No 2
 Asignatura Datos del alumno Fecha
Computación en el Servidor Apellidos: Tovar Valencia
08-01-2020
Web Nombre: Orlando

Desarrollo de la Aplicación:

Lo primero que se desarrolló fue el sistema de login para la aplicación, para esto se
trabajó con la tabla de usuarios, verificando que el usuario que se intenta logear en
el sistema se encuentra registrado en la tabla.

Login de la aplicación

Para la autenticación de los usuarios se trabaja con la vista ‘login.php’, la cual se

comunica con el controlador ‘Controlador_Login.php’ y este a su vez con el
modelo ‘Modelo_login.php’, el funcionamiento es el siguiente:

Archivo login.php, código para el llamado del controlador y validación de usuario y contraseña

Actividad No 2
 Asignatura Datos del alumno Fecha
Computación en el Servidor Apellidos: Tovar Valencia
08-01-2020
Web Nombre: Orlando

Dentro de la vista, realizamos una instancia ‘New’ al controlador para enviarle dos
parámetros, el usuario y la contraseña:

$autenticado = $autenticar->autenticarUsuario($usuario, $contrasena);

Dentro del controlador son recibidos estos parámetros, a la contraseña se le crea el

hash en md5, se instancia el modelo y se envía el usuario y la contraseña encriptada.

Archivo Controlador_Login.php, código que genera el hash a la contraseña y envía a consultar al

modelo

Una vez realizada la consulta desde la base de datos se verifica que no sea vacía para
pasar a crear las variables de sesión del usuario.

$_SESSION["IDUsuario"] = $respuesta["registros"]["ID"];
$_SESSION["Usuario"] = $respuesta["registros"]["Usuario"];
$_SESSION["Nombre"] = $respuesta["registros"]["Nombre"];
$_SESSION["Apellido"] = $respuesta["registros"]["Apellido"];
$_SESSION["Rol"] = $respuesta["registros"]["Rol"];

Actividad No 2
 Asignatura Datos del alumno Fecha
Computación en el Servidor Apellidos: Tovar Valencia
08-01-2020
Web Nombre: Orlando

De lo contrario se le notifica a la vista que el Usuario o Contraseña no son correctos.

En el modelo ‘Modelo_Login.php’, se ejecuta la consulta sql que verifica si el usuario

y contraseña son válidos; para este caso usaremos las credenciales: “admin:admin”
para ingresar a la plataforma

Archivo Modelo_Login.php, código sql que se ejecuta para verificar si el usuario y su contraseña son
correctos.
Una vez validado el usuario y contraseña como correctos, se muestra la página
principal, donde contaremos con las opciones de: Crear Cursos, Listar Cursos, Crear
Usuarios y Listar Usuarios.

Actividad No 2
 Asignatura Datos del alumno Fecha
Computación en el Servidor Apellidos: Tovar Valencia
08-01-2020
Web Nombre: Orlando

Manejo de Cursos: créate, read, update, delete:

Para la creación, edición, eliminación y listar los cursos contamos con los
formularios ‘vistas’ ‘ingreso_cursos.php, editar_curso.php y
lista_cursos.php’, las cuales se comunican con el controlador
‘Controlador_Cursos.php’ y este a su vez con el modelo
‘Modelo_Cursos.php’, el funcionamiento se denota en la siguiente imagen:

A continuación, se expone de manera breve el funcionamiento del módulo de cursos,

para esto lo primero que realizamos es crear un curso:

Página de creación de cursos.

Los campos utilizados para el manejo de cursos son los siguientes:
Nombre: Nombre del curso a crear o editar.
Fecha Inicio: fecha de inicio del curso

Actividad No 2
 Asignatura Datos del alumno Fecha
Computación en el Servidor Apellidos: Tovar Valencia
08-01-2020
Web Nombre: Orlando

Fecha Final: fecha de culminación del curso

Intensidad Horaria: Número de horas que dura el curso
Sitio o Lugar: Lugar donde se impartirá el curso
Municipio: Ciudad donde se llevará a cabo el curso.
Tipo: Tipo de curso
Información: Descripción adicional del curso.

Lista de cursos creados

En la vista de Lista de cursos se pueden observar todos los cursos disponibles, junto
con dos opciones:
● Editar: Redirigirá a una la vista editar_curso, desde la cual se podrán
modificar los diferentes parámetros de este objeto.
● Eliminar: Con este botón se eliminará el registro de la base de datos.

Para editar solo damos en el botón de editar y nos envía al formulario de Editar
Cursos con los datos del curso indicado cargados.

Página de edición de cursos

Actividad No 2
 Asignatura Datos del alumno Fecha
Computación en el Servidor Apellidos: Tovar Valencia
08-01-2020
Web Nombre: Orlando

Luego para eliminar un curso solo se debe dar click sobre el botón eliminar y este
envía la petición al controlador, quien en comunicación con el modelo realiza el
´delete´ del curso en la base de datos.

Manejo de Usuarios: créate, read, update, delete:

Página de creación de usuarios.

En cuanto a los usuarios, se cuenta con un Controlador_Usuarios, desde el cual

se tiene conexión con las vistas de ingreso_usuarios, editar_usuario y
lista_usuarios; este a su vez se comunica con el Modelo_Usuario donde se
encuentran las funciones de editar, listar, crear y eliminar.

Estos usuarios son los que tienen acceso a la plataforma y pueden crear y consultar
los cursos inscritos, así como registrar nuevos usuarios, esa información será
consultada por el modelo login a la hora de iniciar sesión

Los campos utilizados para la creación de usuarios son:

Actividad No 2
 Asignatura Datos del alumno Fecha
Computación en el Servidor Apellidos: Tovar Valencia
08-01-2020
Web Nombre: Orlando

Nombre: Nombre del Usuario.

Apellido: Apellido del Usuario.
Usuario: Usuario con el cual ingresará al sistema
Contraseña: Contraseña de ingreso (Esta se encriptará con md5)
Rol: El rol que desempeñará el usuario según los establecidos en la tabla Rol.

Lista de usuarios creados

Al igual que los usuarios, este cuenta con la vista de Lista de usuarios, desde la cual
se pueden observar todos los cursos disponibles, junto con dos opciones:
● Editar: Redirigirá a una la vista editar_usuario, desde la cual se podrán
modificar la información correspondiente.
● Eliminar: Con este botón se eliminará el registro de la base de datos.

Para editar un usuario solo damos en el botón de editar y nos envía al formulario
Editar Usuario con los datos del usuario cargado.

Página de edición de usuario

Actividad No 2
 Asignatura Datos del alumno Fecha
Computación en el Servidor Apellidos: Tovar Valencia
08-01-2020
Web Nombre: Orlando

Luego para eliminar un usuario solo se debe dar click sobre el botón eliminar y este
envía la petición al controlador, quien se comunica con el modelo y se realiza el
´delete´ del usuario de la base de datos.

CONCLUSIONES:

● El patrón MVC permite la separación de un software en tres componentes

básicos que posibilitan la diferenciación de los datos, la lógica de negocio y
las vistas de interacción del usuario, aunque supone un esfuerzo inicial
mayor, a largo plazo facilita el desarrollo de nuevas aplicaciones gracias a la
reutilización de código y facilita el mantenimiento debido a que se encuentra
de forma más limpia y ordenada.
● Es posible el uso de frameworks para el desarrollo de aplicaciones web que
utilizan el patrón MVC, lo cual permite aplicaciones más robustas en menor
tiempo, pero en este caso se diseñó de forma manual ya que haciéndolo
desde cero es de gran utilidad en términos académicos y de aprendizaje.
● El uso de XAMPP permite la integración de varios componentes poderosos
como el servidor web Apache y la base de datos MariaDB y sumado a la
utilización de varios componentes vistos a lo largo del curso en lenguaje PHP
como conexión a bases de datos y de HTML que permiten la creación de
formularios, hacen posible la creación de una aplicación web completa y
funcional.
● La aplicación desarrollada tiene tres componentes principales; login,
usuarios y cursos, para los cuales se definieron varias vistas que interactúan
con un único controlador y un único modelo para cada componente, de igual
forma se hizo uso de herencia para la ejecución de sentencias SQL a partir de
los modelos.

Actividad No 2