Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Añadir un menú a la aplicación Symfony - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 17 de octubre de 2020 por Amadeo M.

150 visualizaciones

Más información Transcripción

Descargar la transcripción

Vamos a seguir mejorando nuestra aplicación y de momento lo que vamos a incluir es algo tan simple como un pequeño menú, ¿de acuerdo? 00:00:01
Si nosotros volvemos a nuestra aplicación vemos que o bien vamos por empleado o bien vamos por departamento, pero no hay nada que enlace todo a la aplicación. 00:00:09
Bueno, vamos a ver cuál es el sitio más indicado y parece que la plantilla que realmente arranca todo es esta de BaseHTML. 00:00:17
Y podría ser indicado poner el body, aquí en el body, el menú. Podríamos ponerlo directamente ahí, igual que hemos hecho con el CSS o como hemos puesto esto, o podríamos incluir un ficherito que después ejecutemos aparte. 00:00:29
Vamos a optar por esa opción para no mezclar todo en este fichero y vamos a incluir algo que sea, pues simplemente vamos a llamarle menú HTML Twig, vamos a incluir este, vamos a crear aquí en templates ese ficherito, vamos a crear un nuevo archivo que se llame así, menú HTML Twig y vamos a ver qué hacemos con él. 00:00:44
Bueno, este menú simplemente tiene que arrancar, dentro de Base, tiene que arrancar o el índice de empleado o el índice de departamentos, ¿vale? 00:01:15
Vamos a incluirlo, vamos a incluir cómo arrancamos ese índice. 00:01:29
Una manera sería poner botones de esta manera o enlaces. 00:01:34
Aquí vamos a poner, por ejemplo, enlaces. Voy a copiarme este que está aquí ya. Me lo voy a copiar aquí y voy a poner dos enlaces. Voy a poner un enlace que nos vaya, quitamos los comentarios, un enlace que me vaya directamente al índice de empleados y yo pondré por aquí empleados y otro similar a este que me vaya a departamentos. 00:01:36
¿Vale? 00:02:08
Bueno, esto estaría bien que estuviera dentro de una zona de navegación o de menú. 00:02:09
Vamos a ver nuestro CSS, que ya lo tenemos bastante olvidado, nuestro CSS. 00:02:13
Vamos a ver que tenemos aquí, si tenemos algo de otras aplicaciones, que hable algo de menú o similar. 00:02:18
Vamos a hacer una ojeada, a ver si hubiera algo por aquí. 00:02:24
Y, y, y, y, bueno, vemos esto de user, que nos puede valer, que simplemente dice, pon estas cosas a la derecha. 00:02:28
ponlo flotante a la derecha 00:02:36
vale, voy a ponerle flotante a la derecha 00:02:38
algo que se llame 00:02:41
menú, y entonces 00:02:42
en nuestro menú vamos a darle 00:02:44
un div class 00:02:46
menú 00:02:48
y aquí ya sabemos que es donde van a aparecer 00:02:49
las distintas opciones 00:02:53
vale, incluso para separarla 00:02:55
vamos a utilizar una barbita 00:02:58
para que veamos cada opción 00:02:59
separada de otra 00:03:01
vamos a ver si con estos cambios 00:03:02
Esto ejecuta algo distinto 00:03:04
Voy a recargar esta página 00:03:07
Y efectivamente estoy viendo empleados y departamentos 00:03:08
¿Vale? 00:03:13
Lo que no estoy viéndolo es aquí 00:03:14
Me gustaría verlo en esta zona de aquí 00:03:16
Para que no me esté incorriendo todo el rato 00:03:18
De momento voy a ver que funciona 00:03:19
Si voy a empleados estoy en esta página 00:03:21
Perfectamente 00:03:23
Si estoy en departamentos estoy en esta página de aquí 00:03:24
Ya solamente hay que alterar este div class menu 00:03:28
Que realmente me lo esté instalando 00:03:31
en la zona correspondiente 00:03:34
aquí parece que debería 00:03:38
funcionar, por lo que sea 00:03:40
no me está funcionando 00:03:42
vamos a ver si es que esta página 00:03:43
no la he recargado suficientemente 00:03:47
efectivamente, todavía está en caché 00:03:49
la de user, esto es un error muy habitual 00:03:51
voy a cargar otra vez 00:03:53
esta página y ahora ya está 00:03:55
en menú, y ahora ya si recargará esto 00:03:57
debería funcionarme 00:03:59
en aquella zona, no lo veo de momento 00:04:03
vamos a volver a ver 00:04:07
que este esté bien cargado 00:04:08
esto ya está en menú ahí 00:04:09
creo que no hay ningún punto menú antes 00:04:13
y ahora ya sí, me he mordado 00:04:15
en control F5 para que me 00:04:19
recargue de verdad la página y miren 00:04:22
dónde está ya, correctamente he puesto 00:04:24
si no le gusta este formato, pues ya está 00:04:26
si queremos mejorarlo 00:04:28
o queremos poner botones o cualquier otra cuestión 00:04:29
ya sabemos cómo hacerlo, simplemente ya tenemos 00:04:32
aquí como accediendo 00:04:34
a cualquiera, o empleados o a departamentos 00:04:35
nos aparece, hasta ahora 00:04:38
cuando poníamos aquí la decisión 00:04:43
teníamos que decir 00:04:45
a qué entidad íbamos a trabajar 00:04:45
con qué entidad íbamos a trabajar 00:04:49
nos gustaría que cuando 00:04:50
dieramos raíz directamente ya nos 00:04:52
apareciera el gestor de la aplicación 00:04:55
en este caso cuando hacemos esto nos 00:04:57
aparece esta pantalla de bienvenida 00:04:59
y nos gustaría crear una ruta 00:05:00
que fuera la ruta raíz que nos llevará 00:05:02
ya a la aplicación, a lo que queramos de la aplicación 00:05:05
bueno, para ello 00:05:07
vamos a ir a un nuevo fichero 00:05:08
ejecutar un nuevo fichero 00:05:10
que es roots.yaml. Eso está dentro de la configuración 00:05:12
configuración roots.yaml. Y ahí podemos 00:05:17
definir un elemento nuevo. Vamos a decir que nuestro índice 00:05:21
nuestro nuevo índice para la ruta barra 00:05:25
va a manejarla el controlador 00:05:31
de nuestra aplicación. En nuestro 00:05:35
caso, por ejemplo, vamos a llamarla el de empleado controller. 00:05:39
Y dentro de ella el controlador índice. Vamos a ver quién es este controlador índice, lo tenemos por aquí, empleado controller, y nuestro índice, nuestro empleado índice, pues justamente va a ser este primero de aquí, ¿vale? Este primero que aparece aquí. 00:05:43
Bueno, vamos a ver si ahora yo puedo recargar esta página y me va directamente a esa aplicación 00:06:00
Y efectivamente ya no me hace falta más que entrar para ir a la aplicación de empleados o departamentos 00:06:09
Aprovecho este vídeo para incluir una cosa más 00:06:16
Cuando yo quiero borrar algo, voy a ir por ejemplo a departamentos y voy a generar un departamento rápido 00:06:18
Aquí hay algún problema, empleados, departamentos 00:06:24
voy a ver si está bien hecho bien el menú 00:06:34
que es posible que no 00:06:37
ya saben que cuando hacemos 00:06:38
copias y pegas se nos quedan cosas 00:06:40
y efectivamente 00:06:43
ven aquí como habíamos puesto 00:06:44
dos veces empleado index 00:06:46
y es departamento index 00:06:48
vale, ejecutamos otra vez 00:06:50
y ahora ya cuando vamos a departamento 00:06:53
funciona perfectamente 00:06:55
estos son los errores del directo 00:06:56
bueno, pues voy a añadir 00:06:59
un nuevo departamento al cual voy a llamar 00:07:00
error 00:07:03
lo añado 00:07:04
y ahora 00:07:05
voy 00:07:08
a editarlo y dentro de esto 00:07:09
a eliminarlo, y me sale este mensaje 00:07:12
todavía en inglés, entonces esto se nos olvidó 00:07:14
en su momento, buscar 00:07:17
donde estaba y traducirlo 00:07:18
voy a cancelar para utilizarlo después 00:07:20
bueno, pues vamos a nuestro 00:07:23
código y en la zona 00:07:25
donde poníamos delete tanto empleado 00:07:27
en nuestro caso estamos con departamento 00:07:29
o como departamento 00:07:30
aquí aparece onSummit 00:07:32
y miren que aquí está ese mensaje 00:07:35
entonces este mensaje hay que traducirlo 00:07:38
vamos a traducirlo 00:07:40
estar seguro 00:07:42
estar seguro de borrar 00:07:45
este departamento 00:07:48
por ejemplo en este caso, ¿vale? 00:07:52
voy a copiarlo 00:07:55
y que no se me olvide cambiar después a depa 00:07:56
voy a guardar esto, voy a hacer lo mismo en empleado 00:07:57
hago lo mismo 00:08:00
y ahora pongo empleado 00:08:07
y vamos a ver si ahora nos sale perfectamente 00:08:09
voy a recargar esto para que cargue la página 00:08:13
le doy a eliminar 00:08:18
y efectivamente ya tenemos esto funcionando 00:08:20
voy a borrarlo de verdad 00:08:24
y efectivamente ha desaparecido de la lista de departamentos 00:08:26
¿qué nos quedaría en la aplicación? 00:08:31
pues básicamente lo más importante que nos quedaría en esta aplicación 00:08:34
es introducir un sistema de sesiones para controlar las personas que pueden acceder a esta aplicación. 00:08:38
Ya lo hacemos en otro vídeo. 00:08:46
Idioma/s:
es
Autor/es:
Amadeo Mora
Subido por:
Amadeo M.
Licencia:
Dominio público
Visualizaciones:
150
Fecha:
17 de octubre de 2020 - 12:17
Visibilidad:
Público
Centro:
IES CLARA DEL REY
Duración:
08′ 49″
Relación de aspecto:
1.78:1
Resolución:
1364x768 píxeles
Tamaño:
33.93 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid