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:

 


Traducción en tiempo real mediante Google Translate con PHP

Posted: febrero 19th, 2011 | Author: | Filed under: PHP, Recursos Web | Tags: , | Comentarios desactivados en Traducción en tiempo real mediante Google Translate con PHP

La traducción de textos en tiempo real es posible utilizando PHP y la API de Google Translate. En forma rápida y sencilla podemos realizar traducciones en los idiomas soportados por el servicio de Google.

En dos líneas podemos realizar el pedido de traducción y procesar la información de respuesta que llega en JSON:

$trans = @file_get_contents( «http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=Texto&langpair=es|en» );
$json = json_decode( $trans, true );

Los parámetros a utilizar son tres. El primero indica la versión de API que estamos utilizando, en la actualidad la 2.0 está en desarrollo por lo que haremos uso de la 1.0.

El parámetro q indica el texto a traducir. Luego indicamos los idiomas de origen y destino. En este caso es que indica español y en que indica english. Debemos hacer uso de las siglas utilizadas por Google Translate para indicar los idiomas.

Al procesar el JSON con json_decode obtenemos un array con un campo «responseStatus» que indica si la traducción se realizó con éxito. En dicho caso devuelve el valor «200».

El texto está contenido en [«responseData»][«translatedText»], por lo cual podemos responder en un AJAX para realizar traducciones instantáneas y en forma sencilla.

echo $json[‘responseData’][‘translatedText’];


Referencias a variables y arrays en PHP

Posted: mayo 27th, 2010 | Author: | Filed under: PHP | 3 Comments »

PHP sigue muchas de la reglas de C, por lo que no podía faltar la referencia. Veamos un ejemplo ilustrativo, tenemos un array de elementos y queremos recorrerlo realizando modificaciones a medida que lo hacemos. La función preferida para esto es foreach, pero al hacerlo trabajamos sobre una copia de la variable, por lo que al salir del bucle nuestros cambios desaparecen.

Un primer intento podria ser este:

if (!empty($data[‘noticias’])) { foreach ($data[‘noticias’] as $each) {

$each[‘fechaactual’] = date(«Y-m-d h:i:s»);

} }

Para solucionar esto usamos una referencia:

if (!empty($data[‘noticias’])) { foreach ($data[‘noticias’] as $k=>$v) {

/* Creamos la referencia en la posición actual */
$pointer =& $data[‘noticias’][$k];

/* Hacemos cambios en el arreglo original */
$pointer[‘fechaactual’] = date(«Y-m-d h:i:s»);

} }


Campos adicionales personalizados para usuarios en WordPress

Posted: mayo 19th, 2010 | Author: | Filed under: PHP | Comentarios desactivados en Campos adicionales personalizados para usuarios en WordPress

Suiza Traders gestores Broker para fondos de inversion y FOREX.

Muchas veces en nuestro sitio queremos poder agregar campos personalizados para los usuarios. Ya sea un número de facturación, direcciones, tipo de cliente o una cuenta de twitter.

A pesar de que WordPress no trae aún en forma nativa la gestión de campos personalizados para usuarios (en la versión actual, 2.9.2), podemos hacer una pequeña modificación en nuestro archivo functions.php del theme.

Abrimos el archivo mencionado y simplemente agregamos el siguiente código:

<?php
/* Con este bloque mostramos en el admin el campo adicional en el admin */

add_action( ‘show_user_profile’, ‘my_show_extra_profile_fields’ );
add_action( ‘edit_user_profile’, ‘my_show_extra_profile_fields’ );

function my_show_extra_profile_fields( $user ) { ?>

<h3>Datos adicionales</h3>

<table>

<tr>
<th><label for=»escliente»>Es cliente?</label></th>

<td>
Si <input type=»radio» name=»escliente» id=»escliente» value=»si» <?php if (esc_attr( get_the_author_meta( ‘escliente’, $user->ID )) == «si») { ?> checked=»checked» <? } ?> >
No <input type=»radio» name=»escliente» id=»escliente» value=»no» <?php if (esc_attr( get_the_author_meta( ‘escliente’, $user->ID )) == «no») { ?> checked=»checked» <? } ?> >
</td>
</tr>

</table>
<?php } ?>
<?php
/* Este bloque actualiza el campo al guardar los cambios */

add_action( ‘personal_options_update’, ‘my_save_extra_profile_fields’ );
add_action( ‘edit_user_profile_update’, ‘my_save_extra_profile_fields’ );

function my_save_extra_profile_fields( $user_id ) {

if ( !current_user_can( ‘edit_user’, $user_id ) )
return false;

/* Actualizamos cada campo adicional con su ID */
update_usermeta( $user_id, ‘escliente’, $_POST[‘escliente’] );
}
?>

Luego para ver en el sitio público los campos adicionales podemos hacerlo de la siguiente forma:

<?php if ( get_the_author_meta( ‘escliente’ ) ) { ?>
<p> Es cliente: <?php the_author_meta( ‘escliente’ ); ?></p>
<?php }  ?>


Paginado de resultados con PHP

Posted: julio 31st, 2008 | Author: | Filed under: PHP, Recursos Web | Tags: , , , | 2 Comments »

Ordenar los resultados en los listados suele ser un problema repetido y aburrido de solucionar. Tenemos que cortar la consulta de resultados, luego contar las páginas segun la cantidad de resultados por página, poner links de siguiente, anterior, etc, etc, etc…

En esta entrada les dejo un script para olvidarse de una vez de este tema, un script que se encarga de hacer todo el paginado por su cuenta, simplemente definimos algunos valores y problema solucionado.

Primero que nada el script: «Paginator». El sitio del proyecto lo encuentran en:
http://jpinedo.webcindario.com/scripts/paginator/

Descargan los dos archivos del script y lo primero que tenemos que hacer es configurar el script para que se conecte a la base de datos. Esto lo hacemos en el archivo: paginatorconf.inc.php. Verán que en este archivo definen servidor, usuario, contraseña y DB.

Hecho esto lo único que tenemos que hacer es preparar la consulta SQL tal como la usariamos normalmente, sin LIMIT ni nada. Veamos un ejemplo:

$_pagi_sql = «SELECT * FROM tabla ORDER BY nombre»;

$_pagi_cuantos = 50;
$_pagi_nav_num_enlaces = 5;

require(«paginatorconf.inc.php»);
require(«paginator.inc.php»);

Guardamos en una variable de nombre $_pagi_sql (este nombre es el que usa el script, sirve para no confundirse) la consulta, luego definimos el formato del paginado, es decir la cantidad de resultados por página y el numero de enlaces hacia las páginas de resultados, y llamamos a los dos archivos del paginator, primero al de configuración y luego a paginator.inc.php.

Luego de haber incluído el segundo archivo tendremos en la variable $_pagi_result el resultado de la consulta. Además tenemos otras variables que guardan todos los datos que necesitamos, como cantidad de resutlados, número de enlaces y demás, veamos como podemos desplegar la información:

<table>
<tr>
<th width=»3%»>N&ordm;</th>
<th>Nombre</th>
</tr>

<?
$i = $_pagi_desde;

while($row = mysql_fetch_array($_pagi_result)){
?>
<tr>
<td><?=$i?>.</td>
<td> <?=$row[‘nombre’]?></td>
</tr>

<?
$i++;
}
?>

<tfoot>
<tr><th colspan=2 width=100%>
Resultados: Desde <?=$_pagi_desde?> hasta <?=$_pagi_hasta?> (Total: <?=$_pagi_totalReg?>)
<br />Página: <?=$_pagi_navegacion?>
</th></tr>
</tfoot>

</table>

Recorremos los resultados obtenidos, y con la variable $_pagi_navegacion desplegamos la navegación con los links de siguiente, anterior y links directo a las páginas. así de simple :).

Para los casos en que utilizan variables GET para su sitio, no hay problema, ya que las variables GET que utiliza el navegador no borran las de ustedes, el script se encarga de propagar o «poner en su sitio» las variables GET que tenga la URL para no romper la misma ;).


Envío de mails desde PHP con smtp, autenticacion, ssl y otros.

Posted: julio 28th, 2008 | Author: | Filed under: PHP, Recursos Web | Tags: , , , , , | 46 Comments »

Enviar mails con PHP suele ser sencillo, utilizando la funcion mail() podemos hacerlo aunque no tenemos prácticamente fleixbilidad ni opciones. Casos típicos son cuando queremos enviar mails por smtp, utilizando una cuenta en particular, o nuestro servidor no tiene configurado un servidor local para PHP, o necesitamos una conexion SSL, etc.

Para estos casos podemos usar la clase phpmailer, que nos da todas estas opciones y más. La clase la pueden descargar de: phpmailer.codeworxtech.com

Lo único que necesitamos hacer luego de tener la clase descargada y colocada nuestro sitio, es incluir el archivo de la misma e instancia la clase:

require(«phpmailer/class.phpmailer.php»);
$mail = new PHPMailer();

Hecho esto pasamos a definir mail de origen, destino, nombre, etc.:

$mail->From     = $mailfrom; // Mail de origen
$mail->FromName = $name; // Nombre del que envia
$mail->AddAddress($para); // Mail destino, podemos agregar muchas direcciones
$mail->AddReplyTo($mailfrom); // Mail de respuesta

Luego definimos el contenido del mail:

$mail->WordWrap = 50; // Largo de las lineas
$mail->IsHTML(true); // Podemos incluir tags html
$mail->Subject  =  «Consulta formulario Web: $name»;
$mail->Body     =  «Nombre: $name \n<br />».
«Email: $mailfrom \n<br />».
«Tel: $tel \n<br />».
«Mensaje: $info \n<br />»;
$mail->AltBody  =  strip_tags($mail->Body); // Este es el contenido alternativo sin html

Podemos adjuntar archivos simplemente agregando los mismos de la siguiente forma:

$mail->AddAttachment(«nombredearchivo.txt»); // Ingresamos la ruta del archivo

Y ahora viene la parte divertida (no solo me pica el…errr), definimos el servidor que enviara el mail, podemos definir tipo de servidor, autenticacion, usuario, contraseña, etc. Vemos ejemplo de las posibilidades que tenemos.

Si vamos a enviar mail desde el servidor local sin configuración especial podemos usar:

$mail->Host     = ‘localhost’;

Si necesitamos utilizar una casilla de correo smtp, con user y pass:

$mail->IsSMTP(); // vamos a conectarnos a un servidor SMTP
$mail->Host = «mail.servidor.com»; // direccion del servidor
$mail->SMTPAuth = true; // usaremos autenticacion
$mail->Username = «info@servidor.com»; // usuario
$mail->Password = «pass»; // contraseña

Si necesitamos una conexion con SSL, por ejemplo para enviar un mail desde PHP con gmail:

$mail->Mailer = «smtp»;
$mail->Host = «ssl://smtp.gmail.com»;
$mail->Port = 465;
$mail->SMTPAuth = true;
$mail->Username = «burmauy@gmail.com»; // SMTP username
$mail->Password = «burmaUY123456»; // SMTP password

Como ven esta clase es muy flexible y nos olvidamos de tener que manejar nosotros mismos conexiones complejas o con cabeceras especiales. Podemos simplificarnos mucho la vida utilizando phpmailer para enviar mails.

Ya para enviar el correo, simplemente utilizamos la siguiente linea:

$mail->Send();

Podemos poner esa llinea dentro de un if para saber si quedo todo bien configurado y se pudo enviar el email, de la siguiente forma:

if ($mail->Send())
echo «Enviado»;
else
echo «Error en el envio de mail»;


URLs limpias en los sitios con Apache y archivos .htaccess

Posted: julio 23rd, 2008 | Author: | Filed under: PHP, Recursos Web | Tags: , , , | 2 Comments »

En cualquier sitio que requiera programación, ya sean noticias, productos, categorías, etc., necesitamos agregar URLs que tienen parámetros. Estos parámetros son los que indican a nuestro código la información a cargar, pero los buscadores no ven con buenos ojos estas consultas con parámetros. Por ejemplo:

http://www.sitio.com/noticias.php?date=20080201

Esta url además de no ser amigable para los buacadores no lo es para los usuarios. Si alguien busca en el historial y ve esa dirección no va a recordar fácilmente de que se trata.

Para poder llevar esta URL a algo mas prolijo utilizaremos mod_rewrite de Apache y un archivo .htaccess. Buscamos lograr una url como la siguiente:

http://www.sitio.com/noticias/2008/02/01

Primero que nada necesitamos saber si nuestro servidor Apache tiene habilitado mod_rewrite, para esto podemos ver en el archivo de configuración httpd.conf el cual debe tener descomentada la línea siguiente:

LoadModule rewrite_module modules/mod_rewrite.so

Nota para los que tengan Windows, pueden tener problemas al probar este módulo, en Linux anda a las mil maravillas.

En caso de que el servidor no soporte el módulo o que escriban mal el archivo .htaccess van a ver un mensaje de error por lo que es recomendable probar primero todo en un directorio separado del sitio principal para no bloquear todo haciendo pruebas. Si tuvieron que modificar el archivo httpd.conf van a necesitar reiniciar el servidor.

El siguiente paso es el de crear el archivo .htaccess, nuevamente los que tengan Windows pueden tener algun problema al intentar crear un archivo que empieza con un punto, lo que pueden hacer es abrir el bloc de notas y en Archivo > Guardar Como eligen «Todos los Archivos» y ponen el nombre .htaccess para guardar.

Empecemos con un archivo básico de ejemplo:

RewriteEngine On
RewriteBase /

RewriteRule ^login/ /login.php [L]

Lo que haremos será poner una URL en el navegador, pero queremos que nuestro script reciba el código como si nada hubiera sucedido, para esto reescribiremos las URLs. Las dos primeras líneas indican que vamos a activar el módulo de reescritura y luego indicamos la ruta para esta operación.

A continuación lo que hacemos es indicar nuestra primera regla de modificación, queremos que cuando alguien ingresa a www.nuestrositio.com/login/, en realidad lo envíe al archivo login.php. Para esto indicamos la palabra a buscar y luego indicamos el archivo php al cual se reenviará el pedido. Claro que esto sucede del lado del servidor, por lo que el visitante del sitio no ve nada «raro» al acceder.

Veamos ahora un ejemplo en el que queremos pasar parámetros en forma limpia a un archivo php:

RewriteRule ^noticias/([0-9]*)/ /noticias.php?id=$1 [L]

Podemos agregar una segunda regla, una por línea y manteniendo las dos primeras línea del archivo .htaccess. Esta nueva regla utiliza una cadena de texto «noticias» y luego una expresión regular para pasar al archivo php un parámetro como variable GET[‘id’].

La expresión regular de este ejemplo recibe números del 0 al 9 (el asterisco indica que pueden ser muchos) y los pasa al archivo noticias.php donde aparece la variable $1. Si tenemos varios parámetros podemos poner varias expresiones regulares y variables para cada una $1, $2, $3…

Vemos ahora un ejemplo en el cual pasamos letras también:

RewriteRule ^noticias/([a-zA-Z0-9\(\)+%_-]*)/ /noticias.php&title=$1 [L]

En este caso la expresión regular acepta letras de la «a» a la «z», de la «A» a la «Z» (las expresiones son sensibles a mayúsculas, por eso ponemos los dos casos), también acepta números así como algunos caracteres: ( ) + % _ –

Noten que para los paréntesis necesitamos utilizar la barra de escape «\»la cual indica que vamos a poner un caracter que la expresión puede «confundir» con otra cosa. Este caracter nos sirve para estos casos especiales.

Para seguir ahondando en ejemplos necesitamos tener un manejo de expresiones regulares, tema que escapa a esta entrada específica.


Validación de Formularios

Posted: junio 10th, 2008 | Author: | Filed under: AJAX, PHP, Recursos Web, Software | Tags: , , , , | 1 Comment »

Cuando utilizamos campos de selección, formularios y demás suelen existir reestricciones en lo que podemos hacer. Ya sea un campo para una casilla de mail o para un teléfono, el sitio intentará que ingresemos la información de forma correcta, lo cual puede ser mas o menos amigable con el usuario :). Son conoocidos los casos de sitios donde se ingresa algunos campos de formularios y nos dice que hay un error, pero no donde, o bien que no dice nada y no tenemos idea que sucedió, entre otras muchas posibilidades.

Captura Validacion JS

Para tratar de dar al usuario las mayores facilidades veremos un poco de validación con javascript, lo cual nos permite verificar los datos que se ingresan antes de que se envíe el formulario, y buscaremos que esta información sea lo más amigable y útil posible.

Comencemos con un simple formulario:

<form method=»post» action=»» name=»form» onsubmit=»return validate(this)»>
<fieldset>
<p><label for=»email1″ class=»left»>Email:</label>
<input type=»text» name=»email1″ id=»email1″ class=»field» value=»» tabindex=»1″ /> *</p>
<p><label for=»email2″ class=»left»>Verificar Email:</label>
<input type=»text» name=»email2″ id=»email2″ class=»field» value=»» tabindex=»2″ /> *</p>
<p><label for=»password1″ class=»left»>Contraseña:</label>
<input type=»password» name=»password1″ id=»password1″ class=»field» value=»» tabindex=»3″ /> *</p>
<p><label for=»password2″ class=»left»>Verificar Contraseña:</label>
<input type=»password» name=»password2″ id=»password2″ class=»field» value=»» tabindex=»4″ /> *</p>
<p><label for=»firsnamename» class=»left»>Nombre:</label>
<input type=»text» name=»name» id=»name» class=»field» value=»» tabindex=»5″ /> *</p>
<p><input type=»submit» name=»register» id=»register» class=»button» value=»Register» tabindex=»6″ /></p>
<p class=»legend»>(* Campos requeridos)</p>
</fieldset>
</form>

Noten algunos detalles que agregamos, macados en negrita:

  • onsubmit=»return validate(this)»
    Al enviar el formulario, ya sea haciendo clic en el botón o dando enter, queremos que el contenido del mismo pase por una función de javascript que validará el contenido. La función se llamará validate y pasamos como argumento a la misma el formulario, que al estar haciendo el envío en este preciso momento podemos invocarlo con this.
  • id=»email1″
    Debemos poder identificar los campos del formulario con un nombre. Aunque podríamos hacerlo con el atributo name de cada campo, por lo que general queda mas «limpio» el codigo al usar ids. Noten que tenemos un id para cada campo, esto es importante a la hora de poder ir tomando el contenido de cada campo por separado.
  • (* Campos requeridos)
    Por último y con el único fin de hacer más amigable las cosas, avisamos que los campos marcados con un asterisco son obligatorios. Esto avisa al usuario de que debe llenarlos y que serán validados.

El siguiente paso es llamar a la función javascript que mencionamos, para esto tendremos dos secciones de código javascript, una que contendrá la validación especifica para este formulario que por ejemplo tiene casillas con nombre de email, contraseña, y dejaremos en un archivo por separado el resto del código que se aplica a cualquier caso de validación, como es mostrar el mensaje de error, etc.

Al final de este artículo están disponibles los archivos para la descarga, dentro de messages.html encontrarán el formulario html con el código javascript específico al formulario y una llamada a un archivo externo messages.js que contiene el código general, además de un archivo css y un archivo de imagen.

Volviendo al código, para validar esta formulario utilizaremos un código como este:

<script type=»text/javascript»>
document.forms.form.email1.focus();

function validate(form) {
// Pasamos contenido de los campos a variables
var name = form.name.value;
var email1 = form.email1.value;
var email2 = form.email2.value;
var password1 = form.password1.value;
var password2 = form.password2.value;

// Expresiones regulares que utilizamos para validar las cadenas de texto segun cada caso
var nameRegex = /^[a-zA-Z]+(([\’\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
var emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
var messageRegex = new RegExp(/<\/?\w+((\s+\w+(\s*=\s*(?:».*?»|’.*?’|[^'»>\s]+))?)+\s*|\s*)\/?>/gim);

if(email1 == «») {
inlineMsg(‘email1′,’Ingrese su email.’,2);
return false;
}
if(!email1.match(emailRegex)) {
inlineMsg(‘email1′,’Ha ingresado un email invalido.’,2);
return false;
}
if(email1 != email2) {
inlineMsg(‘email2′,’El mail y su verificacion no coinciden.’,2);
return false;
}

if( (password1 == «») || (password1.length < 6) ) {
inlineMsg(‘password1′,’Ingrese una contraseña de al menos 6 caracteres.’,2);
return false;
}
if(password2 != password1) {
inlineMsg(‘password2′,’La contraseña y su verificacion no coinciden’,2);
return false;
}

if(name == «») {
inlineMsg(‘name’,’Ingrese su nombre.’,2);
return false;
}
if(!name.match(nameRegex)) {
inlineMsg(‘name’,’Ha ingresado un nombre invalido.’,2);
return false;
}

return true;
}
</script>

La primera línea lo único que hace es colocar el foco o cursor de escritura sobre el primer campo del formulario. Luego tenemos la función validate que recibe el formulario que debe validar, «function validate(form) {«, y enseguida dentro de la misma pasamos los contenidos de los campos a variables y preparamos expresiones regulares para validar los distintos casos de email, nombre, mensaje.

El resto del código es simplemente validar cada una de las casillas, con una condición y en caso de que la cumpla llamamos a otra función (inlineMsg, que se encuentra dentro del archivo js externo que mencionamos antes) la cual se encarga de mostrar el mensaje de error.

if(email1 == «») {
inlineMsg(‘email1′,’Ingrese su email.’,2);
return false;
}

En este caso verificamos si la variable email1 contiene el valor vacío, en caso de ser asi llamamos a inlineMsg pasándole como parámetros el id del campo que estamos validando, el mensaje de error y si queremos que el mensaje desaparezca solo luego de 2 segundos.

Con esto deberíamos tener una validación básica pero amigable para el usuario, fundamental para que nuestros sitios sean utilizados y no generen rechazo.

(Créditos: http://www.leigeber.com/2008/04/dynamic-inline-javascript-form-validation/)

Descargar archivos validación JS


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.