RSS

Mini ejemplo HTML-CSS-PHP-MySQL-JQuery (1/4)

09 Mar

Este ejemplo que presento surge de la búsqueda en google de las siguientes palabras clave: cómo actualizar un div sin recargar la página, cómo usar json con php, obtener varias respuestas ajax, usar dos respuestas en done de ajax, crear una tabla dinámica con jquery, poner una imagen de carga con jquery. actualizar dos div con jquery. Si alguna vez has buscado alguna de estas oraciones en el buscador, espero que este ejemplo te sea de ayuda 😉

En este primer post explico en concreto lo que haremos y los pasos que seguiremos hasta obtener el ejemplo final.

technologies

 

Cabe aclarar que se puede mejorar el código haciendo ciertas verificaciones y validaciones, que por el momento, dejé de lado para plasmar la idea concreta del uso de ajax y Jquery (en los comentarios del código hago referencia a lo que se puede mejorar y/o agregar). Además de div, también uso los tags article, section y header de HTML5.

El mini ejemplo consta de hacer lo siguiente:

Serán 3 articles; en el primer article habrá un formulario (nombre, usuario, mail). Cada que el usuario haga submit en el formulario, en el segundo article se mostrará una imagen de carga y cuando se haya subido, un mensaje de “subido correctamente”, finalmente en el tercer article se desplegará una tabla actualizada con la información ingresada.

ExplicacionAjaxBlog

Bien, se trabajará este ejemplo de la siguiente forma

  1. Maquetar el index.php (la imagen arriba) con diseño web responsive básico.
  2. Subir la información del formulario a la BD con confirmación en el article correspondiente
  3. Subir la información a la BD con confirmación y la taba actualizada en el div correspondiente

El árbol de directorios que usé fue el siguiente (puedes descargar el ejemplo completo en zip desde mi googleDrive) o puedes ver en funcionamiento el ejemplo desde aquí

arbolCompleto

Los archivos destacados son:

  • myDBC.php: Es una clase donde está la conexión a la base de datos mediante MySQLi, se inserta a la BD y se regresará un JSON combinado (en su momento se explicará mejor)
  • ajax_funciones.php: Este es el archivo de referencia que tendrá la llamada de ajax y el encargado de ejecutar la función correspondiente
  • ajax.js: Son las acciones que se tomarán de acuerdo al evento que el usuario realice. En este caso, el ajax se ejecutará cuando se haga un submit de un formulario.
  1. El ajax.js estará a la espera de un evento por el usuario, en este caso, el evento submit.
  2. Una vez obtenido dicho evento, la función ajax pide a ajax_funciones.php que se encargue de la petición, éste se encarga de verificar que se hizo un petición ajax y usa el método correspondiente de la tarea requerida.
  3. Ejecuta la tarea requerida, haciendo uso de los métodos necesarios en myDBC.php, el cual le deja como resultado un json.
  4. Finalmente ajax_funciones.php le deja el json a ajax.js y éste se encarga del HTML necesario para colocar la información del json en donde se requiera, a través del .done.

ajax

 
Deja un comentario

Publicado por en 9 marzo, 2015 en HTML, CSS, JQUERY, PHP

 

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: