1 00:00:00,510 --> 00:00:05,610 En este video vamos a comenzar a leer los datos del formulario crear un objeto que será el que realizará 2 00:00:05,610 --> 00:00:07,420 la petición a la base de datos. 3 00:00:07,440 --> 00:00:09,630 Aún no tenemos la base de datos ni nada de eso. 4 00:00:09,630 --> 00:00:14,760 La idea es de momento nada más leer esto y lo estaremos creando la base de datos y toda esa parte a 5 00:00:14,760 --> 00:00:20,090 partir del próximo video sabremos lo que es este proyecto finalizado. 6 00:00:20,310 --> 00:00:26,430 Inspeccionamos aquí por ejemplo está añadir tengo un input oculto que dice acción y lo dice Balor crear 7 00:00:26,940 --> 00:00:32,790 de esta forma sé que este formulario es para crear y el otro es para editar porque los formularios recuerda 8 00:00:32,790 --> 00:00:34,550 son básicamente el mismo. 9 00:00:34,590 --> 00:00:41,340 Más que nada para reutilizar el formulario de criquet quién editar en esta parte y inspeccionen nuevamente 10 00:00:41,340 --> 00:00:47,310 aquí puedes ver que este tiene dos iDEN diferentes tiene una acción con un valor de editar y lo estoy 11 00:00:47,310 --> 00:00:51,320 pasando en Heydi para que sepa qué es el que estamos editando en la base de datos. 12 00:00:51,540 --> 00:00:54,050 Toda esa parte hay que hacerla en este. 13 00:00:54,120 --> 00:01:00,320 En este capítulo al menos lo de agregar el botón de input y leer los datos. 14 00:01:00,480 --> 00:01:10,840 Primero vamos a los que es formulario y aquí arriba voy a colocar un imput they've given y ponerlo en 15 00:01:11,520 --> 00:01:15,840 acción y suba lo iba a decir crear enseguida. 16 00:01:15,850 --> 00:01:22,750 Más adelante estaremos creando la lógica para mostrar crear o editar Cetra que estemos trabajando con 17 00:01:22,750 --> 00:01:29,840 esa funcionalidad y volvemos al Lab JS Y bueno primero si recuerdas le di un Heydi nuevo que se llama 18 00:01:29,840 --> 00:01:35,570 acción entonces tengo que crear esa variable para que sepa el mismo formulario va a tener uno de editar 19 00:01:35,570 --> 00:01:39,280 otro va a tener la acción de crear nuevo. 20 00:01:39,290 --> 00:01:47,310 Por lo tanto aquí pongo acción igual al documento punto y selector y voy a poner aquí una acción punto 21 00:01:47,330 --> 00:01:48,760 válido. 22 00:01:49,010 --> 00:01:54,800 Eso me va a crear al leer los tres valores este no validarlo porque este se agrega por default en el 23 00:01:54,800 --> 00:02:06,160 quiren pero aquí vamos a poner un comentario que va a decir pasa la validación crear llamado Ayax entonces 24 00:02:06,200 --> 00:02:16,050 aquí vamos a crear la frontera info contacto igual a new form form Daira de esta forma y frontera. 25 00:02:16,060 --> 00:02:21,280 Recuerdas la mejor forma para leer datos de un formulario incluso archivos y pasarlos por medio de Ayax. 26 00:02:21,310 --> 00:02:27,780 Por mucho la mejor forma después ponemos info contacto y utilizamos la función eczema Append y le pasamos 27 00:02:27,780 --> 00:02:29,670 una llave y un valor. 28 00:02:29,670 --> 00:02:36,200 Por ejemplo el nombre Koma sería la llave y el valor sería la variable de nombre. 29 00:02:36,270 --> 00:02:40,380 De esta forma vamos a acceder al valor pero de esta forma le decimos que valor es el que va a tener 30 00:02:40,380 --> 00:02:41,570 esta llave. 31 00:02:41,610 --> 00:02:52,810 Esto viene desde arriba voy a crear tres copias más entonces el segundo va a decir la empresa tercero 32 00:02:52,810 --> 00:03:00,540 va a decir teléfono y el último va decir acción entonces esta acción va a decir si es crear o evitar 33 00:03:00,540 --> 00:03:02,120 más adelante lo estaremos viendo. 34 00:03:02,920 --> 00:03:16,240 Aquí voy a poner un IBF y si la acción es igual a crear entonces crearemos un nuevo elemento caso contrario 35 00:03:16,760 --> 00:03:19,160 pues lo más seguro es que sea editar. 36 00:03:19,420 --> 00:03:27,330 Por lo tanto tenemos que hacer otras operaciones editar el elemento que en lugar de elemento voy a poner 37 00:03:27,330 --> 00:03:30,720 aquí contacto ahora para hacer una función tan grande. 38 00:03:30,720 --> 00:03:35,880 Yo soy más partidario de crear funciones pequeñas esta es una función relativamente grande porque tiene 39 00:03:35,880 --> 00:03:42,880 todas estas líneas se repiten pero no es recomendado como crear una función tan grande. 40 00:03:43,010 --> 00:03:49,860 Más bien sería buena idea dividir estas pequeñas funciones para validar que este from frontera tenga 41 00:03:49,860 --> 00:03:50,310 algo. 42 00:03:50,310 --> 00:03:57,450 Tal vez quieras ver que se estén pasando correctamente tus variables que le pones Consol log info contacto 43 00:03:57,450 --> 00:04:02,010 que es la variable a la que se le asignan los valores del from Daira. 44 00:04:02,010 --> 00:04:08,400 Quiero mostrarte algo recargamos aquí si le pones por ejemplo 1 2 y 3 nada más así añadir que hace frontera 45 00:04:08,400 --> 00:04:13,520 y viene vacío y tal vez pienses no se están pasando mis variables tengo un error en mi código. 46 00:04:13,760 --> 00:04:18,930 Bueno eso más que nada es porque Founder no puedes acceder a los valores de esta forma y siempre es 47 00:04:18,930 --> 00:04:24,380 buena idea antes de comenzar a escribir más código al menos verificar que todo esté funcionando correctamente. 48 00:04:24,480 --> 00:04:31,350 Para saber si hay un error al menos en parte fue hasta donde funcionaba bien el proyecto puedes revisarlo 49 00:04:31,350 --> 00:04:37,350 aquí poniéndole el esperado pratos se le conoce son tres puntos y básicamente estos tres puntos lo único 50 00:04:37,350 --> 00:04:47,310 que hacen es crear una copia de este objeto se recargamos 1 2 3 Añadir y vemos que dice aquí con toda 51 00:04:47,310 --> 00:04:50,070 la información el nombre es 1 la empresa. 52 00:04:50,070 --> 00:04:56,370 2 El teléfono estrés y su acción es crear y de esta forma ya tenemos todos los datos aquí en esta parte 53 00:04:56,650 --> 00:05:02,100 y podemos continuar trabajando sabiendo que los datos del formulario se están leyendo correctamente 54 00:05:02,880 --> 00:05:07,590 y aquí en lugar de tener acción crear +15 creamos un nuevo contacto. 55 00:05:07,590 --> 00:05:14,960 Voy a crear una nueva función que voy a nombrar insertar en la base de datos y esta va a tomar lo que 56 00:05:14,960 --> 00:05:17,060 viene siendo nuestro. 57 00:05:17,100 --> 00:05:23,210 Frontera con toda la información aquí que ya esta parte frontera lo creamos porque ya pasamos la validación 58 00:05:23,210 --> 00:05:33,120 y todo se ejecuta esta nueva función iba a ponerle función función insertar a la base de datos y este 59 00:05:33,170 --> 00:05:38,000 toma como parámetro unos datos este nombre y este nombre podrían ser iguales. 60 00:05:38,000 --> 00:05:40,790 Muchos programadores les gusta hacerlo de esa forma. 61 00:05:41,060 --> 00:05:47,110 Cualquiera de las dos formas está bien que los nombres igual o que dos nombres diferentes no hay problema. 62 00:05:47,180 --> 00:05:51,200 La idea más que nada son parámetros que comunican que pasan de una función a otra. 63 00:05:52,070 --> 00:06:02,840 Entonces siéntete libre de nombrarlos como tú deseis se inserta en la base de datos via Ayax ahora yaks 64 00:06:02,880 --> 00:06:07,290 ya se puede decir que no digo que esté de salida porque obviamente sigue utilizándose mucho tiene muy 65 00:06:07,290 --> 00:06:08,170 buen soporte. 66 00:06:08,520 --> 00:06:14,850 Hay otras tecnologías que han salido últimamente Accio es una muy buena opción Fecha y Piauí es otra 67 00:06:15,390 --> 00:06:17,990 pero créeme vas a trabajar. 68 00:06:18,000 --> 00:06:24,000 Si decides buscar empleo muy probable que muchos de los sistemas que te toque trabajar con ellos o que 69 00:06:24,000 --> 00:06:27,750 el grupo de trabajo decida implementar estarán hechos con Ayax. 70 00:06:27,750 --> 00:06:30,450 Por lo tanto sigue siendo una tecnología que vale la pena aprender. 71 00:06:31,690 --> 00:06:40,940 Aquí vamos a revisar nuestro llamado Ayax si recuerdas son varios pasos crear el objeto primero abrir 72 00:06:40,940 --> 00:06:50,760 la conexión pasar los datos y enviar los datos entonces son varios son cuatro pasos los que se mandan. 73 00:06:50,760 --> 00:06:57,510 Y quinto vendría siendo uno opcional que es leer los errores entonces va a ser esta parte lo que estaremos 74 00:06:57,510 --> 00:07:06,390 trabajando es el llamado acceso así como se conoce esta parte vamos a comenzar aquí a poner cons X H.R 75 00:07:06,720 --> 00:07:15,030 Gualán New XML HTTP Henriquez siempre se utiliza éste para crear llamados Ayax y recuerda enviar los 76 00:07:15,030 --> 00:07:22,710 datos siempre es con X H.R unidocente y le pasamos los datos que queremos enviar. 77 00:07:23,110 --> 00:07:29,200 Aquí en esta parte debido a que es una petición POST post es decir agregar nuevos datos a lo que ya 78 00:07:29,200 --> 00:07:35,060 existe vamos a pasar aquí y quizá Cherres es como una convención que existe de nombrarlo de esta forma 79 00:07:35,070 --> 00:07:45,720 puedes nombrarlo como tu dices y después abrir la conexión que vamos a colocar y quizá repuntó Open 80 00:07:46,040 --> 00:07:55,620 tanto Open como CENS son funciones son métodos que existen en x h XML HTTP recuesto que existen dentro 81 00:07:55,650 --> 00:08:00,480 por lo tanto vamos a abrir una conexión toma tres parámetros primero es que tipo de peticiones en este 82 00:08:00,480 --> 00:08:06,090 caso es post post normalmente se utiliza cuando insertas algo en la base de datos o en un formulario 83 00:08:06,420 --> 00:08:10,470 Goeth es cuando quieres obtener algo que está en el servidor. 84 00:08:10,470 --> 00:08:19,010 Básicamente esa es la diferencia que voy a abrir este y que tenemos y en ese voy a crear un nuevo archivo 85 00:08:19,010 --> 00:08:25,550 que voy a nombrar modelos me gusta nombrar los modelos que contienen las diferentes peticiones y los 86 00:08:25,550 --> 00:08:34,760 datos pero puedes nombrarlo como tu dices y quieres decimos a donde quieres diagonal modelos de Donal 87 00:08:34,790 --> 00:08:41,740 modelo y contactos punto PHP y el último es para hacer el llamado asíncrono. 88 00:08:42,130 --> 00:08:49,810 Entonces nos falta crear este archivo y a qué modelos les voy a crear modelos contacto y poner aquí 89 00:08:49,900 --> 00:08:50,560 PHP. 90 00:08:50,560 --> 00:08:58,500 Muy sencillo va a ponerle un eco ya hizo una cosa y ponemos post ahorita los tenemos viendo falta la 91 00:08:58,500 --> 00:09:06,670 última parte que es pasar los datos se hacen X HR holdouts más que nada es como leer la respuesta igual 92 00:09:06,680 --> 00:09:13,400 la función se recomienda no utilizar Fontseré no tanto Naharro funciona aquí porque pierdes la referencia 93 00:09:14,330 --> 00:09:20,810 y después revisamos hay varios estátus dice estátus es igual a 200 si quiere decir que la conexión fue 94 00:09:20,810 --> 00:09:32,210 exitosa y aquí le puedo poner el punto log x H.B Response texto si guardamos cambios recargamos aquí 95 00:09:32,420 --> 00:09:34,820 me poner uno uno dos y tres. 96 00:09:34,820 --> 00:09:40,380 Bueno aquí dice uno dos y tres añadir y vemos que tenemos la respuesta de esta forma. 97 00:09:40,380 --> 00:09:49,070 Esto X es línea 53 viene siendo este que está aquí es una string tiene forma de Jayson un Jayson básicamente 98 00:09:49,070 --> 00:09:51,600 es una llave y un valor es como un objeto de JavaScript. 99 00:09:52,720 --> 00:09:57,630 Y puedes copiar por ejemplo esto de aquí copiarlo utilizar un servicio como ya hizo un editor online 100 00:09:58,410 --> 00:10:04,170 y pegarlo aquí y darle acá y puede ser que se que es un objeto y tiene nombre empresa teléfono y una 101 00:10:04,170 --> 00:10:04,580 acción. 102 00:10:05,460 --> 00:10:12,870 Entonces Jayson es un formato de transporte debido a que estamos pasando datos del HTML y los leemos 103 00:10:12,870 --> 00:10:16,620 con JavaScript los enviamos vía Ayax a PHP. 104 00:10:16,620 --> 00:10:22,420 Necesitamos un formato que sea de transporte que se pueda comunicar entre los distintos lenguajes y 105 00:10:22,440 --> 00:10:29,670 Jayson es una opción muy rápida muy fácil de utilizar y muy sencilla de implementar nada más con esta 106 00:10:29,670 --> 00:10:36,100 función que son Incopesca y estamos retornando todo lo que esté en post y de esta forma lo tenemos ahora 107 00:10:36,510 --> 00:10:37,350 en esta parte. 108 00:10:37,380 --> 00:10:43,310 Esto es un Jayson pero sigue siendo un stream porque no podemos hacer nada en esta parte. 109 00:10:43,470 --> 00:10:49,440 Al ser un Jayson y al ser un estreno utilizamos una función se llama Jayson en mayúsculas debe de ser 110 00:10:49,460 --> 00:10:59,200 punto Pars y abrimos paréntesis y rodeamos todo eso y eso va a encargarse de convertir ese string a 111 00:10:59,200 --> 00:11:04,580 un Jayson en el que podamos acceder a sus valores individualmente similar a esto que tenemos aquí donde 112 00:11:04,580 --> 00:11:07,880 podemos acceder a nombre empresa teléfono y acción. 113 00:11:07,880 --> 00:11:15,520 Lo mismo puedes hacerlo en JavaScript utilizando Jayson parts recargamos 1 2 y 3 Añadir y puedes ser 114 00:11:15,580 --> 00:11:19,580 X el nombre empresa teléfono y acción. 115 00:11:19,580 --> 00:11:24,380 Si quieres acceder a cada uno de estos valores bueno esto es un objeto y recuerda a los objetos siempre 116 00:11:24,590 --> 00:11:33,990 siempre accedes a sus valores con un punto voy a leer aquí todo esto como respuesta a ser que abajo 117 00:11:33,990 --> 00:11:45,940 voy a colocar una variable leemos la respuesta de HP y ponemos Conce respuesta igual a Yeison iba a 118 00:11:45,980 --> 00:11:54,570 ser este mismo código no tiene sentido volverlo a escribir todo pero aquí punto y coma y digamos darle 119 00:11:54,610 --> 00:11:55,200 consolados. 120 00:11:55,240 --> 00:11:58,350 Digamos que quiero acceder a la empresa. 121 00:11:58,540 --> 00:12:07,020 Respuesta punto empresa porque ese lo que viene siendo Yeison pars lo convierte en objeto de JavaScript 122 00:12:07,980 --> 00:12:08,750 en PHP. 123 00:12:08,760 --> 00:12:12,480 No existen los objetos de la misma forma que existen en JavaScript. 124 00:12:12,600 --> 00:12:19,000 Allá son arreglos asociativos en JavaScript no existen los arreglos asociativos son objetos. 125 00:12:19,020 --> 00:12:24,700 Por lo tanto necesitamos ese formato de transporte y eso es la mejor opción. 126 00:12:24,780 --> 00:12:33,510 Respuesta punto empresa que va a poner una vacuna en nombre de Demy y añadir marca un error de repuesta 127 00:12:35,060 --> 00:12:39,020 si es que quiere ser repuesta y ser respuesta nueva cuenta recargamos 128 00:12:42,320 --> 00:12:42,950 que. 129 00:12:43,140 --> 00:12:48,830 Entonces puedes acceder a los valores pero primero tienes que convertir ese string que es un Jayson 130 00:12:48,830 --> 00:12:55,490 sí pero ya hizo un punto par lo convierte a un objeto y JavaScript ya puede acceder a sus valores en 131 00:12:55,490 --> 00:13:02,330 lo que viene siendo PHP se conocen como arreglos asociativos en JavaScript son objetos y Jayson es lo 132 00:13:02,330 --> 00:13:04,630 que permite esa comunicación entre los dos. 133 00:13:04,730 --> 00:13:11,600 NUEVA CUENTA Jayson es un lenguaje de transporte mucho más rápido que XML menos complicado y más fácil 134 00:13:11,600 --> 00:13:17,870 de implementar así que ya tenemos esta parte en el siguiente video vamos a crear la base de datos y 135 00:13:17,870 --> 00:13:19,040 los archivos de conexión.