Rozwiązanie buduje stronę firmy szkoleniowej: baza firma z trenerami, szkoleniami, słuchaczami i zapisami oraz cztery zapytania - sortowanie, złączenie tabel, grupowanie z liczeniem i zmiana nazwy kolumny ALTER TABLE ... CHANGE, potem baner z gradientem i fragmentem kodu w perspektywie, dwie strony - statyczna index.html i szkolenia.php, która wypisuje szkolenia z bazy i jednocześnie zapisuje je do pliku tekstowego harmonogram.txt - i style w style.css.
Kroki idą zdanie po zdaniu za treścią arkusza - przy każdym jest polecenie z arkusza, a kod pokazuje dokładnie te linie, które je spełniają. Skrypt jest najpierw pisany najprościej (mysqli_fetch_row, fopen i fwrite), a na końcu zostaje przerobiony na wersję z prawdziwych projektów: sprawdzenie otwarcia pliku, htmlspecialchars i zapis całego pliku jednym poleceniem.
To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, PDO)” jest drugi sposób rozwiązania tego samego arkusza: układ na siatce CSS i PHP na PDO, w którym skrypt najpierw pobiera dane, a potem jednym poleceniem zapisuje plik i wypisuje akapity - obie wersje są zgodne z kluczem.
Baza i obraz z kodem pochodzą z prawdziwego archiwum pliki8 (załącznik do arkusza, hasło w treści zadania). Wyniki zapytań i zrzuty są policzone na MariaDB 10.4 - tej samej, która jest w XAMPP. Podgląd strony PHP to wynik prawdziwego uruchomienia kodu z danego kroku w PHP 8.2, a plik harmonogram.txt pokazany w krokach to dokładnie to, co zapisał skrypt.
Jak liczą się punkty. Klucz ma 37 kryteriów (R.1.1 - R.5.8), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 28 punktów - można stracić 9 kryteriów i nadal zdać. Przy każdym kroku jest napisane, które kryteria spełnia; egzaminator ocenia spełnienie kryteriów z klucza, nie zgodność z tym kodem.
Kroki 1-7 · po tym etapie masz 6 z 37 kryteriów (pkt)
Utwórz bazę danych o nazwie firma, z zestawem polskich znaków (np. utf8_unicode_ci).
Rozpakuj pliki8.7z z pulpitu (hasło SzkoL3Nia%) do folderu z numerem zdającego: firma.sql i obraz kod.jpg. W phpMyAdmin: Nowa, nazwa firma, porównywanie z polskimi znakami, np. utf8_unicode_ci.
Do utworzonej bazy zaimportuj tabele z pliku firma.sql z rozpakowanego archiwum.
Wybierz bazę firma, Import → firma.sql → Wykonaj. Cztery tabele z ilustracji 1 w relacjach jeden do wielu: trenerzy (6) → szkolenia (18, pole Id_trenera) → zapisy (pole Id_szkolenia) ← sluchacze (pole Id_klienta). Nazwy kolumn zaczynają się wielką literą (Data, Temat, Imie) - w zapytaniach piszesz je tak samo.
Wykonaj zrzut ekranu po imporcie. Zapisz zrzut w formacie JPEG pod nazwą import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel.
Print Screen, wklejasz do edytora grafiki i zapisujesz jako import.jpg - import w JPEG, zrzuty zapytań w PNG.
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: wybierające jedynie daty i tematy szkoleń posortowane rosnąco według daty szkolenia.
SELECT Data, Temat FROM szkolenia - dwie kolumny,ORDER BY Data - rosnąco, czyli od najwcześniejszej daty; ASC jest domyślne.Wynik: 18 wierszy, pierwszy 2021-09-20 „Podstawy języka C++” - jak w kluczu. phpMyAdmin pokazuje nad tabelą „Pokazano wiersze 0 - 17 (18 łącznie)” i ten napis klucz uznaje, nawet gdy nie wszystkie wiersze mieszczą się na ekranie. Zapytanie do kwerendy.txt, zrzut kw1.png. To samo zapytanie wyśle skrypt PHP.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT Data, Temat FROM szkolenia ORDER BY Data;
Zapytanie 2: wybierające jedynie daty i tematy szkoleń oraz odpowiadające im nazwiska i imiona trenerów. Należy posłużyć się relacją.
FROM szkolenia JOIN trenerzy - złączenie,ON trenerzy.Id = szkolenia.Id_trenera - klucz obcy szkolenia wskazuje trenera. Kolumna Id jest w obu tabelach, więc trzeba ją poprzedzić nazwą tabeli; USING tu nie zadziała, bo pola mają różne nazwy.Wynik: 18 wierszy - każde szkolenie z jednym trenerem. Zrzut: kw2.png.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT Data, Temat FROM szkolenia ORDER BY Data;
-- Zapytanie 2
SELECT Data, Temat, Nazwisko, Imie FROM szkolenia JOIN trenerzy ON trenerzy.Id = szkolenia.Id_trenera;
Zapytanie 3: wybierające dla każdego trenera jedynie jego imię i nazwisko oraz zliczające liczbę jego szkoleń. Należy posłużyć się relacją.
JOIN ... ON trenerzy.Id = Id_trenera - każde szkolenie przy swoim trenerze,GROUP BY trenerzy.Id - wiersze jednego trenera zwijają się w jeden; grupujesz po kluczu, bo dwóch trenerów mogłoby mieć to samo nazwisko,COUNT(*) - liczba wierszy w grupie, czyli szkoleń.Wynik: sześciu trenerów - Duda 2, Kossakowski 3, Królik 3, Przepiórkowska 5, Ptak 3, Stopyra 2 - jak w kluczu. Zrzut: kw3.png.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT Data, Temat FROM szkolenia ORDER BY Data;
-- Zapytanie 2
SELECT Data, Temat, Nazwisko, Imie FROM szkolenia JOIN trenerzy ON trenerzy.Id = szkolenia.Id_trenera;
-- Zapytanie 3
SELECT Imie, Nazwisko, COUNT(*) FROM trenerzy JOIN szkolenia ON trenerzy.Id = Id_trenera GROUP BY trenerzy.Id;
Zapytanie 4: zmieniające w tabeli zapisy nazwę kolumny Id_klienta na Id_sluchacza.
CHANGE COLUMN stara nowa typ zmienia nazwę kolumny, ale wymaga podania typu na nowo - przepisujesz go z budowy tabeli: INT(11) DEFAULT NULL, żeby kolumna nie zmieniła niczego poza nazwą. Krótsze RENAME COLUMN Id_klienta TO Id_sluchacza w XAMPP nie zadziała: XAMPP ma MariaDB 10.4, a to polecenie pojawiło się dopiero w 10.5 - sprawdzone, kończy się błędem składni 1064. Zrzut kw4.png: komunikat albo struktura tabeli z kolumną Id_sluchacza.
CHANGE COLUMN Id_klienta Id_sluchacza bez typu to błąd składni - typ jest w CHANGE obowiązkowy.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT Data, Temat FROM szkolenia ORDER BY Data;
-- Zapytanie 2
SELECT Data, Temat, Nazwisko, Imie FROM szkolenia JOIN trenerzy ON trenerzy.Id = szkolenia.Id_trenera;
-- Zapytanie 3
SELECT Imie, Nazwisko, COUNT(*) FROM trenerzy JOIN szkolenia ON trenerzy.Id = Id_trenera GROUP BY trenerzy.Id;
-- Zapytanie 4
ALTER TABLE zapisy CHANGE COLUMN Id_klienta Id_sluchacza INT(11) DEFAULT NULL;
Kroki 8-19 · po tym etapie masz 18 z 37 kryteriów (pkt)
Na potrzeby strony należy przygotować grafikę z banerem o nazwie baner.jpg i cechach: szerokość grafiki 1000 px, wysokość 150 px, tło baneru w formie gradientu od czarnego koloru z lewej do białego przy prawej krawędzi banera. Na pierwszym planie po lewej stronie umieszczona grafika z pliku kod.jpg. Grafika jest skalowana – widoczne dokładnie dwie sekcje case oraz jest transformowana jak na ilustracji 2, tworząc efekt perspektywy. Na pierwszym planie po prawej stronie umieszczony napis o treści „Firma szkoleniowa” w kolorze czarnym.
W GIMP-ie, warstwa po warstwie:
kod.jpg; zaznaczeniem prostokątnym wycinasz fragment z dokładnie dwiema sekcjami case ('+' i '-', bez początku trzeciej) i skalujesz warstwę, żeby zmieściła się po lewej stronie,Klucz sprawdza wymiary, gradient, dwie sekcje case z perspektywą i czarny napis (R.2.1 - R.2.3).
Kadr z kawałkiem trzeciej sekcji (case '*') nie spełnia „dokładnie dwie sekcje case” (R.2.2).
Składa się z dwóch stron o nazwach index.html i szkolenia.php. Cechy wspólne dla obu stron: Zapisane w języku HTML5.
Zbuduj index.html, a szkolenia.php powstanie z jej kopii - różnią się tylko blokiem głównym.
index.html HTML nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Zadeklarowany polski język zawartości witryny.
lang="pl" w <html>.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
</head>
<body>
</body>
</html>Jawnie zastosowany właściwy standard kodowania polskich znaków.
<meta charset="UTF-8">.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony widoczny na karcie przeglądarki: „Firma szkoleniowa”.
<title> w <head>.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Firma szkoleniowa</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie style.css prawidłowo połączony z kodem strony.
Nazwa: style.css.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Firma szkoleniowa</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>Strona składa się z kontenera, a w nim podział na bloki: nagłówkowy, poniżej obok siebie menu i główny, na dole stopka. Podział zrealizowany za pomocą semantycznych znaczników sekcji języka HTML5 tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z ilustracją 2.
Kontener to <div id="container">, który obejmuje całą stronę - jego tło (pomarańczowe) prześwituje tam, gdzie bloki go nie zakrywają, np. w stopce. Wewnątrz bloki semantyczne: <header>, <nav> (menu), <main> i <footer> (R.2.6). Menu i blok główny ustawisz obok siebie w CSS.
index.html HTML zmienione: 10 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Firma szkoleniowa</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
</header>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
</html>Zawartość bloku nagłówkowego: obraz z pliku baner.jpg z tekstem alternatywnym „Szkolenia”.
Obraz z tekstem alternatywnym z arkusza (R.2.8).
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Firma szkoleniowa</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<img src="baner.jpg" alt="Szkolenia">
</header>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
</html>Zawartość bloku menu: Lista punktowana (nieuporządkowana) z dwoma elementami: odnośnik do pliku index.html o treści „Strona główna” i odnośnik do pliku szkolenia.php o treści „Szkolenia”.
<ul> z dwoma <li>, w każdym odnośnik (R.2.9, R.3.2, R.3.3). Strona szkolenia.php działa tylko przez serwer (XAMPP) - przy otwarciu index.html z dysku kliknięcie pokaże kod PHP zamiast wyniku.
index.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Firma szkoleniowa</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<img src="baner.jpg" alt="Szkolenia">
</header>
<nav>
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="szkolenia.php">Szkolenia</a></li>
</ul>
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
</html>Zawartość bloku stopki: Nagłówek drugiego stopnia zawierający napis „Firma szkoleniowa, ul. Główna 1, 23-456 Warszawa”. Akapit (paragraf) zawierający napis „Autor: ”, dalej wstawiony numer zdającego.
<h2> i <p>. Na egzaminie po dwukropku wpisujesz swój numer zdającego (PESEL) - tutaj stoi imię i nazwisko autora rozwiązania.
index.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Firma szkoleniowa</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<img src="baner.jpg" alt="Szkolenia">
</header>
<nav>
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="szkolenia.php">Szkolenia</a></li>
</ul>
</nav>
<main>
</main>
<footer>
<h2>Firma szkoleniowa, ul. Główna 1, 23-456 Warszawa</h2>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</div>
</body>
</html>Zawartość bloku głównego dla strony index.html: Nagłówek pierwszego stopnia o treści „Zapraszamy do udziału w szkoleniach z branży IT”. Łamanie wiersza po słowie „udziału” oraz po słowie „szkoleniach”.
Łamanie wiersza to znacznik <br> - dwa razy, dokładnie po wskazanych słowach (R.2.7).
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Firma szkoleniowa</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<img src="baner.jpg" alt="Szkolenia">
</header>
<nav>
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="szkolenia.php">Szkolenia</a></li>
</ul>
</nav>
<main>
<h1>Zapraszamy do udziału<br>w szkoleniach<br>z branży IT</h1>
</main>
<footer>
<h2>Firma szkoleniowa, ul. Główna 1, 23-456 Warszawa</h2>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</div>
</body>
</html>Zawartość bloku głównego dla strony szkolenia.php: Efekt działania skryptu.
Zapisz index.html jako szkolenia.php i opróżnij blok główny - wypełni go skrypt. Na razie w pliku nie ma PHP, więc podgląd pokazuje go wprost.
szkolenia.php PHP nowy plik <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Firma szkoleniowa</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<img src="baner.jpg" alt="Szkolenia">
</header>
<nav>
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="szkolenia.php">Szkolenia</a></li>
</ul>
</nav>
<main>
</main>
<footer>
<h2>Firma szkoleniowa, ul. Główna 1, 23-456 Warszawa</h2>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</div>
</body>
</html>Kroki 20-29 · po tym etapie masz 29 z 37 kryteriów (pkt)
Domyślnie dla wszystkich selektorów: krój czcionki Tahoma.
Selektor * (R.4.1).
style.css CSS nowy plik * {
font-family: Tahoma;
}Dla kontenera głównego strony: kolor tła #FB8E02.
Selektor identyfikatora #container.
style.css CSS zmienione: 3 linie * {
font-family: Tahoma;
}
#container {
background-color: #FB8E02;
}Dla bloku menu: kolor tła #232323, szerokość 20%, wysokość 450 px.
Ciemne menu po lewej.
style.css CSS zmienione: 5 linii * {
font-family: Tahoma;
}
#container {
background-color: #FB8E02;
}
nav {
background-color: #232323;
width: 20%;
height: 450px;
}Dla bloku głównego: kolor tła #AEC6E6, szerokość 80%, wysokość 450 px, paski przewijania zawsze widoczne.
„Zawsze widoczne” to overflow: scroll - paski są nawet przy krótkiej treści (auto pokazywałoby je tylko w razie potrzeby) (R.4.8). 20% + 80% = 100% - bez poziomych marginesów, żeby bloki zmieściły się obok siebie.
style.css CSS zmienione: 6 linii * {
font-family: Tahoma;
}
#container {
background-color: #FB8E02;
}
nav {
background-color: #232323;
width: 20%;
height: 450px;
}
main {
background-color: #AEC6E6;
width: 80%;
height: 450px;
overflow: scroll;
}Dla bloku stopki: marginesy wewnętrzne 2 px, wyrównanie tekstu do prawej strony.
Stopka nie ma własnego tła - widać pomarańczowy kontener.
style.css CSS zmienione: 4 linie * {
font-family: Tahoma;
}
#container {
background-color: #FB8E02;
}
nav {
background-color: #232323;
width: 20%;
height: 450px;
}
main {
background-color: #AEC6E6;
width: 80%;
height: 450px;
overflow: scroll;
}
footer {
padding: 2px;
text-align: right;
}Dla obrazu: szerokość 100%.
Baner rozciąga się na szerokość kontenera.
style.css CSS zmienione: 3 linie * {
font-family: Tahoma;
}
#container {
background-color: #FB8E02;
}
nav {
background-color: #232323;
width: 20%;
height: 450px;
}
main {
background-color: #AEC6E6;
width: 80%;
height: 450px;
overflow: scroll;
}
footer {
padding: 2px;
text-align: right;
}
img {
width: 100%;
}Dla selektora nagłówka pierwszego stopnia: marginesy wewnętrzne 50 px, kolor czcionki Maroon.
Selektor znacznika h1, jak wymaga uwaga arkusza.
style.css CSS zmienione: 4 linie * {
font-family: Tahoma;
}
#container {
background-color: #FB8E02;
}
nav {
background-color: #232323;
width: 20%;
height: 450px;
}
main {
background-color: #AEC6E6;
width: 80%;
height: 450px;
overflow: scroll;
}
footer {
padding: 2px;
text-align: right;
}
img {
width: 100%;
}
h1 {
padding: 50px;
color: Maroon;
}Dla listy punktowanej: brak symboli punktorów. Dla selektora elementu listy: kolor tła #FB8E02, szerokość 95%, marginesy wewnętrzne 5 px, margines zewnętrzny – górny 10 px.
list-style-type: none usuwa punktory; elementy li stają się pomarańczowymi paskami jak na ilustracji 2 (R.4.2, R.4.4, R.4.6, R.4.9).
style.css CSS zmienione: 9 linii * {
font-family: Tahoma;
}
#container {
background-color: #FB8E02;
}
nav {
background-color: #232323;
width: 20%;
height: 450px;
}
main {
background-color: #AEC6E6;
width: 80%;
height: 450px;
overflow: scroll;
}
footer {
padding: 2px;
text-align: right;
}
img {
width: 100%;
}
h1 {
padding: 50px;
color: Maroon;
}
ul {
list-style-type: none;
}
li {
background-color: #FB8E02;
width: 95%;
padding: 5px;
margin-top: 10px;
}Dla selektora odnośnika: brak podkreślenia, kolor czcionki #232323, rozmiar czcionki 110%. Gdy kursor myszy znajdzie się na elemencie listy, jego tło zmienia się na #B36501.
li:hover - pod kursorem ciemnieje cały pasek elementu listy, nie tylko napis (R.4.3, R.4.9, R.4.10).
style.css CSS zmienione: 8 linii * {
font-family: Tahoma;
}
#container {
background-color: #FB8E02;
}
nav {
background-color: #232323;
width: 20%;
height: 450px;
}
main {
background-color: #AEC6E6;
width: 80%;
height: 450px;
overflow: scroll;
}
footer {
padding: 2px;
text-align: right;
}
img {
width: 100%;
}
h1 {
padding: 50px;
color: Maroon;
}
ul {
list-style-type: none;
}
li {
background-color: #FB8E02;
width: 95%;
padding: 5px;
margin-top: 10px;
}
a {
text-decoration: none;
color: #232323;
font-size: 110%;
}
li:hover {
background-color: #B36501;
}Poniżej obok siebie menu i główny, na dole stopka. Podział zrealizowany tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z ilustracją 2.
float: left dla nav i main - obok siebie; clear: both dla stopki - pod nimi (R.3.1).
style.css CSS zmienione: 6 linii * {
font-family: Tahoma;
}
#container {
background-color: #FB8E02;
}
nav {
background-color: #232323;
width: 20%;
height: 450px;
}
main {
background-color: #AEC6E6;
width: 80%;
height: 450px;
overflow: scroll;
}
footer {
padding: 2px;
text-align: right;
}
img {
width: 100%;
}
h1 {
padding: 50px;
color: Maroon;
}
ul {
list-style-type: none;
}
li {
background-color: #FB8E02;
width: 95%;
padding: 5px;
margin-top: 10px;
}
a {
text-decoration: none;
color: #232323;
font-size: 110%;
}
li:hover {
background-color: #B36501;
}
nav, main {
float: left;
}
footer {
clear: both;
}Kroki 30-35 · po tym etapie masz 37 z 37 kryteriów (pkt)
Napisany w języku PHP, działa na stronie szkolenia.php. Łączy się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie firma.
Skrypt piszesz w bloku głównym - to, co wypisze, stanie się jego treścią. mysqli_connect z czterema argumentami łączy się i wybiera bazę (R.5.1, R.5.2). Od tego kroku podgląd to wynik prawdziwego uruchomienia w PHP.
szkolenia.php PHP zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Firma szkoleniowa</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<img src="baner.jpg" alt="Szkolenia">
</header>
<nav>
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="szkolenia.php">Szkolenia</a></li>
</ul>
</nav>
<main>
<?php
$connection = mysqli_connect("localhost", "root", "", "firma");
?>
</main>
<footer>
<h2>Firma szkoleniowa, ul. Główna 1, 23-456 Warszawa</h2>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</div>
</body>
</html>Wysyła do bazy danych zapytanie 1.
Treść zapytania 1 w zmiennej i mysqli_query (R.5.4).
szkolenia.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Firma szkoleniowa</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<img src="baner.jpg" alt="Szkolenia">
</header>
<nav>
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="szkolenia.php">Szkolenia</a></li>
</ul>
</nav>
<main>
<?php
$connection = mysqli_connect("localhost", "root", "", "firma");
$query = "SELECT Data, Temat FROM szkolenia ORDER BY Data;";
$result = mysqli_query($connection, $query);
?>
</main>
<footer>
<h2>Firma szkoleniowa, ul. Główna 1, 23-456 Warszawa</h2>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</div>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 30.
Zwrócone zapytaniem data i temat szkolenia są oddzielone spacją i wyświetlane jeden pod drugim w osobnych paragrafach w bloku głównym – ilustracja 3.
Pętla while z mysqli_fetch_row przechodzi po 18 wierszach; każdy wypisujesz w osobnym <p>, datę i temat oddzielone spacją. Akapity są blokowe, więc stoją jeden pod drugim. Podgląd: 18 szkoleń od 2021-09-20 „Podstawy języka C++”, a blok główny ma paski przewijania - jak na ilustracji 3 (R.5.5).
szkolenia.php PHP zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Firma szkoleniowa</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<img src="baner.jpg" alt="Szkolenia">
</header>
<nav>
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="szkolenia.php">Szkolenia</a></li>
</ul>
</nav>
<main>
<?php
$connection = mysqli_connect("localhost", "root", "", "firma");
$query = "SELECT Data, Temat FROM szkolenia ORDER BY Data;";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<p>$row[0] $row[1]</p>";
}
?>
</main>
<footer>
<h2>Firma szkoleniowa, ul. Główna 1, 23-456 Warszawa</h2>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</div>
</body>
</html>Dodatkowo zwrócone zapytaniem wiersze są zapisywane jako osobne linie w pliku tekstowym o nazwie harmonogram.txt.
fopen("harmonogram.txt", "w") otwiera plik do zapisu - tryb "w" (write) tworzy go, gdy nie istnieje, a istniejący czyści. Plik powstaje w tym samym folderze co skrypt. Uchwyt pliku trzymasz w $file (R.5.6). W kluczu nazwa ma literówkę („harmonogam.txt”) - piszesz tak, jak w treści arkusza.
szkolenia.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Firma szkoleniowa</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<img src="baner.jpg" alt="Szkolenia">
</header>
<nav>
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="szkolenia.php">Szkolenia</a></li>
</ul>
</nav>
<main>
<?php
$connection = mysqli_connect("localhost", "root", "", "firma");
$query = "SELECT Data, Temat FROM szkolenia ORDER BY Data;";
$result = mysqli_query($connection, $query);
$file = fopen("harmonogram.txt", "w");
while ($row = mysqli_fetch_row($result)) {
echo "<p>$row[0] $row[1]</p>";
}
?>
</main>
<footer>
<h2>Firma szkoleniowa, ul. Główna 1, 23-456 Warszawa</h2>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</div>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 32.
Dodatkowo zwrócone zapytaniem wiersze są zapisywane jako osobne linie w pliku tekstowym o nazwie harmonogram.txt.
W tej samej pętli fwrite dopisuje do pliku datę i temat, zakończone znakiem nowej linii "\n" - bez niego wszystkie szkolenia skleiłyby się w jedną linię. Obok kodu widać plik harmonogram.txt dokładnie taki, jaki zapisał skrypt przy uruchomieniu: 18 linii (R.5.7).
harmonogram.txt Tekst nowy plik 2021-09-20 Podstawy języka C++
2021-09-30 Photoshop dla zaawansowanych
2021-10-01 Podstawy języka Python
2021-10-02 Systemy operacyjne
2021-10-07 Aplikacje Webowe
2021-10-15 Python dla zaawansowanych
2021-10-21 Techologia druku 3D
2021-10-22 PHP - poziom podstawowy
2021-11-10 Animacje komputerowe
2021-11-15 Administracja systemem Linux
2021-11-21 PHP - poziom średniozaawansowany
2021-11-28 HTML i CSS dla zaawansowanych
2021-11-30 Programowanie obiektowe w C++
2021-12-06 Windows Serwer - usługi
2021-12-07 PHP - poziom zaawansowany
2021-12-10 C++ dla zaawansowanych
2021-12-15 Obsługa drukarek 3D
2021-12-16 Obsługa programu GIMPszkolenia.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Firma szkoleniowa</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<img src="baner.jpg" alt="Szkolenia">
</header>
<nav>
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="szkolenia.php">Szkolenia</a></li>
</ul>
</nav>
<main>
<?php
$connection = mysqli_connect("localhost", "root", "", "firma");
$query = "SELECT Data, Temat FROM szkolenia ORDER BY Data;";
$result = mysqli_query($connection, $query);
$file = fopen("harmonogram.txt", "w");
while ($row = mysqli_fetch_row($result)) {
echo "<p>$row[0] $row[1]</p>";
fwrite($file, "$row[0] $row[1]\n");
}
?>
</main>
<footer>
<h2>Firma szkoleniowa, ul. Główna 1, 23-456 Warszawa</h2>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</div>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 32.
Na końcu działania skrypt zamyka połączenie z serwerem.
fclose zamyka plik (zapisuje bufor na dysk), a mysqli_close jako ostatnia operacja zamyka połączenie z bazą (R.5.3). Zmienne nazwane po angielsku mówią, co przechowują (R.5.8).
harmonogram.txt Tekst zmienione: 0 linii 2021-09-20 Podstawy języka C++
2021-09-30 Photoshop dla zaawansowanych
2021-10-01 Podstawy języka Python
2021-10-02 Systemy operacyjne
2021-10-07 Aplikacje Webowe
2021-10-15 Python dla zaawansowanych
2021-10-21 Techologia druku 3D
2021-10-22 PHP - poziom podstawowy
2021-11-10 Animacje komputerowe
2021-11-15 Administracja systemem Linux
2021-11-21 PHP - poziom średniozaawansowany
2021-11-28 HTML i CSS dla zaawansowanych
2021-11-30 Programowanie obiektowe w C++
2021-12-06 Windows Serwer - usługi
2021-12-07 PHP - poziom zaawansowany
2021-12-10 C++ dla zaawansowanych
2021-12-15 Obsługa drukarek 3D
2021-12-16 Obsługa programu GIMPszkolenia.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Firma szkoleniowa</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<img src="baner.jpg" alt="Szkolenia">
</header>
<nav>
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="szkolenia.php">Szkolenia</a></li>
</ul>
</nav>
<main>
<?php
$connection = mysqli_connect("localhost", "root", "", "firma");
$query = "SELECT Data, Temat FROM szkolenia ORDER BY Data;";
$result = mysqli_query($connection, $query);
$file = fopen("harmonogram.txt", "w");
while ($row = mysqli_fetch_row($result)) {
echo "<p>$row[0] $row[1]</p>";
fwrite($file, "$row[0] $row[1]\n");
}
fclose($file);
mysqli_close($connection);
?>
</main>
<footer>
<h2>Firma szkoleniowa, ul. Główna 1, 23-456 Warszawa</h2>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</div>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 32.
Krok 36 · po tym etapie masz 37 z 37 kryteriów (pkt)
Dodatkowo zwrócone zapytaniem wiersze są zapisywane jako osobne linie w pliku tekstowym o nazwie harmonogram.txt.
Wersja z egzaminu nie sprawdza, czy plik dało się otworzyć - przy braku uprawnień do folderu fopen zwraca false, a każde fwrite kończy się ostrzeżeniem. Poprawki:
$lines, a file_put_contents zapisuje cały plik jednym poleceniem (sam otwiera i zamyka plik); wynik false oznacza błąd - wtedy komunikat na stronie,PHP_EOL - znak końca linii właściwy dla systemu serwera,mysqli_fetch_assoc - pola po nazwach ($training["Temat"]),htmlspecialchars przy wypisywaniu danych z bazy.Plik i strona wychodzą takie same jak wcześniej. Wersja z egzaminu zostaje w komentarzu. Na egzaminie wystarczy wersja wcześniejsza - klucz sprawdza fopen/zapis linii i tego nie wymaga.
harmonogram.txt Tekst zmienione: 0 linii 2021-09-20 Podstawy języka C++
2021-09-30 Photoshop dla zaawansowanych
2021-10-01 Podstawy języka Python
2021-10-02 Systemy operacyjne
2021-10-07 Aplikacje Webowe
2021-10-15 Python dla zaawansowanych
2021-10-21 Techologia druku 3D
2021-10-22 PHP - poziom podstawowy
2021-11-10 Animacje komputerowe
2021-11-15 Administracja systemem Linux
2021-11-21 PHP - poziom średniozaawansowany
2021-11-28 HTML i CSS dla zaawansowanych
2021-11-30 Programowanie obiektowe w C++
2021-12-06 Windows Serwer - usługi
2021-12-07 PHP - poziom zaawansowany
2021-12-10 C++ dla zaawansowanych
2021-12-15 Obsługa drukarek 3D
2021-12-16 Obsługa programu GIMPszkolenia.php PHP zmienione: 15 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Firma szkoleniowa</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<img src="baner.jpg" alt="Szkolenia">
</header>
<nav>
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="szkolenia.php">Szkolenia</a></li>
</ul>
</nav>
<main>
<?php
$connection = mysqli_connect("localhost", "root", "", "firma");
$result = mysqli_query($connection, "SELECT Data, Temat FROM szkolenia ORDER BY Data;");
$lines = [];
while ($training = mysqli_fetch_assoc($result)) {
$line = $training["Data"] . " " . $training["Temat"];
echo "<p>" . htmlspecialchars($line) . "</p>";
$lines[] = $line;
}
if (file_put_contents("harmonogram.txt", implode(PHP_EOL, $lines) . PHP_EOL) === false) {
echo "<p>Nie udało się zapisać pliku harmonogram.txt.</p>";
}
mysqli_close($connection);
/* Wersja z egzaminu:
$query = "SELECT Data, Temat FROM szkolenia ORDER BY Data;";
$result = mysqli_query($connection, $query);
$file = fopen("harmonogram.txt", "w");
while ($row = mysqli_fetch_row($result)) {
echo "<p>$row[0] $row[1]</p>";
fwrite($file, "$row[0] $row[1]\n");
}
fclose($file);
mysqli_close($connection);
*/
?>
</main>
<footer>
<h2>Firma szkoleniowa, ul. Główna 1, 23-456 Warszawa</h2>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</div>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 32.
Krok 37 · po tym etapie masz 37 z 37 kryteriów (pkt)
Po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Nagraj płytę z rezultatami pracy.
W przeglądarka.txt wpisujesz nazwę przeglądarki.
Przed nagraniem otwierasz szkolenia.php przez http://localhost/..., żeby skrypt utworzył harmonogram.txt - egzaminator sprawdza ten plik (R.5.7). W folderze: baner.jpg, import.jpg, index.html, kw1.png - kw4.png, kwerendy.txt, przeglądarka.txt, style.css, szkolenia.php i harmonogram.txt. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.
przeglądarka.txt Tekst nowy plik Google ChromePodgląd strony bez zmian - taki jak po kroku 32.
Symulacja ekranu w przeglądarce - w Android Studio / Visual Studio wygląd może się nieco różnić.
To jedno z możliwych rozwiązań. Egzaminator ocenia spełnienie kryteriów z klucza odpowiedzi, a nie zgodność z tym kodem - inna, poprawna droga też daje punkty.
Autor rozwiązania: Bartosz Bryniarski. Licencja CC BY-NC 4.0 - kopiowanie i przeróbki do celów niekomercyjnych, z podaniem autora i źródła (link do tej strony) (zasady wykorzystania). Treść arkusza i klucza oceniania pochodzi z CKE.