In der neuen Kategorie “Link Tipps” gibt es Empfehlungen für externe Seiten, Tools und Scripts, die für Webentwickler interessant sind. Heute MiniAjax…

Auf MiniAjax.com gibt es eine Auflistung von insgesamt 55 Ajax Scripts. Diese einzelne Tools können meist schnell und einfach in die eigene Web-Anwendung integriert werden ohne das man AJAX wirklich beherschen muss.

Es finden sich beispielsweise Ajax Slideshows, Tabs Scripts, Ajax Poller Script, Form Validation, Bubble Tool Tips, Star Rating Bar, Prototype Windows, Instant Messanger, Sort Tables, Diagramms und Chart Scripte, die alle auf Ajax basieren.

Die Links verweisen auf die Entwickler-Sites auf denen meist noch ein passendes Tutorial zu den Ajax Helferein geboten wird. Ich selbst habe durch die Seite schon die ein oder andere nützliche Anwendung gefunden, die ich in eigenen Projekten verwenden konnte.

Über die Ajax Star Rating Bar habe ich sogar schon ein Tutorial geschrieben.

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)

ajax rating barDieser 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.

<script type="text/javascript" language="javascript" src="js/behavior.js"></script>
<script type="text/javascript" language="javascript" src="js/rating.js"></script>
<link rel="stylesheet" type="text/css" href="css/rating.css" />

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.

und wieder erblickt ein neuer Blog das Licht der Welt ;)

Auf Web:Manual wird es rund um das Thema Webentwicklung gehen, mit dem ich mich seit nunmehr 5 Jahren intensiv beschäftige. Ich möchte einfach meine Erfahrung in Form von Anleitungen, Tutorials, Tipps und Tricks weitergeben und hoffentlich selbst noch viel Neues hinzulernen.

Die Hauptthemen werden darausfolgend PHP, XHTML & CSS, AJAX und SEO sein. Des Weiteren werde ich ab und zu über Content Management Systeme schreiben, insbesondere Wordpress.

Es würde mich freuen, wenn ihr hier ab und zu vorbeischaut und auch fleissig kommentiert!


You are viewing a mobilized version of this site...
View original page here

Mobilized by Mowser Mowser