Scribd
Cargar
331 vistas25 páginas

Ajax, PHP y Mysql

Este documento describe el desarrollo de una aplicación web simple para administrar tareas usando AJAX, PHP y MySQL. Explica cómo crear archivos, conectar la base de datos, desarrollar la interfaz con Bootstrap y agregar funcionalidades como buscar, agregar, editar y eliminar tareas mediante peticiones asíncronas al servidor usando jQuery y AJAX.

Cargado por

Carlos Mendoza Ayala
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
331 vistas25 páginas

Ajax, PHP y Mysql

Este documento describe el desarrollo de una aplicación web simple para administrar tareas usando AJAX, PHP y MySQL. Explica cómo crear archivos, conectar la base de datos, desarrollar la interfaz con Bootstrap y agregar funcionalidades como buscar, agregar, editar y eliminar tareas mediante peticiones asíncronas al servidor usando jQuery y AJAX.

Cargado por

Carlos Mendoza Ayala
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 25

AJAX, PHP Y MySQL

Primero creamos un index.html y un archivo de conexión.php, y la base de dato adb_app con la tabla tarea

Adicionamos dos datos:


Ahora en el index, ejecutaremos un archivo js, ya que js es el que ejecuta la lógica de la interfaz, para
ello se creara el archivo ajax.js:

En el index

Para probar y en el navegador

ya que probamos ahora ejecutaremos una función


de jquery al iniciar nuestra página:

Ahora desarrollaremos la interfaz con bootstrap, y agregaremos una navegación


También definiremos un formulario a la derecha que permita buscar tareas

Podemos ver algunos temas de variación de bootstrap en https://bootswatch.com/


Veremos la tabla
Ahora haremos la búsqueda de tareas
Haremos la consulta a la bd
Esto nos devuelve un string, una cadena que así se lo especifico en el servidor, este es un json es un
objeto de js convertido en un string, y en el frontend se puede volver a convertir esta cadena a json, y en
lugar de mostrarlo por consola se lo muestra en un lugar de la aplicación, entonces…
Definiremos donde se mostrara el resultado:

Y para mostrar

Si digitamos muestra el resultado, pero si esta vacío muestra un error y esto es porque espera un dato,
para validar se hará una comparación, si el input esta vacío que no envié nada al servidor
Ahora se quiere ocultar el elemento

Finalmente quedara asi:


AGREGAR DATOS

Capturamos el evento del submit primero lo seleccionamos, debajo de buscar, se debe tener en cuenta
también que un formulario por defecto hace que la página se refresque, para evitar esto hacemos lo
siguiente:
Creamos adicionaTarea.php

Y en ajax.js
Ahora mostraremos ls datos en la tabla para ello creamos lista-tarea.php

Y en ajax.js adicionamos listar tarea


Para mostrar la una nueva adición metemos todo este código en
Y llamamos a la función al comenzar y después donde obtenemos la respuesta después de la adición

Eliminar
En la función mostrarTarea(), después de mostrar los registros de de la bd… agregamos una columna con
un botón para eliminar registro…
Ahora enviamos el id del registro, para ellos crearemos la clase: eliminar-tarea

Ahora creamos la clase, en el documento escucharemos el evento click, pero solo de los elementos que
tengan la clase eliminar-tarea, y escucharan una phpfunción que una vez clickeado envie al servidor la
solicitud de eliminar registro, enviando el id y el botón lo enviara.

A través de jquery selecciono el elemento clickeado con $this, primeo lo veremos por la consola

Ahora seleccionamos el elemento cero y lo guardamos en un arreglo y lo veremos por consola

Ahora obtendremos el id, debemos tener en cuenta que el botón tiene un padre que sería la columna
(td) y a su vez el td tiene un padre que es una fila (tr) y el tr es el que contiene el id, por lo que debemos
acceder al elemento padre con el elemento de js parentElement:

Ahora accedemos a tr
Ahora desde este elemento seleccionamos el id a través de un atributo que lo llamaremos idTarea,
entonces añadiremos esa atributo en la función obtenerTareas() en el elemento o celda que contiene el
id

Este atributo será buscado cuando demos un click en el botón, asi seleccionaremos el atributo que tenga
este elemento

Ahora como tengo el id lo enviamos al backend para que lo elimine y recibiremos una respuesta que se
mostrara por consola

Ahora en eliminar-tarea.php:
Probamos pero no se actualiza la lista de forma asíncrona

Agregamos código, entonces en vez de mostrar la respuesta por consola, ejecutare nuevamente
obtenerTareas() y también mostraremos un mensaje de confirmación con js
Editar
Hay dos formas una es haciendo uso de un botón, y la otra es habilitando la misma celda,

Entonces el ${tarea.nombre} lo pondremos dentro de un enlace para que el usuario sepa que puede
hacerle click, pero el href no enviara a ninguna pagina pero crearemos una clase ítem-tarea, para
hacerle clic, y después creamos la clase, como lo hicimos para eliminar tareas:

Agregamos el código después de


Entonces de la misma forma que para eliminar obtendremos el id y lo enviaremos a backend y
cargaremos los registros en el formulario

Similar a eliminar para obtener al id


Ahora lo convertiremos en un json y que el elemento del formulario reciba lo que esta enviado el
backend
Pero si doy guardar agregara un registro y no actualizara el registro actual, entonces crearemos una
variable editar esta variable cuando nuestra aplicación inicia por defecto estará en falso (false), pero
cuando el usuario haga click en el enlace la variable cambiara a verdadero (true)
Ahora en el formulario validamos, si editar es falso que envié todos los datos, si es verdadero que nos
envié a otra url para realizar la actualización…

Para esto crearemos una variable que tendrá el valor del resultado de la validación

Será asi:

Comprobamos agregando una nueva tarea, esta debería ser adicionada sin problema, si trato de editar
no hace…
Verificamos el envio de datos

En el formulario enviaremos un id como variable esto no cambia en nada las tareas anteriores

Entonces cuando esté recibiendo el valor a editar, también recibiré el id, de esta forma el id está dentro
del formulario
Recibo el id

En editar-tarea.php

También podría gustarte