Einführung in die Programmierung mit HTML und PHP
Erste Schritte in PHP: einfaches Rechnen und Schreiben
Zentrale - Lehrgänge - Einführung HTML+PHP - PHP-Einführung

Lehrziel

Heute setzen wir mit Einführung in die Programmierung fort, und zwar mit den Themen
Unser Ziel: Ein Spielfeld für Tic-Tac-Toe

Spielfeld


Es geht heute wieder nicht um Perfektion und ums Büffeln, sondern um schnelle Erfolge mit spielerischem Lernen durch Anwenden und um den Abbau der Scheu vor der Vielfalt der sich auftuenden Welten.

Das wichtigste am heutigen Tag ist wieder das eigene Experimentieren, um Fertigkeiten mit den Werkzeugen zu erlangen, sowie das Orientieren in den Dokumentationen, zu denen es Anleitungen im Unterricht gibt.

Wir werden erreichen, daß Sie am Ende des heutigen Tages, wenn Sie die Aufgabe erhalten, etwas bestimmtes in PHP auszudrücken, was Sie unmöglich im Detail wissen können, nicht mehr in Panik ausbrechen sondern ihren Browser aufschlagen, ein paar Stichworte in einer Google-Suche eintippen und sich im nächsten Moment auf einer Dokumentationsseite wiederfinden, wo alles notwendige im Detail beschrieben und mit Beispielen erläutert ist.

Für Leute mit Vorkenntnissen: PHP ist eine C-artige Sprache, von der grundlegenden Ausdrucksweise her ähnlich Sprachen wie C, C++, C#, Java, Javascript. Wer in einer davon Erfahrungen hat, wird PHP sehr schnell selbständig erschließen können.

PHP - Grundstruktur

Referenz: Grundlagen der Syntax!
alternatives Tutorial: Peter Kropff: PHP - Einleitung bis PHP - Grundlagen - Einbindung

Was PHP und HTML miteinander zu tun haben
PHP ist die Abkürzung für ursprünglich "Personal Home Page Tools". Die Abkürzung stammt aus den absolut blutigsten Anfängen dieses Werkzeugs und hat mit der heutigen Bedeutung nichts mehr zu tun. Heutzutage wird die Abkürzung als selbstrekursives "PHP Hypertext Prozessor" verstanden.
  • Das Ding mit dem "Hypertext" haben Sie noch von der letzten Lektion in Erinnerung? Es geht darum, daß PHP vordergründig zur Erzeugung und Verarbeitung von HTML-Text und Server-Anfragen aus HTML-Links und HTML-Formularen gedacht ist.

  • "Prozessor" bezieht sich auf den Umstand, daß PHP eine Programmiersprache ist, die durch eine Maschine (einen Prozessor eben) verarbeitet wird. Der Prozessor steckt bei uns integriert im Apache-Webserver des XAMPP. Das bietet sich an, weil das HTML, für das dieser Prozessor gedacht ist, das zentrale Dokument-Format und Bindemittel im Internet ist und diese HTML-Dokumente im Internet von nichts anderem als Webservern an die Browser der Websurfer ausgeliefert werden.

    Es gibt übrigens Leute, die Ihnen am liebsten eine Pistole auf die Brust setzen, wenn Sie sich die "Frechheit" herausnehmen, bei HTML von "programmieren" zu reden. Bei mir DÜRFEN Sie das. (Sich die Freiheit nehmen, nicht Pistolen auf Brüste setzen!) Denn HTML/CSS IST sehr wohl ein Zeug, das von einem HTML/CSS-Prozessor (einem Browser üblicherweise) interpretiert wird - wie jede andere Programmiersprache auch. Der Unterschied zu "normalen" Programmiersprachen besteht lediglich in dem philosophischen Detail, daß HTML/CSS einen "axiomatischen" Ansatz darstellen, während "normale" Programmiersprachen einen "ablauforientierten" Ansatz verfolgen.

    "Axiomatisch" heißt: Sie definieren Zusammenhänge, die für die gesamte "Welt", die Sie modellieren, Gültigkeit haben. Eventuelle notwendige Aktionen, die aus den Definitionen resultieren müssen (bei HTML z.B. Seitenaufteilung, Größenanpassungen, Zeilenumbrüche, Fontwechsel für Textauszeichnungen, Einfärbungen von Hintergründen, Einhaltung von Reihenfolgen der Dastellung für Transparenz-Erzeugung und und und...), erzeugt der Interpretierer aufgrund der von Ihnen gegebenen Axiome automatisch, und zwar idealerweise so, daß Ihre Axiome immer ihre Gültigkeit behalten.

    In der Schule in Mathematik und Physik erlernen Sie vordergründig ein axiomatisches Herangehen: Gleichungen sind als Axiome gemeint. Gleichungsumformungen erlernen Sie so und zu dem Zweck, daß solche axiomatischen Bedeutungen erhalten bleiben.

    Nichtsdestotrotz IST das axiomatische Definitieren von Systemen eine Art des Programmierens. Und erfordert vom Programmierer weitgehend die gleichen Fähigkeiten und Herangehensweisen wie bei Ablauf-orientierter Programmierung.

    PHP ist nun wieder eine Ablauf-orientierte Programmiersprache. Hier müssen Sie sich um jede Aktion, die stattfinden soll, im Detail und um die konkrete ursächliche, zeitliche und wirkungsmäßige Einordnung selber von Hand kümmern. Das hat Vorteile gegenüber axiomatischer Herangehensweise, indem viel mehr Freiheiten eröffnet werden, aber auch den Nachteil, daß man sich daran erstmal gewöhnen muß, wenn man in seinem Leben noch nie ablauforientiert programmiert hat. Und natürlich, daß man sich um die KORREKTHEIT der Aktionen im Sinne dessen, was man eigentlich erreichen will, selber zu kümmern hat. Was eine Vielzahl von Fehlermöglichkeiten eröffnet.

    Axiomatische Systeme sind demgegenüber wesentlich leichter zu programmieren: Da brauchen Sie nur darauf achten, daß Ihre Axiome syntaktisch korrekt und nicht in sich oder untereinander widersprüchlich sind.

Beides wird miteinander vereint, indem der Webserver einfach angewiesen wird, bestimmte Dokumente als PHP-Programme zu interpretieren. In der Regel sind das alle Dateien, die auf ".php" enden. Bei uns ist das alles bereits fix und fertig im Webserver eingebaut: Sie brauchen keinen Handschlag mehr tun!

Funktionieren tut das ganze natürlich nur unter der Bedingung, daß Sie Ihre PHP-Seiten auch von Ihrem Webserver abholen lassen! Das bedeutet, es funktioniert NICHT, wenn Sie eine Datei im Dateimanager einfach so doppelklicken, weil dann die Datei eben NICHT vom Webserver geholt wird, sondern DIREKT vom Datenträger gelesen wird! Gewöhnen Sie sich also an, Dateien mit dem Browser vom Webserver abzufragen! Wie Sie das mithilfe von Links und Lesezeichen hinkriegen, hatten Sie in der letzten Lektion bereits ausführlich geübt!
Und DAMIT Ihr Webserver die Dateien auch ausliefern kann, müssen die natürlich im Verzeichnisbaum der Webserver-Dateien abgelegt werden! Auch das hatten Sie in der letzten Lektion bereits kennengelernt. Werfen Sie gegebenenfalls nochmal einen Blick zurück!

Aus Sicht des PHP-Prozessors ist es wiederum so: Alle PHP-Programme SIND erstmal HTML-Dokumente, in die eventuell PHP-Code "eingebettet" ist. Wie DAS geht, sehen wir uns jetzt an...

Ein PHP-Programm ist also üblicherweise nichts anderes als eine HTML-Seite mit eventuell eingebauten PHP-Anweisungen, die eine etwas andere Dateiendung hat.

PHP-Anweisungen in HTML einbauen
Das Einbauen von PHP in HTML ist nichts anderes als eine spezielle Form von HTML-Anweisung. Die Sie ja im allgemeinen bereits kennen. Daher sollte Ihnen das hier keinen Schauer mehr über den Rücken jagen können:
<?php ... ?>
Bei den Pünktchen kommen PHP-Anweisungen rein. Das wars schon.

Ein konkretes Beispiel für eine PHP-Anweisung, mit der wir auch gleich das Programmieren beginnen werden, wäre:
<?php echo 'Hallo!'; ?>
Hier steht die Anweisung, daß das Wort "Hallo!" in den HTML-Text eingefügt zu werden hat. Wenn ein PHP-Interpreter über diese Anweisung stolpert, führt er sie schnurstraks exakt so aus. (Daß das Einfügen "echo" genannt wurde, hat historische Ursachen. Nehmen Sie's einfach hin, OK?!)

Man kann auch beliebig viele PHP-Anweisungen hintereinander und untereinander schreiben:
<?php
echo "Hallo!"; echo "Ja?";
echo "Was?";
echo "Was was?";
?>

OK, es gibt noch eine zweite Form...
Manchmal gibt es Fälle, wo Sie nur einen einzigen Wert ins HTML einsetzen wollen. Ohne großartig irgendwelche Abläufe zu organisieren. Sondern einfach nur einen einzelnen Wert. Wobei es egal ist, ob der eine direkt hingeschriebene Konstante, der Wert einer Variablen, das Ergebnis einer Funktion, einer Formel oder was im Rahmen der Programmiersprache eventuell noch so möglich sein mag, ist. Das sieht dann zum Beispiel so aus:
<?= "Hallo!" ?>
Dies macht exakt dasselbe wie die Zeile mit dem 'echo "Hallo"' weiter oben. Nur mit etwas weniger Schreibaufwand. Ist aber dafür auf einen einzelnen Werte-Ausdruck beschränkt.

In dem PHP-Abschnitt, der mit "<?php" und "?>" begrenzt wird, können Sie dagegen so VIELE Anweisungen wie Sie lustig sind unterbringen, die zudem mitnichten einen Wert "darstellen" müssen.

Es gäbe noch weitere spezielle Formulierungen, aber keine von denen benötigen Sie, und keine von denen ist sonderlich gebräuchlich. Bei Bedarf werfen Sie einen Blick bei Peter Kropff: PHP - Grundlagen - Einbindung oder der Sprach-Referenz rein!

Allgemeines zur Syntax
Wenn Sie sich mal die eben besprochenen Beispiele anschauen und diese unter Zuhilfenahme Ihres gesunden Menschenverstandes mit dem vergleichen, was Sie (eventuell vor längerer Zeit) in der Schule gelernt haben - speziell im Deutsch-Unterricht zu Satzbau und Grammatik -, dann werden Sie Äquivalenzen zur normalen umgangssprachlichen Ausdrucksweise entdecken: So wie Sie in der normalen Umgangssprache bestimmte Elemente im Satzbau speziell kennzeichnen müssen - sei es durch Betonungen in der mündlichen Aussprache oder durch spezielle Satzzeichen in der schriftlichen Ausdrucksweise -, so müssen Sie das NATÜRLICH auch beim Programmieren. Die Menschen, die die Interpreter gebaut haben, die Ihre Programme interpretieren müssen, waren eben auch nur Menschen und ticken genauso wie andere - mehr oder weniger normale - Menschen.

Im Satzbau müssen Sie Objekte und deren Handlungen eindeutig ausweisen. Bei mehreren beteiligten Objekten außerdem noch, wer von denen der Handlungsträger, wer das Handlungsziel (-opfer) und wer eventuell Instrument ist. Nichts anderes müssen Sie beim Programmieren AUCH.

Ein Beispiel... Sehen Sie sich die folgenden Aufforderungs-Sätze an:
Sag, ist das Hans?
Sag: "Ist das Hans?"!
Sag: "Iß das", Hans!

Es sind Aufforderungen an ganz unterschiedliche Adressaten, mit ganz unterschiedlichen Handlungen. Einige davon implizit. Aber äußerst ähnlichen Einzelworten (nur beim dritten ein wenig "geschummelt").

So normal, wie dies in der Umgangssprache ist, ist dies auch beim Programmieren: Sie müssen sich klar sein, ...
  • zu welchen Handlungen Sie auffordern wollen
  • an wen Sie die Aufforderungen (Anweisungen/Befehle) richten
  • daß Sie alle Details der Handlung einschließlich der beteiligten Objekte beschreiben müssen, sofern sie nicht implizit vereinbart sind
  • wie sich bei mehreren beteiligten Objekten deren gegenseitige Beziehung gestalten soll und was sich in Ihrer Aufforderung auf wen beziehen soll
  • welche Satzzeichen (alias Operatoren) und grammatischen Bauweisen von Sätzen Sie verwenden müssen, um dies auszudrücken

Alle dazu notwendigen Denkprinzipien haben Sie bereits in der Schule bis etwa zur 6. Klasse gelernt - in Deutsch und Mathe:
  • Die Grammatik vom umgangssprachlichen "Satzbau" haben Sie bereits als Kleinkind in kleinen Schritten, intuitiv, durch Nachmachen und Verallgemeinern erlernt. Sie sind bis ins hohe Alter in der Lage, das jederzeit zu wiederholen. Auch für künstlich erschaffene Programmiersprachen. Dort sogar ganz besonders effektiv, weil die ganz besonders systematisch sind.

  • Bei "imperativer" Ausdrucksweise ("Aufforderungen"), steht eine angeforderte Handlung im Mittelpunkt der Betrachtung. In der Regel beschreibt das erste Wort einer Aufforderung diese Handlung. Bei imperativer Programmierung - und das wird die Technik sein, auf die ich Sie in diesem Lehrgang orientiere - ist das exakt dasselbe.

  • Wenn Sie in einem Programm wollen, daß irgendwer irgendeinen Text wörtlich übernimmt, dann haben Sie diesen in Anführungszeichen einzuschließen - ganz wie Sie die Prinzipien der wörtlichen Rede schon in der Schule in Deutsch gelernt hatten.

    Der gesunde Menschenverstand kommt an der Stelle hinzu, wo in Programmiersprachen strikte Systematik eingehalten werden muß, aber wörtliche Reden gegebenenfalls ineinander geschachtelt auftreten wie im richtigen Leben: Da gibt es zwei verschiedene Anführungszeichen, und zwar einmal das einfache, zum anderen das doppelte Hochkomma. Die sind in PHP gleichwertig und können gefahrlos ineinander geschachtelt werden, solange nur einfach das eine ins andere geschachtelt wird. Komplexere Fälle brauchen wir vorläufig noch nicht.
    <?php
    echo "Sag 'Hallo!', Anton!"; /* und ernsthaft: */ echo "<img src='xampp.gif'/>";
    echo 'Sag "Hallo!", Anton!'; /* und ernsthaft: */ echo '<img src="xampp.gif"/>';
    ?>
    
    Falls komplexeres doch mal notwendig sein sollte, gibt es Möglichkeiten, ein sogenanntes "Escaping" anzuwenden. Das gibt es übrigens für verschiedene Szenarien in unterschiedlichen Formen. Wenn Sie sich nur diesen Begriff "escaping" merken und bei Bedarf Google benutzen, können Sie sich Büffeln wie Ärgern komplett ersparen...
    <?php
    echo "Hans sagte: 'Erna sagte: \"Das ist Adam\'s \'Apfel\'!\"'";
    // und ernsthaft:...
    echo "<div style='background: url(\"xampp.gif\"); width: 100px; height: 50px;'></div>";
    ?>
    
    (Fassen Sie die konkreten Attribut-Inhalte hier erstmal als "Lore ipsum"-Text auf: Konzentrieren Sie sich ausschließlich auf die diskutierten Details - hier die Hochkommata! Der Rest ist für Sie erstmal purer Füllstoff!)

  • Um das Zusammengehören bestimmter Aussagen eindeutig auszuweisen, können Sie Klammern verwenden - ganz genau so, wie Sie diese in der Schule in Mathe kennengelernt haben und hier im Text fortlaufend lesen können, als runde Klammern (), sofern es um das Zusammensetzen von Ausdrücken (Werten) geht. Außerdem gibt es sie als geschweifte Klammern {}, wenn es um das Zusammenfassen von Anweisungen (die mitnichten Werte-Ausdrücke sein müssen) geht.
    Unter bestimmten Bedingungen müssen Sie zwingend solche "Blöcke" bilden. Wir werden das genauer im letzten Abschnitt dieser Lektion ansehen.

  • Mathematische Operatoren und Funktionen sind weitgehend exakt so bezeichnet, wie Sie sie in der Schule kennengelernt haben. Das hat einen guten Grund: Auch Programmierer sind nur Menschen, die, solange sie sich nicht mit Selbstmordgedanken plagen, sich nicht freiwillig das Leben schwer machen. Vertrauen Sie also einfach auf ihre Mathe-Grundkenntnisse, und den Rest erledigen Sie mit Google! Wer in Mathe größere Probleme hatte, hat es natürlich als Programmierer schwerer. Aber Übung macht in jedem Fall Meister!

  • Niemand ZWINGT Sie, komplexe Aussagen in einen komplexen Satz zu verbauen. Es ist ERLAUBT, komplexe Konstrukte in einfachere kleine Teile zu zerlegen und nacheinander abzuhandeln. Und in späteren Aussagen einfach auf vorherige Erklärungen zu verweisen, um das Gesamtkonstrukt aus Fertigteilen zusammenzusetzen. Nicht nur der umgangssprachliche Satzbau wird dadurch vereinfacht und leichter verständlich, auch Ihr Programmtext!

    Für dieses Prinzip werden wir gleich "Variablen" und "Funktionen" kennenlernen, die Sie vom Prinzip aber ebenfalls bereits aus der Schule kennen, spätestens wenn Sie die 8. Klasse absolviert haben. Allerdings hatten Sie in der Schule einen eher "axiomatischen" Gebrauch davon gemacht, während wir beim Programmieren einen "imperativen" oder "ablauforientierten" Gebrauch davon machen werden.

So, genug geredet, jetzt wird wieder praktisch geübt...!

Übung zur PHP Grundstruktur
Ein PHP-Dokument vorbereiten
Wir hatten gerade eben gesagt, daß ein PHP-Dokument nichts anderes ist als ein HTML-Dokument mit ".php"-Endung...

WO haben SIE eine Vorlage für ein HTML-Dokument? (-> letzte Lektion!)
Kopieren Sie sich diese in ein neues Dokument! Denken Sie sich einen vernünftigen Dateinamen (zum Beispiel "PHP-Einführung.php") und eine vernünftige Überschrift (zum Beispiel "PHP-Einführung") aus!
Speichern!

Setzen Sie jetzt in das Inhaltsverzeichnis des Lehrgangs einen Link auf diese Seite zu HTML-Grundlagen!
Ausprobieren! (den Link im Inhaltsverzeichnis!)
einfache Anweisungen schreiben
Nehmen Sie Ihr Dokument "PHP-Einführung.php" in Bearbeitung!

Tipp: Das Hin- und Her-Schalten zwischen Editor und Browser haben Sie ja inzwischen schon ein paar mal benötigt. Zeit es zu vereinfachen! Falls Sie das noch nicht kennen sollten: Sie sind NICHT gezwungen, fortlaufend zwischen Maus- und Tastaturbenutzung hin und her zu schalten. Das allein fordert für jeden solchen Vorgang bei üblichen Normalbürgern gut 10 bis 20 Sekunden. NUR fürs Sortieren von Fingern und Augen!

Ab sofort benutzen Sie dafür die Tastatur, ohne mit dem Blick oder den Händen aus der Schreibstellung herausgehen zu müssen:
  • Alt + Tab bewirkt das Umschalten zwischen Anwendungen. Und ist aus dem Stand mit links und 40 Fieber mit Daumen und Zeigefinger zu erreichen.
  • Streuerung + Tab ...bewirkt das Umschalten zwischen verschiedenen Unterfenstern innerhalb eines Programms wie Ihrem Editor, in dem Sie jetzt eigentlich so zwei bis drei Dateien gleichzeitig geöffnet haben sollten. Auch da brauchen Sie den Blick nicht vom Bildschirm und die Finger nicht von der Tastatur nehmen!

So, jetzt aber endlich zu den PHP-Anweisungen...

Die erste hatten Sie gerade kennengelernt. Nochmal zur Wiederholung:
<?php
echo "Hallo!";
?>
Mit "<?php" geht's raus aus dem HTML-Modus rein in den PHP-Modus.
Mit "echo" wird eine Anweisung erteilt, etwas in den umgebenden HTML-Text einzufügen.
Mit '"Hallo!"' wird der Text definiert, der vom "echo" eingefügt werden soll.
Mit ";" wird eine PHP-Anweisung (grundsätzlich!) abgeschlossen.
Mit "?>" geht's raus aus dem PHP-Modus und zurück in den HTML-Modus.

Aufgabe: Nachmachen! (Copy & Paste!)
In Ihre Datei "PHP-Einführung.php", die Sie in Bearbeitung genommen haben!
An einer Stelle, wo es sich gehört - entsprechend dem, was Sie gestern über den Aufbau von HTML kennengelernt hatten! (Ich empfehle unterhalb der Überschrift!)

Das sollte dann in etwa SO aussehen...
Vergessen Sie nicht, Ihre eigene Datei mal in Ihrem eigenen Browser anzugucken! Nur dann wird sie von einem PHP-Interpreter interpretiert.

Aufgabe: Und jetzt ergänzen Sie auch gleich nochmal eine Zeile (nach einem Zeilenumbruch, OK?) in der anderen Schreibweise, wo ein einzelner Wert etwas kürzer formuliert eingesetzt wird, und zwar folgendes:
1 + 1 = <?= 1 + 1 ?>
Hier lassen Sie einen Wert durch einen Formel-Ausdruck berechnen.
Das war jetzt das allereinfachste, was irgend möglich ist.
Das kennen Sie noch aus der Schule - aus der ersten Klasse.
Der eine oder andere vielleicht sogar schon aus dem Kindergarten.

Das sollte dann in etwa SO aussehen...

Wobei Sie das damals in der Schule in der ersten Klasse sogar tatsächlich noch als Anweisung gemeint hatten. In der ersten Klasse sind Sie alles noch sehr naiv angegangen, und zu dieser Naivität gehörte, Berechnungen nicht als Axiome, sondern als Anweisungen aufzufassen. Das axiomatische Denken haben Sie sich erst viel später, so in etwa ab Klasse 4 aufwärts, angewöhnt.
Texte zusammensetzen
Was zum Glück für eigene Experimente noch fehlt, ist eine Möglichkeit, längere Texte aus einzelnen Fragmenten und berechneten Werten zusammensetzen zu können. Wozu auch gehört, Zeilenvorschübe und Tabulatoren und dergleichen einbauen zu können. Das geht in PHP zum Beispiel so:
<pre>
<?php
echo '
    Addition:       3 + 2 = '.(3 + 2).'
    Subtraktion:    3 - 2 = '.(3 - 2).'
    Multiplikation: 3 * 2 = '.(3 * 2).'
    Division:       3 / 2 = '.(3 / 2).'
    Rest-Division:  3 % 2 = '.(3 % 2).'
    ';
?>
</pre>
Wie Sie sehen, werden Fragmente in PHP mit dem Operator "." (einem Punkt) miteinander verkettet. Sie werden merken, daß in der (historisch bedingten) Wahl dieses Punktes als Verkettungsoperator eine schwere syntaktische Falle liegt: Überall anders - selbst im Internet in URL's, die jedes Kind zu schreiben schafft - wird der Punkt als Operator zum Trennen von übergeordneten und untergeordneten Elementen benutzt. PHP macht hier eine absolut beispiellose Ausnahme. Das müssen Sie so hinnehmen, leider!

In diesem Beispiel wird mit sogenanntem "pre-formatiertem" Text gearbeitet (mit dem HTML-Element "<pre>"). Dadurch werden Zeilenvorschübe und Leerzeichen direkt aus der Textvorlage übernommen, was die Darstellung in diesem Text vereinfacht. Und in PHP dürfen wir wörtliche Rede mehrzeilig schreiben, wodurch wir Zeilenvorschübe und Tabulatoren einfach so in den Programmtext hinschreiben können, wie sie für die Textausgabe gemeint sind.
Uns geht es hier ja erstmal um das Verketten von Textfragmenten.

Sowas wie einen Zeilenvorschub und einen Tabulator gibt es auch als spezielles ASCII-Steuerzeichen - falls es Ihnen mal nicht passen sollte, für einen Zeilenvorschub im Ausgabetext einen Zeilenvorschub im Programmtext schreiben zu müssen:
  • "\r" Wagen-Rücklauf
  • "\n" Neue Zeile
  • "\t" Tabulator
Die Dinger arbeiten mit dem schon erwähnten "escaping". Wenn Ihnen das zu kompliziert erscheint: NIEMAND ZWINGT Sie, das so zu machen, gelle?!
Falls Sie die nutzen WOLLEN, gibt es ab hier noch eine Kleinigkeit zu beachten: Solche Steuerzeichen werden vom PHP-Interpreter nur dann beachtet, wenn sie in einer wörtlichen Rede stehen, die in "Doppel-Hochkommata" eingeschlossen ist. Die mit einfachen Hochkommata wirkt da nicht! Es gibt noch weitere besondere Sachen, die bei doppelten Hochkommata veranstaltet werden, die Sie aber allesamt nirgendwo zwingend benötigen. Dafür wird Text in einfachen Hochkommata etwas schneller verarbeitet (das aber nur am Rande). In meinem Lehrgang werde ich Sie darauf orientieren, in PHP grundsätzlich die einfachen Hochkommata zu bevorzugen und die doppelten für den erzeugten HTML-Text zu lassen.

Zeilenvorschübe könnten allerdings genauso gut in normalem HTML organisiert werden:
<?php
echo '
    Addition:       3 + 2 = '.(3 + 2).'<br/>
    Subtraktion:    3 - 2 = '.(3 - 2).'<br/>
    Multiplikation: 3 * 2 = '.(3 * 2).'<br/>
    Division:       3 / 2 = '.(3 / 2).'<br/>
    Rest-Division:  3 % 2 = '.(3 % 2).'<br/>
    ';
?>
...wobei allerdings auch die Tabulator-Ausrichtung flöten geht.
Um das auch noch hinzubiegen, wäre eine komplette Tabelle nötig mit Reihen (<tr>...</tr>) und Zellen (<td></td>) wobei es spezielle Zellen für Spalten- und Zeilenköpfe gibt (<th></th>):
<?php
echo '
<table>
    <tr><th>Addition:       </th><td> 3 + 2 = </td><td>'.(3 + 2).'</td></tr>
    <tr><th>Subtraktion:    </th><td> 3 - 2 = </td><td>'.(3 - 2).'</td></tr>
    <tr><th>Multiplikation: </th><td> 3 * 2 = </td><td>'.(3 * 2).'</td></tr>
    <tr><th>Division:       </th><td> 3 / 2 = </td><td>'.(3 / 2).'</td></tr>
    <tr><th>Rest-Division:  </th><td> 3 % 2 = </td><td>'.(3 % 2).'</td></tr>
</table>
';
?>

Als Anregung sollte das reichen...
Aufgabe: Bauen Sie das in Ihrem eigenen Experiment nach!
Und verlinken Sie es in Ihrem Lehrgangs-Inhaltsverzeichnis!

eigene Experimente
Aufgabe: Spielen Sie ruhig mal intuitiv mit dem Text: Wechseln Sie den gegen eine eigene Kreation aus! Sie könnten in der Textausgabe zum Beispiel eine Beschreibung von der Berechnung geben, die Sie in der Zeile darunter ausgeben! Außerdem könnten Sie natürlich auch mal andere Berechnungen ausprobieren, die intuitiv unmittelbar auf der Hand liegen (arithmetische Operatoren genau wie Sie die in der Schule mal gelernt hatten)!

Und Sie dürfen natürlich mehr als nur eine Zeile davon schreiben! Mit Copy & Paste lassen sich solche Experimente mit phantastischer Effektivität nachnutzen!

Tipp: Bei der Gelegenheit eine Anmerkung zu effektivem Copy & Paste:
Vom Prinzip her dasselbe wie vorhin mit der Anmerkung zur Fensterumschaltung: Sie können extrem effektiv kpieren und einfügen mit Funktionstasten, die inzwischen weltweit auf allen Systemen üblich sind:
  1. Markieren mit Umschalt + Cursorbewegung (ganze Zeile mit Cursor runter)
  2. Kopieren mit Steuerung + Einfügen
  3. Cursor an die Einfügestelle bewegen (zum Kopieren einer ganzen Zeile einfach stehen bleiben)
  4. Einfügen mit Umschalt + Einfügen
So, erholen Sie sich von dem Schreck, und weiter geht's...!

Bevor Sie sich eine Pause gönnen, nehmen Sie noch das folgende relativ wichtige, aber recht einfache Element mit...
Kommentare schreiben
Wir hatten schon festgestellt, daß eine ablauf-orientierte Programmierung einerseits unbegrenzte Möglichkeiten bietet, Aktionen zu organisieren, andererseits aber gerade wegen diesen Freiheiten auch sehr schnell schwer zu überschauen ist.

Das erste und wichtigste Hilfmittel, um dies unter Kontrolle zu halten, ist das Einbauen von Kommentaren in den Programmtext.

Vergleichen Sie das bitte mit einer Armee in der Realwelt: Damit die im Gefahrenfall effizient reagieren kann, werden Aktionen durch das ganze System hindurch mittels Befehlen organisiert. Dabei wird NUR kurz und bündig angeordnet, was wer zu machen hat.
Das WARUM wird weggelassen. Selbst das WIE wird als "eintrainiert" bzw. "eingebaut" weitgehend vorausgesetzt. Nur soweit, wie eintrainierte Einheiten NEUARTIG zusammengesetzt werden, werden die Befehle ausformuliert.

Und dann läuft das Räderwerk idealerweise wie am Schnürchen ab. Solange alles bei den eintrainierten Verfahren bleiben kann, funktioniert das auch sehr effektiv.

Einen gewaltigen Schluckauf bekommen solche befehlsorientierten Systeme (bei denen alles für den eigentlichen Ablauf überflüssige weggelassen wird), wenn sich durch äußere Umstände an den Innereien des Systems etwas ändern muß... Solange die zugrundeliegenden IDEEN nicht irgendwo leicht zugänglich dokumentiert sind, ist es extrem schwer bis praktisch unmöglich, solche Systeme im Nachhinein an geänderte Bedingungen anzupassen oder sie weiter zu entwickeln.

Software-Systeme zeichnen sich nun dadurch aus, daß sie die höchsten jemals in der Menschheitsgeschichte vorgekommenen Komplexitätsgrade erklommen haben. Selbst als Anfänger werden Sie merken, wie schnell Sie mit steigenden Fähigkeiten ihre Programme immer komplexer werden lassen und schneller als es ihnen lieb ist die Erinnerung an die internen Zusammenhänge ihrer früheren Programm-Module verlieren. Die Sie aber mit Sicherheit nicht wegschmeißen, sondern weiternutzen wollen!

Eine ganze Palette von Organisationshilfsmitteln sind extra für diesen Aspekt des Programmierens entstanden. Das aller einfachste aber sind Kommentare, mit denen ein Programmierer im Programmtext seine IDEEN festhält, wie welche Befehle aus welchem Grund gemeint waren und zusammenhängen.

Und das geht so:
<?php
//==========================================================================*
// Erläuterungen zu Kommentaren                                             *
//==========================================================================*
// Kommentare gehen ganz einfach: Zwei Schrägstriche ("Slashes"),
// und von dort ab bis zum Zeilenende ist alles Kommentar.

# Eine Kommentarform, die sonst in Konfigurationsdateien und Shellscripten
# üblich ist, gibt es ebenfalls: das Doppelkreuz wirkt genauso wie Doppel-Slash.

// Der einfachste denkbare PHP-Befehl, der einen sichtbaren Effekt erzeugt:
echo "Hallo!";    // Den Text 'Hallo!' an der "aktuellen Stelle" ins HTML-Dokument schreiben

/*
    Kommentare werden von der befehlsausführenden Maschinerie komplett ignoriert.
    Sie haben daher keinerlei Auswirkung auf die Effektivität einer Programmausführung.
    Sie brauchen deshalb an Kommentaren nicht zu sparen.

    Für größere Kommentar-Blöcke, die sich über mehrere Zeilen erstrecken, kann
    man auch, anstatt vor jede Zeile einen Doppel-Slash zu setzen, den gesamten
    Kommentarblock im Stück als Kommentar kennzeichnen, indem man "/ *" am Anfang
    und "* /" am Ende schreibt. Wie hier für diesen Kommentar.
    Der Doppel-Slash gilt ja immer nur für eine einzelne Zeile bis zu deren Ende.
    
    Den Block-Kommentar kann man aber auch ganz gut zum Kommentieren <b>MITTEN IN</b>
    einer Zeile einsetzen (während der einfache Kommentar ja die Zeile faktisch
    beendet: er gilt immer bis zum Zeilenende und kann darin nicht mehr aufgehalten
    werden, wenn er einmal von der Leine gelassen wurde):
*/
echo /* Ein Befehl */ "Hallo!" /* Der "Parameter" dieses Befehls (was der genau machen soll) */ ;
?>

Bei der Gelegenheit können Sie die Kommentare gleich noch zur optischen Strukturierung Ihres Programmtextes benutzen. Sie haben eben im Beispiel eine Art Überschrift im Kommentar gesehen. Sie dürfen dabei Ihrer Phantasie freien Lauf lassen. Unterstützt wird solche Strukturierung, wenn Sie Ihren Editor so einstellen, daß der die Kommentare farblich deutlich hervorgehoben darstellt. Ich habe mir zum Beispiel die hier gezeigte grüne Hinterlegung als angenehm angewöhnt. Denken Sie sich für Ihren Editor ruhig etwas ähnlich auffallendes aus!

Menu-Zugriff auf Styles beim Notepad++ Sie erreichen die Einstellungen der Syntax-Hervorhebung wie im Bild zu sehen.
Sie brauchen dort momentan die Einstellungen für HTML und PHP.

Ganz so heftig wie in diesem Beispiel sollten Sie es nur mit gutem Grund treiben, weil zu viel Kommentar zwischen den Programmzeilen dann schon wieder der Übersichtlichkeit abträglich ist und das Verständnis erschwert. Wenn sehr viel zu erläutern ist, ziehen Sie den Kommentar besser in einem Block vor den zu erläuternden Programmblock!

Übung zu Kommentaren
Aufgabe: Schreiben Sie in Ihre Experimente zum heutigen Tag selbst ein paar Kommentare (Was Sie zu welchem Zweck ausprobieren)! Konzentrieren Sie sich bei Kommentaren vor allem auf die IDEEN hinter den Programm-Anweisungen, denn DIE haben oft genug nichts direktes mehr mit den resultierenden Anweisungen zu tun!

Jetzt haben Sie sich eine ordentliche Pause verdient!
Lassen Sie sich alles nochmal in Ruhe durch den Kopf gehen, und schalten Sie dann für ein paar Minuten ab!

PHP - Dokumentationen und Anleitungen

In der letzten Lektion zu HTML haben Sie bereits ausführliche Erklärungen zur Benutzung von Internet, Browser, Suchmaschinen und Lesezeichen bekommen. Was Sie dort gelernt haben, wiederholen Sie jetzt nochmal für PHP. Falls Sie vergessen haben sollten, wie man das Zeug nutzt, werfen Sie nochmal einen Blick zurück!

Hier führe ich jetzt nur noch die Links auf die empfehlenswerten Dokumentationen und Anleitungen auf:
  • Das PHP-Handbuch: Ultimative Referenz mitsamt reichhaltigen Beispielen von Anwendern, in allen wichtigen Sprachen erhältlich;
    für Einsteiger unter Umständen problematisch wegen Vollständigkeit und damit zwangsläufig der Fülle der Dokumentation;
    im folgenden Abschnitt erhalten Sie eine Groborientierung für dieses Handbuch
  • Peter Kropff: PHP: Einsteigerfreundliche Anleitung in deutsch; gute Orientierung und Tipps; sehr hübsches Design
  • Axel Pratzner: PHP: Einsteigerfreundliche Anleitung in deutsch
  • html.net: PHP: Einsteigerfreundliche Anleitung in deutsch oder englisch
  • selfhtml-Wiki: PHP: Einsteigerfreundliche Anleitung in deutsch zum Mitmachen
  • w3schools: PHP: (englisch) in Sachen PHP leider nur mäßig übersichtlich

Foren und Frageportale:
Denken Sie bitte daran, das alles bis in den letzten Zipfel auswendig zu lernen, sonst kommt der Weihnachtsmann nicht!
Nein, ich wollte sagen: Gucken Sie sich raus, was Ihnen davon zusagt, und legen Sie sich wenigstens zu einem weiterführenden Tutorial und einem Forum oder Frageportal ein Lesezeichen in den Browser!

Und achten Sie auf etwas Ordnung in den Lesezeichen! Die könnten recht schnell recht viel werden! Sie sollten sich die oberste Ebene für kurzfristige, aktuelle Sachen freihalten (die Sie mit einem einzigen Klick ansteuern können) und längerfristig benötigte Lesezeichen auf jeden Fall in untere Ebenen delegieren!

Orientierung unter den PHP - Ausdrucksmitteln

Bevor wir loslegen mit eigenen Experimenten, gibt es noch schnell eine Groborientierung, welche Themen in der Referenzdokumentation für Sie zum Einstieg wichtig sind...

  • Vorwort, Einführung und Installation können Sie sich sparen: Das haben Sie bereits hinter sich, soweit es unseren Kurs betrifft.

  • Sprachreferenz: elementar wichtig
    Hier wird der "Sprachkern" behandelt, die Grundlage für den gesamten Rest des Systems. Dies ist vorläufig das wichtigste Kapitel für Sie: Wir werden in diesem Lehrgang allmählich die Unterkapitel durchforsten und die dabei gewonnenen Kenntnisse und Fähigkeiten im Begleitprojekt umsetzen.
    Dabei werden wir aber nicht alle Sprachfähigkeiten abhandeln können. Aber es gibt eine Vielzahl von Wegen zum Ziel, und Sie benötigen von allen angebotenen Möglichkeiten immer nur eine. Wir werden uns die leichtesten Wege davon aussuchen.

  • Sicherheit: kommt ran...
    Wir werden einige ausgewählte Aspekte davon behandeln und dazu Hacking-Techniken lernen:
  • Features: erstmal ignorieren!
    Wird uns sehr begrenzt interessieren - hinsichtlich von Sessions. Den Rest lassen wir erstmal außen vor.
    Falls Sie sich mit Enthusiasmus weiter in PHP einarbeiten, wird für Sie wahrscheinlich zunächst das Thema Dateiupload und Nutzung auf der Kommandozeile interessant. Der Rest sind eher randständige Probleme.

  • Funktionsreferenz: elementar wichtig
    Ihre zentrale Hauptanlaufstelle für alle Zeit. Sie werden, sobald Sie im Kapitel "Sprachreferenz" einigermaßen den Einstieg gefunden haben, weit mehr als 90% Ihrer Recherche-Zeit in diesem Abschnitt verbringen.

    Dies hier behandelt die sogenannte "Laufzeitbibliothek" von PHP. Dabei handelt es sich um eine Funktionssammlung, die für eine Masse von alltäglichen Anwendungen fertige Bausteine bietet. Es ist wie industrieller Wohnungsbau mit Fertigbauteilen. Und die Bibliothek ist in ständiger Weiterentwicklung begriffen: Jede neue Version von PHP bringt in der Regel Erweiterungen mit sich.

    ABER: Sie werden für diesen Teil der Dokumentation in den seltendsten Fällen das Inhaltsverzeichnis nutzen, sondern die Suchfunktion der Referenzdokumentation, die Sie ganz oben in der Kopfzeile der Seite finden. Der voreingestellte Bereich "function list" bezieht sich auf nichts anderes als dieses Kapitel "Funktionsreferenz".

    Da die Funktionsreferenz praktisch knapp 100% der gesamten PHP-Referenz einnimmt, sollten wir uns eigentlich die Kapitel derselben anschauen. Das wird sich aber aufgrund der vorbildlichen Verlinkung mit Querverweisen und des übersichtlichen (komplett werbe- und beweihräucherungsfreien und sinnvoll hierarchisch strukturierten) Designs als überflüssig erweisen. Zur Not - wenn Sie zu einem Thema mal ausschließlich umgangssprachliche Formulierungen, aber noch kein einziges Schlüsselwort aus der Programmbibliothek kennen - steigen Sie mit einer Volltextsuche über Google ein.

    Die Dokumentation dieser Funktionsbibliothek ist dermaßen gut, daß ich sie in meinen C++-Lehrgängen als Alternative zu den originalen Dokumentationen der C-Laufzeitbibliothek empfohlen habe. Womit wir nebenbei einen weiteren Aspekt angesprochen haben: Diese Bibliothek ist gezielt ähnlich zu gleichwertigen Bibliotheken anderer üblicher Programmiersprachen angelegt worden. Damit es Programmierer aus anderen Ecken der EDV so leicht wie irgend möglich haben, in PHP einzusteigen. Im Umkehrschluß bedeutet das, daß Sie sich, wenn Sie diese Bibliothek beherrschen lernen, fit machen für den Rest der Programmierwelt.

  • PHP im Kern: Das Entwicklerhandbuch für die Zend Engine: ignorieren!
    Wenn Sie mal dereinst beginnen, eigene Module für die PHP-Funktionsbibliothek (in der Programmiersprache C) zu programmieren, benötigen Sie diesen Teil der Dokumentation. Bei uns ignoriert.

  • FAQ: ignorieren!
    Es gibt im Laufe des Lehrgangs, sobald wir Formulare angehen, einen Querverweis auf das Unterkapitel PHP und HTML. In jeder anderen Hinsicht ignorierbar.

  • Appendices (Anhänge): ignorieren!
    Ist grundsätzlich aus den anderen Dokumentationen heraus verlinkt. Dieses Kapitel werden Sie niemals direkt benutzen.

Wenn Sie Lust dazu und es noch nicht getan haben, legen Sie noch ein Lesezeichen auf die PHP-Sprachreferenz in Ihren Browser!

Pause zum Freimachen der Gedanken!
Anschließend geht's ans Eingemachte...

Experimente mit PHP und HTML/CSS

Tic-Tac-Toe - Spielfeld: Layout
So, jetzt geht's "ernsthaft" los in Richtung des Lehrgangsziels: Wie wollen ja ein TicTacToe-Spiel als Begleitprojekt aufsetzen. Da fangen wir am besten mit dem einfachsten an, und das ist die Darstellung des Spielfeldes. Dazu brauchen wir noch nicht mal PHP. Eigentlich.

Die Darstellung des Spielfelds erfolgt im Browser in HTML. Wir brauchen also eine HTML-Seite. Aber da wir ja nebenbei schon wissen, daß wir PHP einbauen wollen, legen wir unsere HTML-Seite natürlich geich als PHP an...

Los geht's! Erzeugen Sie sich (aus Ihrer Vorlage) eine neue PHP-Seite! Speichern Sie sie unter einem sinnvollen Namen (ich würde ja "tictactoe-spielfeld.php" empfehlen)! Und nehmen Sie sie in Bearbeitung! (...im Editor)

Der Seiten-Titel könnte etwas PHP vertragen...
Gleich zu Beginn stößt mir auf, daß der Titel der Seite doppelt im HTML-Code steht. Und mir gehen solche Überlegungen durch den Kopf wie:
  • man könnte ja in den Titel die teilnehmenden Spielernamen eintragen
  • man könnte auch den Spielzug in den Titel einsetzen, damit man im Browser, selbst wenn man mehrere Tabs offen hat, erkennen kann, ob bzw. wo (wenn man mehrere Spiele simultan spielt) was los ist
Je mehr man sich dazu an Gimmicks einfallen läßt, desto höher wird die Wahrscheinlichkeit, daß bei diesen beiden Kopien (<title> im <head> und derselbe Text im <h1>), die eigentlich synchron laufen sollten, irgendwo eine Inkonsistenz einreißt.

Gegen redundant wiederholtes Erzeugen von Daten gibt es ein allgemeines (programmiersprachen-übergreifendes) Instrument, welches Sie lange schon in der Schule (5. Klasse) kennengelernt haben: Variablen.

Und nebenbei: Falls Sie die 8. Klasse erfolgreich absolviert haben, haben Sie ein analoges Instrument gegen redundantes Erzeugen von Aktionen alias Operationen kennengelernt: Funktionen. Uns interessieren aber jetzt im Moment erstmal nur die Variablen...

Eine Variable für den Seitentitel...

Falls jemand mit dem Konzept von Variablen noch nicht vertraut ist, machen wir einen Abstecher, um das Zeug umgangssprachlich zu verklickern...

Ähmmm... ja: Der Abstecher gestaltet sich nicht ganz so einfach:
Eigentlich wollte ich lapidar auf die deutsche Wikipedia verweisen, aber deren Artikel hat ein Akademiker so formuliert, daß man ihn nicht mehr lesen bräuchte, wenn man ihn verstehen könnte, und ihn noch nicht verstehen kann, wenn man ihn lesen müßte.
Die englische Variante ist dagegen angenehm einsteigerfreundlich (verständlich für Schüler 5. Klasse) geschrieben, aber eben in Englisch.
Besser kommt schon das SelfHTML-Wiki...

Aber auf das eigentlich nutzbringende Konzept (warum überhaupt tun wir uns das an?!) gehen alle nur lapidar am Rande ein...
Also muß ich wohl selbst ran:
Variablen sind bei uns Speicherplätze für Zwischenergebnisse von Berechnungen,
welche anschließend mehrfach und zu beliebigen Zeiten ohne erneuten Rechenaufwand abrufbar sind.
Sie sorgen gleichzeitig für...
  • eine Vereinfachung des Programmtextes (durch Redundanzvermeidung)
  • eine Verbesserung der Lesbarkeit des Programmtextes (durch "sprechende Namen")
  • eine mitunter rabiate Beschleunigung der Berechnungen (durch die Zwischenspeicherung)

DAS SIND Variablen!

Und die gigantischen Philosphie-Konstrukte, die irgendwelche Akademiker dann noch oben drauf setzen, will ich Ihnen natürlich nicht ausreden, aber die dürfen Sie für den Moment erstmal ganz weit hinten an stellen...

So, und jetzt ziehen Sie sich nochmal in aller Ruhe die Details zur Variablen-Syntax rein - am besten vom SelfHTML-Wiki...!

Für unseren Seiten-Titel ist das alles noch nicht ganz so wild, aber wir kommen ja noch zu echt ernsthaften Anwendungsfällen. Mit den einfachen kann man aber leichter einsteigen...

Aufgabe: Mit dem, was Sie gerade eben bei SelfHTML-Wiki gelesen und heute schon hier im Lehrgang an Textzusammenstellungen geübt haben, sollte es trivial sein, eine Idee für eine Variable für den Seiten-Titel zu entwickeln. Zum Beispiel:
<?php
$title = 'Tic Tac Toe';
?>
..und im HTML-Text wird das dann eingesetzt:
<?php
$title = 'Tic Tac Toe';
?>
<html>
<head>
...
	<title><?= $title ?></title>
...
</head>
<body>
<h1><?= $title ?></h1>
...
Damit laufen wir zumindest keine Gefahr mehr, daß in der Titelleiste des Browserfensters was anderes stehen würde als in der Überschrift der Seite in diesem Fenster. Und wir haben mal was für die Denkmuskeln getan.

Aufgabe: Was Sie noch verbessern könnten, wäre: Schreiben Sie in Ihrem Programm die IDEE, wozu diese Variable da ist, bei der Variablendefinition in einen Kommentar!

Das Zwischenprodukt sollte in etwa SO ähnlich aussehen...
Eine Tabelle für ein Spielfeld!
Kleiner Abstecher nach HTML (und CSS): Wir könnten eine Tabelle einbauen, um das Spielfeld darzustellen...

Ein 3 x 3 - Spielfeld für die "kleine" Variante von TicTacToe stellt kein Problem für manuelles Hinschreiben dar. Zur Not haben wir ja immer noch Copy & Paste auf der Tastatur!
Das könnte in etwa folgendermaßen geschrieben werden:
<table>
    <tr><td> z1s1   </td><td> z1s2  </td><td> z1s3  </td></tr>
    <tr><td> z2s1   </td><td> z2s2  </td><td> z2s3  </td></tr>
    <tr><td> z3s1   </td><td> z3s2  </td><td> z3s3  </td></tr>
</table>

mit dem Ergebnis...

z1s1 z1s2 z1s3
z2s1 z2s2 z2s3
z3s1 z3s2 z3s3

Nun ja: Bei Ihnen kann das auch geringfügig anders aussehen. Aber so in etwa sollte es hinhauen...
Worauf es ankommt: Das sieht ja nun nicht gerade umwerfend aus, oder?
Ein Spielfeld sollte wenigstens:
  • einen Rahmen haben
  • Einzelfelder haben, die entweder unterschiedlich eingefärbt sind oder einen klar erkennbaren Rand haben, damit man die voneinander unterscheiden kann
Das ergänzen wir jetzt mittels CSS. Das zeige ich Ihnen einfach, und Sie nehmen es erstmal hin, um Ihr Gehirn nicht mit zuviel Stoff zuzumüllen... (wobei ich Ihnen natürlich nichts verbieten will...)
<style>
.tictactoe
{
    border:         2px ridge;
    border-spacing: 5px;
    padding:        10px;
}

.tictactoe td
{
    border:         1px inset;
}
</style>

<table class="tictactoe">
    <tr><td> z1s1   </td><td> z1s2  </td><td> z1s3  </td></tr>
    <tr><td> z2s1   </td><td> z2s2  </td><td> z2s3  </td></tr>
    <tr><td> z3s1   </td><td> z3s2  </td><td> z3s3  </td></tr>
</table>

mit dem Ergebnis...

z1s1 z1s2 z1s3
z2s1 z2s2 z2s3
z3s1 z3s2 z3s3

Das sieht doch auf dem Weg zu einem echten Spielfeld schon etwas näher am Ziel aus, oder?!

Es würde sich gehören, daß alle Felder auf dem Brett quadratisch und gleich groß sind. Im Moment sind die einfach hauteng an den Platzhalter-Text angepaßt. Außerdem könnte das Spielfeld ein anderes Material vertragen. Ich stehe zum Beispiel auf gebürstetes Alu, vielleicht suchen Sie sich im Internet ja eine Mahagoni-Unterlage? (Ihren Ideen sind da keine Grenzen gesetzt!)
Das läßt sich ändern (Änderungen in Rot)...
<style>
.tictactoe
{
    border:         2px ridge #480915;
    border-spacing: 5px;
    padding:        10px;
    background:     url('mahagony.png');
}

.tictactoe td
{
    border:         1px inset #480915;
    width:          50px;
    height:         52px;
    /* Warum einmal 52 Pixel und einmal nur 50? Und trotzdem ist das quadratisch?!    */
    /* Das liegt am Rauschgift, was die Leute beim W3C auf ihren Sitzungen probieren. */
    /* box-sizing wird in Tabellen nur horizontal als "content-box" ausgeführt,       */
    /* vertical gilt trotzdem "border-box" (konsistent über Browser)...               */
    /* Deshalb hier 52 statt 50 Pixel: 2*1px Border kommen hinzu.                     */
    /* SIE sind weder Schuld am Verhalten noch an diesen Begriffen. Nehmen Sie's hin! */
    /* ICH bin übrigens auch nicht Schuld!                                            */
    /* Und die Begriffe SOLLEN Sie im Moment noch nicht um den Schlaf bringen...      */
    /* Wer es absolut nicht aushält, kriegt alles im Internet gesucht und gefunden:   */
    /* 1. markieren! 2. Rechtsklick! 3. Suchen mit Google!                            */

    padding:        0;
    color:          white;
}
</style>
<table class="tictactoe">
    <tr><td> z1s1   </td><td> z1s2  </td><td> z1s3  </td></tr>
    <tr><td> z2s1   </td><td> z2s2  </td><td> z2s3  </td></tr>
    <tr><td> z3s1   </td><td> z3s2  </td><td> z3s3  </td></tr>
</table>

mit dem Ergebnis...

z1s1 z1s2 z1s3
z2s1 z2s2 z2s3
z3s1 z3s2 z3s3

Nun: DAS sieht einem echten Spielbrett doch schon ähnlich, oder?! Der Firefox überzieht ein wenig mit den Lichtreflexen, Safari macht's dagegen zu dunkel (das sieht beim Opera hübscher aus), aber wir wollen mal nicht mäklig sein...

Aufgabe: Übernehmen in Ihren eigenen Code!
Wer Lust hat, darf jetzt noch mit dem Zeug spielen: An eigene Ideen anpassen, eventuell etwas größer ziehen, vielleicht noch eine Beschriftung am Rand ergänzen?

Tipp: Aus dem bloßen Hingucken ins CSS und dem bloßen Herumspielen damit können Sie ein paar Einsichten dazu im Vorbeigehen mitnehmen:
  • Sie finden Blöcke von Layout-Definitionen, die sich immer auf einen bestimmten Typ von HTML-Elementen beziehen
  • die Blöcke werden von Kennzeichnern angeführt, die Sie im HTML-Code wiedererkennen sollten: zum Beispiel die Tabelle vom Typ ("class") "tictactoe" oder die in ihr enthaltenen Tabellenzellen ("td"). Diese Kennzeichner im CSS-Code nennt man dort "Selektoren". Deren Wirkung macht den eigentlichen Sinn und die eigentliche Macht von CSS aus (Layout vom Inhalt getrennt und mit wenig Redundanz zentral definieren können).
  • Die eigentlichen Layout-Attribute sollten allesamt selbsterklärend sein. Für alle tiefergehend Interessierten, die nicht bis zum nächsten Lehrgang warten wollen: Hier der Link auf die CSS-Referenz-Dokumentation 2.1 sowie auf die Ergänzungen durch CSS 3 (die noch eine ganze Weile lose herumliegen werden)...
    (Ach ja: Man arbeitet mit denen genau wie mit der HTML-Dokumentation: Ctrl-F und Google sind extrem hilfreich!)

Zum Schluß könnte das Spielbrett in etwa SO aussehen...

Die Platzhalter-Texte ("z1s1" und so) lassen Sie ruhig noch bis zur nächsten Lektion stehen! Die werden wir dann mit PHP gegen Spielsteine oder leere Felder austauschen. Für heute soll es erstmal genug gewesen sein.


Für den Fall, daß jemand heute doch noch nicht genug (sondern eventuell ja sogar Blut geleckt) hat und kleine Aufgaben sucht, um Programmiertechniken üben zu können, kann ich das Euler-Projekt als Anregung empfehlen: Es geht mit ganz extrem einfachen Aufgaben los, die man außer im Kopf auch mit einfachsten Programmiermitteln lösen kann (für die ersten Aufgaben reichen Variablen, Schleifen und Fallunterscheidungen). Die betreffenden Techniken gibt's in der PHP-Sprachreferenz oder bei einem der Tutorials erläutert (siehe oben)...
Wer das nicht schafft, wartet einfach bis zur nächsten Lektion...



Impressum
Email
aktualisiert: 2015-05-14 20:36