Saltar navegación

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

Adaptación visual de un proyecto 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.

171 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, ya hemos visto que nuestra aplicación es realmente fea, entonces vamos a ver cómo vamos modificando las plantillas o los segmentos que tengamos que modificar para que el aspecto de nuestra aplicación mejore sustancialmente. 00:00:01
Lo primero será ir traduciendo. Voy a volver aquí a lo que es los ficheros que tengo y en este caso a donde quiero ir es a mis plantillas, a las plantillas que tengo aquí. 00:00:15
Tenemos aquí una plantilla base, voy a borrar estos que ya de momento no he de trabajar con ellos, y tengo una plantilla base en la cual toda la aplicación tiene esta definición hecha y podemos cambiar o meter bloques de título, de hojas de estilo, de cuerpo y de javascript. 00:00:25
Y toda la aplicación se llama, o va a tener como título, Welcome, ¿vale? 00:00:45
Bueno, nosotros podemos ya decirle directamente que nuestra aplicación, este Welcome, vamos a ponerlo aquí para verlo, 00:00:51
este Welcome que lo tendremos en la base, en la tabla, aquí ha sido cambiado por empleado index, 00:00:59
Pero podemos poner ya en todos los sitios que nuestra aplicación se llame como queramos llamar. 00:01:06
Mantenimiento de empleados, por ejemplo. 00:01:13
Esto sería lo que pondríamos en todos los sitios en caso de que no tenga su propio bloque de título definido. 00:01:18
Esta es la aplicación base. 00:01:25
Es un buen sitio para definir nuestra propia hoja de estilo para todo el entorno, por ejemplo. 00:01:26
Podríamos hacerlo ya. 00:01:32
o para poner cualquier elemento que queramos introducir 00:01:33
todo el rato, ¿de acuerdo? 00:01:37
entonces de momento lo dejamos así 00:01:38
vamos a guardar 00:01:40
y vamos a ver qué ocurre 00:01:41
estábamos en empleado 00:01:43
pues vamos a ver en empleado 00:01:46
qué templates 00:01:48
o qué plantillas tenemos 00:01:52
la primera que estamos trabajando es esta que se llama 00:01:53
index.html 00:01:56
que vemos efectivamente que el título 00:01:57
del bloque lo cambia 00:01:59
cambia el título del bloque por empleado index 00:02:01
¿vale? 00:02:04
Nosotros me gusta más mantener todo el rato como título de la aplicación, la parte de aquí arriba, mantenimiento de empleados, con lo cual, de momento, una cuestión que vamos a hacer es eliminar directamente este bloque. 00:02:05
La primera línea que teníamos aquí es que extiende lo que hace base, lógicamente. Base más lo que aquí vayamos añadiendo. 00:02:18
el bode, podemos cambiar el título de esta página 00:02:24
por lista de empleados, y vamos a ver simplemente con estos cambios 00:02:29
como nos cambia nuestra plantilla 00:02:36
prácticamente aquí arriba ya tenemos mantenimiento de empleados y aquí 00:02:39
lista de empleados, es decir, está funcionando 00:02:44
podemos poner el identificador 00:02:47
o poner código, o poner cualquier cosa, nombre, nacido 00:02:50
Vamos a cambiar esto por fecha de nacimiento y vamos a poner aquí unas acciones. 00:02:55
Vemos que esta es la cabecera de esta tabla y vemos aquí que hay un cuerpo de la tabla. 00:03:06
Y en este cuerpo lo que hace es recorrer todos los empleados en cada empleado. 00:03:13
Entonces, dice, para cada empleado, en los empleados que hay, vamos a mostrar su ID, su nombre y su nacido. 00:03:24
Para empezar, nacido lo pone en formato año, mes y día 00:03:31
Como podemos ver, nosotros estamos acostumbrados en España a hacerlo como día, mes y año 00:03:35
Hacemos ese cambio, ¿vale? 00:03:43
Después además, aquí no me está mostrando de qué departamento, en qué departamento está incluido este empleado 00:03:46
Vamos a incluirlo 00:03:52
con estas dos llaves 00:03:54
lo que hacemos es que llamamos a un campo 00:03:58
una información 00:04:00
voy a decir empleado.departamento 00:04:01
si hiciéramos esto 00:04:05
posiblemente ya nos daría el nombre 00:04:07
vamos a comprobar 00:04:10
porque teníamos el método toString 00:04:13
o si no, podríamos dentro de departamento 00:04:15
haber preguntado por el nombre 00:04:19
y también nos hubiera funcionado 00:04:20
¿Vale? Cualquiera de las dos opciones nos vale. 00:04:24
Entonces nos saldría esto de empleado de departamento nombre. 00:04:27
Vamos a dejarlo así que parece más elegante. 00:04:30
Y tenemos dos opciones. 00:04:33
O bien mostrar esta información, la formación correspondiente al empleado, o bien editarla. 00:04:35
¿Vale? 00:04:42
Bueno, podemos mantener las dos. 00:04:43
Llegamos a mantener la de mostrar. 00:04:45
Y, por ejemplo, imagínense que no queremos editar directamente. 00:04:49
¿Vale? 00:04:54
lo voy a comentar simplemente para no borrarlo 00:04:54
y tenemos una estructura muy curiosa 00:04:57
esta estructura es muy bonita 00:04:59
y esta es propia de Twig 00:05:00
Twig es esta sección general de aquí 00:05:01
y es un sistema de plantillas 00:05:03
que ya ven que empieza cada estructura 00:05:04
cuando queremos estructurar de control 00:05:07
con llave y tanto por ciento 00:05:09
y dice for empleado sin empleado 00:05:12
else 00:05:14
si no, es una estructura muy rara 00:05:15
quiere decir, si hay algún empleado 00:05:17
hacemos esto, y si no 00:05:20
mostramos esto de aquí 00:05:21
Entonces, cambiamos el mensaje y que no haya, que no se ha encontrado registro, ponemos no hay ningún empleado. 00:05:23
Bien. 00:05:36
El último mensaje a cambiar es este botón de aquí, de Create New. 00:05:38
Y yo voy a poner, ¿de acuerdo? 00:05:44
Bueno, vamos a cambiar esto y ver cómo queda. 00:05:49
Pues, realmente ha quedado muy bien. 00:05:53
Ya es una cuestión que vemos bastante más clarito, estas cuestiones. 00:05:56
Por supuesto, esta tabla nos gustaría, nos gustaría que esta tabla se mostrara en condiciones, etc. 00:05:59
Ahora lo vamos a ir haciendo. 00:06:04
Como lo siguiente que queremos hacer es cambiar el formato este para que se vea por la tablita, 00:06:08
con sus raquitas, etc., etc., pues lo que vamos a hacer es crear una hoja de estilo, 00:06:13
común para toda la aplicación, ¿vale? 00:06:18
Entonces, ¿cuál es la primera página que arrancamos siempre en este proyecto? 00:06:21
Pues justo a esa que llamamos pública 00:06:26
Esta de aquí 00:06:29
Esta de aquí es la primera que arrancamos 00:06:30
Tiene información que nunca vamos a tocar 00:06:33
O casi nunca vamos a tocar 00:06:35
Si se acuerdan, ven aquí el bootstrap 00:06:36
Que nos sirvió en su momento para arrancar Doctrine en otros ejemplos 00:06:40
Y es en este directorio que se ejecuta 00:06:43
Este directorio public donde se ejecuta 00:06:47
Lo que se ve al exterior 00:06:49
Con lo cual es un buen sitio para generar una hoja de estilo 00:06:51
Voy a crearla dentro de un directorio, voy a crear una nueva carpeta que se llame CSS y dentro de esta voy a generar un fichero, un archivo que se llame style.css, ¿de acuerdo? 00:06:55
Bueno, y aquí genero, lo tengo ya en el portapapeles, y aquí voy a generar un CSS, ¿vale? 00:07:10
Un CSS muy simplón, muy simplón, simplemente que me diga que cambie el tipo de letra y que me muestre algo sobre las tablas, ya veré después qué voy quitando, ¿vale? 00:07:19
Que me muestre los borders, los bordes de la tabla, etcétera, etcétera. 00:07:28
Con esto poquito, que tengo de las aplicaciones, después veo si me sobra o me quito algo, con esto me valdría para empezar a funcionar. 00:07:33
Bien, ¿dónde tengo que cargar yo esto para que lo cargue en todas las páginas? Pues si lo quiero en todas, para toda la aplicación, el mejor sitio es aquí mismo. 00:07:40
Con lo cual yo aquí incluiría un link rel igual style sheet type igual text css y la referencia, aquí, la referencia de css respecto al index.php, pues es simplemente css style css y cierro. 00:07:49
¿Vale? Vamos a ver si esto surte efecto. 00:08:23
Bueno, en un primer momento aparentemente no, pero voy a ver si realmente he tomado esto. 00:08:30
Voy a pinchar aquí para ver si este fichero existe o no existe. 00:08:37
Y me está diciendo que no, que no existe. 00:08:43
Porque la ruta en que lo estoy poniendo es la ruta de empleado. 00:08:44
¿Vale? ¿Lo ven? 00:08:48
Entonces digo, no, exactamente ahí no es donde lo quiero poner. 00:08:49
Donde debería ponerlo es bajando un nivel. 00:08:53
¿Vale? Vamos a ver si esto ahora aquí me funciona de verdad. Vamos a darle otra vez y efectivamente hemos cambiado esto de aquí. Bueno, ya vemos varias cosas. Primero, cuando pusimos los cabeceras, que antes casi ni se veían, pues el identificado estaba bien, el nombre estaba bien, la fecha de nacimiento era correcta y además en el formato que queríamos y aquí teníamos el departamento. 00:08:57
Nos ha faltado meter en el columnado de arriba, en los títulos, el departamento. 00:09:25
Vamos a hacerlo hecho facto. 00:09:30
Vamos a irnos al índice de aquí y vamos a incluir el departamento que teníamos. 00:09:31
¿De acuerdo? 00:09:45
Si volvemos a verlo, efectivamente, lo vemos correcto. 00:09:46
¿De acuerdo? 00:09:49
Bueno, ya le hemos cambiado un montón de cosas. 00:09:50
Vamos a ir ahora, por ejemplo, a mostrar finanzas. 00:09:52
Y también lo vemos en este formato. 00:09:55
Este formato puede ser adecuado 00:09:58
Ya saben que no me gusta nada usar tablas para mostrar formularios 00:10:01
Creo que para eso están los labels, etc. 00:10:05
Pero bueno, si seguimos esta idea 00:10:07
Vemos que esto también está fría funcionando 00:10:09
Nos permite editar y borrar 00:10:12
La edición nos sigue saliendo igual de antes 00:10:14
Y en borrar exactamente igual 00:10:19
Pero ya tenemos esta parte al menos más aparente 00:10:22
Vamos a arreglar ahora la opción de mostrar. En mostrar tenemos esta información que se ve bastante fea y el título podría valer, pero vamos a cambiar los elementos. Por ejemplo, estas etiquetas que vayan alineadas a la derecha, que la fecha vaya bien, que no muestre el empleado, que estos textos aparezcan en español. Vamos a por ello. 00:10:26
vámonos a este 00:10:51
formulario y yo quiero que todos estos TH 00:10:55
vayan a la derecha, una forma es simplemente decirle 00:10:58
que la clase de esta tabla, aparte de ser una tabla, sea de edición 00:11:01
¿vale? para verlo siempre en esa parte 00:11:04
ir corrigiendo lo que me hace falta más, aquí me hace falta 00:11:07
cambiar esto del día, mes 00:11:10
y año, después quiero incluir 00:11:13
voy a ponerlo por aquí, voy a coger este, voy a copiar 00:11:18
esta información de aquí 00:11:21
y me la voy a llevar aquí 00:11:22
para mostrar el departamento a que pertenece 00:11:24
y ya se acuerdan que era tan fácil 00:11:27
como poner empleado 00:11:30
departamento nombre 00:11:31
y ahora 00:11:34
voy a poner 00:11:36
el verde back to list, voy a poner volver 00:11:38
el verde edit 00:11:42
editar 00:11:44
sin embargo también aparecía en el formulario 00:11:45
si lo vemos aquí, un botón de directo 00:11:48
Y esto viene de este formato de aquí, de este formulario de aquí, que habrá que ver después posteriormente, ¿vale? 00:11:50
De momento nos vamos a conformar con esto y vamos a ver qué es lo que hace. 00:11:56
Hemos definido esto de aquí y entonces vamos a incluirlo en la hoja de estilos. 00:12:01
Vamos a ver, vamos a intentar poner aquí algo que me diga table cuando tiene la clase edit y dentro hay un th, sth, pues por ejemplo, sth que lo que tenga sea, 00:12:05
que su alineación sea 00:12:20
a la derecha. ¿Vale? Vamos a ver si esto 00:12:24
funciona ahora. Efectivamente, ya está alineado a la derecha, ya aparece 00:12:29
el departamento, aparece volver, editar, y sigue 00:12:35
apareciendo el botón de direct que no hemos tocado. Bien, vamos a cambiar esto 00:12:38
de delete por eliminar o borrar. ¿Vale? Vamos a ir 00:12:45
a este formulario que está incluyendo aquí 00:12:49
que es este de aquí 00:12:53
y en él vemos que hay un pequeño 00:12:54
formulario en el cual hay una serie 00:12:56
de métodos, etcétera, lo más importante 00:12:59
es que el texto que aparece 00:13:01
es este de aquí 00:13:02
entonces vamos a poner eliminar directamente 00:13:04
este es un botón 00:13:07
¿vale? un botón que tiene esta clase 00:13:08
que es propia de lo que ha generado Symfony 00:13:10
y eliminar 00:13:12
muy bien, así guardo 00:13:14
esta información, como el index 00:13:16
voy a bajar un poco, no hemos 00:13:18
tocado nada, etcétera, etcétera 00:13:22
perdón, en el show no hemos tocado nada 00:13:23
etcétera, pues simplemente 00:13:25
lo que estaremos es 00:13:27
en nuestro 00:13:29
formulario cambiando 00:13:30
la palabra 00:13:33
borrar por eliminar, después veremos 00:13:34
si realmente nos gusta esto que esté así o sea 00:13:37
mejor todo enlaces o 00:13:39
botones de formulario, ya lo 00:13:41
veremos después o como hacerlo con 00:13:43
un formato más adecuado 00:13:45
bueno, la siguiente parte 00:13:48
que nos toca cambiar es la de editar 00:13:49
y en editar 00:13:51
aquí hay mucha mayor complicación 00:13:52
lo primero que vamos a observar, lo primero que vamos a hacer 00:13:57
es ver dónde están todos estos ficheros de la edición 00:14:02
entonces está claro que el fichero primero que aparece es este de edit 00:14:05
este de edit, por supuesto el de crear un uno nuevo va a ser muy parecido 00:14:10
entonces bueno, siguiendo lo mismo podría aquí ya incluir lo de editar empleado 00:14:14
hasta ahí iría todo muy bien 00:14:20
si quiero poner un bloque de título 00:14:21
se acuerdan que tenía uno para todo con lo cual lo quito 00:14:25
y me quedo simplemente con editar empleado 00:14:27
el botón del formulario de update 00:14:32
puedo ponerlo por modificar o actualizar 00:14:36
y el back to list 00:14:40
por supuesto volver 00:14:44
el delete ya lo había cambiado con lo cual si yo guardo esto 00:14:46
si yo guardo 00:14:52
esto de aquí 00:14:56
pues me ha cambiado 00:14:57
este botón 00:15:02
esto me lo incluye aquí 00:15:02
y este botón 00:15:06
pero el formato es este 00:15:08
pero yo tengo aquí un montón de cuestiones 00:15:10
que modificar 00:15:12
primero, este formato todo pegado no me gusta 00:15:13
segundo, este botón de nacido tampoco 00:15:15
y este departamento de finanzas 00:15:17
bueno, es una opción ponerlo así 00:15:20
pero me gustaría hacerlo más elegante 00:15:21
pero tampoco he visto donde estaba 00:15:23
toda esta plantilla. Es decir, yo no veo dónde está esta plantilla. Simplemente he visto 00:15:25
que de repente me incluye un formulario con toda esta información. Bueno, vamos a ver 00:15:30
ese formulario que tiene. Y dice, comienza el formulario, coges todos los elementos que 00:15:37
te hagan falta y me lo escribes otra vez. Vamos a ver. Vale, pero no me ha hecho nada 00:15:43
más. No me ha hecho nada más. Es más, esto no lo pone porque como ya hemos puesto por 00:15:51
defecto del botón, el que había, pues no lo pone 00:15:55
y este 00:15:57
widget form, ¿qué es? 00:15:58
bueno, pues si se acuerdan había un directorio 00:16:01
por aquí, que era el de formularios 00:16:02
¿vale? y ese formulario 00:16:04
este corresponde, estamos 00:16:07
trabajando con empleado, pues al de 00:16:08
empleado, y vemos que 00:16:10
tiene algunos elementos 00:16:14
distintos, es una clase que 00:16:16
construye un formulario con unas características 00:16:18
¿de acuerdo? me añade un 00:16:20
nombre, me añade el campo nacido 00:16:22
y me añade el campo departamento 00:16:24
Y él, en función de las relaciones, pues ya define cómo considera que tiene que ser, que tiene que ser. 00:16:26
Y, bueno, pues puede ser que no nos guste tanto como lo que nos haría falta. 00:16:33
Por ejemplo, la fecha de nacimiento, ya han visto ustedes las limitaciones que tenía, 00:16:39
que solo iba entre 2015 y 2025, y sin embargo, pues no nos gustaría que tuviera otros tiempos. 00:16:44
Bueno, se le pueden meter muchos parámetros a este acto, ¿vale? 00:16:51
este permite un montón de parámetros 00:16:54
y lo que vamos a hacer es justo meter por ejemplo 00:16:57
en este caso uno que nos indique 00:17:00
que el tipo de datos 00:17:03
el tipo de datos de fecha 00:17:08
coja esa clase 00:17:11
y que además 00:17:13
y esto hay que ver la documentación para saber lo que tenemos disponible 00:17:15
el widget que aplique sea 00:17:19
algo que se llama single text 00:17:22
Es algo así como decirle input date, ¿de acuerdo? Con esto, pues ya tendríamos el formato de fecha que queremos. Así iríamos con cada campo que nos hiciera falta. Para meter este tipo de datos nos hace falta incluir también aquí una de las librerías que estamos trabajando, que es form, y dentro de estas, esta que acabamos de utilizar, date. 00:17:25
Esto hay que ver el manual según los campos que queremos utilizar y en este momento nosotros veríamos esta información, vamos a recargarla, hay un problema con esto del datatype, vamos a comprobar que es lo que nos hace falta exactamente. 00:17:53
seguramente no es este directorio 00:18:12
este espacio de nombres, sino 00:18:16
realmente lo que queremos, casi seguro 00:18:18
es que esto no está aquí 00:18:20
esto está, vamos a copiar 00:18:23
esta línea, pegarla aquí 00:18:26
y en vez de esto 00:18:27
que sea aquí, tipe 00:18:29
y esto quitarlo de aquí, que seguro que sobra 00:18:33
es decir, el formulario, ese tipo de datos 00:18:35
vamos a probarlo otra vez 00:18:37
recargo esta página 00:18:39
y tampoco existe 00:18:42
y cuando uno tropieza 00:18:45
varias veces lo mejor que puede hacer es buscar en el manual vale entonces uno va al tipo de datos 00:18:48
de hecho en este caso y busca a ver cuál es la información que le hace falta y vemos aquí 00:18:57
rápidamente que en este caso cuando queremos incluir algunos de estos elementos nos hace 00:19:03
falta incluir este que está que va a ser la que incluir en el fichero de esta voy a salvar 00:19:09
Y ahora, pues seguramente, si yo recargo esto, pues efectivamente funciona. 00:19:23
No hay nada como de vez en cuando mirar los manuales. 00:19:30
Si quisiéramos mejorar esto además, bueno, vamos a comprobar primero que esto está bien, ¿vale? 00:19:35
Aquí efectivamente aparece ya un formulario que podemos poner de cualquier año de lo que sea, ¿vale? 00:19:39
El año de la catapum. 00:19:44
¿Vale? ¿De acuerdo? 00:19:49
Podríamos modificar o lo que fuera menester. 00:19:53
¿Vale? 00:19:56
Bien, voy a volverla a dar a mostrar y vamos a darle a editar. 00:19:57
Bien, aquí vemos que sigue estando esto como muy pegado. 00:20:05
Vamos a ver cómo han construido esta página para que salga todo así. 00:20:10
Voy a ver el fuente de esta página y si miro, pues efectivamente han puesto un label y después un campo input. 00:20:13
Si sigo para acá, el campo input que había aquí, después han puesto otro label con un campo input. 00:20:21
y otro label con un select 00:20:33
¿de acuerdo? entonces una opción que podríamos tener 00:20:36
es decirle en el CSS directamente 00:20:42
vamos a ver como lo hacemos 00:20:45
podríamos hacer en el CSS 00:20:47
voy a ir a él, voy a ir aquí a los ficheros 00:20:49
ya no encuentro hasta el CSS, aquí, vale 00:20:53
pues decirle que label, pues que lo muestre 00:20:57
por ejemplo en bloque, eso puede estar bien 00:21:00
y sobre todo que le dé 00:21:03
una longitud, un tamaño, un ancho 00:21:06
un ancho, por ejemplo, de 12 00:21:10
vamos a ver si esto lo hace así, ¿vale? 00:21:14
vamos a ver si esto me lo está ejecutando 00:21:20
ahí, bueno, pues no veo nada que me lo haga bien 00:21:22
vemos que no está obedeciendo a lo que queremos y posiblemente 00:21:27
tenga algo que ver con que no está obteniendo la hoja de estilos 00:21:32
Vamos a ver qué ocurre y efectivamente vemos que esta no es nuestra hoja de estilos, estamos en otro sitio. 00:21:37
¿Qué es lo que ha ocurrido? Pues algo muy simple. 00:21:43
Nosotros hemos definido para la primera página que teníamos, que estaba en base HTML, que incluyamos este directorio, como directorio relativo. 00:21:45
Pero claro, en este momento tenemos una ruta que no puede bajar solamente una vez, tendría que bajar varias. 00:21:54
eso sí, está en la raíz de la aplicación 00:22:01
con lo cual, pues vamos a curarnos en salud 00:22:03
y vamos a decir que esto está en la raíz de la aplicación, siempre 00:22:06
si yo ahora ejecuto esto 00:22:09
efectivamente me ha salido el formato que yo quería 00:22:12
pero claro, vamos a ajustar 00:22:15
esa hoja de estilo, lo vamos a ajustar un poquito 00:22:18
en este momento 00:22:21
lo queremos en línea, no queremos esos bloques así 00:22:23
vamos a ver que tal se nos da ahora 00:22:27
y además queremos que 00:22:29
este alineado 00:22:33
text alineantes 00:22:36
line 00:22:38
vamos a ver si nos hace todo lo que queremos ahí 00:22:39
bien, incluso 00:22:44
como 12 puede ser 00:22:46
mucho, vamos a poner 10 00:22:49
y vamos a decir que nos deje un pequeño 00:22:50
margen 00:22:53
un margin 00:22:53
right 00:22:59
de pues 00:23:01
un ring 00:23:03
¿Vale? Bueno, pues ha quedado algo muy bonito, ¿de acuerdo? 00:23:04
Y ha quedado algo que tiene bastante pinta de una aplicación 00:23:10
¿Qué más cosas tenemos? Que ahora ya nos ha puesto esta información así 00:23:14
Y seguimos teniendo la duda de si vamos a igualar todo 00:23:17
Y vamos a poner todo como botones o todo como enlaces 00:23:20
Incluso a lo mejor podríamos mezclar las dos cuestiones 00:23:23
Pero el botón de volver lo pondríamos al principio 00:23:27
Vamos a ver si eso, este formulario directamente nos lo permite 00:23:29
se acuerdan que estábamos en edición 00:23:33
y efectivamente vamos a mover 00:23:36
esto, ahí no lo podemos 00:23:38
mover antes, o sea, lo que sí podemos ponerle 00:23:40
es el último, al menos que estén los dos botones 00:23:42
y el último un enlace 00:23:44
bueno, pues esto ya tiene una pinta bastante 00:23:48
más agradable, aquí tenemos 00:23:54
mostrar 00:23:56
aquí tendremos volver, editar 00:23:57
y eliminar 00:24:01
y aquí tenemos 00:24:02
añadir. Y podríamos confirmar con esto, pero vamos a intentar mejorar el tema 00:24:05
de enlaces y botones. Hemos pensado qué hacer, si poner 00:24:09
todo como enlaces o todo como botones y vemos que mejor botones, porque 00:24:16
en muchos casos hay formularios que necesitan un botón y mientras que los enlaces sí podemos 00:24:20
convertirlos fácilmente en botones. Vamos a ver cómo hacemos esto. Bueno, vamos 00:24:24
a este mismo ejemplo aquí, donde tenemos el botón 00:24:28
volver, este botón volver que tenemos en la dictada empleada. 00:24:32
Nosotros podemos definir un formulario, de esta manera podemos definir un formulario cuya acción sea justo a la que pone el enlace, el método get, pues que los métodos post va a intentar ejecutar alguna acción y ponerle el botón como ponemos en cualquier otro caso. 00:24:36
voy a comentar esto para que no se vea 00:24:58
esto de aquí, después lo quitaremos 00:25:01
y vamos a ver 00:25:03
qué es lo que hace esto 00:25:05
voy a recargar 00:25:06
mi página 00:25:09
en editar 00:25:13
aquí y efectivamente mi botón volver 00:25:15
ya es igual que los demás 00:25:17
voy a ver si funciona 00:25:19
efectivamente funciona 00:25:20
bueno pues esto 00:25:22
esta misma cuestión que acabo de aplicar 00:25:25
aquí la aplicaría en los demás sitios 00:25:27
voy a borrar ya esto 00:25:29
y voy a ir a los formularios que tengo por aquí 00:25:30
por ejemplo a este form no hace falta 00:25:34
a este edit es el que acabo de generar 00:25:37
vamos a ver en el index cual me hacía falta que tenía varios enlaces 00:25:42
tenía este enlace de mostrar que voy a sustituir 00:25:46
voy a sustituir este enlace tal cual y vamos a cambiar 00:25:49
simplemente esta expresión 00:26:04
por esta de aquí 00:26:07
y aquí para devolver 00:26:10
es mostrar, ya os voy a comentar 00:26:16
también esto de aquí arriba 00:26:18
para que de momento no se vea, después ya todo esto lo iremos quitando 00:26:19
¿vale? en este caso 00:26:24
tenemos 00:26:26
otro más abajo que es el de añadir 00:26:27
vamos a copiarle 00:26:30
aquí, vamos a poner de verde 00:26:32
toda la luz de ahí abajo, esta justamente 00:26:38
que tenemos aquí 00:26:41
¿vale? aquí ponemos 00:26:42
añadir 00:26:50
y esto también lo comentaré 00:26:51
este es otro de los que teníamos, vamos a ir haciendo un repaso ya de cosas, vamos a ir al índice, en el índice todos son botones, mostrar, en mostrar tenemos estos dos todavía enlaces, con lo cual me voy a show y en show voy a grabar la misma información que tenía en cualquiera de estos, voy a coger esta información y voy a guardarla, 00:26:59
tengo este botón 00:27:25
y tengo este 00:27:29
y los dos los voy a modificar 00:27:32
en un caso copio lo de aquí 00:27:34
¿vale? y comento 00:27:35
esto y esto 00:27:49
ya pueden ver 00:27:50
que esto es más tedioso que generar 00:27:59
la aplicación, que es el adecuarla 00:28:01
y darle un formato un poquito 00:28:04
adecuado ¿vale? 00:28:05
aquí recuerdo que tengo que poner volver 00:28:07
y aquí recuerdo que tengo que 00:28:09
poner editar 00:28:11
¿vale? 00:28:13
Creo que con esto tendría esto hecho, después le daré la forma que sea, me voy a editar y veo que está bien, me voy a eliminar y bueno, en este caso eliminar, simplemente me eliminaría, con lo cual no hay formulario. 00:28:15
Bueno, pues parece que está todo con un aspecto bastante digno dentro de lo que es este tipo de aplicaciones, ¿de acuerdo? 00:28:35
Así que, pues, se podría dar casi casi por finalizada toda la aplicación, borrando los comentarios que hemos ido incluyendo para saber cómo hemos ido programando todo lo que hay aquí. 00:28:43
Bueno, si vamos introduciendo novedades, pues ya haremos otros nuevos vídeos. 00:28:58
Hasta luego. 00:29:03
Idioma/s:
es
Autor/es:
Amadeo Mora
Subido por:
Amadeo M.
Licencia:
Dominio público
Visualizaciones:
171
Fecha:
17 de octubre de 2020 - 10:53
Visibilidad:
Público
Centro:
IES CLARA DEL REY
Duración:
29′ 06″
Relación de aspecto:
1.78:1
Resolución:
1364x768 píxeles
Tamaño:
127.61 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid