XAMPP installieren: dein kostenloser lokaler Webserver

Worum geht´s?

Sobald du in der Web-Programmierung über simples HTML, CSS und Java Script hinausgehst und z.B. PHP oder MySQL (Datenbanken) benutzen willst, brauchst du einen Webserver. Die meisten CMS (= Content Management Systeme) wie z.B. WordPress sind auch auf PHP und MySQL aufgebaut, daher brauchst du auch einen Webserver, wenn du diese nutzen willst. Langfristig macht es in den meisten Fällen Sinn, einen Webserver zu mieten – das kostet in etwa 10€/Monat für einen guten. Aber wenn du erstmal nur ein wenig herumprobieren willst, kann es als Alternative auch Sinn machen, einen eigenen kleinen Webserver auf deinem PC oder Laptop laufen zu lassen. Glücklicherweise kostet dich das nur ein wenig Zeit. Es gibt verschiedene Programmie, du dazu benutzen kannst, aber eines der einfachsten und bekanntesten dafür ist der XAMPP Webserver. In dieser Lektion werden wir daher lernen, wie wir XAMPP installieren und einrichten.

1. Den XAMPP Webserver herunterladen

Deinen XAMPP-Webserver kannst du von verschiedenen Anbietern herunterladen. Am einfachsten lädst du ihn direkt vom Hersteller Apachefriends herunter. Dann wählst du dein Betriebs-System aus, in meinem Fall „XAMPP für Windows“:

Grundsätzlich gibt es den XAMPP Webserver auch für Mac und Linux. Dann schaut die Benutzer-Oberfläche jedoch ein wenig anders aus als auf den Bildern hier.

2. Den XAMPP Webserver installieren (Windows)

Die XAMPP-Installations-Datei hat (Stand Juni 2022) ungefähr 160Mb. Sobald sie heruntergeladen ist, kannst du XAMPP installieren.

Eventuell kommt bei der Installation eine Meldung, dass das laufende Antiviren-Programm die Installation beeinträchtigen kann. Es sollte trotzdem klappen, also kannst du auf „Yes“ klicken.

Dann kann es sein, dass irgendetwas von „activated User Account Control (UAC)“ in der nächsten Meldung kommt. Im Grunde sagt XAMPP dir damit, dass du das Programm lieber nicht unter C:\Programme oder C:\Programme (x86) installieren sollst, wo sonst die wichtigen Programme oft automatisch hinkommen. Das hat den Grund, dass du mit Hilfe von PHP ausgehend vom Webserver Dateien nicht nur lesen, sondern auch erstellen und bearbeiten kannst.

Windows hat aber eine Sicherheits-Regelung, dass Programme nicht einfach so in diesen sensiblen Bereichen herumändern dürfen, deswegen kann es sein, dass XAMPP in einer solchen Umgebung nicht so gut funktioniert.

Am besten installierst du XAMPP deswegen z.B. auf deinen Desktop. Klicke „Ok“, dann solltest du zum Installations-Bildschirm gelangen:

Wenn du auf „Next“ klickst, solltest du im nächsten Schritt alle möglichen Komponenten (Bestandteile) von XAMPP auswählen können. Hier sollten alle Komponenten schon vorausgewählt sein, du kannst das auch so lassen:

Wenn du wieder auf „Next“ geklickt hast, kannst du als nächstes den Installations-Pfad auswählen. Wie schon in der Meldung am Anfang erwähnt, ist es meist besser, XAMPP nicht unter C:\Programme oder C:\ zu installieren, sondern in einem weniger geschützten Bereich. In meinem Fall wähle ich dann beispielsweise einen Unterordner auf dem Desktop aus:

C:\Users\Niklas Baumgärtler\Desktop\Bunterrichten

Oder zumindest hätte ich den Ordner gerne ausgewählt – leider mag XAMPP meinen Nachnamen Baumgärtler aufgrund des Ä nicht, darum klappt es nicht. Daher habe ich mich am Ende doch für diesen Pfad entschieden:

C:\Users\Public\XAMPP

Als nächstes kann man noch zwischen den Sprachen Englisch und Deutsch wählen. In meinem Fall habe ich „Deutsch“ ausgewählt:

Als letzten Schritt ist es noch möglich, sich über „Bitnami“ informieren zu lassen. Das sind dann jeweils 1-Klick-Installationen für gängige CMS wie beispielsweise WordPress. Da wir aber WordPress ohnehin „händisch“ installieren lernen (keine Angst, es ist nicht allzu kompliziert), brauchen wir Bitnami erstmal nicht, und du kannst das Häkchen wegklicken.

Im nächsten Fenster sagt dir XAMPP, dass es bereit zum Installieren ist. Wenn du nochmal „Next“ klickst, beginnt die Installation. Das sieht dann in etwa so aus:

Je nachdem wie schnell dein PC oder Laptop ist, kann die Installation schonmal ein paar Minuten dauern. Mein Laptop ist relativ schnell, der hat es in 2-3 Minuten geschafft. Auf einem anderen PC, auf dem ich es unlängst installiert hatte, waren es eher so 10 Minuten. Also keine Sorge, falls es bei dir länger dauert.

Am Ende solltest du ein Fenster sehen, dass die Installation geklappt hat. Du kannst noch auswählen, ob du das Control Panel gleich starten sollst. Das Häkchen kannst du anlassen, dann startet der XAMPP Webserver gleich nach der Installation los.

Nachdem du auf „Finish“ geklickt hast, sollte XAMPP automatisch starten (wenn du das Häkchen gelassen hast).

3. Deinen XAMPP Webserver einrichten

Nachdem XAMPP gestartet wurde, solltest du in etwa das hier sehen:

Was du brauchst, ist Apache und MySQL, bei diesen beiden solltest du auf „Starten“ klicken. Es kann sein, dass die Windows Firewall sich meldet und fragt, ob sie den Webserver blockieren soll. Dann musst du den Zugriff zulassen (am besten nur unter Private Netzwerke, das ist sicherer). Dann sollten die beiden grün eingefärbt sein, und bei Port(s) sollten Nummern stehen.

4. Deinen XAMPP Webserver testen

Nun wollen wir erstmal testen, ob PHP auf dem Webserver klappt.

4.1 Eine .php-Datei erstellen

Dazu müssen wir auf dem Webserver eine .php-Datei erstellen. Du kannst jetzt entweder heraussuchen, wohin du deinen XAMPP Webser installiert hast, oder einfach auf den „Explorer-Button“ in XAMPP drückt. In dem Ordner, der dir dann angezeigt wird, sind ziemlich viele Ordner. Du brauchst den Ordner „htdocs“, dorthin kommen all deine Webseiten-Dateien rein.

Am besten erstellen wir in dem Ordner „htdocs“ noch einen Unter-Ordner, den wir z.B. „test1“ nennen. Dort können wir dann nichts falsch machen. Und in unserem test1-Ordner erstellen wir mit Rechtsklick->Neu->Textdokument eine neue Datei, die wir index.php nennen. Es kann sein, dass eine Meldung kommt, die fragt, ob wir das wirklich tun wollen, weil die Datei dadurch möglicherweise unbrauchbar wird. Aber wir wissen zum Glück, was wir tun, und bestätigen.

Falls das bei dir nicht so richtig klappt und keine .php-Datei draus wird, kann es sein, dass dein Windows so eingestellt ist, dass Datei-Erweiterungen ausgeblendet werden. Das ist meist so voreingestellt, damit der Benutzer nicht versehentlich alles kaputt macht.

Du kannst das ändern, in dem du im Explorer oben wo in blauer Schrift „Datei“ und daneben „Start“, „Freigeben“ und „Ansicht“ steht auf „Ansicht“. Dort kannst du ein Häkchen bei „Dateinamenerweiterungen“ setzen, dann sollten die Dateien richtig angezeigt werden. Ansonsten macht Windows aus deiner index.php gerne eine index.php.txt 😉

4.2 Unsere index.php-Datei mit php-Code befüllen

Unsere index.php öffnest du nun mit einem Textverarbeitungsprogramm wie WordPad oder Editor (Rechtsklick->Öffnen mit), und schreibst den folgenden Code hinein:

<?php
phpinfo();
?>

Die erste Zeile sagt dem Webserver, dass ab jetzt ein PHP-Code folgt, die letzte Zeile, dass ab hier der PHP-Code wieder aufhört.

Der Befehl phpinfo(); sagt dem Webserver, dass er einige Informationen über die aktuell installierte PHP-Version anzeigen soll.

Jetzt speicherst du die Datei (STRG + S), und dann wollen wir uns unser Werk mal im Browser ansehen.

4.3 Unsere index.php im Browser betrachten

Dazu öffnest du einen Browser deiner Wahl (ich mag Firefox am liebsten), und rufst in der Adresszeile (dort, wo du sonst URLs wie z.B. www.google.com eingibst) die Adresse „localhost/test1“ auf. Wenn du deinen Unterordner im htdocs-Verzeichnis anders als „test1“ genannt hast, musst du den Pfad entsprechend anpassen. Wenn alles geklappt hat, solltest du in etwa das hier sehen:

Das bedeutet, dass der XAMPP Webserver läuft und du auch PHP benutzen kannst. Gratuliere!

Falls du die Datei nicht index.php genannt hast sonder z.B. test.php, dann musst du zusätzlich zum Ordner-Pfad noch den Dateinamen der .php-Datei angeben, also z.B. „localhost/test1/test.php“. Ansonsten sucht der Webserver immer nach einer index.php oder einer index.html.

Nun kannst du auf deinem eigenen Webserver auch PHP programmieren oder PHP- und Datenbank-basierte CMS wie WordPress laufen lassen. Vom Internet aus erreichbar bist du zwar nun noch nicht, aber zum Testen und Ausprobieren ist XAMPP super.

So, dass wars erstmal über den XAMPP Webserver. Wenn ich im weiteren Verlauf darüber spreche, Dateien auf den Webserver zu spielen, kannst du sie alternativ auch einfach in einen Unterordner im htdocs-Verzeichnis spielen. Das sollte genauso gut klappen, solange XAMPP und der Apache bzw. MySQL läuft (also grün ist).

Diskussion zum Tutorial