Asignatura Datos del alumno Fecha

Apellidos: Gaviria Roa

Computación en el
01-01-2020
Servidor Web
Nombre: Luis Hernando

DESARROLLO WEB AVANZADO

ACTIVIDAD 2
MANEJO DE DATOS EN EL SERVIDOR E INTERACCIÓN CON EL CLIENTE
MEDIANTE UNA APLICACIÓN WEB

LUIS HERNANDO GAVIRIA ROA

UNIVERSIDAD INTERNACIONAL DE LA RIOJA

UNIR

ENERO 2020

Desarrollo actividad 2 © Universidad Internacional de La Rioja

(UNIR)
 Asignatura Datos del alumno Fecha
Apellidos: Gaviria Roa
Computación en el
01-01-2020
Servidor Web
Nombre: Luis Hernando

1. Selección de tema para la actividad

Dado que para la actividad se requiere realizar varias funcionalidades, que

incluye almacenamiento en base de datos, manejo de sesión y formularios, elegí
el mismo tema de la actividad anterior para darle continuidad y hacerlo mas
funcional. La idea es realizar una lista de que haceres distribuidos por usuarios
que inicien sesión y separadas por categoría.

2. Preparación del ambiente

Para el desarrollo se requiere un servidor local que interprete el lenguaje PHP y

un motor de base de datos, para ello se instaló XAMPP, que contiene Apache y
MariaDB.
Esta aplicación nos permite manejar fácilmente el servidor en nuestra maquina y
manipular nuestra base de datos.

3. Diseño de la base de datos

Para el ejercicio necesito 3 tablas, una para representar a el usuario que inicia
sesión y al que se le asocia cada categoría. La siguiente tabla es Categorías la cual
se usará para agrupar las tareas. Y por último la tabla de tareas, para registrar
cada actividad y su estado.

Ilustración 1Diagrama relacional de Base de Datos

El script generado para esta base de datos es el siguiente:

Desarrollo actividad 2 © Universidad Internacional de La Rioja

(UNIR)
 Asignatura Datos del alumno Fecha
Apellidos: Gaviria Roa
Computación en el
01-01-2020
Servidor Web
Nombre: Luis Hernando

-- Table structure for table `categories`

CREATE TABLE `categories` (

`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`user_email` int(11) NOT NULL,
`status` tinyint(1) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- Table structure for table `tasks`

CREATE TABLE `tasks` (

`id` int(11) NOT NULL,
`text` varchar(600) NOT NULL,
`status` tinyint(1) NOT NULL,
`start_date` datetime NOT NULL,
`end_date` datetime NOT NULL,
`category_id` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- Table structure for table `users`

CREATE TABLE `users` (

`id` int(11) NOT NULL,
`email` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- Indexes for dumped tables

-- Indexes for table `categories`

ALTER TABLE `categories`
ADD PRIMARY KEY (`id`),
ADD KEY `user_email` (`user_email`);

Desarrollo actividad 2 © Universidad Internacional de La Rioja

(UNIR)
 Asignatura Datos del alumno Fecha
Apellidos: Gaviria Roa
Computación en el
01-01-2020
Servidor Web
Nombre: Luis Hernando

-- Indexes for table `tasks`

ALTER TABLE `tasks`
ADD PRIMARY KEY (`id`),
ADD KEY `category_id_task` (`category_id`);

-- Indexes for table `users`

ALTER TABLE `users`

ADD PRIMARY KEY (`id`);

-- AUTO_INCREMENT for dumped tables

--
-- AUTO_INCREMENT for table `categories`
--
ALTER TABLE `categories`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `tasks`
--
ALTER TABLE `tasks`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `users`
--
ALTER TABLE `users`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

-- Constraints for dumped tables

-- Constraints for table `categories`

--

Desarrollo actividad 2 © Universidad Internacional de La Rioja

(UNIR)
 Asignatura Datos del alumno Fecha
Apellidos: Gaviria Roa
Computación en el
01-01-2020
Servidor Web
Nombre: Luis Hernando

ALTER TABLE `categories`

ADD CONSTRAINT `categories_ibfk_1` FOREIGN KEY (`user_email`)
REFERENCES `users` (`id`);

-- Constraints for table `tasks`

--
ALTER TABLE `tasks`
ADD CONSTRAINT `category_id_task` FOREIGN KEY (`category_id`)
REFERENCES `categories` (`id`);
COMMIT;

4. Diseño aplicación

El aplicativo se debía desarrollar con un patrón de diseño MVC (Modelo-Vista-

Controlador), para mayor facilidad en la implementación, decido utilizar
Codeigniter (https://codeigniter.com/en/docs), un framework para PHP, que ya
tiene la estructura y organización basada en este patrón de diseño.
Para que este Framework funcione correctamente se deben configurar la
conexión a base de datos y la configuración base del proyecto. Así mismo, la url
base para ejecutar el aplicativo.
A continuación, los apartados de configuración.
En el archivo config.php:

Ilustración 2Configuración index y url base del proyecto

Desarrollo actividad 2 © Universidad Internacional de La Rioja

(UNIR)
 Asignatura Datos del alumno Fecha
Apellidos: Gaviria Roa
Computación en el
01-01-2020
Servidor Web
Nombre: Luis Hernando

La url base, está en vació ya que hace referencia a la raíz del directorio en donde
se encentran las fuentes. Y el “index_page” apunta a index.php que es el archivo
encargado de procesar todo lo que recibe y muestra el aplicativo.

En el archivo database.php:

Ilustración 3Configuración conexión a base de datos

La configuración en el archivo autoload.php, para que la aplicación cargue

inicialmente la librería para manejar base de datos y el manejador de sesión.

Ilustración 4Carga de librerías al iniciar la aplicación

5. Diseño modelos

Desarrollo actividad 2 © Universidad Internacional de La Rioja

(UNIR)
 Asignatura Datos del alumno Fecha
Apellidos: Gaviria Roa
Computación en el
01-01-2020
Servidor Web
Nombre: Luis Hernando

Para representar cada tabla en la base de datos se crea un modelo, el cual se

encarga de crear, modificar, obtener o eliminar registros de cada tabla
representada.

Ilustración 5Diagrama clases - Modelos de Base de Datos

En el diagrama se evidencia la generalización para las operaciones principales

mencionadas, y una clase para representar cada tabla y las operaciones
específicas.

Las funcionalidades principales en estos modelos se describen a continuación:

Desarrollo actividad 2 © Universidad Internacional de La Rioja

(UNIR)
 Asignatura Datos del alumno Fecha
Apellidos: Gaviria Roa
Computación en el
01-01-2020
Servidor Web
Nombre: Luis Hernando

Ilustración 6Funcionalidades principales en el modelo base

Ilustración 7Función que carga las tareas asociadas a una categoría específica

Desarrollo actividad 2 © Universidad Internacional de La Rioja

(UNIR)
 Asignatura Datos del alumno Fecha
Apellidos: Gaviria Roa
Computación en el
01-01-2020
Servidor Web
Nombre: Luis Hernando

6. Controladores

El motivo principal de utilizar controladores es realizar la comunicación entre las

vistas y los modelos, por ello para cada componente se desarrolla un controlador.

El controlador principal de la aplicación es el Welcome, encargado de validar si

el usuario tiene una sesión activa o permite iniciarla.

El segundo controlador es para gestionar las Categorías, este permite cargar los
datos de las categorías y mostrarlos a través de las vistas.

Y por último es controlador para las tareas, para procesar y mostrar las tareas
asociadas a una categoría

Desarrollo actividad 2 © Universidad Internacional de La Rioja

(UNIR)
 Asignatura Datos del alumno Fecha
Apellidos: Gaviria Roa
Computación en el
01-01-2020
Servidor Web
Nombre: Luis Hernando

Ilustración 8Diagrama clases Controladores

A continuación, unas tomas de las funcionalidades principales:

Desarrollo actividad 2 © Universidad Internacional de La Rioja

(UNIR)
 Asignatura Datos del alumno Fecha
Apellidos: Gaviria Roa
Computación en el
01-01-2020
Servidor Web
Nombre: Luis Hernando

Ilustración 9index del controlador welcome de usuarios

Ilustración 10Función de carga o creación de usuario en inicio de sesión

Ilustración 11Función principal del controlador de categorías

Desarrollo actividad 2 © Universidad Internacional de La Rioja

(UNIR)
 Asignatura Datos del alumno Fecha
Apellidos: Gaviria Roa
Computación en el
01-01-2020
Servidor Web
Nombre: Luis Hernando

Ilustración 12Función de carga de tareas por categoría en el controlador de tareas

Ilustración 13Crear tarea por categoría en controlador de tareas

7. Vistas

Por último, diseño las vistas con ayuda de HTML y PHP embebido para procesar
los datos traídos de los controladores.

Desarrollo actividad 2 © Universidad Internacional de La Rioja

(UNIR)
 Asignatura Datos del alumno Fecha
Apellidos: Gaviria Roa
Computación en el
01-01-2020
Servidor Web
Nombre: Luis Hernando

El diseño está echo con una plantilla de una cabecera y un pie de página.

Además, la sección o contenedor que muestra los datos y formularios.

Para este aplicativo se diseñaron dos vistas principales, una para la cabecera de
la aplicación, que importa los estilos y librerías necesarias. Y además carga una
plantilla subdivida para mostrar un título y un menú lateral.

La segunda vista principal es un pie de página para cargar las etiquetas finales
del HTML.

Y dentro de estas dos, se cargará cada vista individual, que podrá contener
presentación de datos a través de listas o formularios para agregar o editar
información.

Cada una de las vistas, está separada en archivos distintos con extensión de
archivo php, que son cargadas a través del controlador con la sentencia:

$this->load->view('categories/index', $data);
Que indica cual es la vista a cargar mediante su ruta y se le envía una variable
(arreglo) con datos para utilizar en la misma.

Esta vista cargaría las categorías asociadas a un usuario:

Ilustración 14Vista para mostrar lista de categorías

8. Integración

Desarrollo actividad 2 © Universidad Internacional de La Rioja

(UNIR)
 Asignatura Datos del alumno Fecha
Apellidos: Gaviria Roa
Computación en el
01-01-2020
Servidor Web
Nombre: Luis Hernando

Para que todo esto funcione se deben configurar las rutas en el archivo
routes.php. Codeigniter está desarrollado para que al configurar las rutas
específicas se pueda indicar a que controlador va a redireccionar y a que función.

Ilustración 15Configuración de rutas en Codeigniter

9. Resultado final

Ilustración 16Ventana de bienvenida e inicio de sesión

Desarrollo actividad 2 © Universidad Internacional de La Rioja

(UNIR)
 Asignatura Datos del alumno Fecha
Apellidos: Gaviria Roa
Computación en el
01-01-2020
Servidor Web
Nombre: Luis Hernando

Ilustración 17Ventana principal con categorías por usuario

Ilustración 18Formulario creación categoría

Desarrollo actividad 2 © Universidad Internacional de La Rioja

(UNIR)
 Asignatura Datos del alumno Fecha
Apellidos: Gaviria Roa
Computación en el
01-01-2020
Servidor Web
Nombre: Luis Hernando

Ilustración 19Vista de tareas por categoría

Ilustración 20Nueva tarea asociada

Desarrollo actividad 2 © Universidad Internacional de La Rioja

(UNIR)
 Asignatura Datos del alumno Fecha
Apellidos: Gaviria Roa
Computación en el
01-01-2020
Servidor Web
Nombre: Luis Hernando

Ilustración 21Marcar tarea como realizada

10. Conclusiones

Gracias a este laboratorio de práctica se pudo poner en practica todos los

conocimientos adquiridos en la asignatura de computación en el servidor web.
Plasmar los conceptos de un patrón de diseño muy útil en el desarrollo de
software tal como es MVC (Modelo-Vista-Controlador), el manejo de variables de
sesión y persistencia de datos a través del uso de bases de datos.

Desarrollo actividad 2 © Universidad Internacional de La Rioja

(UNIR)