Rozwiązanie buduje terminarz na lipiec: baza terminarz z jedną tabelą zadania i cztery zapytania - unikalne wartości z zakresu dat (DISTINCT, BETWEEN), filtr po miesiącu, wyszukiwanie po pierwszej literze (LIKE 'S%') i aktualizacja UPDATE, potem logo przeskalowane do 140 px, strona kalendarz.php z dwoma blokami banera i kalendarzem, w którym każdy dzień jest osobnym blokiem wygenerowanym przez PHP, style w styl6.css i pusta na razie strona sierpien.html. Dwa skrypty PHP: pierwszy wypisuje w banerze najbliższe zadania rozdzielone średnikami, drugi buduje bloki dni.
To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, PDO)” jest drugi sposób rozwiązania tego samego arkusza: zapytanie 2 po dacie i z sortowaniem, układ na siatce CSS, dane pobierane przez PDO na początku pliku, a w treści strony tylko wyświetlanie - obie wersje są zgodne z kluczem.
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ą. Skrypty są najpierw pisane najprościej (mysqli_query, mysqli_fetch_row), a na końcu zostają przerobione na wersję z prawdziwych projektów.
Baza i logo pochodzą z prawdziwego archiwum materialy4 (załącznik do arkusza, hasło w treści zadania). Zapytania i zrzuty są policzone na MariaDB 10.4 - tej samej, która jest w XAMPP. Podgląd strony to wynik prawdziwego uruchomienia kodu z danego kroku w PHP 8.2 - na bazie po zapytaniu 4, tak jak na obrazie 2 (18 lipca „Wycieczka nad morze”).
Jak liczą się punkty. Klucz ma 33 kryteria (R.1.1 - R.5.7), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 25 punktów - można stracić 8 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 33 kryteriów (pkt)
Utwórz bazę danych o nazwie terminarz.
Rozpakuj materialy4.7z z pulpitu (hasło kaL(end)arz%) do folderu z numerem zdającego: baza.sql, logo1.png i logo2.png. W phpMyAdmin: Nowa, nazwa terminarz.
Do bazy terminarz zaimportuj tabele z pliku baza.sql z rozpakowanego archiwum.
Import → baza.sql. Tabela zadania z obrazu 1: 63 dni (lipiec i sierpień 2020) z datą, wpisem (często pustym), nazwą miesiąca i rokiem.
Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie PNG pod nazwą import. Nie kadruj zrzutu. Zrzut powinien obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel.
Print Screen i zapis jako import.png. Uwaga: zrzuty zapytań mają być w JPEG (kw1.jpg - kw4.jpg), a zrzut importu - w PNG.
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany.
Zapytanie 1: wybierające jedynie niepowtarzające się wartości z pola wpis dla zadań z pierwszych 7 dni lipca roku 2020 (od 1 do 7 lipca) oraz takich, gdzie pole wpis nie jest puste.
Zapytanie czytasz klauzula po klauzuli:
SELECT DISTINCT wpis - „niepowtarzające się”: „Projekt z programowania” jest wpisany 1 i 2 lipca, a w wyniku ma wystąpić raz,WHERE dataZadania BETWEEN '2020-07-01' AND '2020-07-07' - przedział z oboma końcami, czyli od 1 do 7 lipca włącznie,AND wpis <> '' - pusty wpis to w tej tabeli pusty napis '', a <> znaczy „różny od”.Wynik: dwa wpisy - „Projekt z programowania” i „Weterynarz - Brutus”, jak w kluczu. Zapytanie do kwerendy.txt, zrzut kw1.jpg - z widocznym zapytaniem, bo arkusz tego wymaga. To zapytanie wyśle Skrypt 1.
Bez wpis <> '' w wyniku pojawi się też pusty wiersz - pięć pustych dni zlewa się przez DISTINCT w jeden.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT DISTINCT wpis FROM zadania WHERE dataZadania BETWEEN '2020-07-01' AND '2020-07-07' AND wpis <> '';
Zapytanie 2: wybierające jedynie pola dataZadania i wpis dla zadań z miesiąca lipca.
SELECT dataZadania, wpis - dwie kolumny,WHERE miesiac = 'lipiec' - tabela ma osobne pole z nazwą miesiąca, więc najprościej filtrować po nim (działa też dataZadania LIKE '2020-07-%').Wynik: 31 wierszy, komunikat phpMyAdmin „(31 ogółem)”. Zrzut kw2.jpg nie musi mieścić wszystkich wierszy. To zapytanie wyśle Skrypt 2 - każdy wiersz stanie się blokiem kalendarza.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT DISTINCT wpis FROM zadania WHERE dataZadania BETWEEN '2020-07-01' AND '2020-07-07' AND wpis <> '';
-- Zapytanie 2
SELECT dataZadania, wpis FROM zadania WHERE miesiac = 'lipiec';
Zapytanie 3: wybierające jedynie pole miesiac i wpis dla wpisów zaczynających się na literę „S”.
LIKE 'S%' - napis zaczynający się od „S”, a po nim cokolwiek (%).Wynik: trzy wiersze - lipiec „Szczepienie” i dwa razy sierpień „Sopot”, jak w kluczu. Zrzut kw3.jpg.
LIKE '%S%' szuka litery S w dowolnym miejscu - nie tylko na początku wpisu.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT DISTINCT wpis FROM zadania WHERE dataZadania BETWEEN '2020-07-01' AND '2020-07-07' AND wpis <> '';
-- Zapytanie 2
SELECT dataZadania, wpis FROM zadania WHERE miesiac = 'lipiec';
-- Zapytanie 3
SELECT miesiac, wpis FROM zadania WHERE wpis LIKE 'S%';
Zapytanie 4: aktualizujące pole wpis dla zadania w dniu 2020-07-18, nowy wpis to „Wycieczka nad morze”.
UPDATE zadania SET wpis = 'Wycieczka nad morze' - nowa wartość pola,WHERE dataZadania = '2020-07-18' - tylko w wierszu tego dnia; wcześniej był tam wpis „Wyjazd na wakacje!”.phpMyAdmin pokazuje „1 wiersz zmieniony”. Zrzut kw4.jpg. Od tej chwili kalendarz na stronie pokazuje 18 lipca nowy wpis.
UPDATE bez WHERE wpisuje „Wycieczka nad morze” we wszystkich 63 dniach.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT DISTINCT wpis FROM zadania WHERE dataZadania BETWEEN '2020-07-01' AND '2020-07-07' AND wpis <> '';
-- Zapytanie 2
SELECT dataZadania, wpis FROM zadania WHERE miesiac = 'lipiec';
-- Zapytanie 3
SELECT miesiac, wpis FROM zadania WHERE wpis LIKE 'S%';
-- Zapytanie 4
UPDATE zadania SET wpis = 'Wycieczka nad morze' WHERE dataZadania = '2020-07-18';
Kroki 8-17 · po tym etapie masz 15 z 33 kryteriów (pkt)
Plik logo1.png, wypakowany z archiwum, należy przeskalować z zachowaniem proporcji tak, aby jego wysokość wynosiła dokładnie 140 px.
W GIMP-ie: Obraz → Skaluj obraz, wysokość 140 z zamkniętym łańcuchem - szerokość wychodzi 175 px (350 × 140 / 280), jak w kluczu. Plik → Nadpisz logo1.png - plik zostaje PNG z przezroczystością.
Cechy witryny: Składa się ze strony o nazwie kalendarz.php zapisanej w języku HTML 5.
Jedna strona, kalendarz.php. Dopóki nie ma w niej kodu PHP, podgląd pokazuje ją wprost.
kalendarz.php PHP nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Ustawiony język zawartości strony na polski.
Atrybut lang="pl" w znaczniku <html>.
kalendarz.php PHP 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"> jako pierwszy element <head>.
kalendarz.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony widoczny na karcie przeglądarki: „Zadania na lipiec”.
<title> w <head>.
kalendarz.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Zadania na lipiec</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl6.css prawidłowo połączony z kodem strony.
Uwaga na nietypową nazwę: styl6.css - z cyfrą.
styl.css bez szóstki odcina wszystkie style, a razem z nimi kryterium R.3.3.
kalendarz.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Zadania na lipiec</title>
<link rel="stylesheet" href="styl6.css">
</head>
<body>
</body>
</html>Podział strony na bloki: dwa bloki banera, poniżej blok główny, w którym znajdują się generowane skryptem bloki kalendarza, na dole blok stopki. Podział zrealizowany za pomocą znaczników sekcji tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z Obrazem 2.
Dwie <section> z identyfikatorami banner1 i banner2, <main> na blok główny i <footer>. Bloki kalendarza nie są tu wpisane - wygeneruje je Skrypt 2.
kalendarz.php PHP zmienione: 8 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Zadania na lipiec</title>
<link rel="stylesheet" href="styl6.css">
</head>
<body>
<section id="banner1">
</section>
<section id="banner2">
</section>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość pierwszego bloku banera: logo1.png z tekstem alternatywnym o treści: „lipiec”.
Obraz z atrybutem alt.
kalendarz.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Zadania na lipiec</title>
<link rel="stylesheet" href="styl6.css">
</head>
<body>
<section id="banner1">
<img src="logo1.png" alt="lipiec">
</section>
<section id="banner2">
</section>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość drugiego bloku banera: Nagłówek pierwszego stopnia o treści: „TERMINARZ”. Paragraf (akapit) z wpisem: „najbliższe zadania:”, a dalej efekt działania skryptu 1.
<h1> i <p>. Akapit kończy się po dwukropku i spacji - zadania dopisze tu Skrypt 1.
kalendarz.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Zadania na lipiec</title>
<link rel="stylesheet" href="styl6.css">
</head>
<body>
<section id="banner1">
<img src="logo1.png" alt="lipiec">
</section>
<section id="banner2">
<h1>TERMINARZ</h1>
<p>najbliższe zadania: </p>
</section>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość stopki: Odnośnik o treści „Terminarz na sierpień” prowadzący do pliku sierpien.html. Plik sierpien.html należy utworzyć i zapisać w nim „strona w trakcie budowy”. Paragraf (akapit) o treści: „Stronę wykonał: ”, dalej wstawiony numer zdającego.
Odnośnik do pliku z tego samego folderu i nowy plik sierpien.html - wystarczy w nim sam napis, tu w krótkim szkielecie HTML5 (R.3.2). Na egzaminie po „Stronę wykonał:” wpisujesz swój numer zdającego (PESEL), tu - autor rozwiązania.
kalendarz.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Zadania na lipiec</title>
<link rel="stylesheet" href="styl6.css">
</head>
<body>
<section id="banner1">
<img src="logo1.png" alt="lipiec">
</section>
<section id="banner2">
<h1>TERMINARZ</h1>
<p>najbliższe zadania: </p>
</section>
<main>
</main>
<footer>
<a href="sierpien.html">Terminarz na sierpień</a>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>sierpien.html HTML nowy plik <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Terminarz na sierpień</title>
</head>
<body>
<p>strona w trakcie budowy</p>
</body>
</html>Kroki 18-25 · po tym etapie masz 26 z 33 kryteriów (pkt)
Ustawione domyślne wartości dla wszystkich selektorów stylu CSS: krój czcionki Verdana.
Selektor uniwersalny *.
styl6.css CSS nowy plik * {
font-family: Verdana;
}Dla obu bloków banera: kolor tła #6F79A8, biały kolor czcionki, wysokość 140 px.
Wspólna reguła dla dwóch identyfikatorów. Wysokość 140 px to dokładnie wysokość logo.
styl6.css CSS zmienione: 5 linii * {
font-family: Verdana;
}
#banner1, #banner2 {
background-color: #6F79A8;
color: white;
height: 140px;
}Dodatkowo szerokość pierwszego bloku banera wynosi 30%, drugiego 70%.
Razem 100% - bloki staną obok siebie, gdy dostaną float (krok układu).
styl6.css CSS zmienione: 6 linii * {
font-family: Verdana;
}
#banner1, #banner2 {
background-color: #6F79A8;
color: white;
height: 140px;
}
#banner1 {
width: 30%;
}
#banner2 {
width: 70%;
}Dla bloku kalendarza: kolor tła #9FA8DA, szerokość 160 px, wysokość 85 px, marginesy zewnętrzne 5 px, obramowanie linią ciągłą o szerokości 1 px i kolorze #6F79A8; tekst, który nie mieści się w bloku jest ukryty i wyświetlany bez paska przewijania.
Bloków dnia jest 31, więc styl dostaje klasa .day - identyfikator musi być na stronie jednorazowy (klucz: użycie id jest błędem).
overflow: hidden (opis właściwości jest na ostatniej stronie arkusza) obcina tekst, który nie mieści się w 85 px - „Wycieczka nad morze” zostaje uciętym „Wycieczka nad”, bez paska przewijania. scroll i auto dałyby pasek.
#day zamiast .day - klucz wprost uznaje identyfikator za błąd (R.4.8).
styl6.css CSS zmienione: 8 linii * {
font-family: Verdana;
}
#banner1, #banner2 {
background-color: #6F79A8;
color: white;
height: 140px;
}
#banner1 {
width: 30%;
}
#banner2 {
width: 70%;
}
.day {
background-color: #9FA8DA;
width: 160px;
height: 85px;
margin: 5px;
border: 1px solid #6F79A8;
overflow: hidden;
}Gdy kursor znajdzie się na bloku kalendarza jego kolor tła zmienia się na #6F79A8, a kolor czcionki na biały.
Pseudoklasa :hover dla klasy day. Efekt zobaczysz w podglądzie, gdy pojawią się bloki dni.
styl6.css CSS zmienione: 4 linie * {
font-family: Verdana;
}
#banner1, #banner2 {
background-color: #6F79A8;
color: white;
height: 140px;
}
#banner1 {
width: 30%;
}
#banner2 {
width: 70%;
}
.day {
background-color: #9FA8DA;
width: 160px;
height: 85px;
margin: 5px;
border: 1px solid #6F79A8;
overflow: hidden;
}
.day:hover {
background-color: #6F79A8;
color: white;
}Dla stopki: kolor tła #6F79A8, biały kolor czcionki, marginesy wewnętrzne 5 px, wyrównanie tekstu do prawej strony.
Selektor footer.
styl6.css CSS zmienione: 6 linii * {
font-family: Verdana;
}
#banner1, #banner2 {
background-color: #6F79A8;
color: white;
height: 140px;
}
#banner1 {
width: 30%;
}
#banner2 {
width: 70%;
}
.day {
background-color: #9FA8DA;
width: 160px;
height: 85px;
margin: 5px;
border: 1px solid #6F79A8;
overflow: hidden;
}
.day:hover {
background-color: #6F79A8;
color: white;
}
footer {
background-color: #6F79A8;
color: white;
padding: 5px;
text-align: right;
}Dla selektora nagłówka szóstego stopnia: wyrównanie tekstu do środka.
Selektor znacznika h6 - w nim Skrypt 2 wypisze datę każdego dnia.
Styl dla .day h6 albo klasy nie spełnia R.4.7 - klucz uznaje tylko selektor znacznika.
styl6.css CSS zmienione: 3 linie * {
font-family: Verdana;
}
#banner1, #banner2 {
background-color: #6F79A8;
color: white;
height: 140px;
}
#banner1 {
width: 30%;
}
#banner2 {
width: 70%;
}
.day {
background-color: #9FA8DA;
width: 160px;
height: 85px;
margin: 5px;
border: 1px solid #6F79A8;
overflow: hidden;
}
.day:hover {
background-color: #6F79A8;
color: white;
}
footer {
background-color: #6F79A8;
color: white;
padding: 5px;
text-align: right;
}
h6 {
text-align: center;
}Podział zrealizowany za pomocą znaczników sekcji tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z Obrazem 2.
float: left stawia obok siebie dwa bloki banera i kolejne dni kalendarza (dni same zawijają się do następnego wiersza, gdy brak miejsca). clear: both sprowadza blok główny pod baner, a stopkę pod ostatni wiersz dni.
styl6.css CSS zmienione: 6 linii * {
font-family: Verdana;
}
#banner1, #banner2 {
background-color: #6F79A8;
color: white;
height: 140px;
}
#banner1 {
width: 30%;
}
#banner2 {
width: 70%;
}
.day {
background-color: #9FA8DA;
width: 160px;
height: 85px;
margin: 5px;
border: 1px solid #6F79A8;
overflow: hidden;
}
.day:hover {
background-color: #6F79A8;
color: white;
}
footer {
background-color: #6F79A8;
color: white;
padding: 5px;
text-align: right;
}
h6 {
text-align: center;
}
#banner1, #banner2, .day {
float: left;
}
main, footer {
clear: both;
}Kroki 26-29 · po tym etapie masz 33 z 33 kryteriów (pkt)
Łączy się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie terminarz. Na końcu działania skrypt zamyka połączenie z serwerem.
Skrypt 1 stoi wewnątrz akapitu „najbliższe zadania:”, bo jego wynik ma się pojawić po dwukropku. Tam otwierasz połączenie (to pierwszy kod PHP na stronie). Skrypt 2 stoi w <main> i kończy się zamknięciem mysqli_close - to ostatnia operacja na bazie (R.5.2). Zmienna $connection jest wspólna dla obu bloków PHP tego pliku.
Podgląd jest już wynikiem uruchomienia strony: skrypty jeszcze niczego nie wypisują.
kalendarz.php PHP zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Zadania na lipiec</title>
<link rel="stylesheet" href="styl6.css">
</head>
<body>
<section id="banner1">
<img src="logo1.png" alt="lipiec">
</section>
<section id="banner2">
<h1>TERMINARZ</h1>
<p>najbliższe zadania: <?php
$connection = mysqli_connect("localhost", "root", "", "terminarz");
?></p>
</section>
<main>
<?php
mysqli_close($connection);
?>
</main>
<footer>
<a href="sierpien.html">Terminarz na sierpień</a>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Działanie skryptu 1: Wysyła do bazy danych zapytanie 1. Wyświetla rozdzielone średnikiem i spacją wszystkie wartości zwrócone zapytaniem.
Zapytanie 1, a w pętli while każdy wpis i po nim "; " - średnik ze spacją. Pętla działa dla dowolnej liczby wpisów. Podgląd: „najbliższe zadania: Projekt z programowania; Weterynarz - Brutus;” - z średnikiem także na końcu, dokładnie jak na obrazie 2.
kalendarz.php PHP zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Zadania na lipiec</title>
<link rel="stylesheet" href="styl6.css">
</head>
<body>
<section id="banner1">
<img src="logo1.png" alt="lipiec">
</section>
<section id="banner2">
<h1>TERMINARZ</h1>
<p>najbliższe zadania: <?php
$connection = mysqli_connect("localhost", "root", "", "terminarz");
$query = "SELECT DISTINCT wpis FROM zadania WHERE dataZadania BETWEEN '2020-07-01' AND '2020-07-07' AND wpis <> '';";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "$row[0]; ";
}
?></p>
</section>
<main>
<?php
mysqli_close($connection);
?>
</main>
<footer>
<a href="sierpien.html">Terminarz na sierpień</a>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Działanie skryptu 2: Wysyła do bazy danych zapytanie 2. Za pomocą znacznika sekcji definiuje blok, a w nim wyświetla dane dotyczące jednego zwróconego wiersza. Data zadania w nagłówku szóstego stopnia. Liczba wygenerowanych bloków odpowiada liczbie wierszy zwróconych zapytaniem.
Zapytanie 2 i pętla: dla każdego wiersza jeden <section class="day"> z datą w <h6>. Cudzysłowy wokół nazwy klasy są wewnątrz napisu w cudzysłowie, więc poprzedzasz je ukośnikiem \". Podgląd: 31 bloków - tyle, ile wierszy zwraca zapytanie (R.5.5).
Pojedynczy blok <section> wypisany przed pętlą, a w pętli tylko daty - wtedy jest jeden blok zamiast 31 (R.5.5).
kalendarz.php PHP zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Zadania na lipiec</title>
<link rel="stylesheet" href="styl6.css">
</head>
<body>
<section id="banner1">
<img src="logo1.png" alt="lipiec">
</section>
<section id="banner2">
<h1>TERMINARZ</h1>
<p>najbliższe zadania: <?php
$connection = mysqli_connect("localhost", "root", "", "terminarz");
$query = "SELECT DISTINCT wpis FROM zadania WHERE dataZadania BETWEEN '2020-07-01' AND '2020-07-07' AND wpis <> '';";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "$row[0]; ";
}
?></p>
</section>
<main>
<?php
$query = "SELECT dataZadania, wpis FROM zadania WHERE miesiac = 'lipiec';";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<section class=\"day\"><h6>$row[0]</h6></section>";
}
mysqli_close($connection);
?>
</main>
<footer>
<a href="sierpien.html">Terminarz na sierpień</a>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Pole wpis w paragrafie (akapicie).
Po nagłówku akapit z drugim polem wiersza. Podgląd jak na obrazie 2: dni z wpisami, 18 lipca ucięte „Wycieczka nad” (reszta schowana przez overflow: hidden). Najedź na dzień - zmieni kolor. Nazwy zmiennych są po angielsku i mówią, co przechowują (R.5.7).
kalendarz.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Zadania na lipiec</title>
<link rel="stylesheet" href="styl6.css">
</head>
<body>
<section id="banner1">
<img src="logo1.png" alt="lipiec">
</section>
<section id="banner2">
<h1>TERMINARZ</h1>
<p>najbliższe zadania: <?php
$connection = mysqli_connect("localhost", "root", "", "terminarz");
$query = "SELECT DISTINCT wpis FROM zadania WHERE dataZadania BETWEEN '2020-07-01' AND '2020-07-07' AND wpis <> '';";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "$row[0]; ";
}
?></p>
</section>
<main>
<?php
$query = "SELECT dataZadania, wpis FROM zadania WHERE miesiac = 'lipiec';";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
echo "<section class=\"day\"><h6>$row[0]</h6><p>$row[1]</p></section>";
}
mysqli_close($connection);
?>
</main>
<footer>
<a href="sierpien.html">Terminarz na sierpień</a>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Krok 30 · po tym etapie masz 33 z 33 kryteriów (pkt)
Wyświetla rozdzielone średnikiem i spacją wszystkie wartości zwrócone zapytaniem.
Trzy drobne poprawki:
implode("; ", $entries) - wpisy zbierasz do tablicy i sklejasz separatorem, który staje tylko między nimi; znika wiszący średnik po ostatnim wpisie,htmlspecialchars przy wypisywaniu - wpis z kalendarza to tekst wpisany przez człowieka; znak < albo & przeglądarka wzięłaby za początek znacznika,title z pełnym wpisem - overflow: hidden ucina długie wpisy („Wycieczka nad”), a po najechaniu przeglądarka pokaże całość w dymku.Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza, a średnik na końcu jest nawet na obrazie 2.
kalendarz.php PHP zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Zadania na lipiec</title>
<link rel="stylesheet" href="styl6.css">
</head>
<body>
<section id="banner1">
<img src="logo1.png" alt="lipiec">
</section>
<section id="banner2">
<h1>TERMINARZ</h1>
<p>najbliższe zadania: <?php
$connection = mysqli_connect("localhost", "root", "", "terminarz");
$query = "SELECT DISTINCT wpis FROM zadania WHERE dataZadania BETWEEN '2020-07-01' AND '2020-07-07' AND wpis <> '';";
$result = mysqli_query($connection, $query);
// while ($row = mysqli_fetch_row($result)) { echo "$row[0]; "; }
$entries = [];
while ($row = mysqli_fetch_row($result)) {
$entries[] = htmlspecialchars($row[0]);
}
echo implode("; ", $entries);
?></p>
</section>
<main>
<?php
$query = "SELECT dataZadania, wpis FROM zadania WHERE miesiac = 'lipiec';";
$result = mysqli_query($connection, $query);
while ($row = mysqli_fetch_row($result)) {
$entry = htmlspecialchars($row[1]);
echo "<section class=\"day\" title=\"$entry\"><h6>$row[0]</h6><p>$entry</p></section>";
}
mysqli_close($connection);
?>
</main>
<footer>
<a href="sierpien.html">Terminarz na sierpień</a>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Krok 31 · po tym etapie masz 33 z 33 kryteriów (pkt)
Po zakończeniu pracy utwórz w folderze z numerem zdającego 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.
W folderze: import.png, kalendarz.php, kw1.jpg - kw4.jpg, kwerendy.txt, logo1.png, przeglądarka.txt, sierpien.html, styl6.css. 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 30.
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.