Zadanie 110.1: Frontend i Prezentacja Danych

Wstęp

Masz już działające API (z Zadania 110), które zwraca listę produktów w formacie JSON. Teraz czas na Frontend. Stworzysz interfejs użytkownika, który pobierze te dane i wyświetli je w estetycznej tabeli. Użyjemy do tego czystego JavaScriptu (Vanilla JS) i nowoczesnego Fetch API.

Cel zadania

Połączenie backendu z frontendem. Wyświetlenie danych z bazy SQL na stronie WWW bez przeładowywania witryny.

Wymagania techniczne

Plik index.html ze strukturą tabeli.
Plik style.css z nowoczesnym wyglądem.
Plik main.js pobierający dane (fetch) i generujący HTML.

Kroki do wykonania

1. Struktura HTML

W katalogu głównym projektu (obok folderu api) stwórz plik index.html. Przygotuj kontener na tabelę.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Magazyn Produktów</title>
    <!-- Podepnij arkusz stylów -->
    <link rel="stylesheet" href="...">
</head>
<body>
    <div class="container">
        <h1>Stan Magazynowy</h1>
        <!-- Uzupełnij nagłówki tabeli -->
        <table id="products-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Produkt</th>
                    <th>...</th>
                    <th>...</th>
                    <th>...</th>
                </tr>
            </thead>
            <!-- Puste body - tutaj JS wstrzyknie dane -->
            <tbody></tbody> 
        </table>
    </div>

    <!-- Podepnij skrypt JS na końcu body -->
    <script src="..."></script>
</body>
</html>

[!IMPORTANT] Commit 1: Utworzenie szkieletu HTML.

2. Stylowanie CSS

Stwórz plik assets/style.css (lub w głównym katalogu). Nadaj tabeli profesjonalny wygląd.

/* style.css */
body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    background-color: #f4f4f9;
    /* ... wyśrodkowanie ... */
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
}

th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #009879;
    color: #ffffff;
}

/* Dodaj efekt hover na wiersze: */
tr:hover {
    background-color: ...;
}

[!IMPORTANT] Commit 2: Podstawowe style CSS.

3. JavaScript: Pobieranie danych (Fetch)

Stwórz plik assets/main.js. Jego zadaniem jest pobranie danych z api/read.php.

// main.js

// 1. Nasłuchuj na załadowanie DOM:
document.addEventListener('DOMContentLoaded', () => {
    fetchProducts();
});

// 2. Funkcja asynchroniczna do pobierania danych:
async function fetchProducts() {
    try {
        // Uzupełnij URL do swojego API:
        const response = await fetch('...'); 
        
        if (!response.ok) throw new Error("Błąd sieci");

        // Rozpakuj JSON:
        const data = await ...;
        
        // Przekaż dane do funkcji renderującej:
        renderTable(data);
        
    } catch (error) {
        console.error('Błąd:', error);
    }
}

[!IMPORTANT] Commit 3: Implementacja funkcji fetch.

4. JavaScript: Renderowanie Tabeli

Uzupełnij funkcję renderTable, która dynamicznie stworzy wiersze HTML dla każdego produktu.

function renderTable(products) {
    // Znajdź element <tbody> w drzewie DOM:
    const tbody = document.querySelector('...');
    
    // Wyczyść obecną zawartość:
    tbody.innerHTML = '';

    // Iteruj po produktach (forEach):
    products.forEach(product => {
        // Stwórz nowy wiersz <tr>:
        const row = document.createElement('tr');
        
        // Wypełnij wiersz komórkami (użyj Template Strings ``):
        row.innerHTML = `
            <td>${product.id}</td>
            <td>${product.name}</td>
            <td>...</td>
            <td>...</td>
            <td>${product.stock_quantity} szt.</td>
        `;
        
        // Dodaj wiersz do tabeli:
        tbody.appendChild(row);
    });
}

[!IMPORTANT] Commit 4: Implementacja renderowania DOM.

Frontend: Fetch API i DOM