Como Lo Hago » PHP

Cómo crear un formulario de contacto – Versión 2.0

Xabadu — Sun, 30 May 2010 02:16:33 +0000

Hace algún largo tiempo ya, les trajimos un tutorial sobre como armar un formulario de contacto para nuestros sitios Web, en el cual vimos todo el proceso de creación, desde el armado hasta el envío de los datos vía correo electrónico.

Pero como el tiempo pasa, y nos vamos poniendo viejos, y sabemos que las soluciones no son eternas ni apropiadas para estos tiempos, hoy hemos decidido sacar a relucir nuestros talentos musicales y poéticos desarrollísticos (¿desarrolladores?) y traerles una nueva versión de este formulario, ahora con sabor a limón y algunas características que lo convierten en una versión mucho más óptima que la anterior.

El detalle, como siempre, después del salto.

Cómo crear un formulario de contacto – Versión 2.0

Como siempre, lo primero:

Detalles del tutorial

Tiempo aproximado de implementación: 30 minutos.

Dificultad: Básico (para implementar tal cual) – Intermedio (para personalizar).

Conocimientos previos requeridos: Entendimiento de HTML, CSS, jQuery y PHP.

Implementos necesarios:

Un editor Web (Recomendamos Aptana Studio o Notepad++, ambos gratuitos).

Ahora, la pregunta de rigor. ¿Qué trae de nuevo este formulario 2.0?:

Validaciones de ingreso de datos en tiempo real mediante jQuery.
Validación del correo electrónico en tiempo real mediante expresiones regulares.
Envío de información de forma asincrónica (sin recargar la página) mediante el método .ajax de jQuery.
Mejoras de estilo y codificación.

Así que con eso claro, vamos, manos a la obra:

Procedimiento:

Separaremos este desarrollo en las siguientes partes:

Código HTML – Armado del formulario.
Código CSS – Estilización del formulario.
Código jQuery/Javascript – Validaciones.
Código PHP – Envío de información.

1.- Código HTML

El armado del formulario es bastante estándar:


  
    Contacto

 
 Nombre: 
 
 


 
  Correo:
 
 
 

Sitio Web:
 
 


 
 Mensaje:

Con este código tendremos un formulario bastante estándar armado en nuestra página de contacto. Este contará con campos de texto para que el visitante ingrese su nombre, correo electrónico y sitio Web, así como un área de texto para que ingrese su mensaje. Y obviamente al final añadimos un botón para el envío.

Como podrán fijarse, a continuación de cada campo de texto y área de texto, hemos añadido un span sin contenido. Esto lo hemos hecho para insertar mensajes y resultados de las validaciones posteriormente mediante jQuery.

A continuación, haremos la estilización del formulario, mediante CSS.

2.- Código CSS

body {
 height: 100%;
 background: #348075;
 font-family: Arial;
 font-size: 11px;
 color: white;
}

#container {

 width: 1000px;
 margin: 0 auto;
 background: #5b5c5c;
 border: 1px solid white;
 -moz-border-radius: 20px;
 -webkit-border-radius: 20px;

}

#formulario {

 padding: 1em;

}

#formulario fieldset {

 width: 400px;
 padding: 0 0 0 0;
 border: 0;

}

#formulario label {

 display: block;
 padding: 5px 0 5px 0;

}

#formulario input[type=text], textarea {

 padding: 10px 0 10px 0;
 border: 1.5px solid black;
 color: #5b5c5c;
 font-family: inherit;
 font-size: inherit;
 -moz-border-radius: 5px;
 -webkit-border-radius: 3px;

}

#formulario input[type=text]:focus, textarea:focus {

 background: #f5f2c9;

}

#formulario input[type=submit] {

 border: none;
 margin-right: 1em;
 padding: 6px;
 text-decoration: none;
 font-size: 12px;
 font-weight: bold;
 -moz-border-radius: 4px;
 background: #348075;
 color: white;
 width: 100px;

}

#formulario input[type=submit]:hover {
 background: #287368;
 cursor: pointer;
}

#validar-nombre, #validar-correo, #validar-sitio, #validar-mensaje {
 position: absolute;
 width: 100px;
}

#validar-nombre img, #validar-correo img, #validar-mensaje img {
 padding:10px 0 0 5px;
}

Como podrán ver, en algunas partes hemos utilizado la propiedad border-radius (con moz y webkit para apuntar a distintos navegadores). Esta propiedad, tal como hemos indicado anteriormente, es de CSS3, por lo que no está completamente soportada por todos los navegadores, especialmente los más antiguos. El efecto que logra es el de bordes redondeados, así que ojo, si utilizan IE o algún navegador de mayor antiguedad no lo podrán apreciar.

3.- Código jQuery / Javascript

Acá debemos fijarnos en algunas cosas. Primero, debemos asegurarnos de descargar e incluir jQuery en la cabecera de nuestro formulario, y luego, crear un documento js en el que incluiremos el código en jQuery que hará las validaciones y el correspondiente a Javascript que contendrá la expresión regular que evaluará la dirección de correo ingresada para ver si es válida. Partamos con jQuery:

$(function(){

 var valor;
 var i = 0;

 $('#nombre').focus(function(){

     $('#resultado-nombre').remove();
     $('#validar-nombre').append('* Obligatorio');

 });

 $('#nombre').blur(function(){

     $('.advertencia').remove();

     valor = $('#nombre').val();

     if(valor != '') {
         $('').appendTo('#validar-nombre');
     }
     else {
         $('').appendTo('#validar-nombre');
     }

 });

 $('#correo').focus(function(){

     $('#resultado-correo').remove();
     $('#validar-correo').append('* Obligatorio');

 });

 $('#correo').blur(function(){

     $('.advertencia').remove();

     valor = $('#correo').val();

     if(valor != '') {

       if(validaCorreo(valor)){

          $('').appendTo('#validar-correo');
          var valido = true;

       }
      else {
          $('Correo no valido').appendTo("#validar-correo");
      }
    }
    else {
         $('').appendTo('#validar-correo');
    }

 });

 $('#sitio').focus(function(){

     $('#validar-sitio').append('* Opcional');

 });

 $('#sitio').blur(function(){

      $('.advertencia').remove();

 });

 $('#mensaje').focus(function(){

      $('#resultado-mensaje').remove();
      $('#validar-mensaje').append('* Obligatorio');

 });

 $('#mensaje').blur(function(){

     $('.advertencia').remove();

     valor = $('#mensaje').val();

     if(valor != '') {
          $('').appendTo('#validar-mensaje');
     }
     else {
        $('').appendTo('#validar-mensaje');
     }

 });

 $('#enviar').click(function(){

       if($('#nombre').val()!= '' && $('#correo').val()!='' && $('#mensaje').val()!='' && valido) {

         $('.advertencia').remove();

         $('#envio').append('');

         var nombre = $('#nombre').val();
         var correo = $('#correo').val();
         var sitio = $('#sitio').val();
         var mensaje = $('#mensaje').val();

       $.ajax({
           url: 'envio.php',
           type: 'POST',
           data: 'nombre=' + nombre + '&correo=' + correo + '&sitio=' + sitio + '&mensaje=' + mensaje,

           success: function(resultado) {
               $('#respuesta').remove();
               $('#envio').append('' + resultado + '');
               $('#cargando').fadeOut(500, function() {
                   $(this).remove();
               });

           }
       });

       return false;

   }
   else {
       $('#envio').append('Debe completar los datos requeridos.');
       return false;
    }

 });

});

Varias cosas a las que ponerle atención en el código anterior:

Utilizamos 3 imágenes en los procesos de validación y envío (accept.png, delete.png, ajax-loader.gif). Estas imágenes son utilizadas para validar correcta e incorrectamente así como mostrar un pequeño cargador al momento de enviar los datos. Pueden obtenerlas en el código fuente que hemos adjuntado al final.
Hacemos uso del método ajax de jQuery, el cual nos permite enviar asincrónicamente los datos a una página en PHP mediante un método como POST o GET y que esta se ejecute sin la necesidad de recargar la página. Como se puede apreciar, en caso de éxito de esta llamada (el código correspondiente a success), hay un parámetro que es devuelto (resultado), el cual corresponde a un mensaje desplegado por el script que ejecutamos, lo que podremos ver más adelante.
Hemos incluido en 2 partes un return false. Esto se ha hecho para que el formulario no ejecute el action (de enviar a la página envio.php) de forma normal, sino que ejecute todo de forma asincrónica. Si el usuario tiene desactivado Javascript en su navegador, se ejecutará todo de forma normal.
En la validación del correo se hace un llamado a una función que lo evaluará, esa la incluiremos a continuación.

El código básicamente ejecuta acciones cada vez que se selecciona un campo de texto (focus) y/o se sale de el (blur). Ahí evalua de acuerdo a los parámetros que hemos definido (que existan datos) y en base a eso muestra un resultado de la validación. Luego, al final, cuando se hace click en el botón de envío, evalúa que existan datos en todos los campos y en ese caso envía. De lo contrario, despliega un mensaje indicando la necesidad de completar el formulario.

Luego, a continuación del código jQuery, incluiremos una función en Javascript que evaluará el correo mediante una expresión regular para verificar que tenga el formato correcto:

function validaCorreo(correo) {

 var expresion = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)
|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})
\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.
|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.)
{2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
 return expresion.test(correo);

}

Entre estos 2 códigos se encargan de toda la validación del formulario, tal como indicamos, en tiempo real. Lo que nos queda hacer ahora es crear nuestro script en PHP para el envío final de los datos.

4.- Código PHP

Nombre: ".$nombre."

 Correo: ".$correo."

 Sitio Web: ".$sitio."

 Mensaje: ".$mensaje;

 /* Definimos las cabeceras del mensaje */

 $cabecera = "MIME-Version: 1.0\r\n";
 $cabecera .= "Content-type:text/html; charset=iso-8859-1\r\n";
 $cabecera .= "From: $correo\r\n";
 $cabecera .= "Reply-to: $correo\r\n";
 $cabecera .= "Cc: $correo\r\n";

 /* Enviamos vía correo, devolviendo un mensaje en caso de éxito o falla */ 

 if(mail($destino, $asunto, $cuerpo, $cabecera)) {
    echo 'Su mensaje ha sido enviado.
     De ser necesario, nos pondremos en contacto con Ud.';
 }
 else {
    echo 'No se pudo enviar el mensaje. Inténtelo nuevamente';
 }

?>

Los mensajes desplegados en el if y else cuando enviamos el correo son aquellos que son devueltos al método .ajax de jQuery (el parámetro resultado del que hablamos anteriormente), los cuales son desplegados en el formulario.

Conclusión

Y con eso tenemos nuestro formulario de contacto terminado, el cual valida en tiempo real y envía los datos de forma asincrónica. En caso de que el visitante tenga Javascript desactivado en su navegador, esto se ejecutará de forma normal, es decir, el script PHP se cargará al momento de presionar el botón Enviar y no habrá validación en tiempo real.

Antes de terminar:

Y como siempre, les recordamos que este tutorial ha sido:

Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.

Staff CLH

Cómo crear un cuadro de información de autores en Wordpress

Xabadu — Sun, 23 May 2010 02:33:05 +0000

Es común que cuando tenemos múltiples autores escribiendo en un sitio, querramos mostrar la información del responsable de cada artículo para que los usuarios puedan conocer quien está detrás de cada cosa que se escribe. Si bien en CLH en un principio optamos por no mostrar la información, y luego hacer una pequeña referencia al comienzo de cada artículo, eventualmente hemos llegado al punto de incluirlo (principalmente por Dexter, que quiere ser famoso )

En la búsqueda de alternativas, dimos con varios plugins que ayudan a automatizar la tarea, pero nada que nos satisfaciera por completo en cuanto a diseño y personalización. Luego de analizar el tema más a fondo fue posible darse cuenta que armar un cuadro de información desde cero no es una tarea compleja, y si entrega una gran flexibilidad para el armado, por lo que echamos manos a la obra y hoy, en un sencillo y rápido tutorial, les enseñaremos el proceso paso a paso.

El detalle, como siempre, después del salto.

Cómo crear un cuadro de información de autores en Wordpress

Antes de todo, como siempre:

Detalles del tutorial

Tiempo aproximado de implementación: 10 minutos.

Dificultad: Básico (para implementar tal cual) – Intermedio (para personalizar).

Conocimientos previos requeridos: Entendimiento de HTML, CSS, PHP y las funciones de Wordpress.

Implementos necesarios:

Un sitio con Wordpress.

Procedimiento:

La implementación de un cuadro de información de autores, cuenta con varias partes:

Código HTML para crear el cuadro.
Código CSS para estilizarlo.
Código PHP para insertar las funciones de Wordpress.

Así que vamos, a implementar:

Código HTML

Con esto armaremos la estructura de nuestro cuadro de información de autores, el esqueleto por ponerlo de alguna forma. En el, incluiremos principalmente 3 cosas:

Imagen del autor.
Información del autor (nombre y sitio Web).
Bio del autor.

Para verlo de forma más gráfica, armaremos algo de la siguiente forma:

Como podemos ver, no es demasiado complejo. Desarmando esa imagen es posible apreciar que necesitamos un Div para el cuadro completo que debe contener a su vez 2 Div’s: Uno para la imagen del autor y una para la bio e información del autor. Así que viendo esto en código, sería algo de la siguiente forma:


   
        Aqui iría la imagen del autor
   
   
       Aquí iría la información y bio del autor

Vamos viendo. En el código anterior está claro que irá contenido dentro de cada Div, por lo que rellenarlo es bastante sencillo. Podríamos agregar una etiqueta para imágenes y luego abajo escribir el texto que querramos que aparezca. Sin embargo, ¿qué pasa si tenemos múltiples autores?, o más bien ¿cómo le decimos a Wordpress que incluya la información del autor del artículo y no de otra persona?. Ahí es donde entran las funciones de Wordpress.

Código PHP

Afortunadamente, Wordpress trae funciones incorporadas que nos permiten referenciar de manera muy sencilla la información de un autor en particular y relacionarla al artículo desde donde se está haciendo la llamada. Así, si Dexter escribe un artículo, aparece el cuadro con la información de Dexter, pero si el artículo lo escribe Topher, aparecerá su información, ya que WP sabe diferenciar de acuerdo a la ID de cada artículo y recupera los datos en base a eso.

Así que, listando, la información que debemos rescatar es:

Imagen del autor.
Su nombre o pseudónimo.
Un enlace a su sitio Web.
Su bio.

Si se fijan, los 3 últimos parámetros están incluidos en el perfil de cada autor en Wordpress, por lo que es sumamente sencillo recuperarlos. Ahora, el primero, correspondiente a la imagen es un poco más complejo, ya que el perfil en si no está asociado a ninguna imagen.

¿La solución?, Wordpress incluye una función que nos permite referenciar el gravatar asociado a la cuenta de correo del autor. Así que si el autor tiene un gravatar, este será mostrado en el cuadro.

O sea, en base al listado anterior, llamaremos a las siguientes funciones de Wordpress:

get_avatar( ), entregando como parámetro la función the_author_meta y como parámetro a esta última user_email.
the_author_link( ), sin parámetros.
the_author_meta( ) , entregando como parámetro user_url.
the_author_meta( ), entregando como parámetro description.

Donde:

La función get_avatar nos permite recuperar el gravatar asociado a una cuenta de correo. Por eso pasamos como parámetro el correo electrónico del autor del artículo.

La función the_author_link nos entrega el nombre o pseudónimo del autor, enlazado a una enumeración de todos los artículos que ha escrito en el sitio.

La función the_author_meta nos entrega información relacionada al autor del artículo, dependiendo del parámetro enviado, por eso al enviar user_url nos entrega el sitio Web asociado a la cuenta del autor, y si enviamos description nos entrega la bio que está en su perfil.

Así que con eso, el código quedaría de la siguiente forma (incluyendo el HTML anterior):


   
     
    
     
   
   
       Escrito por

Como pueden ver, hicimos uso de las funciones destacadas anteriormente para rescatar el gravatar del autor, su nombre, sitio Web y bio del perfil.

Ahora, si se fijan, hay un parámetro que incluimos en la función get_avatar que no indicamos anteriormente, el cual tiene un valor de 80. Este parámetro corresponde al tamaño de la imagen. Como los avatars son cuadrados, este valor se toma como ancho y alto de la imagen, la cual en este caso será de 80 pixeles.

Con eso ya tenemos nuestro cuadro armado en estructura y con la información del autor mostrándose, pero probablemente si lo vemos en el navegador, se verá desordenado y bastante horrible, ya que no hemos estilizado nada. Eso, precisamente, será nuestro próximo paso:

Código CSS

Mediante CSS vamos a encargarnos de posicionar los elementos dentro de cada bloque y de estilizar para hacerlo más agradable a la vista. El código que entregamos aquí es referencial, de acuerdo a lo que utilizamos para los cuadros de este sitio, así que siéntanse libres de modificar de acuerdo al estilo de su sitio:

div#info-autor {
 background: #f7f7fa; padding: 10px;
 margin: 0 0 15px 0;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 overflow: auto;
}
div#info-autor div#imagen-autor {
 float: left;
 margin: 0 10px 5px 0;
 border: 3px solid #626263;
}
div#info-autor div#imagen-autor a img{
 border: none;
}
div#info-autor p{
 text-align: justify;
 font-style: italic;
}
div#info-autor h4{
 font-weight: bold;
 padding-bottom: 5px;
 color: #403f3a;
 letter-spacing: -1px;
 line-height: 1em;
 font-size: 18px;
}

Algunos detalles a tener en consideración:

La propiedad border-radius (-moz-border-radius para Firefox y -webkit-border-radius para navegadores basados en Webkit), corresponde a CSS3, por lo que navegadores más antiguos o algunos modernos que no soporten CSS3 por completo (IE) no desplegarán correctamente el efecto. ¿Qué efecto se preguntarán?, esquinas redondeadas para los bloques.
Los últimos 2 bloques de código (para párrafos y para encabezados h4) los incluímos para que el estilo fuera distinto al que por defecto tiene la hoja de estilo en otros sectores del sitio. Sin embargo, esto es opcional.

Y con esos ajustes de CSS tenemos terminado nuestro cuadro de información de autores. ¿Se preguntan como queda el resultado? Fácil de ver, siguiendo más abajo, luego de la calificación del tutorial pueden verlo completamente implementado.

Nuevamente, los parámetros tanto de estilo como de estructura, son los que utilizamos acá. Si quieren armarlo de forma distinta, o posicionar y estilizar de manera más acorde a su sitio, no tengan miedo en jugar con el código. Esa es la base, pero todo lo que se puede lograr depende de cada uno

Por ahora, les recordamos que como siempre este tutorial ha sido:

Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.

Cómo crear un identificador de teléfonos móviles

Xabadu — Sun, 09 May 2010 04:00:27 +0000

¿Cuántas veces nos hemos encontrado con la siguiente situación?:

Nuestro plan de telefonía móvil nos entrega X cantidad de minutos a la Compañía 1, Y cantidad de minutos a la Compañía 2 y Z cantidad de minutos a la compañía 3. Agotamos una de las opciones y necesitamos hacer una llamada urgente, pero empezamos a pensar ¿Y si es de los minutos que ya no me quedan? Me cobrarán extra o no podré hacer la llamada. Y ante la duda, una oportunidad pasa.

Hoy en Internet es posible encontrar algunas aplicaciones que nos permiten reconocer la compañía a la que pertenece un número móvil. Sin embargo, algunas de ellas presentan requisitos específicos o son de licencia comercial, lo que no las hace accesibles para cualquier persona.

Pero que no panda el cúnico amigos nuestros, que hoy en CLH, mediante un realmente simple y rápido tutorial (siempre lo decimos, pero este en verdad es muy simple), les enseñaremos a construir un identificador de teléfonos móviles de forma gratuita y en la comodidad de su hogar.

¿Qué hacer? Solo seguirnos después del salto

Cómo crear un identificador de teléfonos móviles

Detalles del tutorial

Tiempo aproximado de implementación: 30 minutos.

Dificultad: Básico.

Implementos necesarios:

Un servidor Web que ejecute archivos PHP y un sistema de gestión de bases de datos MySQL (Recomendamos XAMPP).

La base de numeración telefónica móvil publicada por la Subtel. Pueden descargarla en formato PDF desde el siguiente enlace.

Un editor para la codificación (Recomendamos Notepad++).

Notas sobre el proceso:

Probablemente en este punto se preguntarán: ¿Cómo funciona esto? Bastante sencillo. La Subsecretaría de Telecomunicaciones en Chile define una serie de prefijos los cuales son asignados en rangos a las distintas compañías que entregan servicios de telefonía móvil. Estos prefijos están compuestos por 4 dígitos y van desde el 6200 hasta el 9999.

Ahora, ¿qué tienen que ver estos prefijos? Son ellos los que forman la primera mitad de nuestros números de teléfonos móviles. En consecuencia, cada prefijo tiene 4 dígitos más que forman un número único completo. Si nuestras matemáticas no fallan, podemos deducir que eso significa que existe un total de 9999 números de teléfonos móviles únicos por cada prefijo. Considerando que son 3799 prefijos en total, en Chile tenemos 37.986.201 posibles combinaciones de números.

¿Eso significa que eventualmente habrán 37 millones de celulares dando vuelta en el país?. Puede ser, pero de momento no, ya que como podrán fijarse en la base de numeración, hay prefijos asignados a compañías que actualmente no ofrecen servicios de telefonía móvil de libre acceso al público general… pero nunca se sabe. Adicionalmente, hay algunos rangos de prefijos que no están asignados, lo que deja un total 2620 prefijos y por ende 26.197.380 combinaciones. Pero eso es un dato anecdótico más que nada.

Con esa información, ya tenemos la lógica clara para realizar nuestra aplicación, así que manos a la obra.

Procedimiento:

1.- Lo primero que debemos hacer, y que es el paso más crítico, es transformar la base de numeración telefónica a un formato adecuado, ya que la que descargamos esta en formato PDF y no podremos acceder a ella de forma normal, así que nuestro objetivo es traspasarla a nuestra base de datos MySQL con el fin de poder consultarla mediante el script que desarrollaremos.

Para esto tenemos varias opciones:

Podemos copiar el contenido de la base y traspasarlo a una planilla Excel, en la cual debemos eliminar las XXXX que aparecen en el campo suscriptor y solo mantener el prefijo y en otra columna la compañía a la que pertenece ese prefijo. Adicionalmente, es bueno que al menos para las tres compañías más conocidas, cambiemos sus nombres completos o razones sociales a nombres más amigables y reconocibles para el usuario (por ej. ENTEL PCS TELECOMUNICACIONES S.A. a ENTEL PCS).
Una vez que tenemos nuestro Excel armado con el formato que queremos, lo traspasamos a MySQL. ¿Dudas sobre como hacerlo? No se preocupen, en el pasado hemos hecho un tutorial que cubre el proceso de forma completa.

Pero, equipo de CLH, este proceso es largo y tedioso, ¿pueden echarnos una mano por favor?. Bueno, bueno, pero solo porque lo pidieron por favor. Si hacen click en este enlace, pueden descargar la base de datos completa lista para importar a MySQL. Pero no le cuenten a nadie, ¿ya?.

El archivo que les dejamos es un fiel reflejo de la base de datos que creamos, llamada moviles, la cual tiene una tabla llamada numeracion. Esta a su vez tiene 2 campos: prefijo (INT) y empresa (TEXT). Más sencillo imposible.

2.- Ahora que hemos ordenado nuestros datos, podemos empezar a codificar lo que será nuestra pequeña aplicación. Para empezar, haremos un formulario el cual contendrá un campo de texto para que el usuario ingrese el número de teléfono móvil a consultar y un botón para enviar la consulta. Para esto, crearemos un archivo en formato PHP, llamado consulta.php, el cual contendrá además de lo anterior, un autollamado donde se ejecutará el script y consultaremos la base de datos. Pero primero, el formulario:


 
 Ingrese el número a consultar:

3.- Luego de codificar nuestro formulario, procedemos a hacer el código PHP, el cual validará el número ingresado y luego hará cortará los primeros 4 caracteres de la cadena ingresada (para igualarlo al prefijo), hará la consulta en la base de datos y desplegará el resultado de acuerdo a lo que se obtenga:

if($_POST) {

 if($_POST['numero'] == '') {

     $mensaje = "Debe ingresar un número para
     consultar.";

 }
 else {

          if(!$conexion = mysqli_connect("localhost", "usuario", "clave", "bd")) {

              $mensaje = "No se pudo conectar
              a la base de datos.";

          }
          else {

                     $numero = substr(trim($_POST['numero']), 0, 4);

                     $consulta = "SELECT empresa FROM numeracion WHERE prefijo = ".$numero;

                     if($resultado = mysqli_query($conexion, $consulta)) {

                           if(mysqli_num_rows($resultado) == 0) {

                               $mensaje = "No hay coincidencias para el
                               número ".$_POST['numero'].".";

                           }
                           else {

                               $datos = mysqli_fetch_array($resultado, MYSQL_ASSOC);

                               $mensaje = "El número ".$_POST['numero']."
                               pertenece a ".$datos['empresa']."";

                           }

                     }
                     else {

                         $mensaje = "Ocurrió un error al ejecutar
                         la consulta. Inténtelo nuevamente.";

                      }

       }

    }

 }

4.- El código en si es bastante autoexplicativo. Comprobamos primero si se enviaron datos, conectamos a la base de datos y ejecutamos la consulta. En cada paso creamos una variable llamada mensaje, la cual almacena información correspondiente al resultado de la operación. Este mensaje lo añadiremos al final del formulario para que le informe al usuario que sucedió:

5.- De forma opcional, si así lo deseamos, podemos estilizar un poco esta pequeña aplicación, creando un archivo estilos.css y añadiéndolo a la cabecera de consulta.php:

#formulario {

 width: 450px;
 margin: 0 auto;
 font-family: Arial;
 font-size: 11px;
 border: solid 1px black;
 padding: 20px;
 background-color: #fac519;

}

#formulario-consulta {

 margin-left: 150px;

}

#submit {

 font-family: inherit;
 font-size: 11px;

}

label {
 display: block;
}

#mensaje {

 font-family: Arial;
 font-size: 11px;
 padding: 3px;
 border: 1px dashed black;

}

#exito {

 background-color: #6ad11b;

}

#error {

 background-color: #f51414;

}

6.- Finalmente, nuestro consulta.php quedaría de la siguiente forma:



 
 
 
 Identificador de teléfonos móviles
 
 
 Debe ingresar un número para consultar.";

 }
 else {

 if(!$conexion = mysqli_connect("localhost", "root", "dumbass", "movil")){

 $mensaje = "No se pudo conectar a la base de datos.";

 }
 else {

 $numero = substr(trim($_POST['numero']), 0, 4);

 $consulta = "SELECT empresa FROM numeracion WHERE prefijo = ".$numero;

 if($resultado = mysqli_query($conexion, $consulta)) {

 if(mysqli_num_rows($resultado) == 0) {

 $mensaje = "No hay coincidencias para el número ".$_POST['numero'].".";

 }
 else {

 $datos = mysqli_fetch_array($resultado, MYSQL_ASSOC);

 $mensaje = "El número ".$_POST['numero']." pertenece a ".$datos['empresa']."";

 }

 }
 else {

 $mensaje = "Ocurrió un error al ejecutar la consulta. Inténtelo nuevamente.";

 }

 }

 }

 }
 ?>
 
 
 Ingrese el número a consultar:

Probamos y todo debiese funcionar sin problemas.

Y así de simple tenemos un identificador de números móviles para cuando lo necesitemos. Si nos fijamos, el proceso es bastante simple de implementar, por lo que los incentivamos a animarse, en solo minutos tendrán una muy útil aplicación para compartir.

Notas antes del cierre:

1.- Para nuestros amigos de fuera del país, lamentablemente este proceso sirve para Chile. Sin embargo, nos imaginamos que afuera debe ser bastante similar, por lo que los invitamos a compartir sus experiencias con otros usuarios.

Antes de terminar:

Y como siempre les recordamos que este tutorial ha sido:

Cualquier duda que puedan tener, los invitamos a dejar un comentario a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.

Staff CLH

Cómo crear una galería de imágenes para tu Web

Xabadu — Mon, 29 Mar 2010 18:41:56 +0000

Continuando con nuestra larga saga de tutoriales sobre diseño Web, en esta ocasión les traemos un pequeño desarrollo que sin duda puede ser de gran utilidad para nuestros sitios, en especial si queremos montar una especie de portafolio o una simple galería para desplegar imágenes.

En un esfuerzo conjunto e integración de tecnologías como PHP, jQuery, CSS, XHTML y un poco de MySQL, hoy veremos un paso a paso de como construir una simple galería de imágenes desde cero.

El detalle, como siempre, después del salto.

Cómo crear una galería de imágenes para tu Web

Como siempre, lo primero:

Detalles del tutorial

Tiempo aproximado de implementación: 60 minutos.

Dificultad: Intermedio.

Conocimientos requeridos: Idealmente nociones de PHP, XHTML, CSS, jQuery y bases de datos, especialmente si quieren personalizar el diseño final. De cualquier forma, todo será explicado paso a paso en caso de que deseen implementar tal como está acá.

Implementos necesarios:

Un servidor que pueda ejecutar archivos PHP. (Recomendamos XAMPP para Windows, Linux y Mac).

Un sistema gestor de bases de datos MySQL (En XAMPP viene uno incluido).

Opcionalmente un editor Web (Recomendamos Adobe Dreamweaver o Aptana Studio).

Un editor de imágenes (Recomendamos Adobe Photoshop).

La librería jQuery, que pueden obtener desde su sitio oficial.

Imágenes para montar en la galería. Para este caso utilizamos algunas de la galería de JoesSistah, las cuales están bajo una licencia Creative Commons.

Con eso claro, vamos, manos a la obra:

1.- Lo primero que haremos será crear una base de datos en nuestro MySQL y en el una tabla llamada imagen, la cual contendrá 4 campos de información:

CREATE TABLE 'clh'.'imagen' (
'id' INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
'titulo' VARCHAR( 50 ) NOT NULL ,
'descripcion' TEXT NOT NULL ,
'archivo' VARCHAR( 20 ) NOT NULL
) ENGINE = InnoDB CHARACTER SET utf8 COLLATE utf8_unicode_ci

Repasando nuestro código anterior, lo que hemos hecho ha sido crear una tabla llamada imagen, la cual contiene 4 campos:

id: Contendrá un número identificatorio para cada imagen, lo hemos dejado con auto increment para que cada vez que se inserte un nuevo registro aumente automáticamente.
titulo: Contendrá el título de la imagen.
descripcion: Contendrá la descripción de la imagen.
archivo: Contendrá el nombre del archivo y su extensión para luego llamarlo desde nuestra galería.

2.- Luego que hemos creado la tabla, insertaremos información de 4 imágenes:

INSERT INTO imagen( titulo, descripcion, archivo ) VALUES (
'Paisaje Numero 1', 'Imagen representativa de un paisaje con costa',
'1.jpg')

INSERT INTO imagen( titulo, descripcion, archivo ) VALUES (
'Paisaje Numero 2', 'Imagen representativa de un paisaje con nieve',
'2.jpg')

INSERT INTO imagen( titulo, descripcion, archivo ) VALUES (
'Paisaje Numero 3', 'Imagen representativa de un paisaje con una
luna en el fondo', '3.jpg')

INSERT INTO imagen( titulo, descripcion, archivo ) VALUES (
'Imagen abstracta', 'Representacion de una mariposa',
'4.jpg')

3.- Con eso debiésemos tener una tabla de la siguiente forma:

id	titulo	descripcion	archivo
1	Paisaje Numero 1	Imagen representativa de un paisaje con costa	1.jpg
2	Paisaje Numero 2	Imagen representativa de un paisaje con nieve	2.jpg
3	Paisaje Numero 3	Imagen representativa de un paisaje con una luna en el fondo	3.jpg
4	Imagen abstracta	Representacion de una mariposa	4.jpg

4.- Con nuestra tabla creada, y antes de empezar a codificar, haremos la preparación de nuestras imágenes. Para la galería, necesitaremos 3 tamaños de las mismas imágenes, 2 los fijaremos en imágenes distintas y 1 lo redimensionaremos vía CSS. Así que necesitaremos:

Tamaño normal de las imágenes para la vista completa. En este caso utilizamos 400px.
Tamaño reducido para los previews o thumbnails. En este caso utilizamos 150px.
Tamaño aún más reducido para los previews bajo la vista completa. En este caso utilizamos 75px. Este es el que ajustaremos vía CSS.

Los 2 primeros pueden hacerlo mediante su editor de imágenes favorito.

5.- Con todo aquello listo, procedemos a codificar. Nuestra galería contará de 2 archivos en formato PHP, uno donde desplegaremos un preview de las imágenes y añadiremos un pequeño efecto en jQuery para que estas aparezcan oscuras al cargar la página y que solo sean completamente visibles cuando el usuario pase el mouse por encima, y el otro funcionará como un visor de la imagen en tamaño completo, con su respectiva información y enlaces para imágenes siguientes y anteriores, así como otro preview de la misma galería en un tamaño más pequeño. Adicionalmente codificaremos un archivo en formato CSS para el estilo de la galería y un archivo en formato JS para nuestras funciones en jQuery. Así que resumiendo, los archivos que crearemos son:

index.php
visor.php
estilos.css
funciones.js

Vamos con el primero. Los comentarios como siempre, dentro del código:

index.php



	
		
		/* Incluimos la hoja de estilos, la libreria jquery y
                nuestra libreria de funciones */
                
		
		
		Galería de Imágenes
	
	

		
			Mi galería de imágenes
		query($consulta);

		// Desplegamos las imagenes con un enlace a su id
                while($filas = $resultado->fetch_array(MYSQLI_ASSOC)) {

		?>
		
   " alt="imagen" />

En resumen, lo que hemos hecho en nuestro index.php, yendo paso a paso:

Incluimos la hoja de estilo, la librería jQuery y nuestra librería de funciones.
Conectamos a la base de datos y obtenemos toda la información de las imágenes que tenemos almacenadas.
Desplegamos las imágenes con un enlace hacia el visor y pasamos como parámetro el id de la imagen para luego obtener más información.

Y ahora continuamos con el visor, en donde podremos mostrar las imágenes en tamaño completo y con más información:

visor.php

query($consulta);

$fila = $resultado->fetch_array(MYSQLI_ASSOC);

/* Luego conectamos a la BD y obtenemos la
primera y ultima id de imagen, para saber cuando
se trata de la ultima y/o primera imagen de la
galeria */
$consulta = "SELECT min(id) as minimo, max(id) as maximo FROM imagen";
$resultado = $conexion->query($consulta);

$datos = $resultado->fetch_array(MYSQLI_ASSOC);
?>




// Creamos el titulo de la pagina de acuerdo a la imagen
Galería de Imágenes - <?php echo $fila['titulo'];?>

// Incluimos la hoja de estilo y librerias





  
  
  
  
   
/* De lo contrario, mostramos una imagen
indicando que no hay nada antes */
  
  

  

/* Desplegamos la imagen actual en tamaño completo
con su respectiva descripcion */
  "
  alt="" />

/* Comparamos la id actual a la mayor id de la tabla
para saber si es la ultima imagen. Si no es igual
mostramos un enlace para la imagen siguiente */
  

  
  
  

/* De lo contrario, mostramos una imagen
indicando que no hay nada despues */
  
  

  
/* Establecemos un pequeño div para la
informacion de la imagen. Cuando el usuario
pase el mouse por encima, apareceran los datos
(titulo y descripcion) */
  Información de la imagen 

/* Este div mostrara la informacion de la imagen.
Por defecto lo dejaremos oculto mediante CSS y
solo se mostrara al pasar el mouse sobre el */
     
     Título: 
     Descripción: 
     
  

/* Al igual que en index, mostraremos la
galeria completa, solo que esta vez las
imagenes seran mas pequeñas */
 
	Mis otras imágenes
	query($cons);

	while($filas = $res->fetch_array(MYSQLI_ASSOC)) {

	?>

	
        " alt="imagen" />

Resumiendo el archivo anterior, lo que hicimos fue:

Obtuvimos la id enviada por parámetro para obtener la información de la imagen actual.
Obtuvimos la primera y última id de imágenes almacenadas para saber cuando tratamos con la primera y/o última imagen de la galería.
Cargamos la hoja de estilos y librerías.
Comparamos la id actual con la menor existente en la base de datos para saber si es la primera imagen de la galería. De ser así, mostramos una imagen que indica que no hay nada antes. De lo contrario, mostramos una imagen con un enlace a la imagen anterior.
Mostramos la imagen actual en tamaño completo.
Lo mismo que el punto 4, pero ahora con la última id y la imagen siguiente.
Creamos un div para la información de la imagen el cual permanecerá oculto hasta que el usuario pase el mouse por encima.

Ya con eso listo, nos falta declarar nuestras funciones en jQuery y nuestra hoja de estilos. Partiremos por las funciones:

funciones.js

$(function(){

/* Este es un efecto inicial sobre la galeria,
en el cual decimos basicamente que cuando
la pagina cargue, las imagenes se muestren mas
oscuras y que al pasar el mouse por encima
tomen su opacidad natural. Para esto utilizamos
las funciones animate, hover y stop de jQuery. */
  $('#galeria img').animate({
	"opacity" : .5
  });

  $('#galeria img').hover(function(){

	$(this).stop().animate({ "opacity" : 1 });

   }, function(){

	$(this).stop().animate({ "opacity" : .5});

  });

/* Repetimos el mismo efecto para la galeria
pequeña que mostramos en el visor */

  $('#galeria-small img').animate({
	"opacity" : .5
  });

  $('#galeria-small img').hover(function(){

	$(this).stop().animate({ "opacity" : 1 });

  }, function(){

	$(this).stop().animate({ "opacity" : .5});

  });

/* Ahora aplicamos la funcion para que cuando
un usuario pase el mouse por encima del div con id
masinfo, se despliegue la informacion del div info
del visor. Esto lo haremos mediante las funciones
hover, fadeIn y fadeOut de jQuery */

  $('#masinfo').hover(function(){
 	$('#info').fadeIn();
  }, function(){
        $('#info').fadeOut();
  });

});

En resumen, lo que hicimos aquí fue:

Creamos 3 funciones para que estén disponibles cuando la página cargue.
La primera agregará un efecto de opacidad sobre la galería que se desactivará cuando el usuario pose el mouse encima.
La segunda agregará el mismo efecto pero a la galería pequeña que añadimos al visor.
La tercera hará aparecer la información de la imagen cuando el usuario pose el mouse sobre el div ‘masinfo’ del visor y a su vez la hará desaparecer cuando mueva el mouse de ahí.

Y ahora nos queda la parte final, que es declarar los estilos:

estilos.css

body {
	background: black;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	width: 100%;
	margin: 0 auto;

}

#galeria{
	width: 800px;
	margin: 0 auto;
}

#galeria img{
	border: 1px solid white;
	padding: 1px;
	margin-right: 10px;
	margin-bottom: 10px;

}

#galeria-small{
	width: 800px;
	margin: 0 auto;
}
#galeria-small img{
	width: 100px;
	height: 100px;
	border: 1px solid white;

}

#contenedor{
	width: 800px;
	margin: 0 auto;
	padding-top: 10px;
}

#imgcompleta{
	border: 1px solid white;
}

a img{
	border: none;
}

/* Este es el div con informacion de
la imagen. Inicialmente cargara con
display:none para que no sea visto a menos
que el usuario pose el mouse encima */

#info {
	display: none;
}

Y con eso tenemos nuestro resultado final:

Primera vista de la galería

La imagen toma su opacidad natural al pasar el mouse por encima

Vista completa de la primera imagen

Información de la primera imagen al pasar el mouse por encima del div de información

Vista completa de imagen que tiene una previa y una siguiente

Vista completa de la última imagen

Antes de terminar, y comprendiendo que este tutorial ha sido largo, integramos una nueva característica a estos tutoriales:

Y con eso damos por terminado este tutorial, recordándoles como siempre que ha sido:

Esperamos que haya sido de utilidad para Uds. Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

Muchas gracias por leer y será hasta una próxima oportunidad.

Staff CLH

Cómo optimizar tu código en 10 pasos

Xabadu — Sun, 10 Jan 2010 22:10:05 +0000

Hace algún tiempo publicamos un artículo con tips sobre como optimizar nuestros sitios Web. En esa ocasión recalcamos el hecho de que hubo algunos puntos que se nos escaparon o que queríamos profundizar de mejor manera, por lo que probablemente haríamos una nueva edición en el futuro. Bueno, el momento ha llegado, aunque no precisamente continuando el mismo tema, si no que algo relacionado. Hoy les traemos una segunda parte enfocada netamente a código, compuesta de consejos y buenas prácticas que nunca están demás, especialmente en estos momentos que casi todo lo que vemos en Web envuelve, aunque sea en una pequeña parte, programación.

El detalle, como siempre, después del salto.

Cómo optimizar tu código en 10 pasos

Al no haber implementos necesarios (a excepción quizás de un editor Web), vamos de lleno al contenido:

El siguiente tutorial está compuesto de un conjunto de consejos y buenas prácticas a la hora de programar. A pesar de que está orientado a Web, algunos puntos son aplicables a otro tipo de lenguajes en los que se puede extrapolar.

1.- Reutilización de variables

En la programación, las variables en las que almacenamos datos tienen lo que llamamos un “ciclo de vida”: Desde su nacimiento (el momento en el que las declaramos) hasta su muerte (última línea en que han sido utilizadas), toman distintos valores y forman parte de una serie de procesos que nos llevan a obtener resultados.

Posterior a su último uso, estas variables permanecen sin prestar utilidad. A pesar de que muchos lenguajes tienen implementada una característica conocida como recolector de basura, el cual se encarga de desocupar o limpiar todas las áreas de memoria que se encuentran utilizadas pero inactivas, en muchas ocasiones esto no ocurre o existe un periodo durante la ejecución de un programa en que seguimos creando variables y vamos ocupando más y más áreas de memoria, lo que adicionalmente nos puede llevar a confusión con el nombre de las mismas.

Es por esto que es recomendable, si vemos que hemos dejado de utilizar una variable en particular, reutilizarla, siempre y cuando no afecte el código donde las usamos originalmente. Por ejemplo, en vez de usar esto:

i=0;
while(i<10)
{
    echo 'Hola mundo';
    i++;
}

j=0;
while(j<10)
{
    echo 'Adios!';
    j++;
}

Podemos utilizar esto, obteniendo el mismo resultado de manera más óptima:

i=0;
while(i<10)
{
    echo 'Hola mundo';
    i++;
}
while(i>0)
{
    echo 'Adios!';
    i--;
}

No solo reutilizamos la misma variable para ejecutar ámbas tareas, sino que a su vez optimizamos el código, mejorando la ejecución final.

Claramente es un ejemplo bastante básico, pero nos sirve para ilustrar el punto. A medida que nuestras aplicaciones van creciendo, necesitamos manipular una mayor cantidad de variables, por lo que puede volverse algo confuso de manejar. La reutilización nos sirve para tener un mejor control de lo que tenemos y al mismo tiempo nos permite hacer nuestro código mucho más simple.

2.- Nombrar como corresponde

Escribir código es de cierta forma contar una historia. Desde la declaración o nacimiento de las variables, hasta lo que hace cada una de ellas hasta el final, tenemos actos claros y definidos que permiten a cualquiera con conocimientos de programación poder seguir la historia del principio hasta el término. Y como tal, es importante tener consistencia en lo que escribimos, con respecto al nombre que le damos a las variables y funciones que utilizamos.

En lo anterior recalcamos un hecho muy importante: todo el código que escribamos será revisado por alguien. Ya sea otros programadores o bien nosotros mismos más adelante cuando queramos optimizar o reutilizar, siempre habrá alguien que deba hacer la traza del código y ver que hace cada cosa. Es por esto que es importante que mantengamos concordancia con respecto a los nombres y seguir una lógica que nos permita mantener un orden y claridad a futuro.

Por ejemplo, si recibimos los datos de un usuario a través de un formulario, es bueno que las variables a las que asignemos valores tengan un prefijo definido (por ejemplo usuario). De esta forma, cuando nos encontremos 30 líneas más abajo y necesitemos recurrir a ellas, ya sabremos bajo que estructura trabajamos y minimizaremos el margen de error.

Existen 2 convenciones definidas para nombrar elementos a la hora de programar, que si bien no es obligación usarlas, si pueden servir en demasía:

camelCase: En esta, la primera letra de cada palabra nueva lleva mayúscula, a excepción de la primera. Ej: $usuarioClave o function devuelveDatos.
underscore: En la cual cada palabra es separada por un underscore o guión bajo. Ej: $usuario_clave o function devuelve_datos.

Al programar somos libres de definir nuestras propias reglas para nombrar. No obstante, si estamos realizando trabajo colaborativo con otros programadores, es bueno utilizar alguna de las convenciones aceptadas, con el fin de estandarizar el trabajo y hacer todo más entendible para los demas. Lo importante es definir una estructura y un estándar que nos permita hacer más uniforme nuestro código y de esta forma hacerlo mucho más entendible.

3.- Agrupar el código

Si tomamos cualquier programa que hayamos escrito en el pasado, podremos apreciar que dentro de el, hay pequeñas secciones de código relacionadas entre sí por las funciones o tareas que realizan y que pueden o no tener directa relación con lo que viene líneas más abajo. Por un tema de orden, y para facilitar la documentación (punto que veremos más adelante) es bueno ir agrupando estas secciones y separarlas del resto del código con una línea en blanco. De esta forma, cada vez que necesitemos modificar una porción del programa será mucho más sencillo aislarlas y trabajar sobre ellas, ya que sabremos exactamente en donde empieza y donde termina esa parte del programa.

Por ejemplo, en un programa donde recibimos datos a través de un formulario, los insertamos en una base de datos y desplegamos el resultado al visitante:

$usuario_id = $_POST["usuario_id"];
$usuario_clave = $_POST["usuario_clave"];
$usuario_correo = $_POST["usuario_correo"];

$conexion = mysql_connect("localhost", "usuariobd", "clavebd");
mysql_select_db("mibd");

$consulta = "INSERT INTO usuarios VALUES('$usuario_id', '$usuario_clave',
'$usuario_correo')";
$resultado = mysql_query($consulta);

echo 'El usuario se ha creado satisfactoriamente';

En el código anterior podemos ver claramente que hace cada parte del programa: Primero recibimos los datos desde un formulario, luego hacemos la conexión y selección de base de datos, posterior a eso ejecutamos la consulta y finalmente mostramos el mensaje de éxito al usuario. Claro y limpio. Si al momento de ejecutar encontramos un error en una de las partes será mucho más sencillo volver a ella, ajustar y volver a probar.

4.- Indentar el código

Probablemente los 2 errores más clásicos que obtenemos al programar son la ausencia del punto y coma ( ; ) al terminar una sentencia y la falta de una llave de apertura o cierre en una iteración.

Sobre el primero no es mucho lo que se pueda hacer, más que fijarse, pero sobre el segundo una de las causas más comunes de la ocurrencia de este error es la falta de indentación del código, lo que muchas veces nos hace confundir una llave de otra iteración con la que estamos escribiendo actualmente, lo que puede llevar a 2 situaciones, o bien el código no se ejecuta bien, o la iteración se ejecuta como sub-sección de otra, lo que puede llevar a resultados aún peores.

Adicional a lo anterior, y tal como hemos remarcado en casi todos los puntos anteriores: orden. Siempre, y repito, siempre deberemos releer el código en algún momento y si bien cuando lo escribamos sabremos perfectamente que hace cada parte, no será así al tiempo después, por lo que mientras más ordenado y estructurado lo mantengamos, más sencillo será volver a trabajar sobre el.

Así que recapitulando, esto no es correcto:

while(i<10)
{
if(x == 'Letra equis')
{
echo 'Es la letra equis!';
}
else
{
echo 'No es la letra equis!';
}
}

Esto si es correcto:

while(i<10)
{
    if(x == 'Letra equis')
    {
        echo 'Es la letra equis!';
    }
    else
    {
        echo 'No es la letra equis!';
    }
}

De esta forma, a primera vista ya sabemos que el if y el else se ejecutarán dentro del while y cada vez que se repita la iteración, queda todo más ordenado y hasta estéticamente se ve mejor.

5.- No repetir, menos repetir y sobretodo no repetir

Este es un error bastante común que todos cometemos, especialmente cuando empezamos a programar y de forma inconsciente. Es natural que dentro de nuestros programas escribamos una, y otra, y otra vez el mismo código, o que bien en distintos programas de una misma aplicación (por ej. en distintas páginas PHP que forman parte de un mismo sistema) repitamos el mismo proceso o tengamos líneas repetidas.

La gracia de la programación es justamente evitar eso y nos entrega una serie de herramientas a tener en consideración. Tal como utilizamos ciclos para ejecutar una misma tarea varias veces, siempre es posible parametrizar un proceso. Solo bastante notar que es lo que estamos repitiendo, descubrir o definir el algoritmo, buscar los parámetros y formar una función a la que podamos llamar que haga la tarea independiente de los valores entregados.

Por otro lado, ¿tenemos un pié de página que se repite en cada página del sitio?, ¿un menú fijo que aparece en cada sección?. Hagamos uso de los includes y requires que PHP nos entrega, definamos funciones y plantillas que podamos reutilizar una y otra vez sin problemas. Una de las mayores bellezas de la programación es justamente esa: reutilizar. Podemos adaptar un mismo trozo de código para múltiples situaciones, haciendo la ejecución mucho más rápida y armónica.

6.- Orden en sentencias SQL

Esta es una costumbre personal que adopté cuando empecé a hacer mis primeras armas en programación Web, por lo que fue una agradable sorpresa ver que estaba considerado como una buena práctica, y por eso hoy la remarcamos acá.

Las sentencias SQL pueden llegar a ser largas, y por ende complejas de leer, especialmente si están insertas en una maraña de código PHP y/o HTML, por lo que debemos hacer lo posible para mantener un orden dentro de ellas y así hacerlas más fáciles de revisar en caso de errores. ¿A qué nos referimos con esto?, en particular a un punto: Poner en mayúscula las palabras reservadas de SQL. Esto nos permitirá siempre saber a primera vista que es lo que se hace y no nos llevará a confusión en caso de que alguna tabla o variable con la que estemos trabajando tenga un nombre similar a ellas. Por ejemplo:

SELECT auto_patente, auto_marca, auto_color, auto_id_propietario,
propietario_nombre, propietario_telefono FROM auto a,
propietario p WHERE auto_id_propietario = propietario_rut
ORDER BY auto_patente DESC

Es mucho más sencilla de leer que:

select auto_patente, auto_marca, auto_color, auto_id_propietario,
propietario_nombre, propietario_telefono from auto a,
propietario p where auto_id_propietario = propietario_rut
order by auto_patente desc

Cuando estemos revisando código en texto plano a las 3 AM buscando el fatídico error agradecerán destacar las palabras reservadas, las cuales si se fijan, establecen una separación entre las distintas partes de la consulta.

7.- No reinventar la rueda

Famosa frase que más de alguno ha escuchado anteriormente. Al programar, muchas veces tenemos la mala costumbre de querer hacer todo y confundimos la propiedad sobre una aplicación con generar el 100% del código. Nada más alejado de la realidad. Una de las gracias de esta gran red llamada Internet (¿Inter.. net?) es la cantidad de recursos que tenemos a nuestra disponibilidad, desde clases a trozos de código, es muy probable que muchas de las funcionalidades que necesitamos implementar ya hayan sido desarrolladas y puestas a disposición para utilizarlas, así que ¿por qué no aprovecharlas?.

No tiene nada de malo, y en realidad es muy ventajoso. No perdamos tiempo reinventado la rueda, y mejor veamos que podemos construir a partir de ella. No hay que tener dudas sobre incorporar librerías externas a nuestros desarrollos, siempre que respetemos cualquier licencia bajo las que hayan sido liberadas obviamente. Esto nos permitirá ahorrar un tiempo considerable que podemos dedicar a mejorar otras partes más críticas de la aplicación y mejorar los tiempos totales del desarrollo, que es algo que siempre debemos vigilar.

Lo más importante de recordar es que ser un buen programador no significa hacer todo desde cero, si no que tener la habilidad de identificar que integraciones podemos hacer con herramientas existentes y optimizar así el tiempo total de trabajo.

8.- Codificar genéricamente

Un par de puntos más atrás hablábamos justamente de no repetir código. Este punto va precisamente de la mano. En muchos desarrollos en los que trabajemos a través del tiempo, veremos que es necesario desarrollar funcionalidades similares a las que hemos trabajado en el pasado, por lo que un buen consejo es hacer desarrollos genéricos con el fin de poder reutilizarlos y ahorrar tiempo.

Por ejemplo, si inicialmente hacemos un sistema que incluya un registro de usuarios y en otro sistema necesitamos de lo mismo, ¿por qué no desarrollar una función genérica que reciba los parámetros necesarios para crear el usuario y así reutilizar bajo distintas situaciones?. De tal forma son muchos los casos en los que podremos ver que es posible reutilizar código de desarrollos anteriores, así que ahorremos tiempo y preparemos código estándar para utilizar.

9.- Revisar código de otros programadores

Hace algún tiempo tuve la fortuna de trabajar como ayudante en un curso de programación gráfica en la Universidad, lo que me dió la oportunidad de revisar código de otros desarrolladores todas las semanas, una experiencia a la que todos deberíamos someternos en algún momento.

Todos pensamos de forma distinta, y como tal, todos encontramos distintas soluciones o distintas formas de ejecutar una solución en particular, por lo que siempre es bueno revisar código de otros programadores, ya sea en librerías que descargamos o en sistemas que tengamos la posibilidad de ver. Eso nos ampliará la visión que tenemos sobre un lenguaje en particular y muchas veces nos permitirá ver formas más óptimas que las nuestras de codificar, lo que podremos incorporar a futuro.

De la mano con lo anterior, siempre es una buena práctica plantearse nuevos desafíos al momento de hacer un desarrollo comparado con lo que hemos hecho anteriormente, y revisando código de otros programadores es una buena forma de plantearselos.

10.- Documentar como un campeón

Uno de los puntos más importantes, sino el más importante, de esta guía. No podemos enfatizar lo suficiente la importancia de documentar el código y sobretodo de hacerlo correctamente.

Si hay un punto en común de casi todo lo que vimos hoy, es el de facilitar la revisión del código, ya sea para otros desarrolladores o para nosotros mismos a futuro, y la documentación es fundamental en aquella tarea. Comentar que hace cada función, que rol cumple una variable en especial o porque hicimos algo de cierta manera será clave cuando los recuerdos no sean tan frescos en el futuro y necesitemos hacer modificaciones sobre el código.

Adicionalmente a lo anterior, no es bueno exagerar. Si bien mientras más documentado esté el código será mejor, es bueno evitar comentarios obvios. Por ejemplo, si tenemos un ciclo que lo único que hace es mostrar el valor de una variable, no es necesario comentarlo, ya que a primera vista se puede ver sin problemas lo que hace.

Así que en resumen es eso, comentar, pero ser criterioso a la hora de hacerlo. A final de cuentas es por nuestro propio bien, así que estimemos de forma correcta cuando y como hacerlo.

Y con eso terminamos esta sencilla guía sobre 10 consejos para optimizar nuestro código, la que esperamos que sea de utilidad para todos aquellos dedicados a la programación o que buscan aprender más al respecto.

Como siempre, les recordamos que este tutorial ha sido:

Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

Muchas gracias por leer y será hasta una próxima oportunidad.

Staff CLH

Cómo crear un feed RSS desde cero

Xabadu — Wed, 06 Jan 2010 22:21:34 +0000

En varios artículos anteriores hemos discutido y detallado la importancia que tienen los feeds para nuestros sitios Web, permitiéndonos entregarles nuevas formas a los usuarios para que se enteren de las actualizaciones de contenido.

Y a pesar de que hoy la mayoría de los sistemas que implementamos (como Wordpress) ya vienen con un feed creado e implementado, listo para validar, siempre es posible crear uno de cero, o bien querer personalizar más a fondo lo que ya existe.

Hoy, en CLH, mediante un sencillo tutorial les enseñaremos a crear un feed RSS desde cero, ya sea con contenido estático o dinámico.

El detalle, como siempre, después del salto.

Cómo crear un feed RSS

Como siempre, lo primero:

Implementos necesarios:

Un sitio Web con contenido, ya sea estático o dinámico.
Un editor Web. Si bien no es necesario y podemos codificar mediante bloc de notas, si es recomendable. En CLH utilizamos Adobe Dreamweaver, el cual pueden obtenerlo desde el siguiente enlace.

Procedimiento:

Para crear un feed RSS, es necesario codificar un archivo en formato XML, el cual contiene las etiquetas necesarias para interpretar y desplegar el contenido en el formato especificado, al cual accederán los usuarios. Este archivo podemos dejarlo nativo en XML, o bien incrustarlo dentro de PHP, como veremos en ámbos casos a continuación.

Para esto realizaremos 2 procesos. En primera instancia crearemos un feed estático, a partir de contenidos que tengamos disponibles en nuestro sitio. Para este caso tomaremos las páginas de información estáticas que están incluídas en CLH (quiénes somos, licencia clh, etc.).

Posterior a eso repetiremos la tarea, pero esta vez recuperaremos contenidos desde una base de datos para meterlos al feed, ideal si están publicando a través de un CMS o si obtienen contenidos directamente desde una base de datos.

Así que sin más, vamos, manos a la obra:

1.- Creando un feed RSS estático

Esta opción es válida solamente si tenemos contenido estático en nuestro sitio, lo cual si bien no se justifica mucho, puede ser una funcionalidad útil para entregarle a los visitantes.

Para esto, es necesario que creemos un archivo XML en nuestro editor Web, y comenzamos a codificar:

...

Las primeras 2 líneas que hemos añadido corresponden a la definición de la versión y codificación de xml (con el fin de que valide correctamente debemos añadir la versión, en cuanto a la codificación es opcional pero nunca está demás) y la versión de RSS que utilizará el archivo que estamos creando. Actualmente la mayoría de los sitios ofrecen suscripciones tanto para RSS 1.1 como 2.0, pero con el último es más que suficiente. Al final cerramos la etiqueta rss para dar por finalizado el documento.

A continuación de lo anterior, es necesario que todo lo relativo al feed (tanto la información como el contenido), sea incluído dentro de las etiquetas , lo cual lo agregaremos justo seguido del código anterior, es decir:

...

Y ahora, dentro de las etiquetas channel iremos añadiendo la información del feed, tal como se ve a continuación:




    Feed de páginas estáticas de CLH
    http://www.comolohago.cl
    Si se puede, te lo enseñamos
    ...

Y finalmente, a continuación de la información, agregamos lo relativo al contenido que desplegaremos en el feed, esto lo haremos repitiendo las mismas etiquetas que usamos anteriormente, pero encerradas entre e :




    Feed de páginas estáticas de CLH
    http://www.comolohago.cl
    Si se puede, te lo enseñamos
    
        Quiénes Somos
        http://www.comolohago.cl/acerca/
        Conoce al equipo de CLH
    
    
        Licencia CLH
        http://www.comolohago.cl/licencia-clh/
        Lo que permitmos, y lo que no
    
    
        Colabora
        http://www.comolohago.cl/colabora/
        Ayúdanos a enseñar
    
    
        Peticiones
        http://www.comolohago.cl/peticiones/
        ¿Algo que quieras ver?

Lo anterior lo guardamos con cualquier nombre y con extensión xml, lo subimos y al abrirlo en el navegador podremos ver que nuestro feed estático está completamente listo:

Feed estático visualizado mediante Firefox

2.- Creando un feed RSS dinámico

Ya. Creamos nuestro feed estático, nos demoramos solo unos minutos, nos dimos cuenta que era sencillísimo y estamos listos para conquistar el mundo… ¿no?. Pues bueno, aún no. Tal como indicábamos en el punto anterior, un feed estático no tiene mucha gracia, ya que debemos añadir cada nuevo contenido de forma manual y termina siendo mucho trabajo, o puede que en más de alguna ocasión se nos olvide actualizar. Debido a esto, si tenemos un sitio donde el contenido se obtiene de forma dinámica desde una base de datos, es posible adaptar eso a nuestro feed y que la nueva información se vaya agregando a medida que se genera. Para esto, trabajaremos tanto con XML como PHP, en una combinación rimbombante y circumbirúmbica que sacará chispas y nos convertirá en los chicos más populares de la secundaria.

Para esto, consideraremos que tenemos una base de datos, la cual tiene una tabla de noticias con un campo título, un campo enlace, un campo detalle y un campo de fecha de las noticias, tal como vemos a continuación:

titulo	enlace	detalle	fecha
Dexter va a la luna	http://www.ejemplo.com/1.php	Dexter se fue a la luna ayer y aun no vuelve	2010/01/01
Topher es Batman	http://www.ejemplo.com/2.php	Ciudad Gotica tuvo una sorpresa ayer cuando...	2010/01/02
Jorge Nitales compra Google	http://www.ejemplo.com/3.php	Luego de interminables negociaciones se supo que...	2010/01/03
Goten saca un disco de rancheras	http://www.ejemplo.com/4.php	Su sexto disco de estudio fue lanzado...	2010/01/04
Locke3K sigue subiendo en las encuestas	http://www.ejemplo.com/5.php	De acuerdo al estudio realizado...	2010/01/05

Entonces, lo primero que debemos hacer es crear un archivo PHP en nuestro editor Web, el que tendrá una estructura como la que sigue:




    Noticias de mi fantabulenial sitio Web
    http://www.ejemplo.com
    Las mejores noticias de Internet

Como podrán ver, en el código anterior dejamos una sección en blanco, entre las etiquetas . Esta parte del código es donde nos conectaremos a la base de datos, rescataremos las noticias y las desplegaremos dinámicamente.

Para esto, primero haremos la conexión a la base de datos. Como buena práctica utilizaremos DEFINE para, valga la redundancia, definir los datos de conexión, pero si quieren pueden saltarse esta parte y ejecutar la función directamente:

DEFINE ('USUARIO_BD', 'el nombre de usuario de la bd');
DEFINE ('CLAVE_BD', 'la clave de acceso a la bd');
DEFINE ('HOST_BD', 'el servidor de la bd');
DEFINE ('NOMBRE_BD', 'el nombre de la base de datos');

Y ahora hacemos la conexión:

$conexion = mysql_connect(HOST_BD, USUARIO_BD, CLAVE_BD) or
die ('No se pudo conectar a la BD');
mysql_select_db(NOMBRE_BD) or die ('No se pudo seleccionar
la BD');

Ejecutamos la consulta:

$consulta = "SELECT * FROM noticias ORDER BY fecha DESC";
$resultado = mysql_query($consulta) or die ('Error al
ejecutar la consulta');

Ahora que hemos recobrado todas las noticias desde la base de datos de forma ordenada por la fecha, obteniendo primero las más nuevas, las pasaremos a un array para escribirlas en el formato especificado de XML, de la siguiente forma:

while ($fila = mysql_fetch_array($resultado, MYSQL_ASSOC){
    echo '
                 '.$fila['titulo'].'
                 '.$fila['enlace'].'
                 '.$fila['detalle'].'
          ';
}

Con lo anterior, ejecutamos un ciclo que pasará a un array de forma asociativa (gracias al parámetro MYSQL_ASSOC, el cual nos permitirá acceder a los registros en el array con el mismo nombre que tienen en la tabla de la base de datos) cada noticia hasta que se acaben y creará un nuevo ítem con los respectivos valores para incluir en el feed.

Con eso estamos casi listos, el último detalle es añadir un pequeño encabezado al comienzo del documento, indicando que estamos ejecutando contenido XML para un mejor reconocimiento al momento de ejecutar el script completo, esto lo hacemos añadiendo al comienzo:

Con esto, nuestro código completo queda de la siguiente forma:






    Noticias de mi fantabulenial sitio Web
    http://www.ejemplo.com
    Las mejores noticias de Internet


                  '.$fila['titulo'].'
                  '.$fila['enlace'].'
                  '.$fila['detalle'].'
             ';
    }
?>

¡Y listo!. Tenemos nuestro feed RSS dinámico, el cual añadirá los resultados obtenidos desde la base de datos y cada vez que publiquemos contenido nuevo se actualizará automáticamente.

Y ahora, ¿a conquistar el mundo?. Aún no. Antes de terminar:

3.- Consejos útiles

Algunos tips que nunca están demás:

Validar el feed

Antes de lanzar nuestro feed al público, es bueno asegurarnos que funcione de forma correcta y que no hayamos cometido errores de codificación. Para esto podemos validar mediante varios servicios, como por ejemplo:

Solo añadimos la URL de nuestro feed y validamos.

Publicar el feed

Existen servicios que nos permiten publicar nuestro feed y ofrecen una serie de funcionalidades bastante interesantes, como añadir publicidad o estadísticas sobre nuestros suscriptores. El más conocido y utilizado sin duda que es Feedburner, en el cual en solo instantes podremos publicar nuestro feed sin problemas.

Mostrarle a los usuarios que existe un feed en el sitio

Si en este preciso instante miran la barra de direcciones de su navegador, podrán ver que hay un ícono de color naranjo:

Este ícono indica que el sitio cuenta con un feed RSS al cual se pueden suscribir. ¿Cómo añadirlo? Muy sencillo, solo debemos agregar las siguientes líneas entre las etiquetas y de cada página en la que queramos que aparezca, tal como si fuese un favicon:

Simple, ¿no?

Personalizar el feed

Los detalles sin duda que marcan la diferencia en la mente de los usuarios. Entonces, ahora que aprendimos a hacer un feed desde cero, ¿por qué no jugar un poco y hacerlo más personalizado?. Solo con modificar pequeñas partes del código podemos desplegar cierto tipo de información en nuestro feed (por ejemplo comentarios si existiesen), o bien limitar el número de artículos a mostrar, o hacer un feed independiente para cada persona que escriba en el sitio y así cada lector siga a su autor favorito.

Las posibilidades son muchas, solo hay que experimentar.

Y con esto damos por terminado este tutorial en el que hemos cubierto el proceso de creación de un feed RSS desde cero. Como pueden ver, solo toma unos breves minutos y la dificultad es baja, por lo que los animamos a que lo intenten y nos cuenten su experiencia.

Antes de terminar, les recordamos que como siempre, este tutorial ha sido:

Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.

Staff CLH

Cómo implementar rating de comentarios en Wordpress

Xabadu — Wed, 14 Oct 2009 21:52:38 +0000

Este tutorial corresponde a una petición realizada via Twitter

Hace algún tiempo nos llegó una petición vía Twitter sobre como implementar una funcionalidad para poder votar, de forma positiva o negativa, los comentarios realizados por los lectores a un artículo en particular en Wordpress. En vista de que era algo que habíamos añadido cuando lanzamos la versión 2.0 de CLH, decidimos cubrir el proceso a partir de nuestra propia experiencia.

Hoy se los presentamos, mediante un sencillo tutorial como siempre, después del salto.

Cómo implementar rating de comentarios en Wordpress

Como siempre, lo primero:

Implementos necesarios:

Wordpress.
El plugin Comment Karma para Wordpress (Pueden conseguirlo en el siguiente enlace).

Procedimiento:

1.- Lo primero que haremos, una vez descargado el plugin, es descomprimirlo y subir su contenido al directorio de plugins en nuestro FTP. (Usualmente dentro del directorio wp-content/plugins/).

2.- A continuación, dentro de nuestro tablero en Wordpress, vamos a la sección Plugins y buscamos Comment Karma para hacer click en Activar.

Hasta esta parte, todo muy bien y sencillo. Si hemos subido el plugin correctamente, no debiesemos tener problemas con la activación. Cualquier tipo de error o advertencia que aparezca, probablemente se deberá a que no hemos subido el contenido completo de este, por lo que recomendamos repetir los pasos 1 y 2.

Sin embargo, aún no podemos cantar victoria, ya que solo hemos terminado la primera parte. La 2da, la cual es un poco más compleja, consta de realizar una edición en el loop de comentarios de Wordpress, lo cual intentaremos explicar de la forma más detallada posible, así que primero:

¿Qué es el loop?

Wordpress dentro de su estructura, trabaja con una serie de funciones y clases las cuales son llamadas desde las distintas partes de este CMS. Sin embargo, hay 1 que es esencial y que de cierta forma podría ser considerada como la columna vertebral de esta aplicación y que trabajan bajo un concepto conocido como el loop. Este, es el encargado de desplegar todos los artículos existentes en un sitio, así como sus comentarios relacionados mediante el llamado de una serie de funciones. Su nombre se debe a que trata de una ejecución repetitiva de las mismas funciones, la cual será equivalente al número de artículo que existan de forma sucesiva dependiendo de un parámetro en particular para ordenar (por ej. fecha)

En el caso de los comentarios, también se ejecutan bajo el loop, el cual se encarga de desplegar toda la información concerniente a un comentario en particular, todas las veces según comentarios existan.

Dependiendo de los ajustes que hayamos realizado, o que vengan dentro de la plantilla que hemos implementado, el loop de comentarios desplegará distintas cosas como por ejemplo:

Autor del comentario.
Fecha del comentario.
Contenido del comentario.

Adicionalmente, de estar fijado así, es posible que desplieguen los famosos gravatars o numeración de los comentarios.

Esta es la sección que debemos editar, preocupándonos de añadir una llamada a la función que se implementa mediante el plugin que activamos anteriormente.

3.- Para esto, primero que todo, debemos editar el header de nuestra plantilla, lo cual podemos hacerlo a través de la sección Aspecto > Editor en nuestro tablero de Wordpress y añadir la siguiente línea:

Reemplazando obviamente www.nuestrodominio.com por el correspondiente a nuestro sitio. Guardamos la edición.

4.- Luego, debemos ubicar el archivo correspondiente a los comentarios en nuestra plantilla. Dependiendo de la que estemos usando es donde estará. Por ejemplo, en el caso de la plantilla utilizada en CLH, se trata de un archivo incluido en el directorio wp-includes llamado comments-template.php. Sin embargo, como les indicamos, esto puede variar dependiendo de la plantilla que utilicen en su sitio.

Una buena forma de ubicar el loop de comentarios, es buscar la siguiente función:

foreach ($comments as $comment)

Ahí es donde se da inicio a la serie de llamadas que formarán el despliegue de cada comentario.

Así que una vez que la ubiquemos, debemos preocuparnos de insertar una llamada a una nueva función que corresponde a:

ck_display_karma();

El lugar de inserción de la función dependerá de la parte de los comentarios donde queramos desplegar la votación de estos. Por ej., en el caso de este sitio, decidimos hacerla a continuación de la llamada para desplegar el nombre del autor del comentario.

Con eso, contamos con rating de comentarios en nuestros sitios en base a Wordpress, listo para utilizar, lo cual combinado con otras funcionalidades, puede volverse algo tremendamente útil para administrar los comentarios de los visitantes.

Antes de terminar, les recordamos que, como siempre, este tutorial ha sido:

Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.

Staff CLH

Cómo crear archivos Excel desde PHP – Parte 2

Xabadu — Thu, 24 Sep 2009 22:41:43 +0000

Hace algún tiempo, Jorge Nitales nos enseñaba como exportar a Excel desde PHP, mediante un sencillo método en el que mediante el envío de cabeceras era posible formatear un documento para ser leído desde Excel.

Como en CLH estamos en constante investigación para presentar nuevos métodos y alternativas para hacer las cosas, hoy les traemos, mediante un sencillo tutorial una nueva forma para que puedan generar archivos en formato Excel de forma rápida y con una flexibilidad increible en cuanto a la configuración del documento.

El detalle, como siempre, después del salto.

Cómo crear archivos Excel desde PHP

En el tutorial pasado, Jorge Nitales nos enseñaba un proceso en el cual, mediante el uso de cabeceras, hacíamos una exportación directa de un archivo en formato HTML, el cual era convertido y enviado a quien ejecutaba el código en formato xls.

Si bien ese método presenta ventajas notables, como principalmente su rapidez y facilidad de generación de los archivos, así como la sencillez de la organización de la información del documento (ya que podíamos hacer usos de tablas para tabular los datos), por otro lado se presentan las desventajas de que el archivo creado no es realmente un formato propio de Excel y por ende presenta una pequeña advertencia al abrirlo (aunque funciona sin problemas, puede presentar alguna mala experiencia para los usuarios), lo cual puede traer algunos problemas, especialmente si estamos trabajando con alguna clase en PHP para leer estos archivos generados.

Hoy presentaremos un nuevo método, en el cual utilizaremos un paquete de PEAR, el cual está diseñado especialmente para crear archivos de este tipo y nos proveerá de una serie de métodos para darle formato hasta el más mínimo detalle del documento, permitiéndonos incluso bloquear y proteger las hojas y/o celdas.

Antes de empezar:

¿Qué es PEAR?

PEAR es un conjunto de componentes reutilizables especialmente diseñado para el uso con PHP. Es posible descargar e instalar una serie de paquetes pertenecientes a el, los cuales a su vez nos proveen una serie de clases para realizar distintos tipos de operaciones, ya sea de manipulación de cierto tipo de archivos hasta procesos de imágenes, red e incluso integración de distintos servicios Web.

Desde la versión 4.3.0 de PHP, PEAR viene incluido. De lo contrario es necesario instalarlo de forma manual.

Con esa explicación, vamos a lo que necesitamos:

Implementos necesarios:

Un servidor Web que ejecute archivos en PHP. Una buena opción es la instalación de XAMPP.
PEAR. Si nuestra versión de PHP es superior a la 4.3.0, lo tendremos instalado por defecto. De lo contrario cubriremos el proceso más adelante.
El paquete Spreadsheet Excel Writer de PEAR, que pueden encontrarlo aqui. Cubriremos su instalación más adelante.
Alguna versión de Excel para leer los archivos generados. Idealmente 2003 o superior.
Un editor Web o entorno de programación para PHP.

Nota: Si están trabajando en algún hosting y no están seguros de si está instalado PEAR o el paquete a utilizar, les recomendamos ponerse en contacto con su proveedor de servicios y ver la factibilidad de que lo instalen.

Con eso claro, manos a la obra:

Procedimiento:

1.- Si ya contamos con PEAR instalado en nuestro servidor, podemos adelantarnos estos pasos. De lo contrario, debemos ir al directorio donde tenemos la instalación de PHP (Si instalamos Xampp, sería c:\xampp\php\).

2.- Dentro de ese directorio encontraremos un archivo llamado go-pear.bat

3.- Ejecutamos el archivo y se iniciará la instalación de PEAR. Si al iniciar nos aparece algún Warning o Error, es muy probable que ya contemos con PEAR instalado en nuestro sistema, por lo que no será necesario llevar a cabo el proceso.

4.- Una vez que termine la instalación, debemos proceder a la instalación del paquete Spreadsheet Excel Writer. Para eso vamos a Menu Inicio > Ejecutar y escribimos cmd para abrir Símbolo de sistema.

5.- Con Símbolo de sistema abierto, nos trasladamos al directorio de PHP, el mismo donde hicimos la instalación de PEAR y escribimos el siguiente comando:

pear install Spreadsheet_Excel_Writer-0.9.1

6.- Al ejecutar el comando anterior, se instalará el paquete:

7.- Con esto ya tenemos nuestro paquete instalado y podemos empezar a programar. Para esto abrimos nuestro editor Web o entorno de programación para PHP y creamos un nuevo archivo al que llamaremos ejemplo.php.

8.- Generaremos un código como el siguiente (comentarios en negrita, cursiva y entre /* y */):

/* Llamamos a la clase que ejecutará la exportación a Excel. Esta clase está guardada en el directorio que tenemos habilitado por defecto en nuestro php.ini para los include y require. Si no hemos modificado el php.ini no debemos cambiar nada acá */
require_once ‘Spreadsheet/Excel/Writer.php’;

/* Creamos un nuevo objeto de tipo Spreadsheet_Excel_Writer que refleja un nuevo libro de Excel */
$libro = new Spreadsheet_Excel_Writer();

/* Definimos mediante el método send que el archivo debe enviarse al usuario al ejecutar el código y le damos el nombre que tendrá. En este caso ejemplo.xls */
$libro->send(‘ejemplo.xls’);

/* Definimos una variable y se la asignamos a nuestro objeto como una hoja del mismo mediante el método addWorksheet, el cual lleva como parámetro el nombre de la hoja. Tal como si crearamos una en un libro normal de Excel */
$hoja =& $libro->addWorksheet(‘Hoja de prueba’);

/* Escribimos los datos en la hoja mediante el método write, el cual toma como parámetros el número de fila, número de columna y el contenido. Si es texto debe ir entre comillas como una cadena. */
$hoja->write(0, 0, ‘Nombre’);
$hoja->write(0, 1, ‘Apellido’);
$hoja->write(1, 0, ‘Maria’);
$hoja->write(1, 1, ‘Lopez’);
$hoja->write(2, 0, ‘Eulalio’);
$hoja->write(2, 1, ‘Ramirez’);
$hoja->write(3, 0, ‘Lalo’);
$hoja->write(3, 1, ‘Landas’);

/* Mediante el método close cerramos y enviamos el archivo al usuario */
$libro->close();
?>

9.- Ahora si ejecutamos ejemplo.php nos lanzará un archivo en formato excel llamado ejemplo.xls

Fácil y bonito, ¿no?. Complíquemoslo un poco, démosle un poco de formato a nuestro texto.

10.- Con el mismo código como base, ahora añadiremos algunas cosas. El formato se crea definiendo una variable y adjuntándola como formato a un libro en particular. Luego, cada vez que queramos utilizar ese formato, lo añadimos como parámetro al momento de escribir datos. Esto quedará más claro en nuestro ejemplo:

/* Llamamos a la clase que ejecutará la exportación a Excel. Esta clase está guardada en el directorio que tenemos habilitado por defecto en nuestro php.ini para los include y require. Si no hemos modificado el php.ini no debemos cambiar nada acá */
require_once ‘Spreadsheet/Excel/Writer.php’;

/* Creamos un nuevo objeto de tipo Spreadsheet_Excel_Writer que refleja un nuevo libro de Excel */
$libro = new Spreadsheet_Excel_Writer();

/* Definimos mediante el método send que el archivo debe enviarse al usuario al ejecutar el código y le damos el nombre que tendrá. En este caso ejemplo.xls */
$libro->send(‘ejemplo.xls’);

/* Definimos una variable y se la asignamos a nuestro objeto como una hoja del mismo mediante el método addWorksheet, el cual lleva como parámetro el nombre de la hoja. Tal como si crearamos una en un libro normal de Excel */
$hoja =& $libro->addWorksheet(‘Hoja de prueba’);

/* Declaramos una variable llamada negrita y la adjuntamos a nuestro libro definiendola como formato mediante el método addFormat */
$negrita = &$libro->addFormat();
/* Luego con la variable negrita, llamamos al método setBold para definir que será negrita */
$negrita->setBold();

/* Repetimos la operación con la variable cursiva pero ahora llamando al método setItalic */
$cursiva = &$libro->addFormat();
$cursiva->setItalic();

/* Escribimos los datos en la hoja mediante el método write, el cual toma como parámetros el número de fila, número de columna, el contenido y la variable con el formato que le daremos a esa celda. Si es texto debe ir entre comillas como una cadena. */
$hoja->write(0, 0, ‘Nombre’, $negrita);
$hoja->write(0, 1, ‘Apellido’, $negrita);
$hoja->write(1, 0, ‘Maria’, $cursiva);
$hoja->write(1, 1, ‘Lopez’, $cursiva);
$hoja->write(2, 0, ‘Eulalio’, $cursiva);
$hoja->write(2, 1, ‘Ramirez’, $cursiva);
$hoja->write(3, 0, ‘Lalo’, $cursiva);
$hoja->write(3, 1, ‘Landas’, $cursiva);

/* Mediante el método close cerramos y enviamos el archivo al usuario */
$libro->close();
?>

11.- Ejecutamos el archivo y nos enviará ejemplo.xls como descarga, el cual si lo abrimos podremos ver que tiene los datos formateados, tal como definimos:

El formato podemos manejarlo con muchos métodos, tanto de la hoja como de las celdas propiamente tal. Este paquete de PEAR nos permite personalizar todos los aspectos existentes de un libro de Excel, desde colores, codificación del texto, tamaños de letra, formatos de celda e incluso formulas. Lamentablemente son tantos métodos que necesitaríamos bastantes tutoriales para cubrirlos todos, por lo que hemos intentado cubrir su funcionamiento y enseñar la lógica de su uso para que puedan seguir experimentando y llegar al nivel de detalle que deseen.

Pueden encontrar un detalle de los métodos para utilizar en la documentación de Spreadsheet Excel Writer.

Ahora tenemos un método simple y seguro para exportar de PHP a Excel en caso de que necesiten mayor precisión o bien manipular los archivos después con alguna otra clase.

Les recordamos que como siempre, este tutorial ha sido:

Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.

Staff CLH

Cómo crear un listado dinamico en PHP

Jorge Nitales — Mon, 20 Jul 2009 17:33:33 +0000

Quizás alguna vez estuvieron programando algo y se dieron cuenta que necesitaban, en un formulario, crear un listado o “select”, pero se dieron cuenta que la cantidad de elementos que tiene que aparecer viene de una base de datos y que además, si llegan a agregar algun elemento en la base de datos, automáticamente debe aparecer en este listado. Viéndose en este dilema pensaron “Y ahora ¿Quien podrá defenderme?”.

Debido a que le Chapulin Colorado es un crá, pero no sabe programar, no los pudo ayudar y por eso aparece CLH al rescate.

Para ver Cómo Lo Hago, vamos después del salto.

Cómo crear un listado dinamico en PHP

¿Qué necesitamos?

- Un editor PHP, como Dreamweaver.

¿Cómo Lo Hago?

1.- Ok, vamos a hacer lo siguiente, a continuación pondremos el código necesario y las explicaciones irán entre los simbolos /* y */ (esto va dentro de las etiquetas body):

$con=mysql_connect(“nombre_servidor”,”usuario”,”contraseña”) or die(“Error en la conexion al servidor”);
/*Creamos la conexión con el servidor y esto lo asignamos a la variable $con, reemplazamos:

nombre_servidor: El nombre del servidor, por ejemplo Localhost
usuario: Ponen aquí el usuario con el que se conectan a su servidor, si trabajan en su pc, por lo general es root
contraseña: La contraseña del usuario anterior, si no tienen contraseña, se deja en blanco.

Luego de esto en la línea “or die…” significa que, en caso de que la conexión no se logra realizar, mostrará el mensaje “Error en…”
*/
mysql_select_db(“nombre_bd”,$con) or die(“Error en la conexion a la base de datos”);
/*
Con esta línea, seleccionamos la base de datos en la que vamos a trabajar, reemplazamos:

nombre_bd: El nombre de la base de datos con la que van a trabajar

En la línea “or die…” se cumple lo mismo que en la línea anterior
*/
$consulta=mysql_query(“SELECT nombre_campo as lis FROM nombre_tabla”)
/*
Realizamos la consulta y el resultado lo asignamos a la variable $consulta, reemplazamos:

nombre_campo: Escriben el nombre del campo que van a seleccionar, por ejemplo “nombre”
nombre_tabla: Aca el nombre de la tabla donde se encuentra ese campo, por ejemplo “usuario”

Además encontramos que luego de “nombre_campo” dice “as lis” con esto creamos un alias, ¿para qué sirve?
en caso de que el nombre del campo sea “nombre_de_las_personas_entre_25_y_35_anios”, bueno ese es un pésimo nombre de campo, pero uno nunca sabe, lo que hace ese “as lis” es reemplazar ese nombre, ahora cuando quieran referirse a ese campo pueden hacerlo con “lis” y es importante acotar que “lis” lo elegí yo, puede poner lo que quieran.
*/
echo “
”;
echo “”;
echo “”;
echo “”;
echo “
”;
echo “”;
echo “
”;
/*Aca cerramos todo, el select, la celda, la columna y la tabla*/
?>

Con esto ya tienen su listado dinámico.

Cualquier duda, los invitamos a dejar un comentario a continuación.

Y recuerden que este tutorial ha sido:

Por ahora,

Me despido.

Staff CLH

Cómo leer un archivo Excel desde PHP

Xabadu — Thu, 16 Jul 2009 17:16:52 +0000

Hoy vamos a ver como lograr leer un archivo Excel, directamente desde PHP.

Cómo leer un archivo Excel desde PHP

Como siempre, lo primero: Implementos necesarios:

Un editor Web. (en este caso utilizamos y recomendamos Adobe Dreamweaver, que pueden descargarlo desde su sitio oficial).
Un hosting que soporte PHP o un servidor Web local.
La clase PHP Excel Reader, que pueden descargarla desde este enlace.
Un archivo Excel con datos.

Procedimiento:

1.- Lo primero que haremos será asegurarnos que tenemos un archivo Excel con datos. En nuestro caso, tenemos el siguiente:

Una estructura básica con 2 columnas y 6 filas incluyendo el encabezado. Este archivo ahora lo cargaremos mediante un formulario y lo mostraremos en una tabla HTML.

2.- En nuestro editor Web, partiremos por crear un archivo llamado excel.php, y en el añadiremos un formulario, el cual contendrá un campo de archivo, que llamaremos archivo. Si tienen dudas de como realizar esta operación, les recomiendo revisar este tutorial donde hemos cubierto el proceso por completo. Al terminar debiéramos tener algo como esto:

Adicionalmente, debemos fijarnos que nuestro formulario que llame a la misma excel.php

3.- Ahora, vamos a añadir un poco de código. Justo antes del comienzo de nuestro formulario (es decir, antes de la etiqueta form…), añadiremos:

Con lo que acabamos de hacer, le estamos diciendo a nuestra página: “Si no se ha enviado el formulario, muestrelo, de lo contrario muestre… (lo que está dentro del else)”

4.- Ahora, dentro del else, haremos todo el proceso de lectura del archivo cargado y la muestra de datos por pantalla. Para eso primero descomprimimos la clases PHP Excel Reader que ya bajamos y debiéramos tener algunos archivos de ejemplo, un excel y un directorio llamado Excel el que contiene la clase en su interior: un archivo reader.php y un archivo oleread.inc, este último debemos renombrarlo a OLERead.php (respetando mayúsculas y minúsculas) para que lo tome bien.

5.- Luego, abrimos el archivo reader.php en nuestro editor Web y vamos a la línea 31, donde reemplazamos:

require_once (“Spreadsheet/Excel/Reader/OLERead.php”);

por esto:

require_once “OLERead.php”;

6.- A continuación, dentro de nuestro else que dejamos, debemos incluir el siguiente código. La explicación, como siempre, en negrita, cursiva y entre /* y */:

/* Cuando cargamos un archivo mediante un formulario, se mueve a una ubicación temporal dada por el servidor y desde ahí debemos moverlo manualmente a donde queremos que quede. Si no lo movemos, el archivo se eliminará al terminar la ejecución del archivo php. El movimiento lo hacemos mediante la función move uploaded file la cual utiliza como parámetros: el array del archivo, el nombre del campo, la propiedad de nombre temporal dada y luego el nombre y la ruta con el que lo guardaremos. Si solo incluimos el nombre en la última, se guardará en el mismo directorio donde está el archivo php que estamos ejecutando */

/* Luego, mediante un include, llamamos a la clase PHP Excel Reader, mediante el archivo reader.php */

include(“Excel/reader.php”);

/* Creamos un nuevo objeto de tipo Spreadsheet_Excel_Reader que corresponde a la clase que incluimos recién */

$datos = new Spreadsheet_Excel_Reader();

/* Le decimos al objeto que “lea” el archivo cargado. Esto extraerá toda la información correspondiente al archivo y la almacenará en el objeto */

$datos->read($nombre);

/* Ahora, definimos una variable llamada celdas, en la cual guardaremos todos los datos de las celdas del archivo excel leído. Esto podemos hacerlo, llamando al método sheets sobre nuestro objeto datos, el cual contenía la información del archivo excel, e indicandole mediante los parámetros que nos pase los datos de la hoja 0 (primera hoja del archivo) y que queremos la información de sus celdas (cells) */

$celdas = $datos->sheets[0]['cells'];

/* Luego, mediante un echo, empezamos a construir una tabla en HTML */

echo “
”;
/* Luego, mediante un ciclo, seguiremos armando nuestra tabla y concatenamos con el contenido de las celdas. Estos valores se almacenan en la variable en una forma de array de 2 dimensiones. La primera corresponde a la fila y la segunda a la columna, siempre empezando de 1 , poniendo como condición que cuando lea una celda vacía se detenga */
$i=1;
while($celdas[$i][1]!=”)
{
echo “
”;
$i++;
}
/* Cerramos la tabla */
echo “

”.$celdas[$i][1].” ”.$celdas[$i][2].”

”;

7.- Veamos nuestro script en acción:

Como pueden ver, el procedimiento es bastante fácil y rápido. La clases PHP Excel Reader es muy simple de utilizar y bastante poderosa en su alcance, por lo que les recomendamos explorar a fondo y ver todos los beneficios que nos puede presentar.

Como siempre, recuerden que este tutorial ha sido:

Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.

Staff CLH