SchmaRs World » Tutorials http://www.schmars-world.de Mon, 03 Aug 2009 23:47:53 +0000 http://wordpress.org/?v=2.8 en hourly 1 CSS drop down Navigation http://www.schmars-world.de/index.php/css-drop-down-navigation-2008-09-10/ http://www.schmars-world.de/index.php/css-drop-down-navigation-2008-09-10/#comments Wed, 10 Sep 2008 18:28:36 +0000 SchmaR http://www.schmars-world.de/?p=65 Heute gibt es mal wieder ein kleines Tutorial auf SchmaRs-World.de. Dieses Mal geht es um eine Simple „drop down Navigation“. Die „Inspiration“ zu diesem Tutorial habe ich durch ein Codesnippet zum Thema „Mouseover mit CSS“ von Raph im Eurostyle-Webmedia.de Forum bekommen. Herzlichen Dank an dieser Stelle dafür ;) .

Wir werden die Navigation mit 4 ineinander verschachtelten Listen realisieren. 1 Dieser Listen ist die „Hauptnavigation“ in welche die anderen eingebettet werden.

Dieses Tutorial richtet sich an Anfänger/Fortgeschrittene um es verstehen zu können sollte man bereits einige Grundkenntnisse in (x)html und CSS haben.


Hier ist eine Preview unseres Ziels

Das xhtml Grundgerüst

Als erstes Fangen wir mit dem xhtml- Code an. Den Anfang bildet wie immer der obligatorische Link zum Stylesheet innerhalb der <head></head> tags. 

  1.  
  2. <link href="style.css" media="screen" type="text/css" rel="stylesheet" />

Als nächstes brauchen wir eine Liste hierfür eignet sich eine ungeordnete Liste also <ul></ul>. Diese liste bekommt nun 3 Einträge für die Kategorien unserer Navigation. Jedem dieser Einträge weisen wir die CSS-Klasse „navi“ zu, welche wir später noch definieren werden. Die list-Items (<li>) bekommen jetzt noch den Inhalt „Kategorie 1-3“. Unser Quellcode sieht nun wie folgt aus.

  1.  
  3. <li class="navi">Kategorie 1</li>
  4. <li class="navi">Kategorie 2</li>
  5. <li class="navi">Kategorie 3</li>
  6. </ul>
  7.  

Jetzt bekommt jedes Element unserer Liste eine weitere Liste als Inhalt, auch hier bietet sich eine wieder eine ungeordnete Liste an. Jeder dieser „Unterlisten“ weisen wir die CSS-Klasse „submenu“ zu. Alle Listen mit der „submenu- Klasse“ bekommen jeweils 3 list-tems mit dem Inhalt „link1-3“. 

  1.  
  3. <li class="navi">Kategorie 1
  4. <ul class="submenu">
  5. <li>link1</li>
  6. <li>link1</li>
  7. <li>link1</li>
  8. </ul>
  9. </li>
  10. <li class="navi">Kategorie 2
  11. <ul class="submenu">
  12. <li>link2</li>
  13. <li>link2</li>
  14. <li>link2</li>
  15. </ul>
  16. </li>
  17. <li class="navi">Kategorie 3
  18. <ul class="submenu">
  19. <li>link3</li>
  20. <li>link3</li>
  21. <li>link3</li>
  22. </ul>
  23. </li>
  24. </ul>
  25.  

So das war es auch schon von der xhtml Seite, weiter geht’s mit dem Cascading Style Sheet.

Die style.css

Der CSS Code ist recht minimalistisch, jedoch sehr wirkungsvoll.

Als erstes beginnen wir mit einigen Allgemeinen Eigenschaften.

  1. *,
  2. html,
  3. body{
  4. 	margin:0;
  5. 	padding:0;
  6. }
  7.  
  8. body{
  9. 	color:#000000;
  10. 	background-color:#EFEFEF;
  11. 	font-family:Arial, Helvetica, sans-serif;
  12. 	font-size:12px;
  13. }

(Der Code der in der body klasse enthalten ist, dient lediglich dem Layout.)

Nun ist die Klasse "Navi" dran. Wir setzen die Eigenschaft display auf inline um aus den (in den meisten Fällen) standardmäßig als Block-Elemente deklarierten List-items ein Inline-Element zu formen. Die restlichen Angaben in dieser Klasse sind lediglich für das Layout zuständig und können nach belieben gestaltet oder weggelassen werde.

  1. .navi{
  2. 	display:inline;
  3. 	background:#97E1FD;
  4. 	font-size:16px;
  5. 	border:#66FFFF 2px dotted;
  6. 	margin-left:100px;
  7. }

In diesen kleinen aber feinen Schritt definieren wir die Klasse „submenu“. Sie bekommt lediglich die Eigenschaft „display“ mit dem Wert „none“ zugewiesen wodurch alle „submenu-Elemente“ nicht angezeigt werden.

  1. .submenu{
  2. 	display:none;
  3. }

Jetzt kommt das Herzstück unserer Navigation. Die Deklaration des Verhaltens der Klasse „submenu“, wenn sich der Mauszeiger über einen „navi“ Element befindet. Die Eigenschaft „display“ wird auf „inline“ gesetzt wodurch die zuvor nicht sichtbare Liste als inline-Element dargestellt wird. Das setzen der Eigenschaft „position“ auf „absolute“ ist neben den eben bei display angewandten verfahren Elementar. Das setzen von absolute entfernt die „submenu-Elemente“ aus dem normalen Textfluss sodass sie über oder unter den anderen Elementen angezeigt werden und nicht das Layout zerstören. Mit der Eigenschaft „z-index“ wir angeben welches Element über welchen liegt. z.B. wird ein Element das einen „z-index“ von 1 hat unter einem mit einem „z-index“ von 2 dargestellt. Die Eigenschaft „margin-left“ hat in diesem Fall nur Layouttechnische Bedeutung.

  1. .navi:hover .submenu{
  2. 	display:inline;
  3. 	position:absolute;
  4. 	z-index:2;
  5. 	margin-left:1px;
  6. }

Nun ist es fast geschafft jetzt folgt noch eine kleine Definition des Verhaltens von List-Items innerhalb eines „submenu“ Elements. Hierbei sind die Eigenschaften „display“ und „list-style-position“ wichtig. Die auf Block gestellte Eigenschaft „display“ sorgt dafür dass die Listenelemente untereinander also als Block Elemente dargestellt werden. list-style-position:outside; ist lediglich ein Fix für den IE7 da dieser ansonsten vor den Inhalt der List-Item einen freien platz darstellt.

  1. .navi:hover .submenu li{
  2. 	display:block;
  3. 	background-color:#6699FF;
  4. 	border:#66FFFF 1px dotted;
  5. 	list-style-position:outside;
  6. }

Hier die Tutorial Dateien.

So da war es auch schon mit unserem kleinen Turorial ich hoffe es hat euch weitergeholfen und war gut zu verstehen. Für Kritik positive wie negative bin offen, also lasst eure Meinung in den Kommentaren da.

]]> http://www.schmars-world.de/index.php/css-drop-down-navigation-2008-09-10/feed/ 4 Contentslider/Specialbox – Tutorial http://www.schmars-world.de/index.php/specialbox-video-tutorial-2008-08-25/ http://www.schmars-world.de/index.php/specialbox-video-tutorial-2008-08-25/#comments Mon, 25 Aug 2008 00:50:56 +0000 SchmaR http://www.schmars-world.de/?p=41 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.

]]> http://www.schmars-world.de/index.php/specialbox-video-tutorial-2008-08-25/feed/ 0 MySQL Backup mit phpmyadmin http://www.schmars-world.de/index.php/mysql-backup-phpmyadmin-2008-05-29/ http://www.schmars-world.de/index.php/mysql-backup-phpmyadmin-2008-05-29/#comments Thu, 29 May 2008 17:26:41 +0000 SchmaR http://web285.srv12.sysproserver.de/sw/?p=6 Da ich Gestern darauf angesprochen wurde wie man ein MySQL Backup mit phpmyadmin erstellt, habe ich mir gedacht, dass ich ein kleines Anfänger-Tutorial verfassen könnte. In diesem Tutorial werde ich nur grob auf die Dinge eingehen, aber soweit das es für Niemanden der schon mal phpmyadmin gesehen hat, ein Problem darstellt diese Schritte durchzuführen. Dieses Tutorial richtet sich an Benutzer von Content Management Systemen ohne interne Backup Funktion, wie z.b.: WebSPELL. Hierfür habe ich eine Datenbank mit 2 Tabellen angelegt.

Step1: Datenbank auswählen

Datenbank mit 2 Tabellen

Auf den Screenshot sieht man die Benutzeroberfläche von phpmyadmin, ich habe die zu Demonstrationzwecken erstellte Datenbank "usr_web285_3" bereits durch einen Klick auf derren Eintrag in dem Listenfeld links, oben, ausgewählt. Bei manchen Webhostern müssen Sie die Datenbank nicht mehr auswählen, da dies schon bei ihrem Login Automatisch geschieht. Im großen Hauptfenster von phpmyadmin werden nun einige grundlegende Daten über die Datenbank und deren Aufbau angezeigt. In unserem Falle 2 Tabellen "foobar" und "Tolle tabelle" mit jeweils 0 Einträgen da dies nur eine Testdatenbank ist. Die restlichen, angezeigten Informationen sind für dieses Tutorial von keiner größeren Bedeutung und deshalb vernachlässige ich diese.

Step2: Das Exportieren vorbereiten und durchführen

Exportieren

Um ein MySQL Backup zu erstellen müssen sie die Datenbank exportieren. Dazu klicken sie auf die Schaltfläche "exportieren". Nun wird im Hauptfenster das Formular zum exportieren einer Datenbank angezeigt. Ich werde die Auswahlmöglichkeiten einzeln erklären. Beginnen wir mit der Auswahl der zu exportierenden Tabellen.

Tabellen Auswahlfeld

Markieren sie in diesem Feld die Tabellen welche sie exportieren möchten, Standardmäßig sind alleTabellen der Datenbank ausgewählt. Eine einzelne Tabelle können sie durch einen Klick (de)selektieren, um mehrere Tabellen zu (de)selektieren halten sie die linke Maustaste gedrückt und fahren sie über die jeweiligen Tabellennamen.


Kompression

Als nächstes kommen wir zur Kompression. Wählen sie eine Kompression aus wenn es nicht Standartmäßig so sein sollte und klicken sie auf OK. Alternativ können sie auch keine Kompression verwenden, sollten sie dies tun gibt es eine gute Funktion um kleinere Datenbanken auf einen anderen Server zu portieren. Deaktivieren sie die Checkbox "senden" dann erhalten sie ein Textfeld mit dem MySQL dump, dieses können sie als SQL Befehl in eine andere Datenbank importieren.

SQL dump

Die restlichen Optionen können sie bei kleineren Projekten, in ihren Standarteinstellungen belassen, sollten sie jedoch größere Projekte planen sollten sie sich genauer mit MySQL auseinandersetzen, hierfür ist das Manual sehr gut geeignet.

Andere Optionen

In diesem sinne viel Erfolg und
Horns Up!

]]> http://www.schmars-world.de/index.php/mysql-backup-phpmyadmin-2008-05-29/feed/ 1