Para terminar con el mini-ejemplo, se le agregarán algunas instrucciones al archivo ajax.js para generar una tabla con los datos recibidos en el json. En dicho json vienen dos arreglos: el que lleva el mensaje de «subido correctamente» (que se llama subido) y otro arreglo con todos los datos de la tabla (que se llama info), Aquí veremos cómo usar dos json en el ‘done’ de ajax Aquí puedes ver el ejemplo funcionamiento
El código agregado es el siguiente:
La base de datos se llamará formulario y la tabla dentro de ella usuarios . La base de datos y todos los archivos están en el zip con el ejemplo completo. O puedes ver en funcionamiento el ejemplos desde aquí
Lo primero que se hará es escribir código en el ajax.js que estará a la espera de del evento submit y hará la petición de ajax, espero que los comentarios que dejo en el código sean de ayuda para entender el funcionamiento. (Si es el caso y quieres aportar, ya sea código o mejorar la explicación, por favor contáctame a ringhugos@gmail.com)
En el archivo js/ajax.js contendrá lo siguiente:
Primero se hará una maqueta en la que pondremos un header, dos sections y dentro de ellos los articles correspondientes, como se ve en el código. En el section izquierda comenzamos con el formulario que tendrá 3 campos y un botón de submit en el archivo index.php. Los 3 campos serán nombre, usuario y mail, validando éste último campo con la propiedad de HTML5. Puedes ver en funcionamiento el ejemplo desde aquí.
Vamos al código HTML5:
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.
Como resultado de investigar, me di cuenta que existen dos formas de guardar imágenes en la base de datos. La primera, y al parecer la más complicada, es creando un campo de tipo blob para la imagen. La otra, más sencilla, es subir la imagen a una carpeta en el servidor con la función php llamada move_uploaded_file() y posteriormente guardar la ruta de la imagen en la base de datos. Cabe mencionar que la ruta es una cadena de texto, sin mayor complicación. 😀
Para obtener el directorio de trabajo completo de este ejemplo incluyendo el bootstrap.css, la librería fpdf y el jquery en sus carpetas correspondientes, puedes descargar de este enlace directo de dropbox (click en saltar publicidad y te lleva directo a la descarga)
Lo primero que se ha de hacer es crear un árbol de directorios como el que se muestra continuación y colocar los archivos en el lugar correspondiente.
Sin más, empecemos haciendo el HTML5 y el CSS para ver cómo quedará nuestro formulario para pedir un nick, mail y elegir una imagen. Acá el formulario:
Les muestro los archivos necesarios para que el proceso de logueo sea verificado y si es el caso, mostrar la(s) página(s) a las que puede acceder el usuario, sino, regresar a la página de login.
Otra parte importante es que si el usuario quiere acceder directamente a la url de la página a la que se debe estar logueado, el sistema se encargará de verificar si existe una sesión iniciada, sino es el caso, le dirá que no puede ver esa página y lo dirige de nuevo al index.php.
De acuerdo con el diagrama de flujo que se presentó en la explicación de este sistema, ahora veamos el código de estos 3 archivos:
La validación en el cliente es necesaria, pero… a final de cuentas, ¿Quién procesa los datos que envía el usuario?: el servidor.
Por tal motivo se deben volver a validar los datos enviados pero ahora con PHP. La razón por la que se han de validar de nuevo es por si el usuario tiene desactivado el javascript en su navegador, si es así, los datos no se validan y se envían al oprimir el botón de registrar.
También por motivos de seguridad informática, tema que supera este ejemplo, es otra razón importante por la cual se han de validar los datos en el servidor. Así que, veamos como validarlos y a su vez, si está todo en orden, ingresar a la base de datos.
Sigamos adelante 😀
El siguiente paso en el desarrollo del sistema de login y registro es la VALIDACIÓN. Para esta parte se usará JQUERY.
La validación es muy importante ya que nos aseguramos de que no se está introduciendo información «sin sentido» en la Base de Datos, por ejemplo en un campo de texto que pida el nombre y éste sea Arturo3 o quizá el usuario ponga incorrectamente una dirección de correo electrónico, tenemos que evitarlo siempre; para esto se usará una expresión regular en cada campo.
Otra ventaja es que le ahorra carga de peticiones al servidor, por tal motivo, el servidor «descansa» y está más disponible, en el dado caso que su sistema o sitio web tenga muchas visitas.
Empecemos 😀
Esta entrada se la dedicamos al HTML-CSS del index.php (raíz de nuestro directorio de trabajo) donde estará el formulario del login y al formulario de registro (registro.php en la carpeta PHP).
Las etiquetas <div> es la forma ideal de maquetar el diseño en el navegador, en lo personal el maquetado se me dificulta un poco entenderlo pero en base a este ejemplo que fui recopilando, me bastó practicarlo y verlo funcionar paso a paso para entender cómo trabajar con esta etiqueta, que por cierto, es bastante versátil.
Este ejemplo de HTML-CSS que presento, para mí, creo que ha sido definitivo para entender mucho mejor cómo diseñar formularios, ya que con algunas modificaciones (básicamente cambiando la combinación de colores y el logo) puedes diseñar totalmente ‘otro’ formulario. Este ejemplo es bastante dinámico y «metiéndole» mano, verás que es sencillo de asimilar. Cabe mencionar que usé colores muy contrastantes para ver mejor el comportamiento. Baja este ejemplo desde aquí o todos los ejemplos del blog acá.
Sin duda, uno de los módulos más comunes para cualquier sistema, es el del login y registro de usuarios. Durante algún tiempo he investigado sobre cómo hacerlo y como en todo proceso de aprendizaje he pasado por todas esas etapas en la que te vas dando cuenta de ciertos códigos que funcionan y de los que no (con «funcionan» refiriéndome a que el código es comprensible y eficiente) y las distintas maneras de diseñarlo.
Cabe mencionar que todo lo que comparto es una recopilación de todo lo que he investigado, y a su vez, le agrego cierta información que lo original no tenía para que sea más comprensible (así es como yo he aprendido :)), también como es mi costumbre, iré agregando «complejidad» gradualmente para no poner todo el código a la primera.
Retomando lo que mencioné de ‘código que funciona’, siempre he tratado de minimizar el código pero sin que éste pierda estilo a la hora de su ejecución. Con esto me refiero a que he visto hojas de css bien complicadas y super enredadas que al final de cuentas, sino eres experto, no sabes qué hace qué; con esto no digo que sea fácil lo que mostraré (o quizá sí :P). Todo esto antes mencionado es con respecto a lo visual, HTML-CSS. Lo siguiente será usar PHP y Jquery…
Así lo hice... 