add spread data from db to table in main view

config/database.php

@@ -1,13 +0,0 @@
-<?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,141 +1,68 @@
 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,60 +2,51 @@
 <html lang="pl">
 <head>
     <meta charset="UTF-8">
-    <title>Sklep z obuwiem</title>
+    <title>Kursy komputerowe</title>
     <link rel="stylesheet" href="css/layout.css">
+    <script src="js/script.js" defer> </script>
+
 </head>
 <body>
-
     <header>
-        <img src="imgs/baner.png" alt="sklep z obuwiem">
+        <img src="imgs/baner.png" alt="kursy komputerowe">
-        <div class="header-text">Sklep z obuwiem</div>
+        <div class="header-text">hello</div>
     </header>
-
     <nav>
-        <a href="i1.php">Strona główna</a>
+        <a href="i1.html">Strona główna</a>
         <a href="raty.html">Koszt rat</a>
         <a href="https://moje-szkolenia.pl/">Nasz partner</a>
     </nav>
-    
     <main>
-        <h3>Oferta obuwia</h3>
+        <h3>Kursy komputerowe - programowanie</h3>
-        <table>
+                <table id="tab">
             <tr>
-                <th>Model</th>
+                <th>Kurs</th>
-                <th>Kategoria</th>
+                <th>Czas trwania</th>
                 <th>Cena</th>
-                <th>Opis</th>
             </tr>
-            <?php
+            <tr>
-            require_once 'config/database.php';
+                <td>React.js</td>
-            
+                <td>4 miesiące</td>
-            try {
+                <td>1500 zł</td>
-                $stmt = $pdo->query("
+            </tr>
-                    SELECT b.model, k.nazwa_kat, b.nazwa, b.cena, b.opis 
+            <tr>
-                    FROM obuwie_buty b 
+                <td>JavaScript</td>
-                    JOIN obuwie_kategorie k ON b.id_kat = k.id_kat
+                <td>3 miesiące</td>
-                ");
+                <td>1200 zł</td>
-                
+            </tr>
-                while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
+            <tr>
-                    echo "<tr>";
+                <td>HTML + CSS</td>
-                    echo "<td>" . htmlspecialchars($row['nazwa']) . "</td>";
+                <td>2 miesiące</td>
-                    echo "<td>" . htmlspecialchars($row['nazwa_kat']) . "</td>";
+                <td>800 zł</td>
-                    echo "<td>" . number_format($row['cena'], 2) . " zł</td>";
+            </tr>
-                    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:sklep@obuwie.pl">skontaktuj się</a>
+        <a href="mailto:kursy@komputerowe.pl">skontaktuj się</a>
     </main>
     <footer>
         <p>Autor strony: 99010101010</p>

js/script.js

@@ -1,37 +1,44 @@
 document.addEventListener('DOMContentLoaded', function() {
-    document.getElementById('oblicz').addEventListener('click', function() {
+    console.log("ok");
-        // Pobieranie wybranych kursów
+
-        const wybraneKursy = document.querySelectorAll('input[name="kurs"]:checked');
+    const fetchData = () => {
-        // Ceny kursów
+        return fetch('./php/get.php')
-        const cenaReact = 1500;
+            .then(response => {
-        const cenaJavaScript = 1200;
+                if (!response.ok) {
-        
+                    throw new Error('Błąd pobierania danych');
-        // Obliczanie całkowitej kwoty
+                }
-        let calkowitaKwota = 0;
+                return response.json();
-        wybraneKursy.forEach(kurs => {
+            })
-            if (kurs.value === 'React.js') {
+            .then(data => {
-                calkowitaKwota += cenaReact;
+                console.log("Dane załadowane:", data);
-            } else if (kurs.value === 'JavaScript') {
+                renderTable(data); // Wywołaj funkcję renderującą tabelę
-                calkowitaKwota += cenaJavaScript;
+            })
-            }
+            .catch(error => {
-        });
+                console.error("Błąd:", error);
-        
+            });
-        // Pobieranie liczby rat
+    };
-        const iloscRat = parseInt(document.getElementById('raty').value);
+
-        // Pobieranie miasta
+    // Funkcja do renderowania danych w tabeli
-        const miasto = document.getElementById('miasto').value;
+    const renderTable = (data) => {
-        
+        const table = document.getElementById('tab');
-        // Sprawdzanie poprawności danych
+
-        if (wybraneKursy.length === 0 || isNaN(iloscRat) || iloscRat <= 0) {
+        // Usuń wszystkie rzędy po nagłówku (czyli od drugiego)
-            document.getElementById('wynik').textContent = 'Proszę wybrać przynajmniej jeden kurs i podać poprawną liczbę rat.';
+        while (table.rows.length > 1) {
-            return;
+            table.deleteRow(1);
         }
-        
+
-        // Obliczanie miesięcznej raty
+        // Dodaj nowe wiersze dla każdego kursu
-        const rata = calkowitaKwota / iloscRat;
+        data.forEach(row => {
-        
+            const tr = document.createElement('tr');
-        // Wyświetlanie wyniku
+            tr.innerHTML = `
-        document.getElementById('wynik').textContent = 
+                <td>${row.kurs}</td>
-            `Kurs odbędzie się w ${miasto}. Koszt całkowity: ${calkowitaKwota} zł. Płacisz ${iloscRat} rat po ${rata.toFixed(2)} zł`;
+                <td>${row.czas_trwania}</td>
-    });
+                <td>${row.cena}</td>
+            `;
+            table.appendChild(tr);
+        });
+    };
+
+    // Uruchom pobieranie danych
+    fetchData();
 });

php/get.php

@@ -0,0 +1,16 @@
+<?php
+$polaczenie = mysqli_connect("172.18.0.2", "root", "secret", "szkolenia");
+
+$kwerenda = mysqli_query($polaczenie, "SELECT REPLACE(k.nazwa, 'Kurs ', '') AS kurs, k.czas_trwania AS czas_trwania, CONCAT(k.cena, ' zł') AS cena FROM kursy k ORDER BY k.id");
+
+$json = array();
+
+while ($row = mysqli_fetch_assoc($kwerenda)) {
+    $json[] = $row;
+}
+
+mysqli_close($polaczenie);
+
+echo json_encode($json );
+?>
+

raty.html

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

sql/init.sql

@@ -1,55 +0,0 @@
--- 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/k1.sql

@@ -0,0 +1 @@
+SELECT REPLACE(k.nazwa, 'Kurs ', '') AS kurs, k.czas_trwania AS czas_trwania, CONCAT(k.cena, ' zł') AS cena FROM kursy k ORDER BY k.id

sql/opis.txt

@@ -1,21 +0,0 @@
-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)

sql/s1.sql

@@ -0,0 +1,51 @@
+-- Utwórz bazę danych dla firmy szkoleniowej
+CREATE DATABASE IF NOT EXISTS szkolenia CHARACTER SET utf8 COLLATE utf8_unicode_ci;
+
+-- Wybierz bazę danych do pracy
+USE szkolenia;
+
+-- Tabela: kategorie_kursow
+-- Przechowuje informacje o poziomach kursów (np. podstawowy, średni, zaawansowany)
+CREATE TABLE IF NOT EXISTS kategorie_kursow (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    nazwa VARCHAR(50) NOT NULL UNIQUE,
+    opis TEXT
+);
+
+-- Wstaw dane do tabeli kategorii
+INSERT INTO kategorie_kursow (nazwa, opis) VALUES
+('podstawowy', 'Kurs przeznaczony dla początkujących'),
+('średni', 'Kurs dla osób mających podstawową wiedzę'),
+('zaawansowany', 'Kurs dla osób posiadających zaawansowaną wiedzę');
+
+-- Tabela: kursy
+-- Przechowuje informacje o konkretnych kursach
+CREATE TABLE IF NOT EXISTS kursy (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    nazwa VARCHAR(255) NOT NULL,
+    cena DECIMAL(10, 2) NOT NULL,
+    id_kategorii INT,
+    FOREIGN KEY (id_kategorii) REFERENCES kategorie_kursow(id),
+    UNIQUE KEY unique_nazwa (nazwa)
+);
+
+-- Wstaw dane do tabeli kursy (zgodnie z ilustracją 4)
+INSERT INTO kursy (nazwa, cena, id_kategorii) VALUES
+('Kurs HTML i CSS', 500.00, 1), -- podstawowy
+('Kurs JavaScript', 700.00, 2), -- średni
+('Kurs React.js', 900.00, 3); -- zaawansowany
+
+-- Tabela: miasta
+-- Przechowuje listę miast, w których odbywają się kursy
+CREATE TABLE IF NOT EXISTS miasta (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    nazwa VARCHAR(100) NOT NULL UNIQUE
+);
+
+-- Wstaw dane do tabeli miasta
+INSERT INTO miasta (nazwa) VALUES
+('Warszawa'),
+('Katowice'),
+('Gdańsk');
+
+

sql/s2.sql

@@ -0,0 +1,10 @@
+-- Zapytanie 3: Tworzenie użytkownika 'Marek'
+CREATE USER IF NOT EXISTS 'Marek'@'localhost' IDENTIFIED BY 'M@reK';
+
+-- Zapytanie 4: Nadanie uprawnień
+-- Użytkownik Marek ma prawo do przeglądania i aktualizowania danych tylko w tabeli `kursy`
+GRANT SELECT, UPDATE ON szkolenia.kursy TO 'Marek'@'localhost';
+
+-- Odświeżenie uprawnień
+FLUSH PRIVILEGES;
+

sql/s3.sql

@@ -0,0 +1,63 @@
+-- Utwórz bazę danych dla firmy szkoleniowej
+CREATE DATABASE IF NOT EXISTS szkolenia CHARACTER SET utf8 COLLATE utf8_unicode_ci;
+
+-- Wybierz bazę danych do pracy
+USE szkolenia;
+
+-- Tabela: kategorie_kursow
+CREATE TABLE IF NOT EXISTS kategorie_kursow (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    nazwa VARCHAR(50) NOT NULL UNIQUE,
+    opis TEXT
+);
+
+-- Wstaw dane do tabeli kategorii
+INSERT INTO kategorie_kursow (nazwa, opis) VALUES
+('podstawowy', 'Kurs przeznaczony dla początkujących'),
+('średni', 'Kurs dla osób mających podstawową wiedzę'),
+('zaawansowany', 'Kurs dla osób posiadających zaawansowaną wiedzę');
+
+-- Tabela: kursy (z dodanym czasem trwania)
+CREATE TABLE IF NOT EXISTS kursy (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    nazwa VARCHAR(255) NOT NULL,
+    cena DECIMAL(10, 2) NOT NULL,
+    czas_trwania VARCHAR(50) NOT NULL DEFAULT '2 miesiące',
+    id_kategorii INT,
+    FOREIGN KEY (id_kategorii) REFERENCES kategorie_kursow(id),
+    UNIQUE KEY unique_nazwa (nazwa)
+);
+
+-- Wstaw dane do tabeli kursy z czasem trwania
+INSERT INTO kursy (nazwa, cena, czas_trwania, id_kategorii) VALUES
+('Kurs HTML i CSS', 500.00, '2 miesiące', 1),
+('Kurs JavaScript', 700.00, '3 miesiące', 2),
+('Kurs React.js', 900.00, '4 miesiące', 3);
+
+-- Tabela: miasta
+CREATE TABLE IF NOT EXISTS miasta (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    nazwa VARCHAR(100) NOT NULL UNIQUE
+);
+
+-- Wstaw dane do tabeli miasta
+INSERT INTO miasta (nazwa) VALUES
+('Warszawa'),
+('Katowice'),
+('Gdańsk');
+
+-- Tabela: kursy_miasta (relacja wiele-do-wielu: kurs może być w wielu miastach)
+CREATE TABLE IF NOT EXISTS kursy_miasta (
+    id_kursu INT NOT NULL,
+    id_miasta INT NOT NULL,
+    PRIMARY KEY (id_kursu, id_miasta),
+    FOREIGN KEY (id_kursu) REFERENCES kursy(id) ON DELETE CASCADE,
+    FOREIGN KEY (id_miasta) REFERENCES miasta(id) ON DELETE CASCADE
+);
+
+-- Przykładowe przypisanie kursów do miast (każdy kurs w każdym mieście)
+INSERT INTO kursy_miasta (id_kursu, id_miasta)
+SELECT k.id, m.id
+FROM kursy k
+CROSS JOIN miasta m;
+