PHP y su entorno

PHP y el servidor

Lo primero que debemos aprender es qué es PHP y que papel tiene en el desarollo web. Pues bien, PHP es un lenguaje de programación de uso gratuito y del lado del servidor, esto significa que haremos programas para que se ejecuten en un servidor, cuando alguien, normalmente un navegador, nos pida o envíe datos.

Para entenderlo mejor echa un vistazo al siguiente esquema, que muestra una petición GET:

Pues bien, nuestros scripts estarán en el lado de la derecha, de tal forma que normalmente se pedirán a raíz de una petición, como he dicho antes.

Influencias de PHP

La sintaxis es muy similar a la C, así que si sabes este lenguaje tienes mucho ganado, por supuesto también si sabes Java, ya que también tiene la sintaxis similar a C.

Además de C, PHP tiene muchas influencias, una de ellas y la más notable desde el principio es que las variables tengan un símbolo de dólar ($) al principio, pues bien, esto viene de Perl. Otros que de los que deriva son Python o C++, pero no te preocupes porque iremos paso a paso sobre todo.

Tipo de lenguaje

Si sabes otros lenguajes probablemente te ayude a su aprendizaje saber que PHP es un lenguaje multiparadigma, soportando la orientación a objetos y la programación imperativa. Si no sabes lo que estos palabros significan no te preocupes por ahora, paso a paso irás entendiendo lo que esto implica para nosotros como desarrolladores.

Instalación de PHP

Bueno queremos programar en PHP pero primero tendremos que instalarlo. Para ello veamos distintos tipos de sistemas operativos y cómo instalarlo en cada uno de ellos.

Windows

Descargar el programa WAMP de aquí. Recuerda que no solo estás instalando PHP sino también Apache y MySQL, necesario el primero para PHP y el segundo necesario para el caso de que utilicemos bases de datos, que también lo haremos.

Si no te gusta esta opción y quieres instalarlo a mano, aquí tienes una excelente guía paso a paso que estoy seguro te ayudará.

Mac

Para Mac existe una solución similar a WAMP llamada MAMP (las siglas son Mac | Apache | MySQL | PHP). A modo de curiosidad cuando veas ofertas para programadores LAMP están pidiendo gente que sea capaz de majer Apache, Linux, MySQL y PHP o Python, aunque esto último es menos común.

Pero volviendo al asunto que nos ocupa, la aplicación la puedes descargar de la página oficial de MAMP, cuenta con una versión gratuita y otra de pago, pero en general la gratuita suele ser suficiente.

Linux y otros entornos Unix

En estos entornos normalmente los documentos que servirá Apache estarán en /var/www, a diferencia de Windows y Mac que viene marcado por el programa de instalación que hayamos usado. En cualquier caso suele ser configurable así que no importa demasiado, pero debes tenerlo en cuenta para alojar tus scripts de PHP que haremos más adelante.

Para los usuarios de Ubuntu/Debian, que suelen ser la mayoría os dejo este tutorial, también genial explicado.

Y para los que no usáis una distribución basada en Debian, pues aquí tenís cómo instalarlo en Fedora.

Haciendo nuestro primer script

Hagamos ahora el script más sencillo del mundo, si, es un hola mundo. Para ello cremos un archivo vacío de texto normal y ponemos la etiqueta de inicio y de fin de PHP, quedando:

<?php
  //Código
?>

Ahora mostramos un mensaje por pantalla, con echo, que saca el string que le demos por la salida estándar, en este caso el html que muestra el navegador.

<?php
  echo 'Hola Mundo';
?>

Pues con esto en un archivo, lo guardamos como index.php, por ejemplo y lo ponemos en el directorio que en Apache hayamos configurado, esto depende del sistema operativo y la forma de instalarlo así que no hay un sitio fijo para todos, pero seguro que en el programa que hayas usado te viene. En Mac, con MAMP suele estar en Sites, bajo la carpeta de usuario.

Sólo es el comienzo

Bien ya podemos hacer scripts en PHP y que funcionen y además no tendremos problemas para conectarnos con MySQL si has seguido las instrucciones de los posts. A partir de ahora aprenderemos PHP íntegramente sin preocuparnos demasiado por el entorno. Espero que te sea útil, y si es así házmelo saber en los comentarios, nos queda un largo camino por delante. Un saludo.

SimplePie. Parsear RSS

Analizar datos periódicamente, crear un lector de feeds online, o simplemente extraer información automáticamente para otros propósitos. Los RSS son casi un estándar en cuánto a la lectura periódica de blogs o páginas se refiere, así que esta clase es realmente útil.

Descarga SimplePie | Documentación

Swift Mailer. Envío de emails

Esta librería permite enviar mails a través SMTP, sendmail u otros. Soporta encriptación, adjuntos y un largo etcétera. Ha tenido una buena acogida en la comunidad y es más nuevo que PHPMailer, del que quizá has oído hablar en alguna ocasión.

Descarga Swift Mailer | Documentación

pChart. Gráficas con estilo

A veces es inevitable tener que generar las gráficas desde PHP. En ocasiones tenemos la posiblidad de hacerlo con javascript, pero no siempre, así que esta librería será útil en esos casos. Tiene una buena documentación, por lo que la clase es fácilmente ampliable.

Descargar pChart | Documentación | Demos

FPDF. Generación de PDF’s

Esta librería facilita muchísimo el proceso de generación de PDF’s desde PHP. Y es algo bastante necesitado en programación, con posibilidades como generación automática de informes desde la base de datos.

Descarga y Documentación de FPDF

DomPDF. De HTML a PDF

Convierte un documento HTML a PDF, soporta imágenes, enlaces con anchor y CSS, entre otras cosas. Es como un analizador de HTML que lo “renderiza” en forma de PDF.

Descarga DomPDF | Documentación | Ver demo

Text Password. Creación de Passwords aleatorias

Permite la generación de claves pronunciables o no, y es muy fácil de usar, la verdad. Es interesante como está implementado también, así que échale un vistazo al código si quieres.

Descarga Text Password | Documentación

Akismet. Protegerse del spam

El spam es junto con IE los dos problemas creados más absurdos y molestos que existen en Internet. Para lo primero podemos usar Akismet, para lo segundo no podemos hacer demasiado. En principio es gratuito si no tienes una empresa muy grande o un blog con demasiado éxito, pero puedes ver los detalles en la página de Akismet.

Descarga Akismet | Librería PHP5 para usar Akismet

Extra. Pear 550+ paquetes

Pear es, en resumen, una biblioteca de código estructurada, donde puedes acceder a más de 550 paquetes para realizar tareas comunes, y así evitar tener que programarlas de nuevo. Cada paquete tiene un equipo de desarrollo independiente, así que algunos pueden estar más actualizados que otros, pero casi todos resultan útiles. Así que en el enlace puedes ver la lista de paquetes y cómo descargarlos.

Página oficial de Pear

Probablemente casi todos los desarrolladores que eligen un framework de PHP para trabajar con él por primera vez, lo hagan sin pensar demasiado en lo que puede o no puede hacer. Quizá por una recomendación, simplemente por probar o ambas, pero al trabajar en un proyecto tenemos que tener en cuenta que cosas podemos esperar de un framework y cuáles no. Veamos las característica más importantes a tener en cuenta.

Módulos disponibles

Casi todos los framework en PHP tienen una serie de librerías, módulos o helpers (cada uno lo llama de una forma) que básicamente consisten en una serie de funciones “extra” que tenemos disponibles para trabajar con ellas. Normalmente se agrupan en archivos, como funciones relacionadas con arrays, o funciones relacionadas con strings.

Un ejemplo de este tipo de funciones puede ser repeater(), del helper de strings de CodeIgniter que hace simplemente esto:

1
2

$string = "No volveré a decir tacos en clase.";
echo repeater($string, 5);

En la salida repite 5 veces la frase dada. Es una función de utilidad discutible, puesto que sustituye a un simple for de manera elegante, pero tomémoslo como un ejemplo de funciones que aportan los framework y que no tenemos que implementar. Hay algunos módulos, por ejemplo para parsear RSS, o lidiar más fácilmente con las bases de datos.

Versión de PHP

Quizá no parezca importante para trabajar en nuestros ordenadores, pero no siempre tenemos acceso a la última versión de PHP, así que es importante tener claro si vamos a trabajar en una versión u otra qué framework elegir.

Desarrollo activo

Es de suma importancia que elijas un framework que se encuentre bajo desarrollo activo. Es decir, que el autor o autores no hayan abandonado el proyecto hace tiempo. Esto es básicamente por dos razones:

1. Cuando tengas una duda habrá desarrolladores para contestarla, interesados también en el framework. Si no estuviera bajo desarrollo, nadie se preocuparía de usarlo y no habría nadie que te pudiera ayudar.
2. El desarrollo de PHP afectará al desarrollo del framework por lo que mejorará. La implementación interna de los frameworks de PHP es, lógicamente, en PHP. Como sabrás es un lenguaje que está en un desarrollo intensísimo, y muchas funciones se convierten en deprecated (antiguas, que no se aconseja su uso) en poco tiempo. Si el framework está evolucionando corregirá este tipo de implementaciones con las nuevas versiones proporcionadas por PHP.

A veces también conviene tener en cuenta quién está detrás de cada framework. Por ejemplo detrás del framework Zend está la empresa que fue fundada por los creadores de PHP tal y como lo conocemos hoy. Así que es casi una garantía de éxito que ese framework llegara a triunfar.

Modelo Vista Controlador (MVC)

Modelo Vista Controlador es un patrón de diseño que se basa en dividir la implementación en tres partes:

• Modelo. Normalmente es la representación de la información. Si vamos a tratar con coches y hacemos una clase “coches”, esta clase será nuestra parte modelo, a grandes rasgos.
• Vista. La interfaz de usuario, en desarrollo web suele ser la propia web con el HTML y CSS.
• Controlador. El encargado de recibir acciones y actuar en consecuencia, por ejemplo, si el usuario rellena un formulario y me lo envía en controlador será el encargado de manejar esa información.

Además, y sin entrar en muchas más profundidad sobre el tema para no desviarnos, hay relaciones entre estas partes, las más importantes suelen ser estas:

Por lo tanto si queremos desarrollar con este patrón tenemos que ver si el framework está orientado a él o no. Aunque te adelanto que la mayoría lo están.

Curva de aprendizaje

Esta no es tanto una característica interna de los framework, sino más bien una consecuencia de trabajar con ellos. Normalmente a mayor complejidad y funcionalidad más tiempo se tarda en aprenderlo. Mi consejo aquí es que si vas a tardar más tiempo aprendiendo el framework que utilizándalo estás usando el framework equivocado.

Es decir, el tiempo que le vayas a dedicar a aprender como usar el framework si no lo conoces, debe ser proporcional al tiempo que vaya a durar un proyecto.

Necesidades propias

Hay muchas más características que podríamos estudiar antes de decidirnos pero como receta general solo se puede nombrar las anteriores, básicamente, porque el resto dependerá de las necesidades del proyecto. Así que si tienes oportunidad investiga un poco más sobre cada característica que te ofrezca el framework que elijas. Porque cada uno tiene una serie de propiedades, que intentaré comparar a contuación y que lo hacen único.

Comparativa de frameworks famosos

Esta comparativa se basa en datos recopilados en diferentes webs y en las oficiales de los propios frameworks. He destacado ciertas características más o menos importantes, como puedes ver casi todos tienen de todo, siendo el más completo Zend Framework, pero quizá el que más tiempo se tarda en aprender, aunque esto depende mucho de la experiencia previa que tengas como programador y de la persona en sí.

Algunas características pueden ser discutidas, puesto que se pueden conseguir instalando algo extra de manera relativamente sencilla, pero he intentado representar lo que trae el framework “de fábrica” y que realmente está listo para ser usado.

Uso de módulos independientes

Se ha destacado la facilidad de uso de módulos independientes sin tener que depender del resto del framework.

ORM

ORM (Object Relational-Maping o Mapeo objeto-relacional) es una técnica que simboliza los datos que tenemos en una base de datos con clases. De tal forma que tendremos, por ejemplo, una clase coche con los atributos X e Y y una tabla con los mismos atributos. Lo cierto es que salvo operaciones concretas no afecta demasiado al rendimiento, y facilita enormemente la programación, reduciendo líneas de código. Haré un post sobre esto en el futuro, así que no te preocupes si no lo entiendes completamente.

Otras alternativas

Frameworks de PHP menos famosos

Además de las alternativas mencionadas, las más famosas y utilizadas hay muchísimas más bajo desarrollo que están emergiendo y que se merecen también que le echemos un vistazo. Algunos de ellos son: Prado, Yii o Akelos, aunque hay muchos más.

DIY (hazlo tú mismo)

Hay muchos defensores de que el mejor framework que puedes usar para programar es el que te construyas tú mismo. Es decir que poco a poco crees una serie de librerías y estructuras de directorio hechas por tí y las utilices en varios proyectos.

En realidad es un ejercicio genial que te aconsejo encarecidamente que hagas. Te enseñará mucho de programación, pero por otra parte a veces no hay tiempo y en muchos proyectos se utilizan frameworks por el simple hecho de que están testados en muchas situaciones y el desarrollo sobre ellos en mucho más rápido.

Trata de identificar cuando realmente necesitas un framework, porque no siempre hará falta, y a veces la intención inicial de hacer el proyecto más rápido puede resultar en horas buscando documentación de funciones que no conoces por el simple hecho de utilizar el framework en vez de PHP simplemente.

Conclusiones

Como habrás podido ver elegir un framework no es algo fácil, sobre todo si el proyecto va a llevar mucho tiempo. Cosas como la documentación o el soporte de ciertas funciones de manera nativa pueden resultar en horas ahorradas de implementación, así que piénsalo bien y trata de echarle un vistazo a varios antes de elegir uno.

Aquí dejo una serie de enlaces para entender más en profundidad los diferentes frameworks y ciertos términos que hemos visto como MVC u ORM.

• Página Oficial de Zend
• Página Oficial de CodeIgniter
• Página Oficial de CakePHP
• Página Oficial de Symfony
• MVC en la wikipedia
• ORM en la wikipedia

En muchas páginas se utilizan sistemas de puntuación. Normalmente suelen ser de 5 estrellas, en los que la gente vota que le ha parecido del 1 al 5. Desde el punto de vista de los desarrolladores plantéa muchas cuestiones interesantes, algunas más complejas que otras. En cualquier caso no es demasiado difícil, por lo que podemos cubrirlo en un solo tutorial.

Aquí vamos a diseñar, implementar y sobre todo explicar como hacer un sistema de puntuación de 5 estrellas con decimales intermedios, por lo que la gente puede votar cosas como 4.5 o 1.5. Además un mismo usuario no podrá votar más de una vez, por lo que intentaremos hacer este sistema de votación lo más acorde con los gustos reales de la media de los usuarios.

Paso 1. Diseño

Antes que nada tenemos que hacer el maquetado del sistema de puntuación. Tenemos que pensar en términos de medias estrellas, porque vamos a admitir la votación de 4.5, por ejemplo, como hemos comentado en la introducción. Esto plantéa la primera dificultad, porque ¿cómo hacemos para unirlas todas? o ¿cómo sabemos que el usuario está seleccionando una u otra parte de la estrella? Podrías pensar en utilizar 5 imágenes, de tres tipos, estrellas vacías, medias estrellas y estrellas enteras. Pero entonces no podrías diferenciar fácilmente si un usuario está en la parte izquierda o en la derecha. Así que es un poco más complicado que eso.

En realidad gran parte de la solución vendrá con jQuery, pero de momento hay un hecho a remarcar. Tenemos que usar sprites. Sprite es una imagen compuesta de varias, que se envía una vez, y con CSS se selecciona la imagen dentro del archivo que queremos mostrar. Normalmente se usa para hacer más rápida la carga de la página, porque el navegador y el servidor sólo se tienen que conectar una vez para pasar todas las imágenes en un solo archivo. Pero en nuestro caso no es esa cuestión la más importante, lo importante es que si no tuviéramos sprites, cuando cambiáramos parte de una estrella tendríamos que enviar el archivo, después de finalizar la carga de la página. Esto supone una carga innecesaria en el ancho de banda fuera de tiempo.

Echemos un vistazo al código HTML, será algo bastante simple, basándonos en nuestra implementación concreta y dado que solo queremos 5 estrellas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="1" class="puntuacion">		
	<div class="estrella estrella_izq"><a title="0.5/5" href="#0.5">0.5</a></div>
	<div class="estrella estrella_der"><a title="1/5" href="#1">1</a></div>
	<div class="estrella estrella_izq"><a title="1.5/5" href="#1.5">1.5</a></div>
	<div class="estrella estrella_der"><a title="2/5" href="#2">2</a></div>
	<div class="estrella estrella_izq"><a title="2.5/5" href="#2.5">2.5</a></div>
	<div class="estrella estrella_der"><a title="3/5" href="#3">3</a></div>
	<div class="estrella estrella_izq"><a title="3.5/5" href="#3.5">3.5</a></div>
	<div class="estrella estrella_der"><a title="4/5" href="#4">4</a></div>
	<div class="estrella estrella_izq"><a title="4.5/5" href="#4.5">4.5</a></div>
	<div class="estrella estrella_der"><a title="5/5" href="#5">5</a></div>
</div> <!-- fin puntuacion #1 -->
 
<div id="num_votos">
	<p>Votos: </p>
</div> <!-- fin #num_votos -->

Cada línea dentro del div con id 1 representa media estrella, probablemente te parezca raro que no haya ningún tag , pero no te preocupes, verás la razón en el código jQuery. Además, para codificar el CSS debemos pensar en cuantos “estados” van a tener nuestras estrellas. La respuesta es 3, uno para cuando esté vacía, otro para cuando esté establecida y otro para el estado hover, cuando un usuario esté poniendo el ratón por encima. Mira este gráfico para aclararte un poco:

Por tanto, en el CSS tendremos en cuenta esto. Y ya que estamos, recordaremos que tenemos sprites, por lo que el fondo, se va a realizar simplemente con CSS sobre la misma imagen. En concreto debemos tener un sprite para la parte derecha de las distintas estrellas y uno para la parte izquierda. Adicionalmente, añadimos un sprite para las estrellas enteras, pero esto es una mera formalidad y en realidad no se usará. Nuestro CSS quedará así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

.puntuacion {
	cursor: pointer;
	margin-right: 5px;
	clear: both;
	display: block;
	float: right;
	overflow: visible;
}  
 
.puntuacion:after {
	content: '.';
	display: block;
	height: 0;
	width: 0;
	clear: both;
	visibility: hidden;
}    
 
.estrella {
	float: left;
	width: 35px;
	height: 35px;
	overflow: hidden;
	display: inline-block;
	text-indent: -999em;
	cursor: pointer;
	margin-top: 1em;
}         
 
.estrella_izq, .estrella_der {
	width: 18px
}
 
.estrella, .estrella a { 
	background: url('imagenes/estrella_sprite.png') no-repeat 0 0px;
}
 
.estrella_izq, .estrella_izq a {
	background: url('imagenes/estrella_sprite_izq.png') no-repeat 0 0px;
}
 
.estrella_der, .estrella_der a {
	background: url('imagenes/estrella_sprite_der.png') no-repeat 0 0px;
}
 
.estrella a {
	display: block;
	width: 100%;
	height: 100%;
	background-position: 0 0px; /* Estrella Vacía */
}
 
div.puntuacion div.on a {
	background-position: 0px -45px; /* Estrella Establecida */
}
 
div.puntuacion div.hover a,
div.puntuacion div a:hover {      
	background-position: 0px -90px;  /* Estrella Hover */
}

Los detalles de como maquetarlo para que quede lo mejor posible no son demasiado importantes, quizá destacar que nos movemos por el sprite para seleccionar los diferentes tipos de estrellas. Además cuando establezcas un elemento con una imagen como background, debes tener en cuenta que si el elemento no tiene ancho definido, debes hacerlo para que el fondo se vea correctamente.

Paso 2. Plugin en jQuery

Para realizar toda la funcionalidad que necesitamos podremos simplemente codificarlo en jQuery, pero de cara a una posible mejora en el futuro, meteremos todo el código en un plugin hecho por nosotros. Así que veamos en primer lugar como se crea un plugin muy rápidamente:

1
2
3
4
5
6
7

// Declaración del plugin
jQuery.fn.plugin_tonto = function(param1, param2) {
	alert('Soy un plugin y estoy funcionando');
};
 
//Llamada al plugin
$('#elemento').plugin_tonto('valor1', 'valor2');

Como puedes ver es muy simple, es importante resaltar, como probablemente ya supongas, que en $(this) dentro del plugin tendremos el elemento que lo ha llamado, en este caso $(‘#elemento’).

Así que ahora empezemos a codificar nuestro plugin de verdad. Debemos tener 1 parámetro, la url donde vamos a mandar los datos para que se procesen (será un script en PHP, que veremos luego). Además este plugin se va a encargar de mucha cosas, por lo que mejor vemos parte por parte desde arriba del código hasta el final.

Funciones con Cookies y estableciendo variables

Aquí vemos como establecemos una serie de variables necesarias para que el plugin funcione, como la url a dónde mandaremos la petición POST, o la serie de estrellas que tenemos en nuestro HTML. Además utilizamos dos funciones para manejar las cookies en javascript plano.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

Este par de funciones se sale del objetivo del tutorial, pero básicamente sirven para establecer y guardar cookies, usando javascript. Si quieres más información la tienes por aquí.

1
2
3
4
5
6
7
8
9

if(url == null) return;
var container = jQuery(this);
 
jQuery.extend(container, {
	puntos: 0,
	url: url
});
 
var estrellas = jQuery(container).children('.estrella');

Línea 6. Establecemos los atributos puntos y url, como si pertenecieran a container. De tal forma que cuando queramos acceder a ellos simplemente haremos container.url o container.puntos

Línea 9. Seleccionamos todas las estrellas (en realidad serán media estrellas) y tendremos un total de 10 elementos en la variable estrellas.

Definiendo eventos sobre las estrellas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

estrellas
		.mouseover(function(){
			  eventos.quitar();
			  eventos.llenar(this);
		})
		.mouseout(function(){
			  eventos.quitar();
			  eventos.reiniciar();
		})
		.focus(function(){
			  eventos.quitar();
			  eventos.llenar(this);
		})
		.blur(function(){
			  eventos.quitar();
			  eventos.reiniciar();
		});
 
//Cuando se hace click en una estrella
estrellas.click(function(){
   	if (readCookie('votado') == null){
		container.puntos = (estrellas.index(this) * .5) + .5;
 
      	$.post(container.url, {
      		"id": $(this).parent().attr('id'),
        	"puntos": $(this).children('a')[0].href.split('#')[1] 
      	});
 
      	createCookie("votado", 1, 365);
 
      	eventos.establecer_de_BD();		
	}   
});

En la primera parte del código establecemos las acciones a realizar cuando pase una de esos eventos predefinidos en jQuery. Todas las llamadas que son eventos.algo pertenecen a un array que definiremos después.

Además definimos el evento click sobre cualquiera de las estrellas. Esto generará que se calcule la puntuación seleccionada y se envía a través del método POST a la url pasada al plugin. Antes de hacer nada para no molestar al servidor si realmente el usuario no puede votar porque ya lo ha hecho, miramos si tiene la cookie que pusimos en una ejecución anterior.

Si realmente es su primera vez votando, se manda la actualización, se establece una cookie para que no vote de nuevo y cuando se ha finalizado el envío se hace una consulta a la BD para actualizar la nueva puntuación. Esto resulta un poco ineficiente pero no quería perder el lado docente del tutorial, y creo que es más claro. En cualquier caso debes tener en mente que se podría devolver la nueva puntuación directamente desde la primera petición POST.

Algunas funciones útiles e inicio de la puntuación

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

var eventos = {
	// llenar hasta la posición del ratón.
	llenar: function(el) { 		
		var index = estrellas.index(el) + 1;
		estrellas
			.children('a').css('width', '100%').end()
			.slice(0,index).addClass('hover').end();
	},
 
	// quitar todas las estrellas.
	quitar: function() { 		
		estrellas
			.filter('.on').removeClass('on').end()
			.filter('.hover').removeClass('hover').end();
	},
 
	// reiniciar el sistema.
	reiniciar: function() { 	
		var unidad = parseInt(container.puntos);
		var decimales = container.puntos - unidad;
		var num_estrellas = (unidad * 2) + 1;
 
		if (decimales >= .5)
			num_estrellas += 1;
 
		estrellas.slice(0, num_estrellas).addClass('on').end();
	},
 
	establecer_de_BD: function() {
		//Establecemos la puntuación desde la BD
		$.post(container.url, { "peticion": 1, "id": estrellas.parent().attr('id') },
		   function(data){
		     $('#num_votos p').html("Votos: " + data.votos); 		     
		     container.puntos = data.puntuacion;  
		     eventos.reiniciar(); 
		   }, "json");
	}
};    
 
//Al principio establecemos el sistema con el valor que corresponde
eventos.establecer_de_BD();
 
return(this);

Línea 3. Ahora creamos un array del que antes hemos hablado, llamado eventos, es un array asociativo compuesto por funciones. En esta línea definimos la primera función, que se encarga de ir componiendo las estrellas con la clase hover, para dar el efecto de llenado progresivo según se mueve el ratón.

Línea 11. Esta función se encarga de quitar el efecto hover cuando dejamos de poner el ratón encima de las estrellas.

Línea 18. Reiniciar es una funcíón para establecer el número de medias estrellas vacías que tenemos, para ello se “parte” el número entre la unidad y los decimales, y se opera con ellos. Los detalles los puedo explicar en los comentarios, pero es relativamente sencillo, teniendo en cuenta que tenemos siempre el doble de elementos por ser medias estrellas. Así que he establecido que si se tiene de X a X.5 se marca la mitad de una estrella, y si se tiene de X.5 a X+1 se tiene otra nueva estrella completa.

Línea 29. Para que el sistema de puntuación funcione necesitamos ver el número de votos y la puntuación de la base de datos y establecerla con la funcion reiniciar. Así que se hace una petición POST y con el resultado en json se establece el resultado.

En la parte final del plugin ejecutamos por primera vez establecer_de_BD para poner el número de estrellas cuando se carga la página así como el número de votos.

Paso 3. Parte servidor con PHP y MySQL

Hasta ahora tenemos una serie de estrellas que al hacer click en ellas nos mandan los datos actualizados y cuando se cargan nos lo piden. Pero de momento no tenemos un script que se encargue de recibir esas peticiones y actuar en consecuencia.

Es por ello que necesitamos pensar en dos cosas, qué vamos a hacer y cómo vamos a guardar los datos de las puntuaciones. Contestemos primero al problema de almacenar las puntuaciones.

MySQL es la solución

Contradiciendo a la navaja de Ockham, en este caso la solución más compleja es la mejor. Y es que podríamos planternos la posibilidad de guardar los votos en un archivo de texto, por ejemplo, pero esto resultaría en problemas de concurrencia, que MySQL resuelve por sí mismo, sin ni siquiera tener que saber como desarrollador que algo llamado concurrencia existe (uno de los temas más complejos en programación, por cierto).

Así que creemos una tabla realmente simple donde meteremos nuestros datos:

Para crearla haríamos lo siguiente con un IDE de bases de datos o desde un terminal:

1
2
3
4
5
6
7

CREATE TABLE puntuaciones
(
id INT(11) NOT NULL AUTO_INCREMENT,
puntos DOUBLE PRECISION NOT NULL,
votos INT(11) DEFAULT NULL,
PRIMARY KEY (id)
) CHARACTER SET=utf8;

Completando el sistema con PHP

Por último necesitamos un archivo de configuración para simplificar la defición de constantes, una clase para facilitar el acceso a la BD y un script (post.php) para recibir y atender las peticiones.

Nuestro esquema de comunicación se puede resumir en algo así, siendo el plugin de jQuery el encargado de comunicarse con el servidor y de lidiar con las votaciones repetidas.

Así que vamos con el primer archivo PHP.Este archivo de configuración será simplemente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
/** El nombre de tu base de datos */
define('DB_NAME', 'nombre_base_de_datos');
 
/** Tu nombre de usuario de MySQL */
define('DB_USERNAME', 'usuario');
 
/** Tu contraseña de MySQL */
define('DB_PASSWORD', 'pass');
 
define('DB_HOSTNAME', 'hostname');
 
/** Codificación de caracteres para la base de datos. */
define('DB_CHARSET', 'utf8');
?>

La clase, llamada puntos.class.php será bastante sencilla también:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?php
 
require_once 'config.inc.php';
 
class Puntos {
 
	private $db;
	private $id;
 
	function __construct($id) 
	{
		$this->db = mysql_connect(DB_HOSTNAME, DB_USERNAME, DB_PASSWORD);	
		mysql_set_charset(DB_CHARSET, $this->db);		
		mysql_select_db(DB_NAME, $this->db);  
 
		$this->id = mysql_real_escape_string($id);	
 
		$query = "INSERT IGNORE INTO puntuaciones (id, votos, puntos) "
		 		."VALUES ($this->id,0,0)"; 
 
		mysql_query($query);
	}

Incluimos el archivo de configuración y en el constructor hacemos tres cosas:

1. Establecemos la conexión con la base de datos.
2. Establecemos como atributo privado de la clase el id del sistema de puntuación que nos pasan.
3. Insertamos una nueva fila con votos y puntuación a 0 si no existía ya.

1
2
3
4
5
6
7
8
9
10

	function getPuntuacion() 
	{						
		$query = "SELECT puntos as puntuacion, votos "
				."FROM puntuaciones "
				."WHERE id = $this->id";
 
		$resultado = mysql_query($query, $this->db); 
 
		return mysql_fetch_assoc($resultado);
	}

Aquí recogemos en un array asociativo la consulta de el número de votos y los puntos que tiene un determinado sistema. Otra vez, lo sabremos por el id que nos pasaron en el constructor y que ya tenemos guardado como atributo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

	function setPuntuacion($puntos) 
	{
		if (isset($_COOKIE['votado'])) {
			return true;
		} else {     
			$puntos = mysql_real_escape_string($puntos);
 
			$query = "UPDATE puntuaciones ".
					 "SET puntos = ((puntos * votos) + $puntos) / (votos + 1), ".
					 "votos = votos + 1 ". 
					 "WHERE id = $this->id";
 
			 return mysql_query($query);
		}
	}
} //Fin de la clase
?>

Este último método mira si se tiene una cookie previamente establecida y si no es así actualiza la base de datos con los puntos pasados como parámetro, aumentando también el número de votos a uno más de los que había. La comprobación de la cookie no es estrictamente necesaria, porque previamente el plugin se ha encargado de ver eso, pero no está de más y no supone casi carga al servidor.

El sistema de establecer una cookie cuando un usuario vote para que no lo haga más no es una solución perfecta, porque se puede saltar fácilmente, pero es una primera aproximación y quizá en un futuro enseñe como mejorar esto. En cualquier caso se puede ver un uso práctico de las cookies con PHP y una aplicación real.

Script que recibe las peticiones

Por último tenemos nuestro archivo post.php en el que recibimos las peticiones:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
//Incluimos la clase puntos
require_once 'puntos.class.php';
 
if (!empty($_POST) && !empty($_POST['id'])) {
       $pt = new Puntos($_POST['id']);
 
	if (!empty($_POST['peticion']) && $_POST['peticion']) {
 
		echo json_encode($pt->getPuntuacion());
 
	} elseif (!empty($_POST['puntos'])) {
 
		echo $pt->setPuntuacion($_POST['puntos']);
	}  
}
 
?>

Línea 8. Nos han hecho una petición para saber el número de votos y la puntuación. Así que llamamos al método definido antes que se encarga de manejar esa petición.

Línea 11. Establecemos la nueva puntuación y aumentamos el número de votos en 1. Nuestro método ya se encarga de comprobar la cookie y de limpiar la entrada de datos, usando mysql_real_escape_string, como hemos comentado antes.

Conclusiones

Si bien es cierto que hay cosas que pulir, como por ejemplo en términos de accesibilidad si no se tiene javascript activado, o de seguridad, para evitar que un usuario pueda saltarse el control que hemos hecho con la cookie, este tutorial cubre muchos puntos, que espero, te hayan sido útiles.

El plugin está basado en uno mucho más complejo y grande que ya va por su versión 3.13. Lo puedes encontrar aquí.

Las estrellas usadas (aunque estaban enteras) son de Customicon Design.

Si tienes cualquier duda, no dudes en preguntar en la sección de comentarios.

Como probablemente sabrás existe en PHP una función en PHP llamada trim. Cuyo funcionamiento básico es quitar los espacios sobrantes a la izquierda y a la derecha de un string dado. Por ejemplo

1
2
3
4
5

<?php
   //String con espacios sobrantes
   $string = "  En un lugar de la Mancha  ";
   echo trim($string);
?>

La salida sería el string sin los espacios del principio y el final:

El problema surge cuando tenemos un string con espacios sobrantes en mitad del string. Algo como esto:

1
2
3
4
5

<?php
   //String con espacios sobrantes en la mitad
   $string_complicado = "  En un          lugar de la Mancha  ";
   echo trim($string_complicado);
?>

En este caso trim no funciona, dado que no hace nada con los que están en medio. Por tanto necesitamos una alternativa para hacer esto, una alternativa en forma de función claro.

Función para quitar los espacios repetidos

Aquí se plantean varias alternativas, una posible solución podría ser con expresiones regulares, pero quizá sea menos clara. Así que utilicemos la función que sale en un comentario de la página de documentación de trim, y añadámosle la línea “$ret_str = “”;” para evitar un error de PHP, la función completa quedaría así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<?php
function quitar_espacios_extra($str)
{
	//Utilizamos trim antes de empezar
	$str = trim($str);	   
 
	//Inicializamos el string que devolvemos
	$ret_str ="";
 
	//Recorremos el string
	for($i=0;$i < strlen($str);$i++) {
		/*Si estamos en algo que no es un espacio, seguimos copiando el 
		string de entrada al de salida */
		if(substr($str, $i, 1) != " ") {
			$ret_str .= trim(substr($str, $i, 1));
		} else {
			/*Si es un espacio nos lo saltamos, aumentando el contador i del bucle*/
			while(substr($str,$i,1) == " "){
				$i++;
			}		
 
			/* Dado que no queremos quitar todos los espacios, sino solo los repetidos
			añadimos un espacio después de habernos
			saltado un nº indeterminado de ellos SI nos saltamos uno, ponemos uno
			SI nos saltamos 20, ponemos uno igual */
			$ret_str.= " ";
			$i--;
		}
	}
	return $ret_str;
}		   
?>

Con esta función, usándolo con el string anterior:

1
2
3
4
5
6

<?php
 //String con espacios sobrantes en la mitad
$string_complicado = "  En un          lugar de la Mancha  ";      
 
echo quitar_espacios_extra($string_complicado); 
?>

La salida sería:

Cualquier duda o error como siempre a la sección de comentarios.

De una forma sencilla, digamos que en principio no es posible acceder desde el javascript de una página en el dominio A a otra en el dominio B.

Es decir, si desde javascript queremos hacer una petición desde www.ejemplo.com/index.html a www.midominio.com/index.html, por motivos de seguridad no podemos.

Hay una forma de acceder a esos datos, y es que si lo hacemos a través del formato JSONP, no hay mayor problema, pero como sabrás, no todas las páginas a las que queremos acceder por lo que sea, tienen el formato JSONP disponible.

¿Cómo se resuelve esto? Pues aquí es cuando entra Simple PHP Proxy.

Simple PHP Proxy

Para acceder a una página que no está en nuestro dominio y no tiene el formato JSONP, utilizamos esta clase.

La idea es que el servidor donde se va a ejecutar nuestro código haga una copia local de la página a la que vamos a acceder a través de Javascript, y así no estamos haciendo cross-domain, estamos en nuestro servidor!

Te podrías plantear la duda de: ¿y por qué no lo hago a mano? Bueno el problema es que las páginas cambian y hacerlo de manera manual, cada vez que quieras acceder a otro dominio te va a ser casi imposible.

Cómo utilizar Simple PHP Proxy

En la página de ejemplo podemos ver como funciona y el código en sí, en el que se utiliza para mostrar las cabeceras de un dominio que se le pase a través de Javascript, lo que demuestra que ha podido acceder a ese dominio superando así el problema del cross-domain.

Enlaces

Página del proyecto | benalman.com
Código y seguimiento | Github
Documentación más exhaustiva | benalman.com
Código fuente de Simple PHP Proxy | Descarga

La idea es poder hacer de un archivo amplio, con saltos de línea y espacios innecesarios para el funcionamiento del archivo, un archivo sin espacios, ni saltos de línea…etc de tal forma que reduzcamos su tamaño y nuestra página cargue más rápido.

Cómo hacerlo

Para poder hacer esto necesitamos un lenguaje, en este caso PHP en un simple script al que le indiquemos que archivos queremos cambiar. Echemos un vistazo al código necesario:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
  header('Content-type: text/css');
  ob_start("compress");
 
  function compress($buffer) {
    /* quitamos comentarios */
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    /* quitamos espacios en blanco, salto de lineas..... */
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }
 
  /* incluimos los archivos css que queremos comprimir */
  include('master.css');
  include('print.css');
 
  ob_end_flush();
?>

Este método es de Reinhold Weber y personalmente, me parece uno de los más fáciles de entender. (fuente) Además hay que tener en cuenta que si incluimos más de uno los combinará en uno solo.

Los archivos que se les pasen, no tienen por qué estar en el mismo directorio, se le puede pasar una ruta, por supuesto.

Si tienes cualquier problema con el script a la sección de comentarios.

Un sistema de plantillas (template engine) es un framework que te permite separar la vista del modelo y el controlador (MVC) de manera casi obligatoria.

Por motivos de trabajo durante algunos meses me tocó pelearme con un sistema de plantillas llamado Smarty. Vamos a ver qué nos ofrece y como utilizarlo.

Parte PHP

El paso de variables desde PHP es realmente sencillo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//Llamamos a la clase de Smarty
require_once("Smarty/libs/Smarty.class.php");  
 
//Creamos nuestra plantilla
$miSmarty = new Smarty();         
 
//Configuramos los directorios
$miSmarty->template_dir = 'templates';
$miSmarty->config_dir = 'config';
$miSmarty->cache_dir = 'cache';
$miSmarty->compile_dir = 'templates_c'; 
 
//Asignamos variables
$miSmarty->assign("titulo", "Formulario de Consultas");
$miSmarty->assign("fecha_hoy",date("m.d.y"));           
 
//Nos guardamos el html y lo mostramos
$html_final = $miSmarty->fetch("miplantilla.tpl");
echo $html_final;                            
 
//O mostramos la plantilla
$miSmarty->display("miplantilla.tpl.html");

Parte Smarty

Teniendo el codigo anterior veamos que pinta tendría nuestra plantilla (miplantilla.tpl.html)

1
2
3
4
5
6
7
8
9
10
11
12

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{*Comentario en Smarty*}
<title>{$titulo}</title>
</head>
<body>         
 
{*Notese que usamos siempre el mismo 
nombre que le pusimos en el script de PHP*}
Hoy estamos a {$fecha_hoy}
</body>
</html>

Precauciones sobre el uso

Cuando utilicemos Javascript tenemos que empezar antes del código con {literal} y después terminamos con {/literal}.

Esto, como podrás suponer, es para que no haya lío entre la sintaxis de javascript y el sistema de plantillas. Si en mitad del código de js queremos introducir código smarty simplemente hacemos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   {literal}
   <script>
   //código javascript
   var fecha = {/literal}{$fecha_hoy}{literal};
   //Más código 
   </script>
   {/literal}
 </head>
 
 <body>
  ...
 </body>
</html>

Enlaces

• Descarga
• Instalación
• Documentación

Google Sets es un servicio de Google, que permite obtener palabras del mismo conjunto que las que introducimos. Es decir, si damos ‘rojo’,'verde’, obtenemos

Su uso es muy amplio, desde simple admiración por lo que Google ha llegado a acumular en cuanto a información se refiere, hasta black SEO, utilizando como palabras relacionadas lo que nos devuelva.

El problema es que solo hay una interfaz web, no existe una API ni nada parecido, por lo que he decidido crear una clase en PHP, que permita obtener de manera medianamente sencilla, un array con todas las palabras. En un alarde de originalidad la he llamado Gooset.

Para ello he hecho uso de PHP Simple HTML DOM Parser, que es una clase para parsear html (recomendada 100%).

Después he hecho la clase y en el constructor ya obtengo todo el conjunto, de tal forma que solo hace falta llamar al método get_set para que nos lo devuelva en un array.

La clase en si es muy simple, de todas formas si tienes alguna duda no dudes en usar los comentarios

Uso

1
2
3
4
5
6

<?php
include('./gooset.php');
$obj_gooset = new gooset('bmw','ferrari');
foreach($obj_gooset->get_set() as $elemento)
	print($elemento . '</br >'); 
?>

Salida:

1
2
3
4
5
6
7
8
9
10
11
12

bmw 
ferrari 
ford
honda
audi
hyundai
jaguar
chrysler
chevrolet
jeep
kia
...

El máximo de parámetros son 5. Con un número mayor el resultado no cambia, así que en ese caso se devuelve un error a través de una expepción, lo que es un punto a favor, puesto que después de eso no tenemos que comprobar nada (en PHP el script se para cuando se eleva una excepción).

1
2
3
4
5
6

<?php
include('./gooset.php');
$obj_gooset = new gooset('bmw','ferrari','mercedes','audi','hummer','jaguar');
foreach($obj_gooset->get_set() as $elemento)
	print($elemento . '</br >');
?>

Salida:

1

Error de uso: 5 elementos máximo

Descarga desde GitHub