1 00:00:00,330 --> 00:00:02,200 Vamos a continuar con nuestro proyecto. 2 00:00:02,340 --> 00:00:06,380 Si vemos el proyecto final por ejemplo este 15 Juan empresa etcétera. 3 00:00:06,420 --> 00:00:11,460 Si le das click en Editar te lleva al formulario para editarlo Desde aquí puedes cambiarle 4 00:00:15,560 --> 00:00:16,730 las clic en Guardar. 5 00:00:16,730 --> 00:00:22,320 Eso dice contacto editado correctamente y nos redirige nuevamente y actualiza el registro. 6 00:00:22,740 --> 00:00:30,820 Entonces esa es otra página lo que vamos a hacer es crear un nuevo archivo sin nombrarlo editar punto 7 00:00:30,830 --> 00:00:34,160 PHP. 8 00:00:34,200 --> 00:00:40,350 La idea es que cuando hacemos clic en Editar en alguno de estos contactos en el lápiz nos lleve a ella. 9 00:00:40,350 --> 00:00:49,960 Por lo tanto aquí vamos a poner editar a PHP y eso lo mismo para los otros elementos. 10 00:00:49,960 --> 00:00:55,390 Todo esto lo estaremos borrando para hacer lo dinámico un poco más adelante pero tenemos que hacerlo 11 00:00:55,390 --> 00:01:00,130 lo más real que se pueda al menos en esta parte y para hacerlo todavía más real lo va a poner un Heydi 12 00:01:00,850 --> 00:01:06,610 igual a uno entonces que tenga una idea que lo estemos pasando a cada uno de ellos va a tener el mismo 13 00:01:06,650 --> 00:01:08,180 Heydi no importa. 14 00:01:08,200 --> 00:01:12,710 La idea es que tenga esta idea y de una vez porque los tenemos validando o en Editar. 15 00:01:12,880 --> 00:01:22,210 Siguiente paso es que voy a copiar lo que se deje de y que abajo voy a poner Fuhrer si guardas cambio 16 00:01:22,210 --> 00:01:26,590 si recargas el proyecto que llevamos que aquí ya se perdió uno 17 00:01:29,990 --> 00:01:36,150 en esta parte aquí me hizo falta agregar dos puntos si no tiene ese problema sin donarlos recargamos 18 00:01:36,460 --> 00:01:37,090 y vuelve. 19 00:01:37,250 --> 00:01:42,810 Si doy click aquí me lleva ahora a editar con el IBI uno entonces los siguientes que vamos a comenzar 20 00:01:42,810 --> 00:01:44,220 a trabajar aquí. 21 00:01:44,370 --> 00:01:49,080 Si vemos el proyecto final este cambia un poco aquí arriba estar contactã y tiene un botón para volver. 22 00:01:49,080 --> 00:01:53,010 En caso de que no quieran hacerlo en ninguna edición nada más dan en volver y no pasa nada. 23 00:01:54,330 --> 00:02:01,130 Voy a copiar algo de este otro proyecto de esta página pero aquí vemos que ese contenedor barra pero 24 00:02:01,130 --> 00:02:11,540 voy a agregar algo más de cortar este o agregar un elemento extra Class contenedor y lo barra por separado. 25 00:02:13,520 --> 00:02:21,500 Si ya el contenedor lo va a aplicar lo que es centrarlo Ibarra va a tener algunos estilos de que estaremos 26 00:02:21,510 --> 00:02:27,270 agregando para posicionar los elementos bien pego lo que se esté H1 y aquí en lugar de que diga agenda 27 00:02:27,270 --> 00:02:29,370 de contactos va decir reeditar contacto 28 00:02:34,270 --> 00:02:45,470 y colocamos una va a llevarnos a índex punto PHP y va a tener la clase Class MTN y volver y tener el 29 00:02:45,470 --> 00:02:51,230 texto devolverá si guardo cambios si recargamos de momento que de esta forma me falta un poco más de 30 00:02:51,230 --> 00:02:58,970 estilo lo veremos enseguida siguiente video y un poco de sal de aquí hacia abajo y aquí voy a cargar 31 00:02:58,970 --> 00:03:06,260 lo que viene siendo del índex algo muy similar a lo que ya tenemos aquí va a copiar todo esto pero aquí 32 00:03:06,260 --> 00:03:16,480 abajo me faltan los Dives de cierre coloco aquí el Forum y el leyen se mantienen leyen va a ser diferente 33 00:03:16,480 --> 00:03:26,940 aquí nada más va a decir edita el contacto evite el contacto y guardamos cambios y recargamos y vemos 34 00:03:26,940 --> 00:03:33,880 que el contacto se heredan todos los estilos todos se pasa esta parte ahora el formulario es igual este 35 00:03:33,890 --> 00:03:39,860 añade un contacto los tres campos son iguales en añadir y en editar exactamente iguales. 36 00:03:39,860 --> 00:03:41,540 Son pocas las cosas que cambian. 37 00:03:41,550 --> 00:03:48,710 Nos veremos enseguida por lo tanto para no crear dos formularios y escribir un código más reutilizable 38 00:03:49,460 --> 00:03:55,760 vamos a crear aquí en Layout un nuevo archivo que se va a llamar formulario juntos PHP para mostrarte 39 00:03:55,760 --> 00:03:59,710 algunas técnicas para reutilizar más este formulario. 40 00:03:59,810 --> 00:04:05,450 Primero es que voy a abrir blindex y voy a cortar todo lo que viene siendo todo lo que está dentro de 41 00:04:05,450 --> 00:04:06,990 campos. 42 00:04:07,010 --> 00:04:15,230 Incluso este de enviar les dejo por fuera lo que es el Fórum y el leyendo porque las leyes son diferentes 43 00:04:15,230 --> 00:04:18,790 y el Fornelos Eiriz muy probablemente también lo sean. 44 00:04:19,360 --> 00:04:21,980 Entonces vamos a cortar todo esto y todo esto se verá formulario 45 00:04:25,070 --> 00:04:31,790 en formulario y de esta forma puedo ir nuevamente al índex y copiar este código de aquí e incluir mi 46 00:04:31,790 --> 00:04:41,590 formulario aquí pongo formulario y también voy a copiar este y me los llevo a editar yo tengo el formulario 47 00:04:41,590 --> 00:04:47,270 en ambos archivos utilizando la misma base en los dos Recaro aquí que tengo el mismo formulario quise 48 00:04:47,320 --> 00:04:52,570 añadir estaremos utilizando un poco de lógica para mostrar distintos valores. 49 00:04:52,600 --> 00:04:59,140 Tengo el mismo formulario en ambos esa parte la veremos ya más a detalle cuando estemos en la parte 50 00:04:59,140 --> 00:05:04,080 de de lo que viene siendo PHP y SQL todavía no llegamos ahí. 51 00:05:04,200 --> 00:05:10,740 El siguiente paso es que si vemos en editar tenemos este contenedor y tenemos barra que voy a utilizar 52 00:05:10,860 --> 00:05:22,970 Grid vamos a ver hacia arriba y quiero poner punto barra y ponerle un display Grit que tiene Grid que 53 00:05:22,970 --> 00:05:24,020 le define las áreas. 54 00:05:24,020 --> 00:05:33,110 Por lo tanto hay que oponer grids Grit template Columns y vamos a ponerle 100 píxeles que va a ser un 55 00:05:33,110 --> 00:05:40,580 área y el resto va a tomar una fracción es decir lo que haya restante entonces que iba a poner items 56 00:05:41,100 --> 00:05:47,450 Center con guardar cambios aquí nada más se coloca este del lado izquierdo y te quedas más centrado 57 00:05:47,870 --> 00:05:53,750 perfectamente centrado porque aquí tenemos 100 píxeles pero queda centrado y ya se queda el lado izquierdo 58 00:05:53,780 --> 00:06:02,190 y alinee items los centrã verticalmente nos hace falta lo que dice volver entonces lo que voy a hacer 59 00:06:02,190 --> 00:06:05,930 es traerme esos botones son botones más genéricos. 60 00:06:05,940 --> 00:06:12,600 Por lo tanto voy a cortar todo esto me lo llevo aquí arriba podemos poner hay incluso un texto que diga 61 00:06:12,600 --> 00:06:13,350 botones 62 00:06:16,700 --> 00:06:21,060 y voy a colocar uno que diga volver a tener muchos estilos mucho más que los otros. 63 00:06:21,110 --> 00:06:25,960 Volver el background color va a ser el color secundario. 64 00:06:26,030 --> 00:06:32,570 Color amarillo verde Rey Dios también va a tener un par de rayos de 5 pixeles el texto va a estar centrado 65 00:06:33,420 --> 00:06:43,860 en el color del texto va a ser negro su color va a ser proceres el fondo Wake va a ser de 700 y el Foncillas 66 00:06:43,910 --> 00:06:51,840 de 1.2 Rubem y un poco de París para que quede el botón un poco más grande .5 en todo eso le va a dar 67 00:06:51,840 --> 00:06:58,320 unos estilos para que se vea un botón como este que tenemos aquí y podamos click en volver y nos lleve 68 00:06:58,320 --> 00:07:05,220 de vuelta a la página principal en volver y en el siguiente vídeo vamos a comenzar a agregar las partes 69 00:07:05,220 --> 00:07:10,350 más interactivas de esta aplicación tenemos ya casi toda la base empezando por la validación. 70 00:07:10,350 --> 00:07:15,600 Puedes ver que se dedicaría a quién añadir aparece todos los campos son obligatorios veremos cómo crear 71 00:07:15,600 --> 00:07:20,030 esta notificación así que todo eso lo veremos a partir del próximo vídeo.