INSTITUTO NACIONAL DE MÉXICO

INSTITUTO TECNOLÓGICO DE VERACRUZ

ASIGNATURA
Arquitectura de Desarrollo Web
GRUPO
9J7A
HORA
09:00-10:00
ALUMNO
PÉREZ DÍAZ JORGE ALBERTO
MAESTRO
ESTUDILLO RAMÍREZ JORGE

Documentación de TODO List en Laravel

FECHA DE ENTREGA
26-11-19
 ÍNDICE

INTRODUCCIÓN __________________________________________________________________ 4
CRONOGRAMA DE ACTIVIDADES __________________________________________________ 5
DISEÑO DEL FRONTEND ___________________________________________________________ 5
Diseño del login y registro _____________________________________________________________ 8
Diseño página de usuario y administrador ______________________________________________ 9
Usuario _______________________________________________________________________________________ 9
Administrador _______________________________________________________________________________ 10

FUNCIONAMIENTO EN EL BACKEND _______________________________________________ 13

Diseño de la base de datos ___________________________________________________________ 13
Sistema de login _____________________________________________________________________ 14
Administrador _______________________________________________________________________________ 14
Usuario ______________________________________________________________________________________ 19
Exportar tareas ______________________________________________________________________________ 22

CONCLUSIÓN ___________________________________________________________________ 23

2
 ÍNDICE DE TABLAS Y FIGURAS

Imagen 1. Cronograma de actividades. Realizado en Redmine. ........................................ 5

Imagen 2. Landing page ................................................................................................................... 6
Imagen 3. Landing page, segunda parte .................................................................................... 6
Imagen 4. Tercera parte del landing page ................................................................................. 7
Imagen 5. Ultima parte del landing page .................................................................................... 7
Imagen 6. Diseño del login de usuario.......................................................................................... 8
Imagen 7. Diseño del registro de usuario ..................................................................................... 8
Imagen 8. Diseño de página del usuario ..................................................................................... 9
Imagen 9. Manage tasks del usuario .......................................................................................... 10
Imagen 10. Botón de logout del usuario .................................................................................... 10
Imagen 11. Diseño de página del administrador .....................................................................11
Imagen 12. Manage Users del administrador. ...........................................................................11
Imagen 13. Manage Tasks del administrador. .......................................................................... 12
Imagen 14. Logout del administrador. ........................................................................................ 12
Imagen 15. Administrando usuarios............................................................................................. 15
Imagen 16. Creando nuevo usuario. ........................................................................................... 15
Imagen 17. Usuario registrado correctamente......................................................................... 16
Imagen 18. Editando usuario. ........................................................................................................ 16
Imagen 19. Usuario editado ........................................................................................................... 17
Imagen 20. Intentando eliminar un administrador. ................................................................. 17
Imagen 21. Intentando editar un administrador. ..................................................................... 17
Imagen 22. Intentando personificar otro usuario. .................................................................... 17
Imagen 23. Personificando un usuario. ....................................................................................... 18
Imagen 24. Eliminando usuario ..................................................................................................... 18
Imagen 25. Usuario eliminado ....................................................................................................... 19
Imagen 26. Tareas de usuario........................................................................................................ 19
Imagen 27. Creando tarea. ............................................................................................................ 20
Imagen 28. Tarea creada. .............................................................................................................. 20
Imagen 29. Editando tarea. ............................................................................................................ 21
Imagen 30. Tarea actualizada y terminada. ............................................................................. 21
Imagen 31. Estados de la tarea. ................................................................................................... 22
Imagen 32. Tarea del usuario exportada. .................................................................................. 22
Imagen 33. Tareas del administrador exportadas................................................................... 23

Tabla 1. Tabla users ........................................................................................................................... 13

Tabla 2. Tabla roles ............................................................................................................................ 13
Tabla 3. Tabla role_user ................................................................................................................... 14
Tabla 4. Tabla tasks ........................................................................................................................... 14

3
 INTRODUCCIÓN

Laravel es un framework de código abierto para desarrollar aplicaciones y servicios

web con PHP 5 y PHP 7. Su filosofía es desarrollar código PHP de forma elegante y
simple, evitando el “código espagueti”. Se utiliza el patrón MVC, el cual Laravel
propone en el desarrollo usar “Routes” con Closures, en lugar de utilizar MVC de forma
tradicional esto se hace para que el código sea más claro.
En el siguiente trabajo se documenta el funcionamiento que tiene el proyecto
realizado en Laravel 5.8, el cual es una página web en donde una persona puede
realizar una lista de tareas que tiene por hacer, con el objetivo de que sus actividades
y/o tareas que tenga que hacer las pueda realizar de forma planeada y ordenada.
Se muestra las diferentes implementaciones que se realizaron como es el sistema de
login, el uso de paquetes como maatwebsite/Excel el cual permite realizar
exportaciones de una tabla a una hoja de cálculo, la personificación de los usuarios,
entre otros.
También se muestra cómo se planeó el proyecto a través de un cronograma de
actividades realizado en Redmine. A su vez también el diseño de las tablas de la base
de datos utilizados para el correcto funcionamiento de la página web.

4
 CRONOGRAMA DE ACTIVIDADES

Imagen 1. Cronograma de actividades. Realizado en Redmine.

Antes de comenzar con el proyecto, se realizó un cronograma de actividades. Con

esta forma, se ira haciendo el proyecto de acuerdo al plan de forma ordenada,
evitando que se haga alguna improvisación, y se enfoquen mal las actividades.
El cronograma se dividió en tres partes, FrontEnd, BackEnd, y Tests and fixing problems
bugs. Todo se desarrolló en orden, como se comentó anteriormente.

DISEÑO DEL FRONTEND

Para esta parte, se inició con el diseño del Landing page, el cual en pocas palabras
es el inicio o el index que tiene toda página web.

5
 Imagen 2. Landing page

En esta primera parte del landing page, tiene Login por si el usuario ya tiene una
cuenta, o si no lo tiene y desea registrarse, puede crearla entrando a Singup.

Imagen 3. Landing page, segunda parte

6
Imagen 4. Tercera parte del landing page

Imagen 5. Ultima parte del landing page

7
A partir de la imagen 3 hasta la última, es el diseño general del landing page.

Diseño del login y registro

Imagen 6. Diseño del login de usuario

La imagen anterior, es el diseño del login que tendrá el usuario una vez que tenga
creada su cuenta, en el cual, para acceder, tendrá que ingresar su email y su
contraseña.

Imagen 7. Diseño del registro de usuario

8
En caso de no tener una cuenta, se puede registrar en esta vista, el cual para poder
crearla se necesita ingresar su nombre, correo y contraseña.

Diseño página de usuario y administrador

Usuario

Imagen 8. Diseño de página del usuario

Una vez registrados y logueados, esta será la página que verá el usuario. En la sección
de dashboard, es una vista general de sus tareas, donde tiene cuántas tareas por
hacer tiene el usuario, cuántas están hechas, tareas retrasadas y el total de tareas.
Y tiene tres tablas las cuales están divididas, por las tareas por hacer, las hechas y las
que tienen retraso. Solo para poder observarlas mejor.

En la sección de la izquierda en Manage Tasks, se ve de la siguiente manera:

9
 Imagen 9. Manage tasks del usuario.

Aquí es donde los usuarios pueden crear, eliminar y editar sus tareas, para
posteriormente si desean exportar sus tareas en una hoja de cálculo.
Si se desea salir de su cuenta puede el usuario dar clic sobre el siguiente botón el cual
se encuentra en la parte superior derecha de la página.

Imagen 10. Botón de logout del usuario

Administrador

El administrador tendrá las mismas vistas que un usuario normal, como se muestra a
continuación:

10
 Imagen 11. Diseño de página del administrador

Como se aprecia también tiene conteo de tareas por hacer, tareas con retraso, tareas
hechas, y total de tareas, además se agrega el conteo de número de usuarios
registrados.
El administrador solo tendrá en esa página una tabla de las tareas por hacer. Al
administrador se le agregó la sección de Manage Users.

Imagen 12. Manage Users del administrador.

11
En esta sección el administrador podrá ver qué usuarios están registrados, y tiene el
control sobre ellos. Puede eliminar, editar y crear usuarios. Además, también tiene la
funcionalidad de hacerse pasar por ellos.

Y como el usuario, el administrador también tiene la sección de Manage Tasks.

Imagen 13. Manage Tasks del administrador.

El administrador puede crear, eliminar y actualizar sus tareas. También puede exportar
esas tareas a una hoja de cálculo. El administrador puede salirse de su cuenta
oprimiendo sobre el siguiente botón:

Imagen 14. Logout del administrador.

12
 FUNCIONAMIENTO EN EL BACKEND

Diseño de la base de datos

Para que la página web funcionara se realizó el diseño de la base de datos en MySQL,
haciendo uso de las migraciones en Laravel.
Se crearon cuatro tablas las cuales son el pilar del funcionamiento de la página y está
estructurada de la siguiente forma:

users
Nombre Tipo
id BIGINT(20)
name VARCHAR(255)
email VARCHAR(255)
email_verified_at TIMESTAMP
password VARCHAR(255)
remember_token VARCHAR(100)
created_at TIMESTAMP
updated_at TIMESTAMP
Tabla 1. Tabla users

Esta tabla es usada para poder hacer el registro de los usuarios, tanto usuarios
normales como administradores.

roles
Nombre Tipo
id BIGINT(20)
name VARCHAR(255)
created_at TIMESTAMP
updated_at TIMESTAMP
Tabla 2. Tabla roles

En el diseño, se realizó un sistema de login, que más adelante se explicará, pero

básicamente esta tabla registra los roles que hay en dicho sistema, el cual son dos:
admin y user.

13
 role_user
Nombre Tipo
id BIGINT(20)
role_id INT(10)
user_id INT(10)
created_at TIMESTAMP
updated_at TIMESTAMP
Tabla 3. Tabla role_user

Esta tabla es llenada cuando se crean los usuarios y además se les asigna un rol de
usuario. Entonces esta tabla es llenada a partir de la tabla users y la tabla role_user.

tasks
Nombre Tipo
id BIGINT(20)
user_id BIGINT(20)
name VARCHAR(255)
notes VARCHAR(255)
schedule DATE
status TINYINT(1)
created_at TIMESTAMP
updated_at TIMESTAMP
Tabla 4. Tabla tasks

Tabla utilizada para poder crear nuestras tareas en la página, se utiliza el nombre del
campo user_id ya que necesitamos el id del usuario para poder crear dicha tarea. Es
decir que ese campo es una llave foránea.

Sistema de login
Administrador
Se implementó un sistema de login, el cual existen administradores y usuarios normales.
Esto para poder llevar un mejor control de la página. Para su correcto funcionamiento
se realizó el diseño de la base de datos de acuerdo a las tablas 1, 2 y 3. El cuál la
diferencia que hay entre el administrador y el usuario, es que el administrador puede
crear usuarios, editarlos y eliminarlos. Como se muestra a continuación:

14
 Imagen 15. Administrando usuarios.

El administrador puede crear el usuario, oprimiendo sobre el botón “NEW USER”.

Imagen 16. Creando nuevo usuario.

15
Al crear el usuario, también el administrador puede darle un rol, ya sea de admin o
user.

Imagen 17. Usuario registrado correctamente.

Es así como se vería en la tabla de usuarios, el nuevo usuario registrado. Si quisiera

editarlo se oprime el botón color azul que tiene un lápiz como ícono.

Imagen 18. Editando usuario.

16
En este caso solo se edita el nombre del usuario, dejando todos los campos como lo
tenía antes.

Imagen 19. Usuario editado

Si quisiéramos editar, eliminar o personificar otro administrador, no podríamos, y nos

saldría algo parecido como lo siguiente:

Imagen 20. Intentando eliminar un administrador.

Imagen 21. Intentando editar un administrador.

Imagen 22. Intentando personificar otro usuario.

Y sería lo mismo si el mismo administrador quisiera editarse, eliminarse o hacerse pasar

por el mismo. Simplemente no podrá hacerlo.

17
Personificar usuario
El administrador puede hacerse pasar por otro usuario dando clic sobre el último botón
de color verde.
El administrador puede ver todas las tareas que este usuario tenga, y si quiere detener
la personificación puede detenerlo oprimiendo sobre el botón de color amarillo de
lado derecho superior de la página.

Imagen 23. Personificando un usuario.

Al detener la personificación nos devuelve al dashboard del administrador.

Si queremos deshacernos de algún usuario, podemos eliminarlo oprimiendo el botón
rojo que tiene una basura como ícono.

Imagen 24. Eliminando usuario

18
 Imagen 25. Usuario eliminado

Usuario
Aunque la funcionalidad de crear tareas la puede hacer tanto administrador como
usuario, lo haremos desde la perspectiva del usuario.

Imagen 26. Tareas de usuario.

En el botón de “NEW TASK”, el usuario podrá crear una nueva tarea. Y tendrá que
llenar los siguientes campos:

19
 Imagen 27. Creando tarea.

Imagen 28. Tarea creada.

Dicha tarea se puede editar, dando clic sobre el botón morado con un lápiz de ícono.

20
 Imagen 29. Editando tarea.

Se modifica la tarea en el campo que queramos, en la fecha, nombre o notas de

dicha tarea. Si dicha tarea está terminada, entonces podemos seleccionar la opción
“Done” y se palomeará.

Imagen 30. Tarea actualizada y terminada.

21
Al tener las tareas creadas en nuestra página, tendrán tres estados:

• Done: esta tarea está terminada.

• Overdue: esta tarea no se terminó, y se pasó el tiempo para realizarla.
• To do: tarea que se puede hacer a tiempo. Además, dice cuántos días tiene
para hacerla, si es para hoy o para mañana.

Imagen 31. Estados de la tarea.

Exportar tareas

Esta funcionalidad la tiene tanto el administrador como el usuario, y consiste en

exportar las tareas que se tienen en su tabla, a una hoja de cálculo con extensión csv.
Cuando se oprime sobre el botón amarillo que dice “EXPORT TASKS”, para el usuario
se le descargará un archivo con nombre tasks.csv.
Y se puede ver algo como lo siguiente:

Imagen 32. Tarea del usuario exportada.

22
Para el administrador el nombre del archivo será tasksAdmin.csv.

Imagen 33. Tareas del administrador exportadas.

Esta funcionalidad es un paquete descargado e implementado en el proyecto, dicho

paquete se llama maatwebsite/excel.

CONCLUSIÓN
Para poder realizar de una forma mas ordenada y sin tener que regresar a hacer
alguna parte del proyecto, fue de mucha utilidad hacer antes un plan de cómo iba
a realizar el proyecto, para el cual se realizó un cronograma de actividades de
acuerdo a las necesidades y características que tiene el proyecto. Al final, el proyecto
se finalizó antes de lo esperado, dando a entender que el cronograma de actividades
hizo que el proyecto se pudiera desarrollar de una manera continua y sin dar pasos
hacia atrás sin tener que modificar algún o arreglar alguna parte del proyecto. Al final
del curso obtuve bastantes conocimientos acerca de cómo desarrollar páginas web
con Laravel, y me pareció bastante agradable aprenderlo y utilizarlo, ya que no tuvo
demasiada dificultad.

23