Was ist PHP?

PHP ist eine Skriptsprache, welche auf dem Webserver ausgeführt wird. Durch PHP wird es möglich Serverseitig Dynamische Webseiten zu erstellen.

Wie kann ich PHP benuzen?

PHP muss auf einem Webserver installiert werden, falls ihr keinen PHP fähigen Webserver habt, könnt ihr allerdings auch vorrerst einen lokalen Webserver auf euren eigenen Rechner erstellen. Dazu geht ihr auf die Webseite von Apache Friends und ladet euch XAMPP herunter und insstalliert es. Die installation ist sehr einfach, da in diesem Paket bereits alles Konfiguriert ist. Den Webserver tut ihr über das Xampp Control Menü starten, welches sich im XAMPP Ordner als xampp-control.exe finden lässt. Um nun Inhalte zu erstellen müsste ihr Dateien im htdocs(z.B. C:\xampp\htdocs) Ordner erstellen, alle Dateien in diesem Ordner sind über die Weboberfläche erreichbar, in dem ihr einen Browser eurer Wahl auf macht z.B. Firefox und in die Adresszeile eintippt: http://localhost. Nun sollte eine Webseite angezeigt werden, wenn ihr alles richtig gemacht habt.

Das erste Skript

Wie mittlerweile in jeder Programmiersprache üblich, fangen wir auch mit einem “Hallo Welt!” Skript an:

hallo-welt.php

<?php
 echo 'Hallo Welt!';
?>

Mit <?php wird jedes PHP Skript eröffnet und mit ?> wird es wieder geschlossen. In der zweiten Zeile steht nun unser erste Befehl. Das Keyword echo ist ein Befehl, welchen wir noch oft in PHP gebrauchen werden. Echo sorgt in PHP dafür das es eine Ausgabe gibt. Ein normales PHP Skript besitzt sonst keine Ausgabe. ‘Hallo Welt’ ist ein String, das bedeutet er wird mit ‘ eingeleitet und mit ‘ wieder beendet. Zwischen den beiden einfachen Anführungszeichen steht unser eigentlich Inhalt, nämlich Hallo Welt!. Das einfache Anführungszeichen findet ihr auf eurer Tastatur auf der Raute Taste neben der Entertaste, wenn ihr dabei die Shift Taste gedrückt haltet. Abgeschlossen wird jede PHP Anweisung mit einem Semikolon (;). In der letzten Zeile wird das PHP Skript wieder geschlossen mit ?>. Dieses Skript sorgt beim Aufrufen im folgende Ausgabe:

Hallo Welt!

Variablen in PHP

Nun ist das Skript noch Statisch und erzeugt bei jedem Aufruf immer dieselbe Ausgabe, deshalb beschäftigen wir uns jetzt mit Variablen um später dynamische Skripts zu erstellen. Variablen sind Platzhalter für irgendwelche X-Belibigen Inhalte. Aus der Mathematik als Buchstaben oder Platzhalter bekannt. In einer Variable können praktisch alle Inhalte sich befinden.

Eine Variable beginnt mit dem Dollar Zeichen($) mit einem nachfolgenden Namen. Achtung: Die Namen dürfen keine Leerzeichen oder Sonderzeichen enthalten und auch nicht mit einer Zahl beginnen.

text-variable.php

<?
 $text = 'Ich bin ein Text in einer Variable';

 echo $text;
?>

Wie wir in dem kleinen simplen Skript sehen wird der Variable $text der String ‘Ich bin ein Text in einer Variable zugewiesen. Eine Variable wird mit einem = Zeichen zugewiesen mit dem Nachfolgenden Inhalt der in der Variable stehen soll und mit einem ; abgeschlossen wird. In der 4. Zeile wird das ganze Mittels echo Ausgegeben. Diesmal steht hinter dem echo $text, was als Platzhalter für den oben definierten Text steht. Auch diese Seite wird noch statisch sein, wenn man sie im Browser aufruft, das der Variable immer der selbe Wert zugewisen wird.

Kommentare

In PHP können Kommentare eingefügt werden, wie in HTML mit <!– Zum start eines Kommentares und mit –> zum Beenden eines Kommetares. In PHP gibt es Verschiedene Arten von Kommentaren. Den mehr und einzeiligen Kommentar.

Einzeilger Kommentar

Da gibt es zum einen den einzeiligen Kommentar, er wird mit Hilfe von // eingefürt. Die zwei Slash Zeichen findet ihr auf eurer Tastatur über den Buchstaben bei der 7, wenn ihr dabei die Großschreibtaste (Shift-Taste) gedrückt haltet.

<?php
 // Ich bin ein einzeiliger Kommentar
?>

Ein Kommentar wird von PHP komplett Ignoriert, das heißt ihr könnt dort alles reinschreiben was ihr wollt, solange es sich im Kommentar Bereich Befindet. Bei einem einzeiligen Kommentar wird alles ignoriert, was rechts von den zwei Slash Zeichen sich befindet, er dient dazu um einen einzelnen Befehl zu kommentieren oder näher zu erläutern. Er muss nicht beendet werden, da er automatisch am Zeilenende endet.

Mehrzeiliger Kommentar

Der Mehrzeilige Kommentar kann X-Beliebige Zeichen umfassen. Er wird mit /* eingeleitet und mit */ beendet. Zwischen diesen Beiden Zeichen darf wie beim einzeiligen Kommentar alles stehen.

<?php
 /* Mehrzeiliger Kommentar
 Hier darf überall kommentiert werden
 und hier auch noch */

Unser erstes dynamische Skript

Mit der Funktion time(); wird die Unix Zeit angezeigt, es ist die Zeit in Sekunden, seit dem 01.01.1970 um 0Uhr in Sekunden. Bei jedem Aufruf wird nun also diese Zeit in Sekunden angezeigt. Deshalb ist das Skript dynamisch.

<?php
 echo time();
?>

Eine Funktion hat zwei Klammern nach dem Namen eine öffnende und eine schließende, zwischen diesen Klammern können Parameter stehen, Parameter sind Informationen, die diese Funktion beachten soll. In unserem Beispiel sind zwischen den beiden Klammern keine Parameter, da diese Funktion keine Parameter benötigt.

Nun wird man sich Fragen was man mit dieser Zeit soll, die kann man ja so gar nicht lesen. Deshalb gibt es in PHP ein Funktion um dieses Datum anzuzeigen.

<?php
 $aktuelleZeit = time(); // aktuelle Zeit im Unix timestamp der Variable $aktuelleZeit zuweisen

 echo date('d.m.Y h:I:s',$aktuelleZeit); // mithilfe der Datefunktion das Datum formatieren
?>

Jetzt wird das Datum samt Uhrzeit mit Stunden, Minuten und Sekunden angezeigt. Durch die Date Funktion können wir das Datum formatieren, sie hat zwei Parameter. Als ersten Parameter geben wir an, wie wir gerne das Datum formatiert haben. Dabei wird z.B. für d die Zahl für den Tag und mit m die Zahl für den Monat ausgegeben. Für den ersten Paramter gibt es verschiedene Parameter, die jeweils das Datum entsprechend formatieren, alle Parameter können hier nachgeschlagen werden: Parameter für Date. Der zweite Parameter ist der Timestamp den wir formatieren wollen, in unseren Beispiel die aktuelleZeit, wir vorher definiert haben.

Wer sich den Artikel ansehen will: http://d4nza.de/blog/tutorials/jquery-tutorial-1

Demo 1 Alert Box

Als erstes registrieren wir ein so genanntes “ready Event” für das Document. Dieses geht in jQuery mit der Funktion $(document).ready(function()). Im Code sieht das folgendermaßen aus:

$(document).ready(function() {
    //Mach irgendetwas wenn das Dokument geladen ist.
});

Wir wollen nun, das wenn man auf einen Link klickt, eine Messagebox erscheint, mit dem Inhalt Hallo Welt. Dazu schreiben wir folgendes in die Funktion:

$(document).ready(function(){
    $("a").click(function(){
        alert("Hallo Welt");
    });
});

Der komplette HTML Code sieht jetzt folgendermaßen aus:

Demo 1 Alert Box – Anzeigebeispiel: So sieht’s aus

<html>
    <head>
        <!--jQuery Framework laden (evtl. Pfad anpassen)-->
        <script src="jquery.js" type="text/javascript"></script>

        <!--Code für Demo 1-->
        <script type="text/javascript">
        $(document).ready(function(){
            $("a").click(function(){
                alert("Hallo Welt");
            });
        });
        </script>
    </head>

    <body>
        <!--Zwei Test Links-->
        <p><a href="#">Ein Link</a></p>
        <p><a href="#">Ein weiterer Link</a></p>
    </body>
</html>

Nun schauen wir mal was wir gemacht haben. $(“a”) ist ein jQuery Selector. Mit $(“element”) können verschieden Sachen selektiert werden, auch Klassen $(‘.klasseDesElements’) oder IDs $(‘#idDesElements’). Es kann aber auch kombiniert werden, um z.B. alle Divs mit der Klasse development zu selektieren $(‘div.development’).

In unserem Fall werden alle a Element in dem Dokument selektiert. click() fügt allen ausgewählten Elementen ein Klick Event hinzu. In unseren Fall wird eine ganz normale Javascript Funktion aufgerufen, nämlich alert(“Hallo Welt”);. Nun was passiert jetzt bei dieser Funkion? Alle a-Elemente führen beim klicken darauf, eine Messagebox aus in der steht Hallo Welt. Also genau das was wir wollten.

Demo 2 CSS Klassen

Eine andere Aufgabe von jQuery ist das hinzufügen und entfernen von CSS-Klassen. Zuerst erstellen wir mithilfe von CSS eine Klasse mit dem Namen test. Wir nehmen in diesem Fall mal eine fette und kursive Schriftart

a.test {
    font-weight: bold;
    font-style: italic;
}

Als nächstes kommen wir zum Javascriptteil. Sobald nun also das Dokument geladen ist, soll nun allen Links die Klasse test hinzugefügt werden. Dazu nehmen wir die zuvor gelernte Funktion $(document).ready(function()) mit der wir nun abfragen, wann die Seite fertig geladen ist. Mit $(“a”) selektieren wir nun alle a-Elemente und fügen mit der Funktion addClass() eine Klasse hinzu, in unseren Fall ist das die Klasse test.

$(document).ready(function(){
    $("a").addClass("test");
});

Nun noch ein paar Links zum Testen hinzufügen, schon werden wir sehen was passiert.

Demo 2 CSS Klassen – Anzeigebeispiel: So sieht’s aus

<html>
    <head>
        <!--jQuery Framework laden (evtl. Pfad anpassen)-->
        <script src="jquery.js" type="text/javascript"></script>

        <!--CSS Klasse "test" macht fett und kursiv -->
         <style type="text/css">
            a.test {font-weight: bold; font-style:italic;}
         </style>

        <!--Code für Demo 2-->
        <script type="text/javascript">
        $(document).ready(function(){
            $("a").addClass("test");
        });
        </script>
    </head>

    <body>
        <!--HTML Links ohne der "test" Klasse-->
        <p><a href="#">Ein Link</a></p>
        <p><a href="#">Ein weiterer Link</a></p>
    </body>
</html>

Wenn wir nun uns die Seite ansehen werden wir feststellen das alle Links fett und kursiv dargestellt werden. Die HTML Links haben also die Klasse test jetzt.

jQuery besitzt einige Spezial Effekte, von denen wir nun auch Gebrauch machen wollen. Sie lassen die eigene Website mit wenig Aufwand schön für den Besucher aussehen.

Als aller erstes nehmen wir eine ganz normale Div Box, mit etwas Text drin:

<div style="background-color:#336699;color:#fff;">
    Ich bin eine Testbox und muss immer viel arbeiten 
</div>

Damit wir die Box besser sehen, habe ich per Style Attribut, die Hintergrund Farbe auf Blau und die Schrift Farbe auf weiß gesetzt.

Nun fügen wir noch einen Link hinzu, der etwas machen soll:

<a href="#" id="klein">Mach die Box klein (80 x 120px)</a>

Ich gebe diesen Link die ID klein, sodass wir später mit jQuery diesen Link selektieren können.

Als nächstes fügen wir noch etwas javascript hinzu, sodass der Link auch etwas macht wenn man drauf klickt:

$(document).ready(function(){
    /*Box klein machen*/
	$('a#klein').click(function(){
		$('div').animate({ height: 80, width: 120 }, "slow", function(){});
	})
});

Wir selektieren mit $(‘a#klein’) unseren zuvor erstellten Link und geben ihn das Event click, wie schon zuvor erklärt wird bei einem Klick auf das Element nun der javascript Code in den Klammer ausgeführt.

Als nächstes bestimmen wir welches Objekt verändert werden soll ($(‘div’)), in diesen Fall sind das alle div Elemente. Mit der Funktion animate können wir Objekte animieren. Animate besitzt verschiedene Eigenschaften, in unseren Beispiel sagen wir height die Höhe auf 80px und width die Breite auf 120px, den Effekt wollen wir nun langsam haben, also hängen wir noch ein slow an.

Demo 3 Spezial Effekte – Anzeigebeispiel: So sieht’s aus

<html>
    <head>
        <!--jQuery Framework laden-->
        <script src="jquery.js" type="text/javascript"></script>

        <!--Code für Demo 3-->
        <script type="text/javascript">
        $(document).ready(function(){
            /*Box klein machen*/
            $('a#klein').click(function(){
                $('div').animate({ height: 80, width: 120 }, "slow", function(){});
            })
            /*Die Box große machen*/
            $('a#gross').click(function(){
                $('div').animate({ height: 200, width: 800 }, "slow", function(){});
            })
            /*Mehrer Effekte bestimmen*/
            $("a#slideFade").toggle(function(){
                $("div").animate({ height: 'hide', opacity: 'hide' }, 'slow');
            },function(){
                $("div").animate({ height: 'show', opacity: 'show' }, 'slow');
            })
        });
        </script>
    </head>

    <body>
        <div style="background-color:#336699;color:#fff;">Ich bin eine Testbox und muss immer viel arbeiten  </div>

        <p><a href="#" id="klein">Mach die Box klein (80 x 120px)</a></p>
        <p><a href="#" id="gross">Mach die Box Groß (200 x 800px)</a></p>
        <p><a href="#" id="slideFade">Dieser Link führt zwei Unteschiedliche Funktionen aus</a></p>
    </body>
</html>

Ich habe noch zwei weitere Links hinzugefügt und genau wie eben noch ein paar Effekte hinzugefügt. Einzige Besonderheit ist bei Link Nummer 3. Er führt beim zweiten Klick eine andere Funktion aus, als beim ersten. Beim ersten Klick lässt er die Box verschwinden und beim zweiten Klick wieder erscheinen. Dafür habe ich die Funktion toggle benutzt. An ihr kann man beliebig viele Funktionen an Reihen, die der Reihe nach abgearbeitet werden und dann wieder von vorne beginnt. Per animate und der height und opacity und der Eigenschaft hide bzw. show kann man die Box verschwinden und wieder erscheinen lassen.

Am besten man guckt sich mal die Beispiel Seite an und probiert es selber einmal.

Wer noch weiter probieren will, sollte sich mal jQuery UI ansehen, hier zu auch ein kleines Tutorial.

Englische Übersetzung von Pathin – http://www.pathin.org/tutorials/jquery-tutorial/

Fakt ist man kann damit, wenn man weiß wie, sehr schnell schöne Funktionen schreiben.

http://jquery.com/