Dieses mal wollen wir uns mal ein wenig mit CSS auseinander setzen.

CSS gehört in Sachen Webdesign zu den Grundlagen und erlaubt sehr viele Möglichkeiten, um ein Design zu erstellen bzw. einzustellen. In der Regel werden die CSS-Anweisungen in einer seperaten CSS-Datei hinterlegt und werden dann in der index.php/index.html eingebunden. Das funktioniert mit folgenden Stück Code:

<link rel="stylesheet" type="text/css" href="styles.css" />

Aber das einbinden von CSS-Dateien soll uns heute nicht beschäftigen. Wir beschäftigen uns heute mit den ID’s und Klassen, die uns in CSS zur Verfügung stehen. Aber was sind die ID’s und die Klassen? Wofür benötige ich diese?

Es ist eigentlich leicht und schnell erklärt: Über die ID’s und die Klassen kann CSS einzelne Elemente ansprechen. So spricht folgender Code:

#sample{
   height: 100px;
   width: 200px;
   color: #999999;
}
#sample .samp{
   color: #e50000;
}

Nur Elemente an, die in dem Eltern-Element mit der id=”sample” liegen. Darüber hinaus spricht dieser code gezielt die class=”samp”  an, aber nur, solang das Element mit der Klasse “samp” in dem Eltern-Element mit der id=”sample” liegt. Als kleines Beispiel dient folgender Code:

<div id="sample"><!--Die ID, das Eltern-Element der Klasse-->
   <div class="samp"><!--Die Klasse-->
      Rote Schrift
   </div>
   Graue Schrift
</div>
Schwarze Schrift

Jetzt haben wir ein Beispiel aber ich erkläre nochmal im einzelnen, wie man classes und id’s in CSS anspricht.

Mit folgender Schreibweise spricht man eine id mit dem Namen “sample” an:

#sample{
   ...
}

Mit dieser Schreibweise spricht man eine class mit dem Namen “samp” an, die innerhalb eines Eltern-Elementes mit der id “sample” liegt:

#sample .samp{
   ...
}

Darüber hinaus kann man spezielle Elemente in einem Element ansprechen (egal ob class oder id):

#sample .samp a{
   ...
}

Damit sprechen wir alle Links innerhalb der Klasse “samp” an. Das geht natürlich auch Seiten-weit. So können wir mit folgenden Code:

a{
   color: #e50000;
}

Alle Links der Seite Rot färben.

Das sind, wie der Titel schon sagt, nur Grundlagen, die man beherschen sollte

Dabei wird geklärt, wo man sie benutzt, wann man welche benutzen und worauf man sonst noch so achten sollte.

Den Anfang machen wir mit “$_GET['sample']“:

Mittels $_GET können wir Variablen übergeben. Das ganze passiert über die URL. So würde “$_GET['sample']” bei diesem Beispiel: “http://www.meinblog.eu/index.php?sample=hallo” den Wert “hallo” haben. Auf diese Weise kann man nun verschiedene Variablen übergeben. Nützlich ist das vor allem, wenn man z.B. die Seitenzahl übergeben möchte. Ein Nutzer kann so z.B. dann manuell zu einer gewünschten Seitanzahl wechseln. Gleichzeitig ist diese Einflussnahme eine Nutzers auch eine der stärksten Schwachstellen von der $_GET-Funktion. So kann ein potenzieller Angreifer, dort einfach code einschleusen, der dann ausgeführt wird. Daher ist es ratsam, diese Variablen stets genau zu überprüfen (Anm.: mysql_real_escape_string()).

Kommen wir zu “$_POST['sample']“:

POST funktioniert sehr ähnlich wie GET, jedoch gibt es markante Unterschiede. Mit POST übermittelte Daten werden NICHT an die URL angehängt. Sie werden mit dem HTTP-Request-body übergeben. Die POST-Funktion bietet sich für Formulare an, die man auswerten möchte. Zu beachten ist auch, dass man mit POST Dateien uploaden kann, mit GET jedoch nicht.

Doch wann benutzt man was?

Als Faust-Formel kann man sich folgendes merken: GET kann man nutzen um sich etwas vom Server zu holen und POST um ihm etwas zu schicken.

Natürlich ist das so nicht allgemeingültig, jedoch sollte man es z.B. vermeiden Anweisungen, die Änderungen vornehmen via GET zu übermitteln, da diese sehr leicht manipuliert werden können und somit ein Fehler oder schlimmeres Produzieren können. Ein Vorteil von GET ist jedoch, dass man z.B. Unterseiten, die man mittels GET erreicht hat Bookmarken kann. Das geht mit POST nicht. Post sollte man hingegen bei Formularen verwenden. Wenn man nun ein Formular nach diesem Muster:

     <form action="auswerten.php" method="post">
            <input type="text" name="username" value="Hier Username angeben" />
            <input type="text" name="email" value="Hier Email angeben" />
            <input type="submit" name="submit" value="Speichern" />
            <input type="reset" value="Abbrechen" />
     </form>

erstellt, so kann man in einem Auswertungsscript gezielt einzelne Punkte ansprechen bzw. auslesen. Das könnte dann so aussehen (auswerten.php):

 if(isset($_POST['submit'])){
$username = mysql_real_escape_string($_POST['username']);
$email = mysql_real_escape_string($_POST['email']);
/*weitere Anweisungen, um z.b. die Daten hochzuladen*/
}

Wichtig: Egal ob ihr nun GET oder POST verwendet, überprüft stets, ob die Eingabe korrekt ist. Leider gibt es viele Leute im Internet, die sich einen Spaß daraus machen, die Arbeit anderer zunicht zu machen. So kann eine nicht überpüfte GET-Variable dazu missbraucht werden, um z.B. eure MySQL-Datenbank zu löschen.

Das macht man mit php und der schönen Funktion “include()”.

Aber fangen wir vorne an. Zunächst benötigen wir eine index.php, in der auch das Design vorhanden ist (Ob es auch geladen wird, oder ob es darin hardcoded ist, ist jetzt erstmal egal). Die index.php ist bei sehr vielen Programmierern sehr ähnlich aufgebaut. Man hat einen Head-Bereich und einen Body-Bereich. Darin sind dann die Informationen zu dem Design, Meta-Informationen usw. zu finden. Diese Interessieren uns jedoch nicht. Uns interessiert die Stelle, an der der Inhalt geladen werden soll.

Wie oben schon erwähnt machen wir das hier mit “include()”. Aber nicht nur, wir benötigen auch noch eine eine GET-Funktion und eine If-Bedingung.

Am Kopf der index.php schreiben wir nun folgendes hin:

    if(isset($_GET['site'])){
        $site = $_GET['site'];
    }

Mit dieser Zeile Code überprüfen wir, ob ein Link mit dem Schema http://www.example.com/index.php?site=meinblog aufgerufen wurd. Wenn ja dann definieren wir “$site” als den Wert hinter dem Gleichheitszeichen.

Kommen wir zum eigentlich interessanten Teil:

     if(isset($site)){
         if(file_exists($site.'.php')){
              include($site.'.php');
         }else{
              print 'Tut uns Leid, die von ihnen angegebene Datei existiert nicht!';
         }
     }else{
         include('news.php');
     }

Hier überprüfen wir, ob und wenn ja welche Seite als Inhalt angefordert wird. Zunächst erstmal fragen wir mittels der If-Bedingung ab, ob im Link ein entsprechender Verweis zu einem Script vorhanden ist. Wenn nicht, soll die Standart-Startseite geladen werden. In diesem Fall nennen wir sie news.php, sie kann aber auch anders heißen.

Ist jedoch ein spezielles Script gefordert, überprüfen wir, ob die Datei überhaupt existiert. Existiert sie nicht, geben wir eine Fehlermeldung aus. Existiert sie, wird sie geladen.

So kann man dann den Inhalt einer Seite neu laden, ohne, dass in jeder Datei, die Inhalt enthält, das Design vorhanden ist.

Die Verbindung zu einer solchen Datenbank ist mittels PhP sehr einfach zu bewerkstelligen. Dazu reichen ein paar Zeilen Code und schon ist man mitten drin.

	$host="localhost";
	$user="root";
	$pass="";
	$database="meinblog";
	$dz=mysql_connect($host, $user, $pass);
	mysql_select_db($database, $dz);

Das wäre auch schon der gesamte Code, um eine Verbindung zu Datenbank herzustellen. Aber schauen wir uns den Code mal etwas genauer an.

Zu Beginn definieren wir uns erstmal 4 Variablen. Das muss man nicht machen, man kann auch alles direkt in die MySQL-Anweisungen schreiben, jedoch ist das mal wieder ein wenig unübersichtlich. Daher die Variablen. Ich gehe bei dem Beispiel-Code von einer Lokal installierten Server-Version (z.B. Xampp) aus. Da ist in der Regel der Host = localhost, der Benutzer = root und er hat kein Passwort. Fehlt nur noch der Datenbank-Name. Bei einer Lokal Server-Version kann man in aller Regel sich die Datenbanken selbst erstellen, jedoch ist das bei gemieteten Webservern nicht immer so einfach. Meist muss man dort eine MySQL-Datenbank erstmal anfordern und dann bekommt man den Namen vorgegeben.

Da ich aber hier mit einem Beispiel arbeite, habe ich mich für den Datenbank-Namen “meinblog” entschieden.

Nachdem wir die Variablen definiert haben, müssen wir noch eine Verbindung aufbauen. Das machen wir, indem wir zunächst eine weitere Variable deklarieren, in der eine Verbindung zur MySQL-Datenbank hergestellt wird. Um diese Verbindung herzustellen benötigen wir einmal die Host-Adresse, den Usernamen und das Passwort. Dann haben wir zwar eine Verbindung zu dem Server, aber unser Script weiss noch nicht, in welcher Datenbank wir operieren wollen. Daher müssen wir erst eine auswählen. Dafür benötigen wir den Namen der Datenbank und die Verbindung zum MySQL-Server auf dem die Datenbank zu finden ist.

Daher haben wir auch vorher die Server-Verbindung in eine Variable geschrieben. Wie immer gilt, man kann das auch alles in eine Zeile Schreiben, aber es ist dann nicht sonderlich übersichtlich und dann schleichen sich leicht Fehler ein.

Diese 6 Zeilen Code schreibt man nun in eine Datei und nennt sie z.B. mysql.php. Nun muss man sie nur noch includen und fertig.

Tipp: Includet die mysql.php immer am Kopf der index.php, dann können alle Dateien, die ihr in der Index.php ausführt auf die MySQL-Datenbank zugreifen.

meinblog.eu geht ans Netz! Ab sofort steht die Seite 24/7 online und versucht euch zu helfen. Ob nun durch Tutorials, Beantwortung von Programmiertechnischen Fragen oder durch die Bereitstellung von kostenlosen Website-Designs.

Da die Seite gerade erst anläuft, bitte ich es zu entschuldigen, dass ich noch nicht allzuviele Tutorials etc. habe. Aber das wird sich in den kommenden Tagen legen.

Und nun viel Spaß mit meiner Seite

In dieser Ausgabe der PhP-Basics beschäftigen wir uns mit Funktionen. Was sind Funktionen, wofür braucht man sie und warum sollte man sie nutzen?

Dies sind einige der Fragen, auf die ich hier eingehen möchte. Doch fangen wir ganz vorne an: Wie sind Funktionen in PhP aufgebaut?

Ganz einfach:

function sample($string){
    echo $string;
}

Gucken wir uns den Code mal genauer an: Mit “function” teilen wir PhP mit, dass das folgende als Funktion deklariert wird. Dann kommt auch schon der Funktions-Name. Den können wir benennen wie wir möchten. In unserem Beispiel nennen wir ihn der Einfachheit’s halber “sample”. Der nächste Punkt ist auch ein sehr wichtiger: Die Klemmern, in denen deklariert wird, ob eine Variable übergebn wird. Da wir in unserem Beispiel einen String übergeben wollen, sagen wir der Funktion, dass sie eine Variable mit dem Namen “$string” zu erwarten hat. Diese Variable kann dann in der ganzen Funktion benutzt werden. Als nächstes kommt dann der Inhalt der Funktion.

Da wir in unserer Beispielfunktion nur den übergebenen String ausgeben wollen, steht daher nur

echo $string;

Das war es auch schon. Eine Funktion.

Aufgerufen wird eine Funktion, indem man ihren Namen plus gegebenenfalls die Variablen angibt. Bei uns sähe der Aufruf dann folgendermßen aus:

$hallo = "Hello World!";
sample($hallo);

Die Ausgabe wäre dann: Hello World!

Zu beachten ist, dass man die Funktion entweder in derselben php-Datei wie den Funktionsaufruf stehen hat, oder aber man die php-Datei, in der die Funktion steht, includet.
Ich benutze meist eine extra Datei, in der die Funktionen stehen. Das macht das ganze überischtlicher.

Was braucht man, um solch ein Dropdown-Menü zu verwirklichen? Nur ein paar Zeilen Code

In die dropdown.php kommt folgendes:

<ul class="drop-menu">
   <li><a href="#">Feld Eins</a></li>
   <li><a href="#">Feld Zwei</a></li>
   <li><a href="#">Drop-Feld</a>
        <ul>
             <li><a href="#">Sub-Feld Eins</a></li>
             <li><a href="#">Sub-Feld Zwei</a></li>
             <li><a href="#">Sub-Feld Drei</a></li>
        </ul>
   </li>
   <li><a href="#">Feld Vier</a></li>
</ul>

Das ist der Grundaufbau. So kann man zb. die Top-Navigation einer Website gestalten. Manche Punkte sollen dann normal verlinken (siehe Feld 1,2,4) andere jedoch sollen ein Dropdown-Menü öffnen (siehe Drop-Feld). Aber was haben wir dort überhaupt gemacht?
Wir zunächst erstmal eine Unsortierte Liste (ul) erstellt und ihr die Klasse “drop-menu” zugewiesen. In dieser Unsortierte Liste (ul) haben wir List Items (li) untergebracht. In diese List Items (li) können wir nun Links o.ä. reinschreiben oder aber auch eine weitere Unsortierte Liste (ul) mit dazugehörigen List Itmes.

So genug von der dropdown.php, kommen wir zu dem eigentlich interessanten: Die CSS-Datei. Bei mir heisst sie ganz einfach style.css. In diese Style-CSS kommt folgender Code:

ul.drop-menu, ul.drop-menu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    text-align:center;
}
ul.drop-menu a {
    display: block;
}
ul.drop-menu ul {
    position: absolute;
    display:none;
}
ul.drop-menu li {
    float:left;
    width: 90px;
}
ul.drop-menu li:hover ul  {
    display:block;
    width: 90px;
}
.drop-menu ul li a:hover {
   color: #069;
}
ul.drop-menu ul li {
    float:none;
    height: 20px;
}

Das wars auch schon. Mehr brauchen wir nicht, damit wir ein Dropdown-Menü erhalten. Aber gehen wir ersteinmal Schritt für Schritt die einzelnen Punkte durch. Fangen wir beim obersten Eintrag an:

ul.drop-menu, ul.drop-menu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    text-align:center;
}

Also diese Klasse wirkt sich auf alle Unsortieren Listen (ul) innerhalb der Klasse “drop-menu” sowie auf alle Unsortieren Listen (ul) innerhalb einer Unsortierten Liste (ul) aus.
Der erste Punkt: “list-style-type: none;” sorgt dafür, dass in einer Liste keine Aufzählungszeichen verwendet werden, wie zb. Punkte oder Striche vor den einzelnen Punkten in einer Aufzählung.
Die Punkte “margin: 0px;” sowie “padding: 0px;” sorgen dafür, dass die list nach außen keinen Abstand hat. So liegt sie zb. direkt am oberen und linken Rand des Browsers an.
Mit “text-align: center;” legen wir fest, dass der Text zentriert angezeigt wird.

Kommen wir zum nächsten Punkt:

ul.drop-menu a {
    display: block;
}

Dieser Eintrag führt dazu, dass alle Links in einer Unsortieren Liste (ul) als Block-Element dargestellt werden. Ein Block-Element erzeugt eine neue Zeile im Textfluss.

Als nächstes steht folgender Punkt an:

ul.drop-menu ul {
    position: absolute;
    display:none;
}

Dieser Eintrag zählt für alle Unsortierten Listen (ul) innerhalb einer Unsortierten Liste (ul).
Mit “position: absolute:” werden alle betreffenden Elemente aus dem Normal-Flow heraus genommen. Sie können somit andere Elemente überlagern.
Mit “display: none;” erreichen wir, dass die betreffenden Elemente nicht angezeigt werden.

Der nächste Eintrag lautet:

ul.drop-menu li {
    float:left;
    width: 90px;
}

Durch diese Zeilen Code werden alle List Items (li) links bündig ausgerichtet und haben eine breite von 90px.
Das wird durch float und width erreicht.

So kommen wir zu einem der interessanteren Einträge:

ul.drop-menu li:hover ul  {
    display:block;
    width: 90px;
}

Dieser Block wirkt sich auf alle Unsortierten Listen (ul) innerhalb eines List Items (li) aus, wärend die Maus auf ihm liegt. Dieses List Item (li) muss dabei innerhalb einer Unsortierten Liste liegen.
“dsiplay: block;” sowie “width: 90px;” wurde weiter oben schon erklärt.

Und nun der vorletzte Block:

.drop-menu ul li a:hover {
    color: #069;
}

Dieser Block wirkt sich auf alle Links innerhalb eines List Items (li), das in einer Unsortierten Liste (ul) liegt, aus wärend eine Maus darüber ist.
Mit “color: #069″ weise ich dem Link eine Schriftfarbe zu.

Zu guter Letzt:

ul.drop-menu ul li {
    float:none;
    height: 20px;
}

Dieser Block wirkt sich auf alle List Items (li) innerhalb einer Unsortierten Liste (ul), die ebenfalls innerhalb einer Unsortierten Liste (ul) liegt, aus.
Mit “float: none;” legen wir fest, dass die die List Items (li) weder links noch rechts bündig ausgerichtet werden soll.
Mit “height: 20px;” legen wir die Höhe der der List Items (li) fest.

So, das wars mit der Code-Erklärung. Man kann ein solches Dropdown-Menü noch auf viele verschiedene Weisen verschönern usw, aber ich wollte hier nur einen Grund-Gerüst vorstellen, mit dem man sehr leicht ein Dropdown-Menü verwirklichen kann.

Ihr findet die Tutorials in den jeweiligen Menü-Strukturen unter Tutorials

Flo

Und ein erster Schritt dahin sind wie oben schon erwähnt die Social Media – Verknüpfungen. Folgt mir auf Twitter, Facebook, Google+, RSS-Feed oder über Email.

Solltet ihr Fragen haben, stellt sie mir vie Mail und ich werde schnellst möglich darauf antworten.

Flo

Kurz vor Weihnachten ist es geschafft und ich habe das Design, was ich auf der Website benutzen möchte soweit fertig und installiert. Es ist ein zurückhaltenes und schlichtes Design. Ich befürworte einen dezenten Umgang mit Farben, weil ein Design sonst viel zu schnell zu Bunt wird. Ein Buntes Design, wo alles glitzert und schimmert ist in meinen Augen einfach nicht harmonisch anzusehen.

Ich hoffe, ihr seit mit meinem Design zufrieden. Selbstverständlich höre ich mir gerne eure Verbesserungsvorschläge an.

Flo