Legales

Extensión de MediaWiki: AJAX Rating

English | Español

Esta extensión fue inspirada en AjaxRatingScript, encontrada en el MediaWiki Extension Matrix. La extensión estaba tan mal hecha que después de darme la cabeza contra la pared durante una hora, decidí aprender el mecanismo de hooks de MW y rehacerla desde cero.

Encontrarás una demo funcional al final de esta página.

[editar] Cosas que vas a necesitar

Unobtrusive Ajax Star Rating Bar (descarga directa v122)
MediaWiki 1.5.0 (o superior)

También podés bajar nuestra propia versión de Ajax Star Rating, traducida al español y preparada para funcionar en el directorio/mediawiki/extensions/Ratings.

[editar] Crear tabla MySQL

Creá esta tabla en tu base de datos:

CREATE TABLE `ratings` (
  `id` varchar(11) NOT NULL,
  `total_votes` int(11) NOT NULL DEFAULT 0,
  `total_value` int(11) NOT NULL DEFAULT 0,
  `used_ips` longtext,
  PRIMARY KEY  (`id`)
) TYPE=MyISAM AUTO_INCREMENT=3;

[editar] Bajar el script

Bajar y descomprimir Ajax rating script en una carpeta llamada /extensions/Ratings.

El script no está preparado para ser invocado desde otra ruta más que la misma en donde se encuentra (si... yo pensé lo mismo), así que vas a tener que ajustar algunos valores para que funcione transparentemente:

_config-rating.php: Cargá tu información de MySQL.
_drawrating.php: Agregá el path completo a db.php. En mi caso, sería /mediawiki/extensions/Ratings/db.php
js/rating.js: Agregá el path completo a rpc.php. En mi caso, /mediawiki/extensions/Ratings/rpc.php

Para traducir el script a otro idioma, vas a tener que modificar los siguientes archivos: _drawrating.php, js/rating.js, db.php y rpc.php.

[editar] Extensión para MediaWiki

Creá un archivo llamado AjaxRating.php en tu directorio /extensions de MW:

<?
 
# Config
$mwRatingsPath = '/mediawiki/extensions/Ratings/';
 
# Credits
$wgExtensionCredits['parserhook'][] = array(
    'name'=>'AJAX Rating Script (corrected and really unobtrusive)',
    'author'=>'Nicol&aacute;s Alen - nicolas.alen@elserver.com',
    'url'=>'http://www.elserver.com/wiki/MediaWiki_Extension_AJAX_Rating',
    'description'=>'Adds .',
    'version'=>'0.1.1'
);
 
$wgHooks['ParserBeforeTidy'][] = 'myParserBeforeTidy';
function myParserBeforeTidy(&$parser, &$text )
{
	global $action, $mwRatingsPath;
	if ($parser->getTitle()->mNamespace != 0 || $action != "view")
		return;
 
	require_once("Ratings/_drawrating.php");
 
	// Rating HTML
	ob_start();
	?>
	<script type="text/javascript" language="javascript" src="<?=$mwRatingsPath?>js/behavior.js"></script>
	<script type="text/javascript" language="javascript" src="<?=$mwRatingsPath?>js/rating.js"></script>
	<link rel="stylesheet" type="text/css" href="<?=$mwRatingsPath?>css/rating.css" />
	<?=rating_bar($parser->getTitle()->mArticleID,'5','',$mwRatingsPath)?>
	<?
 
	$out = ob_get_contents();
	ob_end_clean();
 
	// Append HTML to pre-tidy wiki HTML
	$text .= $out;
}
 
?>

Corregí el path completo a la ruta de tu MW:

$mwRatingsPath = '/mediawiki/extensions/Ratings/';

Finalmente, activá el código insertando la siguiente línea en tu archivo LocalSettings.php:

require_once("$IP/extensions/AjaxRating.php");

[editar] Hacks y modificaciones

Un par de modificaciones que pueden resultarte utiles, sobre todo si vas a usar el script con otra cosa que no sea un wiki

Modificacion 1) El paquete original de masugadesign es excelente, pero requiere que nosotros creemos previamente un registro en la tabla 'ratings' con el id del item sobre el que queremos votar. Para automatizar esta tarea y no tener que crearlos manualmente, podemos agregarlo automaticamente en caso que no se encuentre creado. Basicamente modificando el archivo "rpc.php" del paquete original.

Luego de la linea:

$query = mysql_query("SELECT total_votes, total_value, used_ips FROM $rating_dbname.$rating_tableName WHERE id='$id_sent' ")OR die(" Error: ".mysql_error());

Agregar lo siguiente:

IF (mysql_num_rows($query) == 0) {
$sql = "INSERT INTO $rating_tableName  (`id`,`total_votes`, `total_value`, `used_ips`) VALUES ('$id', '0', '0', '')";
		$result = mysql_query($sql) OR die(" Error: ".mysql_error());
	}

Modificacion 2) Si queremos mejorar el feedback al usuario al momento de votar, podemos agregar un cartelito que vaya cambiando cuando el usuario mueve el mouse sobre las estrellitas, para que sea más claro el puntaje que otorga cuando esta votando. Pueden ver un ejemplo de esta modificacion al votar en un sitio de fotos de chicas desnudas.

Para lograr este efecto vamos a recurrir a javascript, agregando la siguiente funcion en ratings.js:

function showVote( val ) {
	var display = "";
	switch ( val ) {
		case 0:
			display = "Vota esta foto!";
			break;
		case 1:
			display = "No me gusta";
			break;
		case 2:
			display = "Pasable";
			break;
		case 3:
			display = "Linda";
			break;
		case 4:
			display = "Hermosa";
			break;
		case 5:
			display = "Me caso!";
			break;
	}
 
	document.getElementById( "tipVotos" ).innerHTML = display; 
 
}

Obviamente, reemplazando los valores de la variable "display" de manera que se ajusten a tu sitio, y agregando mas cases en caso de que tengas más de 5 estrellitas.

En segundo lugar, para que el valor de display se muestre en tu sitio, modificas el archivo "_drawrating.php" agregando algo como:

$rater.='<p id=\"tipVotos\">Vota esta foto!</p>';

Después de la parte que abre el div donde muestra las estrellitas, pero antes de que comienze el ul, revisa el archivo porque varía el lugar segun la version que tengas descargada.

Finalmente, para llamar a la funcion de javascript al pasar por las estrellitas, agregamos lo siguiente:

rel="nofollow" onmouseover="showVote(<?php echo $ncount ?>);" onmouseout="showVote(0);"

En la parte que genera los links, dentro de los li del ul de las estrellitas. El rel="nofollow" es solamente para que google no vaya votando como si fuera un visitante normal.

Modificaion 4: En algunos casos, el css no funciona correctamente por incompatibilidades con el css del resto del sitio. Si en algun lado de tu sitio anteriormente definiste "position:relative", es muy posible que tengas que agregar position:static en ".unit-rating li" para que funcine bien.