Tutorial aplicación web utilizando WordPress

Tutorial aplicación web utilizando WordPress

0 424

En este artículo veremos de qué manera podemos usar WordPress para crear aplicaciones web. Crearemos una aplicación que consiste en una encuesta con una pregunta y 2 respuestas para escoger.

Aquí podeis ver la aplicación:
http://wp.dinamiko.com/demos/encuesta

La aplicación la encapsulamos en un complemento, así la vamos a poder volver a usar en otros proyectos. Si os interesa descargaros el código, he preparado un proyecto en Github.

Es aconsejable planear la aplicación ya antes de iniciar a picar código, acá 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 esencial examinar 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 veremos si podemos emplear funcionalidad nativa de WordPress, por ejemplo: custom artículo types, users…

En nuestro caso vamos a usar la próxima funcionalidad de WordPress:

El modelo de datos de nuestra aplicación:

  • id mediumint(9)
  • time datetime
  • respuesta VARCHAR(treinta)
  • email VARCHAR(cien)

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 alterar la tabla en futuras versiones del plugin.

La función que crea la tabla en la base de datos:

Al activarse el complemento llamamos a la función que crea la tabla utilizando register_activation_hook:

La función que verifica si ha cambiado la base de datos:

Todas las incesantes (ENCUESTA_VERSION, ENCUESTA_BBDD_VERSION, …) las definimos en el fichero encuesta/encuesta.php.

Con esto ya tenemos incorporado que cuando se active el complemento nos cree la tabla en la de datos.

estructura_tabla

2. Backend

Vamos a crear la interfaz del administrador de la aplicación, para ello haremos empleo 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 2 funciones esenciales 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 ciertos registros manualmente en la base de datos:
registros_list_table

3. Frontend

Para imprimir la aplicación en el tema vamos a emplear el shortcode [encuesta].

Este shortcode se imprime utilizando la clase Encuesta_Template_Loader, de esta manera es posible modificar la plantilla copiándola en la raíz en el tema en un directorio llamado encuesta por si queremos alterarla 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 empleamos la librería jqueryvalidation.org, en nuestro caso necesitamos validar que tanto la respuesta como el correo electrónico 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 próximo 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 correo electrónico.

Para hacer toda la comunicación vamos a utilizar Ajax, lo primero que haremos es crear la variable ajaxurl (includes/encuesta-functions.php) que se marcha a imprimir en la cabecera:

Creamos la función que va a recibir los datos del formulario utilizando 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 agregar un wp_nonce_field al final del formulario.

Este nonce lo empleamos para validar que ciertamente los datos del formulario vienen de nuesto sitios 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 contrastar el nonce:

Añadimos validación longitud strings y si correo electrónico 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 utilizando las funciones sanitize_text_field y sanitize_email.

Una vez saneados los datos ya podemos crear el registro utilizando $ wpdb->insert.

Aquí vemos la función completa:

7. Enseñar los datos en el front-end

encuesta_resultados

Creamos el shortcode [encuesta-resultados] para enseñar el total de registros y el total de cada una de las respuestas.

Para obtener los datos vamos a crear dos funciones (includes/encuesta-functions.php):

encuesta_get_registros() que devuelve el total de registros de la tabla:

encuesta_get_registros_respuesta( dólares americanos respuesta ) que devuelve el total de registros del valor que le pasamos al factor dólares americanos respuesta:

Aquí vemos la plantilla que imprime los desenlaces (templates/encuesta-resultados.php):

Bien amigos, con esto concluimos el tutorial, espero que os haya gustado :)

SIMILAR ARTICLES

NO COMMENTS

Leave a Reply