Compare commits

..

12 Commits
dev ... s1-doc

Author SHA1 Message Date
baiobelfer
459b13f5d8 feat: add database initialization script and description for shoe store
Co-authored-by: aider (openrouter/qwen/qwen3-coder) <aider@aider.chat>
2025-09-08 15:24:31 +02:00
baiobelfer
2e8961f0cb feat: add database integration and dynamic product listing
Co-authored-by: aider (openrouter/deepseek/deepseek-chat-v3.1) <aider@aider.chat>
2025-09-08 15:23:40 +02:00
baiobelfer
3ea70349df docs: add MDN documentation links to CSS properties
Co-authored-by: aider (openrouter/deepseek/deepseek-chat-v3.1) <aider@aider.chat>
2025-09-07 00:47:54 +02:00
baiobelfer
86863e1fd9 main padding 2025-09-04 13:12:02 +02:00
baiobelfer
db80169e66 wciecie listy 2025-09-04 13:09:35 +02:00
baiobelfer
d850ff8029 u 2025-09-04 13:08:20 +02:00
baiobelfer
e717d96683 hover 2025-09-04 13:07:01 +02:00
baiobelfer
10a2452ad3 nav a 2025-09-04 13:06:05 +02:00
baiobelfer
a9e4b4bafb add comments 2025-09-04 13:00:25 +02:00
baiobelfer
63060a9db8 pozycjonowaanie textu na png@header 2025-09-04 12:54:12 +02:00
baiobelfer
e26fa89233 replace png 2025-09-04 12:41:35 +02:00
baiobelfer
63c9e396b9 style body 2025-09-04 12:25:24 +02:00
13 changed files with 234 additions and 211 deletions

13
config/database.php Normal file
View File

@ -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());
}
?>

View File

@ -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;
}

61
i1.html
View File

@ -2,51 +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">
<script src="js/script.js" defer> </script>
</head>
<body>
<header>
<img src="imgs/baner.png" alt="kursy komputerowe">
<div class="header-text">hello</div>
<img src="imgs/baner.png" alt="sklep z obuwiem">
<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>
<table id="tab">
<h3>Oferta obuwia</h3>
<table>
<tr>
<th>Kurs</th>
<th>Czas trwania</th>
<th>Model</th>
<th>Kategoria</th>
<th>Cena</th>
<th>Opis</th>
</tr>
<tr>
<td>React.js</td>
<td>4 miesiące</td>
<td>1500 zł</td>
</tr>
<tr>
<td>JavaScript</td>
<td>3 miesiące</td>
<td>1200 zł</td>
</tr>
<tr>
<td>HTML + CSS</td>
<td>2 miesiące</td>
<td>800 zł</td>
</tr>
<?php
require_once 'config/database.php';
try {
$stmt = $pdo->query("
SELECT b.model, k.nazwa_kat, b.nazwa, b.cena, b.opis
FROM obuwie_buty b
JOIN obuwie_kategorie k ON b.id_kat = k.id_kat
");
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo "<tr>";
echo "<td>" . htmlspecialchars($row['nazwa']) . "</td>";
echo "<td>" . htmlspecialchars($row['nazwa_kat']) . "</td>";
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>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 184 KiB

After

Width:  |  Height:  |  Size: 171 KiB

View File

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

View File

@ -1,16 +0,0 @@
<?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 );
?>

View File

@ -7,11 +7,11 @@
</head>
<body>
<header>
<img src="imgs/baner.png" alt="kursy komputerowe">
<div class="header-text">hello</div>
<img src="imgs/baner.png" alt="sklep z obuwiem">
<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>

55
sql/init.sql Normal file
View File

@ -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

View File

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

21
sql/opis.txt Normal file
View File

@ -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)

View File

@ -1,51 +0,0 @@
-- 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');

View File

@ -1,10 +0,0 @@
-- 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;

View File

@ -1,63 +0,0 @@
-- 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;