Start Blog Tutorial PHP und MySQL Tagcloud (Schlagwortwolke)

PHP und MySQL Tagcloud (Schlagwortwolke)

Tagcloud ScriptWenn die Artikel oder Beiträge auf einer Homepage oder in einem Blog mit Schlagwörtern (sog. Tags) versehen werden, kann man dem Benutzer eine Schlagwortwolke (sog. Tagcloud) zur Verfügung stellen. Diese Tagcloud bietet dem Benutzer eine Übersicht an verwendeten Tags und kann gleichzeitig als Navigation oder Suche bzw. Filter benutzt werden. In diesem Tutorial zeige ich, wie die Datenbank strukturiert werden muss und wie die Tagcloud mit PHP programmiert wird.

Eine Tagcloud kann dem Benutzer zeigen, welche Tags verwendet wurden und in welcher Quantität diese existieren.
In diesem Tutorial werde ich eine dynamische Tagcloud erstellen, die durch Parameter individuell angepasst werden kann.

Für dieses Tutorial sind Grundkenntnisse in PHP und MySQL Voraussetzung!

MySQL Tabellen erstellen

Zuerst werden die Tabellen in der Datenbank für die Tagcloud angelegt. Ich benutze die MySQL Datenbank. Es werden drei Tabellen benötigt: Die erste Tabelle enthält die Artikel der Homepage, die zweite Tabelle enthält die Tags und die dritte Tabelle enthält die Beziehung/Identifikation zwischen den Artikeln und den Tags.

Struktur der Tabellen:
Tabelle “artikel” enthält folgende Felder: id, text, … (wichtig: jeder Artikel wird durch die “id” eindeutig identifiziert)
Tabelle “tags” enthält folgende Felder: id, bezeichnung (auch hier muss jeder Tag eindeutig identifiziert werden können)
Tabelle “tag-zu-artikel” enthält folgende Felder: row, tid, aid (“tid” entspricht der ID eines Tags und “aid” der ID eines Artikels)

Die Tabellen für die Tagcloud können über folgende SQL Anweisungen erstellt werden:

CREATE TABLE `tags` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`bezeichnung` VARCHAR( 60 ) NOT NULL ,
UNIQUE (
`bezeichnung`
)
)

CREATE TABLE `tag-zu-artikel` (
`row` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`tid` INT NOT NULL ,
`aid` INT NOT NULL
)

CREATE TABLE `artikel` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`text` TEXT NOT NULL
)

Die Tabellen können nun mit Inhalt gefüllt werden. Jeder Tag darf nur einmal in der Tabelle “tags” vorkommen. Die Tabelle “tag-zu-artikel” wird wie folgt gefüllt: ein Tag, der dem Artikel mit der ID=1 zugeordnet werden soll, bekäme den Eintrag: tid = 1 und aid = 1. Jede Kombination darf nur einmal vorkommen.

Der PHP Code

Sobald einige Artikel und Tags in der Datenbank erstellt worden sind, kann nun mit dem PHP Script für die Tagcloud begonnen werden:

$AnzahlAngezeigterTags = 25; // maximal X Tags werden angezeigt
$MAXtagKlasse = 6; // maximale Anzahl an verschiedenen Style Klassen für die Tags; im Idealfall genauso viele wie $AnzahlAngezeigterTags, da es sonst vorkommen kann, dass nur $MAXtagKlasse Tags angezeigt werden
$TagSortierung = 0; // 0 = alphabetisch, 1 = nach Häufigkeit abwärts, 2 = nach Häufigkeit abwärts und alphabetisch
$StyleType = 0; // sollte nicht $MAXtagKlasse erreicht werden, weil weniger verschiedene Häufigkeiten an Tags auftreten, kann hier entschieden werden, ob den Tags die Style Klassen aufwärts (0) oder abwärts (1) zugeteilt werden

Mit den oben gesetzten Variablen lässt sich das Verhalten der Tagcloud anpassen. Die Verbindung zur Datenbank wird wie folgt hergestellt, wobei die einzelnen Serverdaten durch die eigenen ersetzt werden müssen:

$serverid = @mysql_connect("HOSTNAME", "USER", "PASSWORT");
mysql_select_db("DATENBANK");

Jetzt switchen wir die Variable $TagSortierung, die wir am Anfang gesetzt haben. Hier kann man gut sehen, wie die Tagcloud sortiert wird:

switch($TagSortierung)
{
	case 0:
		$TagSortierungSql = "ORDER BY bezeichnung ASC";
		break;
	case 1:
		$TagSortierungSql = "ORDER BY tagPeak DESC";
		break;
	case 2:
		$TagSortierungSql = "ORDER BY tagPeak DESC, bezeichnung ASC";
		break;
}

Als nächstes werden die Häufigkeiten der einzelnen Tags in der Datenbank gezählt, nach der Häufigkeit absteigend sortiert und anschließend in das Array $sortiertAT[] gespeichert:

$sql = "SELECT anzahlTags FROM ( SELECT COUNT(*) AS anzahlTags FROM `tag-zu-artikel` GROUP BY `tag-zu-artikel`.`tid` ORDER BY anzahlTags DESC LIMIT ".$AnzahlAngezeigterTags." ) as temp1 GROUP BY anzahlTags ORDER BY anzahlTags DESC LIMIT ".$MAXtagKlasse."";

$sortiertAnzahlTags_temp = mysql_query($sql, $serverid);

$i = 0;
while($sortiertAnzahlTags = mysql_fetch_array($sortiertAnzahlTags_temp))
{
	$sortiertAT[$i] = $sortiertAnzahlTags['anzahlTags'];
	$i++;
}

Nun werden die größte und die geringste Anzahl an Tags, sowie die Anzahl der verschiedenen Tags ermittelt:

$sql = "SELECT MAX(anzahlTags) AS MAXanzahlTags, MIN(anzahlTags) AS MINanzahlTags, COUNT(anzahlTags) as insgesamt FROM (".$sql.") AS temp";

$tagcloud_temp = mysql_fetch_array(mysql_query($sql, $serverid));
$MAXanzahlTags = $tagcloud_temp['MAXanzahlTags'];
$MINanzahlTags = $tagcloud_temp['MINanzahlTags'];
$insgesamt = $tagcloud_temp['insgesamt'];

Jetzt werden die Anzahl und die Bezeichnung der Tags ermittelt, die sich im Bereich der ganz oben gesetzten Variablen befinden und entsprechend sortiert:

$sql =	"SELECT tagPeak, bezeichnung FROM ( SELECT COUNT(`tag-zu-artikel`.`tid`) as tagPeak, `tags`.`bezeichnung` AS bezeichnung FROM `tag-zu-artikel` LEFT JOIN `tags` ON `tag-zu-artikel`.`tid` = `tags`.`id` GROUP BY `tag-zu-artikel`.`tid` ORDER BY tagPeak DESC LIMIT ".$AnzahlAngezeigterTags." ) AS temp WHERE tagPeak>=".$MINanzahlTags." ".$TagSortierungSql."";

$temp = mysql_query($sql, $serverid);

Nun erfolgt die Ausgabe der gefundenen Tags. Ich habe hier bereits die Tags mit einem Link zu einer Suche versehen (die Programmierung der Suche möchte ich an dieser Stelle nicht im Detail erläutern, es wird lediglich in der Datenbank nach dem entsprechenden Tag gesucht und die Verbindung zu verbundenen Artikeln durch die Tabelle “tag-zu-artikel” hergestellt). Je nach Häufigkeit bekommen die Tags eine andere Style-Klasse zugeordnet (und zwar maximal $MAXtagKlasse):

echo "<div id="tagcloud">n<span class="tag1">Tagcloud für Artikel:</span><br />n";

while($tagcloud = mysql_fetch_array($temp))
{
	if($StyleType == 0)
	{$i = $insgesamt;}
	else
	{$i = $MAXtagKlasse;}
	$style_class = 0;
	foreach ($sortiertAT as $peak)
	{
		if($peak==$tagcloud['tagPeak'])
		{
			$style_class = $i;
		}
		$i--;	
	}
echo "<a href="/tag-suche/".$tagcloud['bezeichnung']."" class="tag".$style_class."">".$tagcloud['bezeichnung']."</a> ";
}

echo "n</div>";

XHTML Ausgabe

Die Ausgabe der Tagcloud kann in XHTML zum Beispiel so aussehen:

<div id="tagcloud">
<span class="tag1">Tagcloud für Artikel:</span><br />
<a href="/tag-suche/A" class="tag1">A</a> 
<a href="/tag-suche/B" class="tag5">B</a> 
<a href="/tag-suche/C" class="tag3">C</a> 
<a href="/tag-suche/D" class="tag6">D</a> 
<a href="/tag-suche/E" class="tag2">E</a> 
<a href="/tag-suche/F" class="tag1">F</a> 
<a href="/tag-suche/G" class="tag4">G</a> 
</div>

Ich habe mich bewusst dafür entschieden, den einzelnen Tags Style-Klassen zuzuordnen und nicht direkt eine Schriftgröße. Somit können die Tags und die Tagcloud viel individueller gestaltet werden. Nicht nur die Schriftgröße kann nun von Schlagwort zu Schlagwort unterschiedlich sein, sondern auch die Schriftfarbe kann je nach Häufigkeit wechseln.
Ein mögliches Ergebnis ist die Tagcloud am Ende dieser Seite. Die Schlagwörter sind nicht nur unterschiedlich groß, sondern unterscheiden sich auch in ihrer Farbe (von grau nach weiß).

» Das PHP-Script der Tagcloud als Download (Nutzungsrechte siehe Datei)

Wie man nun genau die Tagcloud in CSS gestaltet, steht im nächsten Artikel: CSS Tagcloud (Schlagwortwolke)

Wie immer kann man mich bei Fragen gerne über das Kontaktformular anschreiben.

Weitere Tutorial-Artikel

Sebastian Gollus

Ich bin seit 2007 selbständiger und freiberuflicher Web-Developer. Auch bin ich studierter Medien­wissen­schaftler mit Abschluss an der Uni Duisburg-Essen in „Angew. Kognitions- und Medien­wissen­schaften”. Neben Deutsch spreche ich auch Englisch und Niederländisch.
Kontakt zu mir gerne auch über Google+ und twitter.

Die neuesten Artikel

15 Kommentare zu “PHP und MySQL Tagcloud (Schlagwortwolke)

  1. Peter sagt:

    Hi,

    kannst du mir mal drei beispiele für die tabellen der sql datenbank geben?

    Vielen Dank

  2. Sebastian sagt:

    Hallo Peter,

    die Tabelle »tags« könnte so aussehen:
    id | bezeichnung
    1 | css
    2 | php
    3 | usability

    die Tabelle »artikel« etwa so:
    id | text
    1 | hier steht der Text zu Artikel eins
    2 | hier steht der Text zu Artikel zwei

    die Tabelle »tag-zu-artikel« dann so:
    row | tid | aid
    1 | 1 | 1
    2 | 1 | 2
    3 | 2 | 1
    4 | 3 | 1

    Ich hoffe, dass ich dir damit weiterhelfen konnte.

    Gruß
    Sebastian

  3. Makend sagt:

    Vielen Dank für das Script. Es funktioniert :-) gut bei mir

  4. Dirk sagt:

    Hallo,

    die tag-suche läuft nicht. Kann ich die Ausgabe abändern bzw. wie die Suche lauffähig machen (sql-Abfrage?).

    Danke

    Gruß

    Dirk

  5. Sebastian sagt:

    Hallo Dirk,

    ich habe hier kein Script für eine Suche vorgestellt, sondern lediglich das Script für die Erzeugung einer Tag Cloud. Die Suche müsstest du dir selber programmieren. Einen Hinweis habe ich aber oben im Text gegeben:
    »die Programmierung der Suche möchte ich an dieser Stelle nicht im Detail erläutern, es wird lediglich in der Datenbank nach dem entsprechenden Tag gesucht und die Verbindung zu verbundenen Artikeln durch die Tabelle "tag-zu-artikel" hergestellt«.

    Gruß
    Sebastian

  6. OnKeN sagt:

    Hm ich bekomm die net zum laufen,
    Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /www/htdocs/w00858c9/projekte/pix_factory_reloaded/inc/right_menu.inc.php on line 75
    Zeile 75: while($sortiertAnzahlTags = mysql_fetch_array($sortiertAnzahlTags_temp))

    Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /www/htdocs/w00858c9/projekte/pix_factory_reloaded/inc/right_menu.inc.php on line 87
    Zeile 87: $tagcloud_temp = mysql_fetch_array(mysql_query($sql, $serverid));
    Tagcloud für Artikel:

    Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /www/htdocs/w00858c9/projekte/pix_factory_reloaded/inc/right_menu.inc.php on line 111
    Zeile 111: while($tagcloud = mysql_fetch_array($temp))

  7. Sebastian sagt:

    Hallo OnKeN,

    wie schaut denn deine Datenbank aus?
    Gib doch mal die SQL-Anfrage vor der WHILE-Schleife aus: echo $sql;
    Was hast du alles an der Beispieldatei geändert?

    Gruß
    Sebastian

  8. billie rubin sagt:

    hi,

    wie stellst du sicher, dass in der tabelle "tag-zu-artikel" jede kombination nur einmal vorkommt/ vorkommen kann?

    gruss,
    b.

  9. Sebastian sagt:

    Hey Billie,

    im Moment ist das noch nicht berücksichtigt. Du kannst aber einen Primärschlüssel über tid und aid legen. Dann kann jede Kombination nur ein Mal vorkommen.

    Gruß
    Sebastian

  10. billie rubin sagt:

    verstehe, – danke-

    andere frage: wie verknüpft sich die suche nach -sagen wir- bestimmten artikeln über ein beliebiges tag mittels der 3. tabelle ‘tag-zu-artikel’? ich versuche etwas in der art in meinem projekt, und breche mir ein wenig die ohren mit der(den?) sql-abfragen…

    gruss,
    s.

  11. Sebastian sagt:
    SELECT artikel.id as id<br/>FROM (artikel<br/>LEFT JOIN `tag-zu-artikel` ON `artikel`.`id` = `tag-zu-artikel`.`aid`)<br/>LEFT JOIN `tags` ON `tag-zu-artikel`.`tid` = `tags`.`id`<br/>WHERE `tags`.`bezeichnung` = '<strong>GESUCHTER_TAG</strong>'<br/>ORDER BY artikel.id DESC
  12. subreal sagt:

    Hallo!

    Ich versuche gerade mit die Tags unter einem Artikel ausgeben zu lassen…. leider noch ohne erfolg.

    Also, angenommen mein Artikel wird mit der Variabel $iid identiviziert:

    $mysql ="SELECT * FROM tags where id=( SELECT tid FROM `tag-zu-artikel` where aid=’$iid’) ";

    $ge=mysql_query("$mysql");
    if($res=mysql_fetch_array($ge))
    {
    do
    {
    $bezeichnung = $res['bezeichnung'] ;
    echo"$bezeichnung ";
    }
    while($res=mysql_fetch_array($ge));
    }

    Der erste Tag wird mir angezeigt…. danach bekomme ich einen SQL Error.

    Was mach ich falsch??
    Lieben Gruß

  13. sCion sagt:

    Warum setzt du überall \ vor einem " oder ‘?

    Das brauchst du nur wenn du zum Beispiel
    echo "<a href="link">this is link</a>"
    ordentlich expecten willst, dann musst du es so schreiben
    echo "<a href=\"link\">this is link</a>"

    mach aus
    $mysql =\"SELECT * FROM tags where id=( SELECT tid FROM `tag-zu-artikel` where aid=\’$iid\’) \";

    $ge=mysql_query(\"$mysql\");
    if($res=mysql_fetch_array($ge))
    {
    do
    {
    $bezeichnung = $res[\'bezeichnung\'] ;
    echo\"$bezeichnung \";
    }
    while($res=mysql_fetch_array($ge));
    }

    bitte

    $mysql = "SELECT * FROM tags where id=( SELECT tid FROM `tag-zu-artikel` where aid=’$iid’)";

    $ge=mysql_query("$mysql");
    if($res=mysql_fetch_array($ge))
    {
    do
    {
    $bezeichnung = $res['bezeichnung'] ;
    echo "$bezeichnung";
    }
    while($res=mysql_fetch_array($ge));
    }

  14. sCion sagt:

    Antwort gefunden, dass macht das Script von alleine :D SCHULDIGUNG!

  15. Webdesign Mittelholstein sagt:

    Super Script, habe eine Erweiterung für das CMS PHP-Fusion davon daraus gemacht.

    Gibt es demnächst dann als kostenlosen Download.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">