Einführung in die Programmierung mit HTML und PHP
Arbeitsplatzeinrichtung
Zentrale - Lehrgänge - Einführung HTML+PHP - Arbeitsplatzeinrichtung

Lehrziel

Wir bereiten gemeinsam die Werkzeuge des Lehrgangs vor: Sie lernen, wo man diese Gerätschaften zueinander passend und komplett als OpenSource herbekommt. Dabei sollen Sie gleich im Vorbeigehen Ihre Scheu vor diesen Geräten und deren Installation verlieren, so daß Sie in der Lage sind, diese auch jederzeit bei sich selbst zu Hause oder in einem Job zu installieren.

Den Webserver brauchen wir, um HTML-Seiten mit Hilfe von PHP-Programmen berechnen und verarbeiten zu lassen. Der Webserver erledigt das Zusammensetzen dieser beiden Teile.

Den Webbrowser brauchen wir, um HTML-Seiten darstellen zu lassen und bedienen zu können. Wobei wir uns wegen Inkompatibilitäten zu modernem HTML und CSS nicht auf den Standard-Webbrowser von Windows verlassen, sondern einen "richtigen" nehmen, der sich auch für Entwickler hervorragend eignet.

Den Texteditor brauchen wir, um unsere HTML- und PHP-Seiten zu erzeugen. Wir nehmen einen mit sogenanntem "Syntax-Highlighting", der uns die Struktur von Dokumenten besonders hübsch und leicht erkennbar präsentiert.

Web-Server

Als Webserver nehmen wir ein Komplettpaket. Das stellt zwar einen recht großen Batzen aus rund 10 Programmpaketen dar, von dem wir nur zwei benötigen, wo wir aber alles in einem Rutsch installiert bekommen und sehr leicht bedienen und bei Bedarf anpassen können:

XAMPP

Laden Sie jetzt diesen XAMPP herunter und installieren Sie ihn!
Suchen Sie sich dazu zunächst die Variante für "Windows"!
Auf der dortigen Seite dann die Stelle zum "Download"!
Dort die "Installer"-Version!
(Sie können im Browserfenster auch die Tasten "Steuerung-F" drücken, wodurch ein Suchfensterchen aufgeht, wo Sie die Suchbegriffe eintippen können und sofort zur richtigen Stelle geführt werden...)
Sie können die Datei direkt vom Server weg ausführen lassen, aber wenn Sie Lust haben natürlich auch speichern und dann ausführen lassen. Kommt drauf an, wieviel Sie klicken möchten!

Beim Installieren kommen folgende Schritte:
  • Sprachauswahl: "Deutsch" natürlich!
  • Warnung: ignorieren; weiter!
  • Zielverzeichnis: lassen wie es ist (c:\xampp)!
    Wenn Sie es gewohnt sind, Ihre Programme immer ordentlich im Programme-Verzeichnis oder einem sonst von Ihnen bevorzugten Ort installieren zu lassen, machen Sie für die Dauer des Lehrgangs eine Ausnahme: Sie müßten sonst die Konfiguration an sinnlos vielen Stellen anpassen, weil das Installer-Script des XAMPP in dieser Hinsicht nicht ganz sauber ist. Nach dem Lehrgang können Sie den Server problemlos wieder deinstallieren und erneut woanders hinsetzen und sich dann an der Konfiguration austoben, sofern Ihnen die Lust danach steht...
  • Installieren! (Wir brauchen den Server noch nicht als Dienst.)
    Das Installieren dauert eine Weile, weil bei dem Komplettpaket halt doch eine gewaltige Menge unnötiges Zeug dabei ist. Lassen Sie es über sich ergehen!
  • Fertigstellen! (Ja und Ahmen!)
  • Das Control Panel starten lassen!
  • Und nochmal "Deutsch" als Sprache im Control Panel anklicken!

XAMPP Control Panel

Dieses "Steuerungspanel" können Sie zukünftig auch aus dem Startmenü heraus aufrufen: Dort sind unter "Apache Friends/XAMPP" ein paar Einträge hinzugekommen... Den "Uninstaller" können Sie gleich wieder wegschmeißen, den finden Sie in der Systemsteuerung unter Software ebenso (auf daß Sie nicht versehentlich da drauf klicken)!


Sie können jetzt versuchen, den "Apache"-Server zu "starten". Wenn das gut geht, leuchtet der Modulname "Apache" dauerhaft auf.
Falls nicht, verlischt er gleich darauf wieder. In dem Fall verfügt Ihr System wahrscheinlich noch nicht über eine bestimmte Bibliothek. Die XAMPP-Macher haben zumindest in der derzeit aktuellen Version (1.8.0) ihrem Paket diese Bibliothek nicht beilegen wollen. Ja: Damit ist es dann doch keine "Ein-Rutsch"-Installation mehr. Sie finden das fragliche Paket derzeit (Mitte 2012) im Microsoft-Download-Center:
MS VC++ 2008 SP1 Redistributable Package (x86)...

Es kommen allerdings auch noch eine Menge anderer Probleme in Betracht, die wir gegebenenfalls individuell klären müssen. Wer es selbst probieren möchte, findet im Apache-Friends-Forum Hilfe...

Web-Browser

Als Web-Browser empfehle ich nicht den Internet-Explorer, sondern einen Browser, der besonders sinnvolle Unterstützung für Programmierer bereithält:

Firefox ... mit ... Firebug.

Wobei dies allerdings eine durchaus subjektiv durch Gewöhnung gefärbte Ansicht ist. Wer partout einen bestimmten anderen Browser bevorzugt, soll den gern benutzen. Der hat ja dann auch sicherlich bereits ausführliche Erfahrungen mit dem Gerät gesammelt...

Wer den Firefox im Alltag verwenden will, der sollte dringend noch das Addon "NoScript" installieren, weil das per se aus dem Stand eine nahezu komplette Abdichtung gegen Schadsoftware jedweder Art aus dem Internet bedeutet, und zwar vollkommen ohne jeden Virenwächter (welche ohnehin erst dann anschlagen können, wenn mindestens schon etliche tausend (meist eher zigtausende) Leute auf der Welt auf einen Virus hereingefallen waren). Im Lehrgang brauchen wir das aber noch nicht.

Den Firefox installieren Sie bitte zuerst! Wenn der fertig ist, rufen Sie die Seite mit dem Firebug im Firefox auf und klicken dort einfach auf "installieren"! Dann bestätigen Sie nochmal und zum Schluß starten Sie den Browser neu, dann sollte alles in Butter sein...



Jetzt testen Sie die Installation von Web-Server und Web-Browser, indem Sie im Browser in der URL-Zeile ganz oben eintippen:
"localhost"
...und "Enter" nicht vergessen, OK?! Sie können natürlich auch einfach auf dieser Lehrgangsseite auf das "localhost" klicken... aber nicht verraten!

Was Sie zu sehen bekommen sollten ist (nach einer Sprachauswahl, wo Sie nochmals "deutsch" auswählen) die Startseite Ihres Web-Servers, und die sieht im Moment - wenn alles richtig ist - so aus:

XAMPP Startseite

Falls es Schwierigkeiten gibt, klären wir die gemeinsam...

Text-Editor

Zum Schluß können wir noch einen Text-Editor mit sogenannter "Syntax-Hervorhebung" gut gebrauchen, weil der uns beim Erkennen der Struktur von Dokumentbeschreibungen und Programmen hilft. Wir verwenden dafür:
Notepad++
Die Installation ist erfreulicherweise absolut trivial.

Sie können dem Editor lediglich noch beibringen, daß er sich um eine Reihe von Dateitypen "zu kümmern hat", indem er deren Bearbeitung (wenn Sie eine dieser Dateien doppelklicken) übernimmt. Das vereinfacht die Arbeit (allerdings können Sie diesen Punkt auch überspringen, falls Ihnen hin und wieder ein Rechtsklick extra nichts ausmacht). Sie erreichen diese Einstellungen über das Menü "Einstellungen/Optionen". (WENN Sie dieses tun, sollten Sie die beiden Dateitypen "htm" und "html" außen vor lassen, damit solche Dateien bei Doppelklick weiter im Browser angezeigt werden können - das ist einfach die häufigere Nutzung...)

Notepad++ Konfiguration

Außerdem können Sie den Editor hinsichtlich Bedienung mit der Tastatur (Hotkeys), Aussehen (Menüs und Design) und Syntaxhervorhebung recht weitgehend Ihren Bedürfnissen anpassen. Lassen Sie sich das aber besser für später, man kann von den Basteleien sonst erschlagen werden!

Übung
Den Text-Editor testen wir jetzt auch gleich zusammen mit dem Browser und Server, und zwar indem wir die Startseite unseres Servers gegen unsere eigene Kreation austauschen...

Der Web-Server liefert seine Dokumente aus einem bestimmten Verzeichnis heraus aus. Das ist bei Ihnen, wenn Sie der Installationsanleitung gefolgt sind, das Verzeichnis:
c:\xampp\htdocs\

Suchen Sie sich dieses Verzeichnis mit einem sogenannten "Dateimanager"!
Die meisten werden "explorer.exe" bevorzugen (den sogenannten "Windows-Explorer"). Sie finden den Windows-Explorer normalerweise im Startmenü Ihres PC's unter "Zubehör"...
Windows Explorer starten
Sie können aber auch auf irgendein herumliegendes Laufwerks-Bildchen klicken und sich dann weiterhangeln...
Suchen Sie sich also dieses ominöse Verzeichnis "c:\xampp\htdocs\" zu Fuß!

In diesem Verzeichnis finden Sie in etwa folgendes vor:
Webserver Home Verzeichnis
...wobei uns nur die beiden untersten Dateien interessieren, die mit "index" beginnen. Die Datei "index.php" ist diejenige, die momentan automatisch vom Web-Server an den Web-Browser durchgereicht wird, wenn letzterer mit der URL "localhost" die oberste Ebene des Web-Servers abfragt (also ohne ein konkretes Dokument anzufordern)...

In der Datei "index.php" steht ein kleines PHP-Programm, das Sie am Ende des Lehrgangs verstehen werden. Das führt letztlich zur Anzeige des Ihnen schon bekannten Testbildes (Startseite Ihres Web-Servers) im Browser.

Das wollen wir jetzt ändern! Und zwar indem wir diese Datei umbenennen! Die wird nämlich nur dann automatisch ausgeliefert, wenn sie genau so heißt wie sie heißt (der Name ist in der Webserver-Konfiguration hintergelegt). Indem Sie einfach mal ne Zahl hinten dranhängen (oder irgendeinen anderen Nonsense damit anstellen), wird der Automatismus gestört:
Webserver Home Verzeichnis modifiziert

Jetzt wird die Datei "index.html" - die Sie ebenfalls im Verzeichnis sehen können, automatisch an den Browser geliefert. Und in der steht erstmal noch nichts großartiges drin. Die ist bloß eine leere Hülle. Probieren Sie's aus! Lassen Sie den Browser die Startseite "neu laden"!
Der Browser zeigt an:
Webserver Startseite modifiziert

Wenn Sie die Datei im Editor öffnen (Rechtsklick + "öffnen mit -> Notepad++"), sehen Sie folgenden Inhalt:

Webserver modifizierte Startseite im Editor

Wie Sie sehen, wird der Text "It works" in beiden Fenstern hervorgehoben angezeigt. So soll das sein. Alles funktioniert wie gewünscht.

Feinschliff

Die eigentlichen Handlungen waren gar nicht so aufwendig. Geduld hat lediglich das Hineinspielen in gegebenenfalls noch ungewohnte Fertigkeiten und das Denken in noch unbekannten Gefilden gekostet. Im Nachhinein rückwärts betrachtet ist alles halb so wild.

Wer jetzt noch Lust und Zeit hat, kann zum Beispiel:
  • die drei Werkzeuge seinen Gewohnheiten anpassen
  • mit der Startseite herumspielen:
    • Texte austauschen wäre das einfachste
    • Wer will, kann aber auch schon mal die HTML-Elemente manipulieren
    • Wer kann, kann schon mal eigenen HTML-Text schreiben
    Dokumentation und Anleitungen zu HTML finden sich in sehr guter Qualität im Netz, wobei ich den interessierten Einsteigern am liebsten SelfHTML empfehle... Wir werden uns in den kommenden Lektionen noch näher mit einigen Aspekten von HTML befassen und dabei natürlich gemeinsam und systematisch Ausdrucksmöglichkeiten und Beispiele durchprobieren. Die Tips sind für diejenigen gedacht, die vor lauter Energie nicht mehr warten möchten...

Weiter gehts in der nächsten Lektion mit Spielereien an der soeben ausgetauschten Startseite des Web-Servers. Um das zu vereinfachen können Sie jetzt noch schnell im Browser auf die angezeigte Startseite ein "Lesezeichen" legen!
Anlegen eines Lesezeichens im Firefox

Oder wenn Sie Lust haben auch gleich dem Browser sagen, daß der gefälligst das nächste Mal mit genau dieser Startseite starten soll:
Homepage einstellen im Firefox

Jetzt haben Sie erstmal eine Pause verdient.


Impressum
Email
aktualisiert: 2013-02-11 22:06