Zadanie 110: Nowoczesna Aplikacja Webowa (REST API + Fetch)

Wstęp

W tym zadaniu wejdziesz w świat nowoczesnego tworzenia aplikacji webowych. Zamiast generować gotowy kod HTML w PHP (tzw. Server-Side Rendering), stworzysz REST API, które zwraca czyste dane w formacie JSON. Następnie po stronie przeglądarki użyjesz JavaScript (Fetch API), aby te dane pobrać i wyświetlić. Taki podział (Backend vs Frontend) to standard we współczesnych projektach (React, Vue, Angular).

Cel zadania

Stworzenie prostej aplikacji "Inventory" (Magazyn), gdzie backend w PHP udostępnia listę produktów, a frontend w czystym JS pobiera je i wyświetla w ładnej tabeli.

Wymagania techniczne

Backend: PHP + PDO (baza danych MySQL), zwracanie nagłówków JSON.
Frontend: HTML5, CSS3, JavaScript (ES6+), Fetch API.
Baza danych: Tabela products z kilkoma rekordami.

Kroki do wykonania

1. Przygotowanie Bazy Danych

Stwórz nową bazę danych (np. shop_db) i tabelę products.

Wymagana struktura tabeli products:

id (klucz główny, auto-inkrementacja)
name (tekst, wymagane)
category (tekst)
price (liczba zmiennoprzecinkowa, wymagane)
stock_quantity (liczba całkowita, wymagane)
created_at (znacznik czasu, domyślnie aktualny czas)

-- Uzupełnij poniższe zapytanie SQL:
CREATE TABLE products (
    id INT ... PRIMARY KEY,
    name VARCHAR(100) ...,
    category ...,
    price ...,
    stock_quantity ...,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Dodaj minimum 4 produkty testowe:
INSERT INTO products (name, category, price, stock_quantity) VALUES
('Laptop Dell', 'Elektronika', 3500.00, 5),
... ;

[!IMPORTANT] Commit 1: Utworzenie struktury bazy danych i danych testowych (zapisz SQL w pliku db.sql).

2. Backend: Połączenie z Bazą (PDO)

W folderze api stwórz plik config.php. Użyj biblioteki PDO do nawiązania bezpiecznego połączenia.

<?php
// api/config.php
$host = 'localhost';
$db_name = 'shop_db';
// Uzupełnij dane logowania:
$username = '...';
$password = '...';

try {
    // Utwórz nową instancję PDO:
    $pdo = new PDO("mysql:host=$host;dbname=$db_name;charset=utf8", $username, $password);
    
    // Ustaw tryb raportowania błędów na wyjątki:
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
    die("Connection error: " . $e->getMessage());
}
?>

[!IMPORTANT] Commit 2: Konfiguracja połączenia PDO.

3. Backend: Endpoint API (JSON)

Stwórz plik api/read.php. To Twój pierwszy Endpoint. Jego zadaniem NIE jest wyświetlanie HTML-a, ale zwrócenie danych w formacie, który zrozumie JavaScript (czyli JSON).

<?php
// api/read.php
// 1. Nagłówki HTTP (kluczowe dla REST API):
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

include_once 'config.php';

try {
    // 2. Przygotuj proste zapytanie SQL pobierające wszystko, posortowane malejąco po ID:
    $query = "SELECT * FROM ... ...";
    
    $stmt = $pdo->prepare($query);
    $stmt->execute();

    // 3. Pobierz wyniki jako tablicę asocjacyjną (PDO::FETCH_ASSOC):
    $products = $stmt->fetchAll(...);

    // 4. Zwróć dane w formacie JSON (użyj json_encode):
    echo ...;

} catch (Exception $e) {
    echo json_encode(["message" => "Błąd serwera."]);
}
?>

Sprawdź ten plik w przeglądarce! Powinieneś zobaczyć surowy tekst JSON.

[!IMPORTANT] Commit 3: Utworzenie endpointu API zwracającego JSON.

4. Testowanie API

Skoro nie mamy jeszcze Frontendu (będzie w Zadaniu 110.1), przetestuj swoje API ręcznie. Otwórz przeglądarkę i wejdź na adres: http://localhost/inventory-app/api/read.php (lub odpowiedni dla Twojego serwera).

Powinieneś zobaczyć dane w formacie JSON, np.:

[
    {"id":4, "name":"Monitor 24 cale", "category":"Elektronika", ...},
    {"id":2, "name":"Mysz bezprzewodowa", "category":"Akcesoria", ...}
]

[!TIP] Jeśli widzisz ładnie sformatowany JSON, zainstaluj wtyczkę do przeglądarki (np. JSONView) lub użyj narzędzia Postman.

[!IMPORTANT] Commit 4: Weryfikacja działania API.

Git Help - Jak commitować?

Pamiętaj o regularnym zapisywaniu postępów (commitowaniu).

Konfiguracja (jeśli robisz to pierwszy raz):

git config --global user.name "Twoje Imie"
git config --global user.email "[email protected]"

Robienie Commita: Po wykonaniu każdego punktu z listy wyżej, wpisz w terminalu:
```
git add .
git commit -m "Zadanie 110: Punkt X wykonany"
```

Backend REST API (JSON)