2. Einrichtung einer Arbeitsumgebung

Wir werden die folgenden Tools verwenden (unter Windows 10 x 64 Bit):

• [Laragon] zum Ausführen des Webservers PHP;
• [Netbeans] zum Bearbeiten des Codes PHP;
• [Visual Studio Code] zum Schreiben der JavaScript-Codes;
• [node.js], um diese auszuführen;
• [npm] zum Herunterladen und Installieren der benötigten JavaScript-Bibliotheken;

2.1. Arbeitsumgebung für den Webserver

Die Skripte PHP wurden in der folgenden Umgebung geschrieben und getestet:

• einer Apache-Webserver-Umgebung / SGBD MySQL / PHP 7.3 namens Laragon;
• die Entwicklungsumgebung NetBeans 10.0 (IDE);

2.1.1. Installation von Laragon

Laragon ist ein Paket, das mehrere Programme umfasst:

• einen Apache-Webserver. Wir werden ihn zum Schreiben von Webskripten in PHP verwenden;
• SGBD und MySQL;
• die Skriptsprache PHP;
• einen Redis-Server, der einen Cache für Webanwendungen bereitstellt:

Laragon kann (Stand: März 2019) unter folgender Adresse heruntergeladen werden:

https://laragon.org/download/

• Die Installation [1-5] erzeugt die folgende Verzeichnisstruktur:

• in [6] den Installationsordner von PHP;

Beim Start von [Laragon] wird das folgende Fenster angezeigt:

• [1]: Das Hauptmenü von Laragon;
• [2]: Die Schaltfläche [Start All] startet den Apache-Webserver sowie SGBD und MySQL;
• [3]: Die Schaltfläche „[WEB]“ zeigt die Webseite „[http://localhost]“ an, die der Datei „PHP“ und „[<laragon>/www/index.php]“ entspricht, wobei <laragon> der Installationsordner von Laragon ist;
• [4]: Über die Schaltfläche [Database] können Sie die Dateien SGBD und MySQL mit dem Tool [phpMyAdmin] verwalten. Dieses muss zuvor installiert werden;
• [5]: Die Schaltfläche „[Terminal]“ öffnet ein Befehlsterminal;
• [6]: Die Schaltfläche [Root] öffnet einen Windows-Explorer, der auf den Ordner [<laragon>/www] ausgerichtet ist, der das Stammverzeichnis der Website [http://localhost] darstellt. Dort müssen alle vom Apache-Server von Laragon verwalteten Webanwendungen abgelegt werden;

Öffnen wir ein Laragon-Terminal [5]:

• in [1], dem Terminaltyp. In [6] stehen drei Terminaltypen zur Verfügung;
• in [2, 3]: das aktuelle Verzeichnis;
• in [4] gibt man den Befehl [echo %PATH%] ein, der die Liste der Ordner anzeigt, die bei der Suche nach einer ausführbaren Datei durchsucht wurden. Alle wichtigen Laragon-Ordner sind in diesem Pfad der ausführbaren Dateien enthalten, was nicht der Fall wäre, wenn man ein Befehlsfenster unter Windows öffnen würde. Wenn in diesem Dokument Befehle zur Installation einer bestimmten Software eingegeben werden müssen, erfolgt dies in der Regel in einem Laragon-Terminal;

2.1.2. Installation von IDE NetBeans 10.0

NetBeans 10.0 kann unter folgender Adresse heruntergeladen werden (März 2019):

https://netbeans.apache.org/download/index.HTML

Die heruntergeladene Datei ist eine ZIP-Datei, die einfach entpackt werden muss. Sobald NetBeans installiert und gestartet ist, kann ein erstes Projekt PHP erstellt werden.

• in [1] wählen Sie die Option „Datei / Neues Projekt“;
• bei [2] wählen Sie die Kategorie [PHP];
• in [3] den Projekttyp [PHP Application] auswählen;

• In [4] geben Sie dem Projekt einen Namen;
• in [5] einen Ordner für das Projekt auswählen;
• in [6] die heruntergeladene Version von PHP auswählen;
• in [7] die Kodierung UTF-8 für die Dateien PHP auswählen;
• Wählen Sie in [8] den Modus [Script] aus, um die Skripte PHP im Befehlszeilenmodus auszuführen. Wählen Sie „[Local WEB Server]“, um ein Skript „PHP“ in einer Webumgebung auszuführen;
• Geben Sie bei [9,10] das Installationsverzeichnis des Interpreters PHP aus dem Laragon-Paket an:

• Wählen Sie [Finish], um den Assistenten zur Projekterstellung PHP abzuschließen;

• In [11] wird das Projekt mit einem Skript [index.php] erstellt;
• in [12] wird ein minimales Skript PHP geschrieben;
• in [13] wird [index.php] ausgeführt;

• in [14] werden die Ergebnisse im Fenster [output] von NetBeans angezeigt;
• In [15] wird ein neues Skript erstellt;
• in [16] das neue Skript;

Der Leser kann alle folgenden Skripte in verschiedenen Ordnern desselben Projekts PHP erstellen. Die Quellcodes der Skripte dieses Dokuments sind in Form der folgenden NetBeans-Verzeichnisstruktur verfügbar:

Die Skripte dieses Dokuments befinden sich in der Verzeichnisstruktur des Projekts [scripts-console] [1]. Wir werden außerdem Bibliotheken aus dem Projekt PHP verwenden, die im Ordner [<laragon-lite>/www/vendor] [2] abgelegt werden, wobei <laragon-lite> der Installationsordner der Laragon-Software ist. Damit NetBeans die Bibliotheken von [2] als Teil des Projekts [scripts-console] erkennt, müssen wir den Ordner [vendor] [2] in den Zweig [Include Path] [3] des Projekts aufnehmen. Wir werden NetBeans so konfigurieren, dass der Ordner „[<laragon-lite>/www/vendor] [2]“ in jedes neue Projekt „PHP“ aufgenommen wird und nicht nur in das Projekt „[scripts-console]“:

• In [1-2] rufen Sie die NetBeans-Optionen auf;
• in [3-4] konfigurieren wir die Optionen von PHP;
• in [5-7] konfiguriert man das [Global Include Path] von PHP: Die in [7] angegebenen Ordner werden automatisch in das [Include Path] jedes PHP-Projekts aufgenommen;

• In [9] kann auf die Eigenschaften des Zweigs [Include Path] zugegriffen werden;
• in [10-11] werden die neuen Bibliotheken von NetBeans erkundet. NetBeans untersucht den Code PHP dieser Bibliotheken und speichert deren Klassen, Schnittstellen, Funktionen usw., um dem Entwickler Hilfe anbieten zu können;

• In [12] verwendet ein Code die Klasse [PhpMimeMailParser\Parser] aus der Bibliothek [vendor/php-mime-mail-parser];
• In [13] schlägt NetBeans die Methoden dieser Klasse vor;
• in [14-15] zeigt NetBeans die Dokumentation der ausgewählten Methode an;

Der Begriff „[Include Path]“ ist hier spezifisch für NetBeans. „PHP“ enthält diesen Begriff ebenfalls, aber es handelt sich dabei a priori um zwei unterschiedliche Begriffe.

Nachdem die Arbeitsumgebung nun eingerichtet ist, können wir uns mit den Grundlagen von PHP befassen.

2.2. Arbeitsumgebung für JavaScript

Diese Tools können über Laragon installiert werden (siehe Abschnitt „Link“):

In [4] installieren wir [node.js]. Nach Abschluss der Installation öffnet man ein Laragon-Terminal (siehe Abschnitt „Link“) und fragt die Version des installierten [node.js] (1) sowie die von [npm] (2) ab:

Anschließend installieren wir Visual Studio Code, das häufig als [code], [VSCode] oder [3-6] bezeichnet wird. Danach können wir dieses Entwicklungstool starten:

2.2.1. Konfiguration von Visual Studio Code

Wir zeigen nun, wie wir [VSCode] konfiguriert haben, damit der Leser die Screenshots versteht, die von Zeit zu Zeit erscheinen werden. Dem Leser steht es frei, [VSCode] nach Belieben zu konfigurieren. Er kann sogar seine bevorzugte Arbeitsumgebung einrichten. Dies spielt für das, was wir im Folgenden tun werden, keine Rolle.

Zunächst ändern wir das Erscheinungsbild des Fensters [VSCode], um einen hellen statt eines schwarzen Hintergrunds zu erhalten:

Anschließend blenden wir die linke Leiste [1-2] aus, deren Elemente auch im Menü verfügbar sind. In [3-6] legen wir fest, dass der Code bei jedem Speichern der Datei und bei jedem Kopieren/Einfügen formatiert wird.

Nachdem die Konfiguration [Ctrl-S] gespeichert wurde, kann das Fenster [Settings] [7] geschlossen werden. Man kann jederzeit zur Konfiguration von [VSCode] und [8-10] zurückkehren:

Diese Konfigurationen werden in einer Datei mit dem Namen [settings.json] gespeichert, die direkt bearbeitet werden kann. Öffnen wir das Konfigurationsfenster [Settings] wie bereits gezeigt:

In [4] kann man die Datei [settings.json] direkt bearbeiten:

• In [1] ist der Pfad zur Datei [settings.json] angegeben. Eine Möglichkeit, zur Standardkonfiguration zurückzukehren, besteht darin, diese Datei zu löschen;
• in [2] die soeben vorgenommenen Konfigurationen;

Öffnen wir nun ein Terminal innerhalb von [VSCode] [1-2]:

• in [3] den Typ des geöffneten Terminals, hier PowerShell;
• in [4] können Windows-Befehle eingegeben werden;
• in [6] können weitere Terminals geöffnet werden;
• in [5] die Liste der geöffneten Terminals;
• in [7] wird das aktive Terminal geschlossen;

Wir werden das Terminal von [VSCode] verwenden, um JavaScript-Pakete (Bibliotheken) mit dem Tool [npm] (Node Package Manager) zu installieren. Fragen wir, wie zuvor in einem Laragon-Terminal, nach der installierten Version von [npm]:

Wir sehen, dass der Befehl [npm] nicht erkannt wurde. Das bedeutet, dass er nicht zum PATH (Liste der zu durchsuchenden Verzeichnisse nach einer ausführbaren Datei, hier [npm]) des Terminals gehört. Man kann das vom Terminal verwendete PATH ermitteln:

Die ausführbare Datei „[npm]“ befindet sich nicht in diesen Ordnern. Wie die anderen von Laragon installierten Tools befindet sie sich im Laragon-Ordner „[<laragon>\bin]“, genauer gesagt im Unterordner „[nodejs] [4-6]“.

Um [VSCode] zu starten und Zugriff auf [npm] zu erhalten, starten wir [VSCode] über ein Laragon-Terminal. Auf diese Weise gestartet, erbt [VSCode] die Einstellungen von PATH des Laragon-Terminals, das wiederum den Ordner mit den ausführbaren Dateien [node] und [npm] enthält:

• in [1]: Geben Sie den Befehl [path] ein;
• bei [2]: die Liste der Ordner von PATH. Dort ist der Ordner [node-v10] [2] zu sehen, was uns garantiert, dass die ausführbaren Dateien [node] und [npm] gefunden werden;

[VSCode] wird von einem Laragon-Terminal aus mit dem Befehl [code] gestartet:

• in [2] wird ein Terminal PowerShell in [VSCode] geöffnet;
• in [3-4] sieht man, dass die ausführbaren Dateien [node] und [npm] zugänglich sind;

Hinweis: Das Laragon-Terminal, über das die Entwicklungsumgebung [VSCode] gestartet wurde, darf nicht geschlossen werden, da sich sonst VSCode selbst schließt.

Wir nehmen nun eine letzte Konfiguration vor: Wir ändern das Standardterminal von [VSCode]:

Die Datei [settings.json] wird sofort aktualisiert:

Öffnen wir nun ein neues Terminal: [VSCode] [1]:

• zu [2], ein Terminal [cmd] (nicht PowerShell);
• in [3] liefert der Befehl [path] das PATH des Terminals;
• in [4] sind die Ordner der ausführbaren Dateien [node] und [npm] deutlich zu sehen

2.2.2. Hinzufügen von Erweiterungen zu Visual Studio Code

Erstellen wir mit [VSCode] eine JavaScript-Datei:

• In [3-4] erstellen wir einen Ordner;
• in [5] legen wir diesen als aktuelles Verzeichnis von [VSCode] fest;
• In [6] öffnet man ein Terminal;
• in [7] sieht man, dass man sich im ausgewählten Ordner befindet. Die folgenden Schritte werden in diesem Ordner durchgeführt;

• in [1-3]: Es wird ein neuer Ordner erstellt;
• in [4]: Man fügt eine Datei in diesen Ordner ein;

• in [5-7]: Wir erstellen unser erstes JavaScript-Programm;

• in [8-9]: Das JavaScript-Programm wird ausgeführt;
• Das Ergebnis wird in der Ausführungskonsole [10] angezeigt. In [11] sehen wir den Befehl, der ausgeführt wurde: Es war die Anwendung [node], die das Skript [test-01.js] ausgeführt hat. Dies war möglich, weil sich diese ausführbare Datei in PATH von [VSCode] befindet; andernfalls wäre ein Fehler aufgetreten, der darauf hingewiesen hätte, dass der Befehl [node] unbekannt ist;

Gehen wir auf die gleiche Weise vor, um ein zweites Skript [test-02.js] auszuführen:

• In [1-3] definieren wir das neue Skript. Die Anweisung [use strict] in Zeile 1 verlangt eine strenge Syntaxprüfung. In diesem Zusammenhang muss jede Variable mit einem der Schlüsselwörter [let, const, var] deklariert werden. Dies ist bei der Variablen [x] in Zeile 2 nicht der Fall;
• wenn man diesen Code mit [Ctrl-F5] ausführt, erhält man den Fehler [5]. Es ist möglich, vor der Ausführung auf diese Art von Fehler hingewiesen zu werden. Das ist vorzuziehen. Wir werden zwei Dinge tun:
  • mit [npm] eine Bibliothek namens [eslint] installieren, die überprüft, ob die Syntax des Skripts dem Standard ECMAScript 6 entspricht;
  • eine Erweiterung für Visual Studio Code installieren, die ebenfalls ESLINT heißt und die Verwendung der Bibliothek [eslint] innerhalb von [VSCode] erleichtert;

Installieren wir zunächst die JavaScript-Bibliothek [eslint] mithilfe des Tools [npm]. Um eine Bibliothek (auch als „Paket“ bezeichnet) [npm] zu installieren, muss man deren genauen Namen kennen. Ist dies nicht der Fall, kann man die Website von [npm] unter URL (2019) [https://www.npmjs.com/] aufrufen:

• in [3] die Pakete, die mit [esl] beginnen;
• in [4-6] findet man das Paket [eslint];

• in [7] den Befehl [npm] zur Installation des Pakets [eslint];
• in [8] die Konfiguration des Pakets;
• in [9], dessen Verwendung zur Überprüfung der Syntax eines JavaScript-Skripts;

Wir installieren das Paket [eslint] in einem Fenster [Terminal] von [VSCode]. Zunächst müssen wir eine Datei [package.json] im Stammverzeichnis des Arbeitsordners von [VSCode] erstellen. Diese Datei enthält die Liste der vom Projekt [VSCode] verwendeten Pakete jS:

• in [1]: Klicken Sie im Projekt-Explorer mit der rechten Maustaste (nicht auf den Ordner „tests“);
• in [3-4], wird die Datei [package.json] im Stammverzeichnis des Projekts [javascript] erstellt, auf derselben Ebene wie der Ordner [tests] (jedoch nicht in [tests]);
• In [4-6] fügt man in die Datei [package.json] ein leeres Objekt jSON ein;

Anschließend wird ein Terminal [VSCode] geöffnet, um [eslint] zu installieren:

• in [2] befindet man sich im Stammverzeichnis des Projekts [javascript];
• in [3], der Befehl, der das Paket [eslint] installiert;
• Nach der Ausführung
  • in [4-5] wurde die Datei [package.json] geändert. In Zeile 3 findet man die installierte Version von [eslint]. In Zeile 2 entspricht [devDependencies] dem Installationsargument [--save-dev]. Dieses Argument bedeutet, dass die installierte Abhängigkeit in der Datei „[package.json]“ als Element der Eigenschaft „[devDependencies]“ eingetragen werden muss. Diese Eigenschaft listet die Abhängigkeiten des Projekts auf, die im Entwicklungsmodus benötigt werden, im Produktionsmodus jedoch nicht. Tatsächlich wird die Abhängigkeit [eslint] nur in der Entwicklung benötigt, um zu überprüfen, ob der geschriebene Code dem Standard ECMAScript entspricht;
  • In [6] ist im Projekt ein Ordner mit dem Namen [node_modules] erschienen. Dies ist der Ordner, in dem die Abhängigkeiten des Projekts installiert sind;

• In [7] sind ein Teil der installierten Pakete aufgeführt. Es handelt sich um eine sehr große Anzahl. Tatsächlich wurde nicht nur das Paket [eslint] installiert, sondern auch alle Pakete, auf denen dieses basiert;

• [1-2]: In einem Terminal [VSCode] wird der Befehl zur Konfiguration des Pakets [eslint] ausgeführt. Dabei werden verschiedene Fragen gestellt ([3]), um zu ermitteln, wie [eslint] verwendet werden soll. Im Zweifelsfall behalten Sie die vorgeschlagenen Standardoptionen bei. Um eine Option auszuwählen, navigieren Sie mit den Pfeiltasten nach oben und unten auf der Tastatur zur gewünschten Option und bestätigen Sie diese;
• In [4] wurde im Stammverzeichnis des Projekts eine Datei [.eslintrc.js] erstellt;
• in [6] sehen Sie den Inhalt der Datei. Sie können den Inhalt in Ihre eigene Datei kopieren;

module.exports = {
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": "eslint:recommended",
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "rules": {
  }
};

All dies reicht nicht aus, um die Fehler in der Datei [test-02.js] zu melden:

• Sie müssen den Befehl [2-3] eingeben, damit die Datei [tests/test-02.js] analysiert wird;
• In [4] wird der Fehler bezüglich der nicht deklarierten Variablen erkannt;

Wir werden [VSCode] eine Erweiterung hinzufügen, mit der sich JavaScript-Fehler in Echtzeit anzeigen lassen. Diese Erweiterung basiert auf dem Paket [eslint], das wir installiert haben:

• In [3-5] installieren wir die Erweiterung mit dem Namen [ESLint];

• in [1], eine Informationsseite zur neu installierten Erweiterung;
• In [2] ist ersichtlich, dass der Überprüfungsmodus von [ESLint] [type] ist, was bedeutet, dass die Syntax der Skripte jS gleichzeitig mit der Texteingabe überprüft wird;

ESLint kann über die allgemeine Konfigurationsdatei von [VSCode] konfiguriert werden:

• in [6-7], die Konfiguration von [ESLint]. Hier können Sie sie ändern;

Kommen wir nun zurück zur Datei [test-02.js]:

• in [3-4] werden die Fehler in der Variablen [x] nun gemeldet;
• in [5]: die Anzahl der Fehler ESLint in der Datei;
• in [6] wird angezeigt, dass sich im Ordner [tests] fehlerhafte Dateien befinden;

Wenn der Fehler behoben wird, verschwinden die Warnungen von ESLint:

Installieren wir nun eine Erweiterung namens [Code Runner]:

• Sobald die Erweiterung [Code-Runner] [1-5] installiert ist, kann man sie mit [6-7] (siehe oben) konfigurieren;

• In [1-2] werden die Konfigurationselemente von [Code-Runner] übernommen;
• in [3] wird festgelegt, dass das Ausgabeterminal vor jeder Ausführung bereinigt werden soll;
• in [4] wird das Element [Executor Map] gesucht, das die Ausführungswerkzeuge verschiedener Sprachen auflistet;
• In [5-6] wird die Konfiguration in die Zwischenablage kopiert;
• In [7-8] wird die Datei [settings.json] geändert;

• In [2] fügt man hinter dem letzten Element der Datei [settings.json] [1] ein Komma hinzu;
• in [3] fügt man den zuvor in [5-6] kopierten Inhalt ein: Dabei handelt es sich um die Liste der Befehle, mit denen die verschiedenen von [VSCode] unterstützten Sprachen ausgeführt werden können;
• in [4] den Befehl, mit dem JavaScript-Dateien ausgeführt werden können. Dieser funktioniert nur, wenn [node] sich im Verzeichnis PATH von [VSCode] befindet. Ist dies nicht der Fall, kann man den vollständigen Pfad zur ausführbaren Datei [5] angeben;

Speichern wir nun die Konfiguration (Strg-S). Mit der Erweiterung [Code Runner] können die JavaScript-Dateien durch einen Rechtsklick auf den Code [6] (oben) ausgeführt werden:

2.2.3. Einige nützliche Befehle von [VSCode]

• Um Ihren Code zu formatieren, klicken Sie mit der rechten Maustaste darauf: [1];
• um geöffnete Fenster zu schließen, klicken Sie mit der rechten Maustaste auf deren Titel [2-3];

• Um ein bestimmtes Fenster anzuzeigen: [4-5];
• um Ihr Projekt (Workspace) zu speichern: [6-9];
• um ein Projekt [10-11] zu sichern;

• um ein Projekt [11-16] zu öffnen:

• die installierten Erweiterungen anzeigen: [19-20]:

Wir verfügen nun über gute Werkzeuge für die Entwicklung in JavaScript. Wir werden diese Sprache nun anhand kurzer Codeausschnitte vorstellen. Da diese Einführung im Anschluss an den Kurs PHP erfolgt, werden wir gelegentlich Vergleiche zwischen diesen beiden Sprachen anstellen, um auf Unterschiede zwischen ihnen hinzuweisen.