Viele Webseiten und Blogs beinhalten eine Bewertung von Links, Downloads, Artikeln oder anderes. Meistens ist diese Bewertung in Form von Sternen, Punkten oder Prozentzahlen realisiert. Bei einigen dieser Seiten ist diese Bewertungsfunktion inzwischen mittels Ajax realisiert. Dadurch entfällt ein lästiges Aufrufen einer neuen Seite zur Bewertung. Ein klarer Vorteil für Besucher also.

Ich arbeite momentan an einem neuen, eigenen Webprojekt für welches ich eine einfache Möglichkeit gesucht habe, mittels Ajax aufgelistete Seiten zu bewerten. Ich bin nach ein wenig Suchen auf die Ajax Star Rating Bar gestoßen. (siehe Bild)

Dieser habe ich mich heute ein wenig gewidmet und möchte euch kurz meine Erfahrungen mitteilen.

Für die Rating Bar wird PHP und Mysql benötigt. Damit der Ajax-Vorteil ausgespielt wird muss der Besucher natürlich JavaScript aktiviert haben. Aber es funktioniert auch ohne. Dann wird mit der Bewertung einfach die komplette Seite neu aufgerufen.

Die Ajax Star Rating Bar kann kostenlos unter Masuga Webdesign heruntergeladen werden. Das Paket besteht aus 4 PHP, 2 Javascript und einer CSS Datei und ist knapp 50 KB groß. Die Installation der Bewertungs Bar ist kinderleicht und ist in der readme.txt genau beschrieben. Daher werde ich diese nur kurz zusammenfassen.

Installation:

Um die Bewertungen zu speichern wird eine neue Tabelle in deiner MySQL Datenbank benötigt. Dazu wird ein kleines SQL Code Schnipsel bereits vom Hersteller mitgegeben.

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;

Am einfachsten ist es, diesen SQL Code einfach mit phpmyadmin ausführen zu lassen. Aber es geht natürlich auch ein Aufrufen mit einer einfachen PHP Datei.

Als nächsten Schritt muss man die Zugangsdaten der Datenbank in der _config-rating.php konfigurieren, damit die Ajax Bar auch auf die Datenbank zugreifen kann. Nun kann man die Dateien in seine eigentliche Seite einbinden. Dazu ruft man möglichst am Anfang seiner index.php die _drawrating.php auf, die dann alle anderen erforderlichen Dateien mit einbindet.

require('_drawrating.php');

Ebenfalls einzufügen sind nun noch die JavaScript und CSS Dateien. Dies geschieht ganz normal im Header der Seite.

Schlussendlich kann man dann die Rating Bar an gewünschter Stelle einbinden. Dazu wird im ersten Parameter die ID und im zweiten die Anzahl der Sterne übergeben. Die ID wird dazu benötigt das die verschiedenen Bewertungen auseinander gehalten werden können. Wenn man sein Bewertungssystem nun z.B. bei einem Downloadscript einbindet, kann man hier die ID des jeweiligen Downloads der Rating Bar übergeben.

echo rating_bar('8'); // 10 stars (default), ID of 8
echo rating_bar('8xxa','5'); // 5 stars, ID of 8xxa
echo rating_bar('9b',''); // 10 stars, ID of 9b

Falls die Installation bei dir nicht klappen sollte, schreib einfach einen Kommentar, ich helfe gerne.

Anpassung

Wesentlich interessanter als die Installation ist natürlich, wie man die Bewertungssterne nun designtechnisch an seine Seite anpasst. Als Erstes haben wir hier natürlich die rating.css Datei, in der wir bestehende Style-Angaben einfach ändern können.

In der _drawrating.php steht dann der HTML Code, der ausgegeben wird. Dort kann man beispielsweise die Textausgabe (standard = 1. Rating 3.0/8 (12 Votes cast) umschreiben oder löschen, wenn man nur die Bewertungssterne anzeigen lassen will. Der Kreativität sind keine Grenzen gesetzt ;)

In der rpc.php findet sich die Ausgabe, die aufgerufen wird falls jemand votet. Standard mässig wird ein grüner Text “Thanks for Voting” angezeigt.

Was wohl mit am meisten geändert wird, sind die Grafiken der Sterne. Diese sind von Haus aus leider recht groß geraten. Für diese Änderung der Sterne muss außer dem Ersetzen der Grafik auch die definierte Breite und Höhe in der rating.css auf die neuen Größenangaben geändert werden. Zudem muss in der _config-rating.php die Variable $rating_unitwidth auf die richtige Breite deiner eingesetzten Grafik konfiguriert werden.

Falls ihr hier vor irgenwelchen Problemen steht, schreibt mir einfach ;)

Fazit

Die Ajax Star Rating Bar ist eine simple Möglichkeit, ein schnelles und cooles Bewertungssystem auf deiner Homepage zu installieren. Mit ein wenig rumspielen kann man die Bewertung individuell gestalten und an seine Website anpassen.