Daten präsentieren auf der Website

Teil 2: Webseiten mit ASP - Teil 2

  1. Webseiten mit ASP - Teil 2
  2. Teil 2: Webseiten mit ASP - Teil 2

Ein Shop kommt natürlich nicht ohne Bilder aus. Streng genommen können Sie bei Produktpräsentationen jeglicher Art immer eher auf einen Text verzichten als auf ein Bild. Da die Besucher des Internets die Ware nicht anfassen können, wollen sie sie wenigstens genauestens betrachten. Wie im wahren Leben zählt das Bild und der Preis, wer ließt schon Zutatenlisten, Beipackzettel, Anleitungen und so weiter.

Webseiten mit ASP - Teil 2

© Archiv

Die Bilder an sich stecken natürlich nicht in der Access-Datenbank. Hier finden Sie lediglich den Dateinamen des Bildes, das auf dem Server vorhanden sein muss. Die ASP-Datei wird später mit dem Bildnamen arbeiten und diesen in eine normale HTML-Befehlssequenz stecken. Das bedeutet, dass sich das Bild im gleichen Verzeichnis vorfinden lassen muss, wie die ASP-Datei, die es aufruft.

Wenn Sie die Bilder in separaten Verzeichnissen auf dem Webserver gesichert haben, müssen Sie entweder den Pfadnamen mit dem Dateinamen zusammen in der Datenbank erfassen oder den Pfad in der HTML-Befehlssequenz manuell einfügen. Wir empfehlen das Erfassen der Bilder in der Datenbank ohne Pfadnamen. Das macht verschiedene Arbeitsgänge einfacher. Nehmen Sie an, sie wollen nicht nur ein kleines Vorschaubild zeigen, sondern auch ein großes Detailbild.

In diesem Fall müssen Sie zwei Bilder unterschiedlicher Größe auf dem Webserver ablegen. Sie könnten die Bilder unter dem exakt gleichen Namen speichern, aber dann in verschiedenen Verzeichnissen, etwa "kleinesbild" und "grossesbild". Die entsprechenden Verlinkungen sind dann bei nur einem erfassten Dateinamen schnell auf den entsprechenden Seiten durch Anfügung des Pfads gesetzt.

Manche verzichten dabei sogar auf das Erfassen des Bildnamens in der Datenbank. Sie speichern die Bilder einfach als 1.jpg, 2.jpg, usw. ab, wobei Sie die Ziffer des Bildnamens gleich dem in der Datenbank ohnehin vorhandenen Primärschlüssel wählen.

Den Bildnamen selber können Sie wie gehabt als Bestandteil des <img>-Befehls mit der verkürzten Schreibweise direkt in die HTML-Befehlszeile integrieren.

Das Problem mit der Bildgröße

Wie bei allen Webseiten gilt auch beim Shop: Bringen Sie Ihre Bilder bereits im Vorfeld auf die richtige Größe. Wenn Sie mit einheitlichen Bildergrößen arbeiten, können Sie die Größen der Fotos gleich in den IMG-Tags einstellen. Das wäre aber der Idealfall. Das Problem der Shops ist, dass die Produkte nicht immer im Hoch- oder Querformat optimal angezeigt werden können, sondern je nach Motiv abweichen. Das Angeben der Bildgröße in den IMG-Tags ist aber wichtig, damit bei Ladeproblemen die Seite flüssig aufgebaut werden kann. Wenn Sie es ganz genau nehmen, können Sie in Ihrer Datenbank die Breite und Höhe der Bilder miterfassen und entsprechend im IMG-Tag einlesen.

Webseiten mit ASP - Teil 2

© Archiv

Meist reicht bei der Erfassung entweder die Höhe oder die Breite, weil das Seitenlayout in der Regel für die Darstellung der Bilder einen festen Raum vorsieht und deshalb bei jeder Darstellung von einer konstanten Höhe oder Breite ausgegangen werden kann. In diesem Fall müssen Sie die Fotos nur vorher in der Bildbearbeitung auf die korrekte Größe bringen und entweder "width" oder "height" im HTML-Code festlegen.

Ähnliche Daten anzeigen

Wenn Sie schon die Inhalte der Webseite aus einer Datenbank kommen lassen, können Sie mit dem vorhandenen Datenmaterial auch spielen und Ihren Besuchern viele besonderen Funktionen zur Verfügung stellen. Eine dieser Komfortfunktionen ist das Anbieten ähnlicher Produkte. Wenn sich Ihr Besucher die Liste angeschaut hat und eines der Bücher im Detail betrachten möchte, dann können Sie unterhalb der Detailinformationen weitere Bücher einblenden, die zum Beispiel zum gleichen Genre gehören.

Webseiten mit ASP - Teil 2

© Archiv

Die Grundüberlegung dazu ist folgende. Sobald die Detailseite aufgerufen wird und alle Daten zum anzuzeigenden Produkt aus der Datenbank geholt wurden, speichern Sie in der Variablen "genre" die Information aus dem Datenbankfeld "Genre". Es wird ein zweiter Datenbankzugriff programmiert, der diesmal alle Datensätze aus der Datenbank holt, die das gleiche Genre besitzen wie das angezeigte Buch.

Da das Genre des aktuellen Buchs aus dem Datenbestand stammt, wird sich in der zweiten Datenbankabfrage mindestens ein Datensatz befinden, nämlich der des aktuellen Buchs. Der interessiert uns aber nicht, denn wenn Sie ähnliche Bücher aus der selben Kategorie anzeigen lassen wollen, darf das aktuelle Buch natürlich nicht in der Liste vorkommen. Würden Sie nur eine unbetitelte Liste ausgeben wollen, spielte dieser Umstand keine Rolle, aber es soll ja ein Titel über der Liste stehen, der dem Besucher klarmacht, dass es sich um ähnliche Bücher handelt. Und dieser Titel soll nur dann erscheinen, wenn mindestens ein anderes Buch aus dem Genre des aktuellen Buchs in der Datenbank enthalten ist.

Dieses Problem bekommen Sie mit einer einfachen Logikvariablen in den Griff. Der folgende ASP-Code ist Teil der Datei "details.asp". Der zweite Datenbankzugriff mit der Liste aller Genre-ähnlichen Bücher befindet sich im Objekt "aehnliche". In der Variablen "genre" haben wir das Genre des aktuellen Buchs gespeichert.

<% 
anzeigetitel = true 
while not aehnliche.EOF 
if aehnliche("ID") <> CInt(nummer) 
.then 
if (anzeigetitel) then 
response.write("<hr><br><br>
.Aus dem Genre <strong>" & genre &
."</strong> könnten Sie folgen Titel 
.auch interessieren:<br><br>") 
anzeigetitel = false 
end if 
response.write("<a href=details. 
.asp?ID=" & aehnliche("ID") & ">" &
.aehnliche("titel") & "</a><br>") 
end if 
aehnliche.MoveNext 
wend 
%>

Die Variable "anzeigetitel" wird zunächst auf "true" gesetzt. Das bedeutet, dass der Titel angezeigt werden soll, wenn eine Liste ähnlicher Bücher existiert. Es folgt die übliche While-Schleife, die dafür sorgt, dass alle Datensätze des Objekts "aehnliche" durchgearbeitet werden, ganz gleich, um wie viele es sich dabei handelt.

Die erste IF-Anweisung prüft die Nummer der ID des aktuellen Datensatzes mit der ID des Buches, das angezeigt wird. Stimmen diese beiden Werte überein, handelt es sich bei der Fundstelle um das aktuelle Buch. In diesem Fall soll ein Listeneintrag unterbunden werden. Die beiden IDs müssen also unbedingt ungleich sein, damit ein Vorschlag auf der Webseite angezeigt werden soll. Sind die IDs ungleich, so ist sichergestellt, dass mindestens ein Vorschlag erscheint. In diesem Fall wird die zweite IF-Anweisung aktiv. Sie prüft, ob der Wert von "anzeigetitel" wahr ist. Wenn ja, dann wurde bislang noch kein Titel für die Liste der ähnlichen Bücher geschrieben. Also lassen Sie ihn auf die Seite schreiben!

In der Response.write-Anweisung erkennen Sie die schon übliche Zusammensetzung aus Konstanten und Variablen. Da das Genre ja von Buch zu Buch wechselt, wird der Genrename direkt aus der Variablen gelesen. Achten Sie bei dieser Zusammensetzung auch auf die Leerzeichen, die in den Texten vor und hinter der Variable "genre" gesetzt wurden. Sie sorgen dafür, dass der nötige Abstand zwischen den Wörtern zu sehen ist. Auch das Fettschreiben des Genres ist möglich. Dazu wurde einfach der <strong>-Tag in die Ausgabe integriert. Ist der Titel einmal verfasst, setzt das Programm die Variable "anzeigetitel" auf "falsch". Damit ist sichergestellt, dass bei weiteren Fundstellen der Titel nicht noch einmal angezeigt wird.

Die Titel der ähnlichen Bücher werden dann in der zweiten Response.Write-Anweisung mitsamt Verlinkung auf die Seite geschrieben. Achten Sie hier darauf, dass die Datei "details.asp" sich selbst wieder aufruft, diesmal nur mit einem anderen ID-Wert. Wenn Sie später keine Scheu vor langen Quellcodes haben, ist es auf diese Weise möglich, ein komplettes Shop-System in nur einer einzigen ASP-Datei zu verwalten!

Erweiterte Ähnlichkeiten

Sie können natürlich auch auf andere Daten in der Datenbank zugreifen, um Ähnlichkeiten zu generieren. Zum Beispiel könnten Sie Bücher der gleichen Autoren oder des gleichen Verlags in Listen anzeigen. Auch lassen sich beliebig viele Ähnlichkeitsmuster generieren. Große Systeme wie Amazon spielen ebenfalls mit diesen Techniken. Sie speichern beispielsweise jeden Kauf eines Besuchers akribisch ab.

Webseiten mit ASP - Teil 2

© Archiv

Wenn Sie ein Buch im Detail anzeigen lassen, überprüft das Amazon-Programm, ob das Buch bereits verkauft wurde und wenn ja, dann werden die anderen Käufe dieser Käufer gesammelt. Stellt sich dabei heraus, dass verschiedene Käufer des angezeigten Buchs auch andere gleiche Titel erworben haben, kommt der übliche Hinweis: "Käufer dieser Buches haben auch folgende Titel erworben..."

Wenn die Anzahl der Produkte im überschaubaren Bereich liegt, können Sie auch die Gesamtliste unterhalb der Detailansicht einblenden. Dazu generieren Sie wie in der Datei "liste.asp" ein Datenbankobjekt, das die gesamte Produktliste beinhaltet und lassen die Inhalte - ebenfalls wie in der Datei "liste.asp" - per While-Schleife inklusive Verlinkung in die Seite einfließen.

Das hat den Vorteil, dass der Besucher nicht ständig zu einer übergeordneten Auflistung wechseln muss, um die Details eines anderen Produkts einsehen zu können.

Volle Freiheit im Design

Das Design der Beispieldateien ist sehr einfach gestrickt, damit Sie sich vollständig auf den ASP-Code konzentrieren können. Denken Sie aber daran, dass Sie die Code-Schnipsel in jedes noch so komplexe HTML/CSS-Design integrieren können.

Webseiten mit ASP - Teil 2

© Archiv

Komplex heißt beispielsweise: Generieren Sie verschiedene CSS-Steuerdateien mit unterschiedlichen Farbgebungen für unterschiedliche Genres. Wenn Sie das Genre wie im obigen Beispiel also einmal abgefragt und die Startsequenzen für den Datenbankzugriff vor den eigentlichen HTML-Code gesetzt haben, können Sie in Abhängigkeit des Genres unterschiedliche CSS-Dateien zur Formatierung einladen und so auch automatisch das Aussehen der Seiten aus der Datenbank heraus steuern.

<link rel="STYLESHEET" type="text/css" 
.href="<%=genre%>.css">

In diesem letzten Beispiel haben wir drei unterschiedliche CSS-Dateien mit den Namen der Genres generiert (krimi.css, thriller.css, wissenschaftsthriller.css). Über die im CSSAufruf integrierte Variable "genre" wird je nach Kategorie eine entsprechende Farbänderung der Tabellenrahmen erzeugt.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".