PHP, Visual Studio Code i XAMPP — konfiguracja 3 narzędzi

PHP, Visual Studio Code i XAMPP

Do pracy z językiem PHP potrzebnych jest parę podstawowych narzędzi. Na przykład skrypty w języku PHP są wykonywane na serwerze, co oznacza, że będziemy musieli się o niego postarać. Tylko skąd go wziąć?

Można skorzystać z usług jednej z firm hostingowych (polecam Seohost.pl — po podaniu kodu rabatowego shebang otrzymasz 25% zniżki), aby testować skrypty od razu bezpośrednio w internecie. Ale można też zainstalować serwer na własnym komputerze, aby móc testować swoje skrypty w lokalnym środowisku.

Najpopularniejszym na świecie serwerem WWW jest Apache. Oprócz niego dużą popularnością cieszą się także nginx i Microsoft IIS. Każdy z nich można zainstalować na swoim komputerze w celach testowych. I choć można o nich napisać grubą księgę, to dla ciebie, jako początkującego programisty PHP, sam serwer nie ma większego znaczenia.

Ważne jest tylko, aby serwer miał zainstalowany interpreter PHP i, na późniejszym etapie nauki, serwer baz danych MySQL. Niemniej jednak któryś trzeba wybrać i do tego kursu wybrałem serwer Apache, ponieważ jest bezpłatny, popularny, łatwy w konfiguracji i łatwo dostępny.

Oprócz serwera WWW, interpretera PHP i serwera baz danych MySQL będziesz potrzebować jeszcze edytora kodu PHP. Wybór programów tego typu jest naprawdę szeroki i jeśli masz już jakiś ulubiony edytor, to możesz z niego śmiało korzystać, ale w tym kursie używany jest edytor Microsoft Visual Studio Code.

Jeśli nie znasz jeszcze tego programu i potrzebujesz łatwego wprowadzenia, to przejdź na stronę Wprowadzenie do Visual Studio Code w Kursie HTML i CSS dla początkujących. Dowiesz się, skąd go pobrać, jak go zainstalować oraz jak przeprowadzić podstawową konfigurację.

Kiedy już będziesz to wszystko wiedzieć, wróć tutaj, abym mógł Ci pokazać, jak przygotować do pracy środowisko złożone z Visual Studio Code i PHP.

Podsumowując, w tym kursie PHP będziesz pracować w środowisku złożonym z następujących narzędzi:

  • Serwer WWW Apache
  • Interpreter PHP
  • Serwera baz danych MySQL
  • Edytor kodu PHP Visual Studio Code

Teraz pewnie myślisz, że instalacja i konfiguracja tych wszystkich narzędzi zajmie Ci całą wieczność i doprowadzi Cię do rozstroju nerwowego na wiele tygodni. Nic bardziej mylnego! Wszystkie te narzędzia zainstalujesz na swoim komputerze w mgnieniu oka, a ich konfiguracja będzie wręcz banalnie prosta.

Wystarczy, że użyjesz jednego z pakietów deweloperskich, na przykład XAMPP.

PHP, Visual Studio Code i XAMPP

XAMPP to gotowy zestaw wszystkich narzędzi potrzebnych do programowania w języku PHP. Jest bardzo łatwy w instalacji oraz zawiera między innymi serwer Apache, interpreter PHP i serwer baz danych MySQL.

Pokażę Ci jak go zainstalować i skonfigurować zawarte w nim narzędzia do pracy z edytorem kodu Visual Studio Code.

Instalacja XAMPP

Aby zainstalować pakiet XAMPP na komputerze, najpierw musisz go pobrać z internetu. Wejdź więc na stronę https://www.apachefriends.org/pl/index.html i kliknij odpowiedni przycisk pobierania. Ja wybrałem XAMPP dla Windows 8.2.12 (PHP 8.2.12), ponieważ pracuję w systemie Windows 11 i obecnie jest to najnowsza wersja tego oprogramowania.

Z nazwy pakietu można wywnioskować, że zawiera on interpreter PHP 8.2.12, a więc aktualnie (kwiecień 2025 roku) prawie najnowszą wersję. To bardzo dobrze, ponieważ język PHP cały czas dynamicznie się rozwija.

Strona pobierania pakietu XAMPP php visual studio

Gdy pobieranie się skończy, uruchom pobrany plik instalacyjny. Pojawi się okno dialogowe z pytaniem o zezwolenie na wprowadzanie zmian w komputerze, w którym kliknij przycisk Tak.

Kolejne będzie okno z ostrzeżeniem, że funkcja Kontrola konta użytkownika systemu Windows może zakłócać działanie XAMPP, dlatego najlepiej nie instalować tego pakietu w folderze Program Files lub ewentualnie należy wyłączyć funkcję kontroli konta użytkownika.

Ostrzeżenie XAMPP o UAC

To jest tylko ostrzeżenie. Nie musisz się nim przejmować, ponieważ na dalszym etapie instalator i tak standardowo wybierze odpowiedni folder poza tym strasznym katalogiem. Kliknij więc przycisk OK, aby przejść do kreatora instalacji.

Pojawi się powitalne okno dialogowe widoczne na poniższej ilustracji. Kliknij przycisk Next, aby przejść dalej.

XAMPP kreator instalacji, pierwsze okno

W następnym oknie możesz wybrać składniki, które chcesz zainstalować. Aby nie komplikować sobie niepotrzebnie zestawu nieznanymi jeszcze na tym etapie narzędziami, pozostaw zaznaczone tylko pozycje MySQL i phpMyAdmin (jest to bardzo przydatny przeglądarkowy program do zarządzania bazami danych).

Instalator XAMPP - wybór MySQL i phpMyAdmin

Kliknij przycisk Next, aby przejść do następnego okna. W nim możesz wybrać folder, w których chcesz zainstalować oprogramowanie. Pamiętając o wcześniejszym ostrzeżeniu, pozostaw domyślnie proponowany katalog C:\xampp.

Instalator XAMPP, wybór folderu

Kliknij przycisk Next, aby przejść do okna wyboru języka. Dostępnych jest kilka opcji, ale nie ma wśród nich polskiego, więc ja wybrałem angielski.

Instalator XAMPP - wybór języka

Kliknij przycisk Next, aby przejść do następnego okna, w którym instalator poinformuje Cię, że jest już gotowy do przeprowadzenia instalacji.

Instalator XAMPP - gotowy do instalacji

Kliknij przycisk Next, aby rozpocząć instalowanie oprogramowania.

XAMPP - instalowanie oprogramowania

Gdy instalacja dobiegnie końca, pojawi się okno dialogowe z informacją, że instalacja została zakończona, oraz z pytaniem, czy chcesz teraz uruchomić panel sterowania XAMPP.

Zakończenie instalacji XAMPP

Pozostaw pole wyboru Do you want to start the Control Panel now? zaznaczone i kliknij przycisk Finish, aby zakończyć instalację i przejść do okna panelu sterowania widocznego na poniższym zrzucie ekranu.

Okno panelu sterowania XAMPP php visual studio mysql

W oknie tym widać, które usługi są dostępne i czynne. U mnie do włączenia dostępne są tylko usługi Apache i MySQL. Na razie nie będziemy korzystać z serwera baz danych MySQL, więc nie ma potrzeby go włączać.

Kliknij więc tylko przycisk Start po prawej stronie pozycji Apache>, aby uruchomić na swoim komputerze serwer WWW Apache z interpreterem PHP.

Po uruchomieniu serwera Apache możesz zamknąć okno panelu sterowania XAMPP. Spowoduje to jego minimalizację do zasobnika systemu. Serwer z interpreterem PHP już działa i z niecierpliwością czeka na twoje skrypty!

Teraz skonfigurujemy Visual Studio Code do współpracy z tą parą starych nierozłącznych przyjaciół. Zaczniemy od pokazania edytorowi, gdzie znajduje się plik wykonywalny interpretera PHP.

Apache i PHP - para przyjaciół

Konfiguracja PHP w Visual Studio Code

Aby zapoznać edytor Visual Studio Code z serwerem Apache i działającym na nim interpreterem PHP z pakietu XAMPP, wystarczy wykonać parę prostych czynności. Pierwszą z nich będzie pokazanie edytorowi, gdzie znajduje się plik wykonywalny interpretera PHP.

Być może pamiętasz, że pakiet XAMPP zainstalowaliśmy w folderze C:\xampp. To znaczy, że właśnie tam powinniśmy szukać interpretera PHP. Otwórz ten folder, a następnie przejdź do katalogu php i znajdź w nim plik o nazwie php.exe. To jest właśnie to, czego szukasz — plik wykonywalny interpretera PHP. W związku z tym ścieżka do niego to: c:\xampp\php\php.exe.

Znając ścieżkę do interpretera PHP, uruchom Visual Studio Code i w polu wyszukiwania u góry okna wpisz słowo settings. W wyniku pojawi się plik settings.json, jak widać na poniższym zrzucie ekranu.

plik settings.json po wyszukaniu w Visual Studio Code

Kliknij plik settings.json, aby go otworzyć. Jego zawartość może być różna, zależnie od tego, czy dopiero zainstalowałeś edytor Visual Studio Code, czy używasz go już jakiś czas i masz zainstalowane różne rozszerzenia. U mnie w używanej już od jakiegoś czasu instalacji jego zawartość wygląda tak, jak widać na poniższym zrzucie ekranu:

Zawartość pliku settings.json edytora Visual Studio Code

W pliku tym, na przykład przed znakiem zamykającym klamrę (}), dodaj poniższy wiersz kodu:

"php.validate.executablePath": "C:/xampp/php/php.exe"

Zwróć uwagę na to, że zmieniłem ukośniki w ścieżce do pliku z „\” na „/”. Należy to zrobić, aby edytor Visual Studio Code poprawnie rozpoznał ścieżkę.

Po dodaniu tego wiersza kodu możesz zapisać i zamknąć plik settings.json. Od tej pory Visual Studio Code będzie rozpoznawać pliki PHP.

Tworzenie projektu w katalogu serwera Apache

Drugą, i ostatnią, czynnością, którą musimy wykonać przed przejściem do praktycznej nauki programowania w języku PHP, jest utworzenie projektu Visual Studio Code w odpowiednim katalogu.

Z pewnością już wiesz (a jeśli nie wiesz, to dowiedz się tego na stronie Wprowadzenie do Visual Studio Code), że aby utworzyć projekt w Visual Studio Code, wystarczy po prostu otworzyć wybrany folder. Pytanie tylko, który?

Domyślnym katalogiem na pliki, które mają być serwowane przez serwer Apache w XAMPP, jest folder c:/xampp/htdocs.

Jeśli go otworzysz, to znajdziesz w nim standardowy kilka domyślnych plików i folderów, które możesz usunąć, aby w ich miejsce umieścić swoje. Usuń więc całą zawartość folderu c:/xampp/htdocs, a następnie otwórz go w Visual Studio Code, aby uczynić go swoim folderem projektu. Okno główne programu powinno teraz wyglądać tak:

Puste okno główne programu Visual Studio Code

Teraz kliknij ikonę kartki ze znakiem plus w prawym górnym rogu okienka Eksploratora w Visual Studio Code i utwórz nowy plik o nazwie index.php. W pliku tym wpisz poniższy kod:


<?php

echo "Witaj, świecie!";

Powinno to wyglądać tak, jak na poniższym zrzucie ekranu.

Pierwszy plik z kodem php w visual studio code

Aby sprawdzić, czy skrypt zadziała, uruchom dowolną przeglądarkę internetową i w pasku adresu wpisz localhost. Jeśli wszystko zrobiłeś dobrze, na ekranie pojawi się napis Witaj, świecie. Stanowi to dowód, że skrypt został poprawnie zinterpretowany przez interpreter PHP. Spójrz na poniższy zrzut ekranu:

Weryfikacja działania skryptu PHP

Zapisz sobie ten adres w przeglądarce, ponieważ będziesz się nim posługiwać przez cały czas nauki programowania w PHP. Traktuj go jak adres swojej osobistej strony internetowej.

Masz już gotowe i pełnowartościowe środowisko do rozpoczęcia nauki programowania w języku PHP. Jednak to, że jest dobrze, nie znaczy, że nie może być lepiej. Dlatego poniżej przedstawiam parę rozszerzeń do edytora Visual Studio Code, które mogą ułatwić i uprzyjemnić Ci pracę.

Przydatne rozszerzenia do pracy z PHP w Visual Studio Code

Poniżej przedstawiam kilka rozszerzeń do edytora Visual Studio Code, które może nie są absolutnie niezbędne, ale na pewno ułatwią i uprzyjemnią Ci pracę.

Debugowanie skryptów PHP w Visual Code Studio

Czasami dobrze jest móc testować i debugować skrypty bezpośrednio w edytorze Visual Studio Code. Aby mieć taką możliwość, należy zainstalować rozszerzenie o nazwie PHP Debug.

W polu wyszukiwania w okienku Rozszerzenia edytora wpisz PHP Debug i zainstaluj rozszerzenie o tej nazwie. Spowoduje to pojawienie się nowej pozycji w prawym górnym rogu okna edytora. Jest to zwrócony w prawo trójkąt ze strzałką skierowaną w dół po prawej stronie. Zaznaczyłem go czerwoną obwódką na poniższym zrzucie ekranu.

Rozszerzenie PHP Debug w Visual Studio Code

Gdy klikniesz ten przycisk pierwszy raz, to w prawym dolnym rogu edytora pojawi się komunikat informujący, że nie znaleziono ścieżki do pliku wykonywalnego PHP. Ten problem łatwo rozwiążesz przez kliknięcie przycisku Open settings w tym komunikacie.

Na ekranie, który się pojawi, kliknij łącze Edytuj w pliku settings.json, po czym w opcji "php.debug.executablePath": "" wpisz ścieżkę do pliku wykonywalnego PHP, czyli:

"php.debug.executablePath": "C:/xampp/php/php.exe"

Zawartość tego pliku może wyglądać tak, jak na poniższym zrzucie ekranu. Interesujący cię wiersz został wyróżniony.

Plik settings.json po dodaniu obsługi PHP Debug

Zapisz zamknij plik settings.json, a następnie kliknij plik index.php w okienku Eksplorator, po czym kliknij ikonę trójkąta zwróconego w prawo, aby wykonać ten plik bezpośrednio w Visual Studio Code. Wynik powinien pojawić się w Konsoli debugowania, jak widać poniżej.

Wynik uruchomienia skryptu PHP w Konsoli debugowania Visual Studio Code

PHP Debug to zaawansowany debuger skryptów PHP, ale może też przydać się początkującemu programiście do szybkiego wykonywania i badania skryptów.

Uruchamianie skryptów PHP w wybranej przeglądarce

W Visual Studio Code można wygodnie uruchamiać skrypty PHP w dowolnej przeglądarce. Wystarczy w tym celu zainstalować rozszerzenie o nazwie Open PHP/HTML/JS In Browser i odpowiednio je skonfigurować.

Po zainstalowaniu tego rozszerzenia możesz ustawić dogodny skrót klawiszowy, który będzie powodował otwarcie edytowanego skryptu w przeglądarce. W tym celu otwórz kolejno Plik, Preferencje, Skróty klawiaturowe i w polu wyszukiwania na górze wpisz Shift + F6 (wpisz to jako słowa, nie naciskaj tych klawiszy), aby znaleźć domyślny skrót ustawiony przez narzędzi.

Usuń przypisanie do tego skrótu klawiaturowego (może być więcej niż jedno) dotyczące rozszerzenia Open PHP/HTML/JS in Browser, a następnie zdefiniuj własny skrót klawiaturowy. Ja na przykład do tego celu lubię używać skrótu Ctrl + ].

Od tej pory możesz uruchamiać skrypty w domyślnej przeglądarce przez naciśnięcie skrótu klawiaturowego, np. Ctrl + ], oraz przez kliknięcie przycisku Open In Browser, który pojawi się po lewej stronie paska stanu na dole okna edytora.

Jeśli chcesz zmienić domyślną przeglądarkę, to otwórz dobrze znany Ci już plik settings.json i poszukaj w nim opcji open-php-html-js-in-browser.selectedBrowser (jeśli jej nie ma, to ją dodaj). Jako wartość wpisz jedną z następujących wartości: Firefox, Google Chrome, Chromium, Safari, Opera, Edge lub IE. Zapisz i zamknij plik settings.json. Od tej pory skrypty będą otwierane w wybranej przez Ciebie przeglądarce.

Uzupełnianie składni PHP w Visual Studio Code

Edytor Visual Studio Code ma standardową funkcję podpowiadania składni PHP, którą można włączyć przez nadanie opcji php.suggest.basic wartości true w pliku settings.json. Otwórz ten plik i dodaj do niego następujący wiersz w taki sam sposób, jak we wcześniejszych przypadkach:

"php.suggest.basic": true,

Zwróć uwagę, że php.suggest.basic to tzw. opcja logiczna, która przyjmuje tylko jedną z dwóch wartości: true (prawda — opcja włączona) lub false (fałsz — opcja wyłączona). Wartości logicznych w pliku settings.json nie umieszcza się w cudzysłowie.

Brawo! Właśnie ukończyłeś konfigurację swojego środowiska do programowania w języku PHP. Pozostało już tylko powtórzyć wiadomości, sprawdzić stopień opanowania wiedzy na podstawie pytań kontrolnych i wykonać ćwiczenia.

Następnie możesz przejść do kolejnego rozdziału, w którym nauczysz się tworzyć prawidłowe pliki PHP, dodawać do nich kod PHP oraz łączyć kod PHP i HTML.

Podsumowanie

Tygrys podsumowania
  1. Do wykonywania skryptów PHP potrzebny jest interpreter PHP.
  2. Interpreter PHP działa na serwerze WWW.
  3. Jednym z najpopularniejszych serwerów WWW jest Apache.
  4. Dane serwisów internetowych można przechowywać w bazie danych, np. MySQL.
  5. Istnieje wiele edytorów kodu odpowiednich do programowania w języku PHP.
  6. Jednym z najpopularniejszych edytorów do programowania w różnych językach, w tym w PHP, jest dostępny bezpłatnie Microsoft Visual Studio Code.
  7. Pakiet deweloperski to zestaw narzędzi programistycznych.
  8. Jednym z najpopularniejszych pakietów deweloperskich dla języka PHP jest XAMPP.
  9. XAMPP zawiera serwer WWW Apache, serwer baz danych MySQL, interpreter PHP oraz kilka innych narzędzi.
  10. XAMPP się instaluje i konfiguruje bardzo łatwo!
  11. W Microsoft Visual Studio Code bardzo ważny jest plik settings.json, w którym można zdefiniować wiele ustawień.
  12. Pliki, które mają być serwowane przeglądarce przez serwer Apache z pakietu XAMPP, należy umieścić w katalogu c:/xampp/htdocs (przy domyślnych ustawieniach).
  13. Przed rozpoczęciem tworzenia własnego projektu w katalogu c:/xampp/htdocs należy usunąć znajdujące się w nim standardowe pliki i katalogi.
  14. Pliki umieszczone w katalogu c:/xampp/htdocs są dostępne w przeglądarce pod adresem lokalnym localhost.
  15. Serwer Apache domyślnie traktuje plik index.php jako stronę główną.
  16. Wirtualne hosty serwera Apache umożliwiają utworzenie lokalnie strony testowej o dowolnym adresie.
  17. PHP Debug to zaawansowane rozszerzenie do debugowania skryptów PHP w Microsoft Visual Studio Code.
  18. Open PHP/HTML/JS In Browser to rozszerzenie, za pomocą którego można wygodnie wyświetlić stronę opracowywaną w Microsoft Visual Studio Code w przeglądarce internetowej.
  19. Aby włączyć podstawowe podpowiadanie składni języka PHP w Microsoft Visual Studio Code, należy do pliku settings.json dodać opcję "php.suggest.basic": true.
  20. Istnieją rozszerzenia do Microsoft Visual Studio Code, które zapewniają szersze możliwości w zakresie podpowiadania składni, np. PHP IntelliSense i PHP Intelephense.


Rozmawiający mężczyźni

Pytania

  1. Co jest potrzebne go wykonywania skryptów PHP?
  2. Czym jest interpreter PHP i gdzie on działa?
  3. Jakie znasz popularne serwery WWW?
  4. Gdzie, między innymi, można przechowywać dane serwisów internetowych?
  5. Jakie znasz edytory kodu odpowiednie do programowania w języku PHP?
  6. Czym jest pakiet deweloperski?
  7. Czym jest i co zawiera XAMPP?
  8. Do czego służy plik settings.json w edytorze Microsoft Visual Studio Code?
  9. Gdzie należy umieścić pliki serwisu na serwerze Apache z pakietu XAMPP?
  10. Pod jakim adresem w przeglądarce są dostępne pliki umieszczone w katalogu c:/xampp/htdocs?
  11. Jaką nazwę pliku serwer Apache domyślnie traktuje jako nazwę strony głównej?
  12. Czym są wirtualne hosty?
  13. Do czego służy PHP Debug?
  14. Do czego służy Open PHP/HTML/JS In Browser.
  15. Jak włączyć podstawową funkcję podpowiadania składni PHP w edytorze PHP w Microsoft Visual Studio Code?


Ćwiczące dzieci

Ćwiczenia

  1. Pobierz z internetu i zainstaluj na swoim komputerze pakiet XAMPP.
  2. Przygotuj kompletne środowisko pracy z językiem PHP na swoim komputerze.
  3. W katalogu głównym swojego serwisu na serwerze utwórz plik o nazwie info.php.
  4. W pliku tym wpisz następujący kod:
    
    <?php
    echo phpinfo();
    
  5. Otwórz ten plik w przeglądarce internetowej. Co widzisz na ekranie? Jeśli nie wiesz, co to jest, poszukaj informacji w internecie.
Udostępnij:
Share

Podobał Ci się ten artykuł?

Oceń go!

Średnia 4.6 / 5. Liczba głosów: 7

Jeszcze nikt nie głosował. Wyprzedź innych i zagłosuj.

Skoro spodobał Ci się ten artykuł...

Poleć go znajomym!

Ojej :( Powiedz nam, co powinniśmy poprawić!

blank
Podoba Ci się ta strona?

Pomóż nam się rozwijać, wykupując płatne konto. Dzięki temu będziemy mogli tworzyć dla Ciebie jeszcze więcej ciekawych treści, a Ty pozbędziesz się reklam.

Autor: Łukasz Piwko

Dodaj komentarz