ZAWODNIK

Warsztat: edytor, IDE, XAMPP, localhost, narzędzia deweloperskie przeglądarki

INF.03 · teoria
autor: redakcja · 02.11.2026
Dobór edytora i środowiska uruchomieniowego, przygotowanie lokalnego projektu w XAMPP oraz sprawdzanie Apache, PHP i bazy. Narzędzia przeglądarki i diagnoza typowych problemów. Lekcja 10.3 kursu INF.03.
Śro­do­wi­sko pro­gra­mi­stycz­ne to zestaw na­rzę­dzi do pi­sa­nia, uru­cha­mia­nia i spraw­dza­nia pro­gra­mu. Na eg­za­mi­nie trzeba dobrać na­rzę­dzie do języka, przy­go­to­wać lo­kal­ny serwer WWW oraz serwer bazy danych. W prak­ty­ce naj­pierw uru­cha­mia się mały dzia­ła­ją­cy przy­kład, aby póź­niej­szy błąd apli­ka­cji nie mie­szał się z błędem in­sta­la­cji.

Edytor i IDE

Edytor kodu to pro­gram do two­rze­nia plików źró­dło­wych. Pod­świe­tla­nie skład­ni roz­róż­nia ele­men­ty języka, nu­me­ra­cja wier­szy uła­twia odczyt ko­mu­ni­ka­tu, a wy­szu­ki­wa­nie pomaga zna­leźć po­wtó­rzo­ną nazwę. Visual Studio Code jest przy­kła­dem edy­to­ra, który można roz­sze­rzać do­dat­ka­mi. Pod­po­wiedź kodu bywa przy­dat­na, ale nie do­wo­dzi po­praw­no­ści przy­ję­tej logiki.
IDE (Integrated Development Environment, zin­te­gro­wa­ne śro­do­wi­sko pro­gra­mi­stycz­ne) łączy edycję z do­dat­ko­wy­mi na­rzę­dzia­mi, na przy­kład uru­cha­mia­niem, ana­li­zą pro­jek­tu i de­bug­ge­rem. De­bug­ger po­zwa­la za­trzy­my­wać wy­ko­na­nie i od­czy­ty­wać stan pro­gra­mu. Gra­ni­ca między roz­bu­do­wa­nym edy­to­rem a IDE jest płynna, bo roz­sze­rze­nia mogą do­da­wać te funk­cje. Naj­waż­niej­sze jest to, czy wy­bra­ne na­rzę­dzia ob­słu­gu­ją uży­wa­ny język i sposób uru­cha­mia­nia.
Do samego HTML i CSS wy­star­czy edytor oraz prze­glą­dar­ka. JavaScript strony wy­ko­nu­je silnik prze­glą­dar­ki. PHP wymaga in­ter­pre­te­ra po stro­nie ser­we­ra lub uru­cho­mie­nia z kon­so­li, a skrypt ko­rzy­sta­ją­cy z MySQL wymaga także dzia­ła­ją­ce­go ser­we­ra bazy. Za­in­sta­lo­wa­nie edy­to­ra nie in­sta­lu­je au­to­ma­tycz­nie wszyst­kich tych usług. Ko­lo­ro­we roz­sze­rze­nie pliku PHP nie jest in­ter­pre­te­rem.
Pro­jekt otwie­ra się jako folder, aby wi­dzieć po­wią­za­ne pliki. Ustal prostą struk­tu­rę: plik strony, arkusz stylów, plik skryp­tu i ka­ta­log ob­ra­zów. Nazwy bez spacji oraz kon­se­kwent­na wiel­kość liter ogra­ni­cza­ją po­mył­ki. System na ser­we­rze może roz­róż­niać wiel­kie i małe litery, nawet jeśli lo­kal­ny system po­zwa­lał na inne za­pi­sa­nie nazwy. Ścież­ka w kodzie musi od­po­wia­dać rze­czy­wi­ste­mu pli­ko­wi.

In­sta­la­cja lo­kal­ne­go pa­kie­tu

XAMPP to pakiet śro­do­wi­ska lo­kal­ne­go za­wie­ra­ją­cy między innymi Apache, PHP, MariaDB i phpMyAdmin. Apache ob­słu­gu­je żą­da­nia WWW, PHP wy­ko­nu­je skryp­ty, MariaDB prze­cho­wu­je dane, a phpMyAdmin daje panel do za­rzą­dza­nia bazą. W panelu usługa bazy może nadal mieć ety­kie­tę MySQL. Szcze­gó­ły składu pa­kie­tu i jego prze­zna­cze­nie opi­su­je Apache Friends.
Po­bierz pakiet z ofi­cjal­ne­go źródła i wy­bierz wersję od­po­wied­nią do ćwi­czeń lub wy­ma­ga­ne­go sta­no­wi­ska. Przed zmianą ist­nie­ją­cej in­sta­la­cji za­bez­piecz własne pliki i bazy. In­sta­la­cja nowego pa­kie­tu na ka­ta­log sta­re­go nie jest metodą mi­gra­cji danych. Na sta­no­wi­sku eg­za­mi­na­cyj­nym naj­pierw sprawdź, co przy­go­to­wa­no, za­miast sa­mo­dziel­nie prze­bu­do­wy­wać śro­do­wi­sko.
Typowa ko­lej­ność przy­go­to­wa­nia lo­kal­ne­go pro­jek­tu wy­glą­da na­stę­pu­ją­co:
  • 1.
    Za­in­sta­luj pakiet i sprawdź po­ło­że­nie ka­ta­lo­gów oraz wersje skład­ni­ków.
  • 2.
    Uru­chom Apache w panelu i od­czy­taj ko­mu­ni­kat o stanie usługi.
  • 3.
    Otwórz adres lo­cal­host przez HTTP i sprawdź od­po­wiedź ser­we­ra.
  • 4.
    Umieść własny mały plik PHP w ka­ta­lo­gu do­ku­men­tów i otwórz go przez serwer.
  • 5.
    Uru­chom usługę bazy, otwórz phpMyAdmin i sprawdź po­łą­cze­nie.
  • 6.
    Do­pie­ro potem do­da­waj pliki wła­ści­wej apli­ka­cji i jej dane.
XAMPP jest prze­zna­czo­ny do śro­do­wi­ska de­we­lo­per­skie­go, czyli przy­go­to­wy­wa­nia opro­gra­mo­wa­nia. Nie należy wy­sta­wiać do­myśl­nej lo­kal­nej kon­fi­gu­ra­cji jako go­to­we­go pu­blicz­ne­go ser­we­ra. Konta, dostęp sie­cio­wy i usta­wie­nia dia­gno­stycz­ne wy­ma­ga­ją osob­nej kon­fi­gu­ra­cji pro­duk­cyj­nej. W ćwi­cze­niu utrzy­mu­je­my usługi lo­kal­nie i nie otwie­ra­my portów sze­ro­ko tylko po to, aby ominąć błąd po­łą­cze­nia.

Lo­cal­host i pierw­szy plik

Lo­cal­host ozna­cza własny kom­pu­ter w kon­tek­ście uru­cho­mio­ne­go klien­ta. Dla prze­glą­dar­ki te­le­fo­nu lo­cal­host jest te­le­fo­nem, a nie lap­to­pem obok. Adres URL kie­ru­je żą­da­nie do usługi, na­to­miast ścież­ka dys­ko­wa wska­zu­je plik w sys­te­mie plików. Te dwie po­sta­cie nie są za­mien­ne.
W ty­po­wej in­sta­la­cji XAMPP na Win­dows ka­ta­log do­ku­men­tów to htdocs. Jeśli pakiet za­in­sta­lo­wa­no w C:\xampp, pro­jekt można umie­ścić w C:\xampp\htdocs\sklep. Plik index.php będzie wtedy do­stęp­ny przez adres ser­we­ra z koń­ców­ką /sklep/index.php. W innej in­sta­la­cji lo­ka­li­za­cja może być inna; spraw­dza się ją w kon­fi­gu­ra­cji ser­we­ra.
1
2
<?php
echo "Środowisko działa";
Od­po­wiedź po­win­na za­wie­rać tekst „Śro­do­wi­sko działa”. Jeżeli prze­glą­dar­ka po­ka­zu­je kod źró­dło­wy albo pro­po­nu­je po­bra­nie pliku, wy­ko­na­nie PHP nie zo­sta­ło po­praw­nie skon­fi­gu­ro­wa­ne. Otwar­cie pliku dwu­kli­kiem i adres za­czy­na­ją­cy się od file nie wy­sy­ła­ją go au­to­ma­tycz­nie do in­ter­pre­te­ra ser­we­ra. Pod­sta­wy wy­ko­na­nia opi­su­je lekcja o dzia­ła­niu PHP.
Serwer WWW na­słu­chu­je na porcie. Gdy wy­bra­ny port jest zajęty przez inną usługę, start może się nie udać. Naj­pierw od­czy­taj log i ustal kon­flikt. Po uza­sad­nio­nej zmia­nie portu trzeba użyć go także w ad­re­sie prze­glą­dar­ki. Zmiana na 8080 ozna­cza adres z frag­men­tem lo­cal­host:8080, a nie dalsze od­świe­ża­nie adresu bez portu.

Kon­fi­gu­ra­cja ser­we­ra i bazy

Kon­fi­gu­ra­cja Apache okre­śla między innymi port i ka­ta­log do­ku­men­tów. Główny plik zwykle nazywa się httpd.conf; może do­łą­czać ko­lej­ne pliki. Po zmia­nie kon­fi­gu­ra­cji trzeba ją po­praw­nie wczy­tać przez po­now­ne uru­cho­mie­nie usługi. Zna­cze­nie plików opi­su­je do­ku­men­ta­cja Apache. Przed zmianą za­pi­su­je się kopię pliku, a po niej spraw­dza ko­mu­ni­ka­ty startu.
PHP ko­rzy­sta z pliku php.ini. Usta­wie­nia mogą różnić się między uru­cho­mie­niem w kon­so­li i przez serwer WWW, dla­te­go nie wy­star­czy zna­leźć do­wol­ny plik o tej nazwie. Należy spraw­dzić kon­fi­gu­ra­cję rze­czy­wi­ście uży­wa­ne­go pro­ce­su. In­for­ma­cje o ła­do­wa­niu usta­wień podaje do­ku­men­ta­cja PHP. Zmiana nie­uży­wa­ne­go pliku nie wpły­nie na dzia­ła­ją­cą stronę.
Serwer bazy uru­cha­mia się osobno. Na­stęp­nie klient, na przy­kład phpMyAdmin, łączy się z hostem i portem, uży­wa­jąc konta bazy. Można utwo­rzyć te­sto­wą bazę i tabelę, a póź­niej po­now­nie je od­czy­tać. phpMyAdmin nie jest samą bazą, a za­mknię­cie jego karty nie wy­łą­cza ser­we­ra. In­sta­la­cję, kon­fi­gu­ra­cję i wybór SZBD roz­wi­ja lekcja o XAMPP i phpMyAdmin.
Przy pracy apli­ka­cji sprawdź cztery in­for­ma­cje po­łą­cze­nia: host, nazwę bazy, użyt­kow­ni­ka oraz sposób uwie­rzy­tel­nie­nia. Błąd nie­zna­nej bazy wymaga innej po­praw­ki niż od­rzu­co­ne hasło. Nie usuwaj danych i nie przy­zna­waj peł­nych praw wszyst­kim kontom, aby pozbyć się ko­mu­ni­ka­tu. Konto tech­nicz­ne po­win­no mieć prawa po­trzeb­ne do dzia­ła­nia pro­gra­mu.

Na­rzę­dzia prze­glą­dar­ki

Na­rzę­dzia de­we­lo­per­skie prze­glą­dar­ki to panel po­ka­zu­ją­cy do­ku­ment, skryp­ty i żą­da­nia. Ele­ments (ele­men­ty) po­zwa­la obej­rzeć bie­żą­cą struk­tu­rę i za­sto­so­wa­ne style. Con­so­le (kon­so­la) po­ka­zu­je ko­mu­ni­ka­ty i błędy JavaScript. Ne­twork (sieć) przed­sta­wia żą­da­nia, adresy, kody od­po­wie­dzi i czas. So­ur­ces (źródła) służy między innymi do ana­li­zy kodu i za­trzy­my­wa­nia jego wy­ko­na­nia.
Zmiana stylu w panelu Ele­ments zwykle nie za­pi­su­je pliku pro­jek­tu. Od­świe­że­nie strony może ją usunąć. Gdy znaj­dziesz wła­ści­wą po­praw­kę, prze­nieś ją do źródła w edy­to­rze, zapisz i prze­ła­duj. Po­dob­nie wynik po­le­ce­nia w kon­so­li nie staje się au­to­ma­tycz­nie czę­ścią skryp­tu. Na­rzę­dzia prze­glą­dar­ki po­ma­ga­ją badać stan dzia­ła­ją­cej strony.
Za­łóż­my, że nie wczy­tu­je się obraz. Panel Ne­twork pokaże adres i od­po­wiedź 404, jeśli serwer nie zna­lazł pliku. Sprawdź ścież­kę, nazwę i wiel­kość liter. Jeżeli obraz się pobrał, lecz go nie widać, przy­czy­na może leżeć w sty­lach lub ukła­dzie. Taki po­dział po­zwa­la badać kon­kret­ną war­stwę za­miast zmie­niać rów­no­cze­śnie HTML, CSS i serwer.

Na eg­za­mi­nie

Do­pa­suj śro­do­wi­sko do wy­ma­ga­nia: edytor do pi­sa­nia, in­ter­pre­ter do PHP, serwer WWW do ob­słu­gi adresu i SZBD do danych. Po przy­go­to­wa­niu wy­ko­naj małą próbę każ­de­go skład­ni­ka. Dzia­ła­ją­ca strona star­to­wa Apache nie do­wo­dzi jesz­cze, że własny plik ma po­praw­ną ścież­kę albo że po­łą­cze­nie z bazą działa.
Pu­łap­ka: lo­cal­host zawsze odnosi się do urzą­dze­nia uru­cha­mia­ją­ce­go klien­ta. Ten sam adres na te­le­fo­nie i kom­pu­te­rze może pro­wa­dzić do dwóch róż­nych śro­do­wisk.
Przed od­da­niem pracy otwórz wy­ma­ga­ny adres, sprawdź kon­so­lę i zapisz pliki źró­dło­we. Zrzuty rób po rze­czy­wi­stym uru­cho­mie­niu pro­jek­tu. Folder z nie­za­pi­sa­ny­mi zmia­na­mi w edy­to­rze nie jest go­to­wym re­zul­ta­tem.

Ściąga

Na­rzę­dzie lub po­ję­cie
Za­da­nie
edytor
zapis plików źró­dło­wych
IDE
edycja z na­rzę­dzia­mi pro­jek­tu i de­bu­go­wa­niem
Apache
serwer WWW
PHP
wy­ko­na­nie skryp­tu ser­we­ra
MariaDB
serwer bazy danych
phpMyAdmin
klient ad­mi­ni­stra­cyj­ny bazy
lo­cal­host
urzą­dze­nie klien­ta
Con­so­le
ko­mu­ni­ka­ty i błędy JS
Ne­twork
żą­da­nia i od­po­wie­dzi
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: Algorytmy: lista kroków, pseudokod, schemat blokowy; sortowanie, wyszukiwanie, rekurencjanastępna: Testowanie, debugowanie i dokumentacja aplikacjispis działu: Programowanie: pojecia, algorytmy, warsztat

[ INF.03: INNE ARTYKUŁY ]

Hub INF.03Zakres materiałuDokumenty CKEFormularze HTML na egzaminie INF.03Grafika i multimedia na egzaminie INF.03JavaScript na egzaminie INF.03Zapytania SQL na egzaminie INF.03Bazy danych i SQL na egzaminie INF.03pokaż więcej (85)
ZAWODNIK
egzamin zawodowy INF.02 · INF.03 · INF.04
Serwer Discord›
Egzaminy zawodowe IT/Matury/Studia
@yastor
Polityka prywatnościRegulaminKontakt
© 2026 Zawodnik · by Yastor
Arkusze i zasady oceniania pochodzą z CKE. Serwis nie jest powiązany z Centralną Komisją Egzaminacyjną.