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:s1
Branches Tags
c2021:dev
c2021:fk1
c2021:tomasz
c2021:rzodkiew
c2021:fk
c2021:sql1
c2021:s1-doc
c2021:s1
..
compare: c2021:dev
Branches Tags
c2021:fk1
c2021:tomasz
c2021:rzodkiew
c2021:fk
c2021:dev
c2021:sql1
c2021:s1-doc
c2021:s1

4 Commits
s1 ... dev

Author SHA1 Message Date
baiobelfer
e30d313d98 add spread data from db to table in main view 2025-09-10 11:35:22 +00:00
baiobelfer
53d00bc5ae get php+k1 2025-09-10 11:07:19 +00:00
baiobelfer
5dc04fcd69 s3 db ok 2025-09-10 11:06:16 +00:00
baiobelfer
2b40308f27 add sql 2025-09-10 10:42:53 +00:00
9 changed files with 186 additions and 77 deletions
Show Stats Expand all files Collapse all files

37
css/layout.css
View File

@ -14,14 +14,6 @@ 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%;
@ -32,10 +24,6 @@ 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;
@ -43,16 +31,6 @@ 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;
@ -63,29 +41,17 @@ 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%;
@ -93,13 +59,10 @@ 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,24 +4,22 @@
<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">Kursy komputerowe</div> <div class="header-text">hello</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> <table id="tab">
<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: 171 KiB

After

Width:  |  Height:  |  Size: 184 KiB

61
js/script.js
View File

@ -1,37 +1,44 @@
document.addEventListener('DOMContentLoaded', function() { 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');
// Ceny kursów
const cenaReact = 1500;
const cenaJavaScript = 1200;
// Obliczanie całkowitej kwoty const fetchData = () => {
let calkowitaKwota = 0; return fetch('./php/get.php')
wybraneKursy.forEach(kurs => { .then(response => {
if (kurs.value === 'React.js') { if (!response.ok) {
calkowitaKwota += cenaReact; throw new Error('Błąd pobierania danych');
} 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);
}); });
};
// Pobieranie liczby rat // Funkcja do renderowania danych w tabeli
const iloscRat = parseInt(document.getElementById('raty').value); const renderTable = (data) => {
// Pobieranie miasta const table = document.getElementById('tab');
const miasto = document.getElementById('miasto').value;
// Sprawdzanie poprawności danych // Usuń wszystkie rzędy po nagłówku (czyli od drugiego)
if (wybraneKursy.length === 0 || isNaN(iloscRat) || iloscRat <= 0) { while (table.rows.length > 1) {
document.getElementById('wynik').textContent = 'Proszę wybrać przynajmniej jeden kurs i podać poprawną liczbę rat.'; table.deleteRow(1);
return;
} }
// 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();
}); });

16
php/get.php Normal file
View File

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

1
sql/k1.sql Normal file
View File

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

51
sql/s1.sql Normal file
View File

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

10
sql/s2.sql Normal file
View File

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

63
sql/s3.sql Normal file
View File

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