c2021/INF.03-01-25.01-SG
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: c2021:dev
Branches Tags
c2021:dev
c2021:fk1
c2021:tomasz
c2021:rzodkiew
c2021:fk
c2021:sql1
c2021:s1-doc
c2021:s1
..
compare: c2021:s1
Branches Tags
c2021:fk1
c2021:tomasz
c2021:rzodkiew
c2021:fk
c2021:dev
c2021:sql1
c2021:s1-doc
c2021:s1

9 Commits
dev ... s1

Author SHA1 Message Date
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
9 changed files with 77 additions and 186 deletions
Show Stats Expand all files Collapse all files

37
css/layout.css
View File

@ -14,6 +14,14 @@ header img {
width: 100%; 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 { .header-text {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -24,6 +32,10 @@ header img {
font-weight: bold; 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 { nav, footer {
background-color: #625B5B; background-color: #625B5B;
color: white; color: white;
@ -31,6 +43,16 @@ nav, footer {
text-align: center; 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 { nav a {
font-weight: bold; font-weight: bold;
background-color: #EAEAEA; background-color: #EAEAEA;
@ -41,17 +63,29 @@ nav a {
text-decoration: none; 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 { nav a:hover {
background-color: #625B5B; background-color: #625B5B;
color: #EAEAEA; color: #EAEAEA;
border: 1px solid #EAEAEA; border: 1px solid #EAEAEA;
} }
/* margin-left: 40px – wcięcie listy
list-style-type: circle – kropki jako kółka */
ul { ul {
margin-left: 40px; margin-left: 40px;
list-style-type: circle; 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 { table {
border: 1px dashed #625B5B; border: 1px dashed #625B5B;
width: 60%; width: 60%;
@ -59,10 +93,13 @@ table {
text-align: center; text-align: center;
} }
/* Klasa .kontrolki – np. dla przycisków, daje mały margines. */
.kontrolki { .kontrolki {
margin: 5px; margin: 5px;
} }
/* main – główna treść strony ma wewnętrzny odstęp 20px od brzegów. */
main { main {
padding: 20px; padding: 20px;
} }

10
i1.html
View File

@ -4,22 +4,24 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Kursy komputerowe</title> <title>Kursy komputerowe</title>
<link rel="stylesheet" href="css/layout.css"> <link rel="stylesheet" href="css/layout.css">
<script src="js/script.js" defer> </script>
</head> </head>
<body> <body>
<header> <header>
<img src="imgs/baner.png" alt="kursy komputerowe"> <img src="imgs/baner.png" alt="kursy komputerowe">
<div class="header-text">hello</div> <div class="header-text">Kursy komputerowe</div>
</header> </header>
<nav> <nav>
<a href="i1.html">Strona główna</a> <a href="i1.html">Strona główna</a>
<a href="raty.html">Koszt rat</a> <a href="raty.html">Koszt rat</a>
<a href="https://moje-szkolenia.pl/">Nasz partner</a> <a href="https://moje-szkolenia.pl/">Nasz partner</a>
</nav> </nav>
<main> <main>
<h3>Kursy komputerowe - programowanie</h3> <h3>Kursy komputerowe - programowanie</h3>
<table id="tab"> <table>
<tr> <tr>
<th>Kurs</th> <th>Kurs</th>
<th>Czas trwania</th> <th>Czas trwania</th>

BIN
imgs/baner.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 184 KiB

After

Width:  |  Height:  |  Size: 171 KiB

75
js/script.js
View File

@ -1,44 +1,37 @@
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
console.log("ok"); document.getElementById('oblicz').addEventListener('click', function() {
// Pobieranie wybranych kursów
const fetchData = () => { const wybraneKursy = document.querySelectorAll('input[name="kurs"]:checked');
return fetch('./php/get.php') // Ceny kursów
.then(response => { const cenaReact = 1500;
if (!response.ok) { const cenaJavaScript = 1200;
throw new Error('Błąd pobierania danych');
} // Obliczanie całkowitej kwoty
return response.json(); let calkowitaKwota = 0;
}) wybraneKursy.forEach(kurs => {
.then(data => { if (kurs.value === 'React.js') {
console.log("Dane załadowane:", data); calkowitaKwota += cenaReact;
renderTable(data); // Wywołaj funkcję renderującą tabelę } else if (kurs.value === 'JavaScript') {
}) calkowitaKwota += cenaJavaScript;
.catch(error => { }
console.error("Błąd:", error);
});
};
// Funkcja do renderowania danych w tabeli
const renderTable = (data) => {
const table = document.getElementById('tab');
// Usuń wszystkie rzędy po nagłówku (czyli od drugiego)
while (table.rows.length > 1) {
table.deleteRow(1);
}
// 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);
}); });
};
// Pobieranie liczby rat
// Uruchom pobieranie danych const iloscRat = parseInt(document.getElementById('raty').value);
fetchData(); // Pobieranie miasta
const miasto = document.getElementById('miasto').value;
// 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;
}
// Obliczanie miesięcznej raty
const rata = calkowitaKwota / iloscRat;
// 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)} zł`;
});
}); });

16
php/get.php
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 );
?>

1
sql/k1.sql
View File

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

51
sql/s1.sql
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');

10
sql/s2.sql
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;

63
sql/s3.sql
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;