feat: add database initialization script and description for shoe store

Co-authored-by: aider (openrouter/qwen/qwen3-coder) <aider@aider.chat>

config/database.php

@@ -0,0 +1,13 @@
+<?php
+$host = 'localhost';
+$dbname = 'shoe_store'; // Replace with your database name
+$username = 'root';     // Replace with your database username
+$password = '';         // Replace with your database password
+
+try {
+    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);
+    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+} catch (PDOException $e) {
+    die("Database connection failed: " . $e->getMessage());
+}
+?>

css/layout.css

@@ -1,68 +1,141 @@
 body {
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family */
     font-family: Helvetica;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/background-color */
     background-color: #EAEAEA;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/margin */
     margin: 0;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/padding */
     padding: 0;
 }
 
 header {
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/position */
     position: relative;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align */
     text-align: center;
 }
 
 header img {
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/width */
     width: 100%;
 }
 
+/* 
+    position: absolute – wyrzuca tekst z normalnego przepływu strony i umieszcza go nad obrazkiem.
+    top: 50%; left: 50% – zaczyna od środka nagłówka.
+    transform: translate(-50%, -50%) – przesuwa tekst o połowę jego szerokości/wysokości, by był idealnie wyśrodkowany.
+    color: white – biały tekst na ciemnym tle obrazka.
+    font-size: 48px – duży tekst. 
+*/
+
 .header-text {
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/position */
     position: absolute;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/top */
     top: 50%;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/left */
     left: 50%;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/transform */
     transform: translate(-50%, -50%);
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/color */
     color: white;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size */
     font-size: 48px;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */
     font-weight: bold;
 }
 
+/* 
+nav (menu) i footer (stopka) mają ciemnoszare tło (#625B5B), biały tekst i padding.
+text-align: center – centruje zawartość. 
+*/
 nav, footer {
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/background-color */
     background-color: #625B5B;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/color */
     color: white;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/padding */
     padding: 20px;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align */
     text-align: center;
 }
 
+/* 
+a w nav to linki:
+font-weight: bold – pogrubienie
+background-color: #EAEAEA – jasny tło przycisków
+color: #625B5B – ciemny kolor tekstu
+padding: 10px – przestrzeń wewnątrz przycisku
+margin: 50px – duża przestrzeń między linkami
+border-radius: 20px – zaokrąglone rogi
+text-decoration: none – usuwa podkreślenie linków 
+*/
 nav a {
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */
     font-weight: bold;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/background-color */
     background-color: #EAEAEA;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/color */
     color: #625B5B;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/padding */
     padding: 10px;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/margin */
     margin: 50px;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius */
     border-radius: 20px;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration */
     text-decoration: none;
 }
 
+/* Efekt po najechaniu myszą:
+Tło staje się ciemne, tekst jasny → efekt "przełączania"
+border: 1px solid – dodaje obramowanie */
+
 nav a:hover {
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/background-color */
     background-color: #625B5B;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/color */
     color: #EAEAEA;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/border */
     border: 1px solid #EAEAEA;
 }
 
+/* margin-left: 40px – wcięcie listy
+list-style-type: circle – kropki jako kółka */
+
 ul {
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/margin */
     margin-left: 40px;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type */
     list-style-type: circle;
 }
 
+/* border: 1px dashed – przerywana linia wokół tabeli
+width: 60% – tabela zajmuje 60% szerokości kontenera
+margin-left: 40px – wcięcie od lewej
+text-align: center – tekst w tabeli jest wyśrodkowany */
+
 table {
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/border */
     border: 1px dashed #625B5B;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/width */
     width: 60%;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/margin */
     margin-left: 40px;
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align */
     text-align: center;
 }
 
+/* Klasa .kontrolki – np. dla przycisków, daje mały margines. */
 .kontrolki {
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/margin */
     margin: 5px;
 }
 
+/* main – główna treść strony ma wewnętrzny odstęp 20px od brzegów. */
+
 main {
+    /* Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/padding */
     padding: 20px;
 }

i1.html

@@ -2,49 +2,60 @@
 <html lang="pl">
 <head>
     <meta charset="UTF-8">
-    <title>Kursy komputerowe</title>
+    <title>Sklep z obuwiem</title>
     <link rel="stylesheet" href="css/layout.css">
 </head>
 <body>
+
     <header>
-        <img src="imgs/baner.png" alt="kursy komputerowe">
+        <img src="imgs/baner.png" alt="sklep z obuwiem">
-        <div class="header-text">hello</div>
+        <div class="header-text">Sklep z obuwiem</div>
     </header>
+
     <nav>
-        <a href="i1.html">Strona główna</a>
+        <a href="i1.php">Strona główna</a>
         <a href="raty.html">Koszt rat</a>
         <a href="https://moje-szkolenia.pl/">Nasz partner</a>
     </nav>
+    
     <main>
-        <h3>Kursy komputerowe - programowanie</h3>
+        <h3>Oferta obuwia</h3>
         <table>
             <tr>
-                <th>Kurs</th>
+                <th>Model</th>
-                <th>Czas trwania</th>
+                <th>Kategoria</th>
                 <th>Cena</th>
+                <th>Opis</th>
             </tr>
-            <tr>
+            <?php
-                <td>React.js</td>
+            require_once 'config/database.php';
-                <td>4 miesiące</td>
+            
-                <td>1500 zł</td>
+            try {
-            </tr>
+                $stmt = $pdo->query("
-            <tr>
+                    SELECT b.model, k.nazwa_kat, b.nazwa, b.cena, b.opis 
-                <td>JavaScript</td>
+                    FROM obuwie_buty b 
-                <td>3 miesiące</td>
+                    JOIN obuwie_kategorie k ON b.id_kat = k.id_kat
-                <td>1200 zł</td>
+                ");
-            </tr>
+                
-            <tr>
+                while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
-                <td>HTML + CSS</td>
+                    echo "<tr>";
-                <td>2 miesiące</td>
+                    echo "<td>" . htmlspecialchars($row['nazwa']) . "</td>";
-                <td>800 zł</td>
+                    echo "<td>" . htmlspecialchars($row['nazwa_kat']) . "</td>";
-            </tr>
+                    echo "<td>" . number_format($row['cena'], 2) . " zł</td>";
+                    echo "<td>" . htmlspecialchars($row['opis']) . "</td>";
+                    echo "</tr>";
+                }
+            } catch (PDOException $e) {
+                echo "<tr><td colspan='4'>Błąd przy ładowaniu danych: " . $e->getMessage() . "</td></tr>";
+            }
+            ?>
         </table>
         <h3>Adres do korespondencji</h3>
         <ul>
             <li>Adres: Katowice, ul. Mariacka 5</li>
             <li>Telefon: 32 888 88 88</li>
         </ul>
-        <a href="mailto:kursy@komputerowe.pl">skontaktuj się</a>
+        <a href="mailto:sklep@obuwie.pl">skontaktuj się</a>
     </main>
     <footer>
         <p>Autor strony: 99010101010</p>

raty.html

@@ -7,11 +7,11 @@
 </head>
 <body>
     <header>
-        <img src="imgs/baner.png" alt="kursy komputerowe">
+        <img src="imgs/baner.png" alt="sklep z obuwiem">
-        <div class="header-text">hello</div>
+        <div class="header-text">Sklep z obuwiem</div>
     </header>
     <nav>
-        <a href="i1.html">Strona główna</a>
+        <a href="i1.php">Strona główna</a>
         <a href="raty.html">Koszt rat</a>
         <a href="https://moje-szkolenia.pl/">Nasz partner</a>
     </nav>

sql/init.sql

@@ -0,0 +1,55 @@
+-- Inicjalizacja bazy danych dla sklepu z obuwiem
+-- Autor: [Twoje Imię/Nazwa Projektu]
+-- Data: [Data]
+
+-- Usuń istniejące tabele (jeśli istnieją) — dla czystego startu
+DROP TABLE IF EXISTS obuwie_produkty;
+DROP TABLE IF EXISTS obuwie_buty;
+DROP TABLE IF EXISTS obuwie_kategorie;
+
+-- Tabela: Kategorie butów
+CREATE TABLE obuwie_kategorie (
+    id_kat INT(3) PRIMARY KEY AUTO_INCREMENT,
+    nazwa_kat VARCHAR(30) NOT NULL UNIQUE
+);
+
+-- Tabela: Buty (modele)
+CREATE TABLE obuwie_buty (
+    model VARCHAR(20) PRIMARY KEY,
+    id_kat INT(3) NOT NULL,
+    nazwa VARCHAR(30) NOT NULL,
+    cena DECIMAL(7,2) NOT NULL,
+    opis TEXT,
+    FOREIGN KEY (id_kat) REFERENCES obuwie_kategorie(id_kat)
+        ON DELETE CASCADE
+        ON UPDATE CASCADE
+);
+
+-- Tabela: Produkty (konkretne egzemplarze butów w różnych rozmiarach i kolorach)
+CREATE TABLE obuwie_produkty (
+    id_prod INT(5) PRIMARY KEY AUTO_INCREMENT,
+    model VARCHAR(20) NOT NULL,
+    rozmiar DECIMAL(3,1) NOT NULL,
+    kolor VARCHAR(20),
+    ilosc INT(4) DEFAULT 0 CHECK (ilosc >= 0),
+    FOREIGN KEY (model) REFERENCES obuwie_buty(model)
+        ON DELETE CASCADE
+        ON UPDATE CASCADE
+);
+
+-- Wstaw przykładowe dane (opcjonalnie, dla testów)
+INSERT INTO obuwie_kategorie (nazwa_kat) VALUES
+('Sportowe'), ('Klasyczne'), ('Zimowe');
+
+INSERT INTO obuwie_buty (model, id_kat, nazwa, cena, opis) VALUES
+('NIKE-AIR-01', 1, 'Nike Air Max', 499.99, 'Buty sportowe z amortyzacją Air'),
+('ADIDAS-CL-02', 1, 'Adidas Cloudfoam', 349.00, 'Wygodne buty do codziennego użytku'),
+('DERBY-BLACK', 2, 'Derby Czarny', 599.50, 'Klasyczne buty męskie');
+
+INSERT INTO obuwie_produkty (model, rozmiar, kolor, ilosc) VALUES
+('NIKE-AIR-01', 42.0, 'Czarny', 15),
+('NIKE-AIR-01', 43.0, 'Biały', 8),
+('ADIDAS-CL-02', 41.0, 'Szary', 20),
+('DERBY-BLACK', 44.0, 'Czarny', 5);
+
+-- Koniec inicjalizacji

sql/opis.txt

@@ -0,0 +1,21 @@
+Baza danych: Sklep z obuwiem
+
+Tabele:
+
+1. obuwie_kategorie
+   - id_kat (PK) — unikalny identyfikator kategorii
+   - nazwa_kat — nazwa kategorii (np. "Sportowe", "Klasyczne")
+
+2. obuwie_buty
+   - model (PK) — kod/model buta
+   - id_kat (FK → obuwie_kategorie) — przypisanie do kategorii
+   - nazwa, cena, opis — szczegóły produktu
+
+3. obuwie_produkty
+   - id_prod (PK) — unikalny ID egzemplarza
+   - model (FK → obuwie_buty) — odniesienie do modelu
+   - rozmiar, kolor, ilosc — konkretne cechy dostępnej pary
+
+Relacje:
+- obuwie_buty → obuwie_kategorie (każdy but należy do jednej kategorii)
+- obuwie_produkty → obuwie_buty (każdy produkt to konkretna para danego modelu)