How to install Masugadesign PHP AJAX Star Rater in your Wiki Skin Template

From Sudelwiki

Jump to: navigation, search

Note: It took me a looooooooong time to get this going, so i wrote this little HowTo/Manual/Tutorial.

Contents

License

This work is licensed under a Creative Commons Attribution 3.0 License.

Respect the Ancestors of the Code by giving credit and praising their names in the Earthlings-Who-Wrote-Code-Hall-Of-Fame.

Give credit. Give Props. In your Source Code and on the Site where you use it. To all Ancestors of this Code, who are listed here:

And yes - i added my tiny little bit of work to this thing by changing some lines and especially by writing the very Documentation-Page your are reading right now. So link me too - i wanna be a part of that gdfb-Code-Hall-Of-Fame. Yes. Attribute me with a simple Link to

http://ooommm.org


Peace.


And now, on with the program and back to the Code.

This Version

This Code is the slightly enhanced Version of the AJAX Star Rater Version 1.22 by masugadesign.


I adapted it, so that it can be called from Mediawiki-Skin-Templates and through that be used to add a Rating-Bar to every Article-Page in your Wiki in a hardcoded-way, so that Wiki-Users can't remove the Rating-Bar from the Articles (which would be possible with all other Article-Rating-Extensions known to me, inform me at wikiratingmadeeasy@ooommm.org if i am wrong).

Setting up your Database

Yes. You need a MySQL-Database on your WebSpace to run this Script. If you have no MySQL-Database maybe try this PHP-Rating-Script from gr0w.com.


I used the same Database that my Mediawiki-Installation uses, to keep things simple and in one place.


I used the phpMyAdmin-Interface of my Webspace-Provider to setup a new Table to store the Votings from the Rating-Box - if you got direct access to the commandline of your MySQL-Database no problem neither - if you got neither phpMyAdmin nor Commandline-Access then you need to ask your Provider or Admin to set up this new table for you.


Here is the SQL-Code that i used to create my table. I chose to give my new table the same table_prefix as the rest of my Mediawiki, so that i later easily know it belongs to my MediaWiki-Installation and to make backing up my whole Wiki easier. Login to your phpMyAdmin-Interface, click on SQL, enter the following SQL-Code into the opening Window that phpMyAdmin shows you and click on OK if you are ready.

SQL-Code: 

CREATE TABLE `wiki_ratingbox` (
  `id` varchar(100) NOT NULL,
  `total_votes` int(11) NOT NULL default '0',
  `total_value` int(11) NOT NULL default '0',
  `used_ips` longtext,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

The Files in the Original 1.22 Package, what they do, which we need, and which and how we gonna change them

If you download the AJAX Star Rater Version 1.22 and extract the ZIP-File you get a bunch of files. Here i explain which ones we get, which ones we need, and especially in which files we need to change a few lines.


To make things easier: download the package, extract the .zip-File on your Computer, then upload the files to your Wiki-Server into the Directory: extensions/ratingbox .


Original Package: 

_config-rating.php  
_drawrating.php  
db.php  
rpc.php
index.php  
readme.txt  

css/default.css  
css/rating.css

images/starrating.gif  
images/working.gif

js/behavior.js  
js/rating.js

Files we don't need to run the Rating-Box, delete them if you like to: 

readme.txt              = we read it, but we don't need it 
index.php               = just an example file
css/default.css         = just an example-css for the example-index.php-file

Files we need, what they do, and what we gonna change in them, in short: 


_config-rating.php      = most important config-File where we set DB-Host/-Name/-User/-Pass/-TableName and some Path-Variables

_drawrating.php         = contains the function rating_bar() that we call from our skins/Skin.php, 
                          we need to change 4 lines - 3 mySQL-Queries & 1 Path (the Path to dp.php)

db.php                  = does the DB-Update if JS is disabled, we need to change 4 lines - 3 mySQL-Queries & 1 RegEx on 1 Variable ($id_sent)

rpc.php                 = does the DB-Update if JS is enabled, we need to change 5 lines - 4 mySQL-Queries & 1 RegEx on 1 Variable ($id_sent) 

css/rating.css          = the CSS for the rating-bar, we don't need to change anything, but we can, if we want pink elephants instead of stars for ex.

images/starrating.gif   = the Stars ;) 
images/working.gif      = the "Waiting Circle" that noone likes ;)

js/behavior.js          = the JavaScript-File where we don't have to change anything 
js/rating.js            = the JavaScript-File where we have to change 1 line by adapting the Path to rpc.php according to your installation


Changing the Files

Don't Panic! It might look like a lot of work in the beginning, it's really only a few things in a few lines in the end. Let's go.

We are talking about changing the Original Version 1.22 Files here. Shortcut:

  • Write your DB-Connection-Values to _config-rating.php
  • In _drawrating.php, db.php and rpc.php we replace $rating_dbname.$rating_tableName with $rating_tableName or in other words: we remove all instances of $rating_dbname. (Mind the DOT) from the files _drawrating.php, db.php and rpc.php.
  • In _drawrating.php we add '.$rating_path_db.' in Line 80 before db.php
  • In db.php (line 21) and rpc.php (line 22)
    • we replace the original $id_sent-RegEx /[^0-9a-zA-Z]/
    • with this one /[^0-9a-zA-Z\.\s\-]/
      • so that we can use Spaces, Dots and - in our Page-Titles (which happens quite often in Wikis)
        • Slashes or other Symbols could easily be added (guess i should do that), but beware of taking everything, because of possible MySQL-Injections.
          • Added -

If you understand the Shortcut-Edit explained above, you are already done. If not - fine, too - just read on in the detailed Section where every line you need to change is listed. Simply copy the replacement-line and replace the original-line in your files with that one.


_config-rating.php

_config-rating.php

  • most important config-File where we set DB-Host/-Name/-User/-Pass/-TableName and some Path-Variables. 
	//Connect to  your rating database
	$rating_dbhost        = 'mysql.yourhost.com';          //might be localhost as well
	$rating_dbuser        = 'username';
	$rating_dbpass        = 'password';
	$rating_dbname        = 'dbname';
	$rating_tableName     = 'wiki_ratingbox';
	$rating_path_db       = '/wiki/extensions/ratingbox/'; // the path to your db.php file (is in use, set this!)	
	$rating_path_rpc      = '/wiki/extensions/ratingbox/'; // the path to your rpc.php file (not used yet!)	
	
	$rating_unitwidth     = 30;                            // the width (in pixels) of each rating unit (star, etc.)
 	                                                       // if you changed your graphic to be 50 pixels wide, you should 
                                                               // change the value above
	
	$rating_conn = mysql_connect($rating_dbhost, $rating_dbuser, $rating_dbpass) or die  ('Error connecting to mysql');
	mysql_select_db($rating_dbname);                       // IMPORTANT - This was commented out when i downloaded the package!!!

_drawrating.php

_drawrating.php

  • contains the function rating_bar() that we call from our skins/Skin.php,
  • we need to change 4 lines
    • 3 mySQL-Queries
    • 1 Path (the Path to dp.php)

Basically we replace $rating_dbname.$rating_tableName with $rating_tableName or in other words: we remove all instances of $rating_dbname. (Mind the DOT) from the files _drawrating.php, db.php and rpc.php.

In Line 80 we add '.$rating_path_db.' db.php

Line 24

Original: 

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

Replacement: 

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

Line 30

Original: 

$sql = "INSERT INTO $rating_dbname.$rating_tableName (`id`,`total_votes`, `total_value`, `used_ips`) VALUES ('$id', '0', '0', '')";

Replacement: 

$sql = "INSERT INTO $rating_tableName (`id`,`total_votes`, `total_value`, `used_ips`) VALUES ('$id', '0', '0', '')";


Line 46

Original: 

$voted=mysql_num_rows(mysql_query("SELECT used_ips FROM $rating_dbname.$rating_tableName WHERE used_ips LIKE '%".$ip."%' AND id='".$id."' "));

Replacement: 

$voted=mysql_num_rows(mysql_query("SELECT used_ips FROM $rating_tableName WHERE used_ips LIKE '%".$ip."%' AND id='".$id."' "));


Line 80

Original: 

$rater.='<li><a href="db.php?j='.$ncount.'&q='.$id.'&t='.$ip.'&c='.$units.'" title="'.$ncount.' out of '.$units.'" class="r'.$ncount.'-unit rater" rel="nofollow">'.$ncount.'</a></li>';

Replacement: 

$rater.='<li><a href="'.$rating_path_db.'db.php?j='.$ncount.'&q='.$id.'&t='.$ip.'&c='.$units.'" title="'.$ncount.' out of '.$units.'" class="r'.$ncount.'-unit rater" rel="nofollow">'.$ncount.'</a></li>';


db.php

In db.php we replace $rating_dbname.$rating_tableName with $rating_tableName.

Or in other words: we remove all instances of $rating_dbname. (Mind the DOT) from the file db.php.


In db.php (line 21)

  • we replace the original $id_sent-RegEx /[^0-9a-zA-Z]/
  • with this one /[^0-9a-zA-Z\.\s\-]/

Line 21

Original: 

$id_sent = preg_replace("/[^0-9a-zA-Z]/","",$_REQUEST['q']);

Replacement: 

$id_sent = preg_replace("/[^0-9a-zA-Z\.\s\-]/","",$_REQUEST['q']);


Line 30

Original: 

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

Replacement: 

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


Line 47

Original: 

$voted=mysql_num_rows(mysql_query("SELECT used_ips FROM $rating_dbname.$rating_tableName WHERE used_ips LIKE '%".$ip."%' AND id='".$id_sent."' "));

Replacement: 

$voted=mysql_num_rows(mysql_query("SELECT used_ips FROM $rating_tableName WHERE used_ips LIKE '%".$ip."%' AND id='".$id_sent."' "));


Line 52

Original: 

$update = "UPDATE $rating_dbname.$rating_tableName SET total_votes='".$added."', total_value='".$sum."', used_ips='".$insertip."' WHERE id='$id_sent'";

Replacement: 

$update = "UPDATE $rating_tableName SET total_votes='".$added."', total_value='".$sum."', used_ips='".$insertip."' WHERE id='$id_sent'";

rpc.php

In rpc.php we replace $rating_dbname.$rating_tableName with $rating_tableName.

Or in other words: we remove all instances of $rating_dbname. (Mind the DOT) from the file rpc.php.


In rpc.php (line 22)

  • we replace the original $id_sent-RegEx /[^0-9a-zA-Z]/
  • with this one /[^0-9a-zA-Z\.\s\-]/

Line 22

Original: 

$id_sent = preg_replace("/[^0-9a-zA-Z]/","",$_REQUEST['q']);

Replacement: 

$id_sent = preg_replace("/[^0-9a-zA-Z\.\s\-]/","",$_REQUEST['q']);

Line 31

Original: 

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

Replacement: 

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

Line 48

Original: 

$voted=mysql_num_rows(mysql_query("SELECT used_ips FROM $rating_dbname.$rating_tableName WHERE used_ips LIKE '%".$ip."%' AND id='".$id_sent."' "));

Replacement: 

$voted=mysql_num_rows(mysql_query("SELECT used_ips FROM $rating_tableName WHERE used_ips LIKE '%".$ip."%' AND id='".$id_sent."' "));


Line 52

Original: 

$update = "UPDATE $rating_dbname.$rating_tableName SET total_votes='".$added."', total_value='".$sum."', used_ips='".$insertip."' WHERE id='$id_sent'";

Replacement: 

$update = "UPDATE $rating_tableName SET total_votes='".$added."', total_value='".$sum."', used_ips='".$insertip."' WHERE id='$id_sent'";



Line 57

Original: 

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

Replacement: 

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

js/rating.js

One simple change.

We only need to tell the JavaScript where to find the rpc.php - so we simply add your complete Wiki-Path BEFORE the rpc.php in Line 65.

Line 65

Original: 

xmlhttp.open('get', 'rpc.php?j='+vote+'&q='+id_num+'&t='+ip_num+'&c='+units);

Replacement: 

xmlhttp.open('get', '/wiki/extensions/ratingbox/rpc.php?j='+vote+'&q='+id_num+'&t='+ip_num+'&c='+units);

Embedding the Rating-Box in your Wiki-Skin

There are only two Code-Snippets we have to add to our Wiki-Skin-File.

This Example works well on the standard-skin MonoBook.php which should be in the Directory skins/.

Code Snippet 1: Adding the CSS- and JavaScript-Files of the Rating-Bar to the HEAD of your Skin-File

Add this piece of Code right BEFORE the closing /head-Tag of your skins/MonoBook.php and adapt the Path-Values according to the directory where you dropped the files. 

<!-- CSS & JS for Rating-Bar - add this Code right BEFORE the closing-/head-tag in your skins/MonoBook.php -->
<script type="text/javascript" language="javascript" src="/wiki/extensions/ratingbox/js/behavior.js"></script>
<script type="text/javascript" language="javascript" src="/wiki/extensions/ratingbox/js/rating.js"></script>
<link rel="stylesheet" type="text/css" href="/wiki/extensions/ratingbox/css/rating.css" />

Code Snippet 2: Adding the Div-Block aka Rating-Box with the Rating-Bar to the Top-Right-Corner of your Articles

Add this piece of Code right AFTER the first closing-/h1-Tag in your skins/MonoBook.php-File.


Adapt the Path extensions/ratingbox/_drawrating.php according to your installation. 

<?php
/** 	Adding a Div-Block with a Star-Rating-Bar to let users rate the Article
		The Div-Block is only shown on Article-Pages.
		
		Attention: The CSS and JS Files for the Rating-Bar have to be called in the <head></head>-Section 
		of your SkinFile.php (for example MonoBook.php).	
		
		To Add the Star-Rating-Bar to all of your Wiki-Articles paste the very Piece of Code you are reading right now 
		after the first closing-</h1>-tag after this section in your SkinFile.php (for example MonoBook.php)
		<h1 id="firstHeading" class="firstHeading">...</h1>
		PASTE HERE								
*/				
global $wgOut;
	if($wgOut->isArticle()) { // checking if we are on an Article-Page as we want to display the Rating-Box only on Articles 

		echo '
		<div style="width:400px;					
			    height:600px;
			    background-color:#ff3399; 	
			    float:right;
			    margin-left:5px;
			    margin-top:10px;
			    padding:3px;						
		">'; // change width, height and the color according to your needs - this pink is just for testing
	
	        echo '<p>Hard-Coded, Skin-embedded MonsterDIV</p>'; // just to let you know
			
		require('extensions/ratingbox/_drawrating.php');  // adapt to the Path where you dropped the Scripts

		global $wgTitle;  // make the $wgTitle variable accessible			

		echo rating_bar($wgTitle,''); // call the rating_bar()-function in _drawrating.php, second Param to set Rating-Range from 2-10 Stars

		echo '</div>';				
	}
?>


Weblinks on the AJAX Star Rater and its Configuration

Original Version 1.22 Package of the AJAX Star Rater at Masugadesign.com:


Extended Version of the AJAX Star Rater from Masugadesign @ Mindtouch:


Installation-Tips on the AJAX Star Rater from Masugadesign @ Codeigniter.com:


Weblinks on PHP/MySQL-Syntax-Errors - Tips on posting variables via PHP to MySQL-Databases [in German Language]:


Using PHP-Variables in JavaScript

Retrieved from "http://www.ooommm.org/sudelwiki/How_to_install_Masugadesign_PHP_AJAX_Star_Rater_in_your_Wiki_Skin_Template"
Personal tools