1 00:00:01,070 --> 00:00:14,349 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. 2 00:00:15,570 --> 00:00:25,550 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í. 3 00:00:25,550 --> 00:00:45,109 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. 4 00:00:45,109 --> 00:00:50,950 Y toda la aplicación se llama, o va a tener como título, Welcome, ¿vale? 5 00:00:51,530 --> 00:00:58,990 Bueno, nosotros podemos ya decirle directamente que nuestra aplicación, este Welcome, vamos a ponerlo aquí para verlo, 6 00:00:59,770 --> 00:01:06,010 este Welcome que lo tendremos en la base, en la tabla, aquí ha sido cambiado por empleado index, 7 00:01:06,010 --> 00:01:12,760 Pero podemos poner ya en todos los sitios que nuestra aplicación se llame como queramos llamar. 8 00:01:13,219 --> 00:01:17,620 Mantenimiento de empleados, por ejemplo. 9 00:01:18,260 --> 00:01:24,319 Esto sería lo que pondríamos en todos los sitios en caso de que no tenga su propio bloque de título definido. 10 00:01:25,019 --> 00:01:26,379 Esta es la aplicación base. 11 00:01:26,939 --> 00:01:32,319 Es un buen sitio para definir nuestra propia hoja de estilo para todo el entorno, por ejemplo. 12 00:01:32,719 --> 00:01:33,579 Podríamos hacerlo ya. 13 00:01:33,579 --> 00:01:37,040 o para poner cualquier elemento que queramos introducir 14 00:01:37,040 --> 00:01:38,180 todo el rato, ¿de acuerdo? 15 00:01:38,480 --> 00:01:40,280 entonces de momento lo dejamos así 16 00:01:40,280 --> 00:01:41,480 vamos a guardar 17 00:01:41,480 --> 00:01:43,560 y vamos a ver qué ocurre 18 00:01:43,560 --> 00:01:46,620 estábamos en empleado 19 00:01:46,620 --> 00:01:48,099 pues vamos a ver en empleado 20 00:01:48,099 --> 00:01:52,209 qué templates 21 00:01:52,209 --> 00:01:53,890 o qué plantillas tenemos 22 00:01:53,890 --> 00:01:56,030 la primera que estamos trabajando es esta que se llama 23 00:01:56,030 --> 00:01:57,450 index.html 24 00:01:57,450 --> 00:01:59,730 que vemos efectivamente que el título 25 00:01:59,730 --> 00:02:01,829 del bloque lo cambia 26 00:02:01,829 --> 00:02:04,390 cambia el título del bloque por empleado index 27 00:02:04,390 --> 00:02:04,750 ¿vale? 28 00:02:05,090 --> 00:02:17,090 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. 29 00:02:18,860 --> 00:02:24,919 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. 30 00:02:24,919 --> 00:02:29,900 el bode, podemos cambiar el título de esta página 31 00:02:29,900 --> 00:02:36,199 por lista de empleados, y vamos a ver simplemente con estos cambios 32 00:02:36,199 --> 00:02:39,840 como nos cambia nuestra plantilla 33 00:02:39,840 --> 00:02:44,199 prácticamente aquí arriba ya tenemos mantenimiento de empleados y aquí 34 00:02:44,199 --> 00:02:47,520 lista de empleados, es decir, está funcionando 35 00:02:47,520 --> 00:02:50,800 podemos poner el identificador 36 00:02:50,800 --> 00:02:55,919 o poner código, o poner cualquier cosa, nombre, nacido 37 00:02:55,919 --> 00:03:03,949 Vamos a cambiar esto por fecha de nacimiento y vamos a poner aquí unas acciones. 38 00:03:06,449 --> 00:03:13,729 Vemos que esta es la cabecera de esta tabla y vemos aquí que hay un cuerpo de la tabla. 39 00:03:13,969 --> 00:03:22,610 Y en este cuerpo lo que hace es recorrer todos los empleados en cada empleado. 40 00:03:24,610 --> 00:03:31,069 Entonces, dice, para cada empleado, en los empleados que hay, vamos a mostrar su ID, su nombre y su nacido. 41 00:03:31,069 --> 00:03:35,789 Para empezar, nacido lo pone en formato año, mes y día 42 00:03:35,789 --> 00:03:43,349 Como podemos ver, nosotros estamos acostumbrados en España a hacerlo como día, mes y año 43 00:03:43,349 --> 00:03:45,229 Hacemos ese cambio, ¿vale? 44 00:03:46,229 --> 00:03:52,750 Después además, aquí no me está mostrando de qué departamento, en qué departamento está incluido este empleado 45 00:03:52,750 --> 00:03:54,150 Vamos a incluirlo 46 00:03:54,150 --> 00:03:58,550 con estas dos llaves 47 00:03:58,550 --> 00:04:00,710 lo que hacemos es que llamamos a un campo 48 00:04:00,710 --> 00:04:01,449 una información 49 00:04:01,449 --> 00:04:05,210 voy a decir empleado.departamento 50 00:04:05,210 --> 00:04:07,949 si hiciéramos esto 51 00:04:07,949 --> 00:04:10,569 posiblemente ya nos daría el nombre 52 00:04:10,569 --> 00:04:13,460 vamos a comprobar 53 00:04:13,460 --> 00:04:15,419 porque teníamos el método toString 54 00:04:15,419 --> 00:04:19,019 o si no, podríamos dentro de departamento 55 00:04:19,019 --> 00:04:20,139 haber preguntado por el nombre 56 00:04:20,139 --> 00:04:24,120 y también nos hubiera funcionado 57 00:04:24,120 --> 00:04:26,500 ¿Vale? Cualquiera de las dos opciones nos vale. 58 00:04:27,240 --> 00:04:30,319 Entonces nos saldría esto de empleado de departamento nombre. 59 00:04:30,560 --> 00:04:32,319 Vamos a dejarlo así que parece más elegante. 60 00:04:33,339 --> 00:04:34,899 Y tenemos dos opciones. 61 00:04:35,180 --> 00:04:42,180 O bien mostrar esta información, la formación correspondiente al empleado, o bien editarla. 62 00:04:42,699 --> 00:04:42,860 ¿Vale? 63 00:04:43,339 --> 00:04:45,199 Bueno, podemos mantener las dos. 64 00:04:45,540 --> 00:04:47,000 Llegamos a mantener la de mostrar. 65 00:04:49,379 --> 00:04:52,879 Y, por ejemplo, imagínense que no queremos editar directamente. 66 00:04:54,139 --> 00:04:54,620 ¿Vale? 67 00:04:54,620 --> 00:04:57,180 lo voy a comentar simplemente para no borrarlo 68 00:04:57,180 --> 00:04:59,180 y tenemos una estructura muy curiosa 69 00:04:59,180 --> 00:05:00,220 esta estructura es muy bonita 70 00:05:00,220 --> 00:05:01,639 y esta es propia de Twig 71 00:05:01,639 --> 00:05:03,360 Twig es esta sección general de aquí 72 00:05:03,360 --> 00:05:04,920 y es un sistema de plantillas 73 00:05:04,920 --> 00:05:07,839 que ya ven que empieza cada estructura 74 00:05:07,839 --> 00:05:09,459 cuando queremos estructurar de control 75 00:05:09,459 --> 00:05:12,199 con llave y tanto por ciento 76 00:05:12,199 --> 00:05:14,600 y dice for empleado sin empleado 77 00:05:14,600 --> 00:05:15,899 else 78 00:05:15,899 --> 00:05:17,980 si no, es una estructura muy rara 79 00:05:17,980 --> 00:05:20,379 quiere decir, si hay algún empleado 80 00:05:20,379 --> 00:05:21,720 hacemos esto, y si no 81 00:05:21,720 --> 00:05:23,759 mostramos esto de aquí 82 00:05:23,759 --> 00:05:34,720 Entonces, cambiamos el mensaje y que no haya, que no se ha encontrado registro, ponemos no hay ningún empleado. 83 00:05:36,300 --> 00:05:36,899 Bien. 84 00:05:38,240 --> 00:05:43,139 El último mensaje a cambiar es este botón de aquí, de Create New. 85 00:05:44,620 --> 00:05:48,879 Y yo voy a poner, ¿de acuerdo? 86 00:05:49,759 --> 00:05:52,399 Bueno, vamos a cambiar esto y ver cómo queda. 87 00:05:53,560 --> 00:05:55,720 Pues, realmente ha quedado muy bien. 88 00:05:56,040 --> 00:05:59,399 Ya es una cuestión que vemos bastante más clarito, estas cuestiones. 89 00:05:59,540 --> 00:06:03,899 Por supuesto, esta tabla nos gustaría, nos gustaría que esta tabla se mostrara en condiciones, etc. 90 00:06:04,759 --> 00:06:06,060 Ahora lo vamos a ir haciendo. 91 00:06:08,459 --> 00:06:13,860 Como lo siguiente que queremos hacer es cambiar el formato este para que se vea por la tablita, 92 00:06:13,939 --> 00:06:18,279 con sus raquitas, etc., etc., pues lo que vamos a hacer es crear una hoja de estilo, 93 00:06:18,519 --> 00:06:20,660 común para toda la aplicación, ¿vale? 94 00:06:21,459 --> 00:06:26,920 Entonces, ¿cuál es la primera página que arrancamos siempre en este proyecto? 95 00:06:26,920 --> 00:06:29,300 Pues justo a esa que llamamos pública 96 00:06:29,300 --> 00:06:30,740 Esta de aquí 97 00:06:30,740 --> 00:06:33,519 Esta de aquí es la primera que arrancamos 98 00:06:33,519 --> 00:06:35,339 Tiene información que nunca vamos a tocar 99 00:06:35,339 --> 00:06:36,980 O casi nunca vamos a tocar 100 00:06:36,980 --> 00:06:40,100 Si se acuerdan, ven aquí el bootstrap 101 00:06:40,100 --> 00:06:43,639 Que nos sirvió en su momento para arrancar Doctrine en otros ejemplos 102 00:06:43,639 --> 00:06:47,519 Y es en este directorio que se ejecuta 103 00:06:47,519 --> 00:06:49,740 Este directorio public donde se ejecuta 104 00:06:49,740 --> 00:06:51,800 Lo que se ve al exterior 105 00:06:51,800 --> 00:06:55,500 Con lo cual es un buen sitio para generar una hoja de estilo 106 00:06:55,500 --> 00:07:10,199 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? 107 00:07:10,199 --> 00:07:18,819 Bueno, y aquí genero, lo tengo ya en el portapapeles, y aquí voy a generar un CSS, ¿vale? 108 00:07:19,639 --> 00:07:28,139 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? 109 00:07:28,199 --> 00:07:32,860 Que me muestre los borders, los bordes de la tabla, etcétera, etcétera. 110 00:07:33,019 --> 00:07:39,860 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. 111 00:07:40,199 --> 00:07:49,399 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. 112 00:07:49,399 --> 00:08:22,209 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. 113 00:08:23,209 --> 00:08:26,410 ¿Vale? Vamos a ver si esto surte efecto. 114 00:08:30,839 --> 00:08:37,250 Bueno, en un primer momento aparentemente no, pero voy a ver si realmente he tomado esto. 115 00:08:37,309 --> 00:08:42,129 Voy a pinchar aquí para ver si este fichero existe o no existe. 116 00:08:43,029 --> 00:08:44,809 Y me está diciendo que no, que no existe. 117 00:08:44,970 --> 00:08:48,129 Porque la ruta en que lo estoy poniendo es la ruta de empleado. 118 00:08:48,429 --> 00:08:49,070 ¿Vale? ¿Lo ven? 119 00:08:49,909 --> 00:08:53,129 Entonces digo, no, exactamente ahí no es donde lo quiero poner. 120 00:08:53,129 --> 00:08:57,470 Donde debería ponerlo es bajando un nivel. 121 00:08:57,470 --> 00:09:25,580 ¿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. 122 00:09:25,580 --> 00:09:30,379 Nos ha faltado meter en el columnado de arriba, en los títulos, el departamento. 123 00:09:30,480 --> 00:09:31,600 Vamos a hacerlo hecho facto. 124 00:09:31,919 --> 00:09:45,009 Vamos a irnos al índice de aquí y vamos a incluir el departamento que teníamos. 125 00:09:45,389 --> 00:09:45,710 ¿De acuerdo? 126 00:09:46,549 --> 00:09:49,389 Si volvemos a verlo, efectivamente, lo vemos correcto. 127 00:09:49,669 --> 00:09:50,009 ¿De acuerdo? 128 00:09:50,649 --> 00:09:52,409 Bueno, ya le hemos cambiado un montón de cosas. 129 00:09:52,769 --> 00:09:55,970 Vamos a ir ahora, por ejemplo, a mostrar finanzas. 130 00:09:55,970 --> 00:09:57,809 Y también lo vemos en este formato. 131 00:09:58,269 --> 00:10:01,529 Este formato puede ser adecuado 132 00:10:01,529 --> 00:10:05,649 Ya saben que no me gusta nada usar tablas para mostrar formularios 133 00:10:05,649 --> 00:10:07,350 Creo que para eso están los labels, etc. 134 00:10:07,970 --> 00:10:09,590 Pero bueno, si seguimos esta idea 135 00:10:09,590 --> 00:10:12,129 Vemos que esto también está fría funcionando 136 00:10:12,129 --> 00:10:14,090 Nos permite editar y borrar 137 00:10:14,090 --> 00:10:19,549 La edición nos sigue saliendo igual de antes 138 00:10:19,549 --> 00:10:22,049 Y en borrar exactamente igual 139 00:10:22,049 --> 00:10:26,389 Pero ya tenemos esta parte al menos más aparente 140 00:10:26,389 --> 00:10:51,649 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. 141 00:10:51,649 --> 00:10:55,450 vámonos a este 142 00:10:55,450 --> 00:10:58,090 formulario y yo quiero que todos estos TH 143 00:10:58,090 --> 00:11:01,610 vayan a la derecha, una forma es simplemente decirle 144 00:11:01,610 --> 00:11:04,850 que la clase de esta tabla, aparte de ser una tabla, sea de edición 145 00:11:04,850 --> 00:11:07,649 ¿vale? para verlo siempre en esa parte 146 00:11:07,649 --> 00:11:10,710 ir corrigiendo lo que me hace falta más, aquí me hace falta 147 00:11:10,710 --> 00:11:13,889 cambiar esto del día, mes 148 00:11:13,889 --> 00:11:18,549 y año, después quiero incluir 149 00:11:18,549 --> 00:11:21,250 voy a ponerlo por aquí, voy a coger este, voy a copiar 150 00:11:21,250 --> 00:11:22,690 esta información de aquí 151 00:11:22,690 --> 00:11:24,370 y me la voy a llevar aquí 152 00:11:24,370 --> 00:11:27,409 para mostrar el departamento a que pertenece 153 00:11:27,409 --> 00:11:30,389 y ya se acuerdan que era tan fácil 154 00:11:30,389 --> 00:11:31,789 como poner empleado 155 00:11:31,789 --> 00:11:34,570 departamento nombre 156 00:11:34,570 --> 00:11:36,710 y ahora 157 00:11:36,710 --> 00:11:38,850 voy a poner 158 00:11:38,850 --> 00:11:40,529 el verde back to list, voy a poner volver 159 00:11:40,529 --> 00:11:42,629 y 160 00:11:42,629 --> 00:11:44,169 el verde edit 161 00:11:44,169 --> 00:11:45,330 editar 162 00:11:45,330 --> 00:11:48,850 sin embargo también aparecía en el formulario 163 00:11:48,850 --> 00:11:50,850 si lo vemos aquí, un botón de directo 164 00:11:50,850 --> 00:11:56,330 Y esto viene de este formato de aquí, de este formulario de aquí, que habrá que ver después posteriormente, ¿vale? 165 00:11:56,409 --> 00:12:00,029 De momento nos vamos a conformar con esto y vamos a ver qué es lo que hace. 166 00:12:01,169 --> 00:12:05,950 Hemos definido esto de aquí y entonces vamos a incluirlo en la hoja de estilos. 167 00:12:05,950 --> 00:12:20,769 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, 168 00:12:20,850 --> 00:12:24,669 que su alineación sea 169 00:12:24,669 --> 00:12:29,070 a la derecha. ¿Vale? Vamos a ver si esto 170 00:12:29,070 --> 00:12:35,039 funciona ahora. Efectivamente, ya está alineado a la derecha, ya aparece 171 00:12:35,039 --> 00:12:38,820 el departamento, aparece volver, editar, y sigue 172 00:12:38,820 --> 00:12:45,500 apareciendo el botón de direct que no hemos tocado. Bien, vamos a cambiar esto 173 00:12:45,500 --> 00:12:49,600 de delete por eliminar o borrar. ¿Vale? Vamos a ir 174 00:12:49,600 --> 00:12:53,279 a este formulario que está incluyendo aquí 175 00:12:53,279 --> 00:12:54,460 que es este de aquí 176 00:12:54,460 --> 00:12:56,960 y en él vemos que hay un pequeño 177 00:12:56,960 --> 00:12:59,019 formulario en el cual hay una serie 178 00:12:59,019 --> 00:13:01,080 de métodos, etcétera, lo más importante 179 00:13:01,080 --> 00:13:02,720 es que el texto que aparece 180 00:13:02,720 --> 00:13:04,039 es este de aquí 181 00:13:04,039 --> 00:13:07,000 entonces vamos a poner eliminar directamente 182 00:13:07,000 --> 00:13:08,799 este es un botón 183 00:13:08,799 --> 00:13:10,840 ¿vale? un botón que tiene esta clase 184 00:13:10,840 --> 00:13:12,820 que es propia de lo que ha generado Symfony 185 00:13:12,820 --> 00:13:14,580 y eliminar 186 00:13:14,580 --> 00:13:16,860 muy bien, así guardo 187 00:13:16,860 --> 00:13:18,799 esta información, como el index 188 00:13:18,799 --> 00:13:22,110 voy a bajar un poco, no hemos 189 00:13:22,110 --> 00:13:23,610 tocado nada, etcétera, etcétera 190 00:13:23,610 --> 00:13:25,730 perdón, en el show no hemos tocado nada 191 00:13:25,730 --> 00:13:27,889 etcétera, pues simplemente 192 00:13:27,889 --> 00:13:29,309 lo que estaremos es 193 00:13:29,309 --> 00:13:30,690 en nuestro 194 00:13:30,690 --> 00:13:33,970 formulario cambiando 195 00:13:33,970 --> 00:13:34,610 la palabra 196 00:13:34,610 --> 00:13:37,769 borrar por eliminar, después veremos 197 00:13:37,769 --> 00:13:39,570 si realmente nos gusta esto que esté así o sea 198 00:13:39,570 --> 00:13:41,389 mejor todo enlaces o 199 00:13:41,389 --> 00:13:43,769 botones de formulario, ya lo 200 00:13:43,769 --> 00:13:45,470 veremos después o como hacerlo con 201 00:13:45,470 --> 00:13:48,129 un formato más adecuado 202 00:13:48,129 --> 00:13:49,730 bueno, la siguiente parte 203 00:13:49,730 --> 00:13:51,570 que nos toca cambiar es la de editar 204 00:13:51,570 --> 00:13:52,470 y en editar 205 00:13:52,470 --> 00:13:57,049 aquí hay mucha mayor complicación 206 00:13:57,049 --> 00:14:02,299 lo primero que vamos a observar, lo primero que vamos a hacer 207 00:14:02,299 --> 00:14:05,019 es ver dónde están todos estos ficheros de la edición 208 00:14:05,019 --> 00:14:10,019 entonces está claro que el fichero primero que aparece es este de edit 209 00:14:10,019 --> 00:14:14,360 este de edit, por supuesto el de crear un uno nuevo va a ser muy parecido 210 00:14:14,360 --> 00:14:20,259 entonces bueno, siguiendo lo mismo podría aquí ya incluir lo de editar empleado 211 00:14:20,259 --> 00:14:21,559 hasta ahí iría todo muy bien 212 00:14:21,559 --> 00:14:25,240 si quiero poner un bloque de título 213 00:14:25,240 --> 00:14:27,759 se acuerdan que tenía uno para todo con lo cual lo quito 214 00:14:27,759 --> 00:14:32,379 y me quedo simplemente con editar empleado 215 00:14:32,379 --> 00:14:36,799 el botón del formulario de update 216 00:14:36,799 --> 00:14:40,539 puedo ponerlo por modificar o actualizar 217 00:14:40,539 --> 00:14:44,700 y el back to list 218 00:14:44,700 --> 00:14:46,740 por supuesto volver 219 00:14:46,740 --> 00:14:52,389 el delete ya lo había cambiado con lo cual si yo guardo esto 220 00:14:52,389 --> 00:14:56,000 si yo guardo 221 00:14:56,000 --> 00:14:57,480 esto de aquí 222 00:14:57,480 --> 00:15:02,019 pues me ha cambiado 223 00:15:02,019 --> 00:15:02,980 este botón 224 00:15:02,980 --> 00:15:06,059 esto me lo incluye aquí 225 00:15:06,059 --> 00:15:08,639 y este botón 226 00:15:08,639 --> 00:15:10,559 pero el formato es este 227 00:15:10,559 --> 00:15:12,379 pero yo tengo aquí un montón de cuestiones 228 00:15:12,379 --> 00:15:13,080 que modificar 229 00:15:13,080 --> 00:15:15,799 primero, este formato todo pegado no me gusta 230 00:15:15,799 --> 00:15:17,960 segundo, este botón de nacido tampoco 231 00:15:17,960 --> 00:15:20,120 y este departamento de finanzas 232 00:15:20,120 --> 00:15:21,500 bueno, es una opción ponerlo así 233 00:15:21,500 --> 00:15:23,600 pero me gustaría hacerlo más elegante 234 00:15:23,600 --> 00:15:25,559 pero tampoco he visto donde estaba 235 00:15:25,559 --> 00:15:30,419 toda esta plantilla. Es decir, yo no veo dónde está esta plantilla. Simplemente he visto 236 00:15:30,419 --> 00:15:37,559 que de repente me incluye un formulario con toda esta información. Bueno, vamos a ver 237 00:15:37,559 --> 00:15:43,940 ese formulario que tiene. Y dice, comienza el formulario, coges todos los elementos que 238 00:15:43,940 --> 00:15:51,200 te hagan falta y me lo escribes otra vez. Vamos a ver. Vale, pero no me ha hecho nada 239 00:15:51,200 --> 00:15:55,080 más. No me ha hecho nada más. Es más, esto no lo pone porque como ya hemos puesto por 240 00:15:55,080 --> 00:15:57,340 defecto del botón, el que había, pues no lo pone 241 00:15:57,340 --> 00:15:58,879 y este 242 00:15:58,879 --> 00:16:00,639 widget form, ¿qué es? 243 00:16:01,039 --> 00:16:02,980 bueno, pues si se acuerdan había un directorio 244 00:16:02,980 --> 00:16:04,720 por aquí, que era el de formularios 245 00:16:04,720 --> 00:16:07,120 ¿vale? y ese formulario 246 00:16:07,120 --> 00:16:08,759 este corresponde, estamos 247 00:16:08,759 --> 00:16:10,860 trabajando con empleado, pues al de 248 00:16:10,860 --> 00:16:14,259 empleado, y vemos que 249 00:16:14,259 --> 00:16:16,299 tiene algunos elementos 250 00:16:16,299 --> 00:16:18,379 distintos, es una clase que 251 00:16:18,379 --> 00:16:20,559 construye un formulario con unas características 252 00:16:20,559 --> 00:16:22,399 ¿de acuerdo? me añade un 253 00:16:22,399 --> 00:16:24,440 nombre, me añade el campo nacido 254 00:16:24,440 --> 00:16:26,159 y me añade el campo departamento 255 00:16:26,159 --> 00:16:32,059 Y él, en función de las relaciones, pues ya define cómo considera que tiene que ser, que tiene que ser. 256 00:16:33,039 --> 00:16:38,500 Y, bueno, pues puede ser que no nos guste tanto como lo que nos haría falta. 257 00:16:39,220 --> 00:16:44,320 Por ejemplo, la fecha de nacimiento, ya han visto ustedes las limitaciones que tenía, 258 00:16:44,320 --> 00:16:51,159 que solo iba entre 2015 y 2025, y sin embargo, pues no nos gustaría que tuviera otros tiempos. 259 00:16:51,279 --> 00:16:54,179 Bueno, se le pueden meter muchos parámetros a este acto, ¿vale? 260 00:16:54,179 --> 00:16:57,220 este permite un montón de parámetros 261 00:16:57,220 --> 00:17:00,519 y lo que vamos a hacer es justo meter por ejemplo 262 00:17:00,519 --> 00:17:03,039 en este caso uno que nos indique 263 00:17:03,039 --> 00:17:08,299 que el tipo de datos 264 00:17:08,299 --> 00:17:11,359 el tipo de datos de fecha 265 00:17:11,359 --> 00:17:13,019 coja esa clase 266 00:17:13,019 --> 00:17:15,420 y que además 267 00:17:15,420 --> 00:17:19,720 y esto hay que ver la documentación para saber lo que tenemos disponible 268 00:17:19,720 --> 00:17:22,380 el widget que aplique sea 269 00:17:22,380 --> 00:17:25,220 algo que se llama single text 270 00:17:25,220 --> 00:17:53,140 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. 271 00:17:53,140 --> 00:18:12,619 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. 272 00:18:12,619 --> 00:18:16,970 seguramente no es este directorio 273 00:18:16,970 --> 00:18:18,329 este espacio de nombres, sino 274 00:18:18,329 --> 00:18:20,890 realmente lo que queremos, casi seguro 275 00:18:20,890 --> 00:18:23,049 es que esto no está aquí 276 00:18:23,049 --> 00:18:26,099 esto está, vamos a copiar 277 00:18:26,099 --> 00:18:27,579 esta línea, pegarla aquí 278 00:18:27,579 --> 00:18:29,940 y en vez de esto 279 00:18:29,940 --> 00:18:33,420 que sea aquí, tipe 280 00:18:33,420 --> 00:18:35,519 y esto quitarlo de aquí, que seguro que sobra 281 00:18:35,519 --> 00:18:37,619 es decir, el formulario, ese tipo de datos 282 00:18:37,619 --> 00:18:39,700 vamos a probarlo otra vez 283 00:18:39,700 --> 00:18:42,920 recargo esta página 284 00:18:42,920 --> 00:18:45,180 y tampoco existe 285 00:18:45,180 --> 00:18:48,960 y cuando uno tropieza 286 00:18:48,960 --> 00:18:55,920 varias veces lo mejor que puede hacer es buscar en el manual vale entonces uno va al tipo de datos 287 00:18:57,339 --> 00:19:03,759 de hecho en este caso y busca a ver cuál es la información que le hace falta y vemos aquí 288 00:19:03,759 --> 00:19:09,220 rápidamente que en este caso cuando queremos incluir algunos de estos elementos nos hace 289 00:19:09,220 --> 00:19:22,920 falta incluir este que está que va a ser la que incluir en el fichero de esta voy a salvar 290 00:19:23,380 --> 00:19:30,380 Y ahora, pues seguramente, si yo recargo esto, pues efectivamente funciona. 291 00:19:30,539 --> 00:19:32,680 No hay nada como de vez en cuando mirar los manuales. 292 00:19:35,500 --> 00:19:39,680 Si quisiéramos mejorar esto además, bueno, vamos a comprobar primero que esto está bien, ¿vale? 293 00:19:39,779 --> 00:19:44,640 Aquí efectivamente aparece ya un formulario que podemos poner de cualquier año de lo que sea, ¿vale? 294 00:19:44,799 --> 00:19:47,779 El año de la catapum. 295 00:19:49,400 --> 00:19:52,980 ¿Vale? ¿De acuerdo? 296 00:19:53,559 --> 00:19:55,519 Podríamos modificar o lo que fuera menester. 297 00:19:56,900 --> 00:19:57,339 ¿Vale? 298 00:19:57,859 --> 00:20:04,430 Bien, voy a volverla a dar a mostrar y vamos a darle a editar. 299 00:20:05,650 --> 00:20:09,509 Bien, aquí vemos que sigue estando esto como muy pegado. 300 00:20:10,410 --> 00:20:13,430 Vamos a ver cómo han construido esta página para que salga todo así. 301 00:20:13,730 --> 00:20:21,430 Voy a ver el fuente de esta página y si miro, pues efectivamente han puesto un label y después un campo input. 302 00:20:21,430 --> 00:20:32,609 Si sigo para acá, el campo input que había aquí, después han puesto otro label con un campo input. 303 00:20:33,970 --> 00:20:36,970 y otro label con un select 304 00:20:36,970 --> 00:20:42,029 ¿de acuerdo? entonces una opción que podríamos tener 305 00:20:42,029 --> 00:20:45,029 es decirle en el CSS directamente 306 00:20:45,029 --> 00:20:47,049 vamos a ver como lo hacemos 307 00:20:47,049 --> 00:20:49,789 podríamos hacer en el CSS 308 00:20:49,789 --> 00:20:53,549 voy a ir a él, voy a ir aquí a los ficheros 309 00:20:53,549 --> 00:20:57,579 ya no encuentro hasta el CSS, aquí, vale 310 00:20:57,579 --> 00:21:00,779 pues decirle que label, pues que lo muestre 311 00:21:00,779 --> 00:21:03,819 por ejemplo en bloque, eso puede estar bien 312 00:21:03,819 --> 00:21:06,880 y sobre todo que le dé 313 00:21:06,880 --> 00:21:10,900 una longitud, un tamaño, un ancho 314 00:21:10,900 --> 00:21:14,660 un ancho, por ejemplo, de 12 315 00:21:14,660 --> 00:21:20,150 vamos a ver si esto lo hace así, ¿vale? 316 00:21:20,750 --> 00:21:22,950 vamos a ver si esto me lo está ejecutando 317 00:21:22,950 --> 00:21:27,910 ahí, bueno, pues no veo nada que me lo haga bien 318 00:21:27,910 --> 00:21:32,130 vemos que no está obedeciendo a lo que queremos y posiblemente 319 00:21:32,130 --> 00:21:37,410 tenga algo que ver con que no está obteniendo la hoja de estilos 320 00:21:37,410 --> 00:21:42,670 Vamos a ver qué ocurre y efectivamente vemos que esta no es nuestra hoja de estilos, estamos en otro sitio. 321 00:21:43,309 --> 00:21:45,569 ¿Qué es lo que ha ocurrido? Pues algo muy simple. 322 00:21:45,890 --> 00:21:53,690 Nosotros hemos definido para la primera página que teníamos, que estaba en base HTML, que incluyamos este directorio, como directorio relativo. 323 00:21:54,329 --> 00:22:01,309 Pero claro, en este momento tenemos una ruta que no puede bajar solamente una vez, tendría que bajar varias. 324 00:22:01,309 --> 00:22:03,529 eso sí, está en la raíz de la aplicación 325 00:22:03,529 --> 00:22:06,730 con lo cual, pues vamos a curarnos en salud 326 00:22:06,730 --> 00:22:09,849 y vamos a decir que esto está en la raíz de la aplicación, siempre 327 00:22:09,849 --> 00:22:12,750 si yo ahora ejecuto esto 328 00:22:12,750 --> 00:22:15,890 efectivamente me ha salido el formato que yo quería 329 00:22:15,890 --> 00:22:18,670 pero claro, vamos a ajustar 330 00:22:18,670 --> 00:22:21,430 esa hoja de estilo, lo vamos a ajustar un poquito 331 00:22:21,430 --> 00:22:23,049 en este momento 332 00:22:23,049 --> 00:22:27,490 lo queremos en línea, no queremos esos bloques así 333 00:22:27,490 --> 00:22:29,410 vamos a ver que tal se nos da ahora 334 00:22:29,410 --> 00:22:33,940 y además queremos que 335 00:22:33,940 --> 00:22:36,019 este alineado 336 00:22:36,019 --> 00:22:38,500 text alineantes 337 00:22:38,500 --> 00:22:39,259 line 338 00:22:39,259 --> 00:22:44,970 vamos a ver si nos hace todo lo que queremos ahí 339 00:22:44,970 --> 00:22:46,829 bien, incluso 340 00:22:46,829 --> 00:22:49,130 como 12 puede ser 341 00:22:49,130 --> 00:22:50,369 mucho, vamos a poner 10 342 00:22:50,369 --> 00:22:53,170 y vamos a decir que nos deje un pequeño 343 00:22:53,170 --> 00:22:53,809 margen 344 00:22:53,809 --> 00:22:59,690 un margin 345 00:22:59,690 --> 00:23:01,509 right 346 00:23:01,509 --> 00:23:03,029 de pues 347 00:23:03,029 --> 00:23:04,630 un ring 348 00:23:04,630 --> 00:23:10,529 ¿Vale? Bueno, pues ha quedado algo muy bonito, ¿de acuerdo? 349 00:23:10,630 --> 00:23:14,029 Y ha quedado algo que tiene bastante pinta de una aplicación 350 00:23:14,029 --> 00:23:17,849 ¿Qué más cosas tenemos? Que ahora ya nos ha puesto esta información así 351 00:23:17,849 --> 00:23:20,930 Y seguimos teniendo la duda de si vamos a igualar todo 352 00:23:20,930 --> 00:23:23,849 Y vamos a poner todo como botones o todo como enlaces 353 00:23:23,849 --> 00:23:27,109 Incluso a lo mejor podríamos mezclar las dos cuestiones 354 00:23:27,109 --> 00:23:29,369 Pero el botón de volver lo pondríamos al principio 355 00:23:29,369 --> 00:23:33,750 Vamos a ver si eso, este formulario directamente nos lo permite 356 00:23:33,750 --> 00:23:36,589 se acuerdan que estábamos en edición 357 00:23:36,589 --> 00:23:38,890 y efectivamente vamos a mover 358 00:23:38,890 --> 00:23:40,930 esto, ahí no lo podemos 359 00:23:40,930 --> 00:23:42,990 mover antes, o sea, lo que sí podemos ponerle 360 00:23:42,990 --> 00:23:44,930 es el último, al menos que estén los dos botones 361 00:23:44,930 --> 00:23:48,309 y el último un enlace 362 00:23:48,309 --> 00:23:54,480 bueno, pues esto ya tiene una pinta bastante 363 00:23:54,480 --> 00:23:56,460 más agradable, aquí tenemos 364 00:23:56,460 --> 00:23:57,740 mostrar 365 00:23:57,740 --> 00:24:01,670 aquí tendremos volver, editar 366 00:24:01,670 --> 00:24:02,410 y eliminar 367 00:24:02,410 --> 00:24:05,930 y aquí tenemos 368 00:24:05,930 --> 00:24:09,950 añadir. Y podríamos confirmar con esto, pero vamos a intentar mejorar el tema 369 00:24:09,950 --> 00:24:16,650 de enlaces y botones. Hemos pensado qué hacer, si poner 370 00:24:16,650 --> 00:24:20,710 todo como enlaces o todo como botones y vemos que mejor botones, porque 371 00:24:20,710 --> 00:24:24,730 en muchos casos hay formularios que necesitan un botón y mientras que los enlaces sí podemos 372 00:24:24,730 --> 00:24:28,750 convertirlos fácilmente en botones. Vamos a ver cómo hacemos esto. Bueno, vamos 373 00:24:28,750 --> 00:24:32,710 a este mismo ejemplo aquí, donde tenemos el botón 374 00:24:32,710 --> 00:24:36,269 volver, este botón volver que tenemos en la dictada empleada. 375 00:24:36,269 --> 00:24:58,690 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. 376 00:24:58,690 --> 00:25:01,450 voy a comentar esto para que no se vea 377 00:25:01,450 --> 00:25:03,210 esto de aquí, después lo quitaremos 378 00:25:03,210 --> 00:25:05,069 y vamos a ver 379 00:25:05,069 --> 00:25:06,529 qué es lo que hace esto 380 00:25:06,529 --> 00:25:09,490 voy a recargar 381 00:25:09,490 --> 00:25:13,720 mi página 382 00:25:13,720 --> 00:25:15,200 en editar 383 00:25:15,200 --> 00:25:17,819 aquí y efectivamente mi botón volver 384 00:25:17,819 --> 00:25:19,480 ya es igual que los demás 385 00:25:19,480 --> 00:25:20,720 voy a ver si funciona 386 00:25:20,720 --> 00:25:22,539 efectivamente funciona 387 00:25:22,539 --> 00:25:25,500 bueno pues esto 388 00:25:25,500 --> 00:25:27,900 esta misma cuestión que acabo de aplicar 389 00:25:27,900 --> 00:25:29,680 aquí la aplicaría en los demás sitios 390 00:25:29,680 --> 00:25:30,759 voy a borrar ya esto 391 00:25:30,759 --> 00:25:34,319 y voy a ir a los formularios que tengo por aquí 392 00:25:34,319 --> 00:25:37,960 por ejemplo a este form no hace falta 393 00:25:37,960 --> 00:25:42,039 a este edit es el que acabo de generar 394 00:25:42,039 --> 00:25:46,740 vamos a ver en el index cual me hacía falta que tenía varios enlaces 395 00:25:46,740 --> 00:25:49,740 tenía este enlace de mostrar que voy a sustituir 396 00:25:49,740 --> 00:26:04,569 voy a sustituir este enlace tal cual y vamos a cambiar 397 00:26:04,569 --> 00:26:07,930 simplemente esta expresión 398 00:26:07,930 --> 00:26:10,910 por esta de aquí 399 00:26:10,910 --> 00:26:16,299 y aquí para devolver 400 00:26:16,299 --> 00:26:18,500 es mostrar, ya os voy a comentar 401 00:26:18,500 --> 00:26:19,579 también esto de aquí arriba 402 00:26:19,579 --> 00:26:24,319 para que de momento no se vea, después ya todo esto lo iremos quitando 403 00:26:24,319 --> 00:26:26,200 ¿vale? en este caso 404 00:26:26,200 --> 00:26:27,559 tenemos 405 00:26:27,559 --> 00:26:30,000 otro más abajo que es el de añadir 406 00:26:30,000 --> 00:26:32,299 vamos a copiarle 407 00:26:32,299 --> 00:26:38,970 aquí, vamos a poner de verde 408 00:26:38,970 --> 00:26:41,289 toda la luz de ahí abajo, esta justamente 409 00:26:41,289 --> 00:26:42,289 que tenemos aquí 410 00:26:42,289 --> 00:26:50,279 ¿vale? aquí ponemos 411 00:26:50,279 --> 00:26:51,299 añadir 412 00:26:51,299 --> 00:26:59,950 y esto también lo comentaré 413 00:26:59,950 --> 00:27:25,650 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, 414 00:27:25,650 --> 00:27:29,920 tengo este botón 415 00:27:29,920 --> 00:27:32,119 y tengo este 416 00:27:32,119 --> 00:27:34,180 y los dos los voy a modificar 417 00:27:34,180 --> 00:27:35,940 en un caso copio lo de aquí 418 00:27:35,940 --> 00:27:49,140 ¿vale? y comento 419 00:27:49,140 --> 00:27:50,720 esto y esto 420 00:27:50,720 --> 00:27:59,039 ya pueden ver 421 00:27:59,039 --> 00:28:01,880 que esto es más tedioso que generar 422 00:28:01,880 --> 00:28:04,039 la aplicación, que es el adecuarla 423 00:28:04,039 --> 00:28:05,619 y darle un formato un poquito 424 00:28:05,619 --> 00:28:06,759 adecuado ¿vale? 425 00:28:07,440 --> 00:28:09,059 aquí recuerdo que tengo que poner volver 426 00:28:09,059 --> 00:28:11,859 y aquí recuerdo que tengo que 427 00:28:11,859 --> 00:28:13,299 poner editar 428 00:28:13,299 --> 00:28:14,640 ¿vale? 429 00:28:15,720 --> 00:28:35,089 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. 430 00:28:35,089 --> 00:28:43,309 Bueno, pues parece que está todo con un aspecto bastante digno dentro de lo que es este tipo de aplicaciones, ¿de acuerdo? 431 00:28:43,970 --> 00:28:57,190 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í. 432 00:28:58,730 --> 00:29:03,549 Bueno, si vamos introduciendo novedades, pues ya haremos otros nuevos vídeos. 433 00:29:03,549 --> 00:29:04,650 Hasta luego.