Estudios de Informática, Multimedia y Telecomunicaciones

Grado de multimedia

Programación web avanzada

• Para dudas y aclaraciones sobre el enunciado, contactad con el consultor responsable

de vuestra aula.
• Es necesario entregar la solución en un fichero ZIP O RAR. Adjuntad el fichero en un
mensaje dirigido al buzón Entrega y registro de EC.
• El nombre del fichero debe ser ApellidosNombre_PW_PRACTICA con la extensión
.rar o .zip.
• Consultad la fecha de entrega en el calendario.

PRÁCTICA 1: Vue.js

Introducción

En esta práctica adaptaremos la web que construimos en la primera práctica para hacer
uso de alguna de las características del framework Vue.js

Descripción de l’aplicación

Si recordamos la aplicación constaba de un total de 4 páginas. Un listado con todas las

reservas futuras, una página para ver el detalle de una reserva, una para poder
modificar o hacer una alta de una reserva y por último un listado con las reservas de
las próximas 24 horas.

Modificaciones globales de la aplicación

- La asociación de todos los eventos de la aplicación se deberán hacer

mediante Vue.
Modificaciones de cada página

Modificaremos la carga de los datos y construcción de la tabla. (1 punto)

La carga de los datos se realizará mediante una petición ajax de jQuery y una
vez en cliente mediante Vue construiremos el html. Recordad que la instancia
de Vue dispone de la propiedad data y con la ayuda de los iteradores que nos
proporciona el framework podremos llevar a cabo la funcionalidad.
Muchos de vosotros construisteis el html de la tabla mediante php en el
servidor otros enviasteis los datos a cliente y mediante jQuery construisteis el
html. Independientemente de cómo lo hicierais deberéis modificar para hacerlo
de la manera indicada.

Incluir un campo para filtrar la tabla por nombre y apellidos. (1 punto)

Incluiremos un campo de texto mediante el cual el usuario podrá ir

introduciendo el nombre y apellido del titular de la reserva y automáticamente
la tabla se filtrará mostrando los resultados coincidentes.
El filtrado se debe hacer en cada tecleo del usuario y sólo puede haber un
campo de texto para ambos valores, nombre y apellidos.
Por supuesto, la funcionalidad se debe realizar mediante características
propias de Vue.
Incluir selectores para filtrar por fecha (1 punto)

Incluiremos dos selectores de fecha, desde y hasta, para poder filtrar por un
intervalo de fechas. En cada cambio de selección del usuario la tabla se filtrará
mostrando al usuario los resultados coincidentes.
La funcionalidad se debe realizar mediante características propias de Vue.

Ordenación de las columnas (1 punto)

Al hacer click en cualquier cabecera de columna (Nombre, Apellidos, Fecha o

Comensales) se ordenará automáticamente la tabla según el siguiente patrón:
- Primer click: Se ordenará ascendentemente por el campo seleccionado.
- Segundo click: Se ordenará descendentemente por el campo seleccionado.
-
La funcionalidad se debe realizar mediante características propias de Vue.

Modificación del link de las reservas en las próximas 24 horas (0,5 punto)

La consulta para saber si debemos mostrar o ocultar el link lo seguiremos

haciendo con la función Ajax de jQuery, pero una vez tengamos la respuesta
mostraremos o ocultaremos el link mediante una de las características de Vue.
Modificaremos las validaciones de los campos (1 punto)

Las validaciones de los campos fecha y comensales las seguiremos haciendo con
la función submit de jQuery.

Cuando una de estas validaciones falle se mostrará un mensaje entendible en la

cabecera y se cambiará el color del campo en cuestión. Todo esto se hará con los
características propias de Vue.

Modificaremos la carga de los datos y construcción de la tabla. (1 punto)

La carga de los datos se realizará mediante una petición ajax de jQuery y una
vez en cliente mediante Vue construiremos el html. Recordad que la instancia
de Vue dispone de la propiedad data y con la ayuda de los iteradores que nos
proporciona el framework podremos llevar a cabo la funcionalidad.
Muchos de vosotros construisteis el html de la tabla mediante php en el
servidor otros enviasteis los datos a cliente y mediante jQuery construisteis el
html. Independientemente de cómo lo hicierais deberéis modificar para hacerlo
de la manera indicada.

Incluir un campo para filtrar la tabla por nombre y apellidos. (1 punto)

Incluiremos un campo de texto mediante el cual el usuario podrá ir

introduciendo el nombre y apellido del titular de la reserva y automáticamente
la tabla se filtrará mostrando los resultados coincidentes.
El filtrado se debe hacer en cada tecleo del usuario y sólo puede haber un
campo de texto para ambos valores, nombre y apellidos.
Por supuesto, la funcionalidad se debe realizar mediante características
propias de Vue.
Incluir selectores para filtrar por fecha (1 punto)

Incluiremos dos selectores de fecha, desde y hasta, para poder filtrar por un
intervalo de fechas. En cada cambio de selección del usuario la tabla se filtrará
mostrando al usuario los resultados coincidentes.
La funcionalidad se debe realizar mediante características propias de Vue.

Ordenación de las columnas (1 punto)

Al hacer click en cualquier cabecera de la columna (Nombre, Apellidos, Fecha o

Comensales) se ordenará automáticamente la tabla según el siguiente patrón:
- Primer click: Se ordenará ascendentemente por el campo seleccionado.
- Segundo click: Se ordenará descendentemente por el campo seleccionado.
-
La funcionalidad se debe realizar mediante características propias de Vue.

Modificaremos la carga de los datos. (0,5 punto)

La carga de los datos se realizará mediante una petición ajax de jQuery y una
vez en cliente mediante Vue asignaremos el resultado al html. Recordad que
la instancia de Vue dispone de la propiedad data y que las propiedades de los
campos se pueden enlazar.