2. Konfiguracja środowiska pracy

Będziemy korzystać z następujących narzędzi (w systemie Windows 10 x 64-bit):

[Laragon] do uruchomienia serwera WWW PHP;
[Netbeans] do edycji kodu PHP;
[Visual Studio Code] do pisania kodu JavaScript;
[node.js] do ich uruchomienia;
[npm], aby pobrać i zainstalować biblioteki JavaScript, których będziemy potrzebować;

2.1. Środowisko pracy serwera WWW

Skrypty PHP zostały napisane i przetestowane w następującym środowisku:

środowisko serwera WWW Apache / SGBD MySQL / PHP 7.3 o nazwie Laragon;
środowisko programistyczne NetBeans 10.0 (IDE);

2.1.1. Instalacja Laragona

Laragon to pakiet zawierający kilka programów:

serwer WWW Apache. Będziemy go używać do pisania skryptów internetowych w PHP;
SGBD MySQL;
język skryptowy PHP;
serwer Redis, który zapewnia pamięć podręczną dla aplikacji internetowych:

Laragon można pobrać (marzec 2019 r.) pod następującym adresem:

https://laragon.org/download/

Instalacja [1-5] tworzy następującą strukturę katalogów:

w [6] znajduje się folder instalacyjny PHP;

Uruchomienie pliku [Laragon] powoduje wyświetlenie następującego okna:

[1]: główne menu programu Laragon;
[2]: przycisk [Start All] uruchamia serwer WWW Apache oraz SGBD i MySQL;
[3]: przycisk [WEB] wyświetla stronę internetową [http://localhost], która odpowiada plikowi PHP [<laragon>/www/index.php], gdzie <laragon> to folder instalacyjny programu Laragon;
[4]: przycisk [Database] umożliwia zarządzanie plikami SGBD i MySQL za pomocą narzędzia [phpMyAdmin]. Należy je najpierw zainstalować;
[5]: przycisk [Terminal] otwiera terminal poleceń;
[6]: przycisk [Root] otwiera Eksploratora Windows z kursorem w folderze [<laragon>/www], który jest katalogiem głównym witryny internetowej [http://localhost]. To właśnie tam należy umieścić wszystkie aplikacje internetowe obsługiwane przez serwer Apache w Laragonie;

Otwórzmy terminal Laragon [5]:

w [1], typ terminala. Dostępne są trzy typy terminali w [6];
w [2, 3]: bieżący katalog;
w [4] wpisuje się polecenie [echo %PATH%], które wyświetla listę katalogów przeszukiwanych podczas wyszukiwania pliku wykonywalnego. Wszystkie główne katalogi Laragona są uwzględnione w tej ścieżce do plików wykonywalnych, co nie miałoby miejsca w przypadku otwarcia okna poleceń [cmd] w systemie Windows. W niniejszym dokumencie, gdy konieczne jest wpisanie poleceń w celu zainstalowania danego oprogramowania, zazwyczaj są one wpisywane w terminalu Laragona;

2.1.2. Instalacja programu IDE NetBeans 10.0

IDE NetBeans 10.0 można pobrać pod następującym adresem (marzec 2019 r.):

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

Pobrany plik jest plikiem ZIP, który wystarczy rozpakować. Po zainstalowaniu i uruchomieniu programu NetBeans można utworzyć pierwszy projekt PHP.

w [1] należy wybrać opcję File / New Project;
w przypadku [2] należy wybrać kategorię [PHP];
w pliku [3] należy wybrać typ projektu [PHP Application];

w [4] nadać nazwę projektowi;
w [5] wybierz folder dla projektu;
w [6] wybierz wersję pobranego pliku PHP;
w [7], wybierz kodowanie UTF-8 dla plików PHP;
W [8] należy wybrać tryb [Script], aby uruchomić skrypty PHP w trybie wiersza poleceń. Wybierz [Local WEB Server], aby uruchomić skrypt PHP w środowisku internetowym;
w [9,10] należy wskazać katalog instalacyjny interpretera PHP z pakietu Laragon:

wybrać [Finish], aby zakończyć pracę kreatora tworzenia projektu PHP;

w [11] projekt zostanie utworzony wraz ze skryptem [index.php];
w [12] zapisuje się minimalny skrypt PHP;
w pliku [13] uruchamia się skrypt [index.php];

w [14] wyniki wyświetlają się w oknie [output] programu NetBeans;
w [15] tworzy się nowy skrypt;
w [16] – nowy skrypt;

Czytelnik może utworzyć wszystkie kolejne skrypty w różnych folderach tego samego projektu PHP. Kody źródłowe skryptów zawartych w niniejszym dokumencie są dostępne w postaci następującej struktury drzewa NetBeans:

Skrypty z niniejszego dokumentu znajdują się w drzewie katalogów projektu [scripts-console] [1]. Będziemy również korzystać z bibliotek PHP, które zostaną umieszczone w folderze [<laragon-lite>/www/vendor] [2], gdzie <laragon-lite> to folder instalacyjny oprogramowania Laragon. Aby NetBeans rozpoznał biblioteki z katalogu [2] jako część projektu [scripts-console], musimy dołączyć foldery [vendor] i [2] do gałęzi [Include Path] i [3] projektu. Skonfigurujemy NetBeans tak, aby foldery [<laragon-lite>/www/vendor] i [2] były dołączane do każdego nowego projektu PHP, a nie tylko do projektu [scripts-console]:

w projekcie [1-2] przechodzimy do opcji NetBeans;
w projekcie [3-4] należy skonfigurować opcje projektu PHP;
w [5-7] konfigurujemy [Global Include Path] z PHP: foldery wskazane w pliku [7] są automatycznie dołączane do pliku [Include Path] w każdym projekcie PHP;

w pliku [9] uzyskuje się dostęp do właściwości gałęzi [Include Path];
w [10-11] pojawiają się nowe biblioteki skanowane przez NetBeans. NetBeans skanuje kod PHP tych bibliotek i zapamiętuje ich klasy, interfejsy, funkcje… aby móc zaoferować pomoc programiście;

w [12] kod wykorzystuje klasę [PhpMimeMailParser\Parser] z biblioteki [vendor/php-mime-mail-parser];
w pliku [13] program NetBeans proponuje metody tej klasy;
w [14-15] NetBeans wyświetla dokumentację wybranej metody;

Pojęcie „[Include Path]” jest tutaj specyficzne dla środowiska NetBeans. PHP również posiada to pojęcie, ale z pozoru są to dwa różne pojęcia.

Teraz, gdy środowisko pracy zostało już zainstalowane, możemy przejść do omówienia podstaw programu PHP.

2.2. Środowisko pracy dla JavaScript

Narzędzia te można zainstalować za pomocą Laragon (patrz link w akapicie):

W [4] instalujemy [node.js]. Po zakończeniu instalacji należy otworzyć terminal Laragon (patrz akapit „link”) i sprawdzić wersję zainstalowanego [node.js] (1) oraz wersję [npm] (2):

Następnie instalujemy Visual Studio Code, często nazywany [code], [VSCode] lub [3-6]. Po wykonaniu tej czynności możemy uruchomić to narzędzie programistyczne:

2.2.1. Konfiguracja programu Visual Studio Code

Pokażemy teraz, jak skonfigurowaliśmy [VSCode], aby czytelnik mógł zrozumieć zrzuty ekranu, które będą pojawiać się od czasu do czasu. Czytelnik może dowolnie skonfigurować [VSCode] według własnego uznania. Może nawet zainstalować swoje ulubione środowisko pracy. Nie ma to większego znaczenia dla tego, co będziemy robić dalej.

Najpierw zmienimy wygląd okna [VSCode], aby tło było jasne zamiast czarnego:

Następnie ukrywamy lewy pasek [1-2], którego elementy są również dostępne w menu. W [3-6] ustawiamy formatowanie kodu przy każdym zapisywaniu pliku oraz przy każdym kopiowaniu i wklejaniu.

Po zapisaniu konfiguracji [Ctrl-S] można zamknąć okno [Settings] [7]. W dowolnym momencie można powrócić do konfiguracji [VSCode] [8-10]:

Konfiguracje te są zapisane w pliku [settings.json], który można edytować bezpośrednio. Otwórzmy okno konfiguracyjne [Settings], tak jak to pokazano:

W pliku [4] można bezpośrednio edytować plik [settings.json]:

w pliku [1] ścieżka do pliku [settings.json]. Jednym ze sposobów przywrócenia domyślnej konfiguracji jest usunięcie tego pliku;
w pliku [2], konfiguracje, które właśnie wprowadziliśmy;

Teraz otwórzmy terminal wewnątrz pliku [VSCode] [1-2]:

w [3], typ otwartego terminala, w tym przypadku PowerShell;
w [4] można wpisywać polecenia systemu Windows;
w [6] można otwierać inne terminale;
w [5] wyświetla listę otwartych terminali;
w [7] zamyka się aktywny terminal;

Wykorzystamy terminal [VSCode] do zainstalowania pakietów (bibliotek) JavaScript za pomocą narzędzia [npm] (Node Package Manager). Sprawdźmy, tak jak wcześniej w terminalu Laragon, zainstalowaną wersję [npm]:

Widać, że polecenie [npm] nie zostało rozpoznane. Oznacza to, że nie należy ono do PATH (lista katalogów przeszukiwanych w poszukiwaniu pliku wykonywalnego, w tym przypadku [npm]) terminala. Można sprawdzić, jaki plik PATH jest używany przez terminal:

Plik wykonywalny [npm] nie znajduje się w żadnym z tych folderów. Podobnie jak inne narzędzia zainstalowane przez Laragon, znajduje się on w folderze [<laragon>\bin] programu Laragon, a dokładniej w folderze [nodejs] [4-6].

Aby uruchomić [VSCode] i uzyskać dostęp do [npm], uruchomimy [VSCode] z terminala Laragon. Uruchomiony w ten sposób plik [VSCode] odziedziczy plik PATH z terminala Laragon, który z kolei zawiera folder z plikami wykonywalnymi [node] i [npm]:

w [1]: wpisujemy polecenie [path];
w przypadku pliku [2]: wyświetla się lista folderów zawartych w pliku PATH. Widzimy tam folder [node-v10] [2], co gwarantuje, że pliki wykonywalne [node] i [npm] zostaną znalezione;

[VSCode] jest uruchamiany z terminala Laragon za pomocą polecenia [code]:

w [2] otwiera się terminal PowerShell w [VSCode];
w [3-4] widać, że pliki wykonywalne [node] i [npm] są dostępne;

Uwaga: nie należy zamykać terminala Laragon, który uruchomił środowisko programistyczne [VSCode], w przeciwnym razie samo środowisko VSCode zostanie zamknięte.

Przeprowadzimy ostatnią konfigurację: zmienimy domyślny terminal dla [VSCode]:

Plik [settings.json] natychmiast się aktualizuje:

Teraz otwórzmy nowe okno terminala [VSCode] [1]:

w [2], terminal [cmd] (nie PowerShell);
w [3] polecenie [path] zwraca PATH terminala;
w [4] wyraźnie widać folder z plikami wykonywalnymi [node] i [npm]

2.2.2. Dodawanie rozszerzeń do Visual Studio Code

Utwórzmy plik JavaScript za pomocą [VSCode]:

w [3-4] tworzymy folder;
w [5] ustawiamy ten folder jako bieżący dla [VSCode];
w [6] otwieramy terminal;
w [7] widać, że znajdujemy się w wybranym folderze. Dalsze operacje będą wykonywane w tym folderze;

w [1-3]: tworzy się nowy folder;
w [4]: dodajemy plik do tego folderu;

w [5-7]: tworzymy nasz pierwszy program w JavaScript;

w [8-9]: uruchamiamy program JavaScript;
wynik pojawia się w konsoli wykonawczej [10]. W [11] widać polecenie, które zostało wykonane: to aplikacja [node] uruchomiła skrypt [test-01.js]. Było to możliwe, ponieważ ten plik wykonywalny znajduje się w PATH z [VSCode]; w przeciwnym razie pojawiłby się błąd wskazujący, że polecenie [node] jest nieznane;

Postępujmy w ten sam sposób, aby uruchomić drugi skrypt [test-02.js]:

w [1-3] definiujemy nowy skrypt. Instrukcja [use strict] w wierszu 1 wymaga ścisłej weryfikacji składni. W tym kontekście każda zmienna musi być zadeklarowana za pomocą jednego ze słów kluczowych [let, const, var]. Nie dotyczy to zmiennej [x] w wierszu 2;
gdy uruchamia się ten kod za pomocą [Ctrl-F5], pojawia się błąd [5]. Możliwe jest otrzymanie ostrzeżenia o tego typu błędzie przed uruchomieniem. Jest to zalecane. Zrobimy dwie rzeczy:
- zainstalujemy za pomocą [npm] bibliotekę o nazwie [eslint], która sprawdza, czy składnia skryptu jest zgodna ze standardem ECMAScript 6;
- zainstalujemy rozszerzenie do Visual Studio Code, również o nazwie ESLINT, które ułatwia korzystanie z biblioteki [eslint] w ramach [VSCode];

Najpierw zainstalujmy bibliotekę JavaScript [eslint] za pomocą narzędzia [npm]. Aby zainstalować bibliotekę (zwaną pakietem) [npm], należy znać jej dokładną nazwę. Jeśli jej nie znamy, możemy przejść na stronę [npm] pod adresem URL (2019) [https://www.npmjs.com/]:

w [3] – pakiety zaczynające się od [esl];
w [4-6] znajduje się pakiet [eslint];

w [7] znajduje się polecenie [npm] służące do zainstalowania pakietu [eslint];
w [8] – konfiguracja pakietu;
w [9] – jego wykorzystanie do sprawdzania składni skryptu JavaScript;

Instalujemy pakiet [eslint] w oknie [Terminal] programu [VSCode]. Najpierw musimy utworzyć plik [package.json] w katalogu głównym folderu roboczego [VSCode]. Plik ten będzie zawierał listę pakietów jS wykorzystywanych przez projekt [VSCode]:

w [1], kliknij prawym przyciskiem myszy w eksploratorze projektu (nie na folderze „tests”);
w pliku [3-4], tworzymy plik [package.json] w katalogu głównym projektu [javascript], na tym samym poziomie co folder [tests] (ale nie w [tests]);
w [4-6] umieszczamy w pliku [package.json] pusty obiekt jSON;

Następnie otwieramy terminal [VSCode], aby zainstalować [eslint]:

w [2] znajdujemy się w katalogu głównym projektu [javascript];
w [3] znajduje się polecenie instalujące pakiet [eslint];
po wykonaniu,
- w [4-5] plik [package.json] został zmodyfikowany. W wierszu 3 podana jest zainstalowana wersja [eslint]. W wierszu 2 [devDependencies] odpowiada argumentowi [--save-dev] instalacji. Argument ten oznacza, że zainstalowana zależność musi zostać wpisana do pliku [package.json] jako element właściwości [devDependencies]. Właściwość ta zawiera listę zależności projektu, które są potrzebne w trybie programowania, ale nie w trybie produkcyjnym. W rzeczywistości zależność [eslint] jest potrzebna wyłącznie w fazie rozwoju, aby sprawdzić, czy napisany kod jest zgodny ze standardem ECMAScript;
- w [6] w projekcie pojawił się folder [node_modules]. Jest to folder, w którym zainstalowane są zależności projektu;

w [7] znajduje się część zainstalowanych pakietów. Jest ich bardzo wiele. Zainstalowano bowiem nie tylko pakiet [eslint], ale również wszystkie pakiety, na których się on opiera;

[1-2], w terminalu [VSCode] wydaje się polecenie konfiguracji pakietu [eslint]. Program zada szereg pytań dotyczących pakietu [3], aby ustalić, w jaki sposób użytkownik zamierza korzystać z pakietu [eslint]. W razie wątpliwości należy pozostawić domyślne opcje. Aby wybrać opcję, należy użyć strzałek w górę i w dół na klawiaturze, a następnie ją potwierdzić;
w [4] w katalogu głównym projektu utworzono plik [.eslintrc.js];
w [6] zawartość pliku. Można skopiować tę zawartość do własnego pliku;


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

To wszystko nie wystarcza do zgłoszenia błędów w pliku [test-02.js]:

należy wpisać polecenie [2-3], aby plik [tests/test-02.js] został przeanalizowany;
w pliku [4] wykryto błąd dotyczący niezadeklarowanej zmiennej;

Dodamy do pliku [VSCode] rozszerzenie, które pozwoli na wyświetlanie błędów JavaScript w czasie rzeczywistym. Rozszerzenie to opiera się na pakiecie [eslint], który zainstalowaliśmy:

w [3-5] instalujemy rozszerzenie o nazwie [ESLint];

na [1], strona z informacjami o nowo zainstalowanym rozszerzeniu;
w [2], widać, że trybem sprawdzania dla pliku [ESLint] jest [type], co oznacza, że składnia skryptów jS będzie sprawdzana równocześnie z wpisywaniem tekstu;

ESLint można skonfigurować za pomocą ogólnego pliku konfiguracyjnego [VSCode]:

w [6-7] znajduje się konfiguracja [ESLint]. Tutaj można ją zmodyfikować;

Wróćmy teraz do pliku [test-02.js]:

w pliku [3-4] błędy dotyczące zmiennej [x] są teraz sygnalizowane;
w pliku [5]: liczba błędów ESLint w pliku;
w [6] wskazuje, że w folderze [tests] znajdują się pliki zawierające błędy;

Jeśli poprawimy błąd, ostrzeżenia z pliku ESLint znikną:

Zainstalujmy teraz rozszerzenie o nazwie [Code Runner]:

Po zainstalowaniu rozszerzenia [Code-Runner] [1-5] można je skonfigurować za pomocą [6-7] (powyżej);

w [1-2] znajdują się elementy konfiguracyjne z [Code-Runner];
w [3] należy ustawić wymóg czyszczenia terminala wyjściowego przed każdym uruchomieniem;
w pliku [4] lokalizujemy element [Executor Map], który zawiera listę narzędzi do kompilacji różnych języków;
w pliku [5-6] kopiuje się konfigurację do schowka;
w pliku [7-8] modyfikuje się plik [settings.json];

w [2] dodajemy przecinek za ostatnim elementem pliku [settings.json] [1];
w pliku [3] wklejamy to, co wcześniej skopiowaliśmy do pliku [5-6]: jest to lista poleceń umożliwiających uruchamianie różnych języków obsługiwanych przez [VSCode];
w pliku [4] umieszczamy polecenie umożliwiające uruchamianie plików JavaScript. Działa ono tylko wtedy, gdy plik [node] znajduje się w pliku PATH, który z kolei znajduje się w pliku [VSCode]. Jeśli tak nie jest, można podać pełną ścieżkę do pliku wykonywalnego [5];

Teraz zapiszmy konfigurację (Ctrl-S). Dzięki rozszerzeniu [Code Runner] pliki JavaScript można uruchamiać, klikając prawym przyciskiem myszy na kodzie [6] (powyżej):

2.2.3. Kilka przydatnych poleceń [VSCode]

aby sformatować kod, kliknij na nim prawym przyciskiem myszy [1];
aby zamknąć otwarte okna, kliknij prawym przyciskiem myszy na ich tytuły [2-3];

aby wyświetlić konkretne okno [4-5];
aby zapisać projekt (Workspace) [6-9] ;
aby zapisać projekt [10-11];

aby otworzyć projekt [11-16]:

aby wyświetlić zainstalowane rozszerzenia [19-20]:

Dysponujemy obecnie dobrymi narzędziami do programowania w JavaScript. Teraz przedstawimy ten język za pomocą krótkich fragmentów kodu. Ponieważ niniejsza prezentacja jest kontynuacją kursu PHP, będziemy czasami dokonywać porównań między tymi dwoma językami, aby wskazać różnice między nimi.