¡Hola de nuevo!, lo prometido es deuda, aquí estoy con una nueva entrega acerca de formularios y el uso de AJAX para mejorar la experiencia del usuario.
No se si alguna vez han visto que en algunos canales de televisión aparece en la parte de abajo una franja con mensajes que la gente envía desde su celular, pues bien hoy haremos algo parecido, sólo que algo más taringuero :v.
Nota: La idea me la dío en uno de los comentarios de mi anterior post , gracias lince.
Este proyecto está organizado de la siguiente forma:
- controladores: Contiene los archivos .PHP que van a dar respuesta a las peticiones que hace el cliente.
- css: Contiene los estilos CSS de nuestra aplicación.
- js: Contiene nuestros códigos en JavaScript, incluyendo librerías de terceros.
- modelos: Contiene las clases que hacen parte de nuestra lógica de negocio.
- sql: Contiene nuestros scripts de SQL que queramos ejecutar, ahí está el código para nuestra base de datos.
- Raiz del proyecto: Contiene las diferentes vistas (páginas) de nuestra aplicación. Importantísimo el archivo config.php, pues este define algunos parámetros que nos serán útiles.
Gráficamente es así:
Te pido que por favor ejecutes primero el script de la base de datos, para crear la base de datos y tener unos datos iniciales.
Exploremos los archivos
modelos/Class.Conexion.php: Contiene una clase que permite que hagamos uso de la conexión a la base de datos, ejecutar sentencias y demás. Está muy bien documentada por si quieres analizar o ampliar su funcionamiento.
Nota: Debes cambiar el valor de la variable SERVIDOR si no estás trabajando en un servidor local, también puedes usar el valor de localhost
config.php: Contiene algunas variables que nos permiten acceder a ciertas ubicaciones, urls importantes que vamos a usar en la aplicación, también hay algunas variables constantes. Este archivo se debe incluir en cualquier otro archivo PHP donde queramos hacer uso de estas variables (que nos ahorran trabajo, por supuesto).
Nota: Debes cambiar el valor de la variable $path al nombre del directorio raíz en medio de los slash, en mi caso es ejemplo_2
index.php: Básicamente es la página principal donde se muestran los mensajes de texto enviados por la gente y podemos ver un video mientras tanto (simulando el TV XD). Al comienzo del archivo se encuentra la lógica para obtener los mensajes de texto y ya en la parte inferior la lógica para mostrarlos, veremos como se ve visualmente más adelante en la ejecuciòn de la aplicaciòn.
Cabe destacar que estamos usando una librería en JavaScript para simular la etiqueta <marquee>, puesto que esta ya no será soportada en el futuro, dejo un link para más info acerca de la librería . Ah y tambièn usamos jquery
formulario_mensaje.php: Contiene el formulario que usaremos para enviar nuestros mensajes de texto, veremos como se ve visualmente más adelante en la ejecuciòn de la aplicaciòn.
controladores/enviar_mensaje.php: Contiene la lógica necesaria para controlar la peticiòn POST, validar el contenido del mensaje, intentar insertar el mensaje en la base de datos y devolver un objeto JSON con la información de la operación.
js/mi_js.js: Contiene nuestra lógica para controlar el evento submit del formulario para enviar los mensajes, ademas tiene también la ejecución de la libreria marquee, para que los mensajes se vean con este efecto en el index.php
Ejecución de la aplicación
Bueno chicos, eso fué todo, espero que les haya gustado y Si quieres el link de este proyecto, por favor pìdemelo en un MP especificando el nombre de este post. Espero que comprendas, los espero en el próximo capítulo.
Y también quiero arrancar con una gama de ejercicios que se hacen cuando inicias en la programación, llamados #MeSalioEnUnQuiz, espero que los sigas, .
