Integrar Google Docs con WordPress y Cforms

Posted: febrero 9th, 2012 | Author: | Filed under: PHP, Wordpress | Tags: , , , , | Comentarios desactivados en Integrar Google Docs con WordPress y Cforms

Muchos webmaster tienen redes de sitios clasificados por tema o rubro, de los cuales obtienen consultas, potenciales clientes, etc. Luego utilizan estos datos para cobrar comisiones, hacer un seguimiento de las ventas y monitorear la actividad. Centralizar estas consultas en un solo correo es una solución que suele ser práctica para casos de poco volumen o bien cuando los sitios los gestionamos solo nosotros.

Para los casos en que tenemos muchos sitios y queremos que terceros puedan ver la información, a modo de control, es necesario contar con una planilla en la cual se carguen los mensajes en forma automatica. Lo ideal es que los campos de información de los formularios completen las columnas del excel online para hacer facil el seguimiento. Eso es lo que vamos a hacer, guardar todos los emails en un Google Doc que podemos compartir y mantener actualizado al momento.

Gracias a rakisuy por este artículo!

Rakisuy:
Lo primero que debemos de hacer es ir a nuestro Google Docs, alli creamos una nueva Hoja del tipo formulario. La podemos editar, creamos los campos que tendrá nuestro formulario de Cforms.

Formulario de WordPress con Google DocsHacemos click arriba a la derecha en More actions y seleccionamos Embed. Esto nos abrira un popup con un codigo HTML, el cual es un iframe, para insertar nuestro formulario en donde deseemos, pero eso no lo haremos!

Tomamos la URL del iframe y la abrimos en el navegador, alli nos abrira nuestro formulario.

Lo importante ahora es que veamos el action en el codigo HTML de nuestro form, el cual es por ej.:

https://docs.google.com/spreadsheet/formResponse?formkey=dddddddddddddddddddddddddd&theme=0AX42CRMsmRFbUy1iOGYwN2U2Mi1hNWU0LTRlNjEtYWMyOC1lZmU4ODg1ODc1ODI&embedded=true&ifq

Aqui lo que nos importa es el formkey, el theme no nos interesa, por lo que lo borramos junto con todo lo demas dejando asi:
https://docs.google.com/spreadsheet/formResponse?formkey=dddddddddddddddddddddddddd

El nombre de nuestros campos es entry.0.single para nuestro primer campo, entry.1.single para el segundo, y asi sucecivamente, vemos que cambia el indice el campo, se le suma uno y comienza en 0

Lo importante es hacer un post a nuestro action, y pasando el valor de nuestros campos, pero tenemos que tener cuidado, ya que Google Docs usa HTTPS, protocolo seguro, por lo que el codigo PHP necesario para hacer un envio POST aqui es:

$Url = ‘https://docs.google.com/spreadsheet/formResponse?formkey=dddddddddddddddddddddddddd’;
$strRequest = «entry.0.single=valor campo uno&entry.1.single=valro del campo 2&entry.2.single=valor del campo 3»;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $Url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1) ;
curl_setopt($ch, CURLOPT_POSTFIELDS, $strRequest);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
$result = curl_exec($ch);
curl_close($ch);

La variable $Url es nuestro action, pero recuerda que sin pasar el theme, ni los otros parametros, solo el action!
Nuestros valores lo pasamos en la variable $strRequest, y lo hacemos como string, poniendo el nombre de nuestro campo = $nuestrovalor y los unimos con «&».

Con este codigo y hasta ahora podemos insertar datos en nuestra planilla de Docs, pero nos falta la integración con nuestro Cforms, para eso utilizaremos el archivo my-functions.php e iremos a la linea 154, la cual es:

function my_cforms_action($cformsdata) {

Notemos que todo el archivo esta comentado, lo que haremos sera descomentar esta funcion para poder utilizarla.

Lo siguiente que haremos sera obtener el valor ingresado en nuestro formulario de Cforms, lo hacemos de la siguiente manera:

$micampo = $form[‘El nombre de mi campo’];

En donde dice ‘El nombre de mi campo’ es el nombre del campo que le dimos en nuestro panel de Administración de WordPress en nuestro Cforms. y asi podemos obtener el valor de todos los campos, por lo que nos quedaria algo asi:

$Nombre = $form[‘Nombre’];
$Email = $form[‘Email’];
$Consulta = $form[‘Consulta’];

Claro que esto lo hacemos luego de que carga el $form, en la linea 160:
$form   = $cformsdata[‘data’];

Ahora pondremos estos valores en nuestro string Request, por lo que sera algo asi:

$strRequest = «entry.0.single=».$Nombre.»&entry.1.single=».$Email.»&entry.2.single=».$Consulta;

Juntando todo nuestro codigo tendremos algo asi:

function my_cforms_action($cformsdata) {

### Extract Data
### Note: $formID = » (empty) for the first form!

$formID = $cformsdata[‘id’];
$form   = $cformsdata[‘data’];

### triggers on your third form
if ( $formID == ‘3’ ) {

### Do something with the data or not, up to you
$form[‘Your Name’] = ‘Mr./Mrs. ‘.$form[‘Your Name’];

}

$Nombre = $form[‘Nombre’];
$Email = $form[‘Email’];
$Telefono = $form[‘Telefono’];
$Pais = $form[‘Pais’];
$Consulta = $form[‘Consulta’];
$sitio = get_bloginfo(‘url’);

$Url = ‘https://docs.google.com/spreadsheet/formResponse?formkey=dHg5em5zLWQyRFdGekdSN1RadjdZR0E6MQ’;
//$strRequest = «entry.0.single=».$Nombre.»&entry.1.single=».$Email.»&entry.2.single=».$Telefono.»&entry.3.single=».$Pais.»&entry.4.single=».$Consulta.»&entry.5.single=».$sitio;
$strRequest = «entry.0.single=».$Nombre.»&entry.1.single=».$Email.»&entry.2.single=».$Telefono;
$ch=curl_init();
curl_setopt($ch, CURLOPT_URL, $Url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1) ;
curl_setopt($ch, CURLOPT_POSTFIELDS, $strRequest);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
$result = curl_exec($ch);
curl_close($ch);

}

De esta manera, las consultas que nos llegan al mail tambien quedaran en una hoja de Google Docs, sumamente util en caso de recibir varias consultas que pueden atender varias personas, permite una importante organización.

Algo bueno de esto tambien es que Google automaticamente nos agrega una columna Timestamp, de cuando se insertaron los datos, sabiendo asi el momento exacto de la consulta.

Una captura de como se ve esto en el Docs:

 


En busca del uploader perfecto (Parte I)

Posted: junio 4th, 2008 | Author: | Filed under: AJAX, PHP | Tags: , , , , | 2 Comments »

Uno de los grandes problemas de usabilidad en Internet es la interacción con el usuario cuando enviamos archivos. Por lo general al hacer descargas tenemos la barra de progreso del navegador que nos indica el estado/velocidad de la transferencia, pero qué sucede cuando enviamos un archivo? Especialmente en el caso de archivos grandes y cuando tenemos conexiones relativamente lentas, tenemos el problema de no saber qué pasa con el envío… Si se detuvo, si sigue funcionando, solo nos queda esperar a ver que pasa.

Aunque hay muchas soluciones parciales a este problema, por ejemplo con animaciones flash o javascript que muestran una barra de progreso simulado, queremos una solución real, que muestre si realmente hay transferencia.

Las soluciones más básicas de envío de archivo suelen funcionar con un formulario html que envía el o los archivos a un script para procesar, un código como este es algo típico:

<form action=»» method=»post» name=»form1″ enctype=»multipart/form-data»>
<input type=»file» name=»file1″ />
</form>

Claro que este tipo de transferencia no nos da ninguna interacción avanzada que indique al usuario el progreso de la transferencia. Para esto vamos a necesitar un script del lado del servidor que se encargue de recibir el archivo. A pesar de que con PHP se pueden hacer unas cuntas cosas, no tenemos la capacidad de acceder directamente al sistema de archivos y ver el progreso del mismo, por lo cual queda descartado el uso del mismo por lo menos para monitorear el progreso de la carga. Sí podemos utilizar PHP para el resto del proceso, como sea insertar en una base de datos, enviar mensajes etc.

El intermediario para esta solución será un script en Perl, llamado Uber-Uploader. Este script requiere de que el servidor soporte scripts Perl, trabajando con también con PHP y Javascript. El sitio de origen de este script lo pueden encontrar aquí: http://uber-uploader.sourceforge.net/. De todas formas ya que al día de hoy no está actualizado a la última versión disponible adjunto un zip con los archivos necesarios.

Una gran ventaja de este script es que no necesitamos modificar mas que la configuración del mismo, sin tener que meternos con el código en Perl.

Volviendo al script, tenemos los siguiente archivos dentro del zip en cgi-bin:

  • uu_default_config.pm
  • uu_ini_status.pl
  • uu_lib.pm
  • uu_upload.pl

Estos son los archivos de Perl que deben incluirse en el directorio cgi-bin o donde nuestro servidor ejecute los archivos cgi (si este directorio no existe se puede probar con la raíz del sitio). Es muy importante que los permisos de ejecución esten correctamente configurados para que Apache pueda ejecutar el script. Seteando los permisos en 755 para todos los archivos de cgi-bin no deberíamos tener problema.

El archivo que más nos interesa en este caso es uu_default_config.pm que contiene la configuración general de directorios y filtros. Las opciones más importantes son:

  • config_file_name
    Nombre del archivo de configuración, en la segunda parte veremos que podemos tener varias configuraciones.
  • temp_dir
    Archivo temporal de carga para el script.
  • upload_dir
    Donde quedarán guardados los archivos al ser cargados.
  • max_upload
    Tamaño máximo de los archivos.
  • redirect_url
    Dirección a donde nos llevará el script al terminar de cargar, donde podremos realizar tareas post carga como interacción con bases de datos etc.
  • disallow_extensions
    Extensiones no permitidas de archivo.

Con esto tenemos la configuración del script Perl, ahora veamos la otra parte, PHP y Javascript. En este caso tenemos los siguientes archivos (los que aparecen fuera de cgu-bin en el zip):

  • upload.php
  • uu_conlib.php
  • uu_file_upload.js
  • uu_finished.php
  • uu_finished_lib.php
  • uu_get_status.php

Empecemos por uu_conlib.php, el cual es el archivo de configuración del lado de PHP. Las variables que más nos interesan son:

  • $path_to_upload_script
    Define la ruta donde está el script Perl, noten que si el mismo no esta dentro de cgi-bin deberemos modificar la ruta.
  • $path_to_ini_status_script
    Lo mismo que para la variable anterior.
  • $default_config_file
    Archivo de configuración que utilizará este PHP, útil en caso de usar varias configuraciones.
  • $max_upload_slots
    Cantidad máxima de slots de carga, sí, podemos cargar muchos archivos en cola =).
  • $progress_bar_width
    Largo de la barra de progreso, más que nada un tema de diseño.

Pasemos al archivo upload.php, archivo que contiene el formulario html y archivo donde se «muestra» el uploader. Aquí podemos agregar variables al formulario las cuales recibiremos al finalizar la carga de los archivos, por ejemplo id de usuarios, campos con descripciones, etc.

Por último tenemos el archivo uu_finished.php, archivo a donde llegamos al terminar la carga. El script procesa la información de los archivos, datos como nombre, tamaño, etc de cada archivo cargado es accesible en este archivo. Por ejemplo para obtener el nombre del primer archivo cargado podemos hacerlo de la siguiente forma:

$_FILE_DATA[0]->getFileInfo(‘name’)

Y en caso de tener varios archivos cargados podemos hacer lo siguiente:

for ($i = 0; $i < count($_FILE_DATA); $i++) {
$filename = $_FILE_DATA[$i]->getFileInfo(‘name’);
$filesize = $_FILE_DATA[$i]->getFileInfo(‘size’);

}

Ahora tenemos un panorama general del uso de este script, en la segunda parte veremos como tener varios archivos de configuración, como personalizar el formulario de contacto y los errores más comunes que debemos verificar.

Descargar archivo zip con script Uber Uploader.