Universidad Politécnica de Madrid: Desarrollo de Un Sistema Web para La Gestión de Imágenes Y Álbumes

UNIVERSIDAD POLITÉCNICA DE MADRID
Escuela Técnica Superior De Ingeniería de Sistemas Informáticos
TRABAJO DE FIN DE GRADO
Grado en Ingeniería de Software
DESARROLLO DE UN SISTEMA WEB PARA LA

GESTIÓN DE IMÁGENES Y ÁLBUMES
AUTOR: JAIME SÁNCHEZ PEDRÓS

TUTOR: FRANCISCO SERRADILLA GARCÍA
2017
1
DESARROLLO DE UN SISTEMA WEB PARA LA GESTIÓN DE
IMÁGENES Y ÁLBUMES
Resumen
Este Trabajo de Fin de Grado tiene como intención llevar a cabo el desarrollo de un
sistema web para la gestión de imágenes y álbumes utilizando el framework web
Laravel (desarrollado en PHP) junto con otras tecnologías básicas del desarrollo web:
HTML5, CSS3 y Javascript.
El objetivo principal del proyecto es realizar el sistema web mencionado a medida para
un cliente, que pretende utilizar este sistema como página de presentación profesional.
En este documento se explican las diferentes tecnologías utilizadas y las fases seguidas
durante el desarrollo del proyecto, incluyendo etapas como la documentación de
requisitos, el diseño de diagramas para el desarrollo del sistema y la puesta en
producción del proyecto, entre otras.
Finalmente, se presentarán las conclusiones y los futuros proyectos y mejoras que

parten de este proyecto.
Abstract
This Final Degree Project intends to develop a web system for images/album
management using the framework web Laravel (developed in PHP) as well as other
basic technologies for the web development such as HTML5, CSS3, and Javascript.
The main goal of this Project consists in developing a custom web system for a client,
who has the intention to use this web as a professional portfolio.
In this document are explained the different used technologies besides the phases of the
Project, starting with the requirements documentation, also the design of the diagrams
for the system development, the design of the user interfaces and the deployment.
Finally, conclusions will be exposed and also future projects and improvements.
4
Tabla de contenido
1. Introducción.......................................................................................................9
1.1 Motivación....................................................................................................................9
1.2 Objetivos.......................................................................................................................9
2. HERRAMIENTAS Y TECNOLOGÍAS......................................................................10
2.1 Lenguajes.....................................................................................................................10
2.1.1 PHP...........................................................................................................................10
2.1.2 Javascript..................................................................................................................11
2.1.3 HTML5......................................................................................................................11
2.1.4 CSS3..........................................................................................................................11
2.2 Frameworks y librerías................................................................................................12
2.2.1 Laravel......................................................................................................................12
2.2.2 jQuery.......................................................................................................................36
2.2.3 Bootstrap..................................................................................................................36
2.3 Otras herramientas......................................................................................................36
2.3.1 PhpStorm..................................................................................................................36
2.3.2 MAMP.......................................................................................................................37
2.3.3 MySQL.......................................................................................................................37
2.3.4 Navegadores.............................................................................................................38
2.3.5 Git.............................................................................................................................38
2.3.6 Composer.................................................................................................................39
2.3.7 Masonry....................................................................................................................39
3. Análisis Funcional.............................................................................................40
3.1. Documento de Requisitos...........................................................................................40
3.2 Casos de Uso................................................................................................................43
3.2.1 Definición y anotación..............................................................................................43
3.2.2 Actores......................................................................................................................43
3.2.3 Diagramas de casos de uso.......................................................................................44
3.2.4 Casos de Uso extendidos..........................................................................................45
3.3 Modelo Entidad-Relación............................................................................................55
4 Diseño de la aplicación..........................................................................................56
4.1 Diagramas de flujo......................................................................................................56
4.1.1 Autenticarse en el sistema (accede al panel de administración).............................57
4.1.2 Subir una imagen......................................................................................................58
4.1.3 Editar una imagen.....................................................................................................59
4.1.4 Borrar una imagen....................................................................................................60
4.1.5 Editar un álbum........................................................................................................62
4.1.6 Borrar un álbum........................................................................................................63
4.2. Diagrama de clases.....................................................................................................64
4.3. Diagramas de secuencia.............................................................................................67
4.3.1 Registrarse en el sistema..........................................................................................67
4.3.2 Autenticarse en el sistema........................................................................................68
4.3.3 Subir una foto...........................................................................................................69
4.3.4 Borrar una foto.........................................................................................................70
4.3.5 Borrar un álbum........................................................................................................71
4.3.6 Editar una imagen.....................................................................................................72
4.3.7 Editar un álbum...........................................................................................................73

4.4 Arquitectura del sistema.............................................................................................74
4.4.1 El patrón MVC...........................................................................................................74
4.4.2 API REST....................................................................................................................75
4.5 Interfaces de usuario...................................................................................................77
5. Despliegue...........................................................................................................94
6. Resultado final.....................................................................................................97
7. Conclusiones........................................................................................................97
8. Futuros proyectos................................................................................................99
9. Glosario..............................................................................................................100
10. Bibliografía.......................................................................................................101
Tabla de ilustraciones
Ilustración 1 - Ejemplo de Masonry................................................................................40
Ilustración 2 - Diagrama de casos de uso........................................................................44
Ilustración 3 - Modelo Entidad-Relación........................................................................55
Ilustración 4 - Diagrama de flujo autenticarse en el sistema...........................................57
Ilustración 5 - Diagrama de flujo subir una imagen........................................................58
Ilustración 6 - Diagrama de flujo editar una imagen.......................................................59
Ilustración 7 - Diagrama de flujo borrar una imagen......................................................60
Ilustración 8 - Diagrama de flujo editar un álbum..........................................................62
Ilustración 9 - Diagrama de flujo borrar un álbum..........................................................63
Ilustración 10 - Diagrama de clases................................................................................65
Ilustración 11 - Diagrama de secuencia registrarse en el sistema...................................67
Ilustración 12 - Diagrama de secuencia autenticarse en el sistema.................................68
Ilustración 13 - Diagrama de secuencia subir una foto...................................................69
Ilustración 14 - Diagrama de secuencia borrar una foto.................................................70
Ilustración 15 - Diagrama de secuencia borrar un álbum................................................71
Ilustración 16 - Diagrama de scuencia editar una imagen...............................................72
Ilustración 17 - Diagrama de secuencia editar un álbum................................................73
Ilustración 18 - Esquema MVC. Wikipedia....................................................................75
Ilustración 19 - Ejemplo API REST................................................................................77
Ilustración 20 - Diseño escritorio página home...............................................................78
Ilustración 21 - Diseño responsive página home.............................................................79
Ilustración 22 - Diseño escritorio página sobre mí..........................................................79
Ilustración 23 - Diseño escritorio página sobre mí (2)....................................................80
Ilustración 24 - Diseño responsive sobre mí...................................................................81
Ilustración 25 - Diseño responsive sobre mí (2)..............................................................82
Ilustración 26 - Diseño escritorio página bodas.............................................................83
Ilustración 27 - Diseño escritorio página bodas (2)........................................................83
Ilustración 28 - Diseño responsive bodas (1)..................................................................84
Ilustración 29 - Diseño responsive bodas (2)..................................................................85
Ilustración 30 - Diseño escritorio página prensa.............................................................86
Ilustración 31 - Diseño responsive página prensa (1).....................................................87
Ilustración 32 - Diseño responsive página prensa (2).....................................................88
Ilustración 33 - Diseño escritorio página cursos.............................................................89
Ilustración 34 - Diseño responsive página cursos...........................................................89
Ilustración 35 - Diseño escritorio página contacto..........................................................90
Ilustración 36 - Diseño responsive página contacto........................................................91
Ilustración 37 - Diseño página en inglés.........................................................................92
Ilustración 38 - Diseño panel de administración "Subir fotos".......................................93
Ilustración 39 - Diseño panel de administración "Imágenes".........................................93
Ilustración 40 - Diseño panel de administración "Galerías"...........................................94
7
Índice de tablas
Tabla 1 - Atributos de Schema Builder...........................................................................23
Tabla 2 - Lista de requisitos............................................................................................40
Tabla 3 - Caso de uso autenticarse en el sistema............................................................45
Tabla 4 - Caso de uso subir una imagen..........................................................................46
Tabla 5 - Caso de uso crear un álbum.............................................................................47
Tabla 6 - Caso de uso editar una imagen.........................................................................48
Tabla 7 - Caso de uso editar un álbum............................................................................49
Tabla 8 - Caso de uso borrar una imagen........................................................................50
Tabla 9 - Caso de uso borrar un álbum...........................................................................51
Tabla 10 - Caso de uso filtrar una imagen.......................................................................52
Tabla 11 - Caso de uso registrarse...................................................................................53
Tabla 12 - Caso de uso identificarse en el sistema..........................................................54
8
1. Introducción
1.1 Motivación
Internet es uno de los mercados más importantes en la actualidad. Para las empresas, es
muy importante tener buena presencia en la web, ya que ayuda a reforzar el aspecto de
una empresa y su seriedad, además de mejorar su publicidad.
El mundo de la moda es un mercado competitivo que requiere una buena imagen, y en

la que destacan las galerías de imágenes. A su vez, existen múltiples redes sociales en
las cuales su contenido principal son las imágenes (por ejemplo: Instagram). Es
importante manejar estas redes sociales y mantenerlas activas con frecuencia.
El proyecto llevado a cabo surge por la necesidad de un cliente para actualizar su página
web empresarial y mejorar su imagen. Debido a que este cliente trabaja en el mundo de
la moda, su portfolio se basa en galerías de imágenes. Para ello, se ha desarrollado una
página web para la gestión de imágenes y álbumes.
1.2 Objetivos
El objetivo principal de este proyecto es el desarrollo de un sistema web completo en el

que un usuario sea capaz de gestionar el contenido de su página. Para ello, se debe
desarrollar una parte orientada al cliente (front-end) y una parte orientada al servidor
(back-end).
Este proyecto cuenta con múltiples objetivos, tanto personales como profesionales.
En el aspecto profesional, se pretende desarrollar un sistema que cumpla con los

requisitos del cliente, montando un sistema visualmente elegante e intuitivo, y que
además sea fácil de usar.
En el aspecto personal, uno de los objetivos más importantes es el desarrollo de un

sistema web que cuente con las funcionalidades más importantes en el mundo de las
9
IMÁGENES
tecnologías Web. Es importante además,Y ÁLBUMES
desarrollar proyectos de alcance real para
ganar experiencia en estas tecnologías, por lo que este proyecto lo he considerado muy
completo para todos mis objetivos.
2. HERRAMIENTAS Y TECNOLOGÍAS
2.1 Lenguajes
2.1.1 PHP
PHP (acrónimo de PHP Hypertext Preprocessor) es un lenguaje de programación de

código abierto utilizado principalmente para el desarrollo web del lado del servidor y
que puede ser incrustado en HTML. Fue desarrollado por Rasmus Lerdorf y lanzado en
junio de 1995.
PHP es un lenguaje que cuenta con la facilidad de poder se instalado en la mayoría de

los servidores web, sistemas operativos y plataformas sin ningún coste. Suele ser
procesado por un intérprete PHP implementado como un módulo en el servidor web o
implementado como un CGI (Common Gateway Interface) ejecutable.
El lenguaje PHP no ha contado con un estándar hasta 2014, con el lanzamiento de la

versión 5.6.
Actualmente, PHP se encuentra en la versión 7.1.1, aunque la versión más utilizada

sigue siendo la versión 5.6, que ha sido la utilizada en este proyecto.
PHP cuenta con una gran comunidad a su espalda, siendo un lenguaje maduro que
cuenta con una gran cantidad de información, fácil de encontrar, tanto en inglés como
en español. Es uno de los lenguajes más utilizados para desarrollar páginas web que
necesiten servicio del lado del servidor. Páginas como Wikipedia, Yahoo! o Facebook
han sido desarrolladas con PHP.
10
2.1.2 Javascript
Javascript (abreviado comúnmente JS) es un lenguaje de programación interpretado de

alto nivel, dinámico y de tipado débil, utilizado principalmente el desarrollo web en el
lado del cliente (front-end). Pertenece al estándar ECMAScript.
Como se ha comentado en el párrafo anterior, Javascript se utiliza principalmente para

el desarrollo web en el lado del cliente, aunque también se puede utilizar para el
desarrollo del lado de servidor (back-end). Es utilizado para ampliar las funcionalidades
de la web, para mejorar la interfaz, manipular el DOM, añadir animaciones, etc.
2.1.3 HTML5
HyperText Markup Language (abreviado con sus siglas, HTML) es un lenguaje de

marcado para el desarrollo de páginas web y aplicaciones web. Forma, junto a CSS y a
Javascript, los pilares básicos para el desarrollo web.
HTML5 es la última versión del estándar, la quinta revisión de HTML. En esta última
versión se han añadido una serie de nuevos elementos y atributos para adaptarse a las
páginas web actuales, como puedan ser las etiquetas: <header> para destacar la
cabecera de una web, <nav> para definir el menú de navegación de una web, o
<video> para definir un elemento multimedia para reproducir un vídeo, entre otros.
Además, añade una serie de cambios en la semántica básica que tenía HTML hasta su
versión 4.
Esta es la versión de HTML utilizada para este proyecto. Para ejecutarlo se necesitan
navegadores actuales y se ha de tener en cuenta que no todos los navegadores soportan
todas las etiquetas nuevas.
2.1.4 CSS3
Hojas de estilo en cascada o CSS(siglas de Cascading Style Sheets) es un lenguaje para

definir y desarrollar el estilo de un documento de HTML. Es usado para establecer el
11
diseño de una página webIMÁGENES Y ÁLBUMES
o para diseñar interfaces de usuario escritas en HTML. La
última versión de CSS es la versión 3, que es la utilizada en este documento.
CSS está diseñado principalmente para estructurar mejor el desarrollo de páginas web,
pudiendo separar el contenido del documento de los estilos del documento.
CSS cuenta con su propia sintaxis, y se basa en herencia en cascada: esto quiere decir
que si se definen unas propiedades a un elemento padre, también los hijos llevarán estas
propiedades.
Algunos ejemplos de CSS podrían ser el cambio de colores de fuentes, uso de sombras,
degradados, etc.
Una funcionalidad muy buena de CSS son los media queries, puntos de ruptura para
diferenciar estilos dependiendo del dispositivo que se vaya a utilizar (cambia por el
tamaño de la pantalla). A este desarrollo se le conoce como responsive design, o diseño
adaptativo.
2.2 Frameworks y librerías
¿Qué es un framework web?

Un framework web es una estructura software compuesta de diferentes componentes
que facilitan el desarrollo de una aplicación. La mayoría de los frameworks web
funcionan de una manera muy similar. Los framework web tienen como objetivo que el
desarrollo de estas aplicaciones o sistemas web se haga de forma elegante y simple, sin
necesidad de reescribir código.
2.2.1 Laravel
Laravel es un framework web de código abierto utilizado para desarrollar aplicaciones

web y sistemas web. Laravel está programado en PHP.
Como se comentó anteriormente, Laravel busca que el desarrollo de las aplicaciones se

haga de una forma elegante y simple.
12
IMÁGENES
Gran parte de Laravel está formado porYdependencias
ÁLBUMES de otros sistemas, como
Simfony, por lo que su desarrollo es dependiente de estas dependencias.
Características
Laravel incluye muchas funcionalidades que facilitan al usuario su trabajo, como
puedan ser:
 Arquitectura MVC: Laravel se basa en una arquitectura Modelo-Vista-

Controlador, que se explicará más adelante.
 Artisan: Artisan es el interfaz de línea de comandos que incluye Laravel.
Cuenta con un listado de comandos muy útiles para el desarrollo de una
aplicación en Laravel, como pueda ser la creación de los modelos, activación de
módulos, creación de migraciones, etc.
 Object Relational Mapping (ORM): utilizado para la transformación de tablas
de una base datos en entidades (modelos del sistema), facilitando las tareas
básicas con la bases de datos (crear, modificar, consultar o eliminar). El ORM
utilizado por Laravel se llama Eloquent.
 Sistema de rutas: Laravel aporta un sistema de generación de rutas sencillo e
intuitivo, donde el usuario puede generar distintas rutas para los diferentes
métodos HTTP: GET,POST…
 Motor de plantillas: se incluye el sistema de plantillas (o motor de plantillas)
Blade, que permite combinar distintos lenguajes como HTML y Javascript con
PHP, aportando distintas funcionalidades como estructuras de control, herencia
de plantillas o acceso a datos de la aplicación, con el fin de construir las vistas
de la aplicación.
 Migraciones: son una serie de archivos que proveen un sistema de control de
versiones para las bases de datos, utilizadas tanto para crear tablas, como hacer
modificaciones o eliminar tablas, columnas, etc. a través de la programación
orientada a objetos.
 Sistema de autenticación: Laravel incluye un módulo de autenticación basado
en sesiones, facilitando al desarrollador funcionalidades como el login, el
registro, comprobación de contraseñas, etc.
13
IMÁGENES
Fue desarrollado por Taylor Otwell, Y ÁLBUMES
intentando mostrar una alternativa más
completa respecto a otros frameworks del mercado. Su primer lanzamiento fue el 9
de junio de 2011. En la actualidad, Laravel es uno de los frameworks web más
utilizados, contando con una gran comunidad creciente. La versión actual de
Laravel, la utilizada en este proyecto, es la versión 5.3, lanzada el 23 de agosto de
2016.
2.2.1.1 Artisan
Artisan es el interfaz de línea de comandos de Laravel. Cuenta con una importante lista
de comandos muy útiles para el desarrollo de una aplicación Laravel.
La sintaxis básica del comando es:
php artisan <acción que se desee realizar>
El comando básico para poder ver la lista de comandos completa es:
php artisan list
Algunas de los comandos de artisan utilizados en este proyecto son:
 Crear un controlador:
php artisan make:controller <nombre del controlador>
 Crear un modelo
php artisan make:model <nombre del modelo>
 Crear una vista

php artisan make:view <nombre de la vista>
 Crear una migración

php artisan make:migration <nombre de la migración>
 Activar el módulo de autenticación

php artisan make:auth
2.2.1.2 Sistema de rutas
Laravel cuenta con un sistema de rutas. Esto es, simplemente, una serie de archivos en
los que se definen las diferentes direcciones que va a tener una página web. Por
ejemplo:
http://www.ejemplo.com  Ruta raíz
http://www.ejemplo.com/ruta-ejemplo  Una de las posibles direcciones.
Laravel 5.3 cuenta con una actualización para este sistema de rutas. En el sistema
actual, las rutas se dividen dependiendo de si serán rutas para las API, para la web o
para la consola, definiéndose en los archivos api.php, web.php o console.php
respectivamente. Todos estos archivos se encuentran en la carpeta Routes.
La definición de rutas es simple. Para crear una nueva ruta habrá que utilizar la
siguiente sintaxis:
Route::<métodoHTTP>(‘<nombre de la ruta>’,<función a realizar>);
Siendo <métodoHTTP> uno de los posibles métodos HTTP: get,post,put,patch,options

o delete, <nombre de la ruta> la URI (Universal Resource Identifier) y <función a
realizar> la función callback que se realizará cuando se acceda a esa dirección.
Por ejemplo:
15
Esto hará que, cuando un usuario acceda a la ruta /foo, vea en el navegador el texto
‘Hello World’.
A una ruta, se le puede pasar una función definida en el mismo método, o una función
definida en un controlador. Por ejemplo:
Siendo UserController la clase UserController y showProfile un método definido en

UserController.
Al definir la URI de una ruta, también podemos pasarle un parámetro, como pueda ser
un número que será el identificador de un objeto. Por ejemplo:
Por comodidad, se han definido todas las rutas en el archivo web.php (tanto las rutas de
la web como las rutas de la API).
2.2.1.3 Eloquent ORM. Modelos
¿Qué es un ORM?
Un ORM (Object Relational Mapping, o Mapeo Objeto-Relacional) es una técnica de

programación para convertir datos entre sistemas incompatibles para utilizar en
lenguajes de programación orientada a objetos. Transforma las distintas tablas de una
base de datos en entidades que simplifiquen las tareas a realizar con la base de datos.
¿Por qué utilizar un ORM?

Un ORM facilita mucho IMÁGENES
la vida a unYdesarrollador,
ÁLBUMES permitiéndole centrarse en el
desarrollo de la aplicación y no en las operaciones de la base de datos. Además, es muy
fácil de utilizar si se conocen los principios básicos del lenguaje de programación
orientado a objetos que se esté utilizando en el proyecto.
Eloquent
El ORM incluido en Laravel es Eloquent. Este aporta una implementación sencilla y un

manejo fácil de ActiveRecord para trabajar con la base de datos.
Las funciones que Eloquent aporta facilita la realización de consultas y peticiones

completas a nuestra base de datos sin tener que programar en SQL.
Eloquent relaciona cada tabla de la base de datos con su “modelo” correspondiente, que
es utilizado para interactuar con esta tabla. Estos modelos permiten hacer consultas a la
taba, al igual que insertar nuevos registros a la tabla.
Las tablas de la base de datos se definen mediante las migraciones, que se explicarán a
continuación, y el modelo correspondiente.
2.2.1.3.1 Modelos
En arquitectura MVC, un Modelo es un componente encargado del trabajo con los

datos. Gestiona los accesos a la información correspondiente, almacenados
generalmente en una base de datos.
Modelos en Laravel y relación con Eloquent
Eloquent utiliza los Modelos para recibir o enviar información a la base de datos.
Para generar un Modelo, es necesario utilizar la consola de comandos. Para ello, se debe
utilizar el siguiente comando: php artisan make:model <nombre-del-modelo>
. El archivo generado se guardará en el directorio app/Models, excepto el Modelo User,
17
IMÁGENES
que viene definido por defecto Y ÁLBUMES
al iniciar un proyecto de Laravel, y se encuentra en el
directorio app/ Por ejemplo, para generar el Modelo Usuario:
Dentro de un Modelo, definiremos básicamente el nombre de la tabla de la base de datos

correspondiente a este Modelo, los datos que se pueden manipular, y los datos que serán
ocultos, por lo que no son manipulables ni visibles para el usuario.
<?php
namespace App;
use Laravel\Passport\HasApiTokens;
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;
class User extends Authenticatable

{
use Notifiable;
/**
The attributes that are mass assignable.
*
@var array
*/
protected $fillable = [
'name', 'email', 'password',
];
/**
The attributes that should be hidden for arrays.
*
@var array
*/
protected $hidden = [
'password', 'remember_token',
];
}
Como se comentó anteriormente, el ORM obtiene la información de los modelos. Para

ello, se dispone de una serie de métodos para poder hacer consultas a la información del
modelo. Por ejemplo:
18
Con el método all(), se recuperan todos los registros existentes en el modelo Flight. En
el ejemplo, después de recuperar todos los registros, imprime los nombres de cada
registro.
Además de poder recuperar todos los registros de un modelo, se pueden hacer consultas
para realizar una búsqueda selectiva. Por ejemplo, si se quiere recuperar un único
registro del modelo, se puede usar el método find($parámetro-de-búsqueda), siendo el
parámetro de búsqueda, por ejemplo, el identificador del registro:
Además de recuperar datos, también se pueden crear nuevos registros, actualizarlos o

eliminarlos.
Para crear un nuevo registro, se debe generar una nueva instancia del modelo. Por
ejemplo:
19
En esta ejemplo se ha creado una instancia de la clase Flight (nuestro modelo). A
continuación, hemos asignado el atributo name con el atributo sacado de la petición, y
por último, hemos guardado el registro.
La actualización es similar a la creación de un registro, solo que en vez de crear una
instancia, se obtiene del modelo el registro que se quiere actualizar. Por ejemplo:
Para borrar un registro, utilizaremos el método delete(). Por ejemplo:
Existen más métodos para realizar las funciones anteriores, además de contar con
métodos para realizar más funcionalidades, pero estas son las funciones básicas.
2.2.1.4 Migraciones
Las migraciones actúan como un control de versiones de la base de datos,

permitiéndonos crear las tablas o columnas de la base de datos o hacer un
mantenimiento de estas(editar o borrar).
En las migraciones, las tablas se definen mediante programación orientada a objetos en
vez de usar un lenguaje de base de datos (como SQL). De este modo, tenemos
portabilidad para los diferentes motores de base de datos soportados por Laravel:
MySQL, PostgreSQL, SQLite y SQL Server.
¿Cómo se genera una migración?
Para crear una migración, debemos usar la consola de comandos y el comando Artisan
(sección 2.1.1.4). Por ejemplo:
Con este comando generaríamos la migración create_users_table.
A este comando le podemos añadir diferentes parámetros, como --table o --create, que
añadirán distintas funcionalidades a nuestra migración (como crear una plantilla de
trabajo básica).
Estructura de una migración
Una migración está formada por dos métodos: up y down.
 El método up es el método utilizado para crear nuevas tablas, columnas o

índices a la base de datos
 El método down es el método utilizado para borrar las tablas, columnas o
índices creadas en el método down.
Con estos dos métodos, utilizaremos el constructor de esquemas (Schema Builder) de

Laravel para crear o modificar tablas.
Como podemos ver en la figura anterior, en la función up creamos la tabla flights
mediante el método create de la clase Schema, añadiendo dentro de estos los distintos
atributos de la tabla (las columnas).
El Schema Builder
La clase Schema de Laravel proporciona una forma simple y transparente de manipular

las tablas de la base de datos.
Para crear una nueva tabla, se debe utilizar el método Schema::create, como podemos
ver en la figura anterior.
En el método Schema::create se deben definir dos parámetros: el nombre de la tabla a

crear, y un closure (función anónima) donde definiremos los atributos(o columnas) que
compondrán la tabla.
Schema cuenta con otros métodos, como el método Schema::drop para eliminar una
tabla de la base de datos, o el método Schema::rename para cambiar el nombre de una
tabla.
Schema builder cuenta con una amplia variedad de tipos posibles para crear un atributo.
Algunos de los tipos son:
Tabla 1 - Atributos de Schema Builder
Comando Descripción
$table->boolean('confirmed'); Equivalente a booleano en una tabla
$table->date('created_at'); Equivalente a DATE en una tabla
$table->string('email'); Equivalente a VARCHAR en una tabla
$table->increments('id’); Para incrementar un ID en la tabla (clave
primaria)
$table->float('equivalente a float'); Equivalente a float en una tabla
$table->integer('votes'); Equivalente a Integer en una tabla
$table->timestamps(); Añade las columas created_at y
updated_at
$table->enum('choices', Equivalente a ENUM en una tabla
[‘foo’,’bar’]);
Estos son algunos de los tipos más típicos, se puede consultar la lista de todos los tipos
posibles en la Documentación de Laravel, en el siguiente enlace:
https://laravel.com/docs/5.0/schema#adding-columns
Las migraciones van de la mano de los Seeders, técnica aportada por Laravel que
consta de una serie de archivos para poblar la base de datos de manera sencilla y rápida.
Seeders, Factories y Faker

IMÁGENES los
Como se ha explicado anteriormente, Y ÁLBUMES
Seeders son componentes de Laravel
utilizados para poblar las tablas de la base de datos. Su uso principal es para:
1. Crear datos de prueba para trabajar con la aplicación web durante su desarrollo.
2. Configurar el estado de las tablas a las que accederá nuestra aplicación web.
Los Seeders se generan a través de la consola de comandos, mediante el comando

maestro artisan:
Con pocas líneas de código podemos poblar una base de datos entera con multitud de
registros con distintos valores en cuestión de segundos, gracias a los Factories de
Laravel y al componente Faker.
Faker es el componente que se encarga de generar los datos de prueba para poblar
nuestra base de datos (como puedan ser nombres y apellidos aleatorios).
Por ejemplo, para crear 50 usuarios y generar una relación para cada usuario:
24
2.2.1.5 Middleware
Un middleware es una función que proporciona un mecanismo de filtro a las peticiones

HTTP realizadas por los usuarios. Tienen como objetivo reducir la carga de trabajo en
los controladores, y poder aplicar las restricciones necesarias que se hayan definido en
el sistema.
Los middleware nos pueden permitir agregar restricciones como autenticación,

geolocalización, diferenciación del rol de un usuario,etc.
El ejemplo más frecuente de middleware en Laravel es la autenticación. Así podremos

restringir el acceso a ciertas zonas de nuestro sistema para aquellos usuarios que no
tengan los privilegios requeridos para acceder a estas zonas.
¿Cómo se crea un Middleware?
Para crear un nuevo Middleware, es necesario utilizar el comando Artisan en la consola

de comandos con el comando php artisan make:middleware <nombre-del-
middleware>. Por ejemplo, crearemos el Middleware CheckAge:
Al generar un Middleware, se generar un archivo con el nombre que le hemos dado

dentro de la carpeta app/http/Middleware.
En este ejemplo, solo permitiremos dar acceso a nuestra ruta a los usuarios que su edad
sea mayor que 200. Si por el contrario, tuvieran menos años, serían redireccionados a la
ruta principal de nuestra página.
25
Para utilizar un Middleware, es necesario incluirlo en el archivo app/Http/Kernel.php,
en el listado de Middlewares. Una vez haya sido definido el Middleware en el listado de
middlewares del archivo Kernel.php, se definirá en que rutas se utilizará cada
Middleware. Por ejemplo, para acceder al perfil del administrador, es necesario
autenticarse. Para ello, utilizaremos el Middleware de autenticación(auth):
El middleware de autenticación (auth)
Laravel incluye por defecto una serie de Middlewares. Entre ellos, y uno de los
Middlewares más comunes en las páginas web, es el Middleware de autenticación.
La autenticación en Laravel IMÁGENES Y ÁLBUMES
está incluida por defecto, aunque es necesario activarla.
Para ello, se debe utilizar el siguiente comando en la consola de comandos:
Al ejecutar este comando, se generarán una serie de archivos, como un controlador,

diversas vistas para la autenticación (login) y registro de un nuevo usuario, diferentes
directorios y diversas funciones repartidas por el proyecto para que la funcionalidad de
autenticación se pueda llevar a cabo.
2.2.1.6 Controladores
Como se ha comentado durante el proyecto, Laravel es un framework web basado en la

arquitectura Modelo-Vista-Controlador (MVC). Por ello, en Laravel se deben definir
estos 3 componentes.
¿Qué son los controladores?
En la arquitectura MVC, un controlador es un componente que hace de intermediario

entre un modelo y una vista, tomando los datos del modelo, procesándolos y
enviándolos a la vista para que los muestre. Dentro del controlador, se definirán las
funciones que se deben llevar a cabo en la aplicación.
Por ejemplo, si se quiere mostrar todos los datos de un usuario en el sistema, en el

controlador UserController se definirá el código que dará esta funcionalidad, tomando
los datos necesarios del modelo y enviándoselos a la vista correspondiente, para que
esta última los muestre.
¿Cómo funciona un controlador?
Cuando un usuario realiza una petición HTTP (HTTP request), el controlador la recibe,
recogiendo los datos guardados en esta request. A continuación, realiza un proceso para
27
IMÁGENES
utilizar estos datos y realizar Y ÁLBUMES
la tarea que ha solicitado el usuario, recuperando los
datos del modelo necesario y procesándolos para cumplir su función. Para finalizar, el
controlador envía una respuesta HTTP (HTTP response) con los datos que ha pedido el
usuario, para que puedan ser mostrador por la vista correspondiente.
¿Cómo se generan los controladores?
Para crear un controlador, es necesario utilizar la consola de comandos. Para ello, se

utilizará el siguiente comando: php artisan make:controller <Nombre-del-
controlador>. Por ejemplo:
Con este comando, generaremos el controlador MoviesController, que se alojará en la

carpeta app/http/Controllers.
Dentro de un controlador, se definirán las diferentes funciones que se van a realizar en

las vistas asociadas a este controlador. Por ejemplo, para mostrar el perfil de un usuario,
se podría usar este controlador:
28
Como podemos comprobar, el método show recibe el parámetro id (mediante una

petición HTTP de tipo GET). Lo que hará este método es recuperar los datos del
modelo User que corresponden al usuario con este identificador. Una vez recuperados
estos datos, devolverá la vista user.profile, que mostrará los datos mencionados.
2.1.1.7 Vistas
En la arquitectura MVC, una vista es el componente encargado de presentar la

información recibida del modelo (generalmente a través del controlador), y que se suele
mostrar a través de un interfaz de usuario. Las vistas trabajan con los datos recibidos,
pero no tienen acceso directo a ellos.
En un sistema web, las vistas se implementan fundamentalmente en HTML,

complementándolas con CSS y, si se quieren añadir funcionalidades, Javascript. Sin
embargo, Laravel incluye un motor de plantillas llamado Blade, con el que se facilita
mucho la tarea de las vistas.
Las vistas en Laravel se almacenan en el directorio resources/views.
29
Blade
Blade es el motor de plantillas de Laravel. Con él, se pueden implementar plantillas en

HTML “vitaminadas”. Esto quiere decir que podemos usar más funcionalidades que las
que aporta HTML por defecto. En este caso, Blade permite utilizar PHP y diferentes
funciones, como decoradores que nos facilitarán la utilización de estructuras de control,
usar datos de un modelo, etcétera.
Las plantillas de Blade utilizan la extensión “.blade.php”, para poder diferenciarlo de un

archivo PHP común.
Ejemplo básico de una plantilla Blade:
Las vistas pueden ser invocadas a través de los controladores o las rutas. Para ello, se
debe utilizar el método view(). Para el ejemplo de la figura anterior:
Una de las ventajas que aporta Blade es la herencia entre plantillas. Gracias a la
herencia entre plantillas, podremos simplificar mucho nuestras vistas, generando
plantillas base, y plantillas hijas. Para explicar este concepto, utilizaremos un ejemplo.
Plantilla_padre.blade.php: Esta será la plantilla padre, la base de las demás.

{{--Esta es la plantilla base (plantilla padre) que servirá como esqueleto a las de
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Plantilla de prueba</title>
</head>
<body>
{{--Con yield, definimos la zona en la que se insertarán las diferentes plantillas

@yield('contenido')
</body>
</html>
Plantilla_hija.blade.php: plantilla que hereda de de plantilla_padre.blade.php.
efinimos de que plantilla se va a heredar-
a_padre')
efinimos cual es la zona en la que se inserta el codigo. Se pueden diferer varias sections--}}
h1>
llas blade se pueden insertar distintas estrcuturas de control, como if o for--}}

Al llamar en una ruta a plantilla_hija, lo que conseguiremos es cargar la plantilla
completa, contando con el esqueleto de plantilla_padre, y el contenido de plantilla_hija.
El resultado de la plantilla cargada sería:
octype html>
ml>
ad>
ta charset="UTF-8">
ta name="viewport"
tent="width=device-width, user-scalable=no, initial- scale=1.0, maximum-scale=1.0, minimum-scal
ta http-equiv="X-UA-Compatible" content="ie=edge">
tle>Plantilla de prueba</title>
ead>
dy>
>¡Hola Mundo!</h1>
ody>
2.2.1.8 Sistema de archivos
Laravel proporciona un competente sistema de archivos . Con el sistema de archivos de

Laravel, los usuarios pueden gestionar de forma simple los archivos del sistema de
forma local, con Amazon S3 o con diferentes sistemas de almacenamiento en la nube.
El archivo de configuración del sistema de archivos está alojado en

config/filesystems.php. En este archivo se configurarán los discos utilizados
(tanto locales como en la nube), la carpeta donde se almacenarán los archivos, la carpeta
pública para poder acceder a los archivos, etc.
El disco público
El disco público es el disco destinado a los archivos que son accesibles públicamente.
Por defecto, el disco publico usa el driver local y almacena los archivos en el directorio
storage/app/public. Para hacerlo accesible desde la web, es necesario crear un
enlace simbólico desde storage/app/public a public/storage. Para ello, es
necesario utilizar el siguiente comando en la consola de comandos:
Gestión de archivos
Las funciones del sistema de archivos se realizarán con la función Storage. A

continuación se explicarán las funcionalidades básicas para recuperar un archivo, subir
un archivo y borrar un archivo:
 Para subir un archivo, se utilizará el método put(). La sintaxis para este método
es Storage::put(‘<nombre del archivo para subir>’,’<archivo
a subir>’). Por ejemplo:
 Para recuperar un archivo, se utilizará el método get(). La sintaxis utilizada para

este método es Storage::get(‘<nombre del archivo>’). Por ejemplo:
 Para borrar un archivo, se utilizará el método delete(). La sintaxis utilizada para

este método es Storage::delete(‘<nombre del archivo>’) . Por
ejemplo:
Storage cuenta con más funcionalidad como puedan ser la posibilidad de cambiar la
visibilidad de un archivo, cambiar la localización de un archivo, etc.
2.2.1.9 Sistema de traducción (Localización)
Laravel cuenta con una serie de funcionalidades para crear un sistema web en varios
idiomas. Por defecto, el idioma del sistema web es el inglés.
33
IMÁGENES
Las traducciones de Laravel se guardanYen
ÁLBUMES
el directorio resources/lang. Dentro de
este directorio, se debe definir un directorio por cada idioma. Si se van a utilizar los
idiomas español e inglés, se deben utilizar las carpetas en/ y es/, quedando el directorio
completo del siguiente modo:
En cada directorio, se deben crear los archivos en los que se definirán las diferentes
traducciones. Por ejemplo, en el archivo messages.php de la figura anterior, crearemos
la traducción del párrafo para la bienvenida a la página:
Siendo ‘welcome’ la palabra clave, y ‘Welcome to our application’ el valor asociado a

esta clave. Para el archivo en español, tendríamos el siguiente contenido:
<?php
return [
‘welcome’ => ‘Bienvenido a nuestra aplicación’
];
Definiendo el locale
Locale es la palabra reservada utilizada para definir el idioma en el que está definida la
web en un momento exacto. Para cambiar el idioma, se debe utilizar el método
setLocale de la clase App. Por ejemplo, cambiaremos al entrar a la ruta
‘ejemplo.com/welcome/es’ el idioma a ‘es’:
34
siendo $locale el parámetro pasado por ruta.
Para obtener el idioma actual, se utilizará el método getLocale():
También podemos preguntar cuál es el locale actual con isLocale($idioma), el cuál nos
devolverá true si el idioma es el mismo que el parámetro del método. Por ejemplo:
Aplicar las traducciones en las vistas

Para utilizar las diferentes traducciones para el contenido de las vistas, se utilizará el
método trans() en las vistas de Blade. Para ello, es necesario utilizarlo entre los
decoradores ({{ trans() }} )como todas las funciones reservadas de Blade. Por
ejemplo:
Otra opción para utilizar las traducciones es usar el decorador @lang(). Por ejemplo:
En este proyecto se han utilizado las traducciones para inglés y para español. Para ello,
se ha hecho uso de las funciones mencionadas anteriormente, y un middleware que
genera una sesión para que se mantenga el idioma elegido.
35
2.2.2 jQuery
jQuery es una librería de Javascript de software libre y código abierto, desarrollado

inicialmente por Josh Resig, que simplifica la manera de interactuar con documentos
HTML, manipular el DOM, y otras funcionalidades de Javascript como manejo de
eventos, el desarrollo de eventos, o la implementación de técnicas AJAX en una página
web.
Fue publicado en agosto de 2006, y posee una Licencia MIT y una Licencia Pública
General de GNU, lo que da permiso a su uso en proyectos libres y privados.
jQuery es la librería de Javascript más popular actualmente.
2.2.3 Bootstrap
Twitter Bootstrap (comúnmente conocido como Bootstrap) es un framework web de

código abierto para el diseño de páginas web y aplicaciones web. Contiene plantillas de
diseño implementadas en HTML y CSS utilizadas para una serie distinta de
componentes de web como pueden ser botones, formularios, tipografías o menús de
navegación, entre otros. Además, incluye algunas funciones de Javascript.
Bootstrap es un framework utilizado únicamente para el desarrollo front-end.
Bootstrap, originalmente llamado Twitter Blueprint, fue desarrollado por Mark Otto y
Jacob Thornton, dos empleados de la empresa Twitter. Fue lanzado en agosto de 2011.
2.3 Otras herramientas
2.3.1 PhpStorm
PhpStorm es un IDE (entorno de desarrollo) comercializado y desarrollado por Jetbrains

para el desarrollo web con PHP.
PhpStorm proporciona unIMÁGENES Y ÁLBUMES
editor de PHP, HTML, CSS y Javascript, e incluye muchas
funcionalidades como el análisis de código en el momento, prevención de errores o
refactorizaciones automáticas de código.
PhpStorm incluye muchísimos plugins y funcionalidades para facilitar el trabajo al

desarrollador. Por ejemplo: incluye funciones para el debugging y para la realización de
pruebas, la posibilidad de configurar el entorno con el intérprete PHP utilizado, la
posible instalación de paquetes y plugins para complementar el desarrollo de código, la
posibilidad de configurar un sistema de versión de controles (como Git), etc.
La versión utilizada para este proyecto es la versión 2016.3
2.3.2 MAMP
MAMP (siglas de MacOS– MySQL – PHP/Perl/Python) es un conjunto de

herramientas (stack) open-source y gratuitas utilizadas para la ejecución de páginas web
dinámicas.
Dado que este proyecto se ha realizado en un Mac, se ha utilizado este conjunto de

herramientas, similares a otros conjuntos para Linux (LAMP) o Windows (XAMPP).
La funcionalidad principal que ha aportado este stack al proyecto es la posibilidad de

levantar un servidor de forma local con el intérprete de PHP, además de proporcionar un
Sistema de Gestión de Base de Datos (SGBD) MySQL, e interfaces de usuario como
phpMyAdmin para poder gestionar la base de datos de una manera más sencilla e
intuitiva.
La versión de MAMP utilizada en este proyecto es la versión 4.
2.3.3 MySQL
MySQL es un Sistema de Gestión de Bases de Datos (SGBD) desarrollado por Oracle

Corporation bajo licencia dual GPL y Licencia Comercial.
37
Es considerada la base deIMÁGENES Y ÁLBUMES
datos open-source más popular del mundo, especialmente
para el desarrollo web.
2.3.4 Navegadores
Un navegador web es un programa o aplicación utilizado para el acceso a la web, capaz

de recuperar e interpretar la información recibida a través de un recurso de información
para que están puedan ser visualizadas correctamente.
Los recursos de información son identificados a través de una URI(Uniform Resource

Identifier, en español “Identificador Uniforme de Recursos”) o a través de una
URL(Uniform Resource Locator, en español “Localizador Uniforme de Recursos”), que
pueden ser distintos tipos de archivos, como una página, un vídeo, una imagen, etc.
Los hiperenlaces (enlaces a otros recursos a los que se accede mediante un click o toque
en pantalla) son presentados en URI o URL para facilitar la navegación de los usuarios.
Los navegadores web actuales cuentan con un conjunto de herramientas para que los
desarrolladores puedan acceder a distintos datos y funcionalidades del sitio web al que
han accedido, pudiendo ver de forma ordenada la estructura de una página, los atributos
de los elementos o las peticiones realizadas al servidor, entre muchas otras
funcionalidades.
Los navegadores más populares del mercado son Google Chrome, Mozilla Firefox,
Internet Explorer/Microsoft Edge, Opera y Safari. De estos navegadores se han
utilizado la mayoría de los navegadores para realizar pruebas, ya que no todos los
navegadores interpretan la información de la misma manera. Además, no todos los
navegadores cuentan con las mismas herramientas para desarrolladores.
2.3.5 Git
Git es un sistema de control de versiones para el seguimiento de cambios en los

archivos de un proyecto y pensado para el mantenimiento de versiones en aplicaciones
cuando estas tienen un gran volumen de archivos, además de utilizarse para coordinar el
38
IMÁGENES
trabajo de un proyecto realizado Y ÁLBUMES
por varias personas. Fue diseñado por Linus Torvald
(creador de Linux).
2.3.6 Composer
Composer es una herramienta para la gestión de dependencias en PHP. Permite declarar

las librerías y paquetes de las que un proyecto depende y las gestiona (instala o
actualiza) de forma automática, quitándole trabajo al desarrollador.
Composer instala estas librerías en un directorio local del proyecto llamado “vendor”.
Por defecto, instala todos los paquetes o librerías en local, pero también se le puede
definir que instale una librería en formato global, para que se pueda acceder a ella desde
cualquier directorio del ordenador.
Composer funciona a través de la consola de comandos, con un comando específico

para su funcionamiento.
Composer utiliza Packagist (el mayor buscador de paquetes para PHP) para la búsqueda
de las dependencias.
2.3.7 Masonry
Masonry es una librería Javascript que permite colocar de manera óptima los elementos
de una página basándose en el espacio vertical disponible.
Esta librería fue desarrollada por Desandro. En este proyectos se ha utilizado para
organizar las galerías de imágenes. Un ejemplo de Masonry en este proyecto:
Ilustración 1 - Ejemplo de Masonry
3. Análisis Funcional
3.1. Documento de Requisitos
Tabla 2 - Lista de requisitos
Identificador Requisito
R1 El sistema debe contar con un diseño para web de escritorio.
R2 El sistema debe contar con un diseño específico para móviles.

R3 El sistema contará con un administrador que cuente con todos los
privilegios.
R3.1 El administrador se identificará mediante un correo electrónica y una
contraseña.
R3.2 El administrador puede subir una imagen.
R3.2 El administrador puede editar los datos de una imagen.
R3.3 El administrador puede borrar una imagen.
40
R3.4 El administrador puede crear un nuevo álbum.
R3.5 El administrador puede borrar un álbum.
R3.6 El administrador puede editar los datos de un álbum

R3.7 El administrador podrá filtrar las imágenes por categoría y por
álbumes
R3.8 El administrador puede filtrar los álbumes por categoría.
R4 El sistema contará con un panel de administración en el que el

administrador pueda realizar las diferentes acciones permitidas.
R4.1 Al panel de administración solo puede acceder un usuario de tipo

“Administrador”.
R4.2 El panel de administración contará con una sección para subir fotos.
R4.3 El panel de administración contará con una sección para modificar o

borrar las imágenes.
R4.4 El panel de administración contará con una sección para modificar o

borrar los álbumes.
R5 El sistema contará con un una página de login/identificación.
R6 El sistema contará con una página de registro.
R6.1 El registro contará con los siguientes campos obligatorios: nombre,

dirección de correo electrónico, contraseña y confirmación de la
contraseña.
R7 Los usuarios estándar no tendrán ningún privilegio en el sistema.
R8 La página de inicio estará formada por un carrusel de imágenes

(slider).
R9 El sistema contará con una cabecera disponible en todas las páginas,
donde se alojará un menú, un logo y un panel para cambiar el idioma.
R9.1 El sistema contará con un menú de navegación para acceder a las

diferentes secciones.
R9.2 El menú debe estar en la parte de arriba de la página.
R10 El sistema contará con un pie de página disponible en todas las

páginas, donde se mostrará información de contacto y redes sociales.
R11 El sistema tendrá una sección “Bodas”.
R11.1 La sección bodas estará formada por una galería de imágenes. Cada
imagen tendrá un texto indicando cual es la localización de la boda.
R12 El sistema tendrá una sección “Sobre Mí”.
R13 El sistema tendrá una sección “Prensa”.
R13.1 La sección prensa se dividirá en las categorías “Desfiles”,

”Publicaciones en prensa”, “Sesiones de fotos” y “Vídeos”.
R13.1.1 Cada categoría de la sección prensa contará con un listado de los

álbumes respectivos.
R14 El sistema tendrá una sección “Contacto”.
R15 El sistema tendrá una sección “Cursos”.
R16 El sistema contará con un enlace directo al blog.
R17 El sistema tendrá una versión en inglés y una versión en español.
R18 Un álbum pertenece a una categoría.
R19 Los álbumes contendrán imágenes.
R20 Cada álbum contará con una galería de imágenes.
R21 Las imágenes están compuestas por los atributos obligatorios álbum
(al que pertenece), archivo respectivo, URL de la imagen y categoría
y por los atributos opcionales ciudad y autor.
R22 Se pueden subir varias fotos simultáneamente, siempre y cuando

pertenezcan a la misma categoría, ciudad, álbum y autor.
R23 Un álbum se generará automáticamente con la subida de una foto,

siempre y cuando este álbum no exista previamente en el sistema.
R24 Todas las galerías de imágenes deben ser del tipo “Masonry”.
R25 El color de fondo del sistema web será blanco, exceptuando la página
de inicio.
R26 El color del texto será negro.
3.2 Casos de Uso
3.2.1 Definición y anotación
Un caso de uso es una representación de la interacción que hay entre un sistema y los
usuarios que utilizan sus funcionalidades. Se utilizan para representar los requisitos
funcionales del sistema.
En este apartado se describirán los casos de uso más importantes, mediante un modelo
de casos de uso y una descripción llevada a cabo con los casos de uso extendidos.
La notación UML utilizada para representar los casos de uso es la siguiente:
3.2.2 Actores
 Administrador: Es el actor que representa al administrador del sistema. Es el

único usuario con privilegios en el sistema.
 Usuario(Cliente): Es el actor que representa a un usuario cualquiera, ya sea

registrado o no registrado en el sistema. Se recuerda que los usuarios registrados
no tienen ningún privilegio en el sistema, únicamente el administrador.
3.2.3 Diagramas de casos de uso
Ilustración 2 - Diagrama de casos de uso

3.2.4 Casos de Uso extendidos
CU01 – Autenticarse en el sistema
Tabla 3 - Caso de uso autenticarse en el sistema
CU01 Autenticarse en el sistema

Versión 1.0
Actores Administrador
Descripción El administrador se autentica en el sistema mediante sus credenciales de
acceso. Si son correctas el sistema le identificará como usuario
autenticado.
Referencias -
# Administrador Sistema
1 Accede al área de
administración
2 El sistema le redirige al área de
identificación
Curso típico 3 Introduce los datos de acceso
de eventos 4 Valida las credenciales de acceso
5 Las credenciales de acceso son
correctas
6 El sistema redirige al
administrador al panel de
administración
CA1 Alternativa al paso 4 del CTE
Curso incorrectas
alternativo 1 5 Muestra el mensaje de error y
vuelve a pedir las credenciales de
acceso
CU02 – Subir una imagenIMÁGENES Y ÁLBUMES
Tabla 4 - Caso de uso subir una imagen
CU02 Subir una imagen

Versión 1.0
Actores Administrador
Descripción El administrador sube una imagen/varias imágenes.
Referencias Autenticarse en el sistema
1 Accede al área “Subir fotos”
2 El sistema muestra un formulario
de subida
3 El administrador rellena los
campos del formulario y
Curso típico adjunta las imágenes en el
de eventos campo correspondiente
4 Clicka en el botón “Subir”
5 El sistema realiza la funcionalidad
para subir las fotos en segundo
plano
6 El sistema muestra un mensaje de
éxito en la misma página
Curso # Administrador Sistema
alternativo 1 6 El sistema muestra un mensaje de
error en la misma página
46
CU03 – Crear un álbum IMÁGENES Y ÁLBUMES
Tabla 5 - Caso de uso crear un álbum
CU03 Crear un álbum

Versión 1.0
Descripción Cuando el administrador sube una imagen, si el álbum al que
pertenece no existe, se crea el álbum automáticamente
Referencias Subir una imagen
1 El sistema comprueba si existen

Curso típico de más imágenes con el mismo
eventos álbum
2 Al no existir más imágenes con el
mismo álbum, se genera un nuevo
álbum
Curso alternativo 2 Existen más imágenes con el
1 mismo álbum, así que únicamente
se agrupan las imágenes del
mismo álbum
47
CU04 – Editar una imagen
Tabla 6 - Caso de uso editar una imagen
CU04 Editar una imagen

Versión 1.0
Descripción El administrador edita una imagen
1 El administrador accede
al área imágenes
2 El administrador clicka
en el botón “editar” de
la imagen
3 El sistema muestra una ventana con
un formulario para que el
Curso típico de administrador edite los campos que
eventos considere necesarios.
4 El administrador realiza
los cambios que
considere necesarios y
clicka en el botón
“Guardar”
éxito de la operación
2 El administrador filtra
Curso alternativo las imágenes por
1 categoría y por álbum
3 El sistema muestra la vista filtrada
4 Vuelve al paso 2 del
CTE
Curso alternativo # Administrador Sistema
2 5 El sistema muestra un mensaje de
error de la operación
CU05 – Editar un álbum
Tabla 7 - Caso de uso editar un álbum
CU05 Editar un álbum

Versión 1.0
Descripción El administrador edita un álbum. Automáticamente, todas las fotos
pertenecientes a ese álbum actualizan el nombre de su campo “álbum”
1 El administrador accede al área
“Galerías”
2 El administrador accede a la
categoría donde se encuentre el
álbum a editar
3 El sistema actualiza la
vista con los álbumes de
la categoría seleccionada
4 El administrador clicka en el botón
“Editar”
5 El sistema muestra una
Curso típico de ventana con un
eventos formulario para que el
administrador edite los
campos que considere
necesarios
6 El administrador realiza los
cambios que considere necesarios
y clicka en el botón “Guardar”
7 El sistema
automáticamente cambia
el campo álbum de todas
las imágenes que
pertenecen a ese álbum
8 El sistema muestra un
mensaje de éxito de la
operación
# Usuario Sistema
Curso alternativo
1 7 El sistema muestra un
mensaje de error de la
operación
49
CU06 – Borrar una imagen
Tabla 8 - Caso de uso borrar una imagen
CU06 Borrar una imagen

Versión 1.0
Descripción El administrador borra una imagen
1 El administrador accede
al área imágenes
2 El administrador clicka
en el botón “borrar” de
la imagen
Curso típico de 3 El sistema muestra una ventana con
eventos un mensaje “¿Está seguro de que
quiere borrar esta imagen?”
4 El administrador
confirma la acción
éxito de la operación
2 El administrador filtra
Curso alternativo las imágenes por
1 categoría y por álbum
3 El sistema muestra la vista filtrada
4 Vuelve al paso 2 del
CTE
Curso alternativo # Administrador Sistema
2 5 El sistema muestra un mensaje de
error de la operación
50
CU07- Borrar un álbum IMÁGENES Y ÁLBUMES
Tabla 9 - Caso de uso borrar un álbum
CU07 Borrar un álbum

Versión 1.0
Descripción El administrador borra un álbum. Automáticamente, todas las fotos
pertenecientes a ese álbum son eliminadas.
1 El administrador accede al área
“Galerías”
2 El administrador accede a la
categoría donde se encuentre el
álbum a borrar
3 El sistema actualiza la
vista con los álbumes de
la categoría seleccionada
4 El administrador clicka en el botón
“Borrar”
Curso típico de 5 El sistema muestra una
eventos ventana con un mensaje
“¿Está seguro de que
quiere borrar este
álbum?”
6 El administrador confirma la
acción
7 El sistema
automáticamente borra
todas las imágenes que
pertenecen a ese álbum
8 El sistema muestra un
mensaje de éxito de la
operación
# Usuario Sistema
Curso alternativo
1 7 El sistema muestra un
mensaje de error de la
operación
51
CU08 – Filtrar una imagen
Tabla 10 - Caso de uso filtrar una imagen
CU08 Filtrar una imagen

Versión 1.0
Descripción Cuando el administrador accede al área de imágenes, puede filtrar una
imagen por categoría y por álbum
1 El administrador accede al
área “Imágenes”
2 El administrador clicka en
el desplegable “Filtrar por
Curso típico de categoría” y selecciona la
eventos categoría deseada
3 El sistema muestra la vista con
las imágenes filtradas por
categoría y muestra un
desplegable para filtrar por
álbum
4 Fin
4 El administrador clicka en
el desplegable “Filtrar por
Curso alternativo
álbum” y selecciona el
1 álbum deseado
5 El sistema muestra la vista con
las imágenes filtradas filtradas
por categoría y álbum
CU09- Registrarse IMÁGENES Y ÁLBUMES
Tabla 11 - Caso de uso registrarse
CU09 Registrarse
Versión 1.0
Actores Usuario
Descripción Un usuario se registra en el sistema
Referencias Subir una imagen
# Usuario Sistema
1 El usuario entra en la página
de registro
2 El sistema muestra un formulario
con los campos necesarios para
registrarse
El usuario rellena los campos
Curso típico de requeridos y clicka en el
eventos botón “Register”
4 El sistema valida los datos de
registro
5 Los datos de registro son
correctos
6 Crea un usuario en la base de
datos y el usuario ya puede
acceder al sistema
# Usuario Sistema
5 Los datos de registro son
incorrectos
Curso El sistema vuelve a mostrar el
alternativo 1 6 formulario con mensajes de error
para los datos
incorrectos/inválidos
7 El usuario corrige los datos
8 Vuelta al paso 4 del CTE
53
CU10- Identificarse en elIMÁGENES
sistema Y ÁLBUMES
Tabla 12 - Caso de uso identificarse en el sistema
CU10 Identificarse en el sistema

Versión 1.0
Actores Usuario
Descripción El administrador se autentica en el sistema mediante sus credenciales de
acceso. Si son correctas el sistema le identificará como usuario
autenticado.
Referencias -
# Usuario Sistema
1 Accede al área de
login/identificación
2 El sistema pide las credenciales
de acceso
Curso típico 3 Introduce las credenciales de
de eventos acceso
4 Valida las credenciales de acceso
correctas
6 El sistema redirige al usuario a la
página de inicio
# Usuario Sistema
Curso incorrectas
alternativo 1 5 Muestra el mensaje de error y
vuelve a pedir las credenciales de
acceso
3.3 Modelo Entidad-Relación
El modelo Entidad-Relación (MER) de esta aplicación es muy básico, ya que solo

cuenta con dos entidades, y las acciones del administrador son un CRUD (Create-Read-
Update-Delete) básico de imágenes.
Dado que la arquitectura utilizada para este sistema sigue el patrón Modelo-Vista-
Controlador (MVC) las entidades son representadas por los modelos de nuestro sistema.
Ilustración 3 - Modelo Entidad-Relación
Explicación del MER
Este Modelo Entidad-Relación cuenta con únicamente dos entidades:

 Usuario: representa el modleo ‘User’ del sistema. Cuenta con los siguientes
atributos:
o Id: el identificador (clave principal) único del usuario.
o Nombre: el nombre del usuario.
o Email: el email del usuario. Será el identificador para autenticarse en el
sistema.
o Contraseña: contraseña del usuario. Servirá para autenticarse en el
sistema.
o Rol: el rol de un usuario puede ser usuario o administrador. Como en
esta aplicación los usuarios básicos no tienen ninguna utilidad, lo que
importa es que un usuario sea administrador, ya que será el único usuario
con privilegios.
 Imagen: representa el modelo ‘Photo’ del sistema. Cuenta con los siguientes
atributos:
o Id: el identificador (clave principal) único de cada imagen.
55
o Album_id:IMÁGENES
identificadorY(nombre)
ÁLBUMES del álbum al que pertenece una
imagen.
o Nombre: el nombre de la imagen
o Url: Url de la imagen en el servidor
o Categoría: categoría a la que pertenece la imagen. Es un enumerado con
cinco posibilidades: boda, desfile, sesión de fotos, publicación en prensa
o cursos.
o Autor: nombre del autor de la fotografía.
Un usuario de tipo administrador puede publicar una o varias imágenes, o no publicar

ninguna imagen. Sin embargo, una imagen es publicada únicamente por un usuario (el
administrador).
4 Diseño de la aplicación
4.1 Diagramas de flujo
Los diagramas de flujo ayudan a representar los procesos/actividades de las principales

funcionalidades de la aplicación. Además, ayuda a representar la relación entre estos
procesos.
56
4.1.1 Autenticarse en el sistema (accede al panel de administración)
Ilustración 4 - Diagrama de flujo autenticarse en el sistema
El usuario (administrador) accederá a la página de identificación (login). En esta página

hay un formulario para introducir las credenciales de acceso e identificarse. El
administrador rellenará estas credenciales y las enviará. Si las credenciales son
correctas, el sistema redirigirá al administrador al panel de administración.
57
4.1.2 Subir una imagen
Ilustración 5 - Diagrama de flujo subir una imagen
El administrador, que se encuentra en el panel de administración, accederá al área

“Subir fotos”. Allí, la página mostrará un formulario con los campos a rellenar
necesarios para subir una o varias imágenes. El administrador rellenará los campos
requeridos y clickará en el botón “subir” para subir una imagen. Si la subida es correcta,
la página mostrará un mensaje de éxito. Si la subida no es correcta, la página mostrará
un mensaje de error, y el usuario tendrá que volver a rellenar el formulario
correctamente.
4.1.3 Editar una imagen
Ilustración 6 - Diagrama de flujo editar una imagen
El administrador, que se encuentra en el panel de administración, se dirige al área

“Imágenes”. Allí, puede filtrar las fotos por categoría y álbum, o no filtrar las fotos y
buscar la imagen que se quiere editar. Una vez encontrada la imagen a editar, el
administrador clickará enIMÁGENES
el botón conYunÁLBUMES
lápiz (editar). Aparecerá una ventana con un
formulario para editar los campos que se quieran cambiar. Cuando el usuario guarde
estos cambios, el sistema mostrará un mensaje de éxito o de error.
4.1.4 Borrar una imagen
Ilustración 7 - Diagrama de flujo borrar una imagen
60

“Imágenes”. Allí, puede filtrar las fotos por categoría y álbum, o no filtrar las fotos y
buscar la imagen que se quiere editar. Una vez encontrada la imagen a borrar, el
administrador clickará en el botón con un icono de papelera (borrar). Aparecerá una
ventana preguntando si el administrador quiere confirmar la operación. Si el
administrador confirma la operación, el sistema mostrará un mensaje de éxito o de error.
Si el usuario cancela la operación, desaparecerá la ventana.
61
4.1.5 Editar un álbum
Ilustración 8 - Diagrama de flujo editar un álbum

“Galerías”. En “Galerías”, filtra los álbumes por categoría. A continuación, una vez
encontrado el álbum a editar, clicka en el botón con un icono de lápiz (editar).
Aparecerá una ventana que mostrará un formulario con los campos que se pueden
editar; el administrador realizará los cambios necesarios y guardará los cambios. La
página mostrará un mensaje de error o de éxito.
4.1.6 Borrar un álbum
Ilustración 9 - Diagrama de flujo borrar un álbum

“Galerías”. En “Galerías”, filtra los álbumes por categoría. A continuación, una vez
encontrado el álbum a editar, clicka en el botón con un icono de papelera (borrar).
Aparecerá una ventana que mostrará un mensaje de confirmación. Si el administrador
confirma la operación, la página mostrará un mensaje de éxito o de error. Si cancela la
operación, se cerrará la venta y no ocurrirá nada.
4.2. Diagrama de clases
Un diagrama de clases en UML (Lenguaje Unificado de Modelado) es un diagrama que

describe la estructura de un sistema. En este, se muestran las clases del sistema, sus
atributos y métodos, además de tener diferentes relaciones entre las clases.
Laravel es un framework web basado en el patrón Modelo-Vista-Controlador, pero al

ser en gran parte archivos de PHP y HTML, tiene una estructura característica en la que
muchos de los componentes no son clases. Por ejemplo, las vistas no son clases, ya que
son archivos con estructura HTML y PHP.
Por ello, se ha decidido formar un diagrama de clases basado en MVC y hacer una
adaptación de las vistas, tratándolas como si fuesen clases. Aun así, como no son clases
reales, no se han tratado ni atributos ni métodos.
Este diagrama de clases solo se basa en las clases principales, ya que Laravel cuenta con
una gran cantidad de componentes conectados unos con otros.
Por ello, se han modelado únicamente las clase de modelos, vistas y controladores.
Ilustración 10 - Diagrama de clases
IMÁGENES
Como se puede comprobar Y ÁLBUMES
y se ha explicado anteriormente, existen tres tipos de
componentes: Modelos, Vistas y Controladores.
 Modelos: este sistema cuenta con dos modelos: el modelo User (que viene
instanciado por defecto al comenzar un proyecto de Laravel) y el modelo Photo.
Todo modelo en Laravel debe heredar de la clase Model. Por tanto, se han
modelado la clase padre Model y las clases hijas User y Photo.
 Controladores: ese sistema cuenta con varios controladores, pero solo se han
modelado los controladores más importantes: PhotoController, que es el
controlador asociado al modelo Photo, y a todas las vistas que dependen de este
modelo, AdminController, que es el controlador asociado a las vistas del panel
de administración, y conectado con el middleware de autenticación, y los
controladores LoginController y RegisterController, dos de los controladores
que incluye Laravel con su módulo de autenticación. Estos controladores se
asocian con el modelo User y con las vistas ‘Login’ y ‘Register’
respectivamente.
 Vistas: las vistas en Laravel se basan en el motor de plantillas Blade, como se

explicó en la sección 2.2.1.7: Vistas. Las vistas generadas en Blade tienen una
serie de funcionalidades de gran utilidad, siendo uno de ellas la herencia. En este
proyecto se ha utilizado esta funcionalidad, teniendo así dos vistas padre (una
para el panel de administración y otra para el resto de vistas) y una serie de
vistas hijas asociadas a estas vistas padre.
o Layout: es la plantilla base (padre) para todas las vistas excepto para el
inicio y para el panel de administración. De Layout, heredan las vistas
“Sobre Mí”, “Bodas”, “Prensa”, “Cursos”, “Contacto”, “Login” y
“Register”.
o Layout_admin: es la plantilla base (padre) para las vistas del panel de
administración. De Layout_admin heredan las vistas “UploadView”,
“Listado_fotos” y “Listado_albums”.
66
o IndexView:IMÁGENES Y ÁLBUMES
es la única vista que no hereda de ninguna plantilla base, ni
es plantilla base para otras plantillas. Es la vista de la ruta de inicio del
sistema web.
4.3. Diagramas de secuencia
Los diagramas de secuencia en UML (Lenguaje Unificado de Modelado) se utilizan

para modelar la interacción entre los objetos de un sistema.
En estos diagramas se han utilizado los controladores necesarios, la clase funciones.js

(clase en la que se encuentran la mayoría de las funciones Javascript), la bases de datos,
las clases básicas necesarias de Laravel y los actores de los casos de uso.
4.3.1 Registrarse en el sistema
Ilustración 11 - Diagrama de secuencia registrarse en el sistema
Un usuario accede a la vista de registro, rellena los campos y envía el formulario. Este
se envía mediante una petición HTTP de tipo POST a la dirección ‘/register’. El
ReigsterController, que es quien recibe esa petición POST, envía los datos de la petición
(request) a la clase RegistersUsers, quien se encarga de procesar los datos y enviarlos a
67
IMÁGENES
la base de datos. Si el registro Y ÁLBUMES
ha sido correcto, el usuario será redirigido a la página
de inicio del sistema.
4.3.2 Autenticarse en el sistema
Ilustración 12 - Diagrama de secuencia autenticarse en el sistema
El administrador (o un usuario registrado, aunque el único que tiene privilegios es el

administrador, por eso se la tomado como el actor de este diagrama) accede a la ruta
‘/admin’, y un middleware le redirige a la página de login. El administrador introduce
sus credenciales de acceso y las envía mediante una petición HTTP de tipo POST a la
ruta ‘/login’. El LoginController, que recibe esta petición, envía el request (petición) a
la clase AuthenticateUsers mediante el método login. Una vez lo ha recibido la clase
AuthenticateUsers, valida las credenciales en la base de datos. Si las credenciales son
correctas, el administrador es redirigido al panel de administración.
4.3.3 Subir una foto
Ilustración 13 - Diagrama de secuencia subir una foto
El administrador, que se encuentra en el panel de administración, rellena los campos

necesarios para subir una o varias fotos. Cuando este envía el formulario, se enviará el
formulario mediante una función AJAX una petición de tipo POST a la ruta
‘api/photos’. Esta petición la recibirá el controlador PhotoController, quien se encargará
de crear los registros en la base de datos. Si acción es correcta, el administrador recibirá
un mensaje de éxito en el panel de administración.
69
4.3.4 Borrar una foto
Ilustración 14 - Diagrama de secuencia borrar una foto
El administrador, que se encuentra en el panel de administración, selecciona la foto a

borrar y confirma el borrado de esta foto; el borrado es tratado por el método
borrarFoto(id) que se encuentra en el archivo funciones.js. Este enviará una petición
http en formato AJAX de tipo DELETE con la ruta del identificador de la imagen:
‘/api/potos/id’. El controlador PhotoController recibirá esta petición, y se encargará de
eliminar el registro de la base de datos. Si la acción ha tenido éxito, el administrador
recibirá un mensaje de éxito en el panel de administración.
4.3.5 Borrar un álbum
Ilustración 15 - Diagrama de secuencia borrar un álbum
El administrador, que se encuentra en el panel de administración, selecciona el álbum a

borrar y confirma el borrado de este álbum; el borrado es tratado por el método
borrarAlbum(álbum_id) que se encuentra en el archivo funciones.js. Este enviará una
petición http en formato AJAX de tipo GET con la ruta del identificador del álbum:
‘/api/albums/álbum_id’. El controlador PhotoController se encargará de devolverle
todos los álbumes con ese identificador. Una vez recibido este listado, se borrarán todas
las fotos que pertenezcan a este álbum. Esto se realizará mediante un bucle for, que
llamará al método borrarFoto(id) explicado anteriormente. Si todas las fotos han sido
borradas correctamente, el usuario recibirá un mensaje de éxito en el panel de
administración.
4.3.6 Editar una imagen
Ilustración 16 - Diagrama de scuencia editar una imagen
El administrador, que se encuentra en el panel de administración, selecciona la foto a

editar y modificará los campos que desea editar; la modificación de una foto es tratada
por el método editarFoto(id) que se encuentra en el archivo funciones.js. Este enviará
una petición http en formato AJAX de tipo PUT con la ruta del identificador de la
imagen: ‘/api/potos/id’. El controlador PhotoController recibirá esta petición, y se
encargará de modificar el registro de la base de datos. Si la acción ha tenido éxito, el
administrador recibirá un mensaje de éxito en el panel de administración.
4.3.7 Editar un álbum
Ilustración 17 - Diagrama de secuencia editar un álbum
El administrador, que se encuentra en el panel de administración, selecciona el álbum a

editar y rellenará los campos que desea editar; la modificación de un álbum es tratada
por el método editarAlbum(álbum_id) que se encuentra en el archivo funciones.js. Este
enviará una petición http en formato AJAX de tipo GET con la ruta del identificador
del álbum: ‘/api/albums/álbum_id’. El controlador PhotoController se encargará de
devolverle todos los álbumes con ese identificador. Una vez recibido este listado, se
modificarán todas las fotos que pertenezcan a este álbum. Esto se realizará mediante un
bucle for, que llamará al método editarFoto(id) explicado anteriormente. Si todas las
fotos han sido borradas correctamente, el usuario recibirá un mensaje de éxito en el
panel de administración.
4.4 Arquitectura del sistema
4.4.1 El patrón MVC
El patrón MVC (Modelo-Vista-Controlador) es un patrón de arquitectura de software,

pensado para separar los datos (modelos) de los interfaces de usuario (vistas) y de la
lógica del sistema, que es desarrollada en los controladores.
Por lo tanto, nos encontramos con tres componentes:

 Modelo: es el componente encargado del trabajo con los datos. Gestiona los
accesos a la información correspondiente, almacenados generalmente en una
base de datos.
 Vista: componente encargado de presentar la información recibida del modelo,

por lo general a través del modelo, y que se suele mostrar a través de un interfaz
de usuario. Las vistas trabajan con los datos recibidos, pero generalmente no
tienen acceso directo a ellos.
 Controlador: componente que sirve de enlace entre los modelos y las vistas,
tomando los datos del modelo y enviándoselos a una vista, muchas veces
procesados antes de ser enviados (filtrados, aplicando una fórmula, etc).
Este patrón aporta muchas ventajas, buscando facilitar el desarrollo y el

mantenimiento de aplicaciones mediante la reutilización de código, la separación de
conceptos, legibilidad, etc.
Ilustración 18 - Esquema MVC. Wikipedia
4.4.2 API REST
REST (REpresentational State Transfer), traducido al español “Transferencia de

Representación de Estado”, también conocido como RESTful, es un estilo
arquitectónica que nos permite crear aplicaciones o servicios utilizables desde cualquier
dispositivo que sea capaz de entender el protocolo HTTP.
Características de REST
 Protocolo cliente/servidor sin estado: la petición HTTP contiene la

información necesaria para ser ejecutada, por lo que es posible que ni cliente ni
servidor necesitan guardar ningún estado previo. Aun así, existe la posibilidad
de definir alguna respuestas a peticiones HTTP concretas como cacheables,
pudiendo ejecutarse en un futuro la misma respuesta para peticiones idénticas.
 Las operaciones más importantes en un sistema REST son las operaciones

GET(leer/consultar), POST(crear), PUT(editar) y DELETE(borrar), que son las
operaciones básicasIMÁGENES Y con
de un sistema ÁLBUMES
funciones CRUD (Create. Read, Update
and Delete).
 Los objetos en REST siempre se manipulan a través de una URI (Universal

Resource Identifier), siendo la URI el único identificar de un recurso REST en
concreto. A través de una URI podemos acceder a la información para leerla o
modificarla.
 Interfaz uniforme: a la hora de transferir datos en un sistema REST, este aplica

acciones concretas (POST,GET,PUT o DELETE) sobre los recursos, que deben
estar identificados por una URI. Por esto, es posible que exista una interfaz
uniforme para sistematizar el proceso realizado con la información.
 Sistema de capas: existe una arquitectura jerárquica entre los componentes del
sistema. Cada capa lleva a cabo una funcionalidad concreta dentro del sistema
REST.
 Uso de hipermedios: los hipermedios permiten que un usuario pueda navegar

por el conjunto de objetos a través de enlaces. En el caso de una API REST, los
hipermedios son capaces de proporcionar al cliente y al usuario los enlaces
necesarios para ejecutar acciones concretas.
Para cualquier API REST es obligatorio disponer del principio HATEOAS

(Hypermedia As The Engine Of Application State), traducido como
“Hipermedia Como Motor del Estado de la Aplicación). Este principio define
que cada vez que se hace una petición al servidor y este devuelve una respuesta,
parte de la información enviada en la respuesta serán los hipervínculos de
navegación asociada a otros recursos del cliente.
76
Un ejemplo de API REST en este proyecto sería: para la URI

(maytelucas.com/api/photos), se mostraría la siguiente vista
Ilustración 19 - Ejemplo API REST
4.5 Interfaces de usuario
Dado que este proyecto es un trabajo a medida para un cliente, el interfaz está basado en
los requisitos dados por el cliente.
La web cuenta con un menú de 7 ítems, en el cual seis de ellos son secciones y uno es
un enlace. Además, cuenta con las secciones de login, registro y las secciones de admin,
ocultas para un usuario normal.
El diseño del sistema busca la adaptabilidad para distintos dispositivos, siguiendo el

concepto ‘Responsive Design’ (diseño adaptativo).
77
IMÁGENES
Todas las secciones cuentan Y ÁLBUMES
con una plantilla base en la que se encuentran la cabecera
(header), donde se encuentra el logo de la página, el menú de navegación y el menú de
cambio de idioma, y el pie de página (footer), donde se encuentran los logos de las
redes sociales e información básica de la web. Todas las secciones tienen un color de
fondo blanco exceptuando la página de inicio, en la que el fondo de pantalla está
formado por un carrusel de imágenes.
Inicio
La pantalla de inicio está compuesta por una cabecera y un pie de página semi-opacos, y
en el fondo de pantalla, un carrusel de imágenes (slider) que ocupa toda la pantalla del
navegador.
Ilustración 20 - Diseño escritorio página home
78
Ilustración 21 - Diseño responsive página home
Sobre mí
Esta sección cuenta con un texto acompañado de imágenes, además de la cabecera y el

pie de página:
Ilustración 22 - Diseño escritorio página sobre mí
79
Ilustración 23 - Diseño escritorio página sobre mí (2)
Ilustración 24 - Diseño responsive sobre mí
Ilustración 25 - Diseño responsive sobre mí (2)
Bodas
La sección bodas cuenta con una galería de imágenes en forma de mosaico con el
nombre de la ciudad de la boda debajo de cada imagen:
Ilustración 26 - Diseño escritorio página bodas
Ilustración 27 - Diseño escritorio página bodas (2)

Ilustración 28 - Diseño responsive bodas (1)
Ilustración 29 - Diseño responsive bodas (2)
Prensa
El apartado prensa cuenta con 4 apartados: desfiles, publicaciones, sesiones y vídeos.
Cada apartado cuenta con un listado de álbumes pertenecientes a cada apartado,

exceptuando el apartado vídeos en el que se encuentra un listado de vídeos.
Se mostrará únicamente una de las categorías ya que todas siguen el mismo diseño.
Ilustración 30 - Diseño escritorio página prensa
Ilustración 31 - Diseño responsive página prensa (1)
Ilustración 32 - Diseño responsive página prensa (2)
Cursos
La sección cursos está compuesta por un texto, además de la cabecera y el pie de

página.
Ilustración 33 - Diseño escritorio página cursos
Ilustración 34 - Diseño responsive página cursos
Contacto
En la sección contacto se encuentra la información de contacto (email y teléfono)
además de la cabecera y el pie de página:
Ilustración 35 - Diseño escritorio página contacto

Ilustración 36 - Diseño responsive página contacto
Página en inglés
La página tiene la posibilidad de visualizarse en inglés o en español, siendo el español el

idioma por defecto. Debido a que el diseño del sistema es igual en los dos idiomas,
cambiando solo los textos, se mostrará una única imagen para mostrar el sistema en inglés.
Ilustración 37 - Diseño página en inglés
Panel de administración
El panel de administración cuenta con una interfaz diferente al resto de las secciones. Cuenta con
un menú lateral y no contiene ningún pie de página. Tiene un total de tres secciones: la sección
“Subir fotos”, la sección “Imágenes” y la sección “Galerías”.
Sección “Subir fotos”:

Ilustración 38 - Diseño panel de administración "Subir fotos"
Sección “Imágenes”:
Ilustración 39 - Diseño panel de administración "Imágenes"

Sección “Galerías”: IMÁGENES Y ÁLBUMES
Ilustración 40 - Diseño panel de administración "Galerías"
5. Despliegue
Como este es un proyecto para un cliente, ha sido necesario ponerlo en producción
(desplegarlo). Esto consiste en pasar el proyecto del servidor local a un servidor real.
Para llevar a cabo el despliegue del proyecto, ha sido necesario configurar diferentes
parámetros del servidor y varias rutas y configuraciones del proyecto, adaptado al
servidor en cuestión.
Para ello, se ha utilizado un servidor compartido con intérprete PHP, configurando los
parámetros de subida de archivos y los permisos del archivo .htaccess. Como se ha
comentado anteriormente, también fue necesario adaptar las rutas a las del servidor,
debido que el servidor que se utilizó divide los archivos públicos de los privados en las
carpetas “html” y “data” respectivamente. Como no es posible la subida de archivos a la
raíz del servidor debido a que es compartido, se tuvieron que dividir todos los archivos
privados de los públicos, yendo todas las carpetas del proyecto a la carpeta “data”
exceptuando el contenido de la carpeta “public”, que se añadió a la carpeta pública
“html”.
94
Cabeceras CORS
Otro de los aspectos importantes de configuración del proyecto fue la configuración de

las cabeceras CORS (Cross-Origin Resource Sharing), que se encargan del control de
peticiones HTTP de origen cruzado, realizadas cuando un recurso de un dominio hace
una petición HTTP a un recurso de otro dominio.
A la hora de hacer peticiones XMLHttpRequest (XHR, las peticiones utilizadas al hacer

una llamada AJAX), es importante tener configuradas correctamente las cabeceras de
control. Debido a que este proyecto utiliza constantemente peticiones XMLHttpRequest
a la API desde la parte cliente, es importante tener configuradas estas cabeceras
comentadas anteriormente.
Para ello, se añadió una clase PHP llamada “Cors.php” en la carpeta de Middlewares, en
el cual se gestionan las cabeceras de control permitidas:
95
<?php
namespace App\Http\Middleware; use Closure;

class Cors
{
/**
Handle an incoming request.
*
@param\Illuminate\Http\Request$request
@param\Closure$next
@return mixed
*/
public function handle($request, Closure $next)

{
if ($request->isMethod('options')) { return response('', 200)
->header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT, DELETE')
->header('Access-Control-Allow-Headers', 'accept,
content-type,
x-xsrf-token, x-csrf-token'); // Add any required
headers here
}
return $next($request);
}
Esta clase actuará como middleware de las peticiones del proyecto, activando las
cabeceras necesarias para las peticiones HTTP de origen cruzado, y sus métodos. Para
ello, se añadió el archivo en la lista de middlewares del proyecto. Por último, se añadió
en el archivo de rutas el siguiente código para permitir las peticiones desde el servidor:
<?php
if (isset($_SERVER['HTTP_ORIGIN'])) {
header("Access-Control-Allow-Origin:
{$_SERVER['HTTP_ORIGIN']}");
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 86400'); // cache for
1 day
}
// Access-Control headers are received during OPTIONS
requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
if
(isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
header("Access-Control-Allow-Methods: GET, POST,
PUT, DELETE, OPTIONS");
if
(isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
header("Access-Control-Allow-Headers:
{$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
exit(0);
}
6. Resultado final
Una vez desarrollado, configurado y desplegado el proyecto, se puede ver el resultado
del sistema web en la URL:
http://www.maytelucas.com
7. Conclusiones
El objetivo principal de este proyecto ha sido crear un sistema web completo que
cumpla los requisitos planteados por el cliente. Para ello, se han utilizado las
tecnologías que se consideraban más adecuadas, buscando en todo momento un sistema
eficiente, intuitivo y estético.
Para conseguir este objetivo, primero se realizó una reunión con el cliente para definir
los requisitos del proyecto. Debido a que el cliente quería contar con un panel de
administración para gestionar el contenido de su página, fue necesario considerar
97
IMÁGENES
tecnologías del lado del servidor, y no Y ÁLBUMES
únicamente utilizar tecnologías del lado del
cliente, como se pensó inicialmente.
Fue importante comparar las distintas tecnologías a utilizar pensando en las

características del servidor elegido. Debido a que el servidor tenía limitaciones a la hora
de instalar dependencias ya que era un servidor compartido, se consideró que la
tecnología adecuada para el lado del servidor sería PHP. Se decidió utilizar el
framework web Laravel debido a, entre otras cosas, su potencial, la cantidad de
herramientas y funcionalidades que proporciona, lo intuitiva que es y la gran comunidad
con la que cuenta a sus espaldas. Al incluir herramientas por defecto como el ORM, un
motor de plantillas, las migraciones, el mecanismo de autenticación, las traducciones o
el sistema de almacenamiento de archivos, entre otros, Laravel era una herramienta
totalmente preparada para el proyecto que se ha realizado.
Se consideró conveniente el uso de un API REST para la gestión de los recursos del
sistema, especialmente debido a que es un sistema dinámico en la que el administrador
puede subir o borrar fotos a su antojo, por lo que es necesario consultar a menudo los
registros de la base de datos. Además, se decidió utilizar la tecnología AJAX para
mejorar la eficiencia del sistema.
Sobre el desarrollo del proyecto, se comenzó desarrollando las vistas de la parte de

escaparate de la página, aquellas a las que puede acceder cualquier persona desde su
ordenador, realizando pruebas sin utilizar el sistema de almacenamiento de archivos ni
el panel de administración. Se buscaron las diferentes opciones para mostrar las galerías
de imágenes de la página, decidiendo finalmente que la galería “Masonry” era la más
apropiada.
Una vez finalizadas las vistas mencionadas en el párrafo anterior, se comenzó a

desarrollar el panel de administración, por lo que fue necesario desarrollar una serie de
funcionalidades básicas, como la autenticación o la subida de archivos, además de la
gestión de las imágenes y los álbumes (se pueden crear, borrar o editar).
98
IMÁGENES
A continuación, se desarrolló Y de
el sistema ÁLBUMES
traducciones. Una vez se comprobó que el
sistema funcionaba de manera correcta y que el diseño cumplía los requisitos del
cliente, se pasó a poner en producción el proyecto.
Para realizar un diseño correcto del sistema y una buena documentación, se han
utilizado una serie de técnicas y fundamentos aprendidos en el Grado de Ingeniería de
Software.
Se han realizado distintas reuniones durante todo el desarrollo del proyecto para
comprobar que este cumplía con los requisitos del cliente, y si fuera necesario,
actualizarlos.
Personalmente, ha sido un proyecto que me ha ayudado tanto en el aspecto de

aprendizaje técnico como a la hora de seguir las instrucciones de un cliente,
aprendiendo así a tener que cumplir los requisitos pactados.
En el aspecto técnico, la necesidad de desarrollar un sistema con una experiencia de

usuario buena ha sido uno de los factores más costosos, ya que hay que preparar una
serie de condiciones para que un usuario con pocos conocimientos técnicos pueda
utilizar la herramienta.
He ganado mucha experiencia en el desarrollo web gracias al desarrollo de este

proyecto, tanto en la parte de cliente (ya sea en las funcionalidades o en el diseño de
interfaces de usuario y de experiencia de usuario) como del lado del servidor.
8. Futuros proyectos
Al ser un proyecto a medida desarrollado para un cliente concreto, no se tiene intención
de desarrollar ningún futuro proyecto con él. No obstante, al ser un sistema de gestión
de contenido, siendo el contenido las imágenes, el esqueleto de las galerías y el panel de
administración podría ser válido para cual sistema web en el que se pretenda gestionar
imágenes.
Como futuras mejoras, seIMÁGENES Y ÁLBUMES
pretende mejorar la estructura de imágenes-álbumes, para
facilitar la organización de ambas, ya que en este momento los álbumes se forman a
partir de las imágenes, y no tienen un modelo propio.
También se pretende mejorar el menú de administración, con un filtro mejorado y un

interfaz de usuario más funcional en la sección para subir archivos (con posibilidad de
visualizar las fotos que se están subiendo, drag & drop, etc).
Por otra parte, se estudiará la posibilidad como futuro proyecto ajeno al cliente de
montar un sistema de galerías de imágenes subidas por distintos usuarios. De este
modo, se podría utilizar la estructura completa del sistema, adaptándola a la posibilidad
de que todos los usuarios puedan subir sus álbumes y visitar los álbumes de otros
usuarios, incluyendo un panel de administración de usuarios, la vista de perfil de un
usuario y nuevas vistas más detalladas.
9. Glosario
Acrónimos
- AJAX: Asynchronous JavaScript And XML (JavaScript asíncrono y XML).
- HTTP: HyperText Transfer Protocol.
- JSON: Javascript Object Notation.
- CSS: Casacadde Style Sheet.
- HTML: HyperText Markup Language.
- API: Application Programming Interface.
- PHP: PHP: Hypertext Processor.
- Patrón MVC: patrón Modelo-Vista-Controlador.
- ORM: Object-Relational Mapping.
- REST: Representational State Transfer.
- CRUD: Create,Read,Update,Delete.
100
- URL: Uniform Resource Locator
- URI: Uniform Resource Identifier
10. Bibliografía
- [Consultado en enero-febrero de 2017] Styde Limited: https://styde.net/
- [Consultado en enero-febrero de 2017] Taylor Otwell: https://laravel.com/docs/
- [Consultado en enero de 2017] Fundación Wikimedia Inc. :

https://es.wikipedia.org/wiki/Laravel
- [Consultado en enero de 2017] Max Ehsan: http://laravelbook.com/laravel-

introduction/
- [Consultado en enero de 2017] Richos: https://richos.gitbooks.io/laravel-

5/content/capitulos/chapter6.html
- [Consultado en enero de 2017] Miguel Ángel Alvarez, 17 de diciembre de 2015:

http://www.desarrolloweb.com/articulos/seeders-laravel5.html
- [Consultado en enero de 2017] Fundación Wikimedia Inc:

https://es.wikipedia.org/wiki/JQuery
- [Consultado en enero de 2017] Wikimedia Foundation, Inc:

https://en.wikipedia.org/wiki/JQuery
- [Consultado en enero de 2017] Fundación Wikimedia Inc:

https://es.wikipedia.org/wiki/Twitter_Bootstrap
- [Consultado en enero de 2017] Wikimedia Foundation,

Inc: https://en.wikipedia.org/wiki/Twitter_Bootstrap
- [Consultado en enero-febrero de 2017] The PHP Group:

http://php.net/manual/es/intro-whatis.php
- [Consultado en enero-febrero de 2017] Fundación Wikimedia Inc:

https://es.wikipedia.org/wiki/PHP
- [Consultado en enero-febrero de 2017] Wikimedia Foundation,

Inc: https://en.wikipedia.org/wiki/PHP
101
IMÁGENES
- [Consultado en febrero Y ÁLBUMES
de 2017] Fundación Wikimedia Inc:
https://es.wikipedia.org/wiki/JavaScript
- [Consultado en febrero de 2017] Wikimedia Foundation,

Inc: https://en.wikipedia.org/wiki/JavaScript
- [Consultado en febrero de 2017] Mozilla Developer Network:

https://developer.mozilla.org/es/docs/Web/JavaScript
- [Consultado en febrero de 2017] Fundación Wikimedia

Inc: https://es.wikipedia.org/wiki/HTML5

Inc: https://en.wikipedia.org/wiki/HTML5

Inc: https://es.wikipedia.org/wiki/HTML

Inc: https://en.wikipedia.org/wiki/HTML

Inc: https://en.wikipedia.org/wiki/Cascading_Style_Sheets

Inc:
https://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada
- [Consultado en febrero de 2017] Wikimedia Foundation, Inc:

https://en.wikipedia.org/wiki/PhpStorm
- [Consultado en febrero de 2017] appsolute GmbH:

https://www.mamp.info/en/documentation/
- Consultado en febrero de 2017] Wikimedia Foundation,

Inc: https://en.wikipedia.org/wiki/MAMP
- Consultado en febrero de 2017] Wikimedia Foundation,

Inc: https://en.wikipedia.org/wiki/Git
- [Consultado en febrero de 2017] Nils Adermann, Jordi Boggiano:

https://getcomposer.org/doc/00-intro.md
- [Consultado en febrero de 2017] Desandro: http://masonry.desandro.com/
- [Consultado en febrero 2017] Jose María Fernandez Gutierrez, 6 de enero

de 2015: http://www.ladrupalera.com/drupal/desarrollo/javascript/tutorial-
sobre- masonry
- [Consultado en febrero de 2017] Fundación Wikimedia Inc:

https://es.wikipedia.org/wiki/Diagrama_de_clases
102
- [Consultado en febrero de 2017] Mozilla Developer Network:

https://developer.mozilla.org/es/docs/Web/HTTP/Access_control_CORS
103

Universidad Politécnica de Madrid: Desarrollo de Un Sistema Web para La Gestión de Imágenes Y Álbumes

Cargado por

Copyright:

Formatos disponibles

Universidad Politécnica de Madrid: Desarrollo de Un Sistema Web para La Gestión de Imágenes Y Álbumes

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Universidad Politécnica de Madrid: Desarrollo de Un Sistema Web para La Gestión de Imágenes Y Álbumes

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD POLITÉCNICA DE MADRID

Escuela Técnica Superior De Ingeniería de Sistemas Informáticos

TRABAJO DE FIN DE GRADO

Grado en Ingeniería de Software

DESARROLLO DE UN SISTEMA WEB PARA LA

AUTOR: JAIME SÁNCHEZ PEDRÓS

Finalmente, se presentarán las conclusiones y los futuros proyectos y mejoras que

4.3.7 Editar un álbum...........................................................................................................73

El mundo de la moda es un mercado competitivo que requiere una buena imagen, y en

El objetivo principal de este proyecto es el desarrollo de un sistema web completo en el

En el aspecto profesional, se pretende desarrollar un sistema que cumpla con los

En el aspecto personal, uno de los objetivos más importantes es el desarrollo de un

PHP (acrónimo de PHP Hypertext Preprocessor) es un lenguaje de programación de

PHP es un lenguaje que cuenta con la facilidad de poder se instalado en la mayoría de

El lenguaje PHP no ha contado con un estándar hasta 2014, con el lanzamiento de la

Actualmente, PHP se encuentra en la versión 7.1.1, aunque la versión más utilizada

Javascript (abreviado comúnmente JS) es un lenguaje de programación interpretado de

Como se ha comentado en el párrafo anterior, Javascript se utiliza principalmente para

HyperText Markup Language (abreviado con sus siglas, HTML) es un lenguaje de

Hojas de estilo en cascada o CSS(siglas de Cascading Style Sheets) es un lenguaje para

2.2 Frameworks y librerías

¿Qué es un framework web?

Laravel es un framework web de código abierto utilizado para desarrollar aplicaciones

Como se comentó anteriormente, Laravel busca que el desarrollo de las aplicaciones se

 Arquitectura MVC: Laravel se basa en una arquitectura Modelo-Vista-

La sintaxis básica del comando es:

php artisan <acción que se desee realizar>

El comando básico para poder ver la lista de comandos completa es:

php artisan list

Algunas de los comandos de artisan utilizados en este proyecto son:

 Crear una vista

 Crear una migración

 Activar el módulo de autenticación

2.2.1.2 Sistema de rutas

http://www.ejemplo.com  Ruta raíz

http://www.ejemplo.com/ruta-ejemplo  Una de las posibles direcciones.

Route::<métodoHTTP>(‘<nombre de la ruta>’,<función a realizar>);

Siendo <métodoHTTP> uno de los posibles métodos HTTP: get,post,put,patch,options

Siendo UserController la clase UserController y showProfile un método definido en

2.2.1.3 Eloquent ORM. Modelos

Un ORM (Object Relational Mapping, o Mapeo Objeto-Relacional) es una técnica de

¿Por qué utilizar un ORM?

El ORM incluido en Laravel es Eloquent. Este aporta una implementación sencilla y un

Las funciones que Eloquent aporta facilita la realización de consultas y peticiones

En arquitectura MVC, un Modelo es un componente encargado del trabajo con los

Modelos en Laravel y relación con Eloquent

Dentro de un Modelo, definiremos básicamente el nombre de la tabla de la base de datos

class User extends Authenticatable

Como se comentó anteriormente, el ORM obtiene la información de los modelos. Para

Además de recuperar datos, también se pueden crear nuevos registros, actualizarlos o

Para borrar un registro, utilizaremos el método delete(). Por ejemplo:

Las migraciones actúan como un control de versiones de la base de datos,

¿Cómo se genera una migración?

Con este comando generaríamos la migración create_users_table.

Estructura de una migración

Una migración está formada por dos métodos: up y down.

 El método up es el método utilizado para crear nuevas tablas, columnas o

Con estos dos métodos, utilizaremos el constructor de esquemas (Schema Builder) de