PHP und MySQL -> Erstellung einer automatisch generierten Linkliste

[Hans K.]

Nachdem wir nun unsere Moped Seiten dynamisch erstellt haben (PHP und MySQL -> Erstellung von dynamischen Seiten), fehlt nun noch die Möglichkeit, diese in einer Menüleiste oder Linkliste einzubauen.

Zudem wollen wir ja auch nicht mit jedem neuen eingetragenen Motorrad das Menü oder eine Linkliste ändern, deshalb sollte das vollautomatisch erfolgen.

Ich werde das hier in einer Linkliste beschreiben, da ich noch ein Gimmik hinzufügen werde. 

[Hans K.]

Wir erstellen eine neue Seite und gehen damit vor, wie schon bei der ersten Seite.

Die Seite in NOF auf PHP umstellen:
Umstellung der Seite auf PHP

Die Verbindung zu der MySQL Datenbank herstellen:
Verbindung zur MySQL Datenbank herstellen

[Hans K.]

Wir ergänzen den Code in den Layout-Eigenschaften:

Code: PHP

1. <?php
2. include("./html/datenbank.php");
3.  
4. $sql="SELECT ID, Modell FROM Moped";
5. $result = mysql_query($sql);
6.  
7. ?>

Damit holen wir uns die Namen aller Motorräder, welche in der Datenbank sind.

[Hans K.]

Nun ist ein Textfeld zu erstellen und dort zu positionieren, wo nachher die Linkliste stehen soll. In den Texteigenschaften den Button HTML betätigen (das Textfeld aufziehen, an anderer Stelle ins Layout klicken und dann das Textfeld anklicken -> dann ist das Eigenschaftsfenster zu sehen).

Vor dem Tag ist der Code einzugeben:

Code: HTML5

1. <?php
2.  
3. while ($row = mysql_fetch_array($result)) {
4. echo "<a href=\"./seite.php?mopedid=". $row["ID"]. "\">". $row["Modell"]. "</a><br>";
5.  
6. }
7. ?>
8.  
9. <!--

Nach dem Tag ist noch folgendes einzutragen:

Code: HTML5

1. -->

[Hans K.]

Die Seite publizieren und schon haben wir eine Linkliste, welche sich automatisch um die eingetragenen Motorräder ergänzt:

www.DeineDomäne.de/seite2.php

[Hans K.]

Für ein Menü reicht die Linkliste sicherlich, aber so sieht die Linkliste noch ein wenig dürftig aus. Deswegen werden wir diese um ein Gimmik, sprich um ein kleines Bild ergänzen.

Dazu erstellen wir einen neuen Ordner auf unserem Webspace (z.B. mit Filezilla).
Diesen nennen wir jetzt Mopedbilderklein.
Als Nächstes verkleinern wir die ursprünglichen Motorradbilder auf die Maße 100 * 80 Pixel und packen die beiden Bilder in den neuen Ordner.

Ihr könnt die Bilder anders benennen, um sie von den großen Bildern besser zu unterscheiden. Achtet aber bitte darauf, dass die Endziffer, welche für die ID steht, immer am Ende steht. Also Bildmoped1.jpg oder Bildmopedklein1.jpg.

[Hans K.]

Nun wird der Code im Textfeld ergänzt:

Code: HTML5

1. <?php
2.  
3. while ($row = mysql_fetch_array($result)) {
4. echo "<img src=\"./Mopedbilderklein/Bild".$row["ID"].".jpg\""." ALT=\"". $row["Modell"]."\" TITLE=\"". $row["Modell"]."\">";
5. echo "<a href="/Test/test.php?mopedid=". $row["ID"]. "">". $row["Modell"]. "</a><br>";
6.  
7. }
8. ?>
9.  
10. <!--

Mit der zusätzlichen Zeile erfolgt die Anzeige der kleinen Bilder, natürlich auch automatisch für jedes weitere Motorrad.

[Hans K.]

Nun kann man natürlich noch ein wenig an der Positionierung feilen, dazu ist eine Möglichkeit Tabellen zu erstellen. Dieses machen wir auch direkt im Script, da auch diese mit jedem Eintrag dynamisch ergänzt werden soll:

Code: HTML5

1. <?php
2.  
3. echo "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"300\">";
4.  
5. while ($row = mysql_fetch_array($result)) {
6.  
7. echo "<tr><td width="100">";
8. echo "<img src="./Mopedbilderklein/Bild".$row["ID"].".jpg""." ALT="". $row["Modell"]."" TITLE="". $row["Modell"]."">";
9. echo "</td><td width="200">";
10. echo "<a href="/Test/test.php?mopedid=". $row["ID"]. "">". $row["Modell"]. "</a><br>";
11. echo "</td></tr>";
12. echo "<tr style="height:10px"><td></td></tr>";
13. }
14. echo "</table>";
15. ?>
16.  
17. <!--

[Hans K.]

Und hier zeige ich, wie Ihr die Daten komfortabel in die Datenbank eingeben könnt, gerade das Thema mit dem Miniaturbild wird hier noch automatisiert:

PHP und MySQL -> Erstellung von Einträgen in der Datenbank mit einem Formular

[Hans K.]

Änderungswünsche, Fehler oder Diskussionen können wir hier führen: Diskussion zur Erstellung einer automatisch generierten Linkliste