Jak HTML, CSS, PHP, SQL i JS łączą się w jedną stronę

Na egzaminie piszesz w czterech językach naraz: HTML, CSS, SQL i PHP (albo JavaScript). Początkujący najczęściej gubią się nie w samych językach, tylko w tym, jak one się ze sobą łączą. Dlaczego CSS „nie działa”? Skąd PHP wie, jaka jest baza? Kto wywołuje funkcję JavaScript?

W tej lekcji zbudujemy jedną malutką stronę, w której jest wszystko. Przy każdym połączeniu zobaczysz, co je tworzy i co je psuje. Nie musisz jeszcze rozumieć każdego znacznika – to przyjdzie w kolejnych lekcjach. Chodzi o mapę całości.

Cztery pliki, cztery role

Strona „Lista gier” składa się z czterech plików w jednym folderze C:\xampp\htdocs\gry\:

gry\
 ├─ index.php     ← HTML (szkielet) + PHP (pobiera dane z bazy)
 ├─ styl.css      ← wygląd
 ├─ logo.png      ← obraz
 └─ (baza danych „sklep” siedzi w MariaDB, nie w folderze!)

Połączenie 1: HTML → CSS

<link rel="stylesheet" href="styl.css">

To jedno zdanie w <head> łączy dwa pliki. Przeglądarka czyta HTML, trafia na tę linijkę i osobno pobiera plik styl.css.

• rel="stylesheet" – „to, co podaję, jest arkuszem stylów” (a nie np. ikoną),
• href="styl.css" – gdzie jest plik. Sama nazwa = „leży w tym samym folderze co strona”.

Co psuje to połączenie:

Jak CSS „trafia” w elementy? Przez selektory. W HTML jest <h1>, w CSS piszesz h1 { color: red; } – przeglądarka dopasowuje jedno do drugiego po nazwie. To samo z klasą (class="cena" ↔ .cena) i z id (id="menu" ↔ #menu). Jeśli nazwa w HTML i w CSS różni się choćby jedną literą – styl się nie zastosuje i nie będzie żadnego komunikatu o błędzie.

Połączenie 2: PHP → baza danych

$polaczenie = mysqli_connect('localhost', 'root', '', 'sklep');

PHP nie wie sam z siebie, gdzie jest baza. Mówisz mu to czterema informacjami:

Wynik (połączenie) zapisujemy do zmiennej $polaczenie, bo każde zapytanie musi wiedzieć, którym połączeniem ma pójść.

Co psuje to połączenie: wyłączony MySQL w XAMPP, literówka w nazwie bazy (sklepp), baza utworzona pod inną nazwą niż w arkuszu. Komunikat: „mysqli_connect(): Unknown database” albo „No connection could be made”.

Połączenie 3: zapytanie SQL → wiersze w PHP

$wynik = mysqli_query($polaczenie, "SELECT nazwa, cena FROM gry;");
while ($wiersz = mysqli_fetch_array($wynik)) {
    echo "<li>{$wiersz['nazwa']} – {$wiersz['cena']} zł</li>";
}

Tu łączą się trzy języki w trzech linijkach:

1. SQL w cudzysłowie – PHP go nie rozumie, tylko przekazuje do bazy jak list w kopercie.
2. Baza odsyła wynik – coś jak tabelkę. PHP wyciąga z niej po jednym wierszu (mysqli_fetch_array), dopóki są.
3. HTML w echo – PHP „dokleja” go do strony. $wiersz['nazwa'] to wartość kolumny nazwa – nazwa w nawiasie musi być identyczna z nazwą kolumny w SELECT.

Połączenie 4: HTML → JavaScript

<button onclick="policz()">Policz</button>
<p id="wynik"></p>

<script>
function policz() {
    document.getElementById("wynik").innerHTML = 2 + 2;
}
</script>

• onclick="policz()" – HTML wywołuje JavaScript: „po kliknięciu uruchom funkcję o nazwie policz”.
• getElementById("wynik") – JavaScript sięga do HTML: „znajdź element z id="wynik"”.
• .innerHTML = … – JS zmienia stronę już po jej wyświetleniu, bez przeładowania.

Co psuje to połączenie: różna wielkość liter (Policz() vs policz), id w HTML inne niż w getElementById, skrypt umieszczony nad elementem, którego szuka (przeglądarka czyta od góry – elementu jeszcze nie ma). Błędy pokazuje F12 → Console.

Cała strona razem

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Lista gier</title>
    <link rel="stylesheet" href="styl.css">              <!-- połączenie 1 -->
</head>
<body>
    <img src="logo.png" alt="Logo sklepu">              <!-- obraz z folderu -->
    <h1>Nasze gry</h1>
    <ul>
<?php
$polaczenie = mysqli_connect('localhost', 'root', '', 'sklep');      // połączenie 2
$wynik = mysqli_query($polaczenie, "SELECT nazwa, cena FROM gry;");  // połączenie 3
while ($wiersz = mysqli_fetch_array($wynik)) {
    echo "<li>{$wiersz['nazwa']} – {$wiersz['cena']} zł</li>";
}
mysqli_close($polaczenie);
?>
    </ul>
    <button onclick="policz()">Ile to 2 + 2?</button>    <!-- połączenie 4 -->
    <p id="wynik"></p>
    <script>
        function policz() {
            document.getElementById("wynik").innerHTML = 2 + 2;
        }
    </script>
</body>
</html>

Kolejność wydarzeń – od kliknięcia do ekranu

1. Wpisujesz http://localhost/gry/index.php
2. Apache znajduje C:\xampp\htdocs\gry\index.php
3. Bo plik kończy się na .php → oddaje go PHP
4. PHP idzie od góry: HTML przepisuje bez zmian,
   kod <?php ... ?> wykonuje:
     • łączy się z MariaDB
     • wysyła SELECT, dostaje 3 gry
     • wypisuje 3 × <li>
5. Do przeglądarki wraca czysty HTML (bez ani jednej linijki PHP)
6. Przeglądarka czyta HTML, widzi <link> → pobiera styl.css,
   widzi <img> → pobiera logo.png
7. Rysuje stronę z kolorami
8. Klikasz przycisk → JavaScript liczy 2 + 2 i wpisuje 4
   (serwer już w tym nie uczestniczy!)

Diagnoza: co nie działa → gdzie szukać

Sprawdź się

Zaznacz odpowiedzi i kliknij „Sprawdź wynik”. Przy każdej błędnej odpowiedzi zobaczysz, dlaczego jest zła i która jest poprawna.