En este artículo vamos a ver cómo podemos usar WordPress para crear aplicaciones web. Crearemos una aplicación que consiste en una encuesta con una pregunta y dos respuestas para elegir.
Aquí podeis ver la aplicación:
http://wp.dinamiko.com/demos/encuesta
La aplicación la encapsulamos en un plugin, de esta manera la podremos reutilizar en otros proyectos. Si os interesa descargaros el código, he preparado un proyecto en Github.
Es recomendable planificar la aplicación antes de empezar a picar código, aquí teneis los layouts front-end y backend de la aplicación.
Front-end
Backend
A continuación vamos a ir comentando las partes que componen la aplicación:
- Modelo de datos
- Backend
- Front-end
- Ajax
- Validación de datos
- Crear registro en la base de datos
- Mostrar los datos en el front-end
1. Modelo de datos
Antes que nada es importante analizar los datos de la aplicación, qué se va a guardar en la base de datos y cómo vamos a usar esos datos.
Dependiendo de los datos y funcionalidad de la aplicación vamos a ver si podemos usar funcionalidad nativa de WordPress, por ejemplo: custom post types, users…
En nuestro caso vamos a usar la siguiente funcionalidad de WordPress:
- dbDelta para crear la tabla en la base de datos
- wpdb para hacer las operaciones en la base de datos.
- WP_List_Table para mostrar la información de la base de datos.
El modelo de datos de nuestra aplicación:
- id mediumint(9)
- time datetime
- respuesta VARCHAR(30)
- email VARCHAR(100)
Una vez tenemos definido el modelo de datos de la aplicación, vamos a crear una tabla en la base de datos de WordPress.
Los 3 pasos básicos para crear una tabla en la base de datos son:
- Escribir la función que crea la tabla.
- Llamar a esta función cuando se activa el plugin.
- Crear una función de actualización para poder modificar la tabla en futuras versiones del plugin.
La función que crea la tabla en la base de datos:
Al activarse el plugin llamamos a la función que crea la tabla usando register_activation_hook:
La función que comprueba si ha cambiado la base de datos:
Todas las constantes (ENCUESTA_VERSION, ENCUESTA_BBDD_VERSION, …) las definimos en el archivo encuesta/encuesta.php.
Con esto ya tenemos implementado que cuando se active el plugin nos cree la tabla en la de datos.
2. Backend
Vamos a crear la interface del administrador de la aplicación, para ello vamos a hacer uso de 2 archivos: encuesta-table.php y class-encuesta-list-table.php
encuesta-table.php crea el menu en el adminstrador y carga la clase Encuesta_List_Table que crea la interface extendiendo la clase WP_List_Table.
Las dos funciones importantes en la clase Encuesta_List_Table son get_columns() donde definimos qué columnas mostrar y display_rows() que imprime las columnas.
Para verlo en funcionamiento podemos crear algunos registros manualmente en la base de datos:
3. Frontend
Para imprimir la aplicación en el tema vamos a usar el shortcode [encuesta].
Este shortcode se imprime usando la clase Encuesta_Template_Loader, de esta manera es posible modificar la plantilla copiándola en la raíz en el theme dentro de un directorio llamado encuesta por si queremos modificarla y que no afecte a futuras actualizaciones del plugin.
Aquí vemos la función que crea el shortocode [encuesta]
La plantilla con el formulario (templates/encuesta.php)
Para la validación front-end usamos la librería jqueryvalidation.org, en nuestro caso necesitamos validar que tanto la respuesta como el email no estén vacios y que el email sea válido.
Código validación frontend:
4. Ajax
Ya tenemos hecha la validación frontend, lo siguiente que vamos a hacer es comunicar el formulario con el servidor, enviándole los valores de los campos del formulario, en este caso, los valores de la respuesta y el email.
Para hacer toda la comunicación vamos a usar Ajax, lo primero que vamos a hacer es crear la variable ajaxurl (includes/encuesta-functions.php) que se va a imprimir en la cabecera:
Creamos la función que va a recibir los datos del formulario usando wp_ajax_(action):
Aquí la función que envía los datos y recibe la respuesta del servidor:
Si ahora enviamos el formulario, recibimos la respuesta del servidor:
Nelio Content
Estoy tan contento con Nelio Content que parece que me hayan pagado para hablar bién de él… pero es que también a ti te encantará: funciona como prometen, la programación automática de mensajes es increíble, la calidad/precio no tiene parangón y su equipo de soporte se siente como si fueran parte del tuyo.
Panozk
5. Validación de datos
Para validar los datos de la aplicación, lo primero que vamos a hacer es añadir un wp_nonce_field al final del formulario.
Este nonce lo usamos para validar que efectivamente los datos del formulario vienen de nuesto sitio web y no de cualquier otro lugar.
Aquí vemos añadido el campo wp_nonce_field:
Añadimos la lógica en la función encuesta_ajax() para verificar el nonce:
Añadimos validación longitud strings y si email es válido:
6. Registro en la base de datos
Antes de crear el registro en la base de datos vamos a sanear los datos que recibimos del formulario usando las funciones sanitize_text_field y sanitize_email.
Una vez saneados los datos ya podemos crear el registro usando $wpdb->insert.
Aquí vemos la función completa:
7. Mostrar los datos en el front-end
Creamos el shortcode [encuesta-resultados] para mostrar el total de registros y el total de cada una de las respuestas.
Para obtener los datos vamos a crear 2 funciones (includes/encuesta-functions.php):
encuesta_get_registros() que devuelve el total de registros de la tabla:
encuesta_get_registros_respuesta( $respuesta ) que devuelve el total de registros del valor que le pasamos al parámetro $respuesta:
Aquí vemos la plantilla que imprime los resultados (templates/encuesta-resultados.php):
Bien amigos, con esto finalizamos el tutorial, espero que os haya gustado 🙂
Deja una respuesta