Creación de aplicaciones web usando WordPress | WordCamp Cantabria 2015

Demo: http://wp.dinamiko.com/demos/encuesta
Archivos: https://github.com/Dinamiko/encuesta

Índice
0. Planificación
1. Modelo de datos
2. Backend
3. Frontend
4. Ajax
5. Validación de datos
6. Crear registro en la base de datos 7. Mostrar los datos en el front-end

Transcript

1.  EmiliCastells  www.dinamiko.com Creación de aplicaciones web usando WordPress 
2. Demo: http://wp.dinamiko.com/demos/encuesta Archivos: https://github.com/Dinamiko/encuesta Índice 0. Planificación 1. Modelo de datos 2. Backend 3. Frontend 4. Ajax 5. Validación de datos 6. Crear registro en la base de datos 7. Mostrar los datos en el front-end  Creación de aplicaciones web usando WordPress
3.  0. Planificación 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.
4.  1. Modelo de datos Datos de la aplicación: • id mediumint(9) • time datetime • respuesta VARCHAR(30) • email VARCHAR(100) 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 en el admin. 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…
5.  1. Modelo de datos 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. Ver código • Llamar a esta función cuando se activa el plugin. Ver código • Crear un función de actualización para poder modificar la tabla en futuras versiones del plugin. Ver código Al activar el plugin se crea la tabla en la base de de datos.
6.  2. Backend encuesta-table.php ver código Crea el menu en el adminstrador y carga la clase Encuesta_List_Table class-encuesta-list-table.php ver código Las dos funciones importantes son get_columns() donde definimos qué columnas mostrar y display_rows() que imprime las columnas.
7.  3. Frontend Para imprimir la aplicación en el theme usamos el shortcode [encuesta]. Ver código que crea el shortcode Dentro de este shortcode usamos la clase Encuesta_Template_Loader que es la responsable de gestionar dónde ir a buscar la plantilla, si existe en el Theme va a usar esa en lugar de la que hay en el plugin. Validación frontend ver código Para la validación front-end usamos la librería jqueryvalidation, en nuestro caso necesitamos validar que tanto la respuesta como el email no estén vacios y que el email sea válido. Template con la aplicación (templates/encuesta.php) ver código
8.  4. Ajax Usamos Ajax para comunicar el formulario con el servidor, enviándole datos y recibiendo la respuesta del servidor. Variable ajaxurl que se va a imprimir en el header. Ver código Función que va a recibir los datos del formulario con wp_ajax_ Ver código Función jQuery.ajax que envía los datos y recibe la respuesta del servidor. Ver código
9.  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. Ver código Este nonce lo usamos para validar que los datos del formulario vienen de nuesto sitio web y no de cualquier otro lugar. Añadimos la lógica para verificar el nonce. Ver Código Añadimos lógica validación longitud strings y si email es válido: Ver Código
10.  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. Sanear los datos significa eliminar todos los elementos prejudiciales que puede contener el valor del campo que estamos recibiendo. Para ello usamos 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. Ver código.
11.  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: encuesta_get_registros() devuelve el total de registros de la tabla. Ver código. encuesta_get_registros_respuesta( $respuesta ) que devuelve el total de registros del valor que le pasamos al parámetro $respuesta. Ver código. Template que imprime los resultados. Ver código.
12.  EmiliCastells  www.dinamiko.com Gracias :) 