Aug
25

Contentslider/Specialbox – Tutorial

Files under CSS, Tutorials, Web, php, scripting/coding, xhtml | Posted by SchmaR

Da im Eurostyle-webmedia.de Forum in letzter Zeit viele Fragen zu den Thema kursieren wie man eine Specialsbox oder einen Contenslider realisiert, werde ich hier eine einfach gehaltene (mit AJAX realisierte) Möglichkeit vorstellen und in Form eines Tutorials erklären. Als besonderes Schmankerl biete ich das Tutorial Multimedial an, einmal in Textform und einmal als Video.

Vorschau
Link zum unseren Ziel :-)

Am Anfang stand die HTML

Beginnen wir mit den xHTML-code zu den Werde ich nicht viele Worte verlieren, da ich Grundkenntnisse in xHTML einfach mal vorrausetze.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <link href="style.css" media="screen" type="text/css" rel="stylesheet" />
  6. <script language="javascript" type="text/javascript" src="functions.js"></script>
  7. <title>SchmaRs-World: Contentslider/Specialbox - Tutorial Demo</title>
  8. </head>
  9. <body onload="sndReq(1)"><!-- Contentslider/Specialbox - Tutorial SchmaRs-World.de -->
  10. <div id="wrapper">
  11. <div id="title">
  12. <h1>Contentslider/Specialbox - Tutorial </h1>
  13. </div>
  14. <div id="contentslider"></div>
  15.  
  16.   <br style="clear:both;" />
  17. </div>
  18.  
  19. </body>
  20. </html>

In den Zeilen 5 und 6 werden die Dateien geladen die für die Realisierung nötig sind. Zum einen ist das die "style.css" welche die Angaben zum Layout enthält. Zum anderen die "functions.js" welche das Herzstück unseres Vorhabens darstellt. Das Bodytag ist mit einem onLoad Ereignis versehen um beim erstmaligen Laden der Seite die "specialbox" mit Inhalt zu versehen. Soviel nun zu den kleinen xHTML Fetzen.

Javascript meets PHP

Kommen wir nun zu den Javascriptcode welcher für das Nachladen von Inhalten verantwortlich ist. Im Wesentlichen besteht der Code aus 3 Funktionen welche mit dem XMLHttpRequest-Objekt arbeiten bzw. es erzeugen. Alternativ könnte man auch eine AJAX Bibliothek wie Prototype verwenden, ein Beispiel hierfür erkläre ich später.

  1. // Contentslider/Specialbox - Tutorial SchmaRs-World.de
  2. // Erzeugen eines HttpRequestObjects samt Browserweiche fuer den IE.
  3. function genXMLHttpRequestObject(){
  4.    var resObjekt = null;
  5.    try{
  6.       resObjekt = new ActiveXObject("Microsoft.XMLHTTP");
  7.    }
  8.    catch(Error){
  9.        try {
  10.            resObjekt = new ActiveXObject("MSXML2.XMLHTTP");
  11.        }
  12.        catch(Error){
  13.            try {
  14.                resObjekt = new XMLHttpRequest();
  15.            }
  16.            catch(Error){
  17.                 alert("Erzeugung des XMLHttpRequest-Objekts ist nicht möglich");
  18.            }
  19.        }
  20.    }
  21.    return resObjekt;
  22. }
  23.  
  24. // Senden der Anfrage an den Server.
  25. function sndReq(contentnr){
  26.     resObjekt = genXMLHttpRequestObject();
  27.     resObjekt.open('get', 'content.php?content='+contentnr,true);
  28.     resObjekt.onreadystatechange = handleResponse;
  29.     resObjekt.send(null);
  30. }
  31.  
  32. // Warten bis der Datentransfer beendet ist (readystate = 4) und Ausgabe des neuen Contents.
  33. function handleResponse(){
  34.     if(resObjekt.readyState == 4){
  35.         document.getElementById("contentslider").innerHTML = resObjekt.responseText;
  36.     }
  37. }

genXMLHttpRequestObject()

In der ersten Funktion "genXMLHttpRequestObject()" wird eine Instanz von dem XMLHttpRequest-Objekt erzeugt, da die Art der Erzeugung je nach Browser unterschiedlich ist, bedarf es einer Browserweiche. Die Browserweiche ist in diesem Fall in form eines try-catch Konstrukts gelöst. Das Javascript Statement try-catch erlaubt es Code auszuführen und Werte während der Ausführung zu prüfen und im gegebenen Fall einen Fehler abzufangen.


Im ersten try Block wird versucht das XMLHttpRequest-Objekt mit einer Funktion für den IE zu instanzieren. Sollte dies fehlschlagen wird das Error aufgefangen und es wird versucht eine neuere Version des Objekts für den IE zu instanzieren. Wenn dies wiederum fehlschlägt wird versucht das Objekt mit der für den Großteil der Browser gängigsten Methode zu instanzieren. Für die unwahrscheinliche Annahme das auch dies Fehlschlägt wird eine Fehlermeldung in Form eines alert()´s ausgegeben.

sndReq() & handleResponse()

Die Funtion sndReq ist das eigentlich Herzstück des Javascriptcodes sie ruft alle notwendigen Funktionen zum Asynchronen Datenaustausch auf. Die Funktion sendet die eigentliche Anfrage an den Server und verarbeitet auch dessen Antwort.

Die erste Zeile instanziert durch den Aufruf von genXMLHttpRequestObject() ein neues XMLHttpRequest-Objekt und speichert es in der Variable resObjekt ab. Die zweite Zeile öffnet die eigentliche Verbindung zum Server und sendet die Abfrage. Die Methode open des XMLHttpRequest-Objekts übernimmt in unserem Fall 3 Parameter, die Methode (get oder post), Die zu sendenen Daten und das Flag zur bestimmt ob der Datenverkehr Asynchron sein soll oder nicht, in unserem Fall true(asynchron). Die dritte Zeile(siehe zusätzlich die Funktion handleResponse() ) dient dazu sobald der Datenverkehr abgeschlossen ist (resObjekt.readyState == 4) die Daten in das xHTML Dokument einzubinden. Dies geschieht mit der Funktion getElementById. Die Funktion übernimmt einen String der ID des betreffenden Elements innerhalb des xHTML codes, für unsere Zwecke wäre dies "contentslider". Die Eigenschaft responseText des XMLHttpRequest-Objekt enthält die empfangenden Daten.

So Das War’s mit dem Javascriptteil fürs erste, bei der Variante mit Prototype kommen wir noch einmal kurz auf Javascript zu sprechen.

PHP kurz aber knackig

Ich finde der PHP code erklärt sich durch die Kommentare selbst, ich werde zu vorrangeschrittener Stunde die Ausführungen hierzu noch etwas spezifizieren. Was das Tutorialvideo betrifft, trifft selbiges zu.

  1. <?php
  2.      // Contentslider/Specialbox - Tutorial SchmaRs-World.de
  3.     // Konfiguration
  4.     $imgpath = 'images/specials'; // Pfad zu den Bildern
  5. 	$type = 'gif'; // Dateityp der Bilder
  6.  
  7. 	// Anwendungscode
  8.     $toval = $_REQUEST['content'];
  9.     if(is_numeric($toval) && file_exists("$imgpath/$toval.$type")) // prüfe ob der übergebene Wert numerisch ist und eine Datei mit dem Namen existiert
  10.     {
  11.         $img = $toval;
  12.     }
  13.     else // wenn nicht ist der Name 1
  14.     {
  15.         $img = 1;
  16.     }
  17.  
  18.     $next = $img+1;
  19.     $back = $img-1;
  20.     echo "<img src=\"$imgpath/$img.$type\" alt=$img /><br/><br/>";
  21.  
  22.     if($img > 1)//wenn der Übergebene Wert größer als eins ist werden 2 Navigationspunkte zurückgeliefert
  23.     {
  24.         echo "
  25. <div id=\"buttons\">
  26. <input type=\"button\" value=\"<< zur&uuml;ck\" onclick=\"sndReq($back)\" id=\"btn_left\" />
  27. <input type=\"button\" value=\"vorw&auml;rts >>\" onclick=\"sndReq($next)\" id=\"btn_right\" /></div>
  28.  
  29. ";
  30.     }
  31. 	else
  32.     {
  33.        echo "
  34. <div id=\"buttons\">
  35. <input type=\"button\" value=\"vorw&auml;rts >>\" onclick=\"sndReq($next)\" id=\"btn_right\" /></div>
  36.  
  37. ";
  38.     }
  39. ?>

Prototype für die ganz fixen

So hier ist noch die angesprochene alternative Möglichkeit der realisierung mit Prototype. Die Realisierung ist mit der Bibliothek um einiges leichter das sie uns so gut wie alles an Arbeit mit Javascript abnimmt.

functions.js

  1.  
  2.  
  3. function sndReq(contentnr){
  4.     new Ajax.Updater('contentslider', '/content.php?content='+contentnr, { method: 'get' });
  5. }

Link zum unseren Ziel :-)

Tutorial Dateien

Das Video kommt aus Reallife technischen Gründen erst Morgen sorry an alle die es schon gerne hätten.

Soo das wars ersteinmal ich hoffe auf gutes gelingen. Sollte es Ungereimtheiten geben oder sollte ich einen Fehler oder etwas nicht ganz richtig erklärt haben, was ich aber eher weniger glaube, oder wenn euch das Tutorial gefällt lasst einen Kommentar da.

ÄHNLICHE ARTIKEL

Social Bookmarking

Post a Comment

CommentLuv Enabled

Stoppt die Vorratsdatenspeicherung! Jetzt klicken &handeln! Willst du auch an der Aktion teilnehmen? Hier findest du alle relevanten Infos und Materialien: