Montañas con niebla

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
layout_frontend

Backend
layout_backend

A continuación vamos a ir comentando las partes que componen la aplicación:

  1. Modelo de datos
  2. Backend
  3. Front-end
  4. Ajax
  5. Validación de datos
  6. Crear registro en la base de datos
  7. 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.

Información detallada aquí

Los 3 pasos básicos para crear una tabla en la base de datos son:

  1. Escribir la función que crea la tabla.
  2. Llamar a esta función cuando se activa el plugin.
  3. 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.

estructura_tabla

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:
registros_list_table

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:
envio_datos_formulario_ajax

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

encuesta_resultados

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 🙂

3 respuestas a «Tutorial aplicación web usando WordPress»

  1. Avatar de algoeraello
    algoeraello

    Hola, gracias por el tutorial, podrías hacer un post de como hacer un formulario de registro para que los visitantes de una pagina WordPress se registren, y validarlo con Ajax?

    Mil gracias

    1. Avatar de Antonio Villegas

      Lo apuntamos para una próxima entrada. Gracias por la sugerencia.

  2. Avatar de Luis Castro

    Oye excelente, te felicito esta todo muy bien explicado.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.