Zoom sobre texto con CSS3 usando transiciones

Otra nueva entrada sobre las virtudes de CSS3, en este caso vamos a hacer una pequeña introducción a las transiciones creando un código que nos permita que la letra de un párrafo aumente de tamaño cuando el ratón esté sobre ella.

Para ello por un lado tendremos que definir la transición sobre el elemento a modificar y luego la modificación cuando se produzca el evento.

Lo primero sería así:

.aumenta {
    font-size: 1.1em;
    width: 300px;
 
    -moz-transition: font-size 500ms linear 0s; 
    -webkit-transition: font-size 500ms linear 0s;
    -o-transition: font-size 500ms linear 0s;
    transition: font-size 500ms linear 0s;
}

Explicación: tras definir el tamaño del texto para la clase aumenta (1.1 em) definimos la transición. Hay varios métodos para la transición, así que he usado la propiedad shorthand de transition. El primer parámetro (font-size) es para especificar a qué propiedad se aplicará la transición, el segundo el tiempo que tardará, el tercero que se hará siempre a la misma velocidad (linear) y el cuarto que se haga sin delay.

Y ahora que tenemos la transición definida para todos los navegadores (ojo!!! Explorer 9 no soporta todavía transiciones, dice Bill Gates que igual para la 10) toca definir cómo se transformará el texto cuando esté sobrevolado por el ratón:

.aumenta:hover{
    font-size:1.6em;
}

Definimos que en el evento hover la fuente pase a ser más grande. Con esto ya tenemos nuestra transición lista.

Trabajando con JSON en PHP: crear y consumir JSON

JSON se ha convertido en una herramienta fundamental en la programación web, ya sea en servicios web, para comunicar con apps de móviles, pasar datos de php a javascript…

Desde PHP podemos tanto crear un JSON como recibirlo y manejarlo. Para la creación debemos utilizar la función json_encode(), que recibe lo que queramos serializar (una cadena, una variable numérica, un array, un objeto) y devuelve una cadena con los datos serializados. Si le pasamos un array normal o una cadena, no veríamos mucho cambio tras la serialización, pero si le pasamos un array asociativo, tendríamos un resultado como el del ejemplo:

$miArray = array("ferrari"=>"rojo", "porsche"=>"plateado", "mercedes"=>"negro");
$string = json_encode($miArray);
//el valor de string sería {"ferrari":"rojo","porsche":"plateado","mercedes":"negro"} 

Pero la verdadera potencia la encontramos cuando la aplicamos a objetos, ya que JSON nos permite serializar cualquier objeto de PHP, con el mismo procedimiento que usamos arriba: la función json_encode.

Una cuestión a la hora de trabajar con JSON que debemos tener en cuenta es la codificación de caracteres. En principio json_encode() ya convierte a Unicode los resultados, ya que en la notación JSON usamos siempre Unicode. El problema es que PHP por defecto tratará la cadena de origen como UTF-8, así que si no estás trabajando con esta codificación, y estás usando, por ejemplo, ISO-8859-1, se tornará necesario que codifiques las cadenas a UTF-8 antes de convertirlas en JSON. Esto se hace con la función utf8_encode().

$miArray = array("palabro1"=>utf8_enconde("ñandú"), "palabro2"=>"maniqueo", "palabro3"=>utf8_encode("bandoneón");
$cadenajson = json_encode($miArray);

Con esto ya recibiríamos las cadenas codificadas en UTF-8 y prevendríamos errores de codificación.

Ok, con esto hemos visto como generar un JSON, pero ¿cómo lo consumimos?.

Bueno, primero habría que destacar que existen varias librerías para JSON en PHP, pero desde PHP 5.2 este incluye librerías nativas desarrolladas en C, que son las más recomendables por cuestiones de rendimiento. Ahora vamos a suponer un objeto tal como el del ejemplo:

$strjson = '{
   "elemento1": "valor1",
   "elemento2": "valor2",
   "elemento3": null,
   "otroobj": {
      "a ver": "oh",
      "venga": "va"
   };

Esa sería la cadena JSON que recibiría nuestro código PHP con un objeto serializado ¿cómo la transformamos en objeto? Pues si serializábamos con json_encode() el paso contrario será con json_decode():

$objetophp = json_decode($strjson);

//si imprimimos objetophp con print_r() nos dará:
stdClass Object
(
   [elemento1] => valor1
   [elemento2] => valor2
   [elemento3] =>
   [otroobj] => stdClass Object
   (
      [a ver] => oh
      [venga] => va
   )
) 

Al tener un objeto puedes acceder a sus propiedades como en cualquier objeto normal de PHP.

Una serie de avisos: Recuerda, como dijimos antes, que las cadenas deben estar en UTF-8, si usas otra codificación tendrás que tirar de utf8_encode. Los nombres tanto de las propiedades como de los valores deben ir entre comillas dobles, no se aceptan comillas simples y sólo los valores numéricos o null pueden ir sin comillas. No te dejes ni llaves ni corchetes abiertos, ni ninguna coma de más. Todo eso provocará fallos.

Crear un webservice básico con PHP y SOAP

SOAP es un protocolo de intercambio para servicios web basado en XML, sobre el que puedes leer en esta entrada de la wikipedia. Para no liarnos con preámbulos, vamos con la chicha ¿cómo creamos un servicio web en PHP?.

Para facilitarnos la vida empezaremos por descargar NuSOAP, un toolkit para el desarrollo de servicios web con SOAP en PHP, que nos proveerá de diversas clases para trabajar con este protocolo. Basta con descargarlo, descomprimirlo, meterlo dentro de nuestro proyecto y, cuando queramos usarlo, incluir nusoap.php como librería.

Ok, con NuSOAP instalado toca crear un servidor SOAP en nuestra aplicación. Para el ejemplo crearemos un servidor, lo llamaremos producto.php, que si recibe una petición donde se le pida una lista de libros devuelva tres títulos (es un ejemplo básico, piensa que en la realiad podrías acceder a una base de datos y dar muchas más funcionalidades).

<?php
	require_once "nusoap.php";
	 
        function getProd($categoria) {
	    if ($categoria == "libros") {
	        return join(",", array(
	            "El señor de los anillos",
	            "Los límites de la Fundación",
	            "The Rails Way"));
	    }
	    else {
	            return "No hay productos de esta categoria";
	    }
	}
	 
	$server = new soap_server();
	$server->register("getProd");
	$server->service($HTTP_RAW_POST_DATA);
?>

Ok, ahora necesitas un cliente, que llamaremos cliente.php. En el constructor, el cliente recibirá el url del servidor y para acceder al método que nos devuelve los libros recurriremos al método call(), al cual le pasaremos el nombre del método del servidor al que queremos acceder y los parámetros en forma de array. Además, también controlaremos que no haya errores en la comunicación.

<?php
	require_once "nusoap.php";
	$cliente = new nusoap_client("http://localhost/producto.php");
	 
	$error = $cliente->getError();
	if ($error) {
	    echo "<h2>Constructor error</h2><pre>" . $error . "</pre>";
	}
	 
	$result = $cliente->call("getProd", array("categoria" => "libros"));
	 
	if ($cliente->fault) {
	    echo "<h2>Fault</h2><pre>";
	    print_r($result);
	    echo "</pre>";
	}
	else {
	    $error = $cliente->getError();
	    if ($error) {
	        echo "<h2>Error</h2><pre>" . $error . "</pre>";
	    }
	    else {
	        echo "<h2>Libros</h2><pre>";
	        echo $result;
	        echo "</pre>";
	    }
	}
?>

Con esto ya tienes una idea múy básica del funcionamiento de un webservice SOAP construído con PHP. Pero claro, nos falta un archivo WSDL para tener un webservice decente. Aunque dicho archivo puede ser escrito a mano, NuSOAP puede generarlo por ti pasándole ciertos parámetros, por lo que lo ideal sería generarlo en el servidor. Así que modifica tu producto.php para que quede tal que así:

<?php
	require_once "nusoap.php";
	 
	function getProd($categoria) {
	    if ($categoria == "libros") {
	        return join(",", array(
	            "El señor de los anillos",
	            "Los límites de la Fundación",
	            "The Rails Way"));
	    }
	    else {
	        return "No hay productos de esta categoria";
	    }
	}
	 
	$server = new soap_server();
	$server->configureWSDL("producto", "urn:producto");
	 
	$server->register("getProd",
	    array("categoria" => "xsd:string"),
	    array("return" => "xsd:string"),
	    "urn:producto",
	    "urn:producto#getProd",
	    "rpc",
	    "encoded",
	    "Nos da una lista de productos de cada categoría");
	 
	$server->service($HTTP_RAW_POST_DATA);
?>

Como ves, el cambio en es cuando llamamos a register, ya que en vez de pasarle, como antes, el método en cuestión, le añadimos también varios argumentos para generar el WSDL:

  • El primer array nos permite definir el argumento de entrada y su tipo de datos
  • El segundo define la función de retorno y su tipo de datos
  • urn:producto es la definición del namespace
  • urn:producto#getProd es donde definimos la acción SOAP
  • Luego viene el tipo de llamada,que puede ser rpc, como en el ejemplo, o document
  • Tras esto definimos el valor del atribute use, que puede ser encoded o literal
  • Finalmente viene una descripción de qué hace el método al que llamamos

Ahora basta con que en el navegador accedas a producto.php?wsdl y verás el WSDL generado. Ya puedes copiarlo y añadirlo a tu directorio web (crea un archivo y llámalo, por ejemplo, libros.wsdl). Para que el cliente lo utilice debes modificar el código, y en el constructor, en vez del url le pasas el nombre del archivo, de forma que quede como en el ejemplo:

         $client = new nusoap_client("libros.wsdl", true);

Ahora sí, ya tienes montado un pequeño servicio web. El ejemplo es simplón, pero piensa en todas las funcionalidades que podrías incorporarle.

Métodos mágicos en PHP

Reconozco que no había oído hablar de esta característica de PHP 5 hasta estas navidades, cuando un experimentado programador php me comentó que era algo que debía aprender (el mismo que me recomendó aprender Symphony, por cierto). La verdad es que el nombre suena rimbobante: «Métodos mágicos»… te quedas como «no se si será una decepción o si será la leche». Luego, curiosamente durante el transcurso de una entrevista laboral me volvieron a preguntar si sabía del tema, así que decidí informarme.

Tras leer sobre el tema he de decir que no me queda muy claro del todo el uso de dichos métodos. Se trata de una serie de métodos comunes a todas las clases que se crearon para PHP5 y que refuerzan la orientación a objetos del lenguaje. Estos métodos comienzan su nombre con __ por lo que se recomienda no crear métodos propios que empiecen así. Los citados métodos mágicos son:

  • __construct()
  • __destruct()
  • __call()
  • __callStatic()
  • __get()
  • __set()
  • __isset()
  • __unset()
  • __sleep()
  • __wakeup()
  • __toString()
  • __invoke()
  • __setState()
  • __clone()

Si has programado en Java unos cuántos ya te sonarán, porque no es sólo que se llamen igual, es que tienen una funcionalidad similar.

Por lo que he entendido leyendo la documentación, el método __sleep() es llamado cuando se utiliza el método serialize(), se ejecuta antes de comenzar la serialiación y nos permite definir un array con los nombres de todas las variables del objeto que se va a serializar. Por su parte __wakeup() nos permitiría reinicilizar el objeto después de la serialización (restablecer conexiones a la base de datos, por ejemplo), y se ejecuta cuando se utliza unserialize().

Por su parte __invoke() es llamado cuando se intenta llamar a un objeto como si fuera una función. Sí, suena raro, así que os pongo un ejemplo:

<?php
class CallableClass
{
    public function __invoke($x)
    {
        var_dump($x);
    }
}
$obj = new CallableClass;
$obj(5);
?>

//esto devolvería int(5)

En cuanto a __toString(), nos permite decidir qué se imprimirá si el objeto es llamado como si fuera una cadena de texto. Por ejemplo, si haces echo $objeto.


<?php
class TesteandoToString
{
    public $imprimir;

    public function __construct($imprimir)
    {
        $this->imprimir = $imprimir;
    }

    public function __toString()
    {
        return $this->imprimir;
    }
}

$class = new TesteandoToString('Hola caracola');
echo $class;

//esto imprimiría Hola caracola
?>

El método __set_state() nos permite recoger un array con las variables exportadas por el método var_export() y asignarlas a un nuevo objeto. No confundir con la funcionalidad del método __clone(), que directamente crea una copia exacta de otro objeto.

Los métodos __call(), __callStatic(), __set(), __get(), __isset() y __unset() se utilizan para la sobrecarga, lo que nos permite «crear» dinámicamente propiedades y métodos. A estos métodos no se les pueden pasar parámetros por referencia. Se invoca a estos métodos cuando queremos trabajar con propiedades o métodos que no se han declarado o que no son visibles. El funcionamiento de __get() y __set() es similar al que pueden tener en Java los métodos get() y set(): el primero nos permite acceder a las propiedades privadas del objeto desde fuera de la clase y el segundo nos permite modificarlos. Puedes imaginar que __unset() lo que hará será «limpiar» de valor la propiedad y que __isset() funciona como isset() pero permitiendo el acceso a los valores privados. En cuanto a __call(), nos permitirá llamar a métodos inaccesibles en un contexto de objeto, y __callStatic() lo mismo pero en un contexto estático.

Finalmente __construct() es un método constructor, y será lo primero que se ejecute al crear un nuevo objeto de la clase, y __destruct() será lo último que se ejecute antes de eliminar el objeto de la memoria.

En fin, con todos estos métodos está claro que PHP gana mucho en cuanto a orientación a objetos.

Evitar ataques XSS con PHP Input Filter

Hoy una lección de seguridad en programación web: Evitar que a vuestra página le hagan un ataque por XSS (Cross Site Scripting). Si no sabéis lo que es el Cross Site Scripting… os lo explica mejor la wikipedia y así me centro en el tema (una vez le hice un ataque de estos a la página de un grupúsculo neonazi que redirigía a un vídeo del desfile del orgullo gay en Youtube)

Bueno, hay frameworks como Symphony o CakePHP que ya se encargar de implementar este tipo de seguridad, al igual que también lo hacen ciertos gestores de contenidos. Pero si se da el caso de que no estás usando ninguno, estás haciendo PHP «a pelo», lo mejor será que recurramos a la clase PHP Input Filter. Dicha clase permite filtrar código malicioso ingresado en los formularios para prevenir ataques XSS de manera sencilla, pero tiene la cualidad de no limpiar determinadas etiquetas o atributos si queremos.

Para utilizar esta clase, la descargaremos desde el enlace anterior e incluiremos class.inputfilter.php al inicio de nuestro códgi. Luego crearemos una instancia de la clase InputFilter, entonces podremos filtrar los datos con el método process:

    require_once("class.inputfilter.php");
    $filter = new InputFilter();
    $variable = $filter->process($_POST['variable']);

Esto nos permitiría limpiar de etiquetas la variable enviada por $_POST llamada variable. ¿Y si queremos limpiar todos los campos enviados por el método post? Pues basta con pasarle todo el array:

$_POST = $filter->process($_POST);

Y con eso tendríamos el array $_POST limpio de etiquetas y securizado.

Pero ¿y si queremos permitir ciertas etiquetas? Imaginemos que desde un input text metemos texto formateado, y nos interesa que sí puedan subir saltos de línea, texto en negrita o cursiva. Pues muy sencillo también, ya que basta con pasar en la creación del objeto InputFilter un array con las etiquetas que queremos conservar como parámetro:

    $filter = new InputFilter(array('em', 'i', 'br', 'b', 'strong'));
    $_POST = $filter->process($_POST);

Y esto se puede llevar más allá, porque también podemos decir que se permitan ciertos atributos de ciertas etiquetas. Por ejemplo, imaginemos que queremos permitir que inserten enlaces junto a su href y a su id, pero ningún atributo más:

    $filter = new InputFilter(array('a'), array('href', 'id'));
    $enlace = $filter->process($_POST['enlace']);

Tras el array de etiquetas pasamos otro array de atributos, simplemente.

Con estos sencillos consejos lograrás que tus formularios sean más seguros en PHP.

Editores WYSIWYG para tu web

¿Necesitas un editor WYSIWYG para integrar en tu página web? ¿Quieres mandar e-mails con texto enriquecido? ¿Quieres que tus usuarios puedan generar código con texto formateado? Ok, pues estas son algunas de las mejores opciones libres a las que puedes recurrir:

  • TinyMCE: Usado por WordPress, Facebook, Oracle Beehive, IBM Web CMS, Joomla, Episerver… en fin, son nombres que deberían dar confianza al usuario. TinyMCE incluye una enorme variedad de opciones que tú puedes configurar y decidir cuales usar. Es fácil de integrar y tiene una amplia documentación.
  • NicEditDos motivos para plantearse el uso de NicEdit son su ligereza y su fácil integración (sólo requiere dos líneas de código y lo tendrás funcionando). No tiene tantas opciones como el anterior pero son suficientes para el uso habitual del usuario, lo que además hará que para este sea más fácil e intuitivo usarlo.
  • openWYSIWYG: Reconozco que no lo he probado, pero me han hablado de él. Por lo que me han comentado el proyecto está un poco abandonado, así que es posible tener problemas de compatibilidad con las últimas versiones de algunos navegadores.
  • CKEditor: A nivel de funcionalidades implementadas está en la misma liga que TinyMCE, y es el editor utilizado por Drupal. Muy potente y con gran cantidad de opciones. Cuando lo veas parecerá que estás ante el procesador de texto de una suite ofimática.
    CKEditor
    CKEditor

     

En fin, con estos cuatro más o menos ya vemos todo lo que hay en el mercado. ¿Y cómo los implementas? Pues mira la documentación de cada uno. ¿Y cómo recoges los datos? Tranquilo, al procesar el formulario te vendrá como el resultado de un textarea normal, al menos en PHP (las versiones para Java o ASP ya vendrán en su documentación explicadas, digo yo).

Convertir una respuesta xml en un objeto de PHP

Por defecto PHP, desde la versión 5.1.2, incorpora la extensión SimpleXML y la trae habilitada (en versiones anteriores es necesario usar –enable-simplexml para activar esta extensión en el momento de compilar). Dicha extensión incluye una serie de herramientas que nos permiten trabajar fácilmente con XML.

No es extraño que si tenemos que comunicarnos con un api externa esta nos devuelva una respuesta en XML, que es un formato universal que puede ser trabajado con casi cualquier lenguaje (otra posibilidad muy habitual es JSON). SimpleXML nos permite recoger esta respuesta, convertirla en un objeto y trabajar con el mismo sin mucha complicación.

En caso de querer recoger una respuesta de otra página, el método a usar sería simplexml_load_string():

$objetoxml = simplexml_load_string($respuestaApi);

Con esto ya tenemos un objeto fácil de recoger. Vamos a imaginar que el objeto que recibimos es tal que así:

<response>
   <requestid>A16</requestid>
   <requests>3</requests>
   <status>error</status>
   <error>
      <code>106</code>
      <message>Request expired</message>
   </error>
</response>

Una notificación de un error conectando con un servicio externo (de hecho, es una copia de un mensaje de error del api de Calameo). Ahora imaginemos que queremos recoger este mensaje de error y mostrárselo por pantalla al usuario. ¿Qué hacemos? Pues muy facilito:

//primero convertimos el xml a objeto
$objetoxml = simplexml_load_string($respuestaApi);

//luego comprobamos que sea un mensaje de error:
if (isset($objetoxml->error))
{
    //e imprimimos
    echo 'Error:'.$objetoxml->error->code.': '.$objetoxml->error->message;
}

Trabajar con el objeto SimpleXML es cosa fácil: Cuando quieres acceder a un elemento basta ir moviéndose como si accedieras a las propiedades o métodos de un objeto. Es decir abuelo->padre->hijo. ¿Que hay varios elementos con la misma etiqueta? Sin problema, las etiquestas se convierten en objetos iterables y accesibles, por lo que puedes recorrerlos recurriendo a los mecanismos básicos de iteración (bucle foreach, por ejemplo).

¿Y para acceder a los atributos? En el ejemplo del xml no hay, pero imaginemos que en lugar del anterior la cosa fuera así:

<response>
   <requestid>A16</requestid>
   <requests>3</requests>
   <status>error</status>
   <errors>
      <error>      
        <message code="106">Request expired</message>
      </error>
      <error>      
        <message code="401">File not found</message>
      </error>
   </error>
</response>

Ok, ahora tendrías que acceder a los atributos, y de paso podríamos ver un ejemplo de iteración. A los atributos se accede como si fuesen elementos de un array, usando como índice su nombre:


//primero convertimos el xml a objeto
$objetoxml = simplexml_load_string($respuestaApi);

//luego comprobamos que sea un mensaje de error:
if (isset($objetoxml->errors))
{
    foreach(objetoxml->errors->error as $error)
    {
        echo 'Error:'.$error['code'].': '.$error->message;
    }
}

Un par de notas más:

  • Para usar el texto de un elemento en una comparación o pasarlo a una función como string hay que forzar la conversión a cadena de texto haciendo un cast con (string)
  • Para acceder a un elemento cuyo nombre viole las convenciones para nombres de objeto de PHP hay que recurrir a encapsular el nombre del elemento dentro de un par de llaves y comillas simples.
  • En este caso hemos hablado de recoger una respuesta de un servicio externo, pero SimpleXML nos permite también recoger un xml desde un archivo con simplexml_load_file().

Y si necesitáis convertir el elemento en un array (en su momento me tocó) ya tratamos ese punto con anterioridad.

Procesar un formulario con PHPFox (operaciones CRUD)

En los últimos tiempos he estado trabajando con el CMS PHPFox para creación de redes sociales. He de decir que la documentación sobre el mismo es, en el mejor de los casos ambigua y en el peor insuficiente, teniendo que recurrir muchas veces al «voy a ver cómo está hecho aquí, y si se parece lo copio». Por cierto, si no sabes inglés date por jodido que la documentación está toda en la lengua de los inmortales bardos Poe, Shakespeare y Lemmy.

Podría empezar por lo básico, pero está más o menos bien explicado en su documentación (a la que sólo podrás acceder si tienes una cuenta de usuario… de pago, of course), donde te explican más o menos cómo crear tu primer módulo. Por desgracia, tras explicar lo más básico (lo más de lo más, porque esto no está explicado…) se quedan ahí, y no profundizan para acercarse al tema de la persistencia de datos ni a las operaciones CRUD (Create, Read, Update and Delete).

Para el acceso a la base de datos necesitarás al menos tres archivos, ya que PHPFox trabaja sobre la arquitectura MVC: un template (será la vista), un controller (controlador) y un service (el modelo).

Si habéis leído la documentación básica de phpfox ya sabréis en qué carpeta tenéis que meter cada archivo y cómo nombrarlo. Ahora os adjunto un ejemplo de como sería el código del template, seguido de su explicación:

<form method="post" action="{url link='phpfoxexperiment/form'}">
  <input type="number" name="val[orden]" id="orden" placeholder="orden"/>
  <br/>
  <input type="text" name="val[texto]" id="texto" placeholder="texto"/>
  <br/>
  <input type="submit" value="Add" class="button" name="val[add]" /> 
</form>

Por partes; en el action hemos usado esa variable porque así generará directamente un link a nuestra dirección seguido de ese directorio. En cuanto al nombre de los campos como «val[loquesea]» tiene también una explicación: se considera buena práctica no usar en PHPFox las variables de entorno $_GET y $_POST para recoger los datos de los formularios, en lugar de eso utilizamos el método getArray de la clase request, como verás en el ejemplo e abajo del php.

<?php 

class Phpfoxexperiment_Component_Block_Form extends Phpfox_Component 
{     
    public function process() 
    {         	
	if (($aVal = $this->request()->getArray('val'))) // getArray() nos permite recoger indistintamente valores $_GET y $_POST 
	{  
		  		 
		if(isset($aVal['add']) && !empty($aVal['add'])) // miramos si se ha pulsado el botón enviar 
		{  
		    if(isset($aVal['orden']) && !preg_match("/^[[:digit:]]+$/", $aVal['orden'])) //esto es una validación de los datos por expresión regular
		    {
			$this->url()->send('phpfoxexperiment.basic', null, 'Error'); //en caso de que los datos no sean correctos avisa a una página de error
		    }
		    else{
			if (Phpfox::getService('phpfoxexperiment')->add($aVal)) // llamamos al servicio para guardar los datos
			{ 				 
			    $this->url()->send('phpfoxexperiment.basic', null, 'Added with success');	//en caso de éxito lo comunicamos			 
			}else{
     			     $this->url()->send('phpfoxexperiment.basic', null, 'Error'); //en caso de error también
			}
		    }
		  }
		}         		 
	} 
}
?>

Como ves en el ejemplo se invoca al método add del servicio phpfoxexperiment. Ese método es el que hará la inserción en la base de datos. No se trata de un método del sistema, sino de uno creado por mi dentro del servicio. Aquí el código del mismo

<?php 
  
class Phpfoxexperiment_Service_Phpfoxexperiment extends Phpfox_Service  
{ 
    public function getData($iUser)
	
    { 
        return $this->database()->select('e.aescrypt') 
            ->from(Phpfox::getT('experiment'), 'e')
	    ->where('e.orden < 60 and user = '.$iUser)             
            ->execute('getRows'); 
    }
	public function add($aVal){ 
     
        $this->database()->insert( 
          Phpfox::getT('experiment'), 
          array(
            'user'=>Phpfox::getUserId(),
            'orden'=>$aVal['orden'], 
            'aescrypt'=>$aVal['texto'] 			
          ) 
        ); 
	return true;

    } 
} 
  
?>

En cambos casos accedo a la base de datos (MySQL) a través de los métodos de la clase database() de phpfox, que teóricamente ya implementa seguridad contra inyección sql y otros posbiles ataques. El return del final servirá para confirmar que la transacción se ha realizado. En el primer ejemplo se recuperar unos datos (teniendo en cuenta el id del usuario) y en el siguiente se insertan.

En fin, una explicación muy básica, pero que os ayudará a ir empezando a desarrollar módulos para este CMS.

Enviar datos por POST desde php mediante cURL

Habitualmente para mandar una petición HTTP con datos POST solemos utilizar un formulario desde HTML, y enviarlo ya sea de forma nativa o mediante AJAX/Javascript.

Pero la semana pasada me vi con una cuestión delicada en el curro. Tenía que enviar un archivo utilizando un API externa y, como medida de autenticación, tenía que generar una firma que consistía en un hash de los parámetros más una clave secreta. El «secretismo» de la clave me impedía generar dicha firma en el cliente. Aunque la metiera en un campo oculto o la encapsulara dentro del javascript siempre existe un riesgo porque tiene que llegar al equipo del cliente. Por lo que pensé «bueno, alguna forma habrá de hacer esto en el servidor». Y descubrí cURL, una herramienta libre que me solucionaría la papeleta.

El razonamiento para solucionar el problema fue el siguiente: envío los datos por POST de la forma habitual al servidor, a una clase PHP que los maneje. Desde ahí genero la firma con los datos del formulario más la clave secreta (que de esta forma nunca viaja hasta el cliente), los envío al API, recojo la respuesta y la manipulo. Todo fetén.

¿Y como lanzo la petición desde cURL? Aquí te rulo un ejemplo del código:

<?php
//Lo primerito, creamos una variable iniciando curl, pasándole la url
$ch = curl_init('http://loquesea.com/quepachacolega.php');

//especificamos el POST (tambien podemos hacer peticiones enviando datos por GET
curl_setopt ($ch, CURLOPT_POST, 1);

//le decimos qué paramáetros enviamos (pares nombre/valor, también acepta un array)
curl_setopt ($ch, CURLOPT_POSTFIELDS, "parametro1=valor1&parametro2=valor2");

//le decimos que queremos recoger una respuesta (si no esperas respuesta, ponlo a false)
curl_setopt($ch,CURLOPT_RETURNTRANSFER,true)

//recogemos la respuesta
$respuesta = curl_exec ($ch);

//o el error, por si falla
$error = curl_error($ch);

//y finalmente cerramos curl
curl_close ($ch);
?>

Et voilà, petición enviada con datos por POST. Un truquito fácil que te puede ayudar a automatizar tareas o a añadir seguridad a tu página.

FancyBox: Una alternativa a lightbox y otra opción para ventanas modales.

Seguimos con el mundo de los plugins de jQuery, el productivo framework libre de javascript que, con pocas líneas, te permite mejorar la experiencia del usuario, poner la página bonita y quedar como un Master del Universo delante de tu jefe.

Previamente en este blog hablamos de cómo hacer ventanas modales de forma sencilla con jQueryUI y de cómo trabajar con el plugin Lightbox. ¿Y si te dijera que hay un plugin que incorpora ambas funcionalidades? Sí, un plugin que te permite crear ventanas modales, mostrar galerías de fotos flotando sobre la web original, cargar iFrames (con todo lo que ello te puede proporcionar: vídeos de youtube, metacafe, vimeo, juegos o funcionalidades en flash…). Yo lo he utilizado para una ventana modal y para un flash. Podéis ver varias demos en esta página y descargarlo desde esta.

Como supongo que estáis deseando una explicación, allá voy: Lo primero, tras descargar es copiar en vuestro servidor el archivo .js (para entornos de producción mejor la versión «pack», que está comprimida, para experimentar usad la versión normal con el código legible), las imágenes, el .css (ojo, importante, si las imágenes y el .css no van a estar guardadas en la misma carpeta revisad las url de las mismas en el css, porque este viene pensado para que estén así) e incluirlos en la cabecera de la página donde queréis cargarlas. Para su correcto funcionamiento requiere que incluyáis una versión de jQuery superior a la 1.6, así que echad un ojo que todavía hay mucha gente funcionando por ahí con versiones viejas.

Una vez incluída la librería veamos dos ejemplos. Si quisiéramos usarlo para ampliar una imágen tipo facebook (como haría el lightbox) el código sería tal que así:
HTML:

<a class="ejemplo" href="../image/foto1.jpg" title="EjemploImagen"><img src="../image/foto1thumb.jpg"  /></a>

Explicación rápida: creamos un link, le damos una clase (que en el javascript utilizaremos para acceder al mismo, también podría usarse un id, pero suponiendo un caso real lo habitual son clases porque suele trabajarse con varias imágenes) y hacemos que la referencia apunte a la imagen que queremos cargar. Luego, para mostrar en el menú de la página, cargamos una versión minimizada de la imagen.

<script type="text/javascript">  
  $(document).ready(function(){  
      $(".ejemplo").fancybox({ });  
  });  
</script>  

Y sólo con esa línea de javascript ya tienes el efecto logrado.

Ahora imaginemos que queremos abrir una ventana modal con un aviso (por ejemplo, unas condiciones de uso, que es lo que tuve que hacer yo). La cosa empezaría con un HTML tal que así:

<!-- Aquí el link a la ventana modal -->
<a class="ejemplo" href="#inline1" title="Lorem ipsum dolor sit amet">Inline</a>
<!-- Aquí lo que queremos que se muestre en la ventana modal -->
<div id="inline1" style="display: none;">
   <h3>Etiam quis mi eu elit</h3>
   <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.
   </p>
</div>

Y con un javascript tal que

$(document).ready(function(){			
	$(".ejemplo").fancybox({
		maxWidth	: 400,
		maxHeight	: 300,
		fitToView	: false,
		width		: '70%',
		height		: '70%',
		autoSize	: false,
		closeClick	: true,
		openEffect	: 'none',
		closeEffect	: 'none'
	});		
})

En este caso definimos varios efectos. Las opciones son múltiples y variadas, por lo que si quieres sacar el 100% del jugo de este plugin lo que te recomiendo es que le pegues un ojo a la documentación del proyecto en su página oficinal.