En este video vamos a comenzar a leer los datos del formulario crear un objeto que será el que realizará
la petición a la base de datos.
Aún no tenemos la base de datos ni nada de eso.
La idea es de momento nada más leer esto y lo estaremos creando la base de datos y toda esa parte a
partir del próximo video sabremos lo que es este proyecto finalizado.
Inspeccionamos aquí por ejemplo está añadir tengo un input oculto que dice acción y lo dice Balor crear
de esta forma sé que este formulario es para crear y el otro es para editar porque los formularios recuerda
son básicamente el mismo.
Más que nada para reutilizar el formulario de criquet quién editar en esta parte y inspeccionen nuevamente
aquí puedes ver que este tiene dos iDEN diferentes tiene una acción con un valor de editar y lo estoy
pasando en Heydi para que sepa qué es el que estamos editando en la base de datos.
Toda esa parte hay que hacerla en este.
En este capítulo al menos lo de agregar el botón de input y leer los datos.
Primero vamos a los que es formulario y aquí arriba voy a colocar un imput they've given y ponerlo en
acción y suba lo iba a decir crear enseguida.
Más adelante estaremos creando la lógica para mostrar crear o editar Cetra que estemos trabajando con
esa funcionalidad y volvemos al Lab JS Y bueno primero si recuerdas le di un Heydi nuevo que se llama
acción entonces tengo que crear esa variable para que sepa el mismo formulario va a tener uno de editar
otro va a tener la acción de crear nuevo.
Por lo tanto aquí pongo acción igual al documento punto y selector y voy a poner aquí una acción punto
válido.
Eso me va a crear al leer los tres valores este no validarlo porque este se agrega por default en el
quiren pero aquí vamos a poner un comentario que va a decir pasa la validación crear llamado Ayax entonces
aquí vamos a crear la frontera info contacto igual a new form form Daira de esta forma y frontera.
Recuerdas la mejor forma para leer datos de un formulario incluso archivos y pasarlos por medio de Ayax.
Por mucho la mejor forma después ponemos info contacto y utilizamos la función eczema Append y le pasamos
una llave y un valor.
Por ejemplo el nombre Koma sería la llave y el valor sería la variable de nombre.
De esta forma vamos a acceder al valor pero de esta forma le decimos que valor es el que va a tener
esta llave.
Esto viene desde arriba voy a crear tres copias más entonces el segundo va a decir la empresa tercero
va a decir teléfono y el último va decir acción entonces esta acción va a decir si es crear o evitar
más adelante lo estaremos viendo.
Aquí voy a poner un IBF y si la acción es igual a crear entonces crearemos un nuevo elemento caso contrario
pues lo más seguro es que sea editar.
Por lo tanto tenemos que hacer otras operaciones editar el elemento que en lugar de elemento voy a poner
aquí contacto ahora para hacer una función tan grande.
Yo soy más partidario de crear funciones pequeñas esta es una función relativamente grande porque tiene
todas estas líneas se repiten pero no es recomendado como crear una función tan grande.
Más bien sería buena idea dividir estas pequeñas funciones para validar que este from frontera tenga
algo.
Tal vez quieras ver que se estén pasando correctamente tus variables que le pones Consol log info contacto
que es la variable a la que se le asignan los valores del from Daira.
Quiero mostrarte algo recargamos aquí si le pones por ejemplo 1 2 y 3 nada más así añadir que hace frontera
y viene vacío y tal vez pienses no se están pasando mis variables tengo un error en mi código.
Bueno eso más que nada es porque Founder no puedes acceder a los valores de esta forma y siempre es
buena idea antes de comenzar a escribir más código al menos verificar que todo esté funcionando correctamente.
Para saber si hay un error al menos en parte fue hasta donde funcionaba bien el proyecto puedes revisarlo
aquí poniéndole el esperado pratos se le conoce son tres puntos y básicamente estos tres puntos lo único
que hacen es crear una copia de este objeto se recargamos 1 2 3 Añadir y vemos que dice aquí con toda
la información el nombre es 1 la empresa.
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
y podemos continuar trabajando sabiendo que los datos del formulario se están leyendo correctamente
y aquí en lugar de tener acción crear +15 creamos un nuevo contacto.
Voy a crear una nueva función que voy a nombrar insertar en la base de datos y esta va a tomar lo que
viene siendo nuestro.
Frontera con toda la información aquí que ya esta parte frontera lo creamos porque ya pasamos la validación
y todo se ejecuta esta nueva función iba a ponerle función función insertar a la base de datos y este
toma como parámetro unos datos este nombre y este nombre podrían ser iguales.
Muchos programadores les gusta hacerlo de esa forma.
Cualquiera de las dos formas está bien que los nombres igual o que dos nombres diferentes no hay problema.
La idea más que nada son parámetros que comunican que pasan de una función a otra.
Entonces siéntete libre de nombrarlos como tú deseis se inserta en la base de datos via Ayax ahora yaks
ya se puede decir que no digo que esté de salida porque obviamente sigue utilizándose mucho tiene muy
buen soporte.
Hay otras tecnologías que han salido últimamente Accio es una muy buena opción Fecha y Piauí es otra
pero créeme vas a trabajar.
Si decides buscar empleo muy probable que muchos de los sistemas que te toque trabajar con ellos o que
el grupo de trabajo decida implementar estarán hechos con Ayax.
Por lo tanto sigue siendo una tecnología que vale la pena aprender.
Aquí vamos a revisar nuestro llamado Ayax si recuerdas son varios pasos crear el objeto primero abrir
la conexión pasar los datos y enviar los datos entonces son varios son cuatro pasos los que se mandan.
Y quinto vendría siendo uno opcional que es leer los errores entonces va a ser esta parte lo que estaremos
trabajando es el llamado acceso así como se conoce esta parte vamos a comenzar aquí a poner cons X H.R
Gualán New XML HTTP Henriquez siempre se utiliza éste para crear llamados Ayax y recuerda enviar los
datos siempre es con X H.R unidocente y le pasamos los datos que queremos enviar.
Aquí en esta parte debido a que es una petición POST post es decir agregar nuevos datos a lo que ya
existe vamos a pasar aquí y quizá Cherres es como una convención que existe de nombrarlo de esta forma
puedes nombrarlo como tu dices y después abrir la conexión que vamos a colocar y quizá repuntó Open
tanto Open como CENS son funciones son métodos que existen en x h XML HTTP recuesto que existen dentro
por lo tanto vamos a abrir una conexión toma tres parámetros primero es que tipo de peticiones en este
caso es post post normalmente se utiliza cuando insertas algo en la base de datos o en un formulario
Goeth es cuando quieres obtener algo que está en el servidor.
Básicamente esa es la diferencia que voy a abrir este y que tenemos y en ese voy a crear un nuevo archivo
que voy a nombrar modelos me gusta nombrar los modelos que contienen las diferentes peticiones y los
datos pero puedes nombrarlo como tu dices y quieres decimos a donde quieres diagonal modelos de Donal
modelo y contactos punto PHP y el último es para hacer el llamado asíncrono.
Entonces nos falta crear este archivo y a qué modelos les voy a crear modelos contacto y poner aquí
PHP.
Muy sencillo va a ponerle un eco ya hizo una cosa y ponemos post ahorita los tenemos viendo falta la
última parte que es pasar los datos se hacen X HR holdouts más que nada es como leer la respuesta igual
la función se recomienda no utilizar Fontseré no tanto Naharro funciona aquí porque pierdes la referencia
y después revisamos hay varios estátus dice estátus es igual a 200 si quiere decir que la conexión fue
exitosa y aquí le puedo poner el punto log x H.B Response texto si guardamos cambios recargamos aquí
me poner uno uno dos y tres.
Bueno aquí dice uno dos y tres añadir y vemos que tenemos la respuesta de esta forma.
Esto X es línea 53 viene siendo este que está aquí es una string tiene forma de Jayson un Jayson básicamente
es una llave y un valor es como un objeto de JavaScript.
Y puedes copiar por ejemplo esto de aquí copiarlo utilizar un servicio como ya hizo un editor online
y pegarlo aquí y darle acá y puede ser que se que es un objeto y tiene nombre empresa teléfono y una
acción.
Entonces Jayson es un formato de transporte debido a que estamos pasando datos del HTML y los leemos
con JavaScript los enviamos vía Ayax a PHP.
Necesitamos un formato que sea de transporte que se pueda comunicar entre los distintos lenguajes y
Jayson es una opción muy rápida muy fácil de utilizar y muy sencilla de implementar nada más con esta
función que son Incopesca y estamos retornando todo lo que esté en post y de esta forma lo tenemos ahora
en esta parte.
Esto es un Jayson pero sigue siendo un stream porque no podemos hacer nada en esta parte.
Al ser un Jayson y al ser un estreno utilizamos una función se llama Jayson en mayúsculas debe de ser
punto Pars y abrimos paréntesis y rodeamos todo eso y eso va a encargarse de convertir ese string a
un Jayson en el que podamos acceder a sus valores individualmente similar a esto que tenemos aquí donde
podemos acceder a nombre empresa teléfono y acción.
Lo mismo puedes hacerlo en JavaScript utilizando Jayson parts recargamos 1 2 y 3 Añadir y puedes ser
X el nombre empresa teléfono y acción.
Si quieres acceder a cada uno de estos valores bueno esto es un objeto y recuerda a los objetos siempre
siempre accedes a sus valores con un punto voy a leer aquí todo esto como respuesta a ser que abajo
voy a colocar una variable leemos la respuesta de HP y ponemos Conce respuesta igual a Yeison iba a
ser este mismo código no tiene sentido volverlo a escribir todo pero aquí punto y coma y digamos darle
consolados.
Digamos que quiero acceder a la empresa.
Respuesta punto empresa porque ese lo que viene siendo Yeison pars lo convierte en objeto de JavaScript
en PHP.
No existen los objetos de la misma forma que existen en JavaScript.
Allá son arreglos asociativos en JavaScript no existen los arreglos asociativos son objetos.
Por lo tanto necesitamos ese formato de transporte y eso es la mejor opción.
Respuesta punto empresa que va a poner una vacuna en nombre de Demy y añadir marca un error de repuesta
si es que quiere ser repuesta y ser respuesta nueva cuenta recargamos
que.
Entonces puedes acceder a los valores pero primero tienes que convertir ese string que es un Jayson
sí pero ya hizo un punto par lo convierte a un objeto y JavaScript ya puede acceder a sus valores en
lo que viene siendo PHP se conocen como arreglos asociativos en JavaScript son objetos y Jayson es lo
que permite esa comunicación entre los dos.
NUEVA CUENTA Jayson es un lenguaje de transporte mucho más rápido que XML menos complicado y más fácil
de implementar así que ya tenemos esta parte en el siguiente video vamos a crear la base de datos y
los archivos de conexión.