Erstellung eines Newstickers in ASP

Geschrieben von: Alexander Zeitler
Kategorie: ASP Tricks

Willkommen zum 1. Teil einer 2-teiligen Artikelserie zur Erstellung eines Newstickers. In diesem Artikel zeige ich Ihnen, welche grundlegenden Strukturen notwendig sind und wie Sie den Newsticker anzeigen lassen. Im zweiten Teil werden Sie dann erfahren, wie Sie eine Administrations-Seite für den Newsticker erstellen.

Im Download zum heutigen Artikel finden Sie die benötigte Access-Datenbank sowie den Sourcecode zur Anzeige des Newstickers.Der Newsticker funktioniert mit dem Internet Explorer und Netscape Navigator ab Version 4.0. Netscape 6.0 unterstützt keine Layer, weswegen dieses Script nicht funktioniert.

Site- und Datenbankdesign

Zunächst will ich Ihnen ein mögliches Ergebnis für einen Newsticker vorstellen, an dem wir uns in diesem Artikel orientieren werden.

Der Ticker scrollt die 3 (dieser Wert lässt sich mit der Administrationsseite beliebig ändern) aktuellsten Einträge aus der Datenbank von unten nach oben in einer Endlosschleife.

Jeder Tickereintrag besteht aus bis zu 6 Teilen, welche in der Datenbank gespeichert werden:

• Überschrift
• Text
• Link
• Link-Ziel (Target)
• Datum
• Darf der Eintrag angezeigt werden? (Ja/Nein)

Beim Internet-Explorer lässt sich das Scrolling relativ leicht über eine Marquee erstellen. Beim Netscape-Navigator müssen wir hierzu ein JavaScript verwenden, das mittels Layern den gleichen Effekt erzielt. Deshalb ist der gesamte Ticker für beide Browser in JavaScript implementiert.

Das JavaScript für Internet Explorer und Netscape - ohne ASP-Code - sieht wie folgt aus:

<script language="JavaScript1.2">
var tickerbreite=210
var tickerhoehe=200
var geschwindigkeit=1
var tickerparameter='<font face="verdana" color="#000000" size="1">'

tickerparameter=tickerparameter+'Tickertext';
tickerparameter=tickerparameter+'</font>';
  if (document.all)
   document.write('<marquee direction="up" scrollAmount='+geschwindigkeit+' style="width: _
   '+tickerbreite+';height:'+tickerhoehe+'">'+tickerparameter+'</marquee>')
		
function erneuern(){
    window.location.reload()
}

function erneuern1(){
   if (document.layers){
      setTimeout("window.onresize=erneuern",450)
      tickerinitialisieren()
    }
}
		
function tickerinitialisieren(){
  document.tickerl1.document.tickerl2.document.write(tickerparameter)
  document.tickerl1.document.tickerl2.document.close()
  laenge=document.tickerl1.document.tickerl2.document.height
     tickerscrollen()
}
		
function tickerscrollen(){
  if (document.tickerl1.document.tickerl2.top>=laenge*(-1)){
	document.tickerl1.document.tickerl2.top-=geschwindigkeit
	setTimeout("tickerscrollen()",100)
  }
  else{
    document.tickerl1.document.tickerl2.top=tickerhoehe
    tickerscrollen()
  }
}
		
window.onload=erneuern1
</script>
				
<ilayer width=&{tickerbreite}; height=&{tickerhoehe}; name="tickerl1">
<layer name="tickerl2" width=&{tickerbreite}; height=&{tickerhoehe};></layer>
</ilayer>

Aus dem JavaScript ergeben sich weitere Felder, die wir in der Datenbank benötigen:

• Tickerbreite
• Tickerhöhe
• Geschwindigkeit

Außerdem benötigen wir noch ein Feld, das festlegt, wie viele Einträge der Ticker anzeigen soll.

Mit diesem Vorgaben ergibt sich die Notwendigkeit, 2 Tabellen in unserer Datenbank zu erstellen:

Darstellung des Newstickers

Wie stellen wir nun die Werte aus der Datenbank dar? Hierzu werfen wir noch einmal einen kurzen Blick auf die Darstellung unseres Beispiels. Wir möchten die in der Datenbank eingestellte Anzahl an Einträgen anzeigen lassen. Außerdem sollen auch Höhe, Breite und Geschwindigkeit aus der Datenbank gelesen werden. Der notwendige Code ist relativ einfach und sieht wie folgt aus:

<%
Set conn = Server.CreateObject("ADODB.Connection")

strConn = "Driver={Microsoft Access Driver (*.mdb)};DriverID=25;DBQ="
strConn = strConn & Server.MapPath("newsticker.mdb")
strConn = strConn & ";FIL=MS Access;MaxBufferSize=512;PageTimeout=5;"
conn.Open strConn

strSQL = "SELECT * FROM settings"
Set rs = conn.Execute(strSQL)
tickerbreite = rs.fields("tickerbreite")
tickerhoehe = rs.fields("tickerhoehe")
geschwindigkeit = rs.fields("geschwindigkeit")
anzahlangezeigt = rs.fields("anzahlangezeigt")
%>

Weiters überprüfen wir, ob die Werte für die Breite, Höhe und Geschwindigkeit des Tickers sowie die Anzahl der angezeigten Einträge in einem gültigen bzw. sinnvollen Bereich liegen:

<%
if anzahlangezeigt < 1 then anzahlangezeigt=3
if (tickerbreite < 135 or tickerbreite > 300) then tickerbreite=220
if (tickerhoehe < 30 or tickerhoehe > 300) then tickerhoehe=220
if (geschwindigkeit < 1 or geschwindigkeit > 6) then geschwindigkeit = 2
%>

Um zu vermeiden, daß evtl. alte Parameter bzw. auch veraltete Einträge angezeigt werden, schalten wir das Caching für Proxies und Browser mit den folgenden Befehlen ab:

<%
Response.Expires=0
Response.AddHeader "Pragma","no-cache"
Response.AddHeader "cache-control", "no-store"
%>

Weitere Informationen zum Thema "Caching" finden Sie hier

Jetzt können wir die ermittelte Breite, Höhe und Geschindigkeit an unser JavaScript übergeben:

<script language="JavaScript1.2">
var tickerbreite=<%=tickerbreite%>
var tickerhoehe=<%=tickerhoehe%>
var geschwindigkeit=<%=geschwindigkeit%>
.
.
.

Um die vorher ausgelesene Anzahl an Einträgen aus der Datenbank zu lesen, müssen wir nun zuerst unseren ConnectionString zusammensetzen:

<%
strSQL = "SELECT TOP "
strSQL = strSQL & cstr(anzahlangezeigt)
strSQL = strSQL & " * FROM news where eintraganzeigen = true order by datum desc"
%>

Wie man sieht, wurde mittels "desc" im SQL String die Sortierreihenfolge der Einträge umgekehrt. Dies ist notwendig, um die neuesten Einträge zuerst anzeigen zu lassen. Außerdem muß mittels "cstr" der Integer-Wert der Variable "anzahlangezeigt" in einen String umgewandelt werden.

Zuletzt übergeben wir die ausgelesenen Einträge an unser JavaScript. Hierbei müssen wir beachten, daß das Feld "Link" leer sein könnte. In diesem Fall darf auch kein Link in dem Ticker angezeigt werden, um einen "Sprung ins Leere" für den Surfer zu vermeiden. Das ganze läßt sich mit einer IF-Abfrage leicht realisieren:

<%
strSQL = "SELECT TOP "
strSQL = strSQL + cstr(anzahlangezeigt)
strSQL = strSQL + " * FROM news where eintraganzeigen = true order by datum desc"
Set rs = conn.Execute(strSQL)
Do While Not(rs.EOF)
  Response.Write "tickerparameter=tickerparameter+'<B>" & rs("datum") & ": " &
    rs("ueberschrift") & "</B>" & "<br>" & rs("text") & "<br>';"
    if rs("link") <> "" then
      Response.Write "tickerparameter=tickerparameter+' _
      <A HREF=" + rs("link") + " target=" + rs("link_target") + ">mehr...</A><br>';"
    end if
  Response.Write "tickerparameter=tickerparameter+'
';"
  rs.MoveNext
Loop
rs.Close
conn.Close
%>

In dem dargestellten Code wird in die JavaScript-Variable "tickerparameter" nun Eintrag für Eintrag eingelesen und entsprechend formatiert. Änderungen an der Formatierung (Schriftart etc.) müssen Sie also hier vornehmen, indem Sie entsprechende HTML-Tags verwenden. Sie könnten allerdings auch die Datenbank dahingehend erweitern, dass Formatierungen der Einträge gespeichert werden können...

Schlußbemerkung

Im ersten Teil meines Artikels haben Sie gesehen, wie sie mit Hilfe der TOP-Abfrage schnell und einfach eine bestimmte Anzahl von Werten aus einer Datenbank auslesen können. Damit diese beim Client immer aktuell sind, haben wir auch kurz das Thema Caching angesprochen.

Auch in die Kombinationsmöglichkeiten von ASP und JavaScript haben Sie einen kleinen Einblick erhalten.

Bleibt mir nur, Ihnen mit den bisher gezeigten Werkzeugen viel Spaß zu wünschen und Sie zum zweiten Teil des Kurses einzuladen, um auf die leichte Administration des Newstickers einzugehen.

Download des Codes

Klicken Sie hier, um den Download zu starten.

Verwandte Artikel

Eine Umfrage in ASP erstellen
Erstellung eines Newstickers in ASP - Teil 2

Wenn Sie jetzt Fragen haben...

Wenn Sie Fragen rund um die in diesem Artikel vorgestellte Technologie haben, dann schauen Sie einfach bei uns in den Community Foren der deutschen .NET Community vorbei. Die Teilnehmer helfen Ihnen gerne, wenn Sie sich zur im Artikel vorgestellten Technologie weiterbilden möchten.

Haben Sie Fragen die sich direkt auf den Inhalt des Artikels beziehen, dann schreiben Sie dem Autor! Unsere Autoren freuen sich über Feedback zu ihren Artikeln. Ein einfacher Klick auf die Autor kontaktieren Schaltfläche (weiter unten) und schon haben Sie ein für diesen Artikel personalisiertes Anfrageformular.

Und zu guter Letzt möchten wir Sie bitten, den Artikel zu bewerten. Damit helfen Sie uns, die Qualität der Artikel zu verbessern - und anderen Lesern bei der Auswahl der Artikel, die sie lesen sollten.