Przejdź do głównej treści
INF.03-07-26.01-SGStyczeń 2026 · 49 kroków · ok. 90 min · 38 kryteriów z klucza

Rozwiązanie krok po kroku: Aplikacja internetowa stacji meteorologicznej (Wersja podstawowa)

Rozwiązanie buduje aplikację stacji meteorologicznej: baza pogoda (miejscowości, miesiące i pomiary temperatury) i cztery zapytania - średnia zaokrąglona ROUND(AVG(...), 2), INSERT z kluczem nadawanym automatycznie, złączenie z warunkiem i średnie z grupowaniem - potem trzy ikony pogody wycięte z jednego obrazu dokładnie do kształtu, strona index.php z dwoma blokami nagłówkowymi obok siebie, tabelą temperatur lipca i dwunastoma odnośnikami miesięcy, style w styl.css oraz dwa skrypty PHP: tabela z ikoną dobieraną instrukcją if zależnie od temperatury i średnia temperatura miesiąca wybranego odnośnikiem (parametr GET).

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, funkcjami z tabeli 1 arkusza (mysqli_query, mysqli_fetch_row, isset), a na końcu zostają przerobione na wersję z prawdziwych projektów: liczba zamiast surowego tekstu z adresu, zapytanie przygotowane, komunikat dla miesiąca bez pomiarów, przecinek dziesiętny i tekst alternatywny ikon.

Baza i obraz pogoda.png pochodzą z prawdziwego archiwum pliki9-2 (załącznik do arkusza, hasło w treści zadania). Zrzuty wyników zapytań są odtworzone z tej bazy - na egzaminie robisz je sam, z całego ekranu. Podgląd strony od kroków z PHP to wynik prawdziwego uruchomienia kodu z danego kroku w PHP 8.2 na bazie z arkusza; od skryptu 2 pokazuje stan po kliknięciu „Luty”, jak na ilustracji 5.

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, kolory w zmiennych, odnośniki miesięcy z tablicy PHP, a baza przez PDO z danymi pobranymi przed HTML-em, zapytaniem przygotowanym i htmlspecialchars od pierwszej linii - obie wersje są zgodne z kluczem.

Jak liczą się punkty. Klucz ma 38 kryteriów (R.1.1 - R.5.9), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 29 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.

Arkusz i pliki do pobrania Treść arkusza (PDF) Pobierz pliki rozwiązania (zip)

  1. Etap 1: Baza danych

    Kroki 1-7 · po tym etapie masz 6 z 38 kryteriów (pkt)

    Krok 1: Baza danych pogoda

    ok. 2 min
    Polecenie z arkusza

    Utwórz bazę danych o nazwie pogoda, z zestawem polskich znaków (np. utf8_polish_ci)

    Rozpakuj pliki9-2.7z z pulpitu (hasło &M3t3oPogoDa% - cyfry 3 zamiast „e” i znaki & oraz % na brzegach) i załóż folder z numerem zdającego. W archiwum są dwa pliki: pogoda.sql i obraz pogoda.png. W phpMyAdmin: Nowa, nazwa pogoda, porównywanie utf8_polish_ci.

    Typowe błędy

    Nazwa bazy musi brzmieć dokładnie pogoda - skrypty łączą się z bazą po nazwie, więc literówka zabiera też punkty za skrypty (R.5.1).

  2. Krok 2: Import tabel z pliku pogoda.sql

    ok. 2 min
    Polecenie z arkusza

    Z rozpakowanego archiwum zaimportuj tabele z pliku pogoda.sql do utworzonej bazy

    Zaznacz bazę pogoda, potem Import → pogoda.sql → Wykonaj. Powstają trzy tabele z ilustracji 1: miejscowosc, miesiace i pomiary, w której każdy wiersz to temperatura jednej miejscowości w jednym miesiącu (klucze obce id_miejscowosc i id_miesiac). Dane są przykładowe i mają drobne usterki - na przykład Bratysława ma wpisany kraj „Niemcy” - zadanie ich nie poprawia, więc zostawiasz je bez zmian.

  3. Krok 3: Zrzut ekranu import.png

    Kryteria:

    R.1.1 Wykonany import tabel do bazy danych pogoda - plik import.png

    ok. 2 min
    Polecenie z arkusza

    Wykonaj zrzut ekranu po imporcie. Zapisz zrzut w formacie PNG 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.png. Uwaga na formaty: import idzie do PNG, a zrzuty zapytań do JPEG - w tym arkuszu odwrotnie niż zwykle.

    Typowe błędy

    Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).

  4. Krok 4: Zapytanie 1: średnia temperatura lipca

    Kryteria: ,

    R.1.2 W pliku kwerendy.txt zapisane co najmniej jedno zapytanie SQL, wynikające z treści zadania

    R.1.3 Wykonane zapytanie 1 liczące średnią temperaturę dla miesiąca o id = 7. Wyliczona wartość jest zaokrąglona do dwóch miejsc po przecinku. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT ROUND(AVG(temperatura), 2) FROM pomiary WHERE id_miesiac = 7; oraz na zrzucie widoczna jest jedynie wartość 29,33

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 1: liczące średnią temperaturę dla miesiąca o identyfikatorze 7. Wyliczona wartość jest zaokrąglona do dwóch miejsc po przecinku

    • AVG(temperatura) - średnia z pomiarów,
    • ROUND(..., 2) - zaokrąglenie do dwóch miejsc po przecinku; funkcja obejmuje całe AVG,
    • FROM pomiary WHERE id_miesiac = 7 - tylko pomiary z lipca.

    Wynik: jedna wartość, 29.33 (bez ROUND byłoby 29.3333). Zapytanie zapisujesz w kwerendy.txt, zrzut jako kw1.jpg (cały ekran z paskiem zadań).

    kwerendy.txt Tekst nowy plik 
    -- Zapytanie 1
SELECT ROUND(AVG(temperatura), 2) FROM pomiary WHERE id_miesiac = 7;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 4

  5. Krok 5: Zapytanie 2: nowa miejscowość Kijów

    Kryteria:

    R.1.4 Wykonane zapytanie 2 wstawiające do tabeli miejscowosc wiersz z danymi „Kijów”, „Ukraina”. Klucz nadawany automatycznie. W pliku z kwerendami lub na zrzucie istnieje zapis np.: INSERT INTO miejscowosc(nazwa, kraj) VALUES ('Kijów','Ukraina'); (klucz główny pominięty lub NULL) oraz na zrzucie widoczny jest komunikat o poprawnym dodaniu rekordu lub tabela ze wstawionym rekordem

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 2: wstawiające do tabeli miejscowosc wiersz z danymi „Kijów”, „Ukraina”. Klucz nadawany automatycznie

    W nawiasie po nazwie tabeli wymieniasz tylko kolumny, które wypełniasz: nazwa i kraj. Kolumnę id pomijasz - baza nada ją sama (AUTO_INCREMENT), w tym rozwiązaniu 11. Teksty w apostrofach. Zrzut z komunikatem albo z tabelą po wstawieniu: kw2.jpg.

    Typowe błędy

    Wpisanie klucza ręcznie (VALUES (11, ...)) przeczy wymaganiu „klucz nadawany automatycznie” - klucz pomijasz albo podajesz NULL.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT ROUND(AVG(temperatura), 2) FROM pomiary WHERE id_miesiac = 7;

-- Zapytanie 2
INSERT INTO miejscowosc (nazwa, kraj) VALUES ('Kijów', 'Ukraina');
    Podgląd strony po tym kroku
    Podgląd strony po kroku 5

  6. Krok 6: Zapytanie 3: miasta i temperatury lipca

    Kryteria:

    R.1.5 Wykonane zapytanie 3 wybierające jedynie nazwy miast i krajów z tabeli miejscowosc oraz odpowiadające im temperatury w miesiącu o id = 7. Należy posłużyć się relacją. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT nazwa, kraj, temperatura FROM miejscowosc JOIN pomiary ON miejscowosc.id = id_miejscowosc WHERE id_miesiac = 7; oraz na zrzucie widocznych jest 6 rekordów z danymi: Warszawa Polska 25, Ostrawa Czechy 30, Gdańsk Polska 33, Brno Czechy 21, Praga Czechy 32, Hamburg Niemcy 35

    ok. 3 min
    Polecenie z arkusza

    Zapytanie 3: wybierające jedynie nazwy miast i krajów z tabeli miejscowosc oraz odpowiadające im temperatury w miesiącu o identyfikatorze 7. Należy posłużyć się relacją

    • SELECT miejscowosc.nazwa, miejscowosc.kraj, pomiary.temperatura - trzy pola z dwóch tabel,
    • FROM miejscowosc JOIN pomiary - złączenie,
    • ON miejscowosc.id = pomiary.id_miejscowosc - relacja: miejscowość pomiaru,
    • WHERE pomiary.id_miesiac = 7 - tylko lipiec.

    Wynik: sześć wierszy - Warszawa 25, Ostrawa 30, Gdańsk 33, Brno 21, Praga 32, Hamburg 35. To dokładnie zawartość tabeli z ilustracji 3. Zrzut: kw3.jpg.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT ROUND(AVG(temperatura), 2) FROM pomiary WHERE id_miesiac = 7;

-- Zapytanie 2
INSERT INTO miejscowosc (nazwa, kraj) VALUES ('Kijów', 'Ukraina');

-- Zapytanie 3
SELECT miejscowosc.nazwa, miejscowosc.kraj, pomiary.temperatura FROM miejscowosc JOIN pomiary ON miejscowosc.id = pomiary.id_miejscowosc WHERE pomiary.id_miesiac = 7;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 6

  7. Krok 7: Zapytanie 4: średnie temperatury miesięcy

    Kryteria:

    R.1.6 Wykonane zapytanie 4 wybierające jedynie nazwy miesięcy oraz odpowiadające im średnie temperatury. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT nazwa, AVG(temperatura) FROM miesiace JOIN pomiary ON miesiace.id = id_miesiac GROUP BY nazwa; oraz na zrzucie widocznych jest dokładnie 12 miesięcy ze średnimi temperaturami

    ok. 3 min
    Polecenie z arkusza

    Zapytanie 4: wybierające jedynie nazwy miesięcy z tabeli miesiace oraz odpowiadające im średnie temperatury. Należy posłużyć się relacją

    • SELECT miesiace.nazwa, AVG(pomiary.temperatura) - nazwa miesiąca i średnia,
    • FROM miesiace JOIN pomiary ON miesiace.id = pomiary.id_miesiac - relacja miesiąc - pomiar,
    • GROUP BY miesiace.nazwa - jedna grupa na miesiąc; AVG liczy średnią w każdej grupie.

    Wynik: dokładnie 12 wierszy, po jednym na miesiąc (w kolejności alfabetycznej nazw, bo po nich grupujesz). Zrzut: kw4.jpg.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT ROUND(AVG(temperatura), 2) FROM pomiary WHERE id_miesiac = 7;

-- Zapytanie 2
INSERT INTO miejscowosc (nazwa, kraj) VALUES ('Kijów', 'Ukraina');

-- Zapytanie 3
SELECT miejscowosc.nazwa, miejscowosc.kraj, pomiary.temperatura FROM miejscowosc JOIN pomiary ON miejscowosc.id = pomiary.id_miejscowosc WHERE pomiary.id_miesiac = 7;

-- Zapytanie 4
SELECT miesiace.nazwa, AVG(pomiary.temperatura) FROM miesiace JOIN pomiary ON miesiace.id = pomiary.id_miesiac GROUP BY miesiace.nazwa;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 7

  8. Etap 2: Grafika i strona HTML

    Kroki 8-27 · po tym etapie masz 17 z 38 kryteriów (pkt)

    Krok 8: Grafika slonce.png: kadr do kształtu słońca

    Kryteria:

    R.2.2 Przynajmniej jedna grafika została przycięta dokładnie do kształtu: kształt nie został obcięty oraz nie ma wolnej przestrzeni z żadnej strony (sprawdzić bez powiększania grafiki)

    ok. 4 min
    Polecenie z arkusza

    Z pliku pogoda.png należy wyciąć kształty pełnego słońca, słońca za chmurą i deszczu. Kształty mają wypełniać całą przestrzeń obrazu, tak jak zaznaczony obszar kadrowania na ilustracji 2a. Następnie każdy obraz należy przeskalować do wymiarów dokładnie 100 px na 100 px. Zapisać grafiki jako slonce.png, chmury.png, deszcz.png, zgodnie z ilustracjami 2b, 2c, 2d z zachowaniem przezroczystości.

    pogoda.png ma już przezroczyste tło i sześć ikon. W GIMP-ie zaznaczasz prostokątem samo słońce (lewy górny róg) i używasz Obraz → Przytnij do zaznaczenia, a potem Obraz → Przytnij do zawartości - GIMP sam obetnie przezroczyste pasy, aż końce promieni dotkną wszystkich czterech krawędzi, jak kadr na ilustracji 2a. Kadr słońca: 211 × 212 px. Obraz → Skaluj obraz, łańcuch rozpięty, 100 × 100 px, i Plik → Wyeksportuj jako slonce.png - PNG zachowa przezroczystość.

    Typowe błędy

    Kadr „na oko” z marginesem zostawia wolną przestrzeń przy brzegach - klucz sprawdza, czy kształt dotyka krawędzi i nie jest obcięty (R.2.2).

    Podgląd strony po tym kroku
    Podgląd strony po kroku 8

  9. Krok 9: Grafika chmury.png: słońce za chmurą

    ok. 3 min
    Polecenie z arkusza

    Zapisać grafiki jako slonce.png, chmury.png, deszcz.png, zgodnie z ilustracjami 2b, 2c, 2d z zachowaniem przezroczystości.

    Tak samo dla ikony z prawego górnego rogu. Jej kadr ma 229 × 212 px - chmura dochodzi do samej prawej krawędzi pliku pogoda.png. Kadr nie jest kwadratem, więc skalowanie do 100 × 100 lekko spłaszcza ikonę w poziomie; arkusz wymaga dokładnie tych wymiarów, a na ilustracji 2c widać to samo.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 9

  10. Krok 10: Grafika deszcz.png: chmura z deszczem

    Kryteria:

    R.2.1 Grafiki slonce.png , chmury.png , deszcz.png przedstawiają kolejno słońce, słońce za chmurą i chmurę z deszczem. Rozmiary przynajmniej jednej grafiki to dokładnie 100 px na 100 px oraz zachowana przezroczystość

    ok. 3 min
    Polecenie z arkusza

    Zapisać grafiki jako slonce.png, chmury.png, deszcz.png, zgodnie z ilustracjami 2b, 2c, 2d z zachowaniem przezroczystości.

    Ikona z prawej kolumny w środkowym rzędzie, chmura z kroplami. Kadr: 185 × 158 px, po skalowaniu 100 × 100. Masz komplet trzech ikon: słońce, słońce za chmurą i deszcz, każda 100 × 100 z przezroczystym tłem (R.2.1).

    Typowe błędy

    Ikona „trzy chmury” z lewej strony środkowego rzędu to nie deszcz - arkusz wymaga chmury z kroplami.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 10

  11. Krok 11: Plik index.php w HTML5

    ok. 2 min
    Polecenie z arkusza

    Składa się ze strony index.php. Zapisana w języku HTML5

    Deklaracja <!DOCTYPE html> i szkielet strony. Rozszerzenie .php, bo dojdą skrypty; na egzaminie plik leży w htdocs XAMPP-a i otwierasz go przez http://localhost/....

    index.php PHP nowy plik 
    <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  12. Krok 12: Język strony

    Kryteria:

    R.2.3 W pliku index.php znajduje się deklaracja HTML5 <!DOCTYPE HTML> i deklaracja języka zawartości witryny: polski np. <html lang="pl">

    ok. 1 min
    Polecenie z arkusza

    Zadeklarowany polski język zawartości witryny

    Atrybut lang="pl" w znaczniku <html> - razem z deklaracją HTML5 to jedno kryterium klucza.

    index.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  13. Krok 13: Kodowanie polskich znaków

    ok. 1 min
    Polecenie z arkusza

    Jawnie zastosowany właściwy standard kodowania polskich znaków

    <meta charset="UTF-8"> jako pierwszy element <head> - bez niego „Średnie temperatury” mogą wyświetlić się krzakami.

    index.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  14. Krok 14: Tytuł strony

    Kryteria:

    R.2.4 W sekcji head znajduje się jawnie podany standard kodowania polskich znaków i tytuł strony "Pogoda”

    ok. 1 min
    Polecenie z arkusza

    Tytuł strony widoczny na karcie przeglądarki: „Pogoda”

    <title> w <head>. Kodowanie i tytuł to razem jedno kryterium.

    index.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  15. Krok 15: Podpięcie arkusza stylów

    Kryteria:

    R.3.2 Strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl.css formatowanie CSS pochodzi jedynie z tego arkusza

    ok. 1 min
    Polecenie z arkusza

    Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony

    Nazwa pliku: styl.css (nie style.css). Całe formatowanie ma pochodzić z tego pliku - żadnych atrybutów style w HTML-u.

    index.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  16. Krok 16: Bloki: dwa nagłówki, główny z dwiema sekcjami, stopka

    Kryteria:

    R.2.5 W sekcji body zdefiniowany jest podział na bloki za pomocą semantycznych znaczników HTML5: header+header, main->section+section, footer (dopuszcza się zastosowanie bloków pomocniczych)

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki zrealizowany za pomocą semantycznych znaczników bloków języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków na stronie był zgodny z ilustracją 4

    Klucz wymaga wprost dwóch header, potem main z dwoma section i footer (R.2.5). Na stronie może być kilka znaczników <header> - każdy jest nagłówkiem swojej części. Bloki nagłówkowe mają różne szerokości, a sekcje różne zawartości, więc dostają identyfikatory: logo, title, left, right.

    index.php PHP zmienione: 12 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="logo">
    </header>
    <header id="title">
    </header>
    <main>
        <section id="left">
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  17. Krok 17: Blok nagłówkowy 1: obraz słońca

    Kryteria:

    R.2.7 W bloku nagłówkowym 1 umieszczono grafikę ze słońcem z tekstem alternatywnym "Słonecznie"

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku nagłówkowego 1: obraz slonce.png z tekstem alternatywnym „Słonecznie”

    <img> z atrybutem alt - tekst alternatywny przeczyta czytnik ekranu i wyświetli przeglądarka, gdy obrazu zabraknie.

    index.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="logo">
        <img src="slonce.png" alt="Słonecznie">
    </header>
    <header id="title">
    </header>
    <main>
        <section id="left">
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  18. Krok 18: Blok nagłówkowy 2: tytuł

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku nagłówkowego 2: nagłówek pierwszego stopnia o treści „Pogoda w Europie”

    Pierwszego stopnia, czyli <h1>.

    index.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="logo">
        <img src="slonce.png" alt="Słonecznie">
    </header>
    <header id="title">
        <h1>Pogoda w Europie</h1>
    </header>
    <main>
        <section id="left">
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  19. Krok 19: Sekcja lewa: nagłówek

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku głównego: blok sekcji lewej i blok sekcji prawej. Zawartość bloku sekcji lewej: Nagłówek drugiego stopnia o treści: „Temperatury w lipcu”

    <h2> na początku sekcji left.

    index.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="logo">
        <img src="slonce.png" alt="Słonecznie">
    </header>
    <header id="title">
        <h1>Pogoda w Europie</h1>
    </header>
    <main>
        <section id="left">
            <h2>Temperatury w lipcu</h2>
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  20. Krok 20: Tabela: wiersz nagłówkowy

    Kryteria:

    R.2.9 Pierwszy wiersz tabeli zawiera komórki nagłówkowe zastosowane znaczniki <tr> i <th>

    ok. 2 min
    Polecenie z arkusza

    Tabela o czterech kolumnach. Pierwszy wiersz zawiera komórki nagłówkowe o treści „Miasto”, „Kraj”, „Temperatura”, „Pogoda”. Tabela jest wypełniona skryptem 1

    Pierwszy wiersz <tr> z czterema komórkami nagłówkowymi <th> - przeglądarka pogrubia je i wyśrodkowuje. Wiersze z danymi (<td>) dopisze Skrypt 1, dlatego zostawiasz po nagłówku miejsce przed </table>.

    index.php PHP zmienione: 8 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="logo">
        <img src="slonce.png" alt="Słonecznie">
    </header>
    <header id="title">
        <h1>Pogoda w Europie</h1>
    </header>
    <main>
        <section id="left">
            <h2>Temperatury w lipcu</h2>
            <table>
                <tr>
                    <th>Miasto</th>
                    <th>Kraj</th>
                    <th>Temperatura</th>
                    <th>Pogoda</th>
                </tr>
            </table>
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  21. Krok 21: Sekcja prawa: nagłówek

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku sekcji prawej: Nagłówek drugiego stopnia o treści: „Średnie temperatury w roku”

    To samo w sekcji right.

    index.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="logo">
        <img src="slonce.png" alt="Słonecznie">
    </header>
    <header id="title">
        <h1>Pogoda w Europie</h1>
    </header>
    <main>
        <section id="left">
            <h2>Temperatury w lipcu</h2>
            <table>
                <tr>
                    <th>Miasto</th>
                    <th>Kraj</th>
                    <th>Temperatura</th>
                    <th>Pogoda</th>
                </tr>
            </table>
        </section>
        <section id="right">
            <h2>Średnie temperatury w roku</h2>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  22. Krok 22: Odnośnik „Styczeń” z identyfikatorem 1

    Kryteria:

    R.3.4 Przynajmniej jeden odnośnik wysyła identyfikator miesiąca (styczeń: 1, luty: 2 itd.) do tego samego pliku, np. <a href="index.php?id=1">Styczeń</a>

    ok. 2 min
    Polecenie z arkusza

    Dwanaście odnośników dla wszystkich miesięcy roku: „Styczeń” prowadzi do adresu index.php i przesyła metodą GET identyfikator miesiąca równy 1

    Parametr metodą GET to dopisek do adresu po znaku zapytania: index.php?id=1. Nazwa parametru (id) jest dowolna, ale ta sama nazwa musi potem stać w skrypcie 2 ($_GET["id"]). Identyfikatory to klucze z tabeli miesiace: styczeń 1, luty 2 i tak dalej.

    index.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="logo">
        <img src="slonce.png" alt="Słonecznie">
    </header>
    <header id="title">
        <h1>Pogoda w Europie</h1>
    </header>
    <main>
        <section id="left">
            <h2>Temperatury w lipcu</h2>
            <table>
                <tr>
                    <th>Miasto</th>
                    <th>Kraj</th>
                    <th>Temperatura</th>
                    <th>Pogoda</th>
                </tr>
            </table>
        </section>
        <section id="right">
            <h2>Średnie temperatury w roku</h2>
            <a href="index.php?id=1">Styczeń</a>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  23. Krok 23: Odnośnik „Luty”

    ok. 1 min
    Polecenie z arkusza

    „Luty” prowadzi do adresu index.php i przesyła metodą GET identyfikator miesiąca równy 2

    Ten sam wzór, inna liczba i inny tekst. Odnośniki są elementami liniowymi, więc stoją obok siebie i zawijają się do następnego wiersza, gdy brakuje miejsca.

    index.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="logo">
        <img src="slonce.png" alt="Słonecznie">
    </header>
    <header id="title">
        <h1>Pogoda w Europie</h1>
    </header>
    <main>
        <section id="left">
            <h2>Temperatury w lipcu</h2>
            <table>
                <tr>
                    <th>Miasto</th>
                    <th>Kraj</th>
                    <th>Temperatura</th>
                    <th>Pogoda</th>
                </tr>
            </table>
        </section>
        <section id="right">
            <h2>Średnie temperatury w roku</h2>
            <a href="index.php?id=1">Styczeń</a>
            <a href="index.php?id=2">Luty</a>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  24. Krok 24: Odnośnik „Marzec”

    ok. 1 min
    Polecenie z arkusza

    „Marzec” prowadzi do adresu index.php i przesyła metodą GET identyfikator miesiąca równy 3

    Trzeci odnośnik, id=3.

    index.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="logo">
        <img src="slonce.png" alt="Słonecznie">
    </header>
    <header id="title">
        <h1>Pogoda w Europie</h1>
    </header>
    <main>
        <section id="left">
            <h2>Temperatury w lipcu</h2>
            <table>
                <tr>
                    <th>Miasto</th>
                    <th>Kraj</th>
                    <th>Temperatura</th>
                    <th>Pogoda</th>
                </tr>
            </table>
        </section>
        <section id="right">
            <h2>Średnie temperatury w roku</h2>
            <a href="index.php?id=1">Styczeń</a>
            <a href="index.php?id=2">Luty</a>
            <a href="index.php?id=3">Marzec</a>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  25. Krok 25: Odnośniki od „Kwiecień” do „Grudzień”

    Kryteria:

    R.3.3 Utworzono 12 odnośników z nazwami miesięcy (dopuszczalne literówki w nazwach miesięcy)

    ok. 2 min
    Polecenie z arkusza

    „Grudzień” prowadzi do adresu index.php i przesyła metodą GET identyfikator miesiąca równy 12

    Arkusz wypisuje trzy pierwsze miesiące i ostatni, a resztę zastępuje wielokropkiem - dopisujesz kwiecień (4) do grudnia (12) według tego samego wzoru. Razem dwanaście odnośników, jak w kluczu (R.3.3).

    Typowe błędy

    Najczęstszy błąd przy kopiowaniu linii: zmieniony tekst odnośnika, a stara liczba w adresie (np. „Maj” z id=4). Każdy odnośnik sprawdź kliknięciem po napisaniu skryptu 2.

    index.php PHP zmienione: 9 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="logo">
        <img src="slonce.png" alt="Słonecznie">
    </header>
    <header id="title">
        <h1>Pogoda w Europie</h1>
    </header>
    <main>
        <section id="left">
            <h2>Temperatury w lipcu</h2>
            <table>
                <tr>
                    <th>Miasto</th>
                    <th>Kraj</th>
                    <th>Temperatura</th>
                    <th>Pogoda</th>
                </tr>
            </table>
        </section>
        <section id="right">
            <h2>Średnie temperatury w roku</h2>
            <a href="index.php?id=1">Styczeń</a>
            <a href="index.php?id=2">Luty</a>
            <a href="index.php?id=3">Marzec</a>
            <a href="index.php?id=4">Kwiecień</a>
            <a href="index.php?id=5">Maj</a>
            <a href="index.php?id=6">Czerwiec</a>
            <a href="index.php?id=7">Lipiec</a>
            <a href="index.php?id=8">Sierpień</a>
            <a href="index.php?id=9">Wrzesień</a>
            <a href="index.php?id=10">Październik</a>
            <a href="index.php?id=11">Listopad</a>
            <a href="index.php?id=12">Grudzień</a>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  26. Krok 26: Paragraf pod odnośnikami

    ok. 1 min
    Polecenie z arkusza

    Paragraf o treści „Średnia temperatura dla wybranego miesiąca wynosi”

    Akapit <p> pod odnośnikami. Pod nim stanie wynik skryptu 2 - nagłówek z temperaturą.

    index.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="logo">
        <img src="slonce.png" alt="Słonecznie">
    </header>
    <header id="title">
        <h1>Pogoda w Europie</h1>
    </header>
    <main>
        <section id="left">
            <h2>Temperatury w lipcu</h2>
            <table>
                <tr>
                    <th>Miasto</th>
                    <th>Kraj</th>
                    <th>Temperatura</th>
                    <th>Pogoda</th>
                </tr>
            </table>
        </section>
        <section id="right">
            <h2>Średnie temperatury w roku</h2>
            <a href="index.php?id=1">Styczeń</a>
            <a href="index.php?id=2">Luty</a>
            <a href="index.php?id=3">Marzec</a>
            <a href="index.php?id=4">Kwiecień</a>
            <a href="index.php?id=5">Maj</a>
            <a href="index.php?id=6">Czerwiec</a>
            <a href="index.php?id=7">Lipiec</a>
            <a href="index.php?id=8">Sierpień</a>
            <a href="index.php?id=9">Wrzesień</a>
            <a href="index.php?id=10">Październik</a>
            <a href="index.php?id=11">Listopad</a>
            <a href="index.php?id=12">Grudzień</a>
            <p>Średnia temperatura dla wybranego miesiąca wynosi</p>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  27. Krok 27: Stopka

    Kryteria:

    R.2.6 W bloku nagłówkowym 2 znajduje się <h1>: "Pogoda w Europie", w bloku sekcji lewej <h2>: "Temperatury w lipcu", w bloku sekcji prawej <h2>: "Średnie temperatury w roku" i <p> "Średnia temperatura dla wybranego miesiąca wynosi" oraz w stopce <p> z numerem zdającego

    ok. 1 min
    Polecenie z arkusza

    Zawartość stopki: paragraf o treści „Numer zdającego: ”, dalej wstawiony numer zdającego

    Akapit w <footer>. Na egzaminie po dwukropku wpisujesz swój numer zdającego (PESEL) - tutaj stoi imię i nazwisko autora rozwiązania. Z tym krokiem są już wszystkie nagłówki i akapity z klucza: <h1>, dwa <h2>, akapit w sekcji prawej i w stopce.

    index.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="logo">
        <img src="slonce.png" alt="Słonecznie">
    </header>
    <header id="title">
        <h1>Pogoda w Europie</h1>
    </header>
    <main>
        <section id="left">
            <h2>Temperatury w lipcu</h2>
            <table>
                <tr>
                    <th>Miasto</th>
                    <th>Kraj</th>
                    <th>Temperatura</th>
                    <th>Pogoda</th>
                </tr>
            </table>
        </section>
        <section id="right">
            <h2>Średnie temperatury w roku</h2>
            <a href="index.php?id=1">Styczeń</a>
            <a href="index.php?id=2">Luty</a>
            <a href="index.php?id=3">Marzec</a>
            <a href="index.php?id=4">Kwiecień</a>
            <a href="index.php?id=5">Maj</a>
            <a href="index.php?id=6">Czerwiec</a>
            <a href="index.php?id=7">Lipiec</a>
            <a href="index.php?id=8">Sierpień</a>
            <a href="index.php?id=9">Wrzesień</a>
            <a href="index.php?id=10">Październik</a>
            <a href="index.php?id=11">Listopad</a>
            <a href="index.php?id=12">Grudzień</a>
            <p>Średnia temperatura dla wybranego miesiąca wynosi</p>
        </section>
    </main>
    <footer>
        <p>Numer zdającego: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  28. Etap 3: Styl CSS

    Kroki 28-38 · po tym etapie masz 28 z 38 kryteriów (pkt)

    Krok 28: Plik styl.css: krój i wyrównanie

    Kryteria:

    R.4.1 dla selektora body: krój czcionki Georgia, wyrównanie tekstu do środka

    ok. 1 min
    Polecenie z arkusza

    Dla selektora ciała strony: krój czcionki Georgia, wyrównanie tekstu do środka

    Selektor znacznika body - zgodnie z uwagą arkusza. Krój i wyrównanie dziedziczą wszystkie elementy strony, także komórki tabeli i odnośniki.

    styl.css CSS nowy plik 
    body {
    font-family: Georgia;
    text-align: center;
}
    Podgląd strony po tym kroku (index.php)

  29. Krok 29: Bloki nagłówkowe: tło, kolor i wysokość

    ok. 1 min
    Polecenie z arkusza

    Wspólne dla obu bloków nagłówkowych: kolor tła #388E3C, biały kolor czcionki, wysokość 100 px

    Selektor header obejmuje oba bloki nagłówkowe naraz. Wysokość 100 px to dokładnie wysokość ikony słońca.

    styl.css CSS zmienione: 5 linii 
    body {
    font-family: Georgia;
    text-align: center;
}
header {
    background-color: #388E3C;
    color: white;
    height: 100px;
}
    Podgląd strony po tym kroku (index.php)

  30. Krok 30: Bloki nagłówkowe: szerokości

    ok. 1 min
    Polecenie z arkusza

    Dodatkowo szerokość pierwszego bloku nagłówkowego 20%, drugiego 80%

    Tu przydają się identyfikatory #logo i #title. Bloki mają już właściwe szerokości, ale nadal stoją jeden pod drugim - obok siebie ustawisz je w kroku o układzie.

    styl.css CSS zmienione: 6 linii 
    body {
    font-family: Georgia;
    text-align: center;
}
header {
    background-color: #388E3C;
    color: white;
    height: 100px;
}
#logo {
    width: 20%;
}
#title {
    width: 80%;
}
    Podgląd strony po tym kroku (index.php)

  31. Krok 31: Sekcje: tło, szerokość i wysokość

    Kryteria:

    R.4.4 wysokość: oba bloki nagłówkowe - 100px, oba bloki sekcji - 600px

    ok. 1 min
    Polecenie z arkusza

    Wspólne dla bloków sekcji lewej i prawej: kolor tła #DCE775, szerokość 50%, wysokość 600 px

    Jedna reguła dla obu sekcji. Z wysokością sekcji masz komplet wysokości z klucza (R.4.4).

    styl.css CSS zmienione: 5 linii 
    body {
    font-family: Georgia;
    text-align: center;
}
header {
    background-color: #388E3C;
    color: white;
    height: 100px;
}
#logo {
    width: 20%;
}
#title {
    width: 80%;
}
section {
    background-color: #DCE775;
    width: 50%;
    height: 600px;
}
    Podgląd strony po tym kroku (index.php)

  32. Krok 32: Stopka

    Kryteria:

    R.4.2 kolor tła: oba bloki nagłówkowe i stopka - #388E3C, blok sekcji lewej i prawej - #DCE775

    ok. 1 min
    Polecenie z arkusza

    Dla bloku stopki: kolor tła #388E3C, biały kolor czcionki

    Te same barwy co bloki nagłówkowe. To zamyka kryterium kolorów tła (R.4.2): bloki nagłówkowe, sekcje i stopka.

    styl.css CSS zmienione: 4 linie 
    body {
    font-family: Georgia;
    text-align: center;
}
header {
    background-color: #388E3C;
    color: white;
    height: 100px;
}
#logo {
    width: 20%;
}
#title {
    width: 80%;
}
section {
    background-color: #DCE775;
    width: 50%;
    height: 600px;
}
footer {
    background-color: #388E3C;
    color: white;
}
    Podgląd strony po tym kroku (index.php)

  33. Krok 33: Układ bloków zgodny z ilustracją 4

    Kryteria:

    R.3.1 Układ bloków po uruchomieniu strony w przeglądarce jest zgodny z ilustracją 4 w arkuszu egzaminacyjnym (prawidłowo zastosowano właściwości CSS decydujące o układzie bloków na stronie, np. float i clear albo display flex albo grid albo position)

    ok. 3 min
    Polecenie z arkusza

    Podział strony na bloki zrealizowany za pomocą semantycznych znaczników bloków języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków na stronie był zgodny z ilustracją 4

    Dwa problemy: nagłówki obok siebie i sekcje obok siebie. Nagłówkom dajesz float: left - pływają do lewej i stają w rzędzie (20% + 80% = 100%). Blok główny dostaje clear: both, czyli zaczyna się dopiero pod pływającymi nagłówkami, oraz display: flex, który ustawia sekcje w rzędzie. Stopka stoi pod <main> w zwykłym przepływie (R.3.1).

    Typowe błędy

    Bez clear: both blok główny wjeżdża pod pływające nagłówki - w inspektorze bloki na siebie zachodzą i punkt za układ przepada.

    styl.css CSS zmienione: 7 linii 
    body {
    font-family: Georgia;
    text-align: center;
}
header {
    background-color: #388E3C;
    color: white;
    height: 100px;
}
#logo {
    width: 20%;
}
#title {
    width: 80%;
}
section {
    background-color: #DCE775;
    width: 50%;
    height: 600px;
}
footer {
    background-color: #388E3C;
    color: white;
}
header {
    float: left;
}
main {
    clear: both;
    display: flex;
}
    Podgląd strony po tym kroku (index.php)

  34. Krok 34: Tabela

    Kryteria: ,

    R.4.5 szerokość: pierwszy blok nagłówkowy - 20%, drugi - 80%, oba bloki sekcji - 50% (width lub grid-template-columns lub flex) , selektor table - 80%

    R.4.7 styl obramowania dla tabeli - 2px dashed #388E3C

    ok. 2 min
    Polecenie z arkusza

    Dla selektora tabeli: szerokość 80%, marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę, obramowanie linią kreskowaną o szerokości 2 px i kolorze #388E3C

    margin: auto przy ustalonej szerokości dzieli wolne miejsce po równo na lewo i prawo - tabela staje na środku sekcji. Linia kreskowana to dashed (kropkowana byłaby dotted). Z szerokością tabeli masz komplet szerokości z klucza (R.4.5).

    styl.css CSS zmienione: 5 linii 
    body {
    font-family: Georgia;
    text-align: center;
}
header {
    background-color: #388E3C;
    color: white;
    height: 100px;
}
#logo {
    width: 20%;
}
#title {
    width: 80%;
}
section {
    background-color: #DCE775;
    width: 50%;
    height: 600px;
}
footer {
    background-color: #388E3C;
    color: white;
}
header {
    float: left;
}
main {
    clear: both;
    display: flex;
}
table {
    width: 80%;
    margin: auto;
    border: 2px dashed #388E3C;
}
    Podgląd strony po tym kroku (index.php)

  35. Krok 35: Obrazy w tabeli: wysokość 70 px

    Kryteria:

    R.4.8 wysokość jedynie dla obrazów w tabeli - 70px

    ok. 1 min
    Polecenie z arkusza

    Jedynie dla obrazów w tabeli: wysokość 70 px

    „Jedynie w tabeli” to selektor potomka table img - obejmuje obrazy wewnątrz tabeli, a słońce w bloku nagłówkowym zostaje 100 px. Sam selektor img zmniejszyłby oba.

    styl.css CSS zmienione: 3 linie 
    body {
    font-family: Georgia;
    text-align: center;
}
header {
    background-color: #388E3C;
    color: white;
    height: 100px;
}
#logo {
    width: 20%;
}
#title {
    width: 80%;
}
section {
    background-color: #DCE775;
    width: 50%;
    height: 600px;
}
footer {
    background-color: #388E3C;
    color: white;
}
header {
    float: left;
}
main {
    clear: both;
    display: flex;
}
table {
    width: 80%;
    margin: auto;
    border: 2px dashed #388E3C;
}
table img {
    height: 70px;
}
    Podgląd strony po tym kroku (index.php)

  36. Krok 36: Odnośniki

    Kryteria: ,

    R.4.3 kolor czcionki: oba bloki nagłówkowe i stopka - biały, selektor a - #388E3C

    R.4.9 styl dla odnośnika: czcionka pochylona o rozmiarze 200%

    ok. 2 min
    Polecenie z arkusza

    Dla selektora odnośnika: kolor czcionki #388E3C, marginesy zewnętrzne 20 px, czcionka pochylona o rozmiarze 200%

    Czcionka pochylona to font-style: italic. Odnośnik jest elementem liniowym, więc margin rozsuwa odnośniki tylko w poziomie. Ta reguła zamyka kryterium kolorów czcionki (R.4.3).

    styl.css CSS zmienione: 6 linii 
    body {
    font-family: Georgia;
    text-align: center;
}
header {
    background-color: #388E3C;
    color: white;
    height: 100px;
}
#logo {
    width: 20%;
}
#title {
    width: 80%;
}
section {
    background-color: #DCE775;
    width: 50%;
    height: 600px;
}
footer {
    background-color: #388E3C;
    color: white;
}
header {
    float: left;
}
main {
    clear: both;
    display: flex;
}
table {
    width: 80%;
    margin: auto;
    border: 2px dashed #388E3C;
}
table img {
    height: 70px;
}
a {
    color: #388E3C;
    margin: 20px;
    font-style: italic;
    font-size: 200%;
}
    Podgląd strony po tym kroku (index.php)

  37. Krok 37: Paragrafy bez marginesów

    Kryteria:

    R.4.6 marginesy zewnętrzne (margin) : dla tabeli - auto, dla odnośnika - 20px, selektora p - 0

    ok. 1 min
    Polecenie z arkusza

    Dla selektora paragrafu: marginesy zewnętrzne 0 px

    Selektor p obejmuje akapit w sekcji prawej i w stopce - stopka robi się niska, jak na ilustracji 3. Komplet marginesów z klucza (R.4.6).

    styl.css CSS zmienione: 3 linie 
    body {
    font-family: Georgia;
    text-align: center;
}
header {
    background-color: #388E3C;
    color: white;
    height: 100px;
}
#logo {
    width: 20%;
}
#title {
    width: 80%;
}
section {
    background-color: #DCE775;
    width: 50%;
    height: 600px;
}
footer {
    background-color: #388E3C;
    color: white;
}
header {
    float: left;
}
main {
    clear: both;
    display: flex;
}
table {
    width: 80%;
    margin: auto;
    border: 2px dashed #388E3C;
}
table img {
    height: 70px;
}
a {
    color: #388E3C;
    margin: 20px;
    font-style: italic;
    font-size: 200%;
}
p {
    margin: 0;
}
    Podgląd strony po tym kroku (index.php)

  38. Krok 38: Odnośnik pod kursorem

    Kryteria:

    R.4.10 gdy kursor znajdzie się na odnośniku jego kolor tła zmienia się na #388E3C, a kolor czcionki na #DCE775

    ok. 1 min
    Polecenie z arkusza

    Gdy kursor znajdzie się na odnośniku jego kolor tła zmienia się na #388E3C, a kolor czcionki na #DCE775

    Pseudoklasa :hover zamienia kolory miejscami: ciemne tło, jasna czcionka - na ilustracji 5 kursor stoi na „Luty”.

    styl.css CSS zmienione: 4 linie 
    body {
    font-family: Georgia;
    text-align: center;
}
header {
    background-color: #388E3C;
    color: white;
    height: 100px;
}
#logo {
    width: 20%;
}
#title {
    width: 80%;
}
section {
    background-color: #DCE775;
    width: 50%;
    height: 600px;
}
footer {
    background-color: #388E3C;
    color: white;
}
header {
    float: left;
}
main {
    clear: both;
    display: flex;
}
table {
    width: 80%;
    margin: auto;
    border: 2px dashed #388E3C;
}
table img {
    height: 70px;
}
a {
    color: #388E3C;
    margin: 20px;
    font-style: italic;
    font-size: 200%;
}
p {
    margin: 0;
}
a:hover {
    background-color: #388E3C;
    color: #DCE775;
}
    Podgląd strony po tym kroku (index.php)

  39. Etap 4: Skrypty PHP

    Kroki 39-45 · po tym etapie masz 38 z 38 kryteriów (pkt)

    Krok 39: Połączenie z bazą i zamknięcie na końcu

    Kryteria: ,

    R.5.1 Skrypt realizuje połączenie z serwerem bazy danych i wybór bazy pogoda

    R.5.2 Ostatnią operacją na bazie jest jej zamknięcie

    ok. 2 min
    Polecenie z arkusza

    Łączą się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie pogoda. Na końcu działania skrypt zamyka połączenie z serwerem

    Pierwszy skrypt na stronie stoi w tabeli sekcji lewej, więc tam otwierasz połączenie: mysqli_connect z czterema argumentami łączy się z serwerem i od razu wybiera bazę. Uchwyt w zmiennej $connection posłuży obu skryptom. Ostatni blok PHP, pod akapitem w sekcji prawej, na razie tylko zamyka połączenie - skrypt 2 dopiszesz nad tą linią (R.5.1, R.5.2). Od tego kroku podgląd to wynik prawdziwego uruchomienia strony.

    index.php PHP zmienione: 6 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="logo">
        <img src="slonce.png" alt="Słonecznie">
    </header>
    <header id="title">
        <h1>Pogoda w Europie</h1>
    </header>
    <main>
        <section id="left">
            <h2>Temperatury w lipcu</h2>
            <table>
                <tr>
                    <th>Miasto</th>
                    <th>Kraj</th>
                    <th>Temperatura</th>
                    <th>Pogoda</th>
                </tr>
                <?php
                    $connection = mysqli_connect("localhost", "root", "", "pogoda");
                ?>
            </table>
        </section>
        <section id="right">
            <h2>Średnie temperatury w roku</h2>
            <a href="index.php?id=1">Styczeń</a>
            <a href="index.php?id=2">Luty</a>
            <a href="index.php?id=3">Marzec</a>
            <a href="index.php?id=4">Kwiecień</a>
            <a href="index.php?id=5">Maj</a>
            <a href="index.php?id=6">Czerwiec</a>
            <a href="index.php?id=7">Lipiec</a>
            <a href="index.php?id=8">Sierpień</a>
            <a href="index.php?id=9">Wrzesień</a>
            <a href="index.php?id=10">Październik</a>
            <a href="index.php?id=11">Listopad</a>
            <a href="index.php?id=12">Grudzień</a>
            <p>Średnia temperatura dla wybranego miesiąca wynosi</p>
            <?php
                mysqli_close($connection);
            ?>
        </section>
    </main>
    <footer>
        <p>Numer zdającego: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  40. Krok 40: Skrypt 1: zapytanie 3

    Kryteria:

    R.5.3 Skrypt 1 zawiera instrukcję wysyłającą do bazy danych zapytanie 3

    ok. 1 min
    Polecenie z arkusza

    Skrypt 1: Wysyła do bazy danych zapytanie 3

    Treść zapytania w zmiennej $query, mysqli_query wysyła ją do bazy, a w $result zostaje wynik do odczytania wiersz po wierszu.

    index.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="logo">
        <img src="slonce.png" alt="Słonecznie">
    </header>
    <header id="title">
        <h1>Pogoda w Europie</h1>
    </header>
    <main>
        <section id="left">
            <h2>Temperatury w lipcu</h2>
            <table>
                <tr>
                    <th>Miasto</th>
                    <th>Kraj</th>
                    <th>Temperatura</th>
                    <th>Pogoda</th>
                </tr>
                <?php
                    $connection = mysqli_connect("localhost", "root", "", "pogoda");
                    $query = "SELECT miejscowosc.nazwa, miejscowosc.kraj, pomiary.temperatura FROM miejscowosc JOIN pomiary ON miejscowosc.id = pomiary.id_miejscowosc WHERE pomiary.id_miesiac = 7;";
                    $result = mysqli_query($connection, $query);
                ?>
            </table>
        </section>
        <section id="right">
            <h2>Średnie temperatury w roku</h2>
            <a href="index.php?id=1">Styczeń</a>
            <a href="index.php?id=2">Luty</a>
            <a href="index.php?id=3">Marzec</a>
            <a href="index.php?id=4">Kwiecień</a>
            <a href="index.php?id=5">Maj</a>
            <a href="index.php?id=6">Czerwiec</a>
            <a href="index.php?id=7">Lipiec</a>
            <a href="index.php?id=8">Sierpień</a>
            <a href="index.php?id=9">Wrzesień</a>
            <a href="index.php?id=10">Październik</a>
            <a href="index.php?id=11">Listopad</a>
            <a href="index.php?id=12">Grudzień</a>
            <p>Średnia temperatura dla wybranego miesiąca wynosi</p>
            <?php
                mysqli_close($connection);
            ?>
        </section>
    </main>
    <footer>
        <p>Numer zdającego: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

    Podgląd strony bez zmian - taki jak po kroku 39.

  41. Krok 41: Skrypt 1: miasto, kraj i temperatura

    Kryteria: ,

    R.2.8 W bloku sekcji lewej umieszczono tabelę o 4 kolumnach (w skrypcie lub HTML) zastosowano znaczniki <table>, <tr>, <td>

    R.5.4 Skrypt 1 w pierwszych trzech kolumnach tabeli wyświetla zwrócone zapytaniem dane dla wszystkich zwróconych zapytaniem rekordów

    ok. 2 min
    Polecenie z arkusza

    W pierwszych trzech kolumnach tabeli zapisuje kolejne nazwy miast, krajów i temperatury dla wszystkich zwróconych zapytaniem rekordów

    mysqli_fetch_row oddaje kolejny wiersz jako tablicę w kolejności kolumn z SELECT: $row[0] - miasto, $row[1] - kraj, $row[2] - temperatura. Pętla while kończy się, gdy wierszy zabraknie. W podglądzie sześć wierszy, czwarta kolumna na razie pusta.

    index.php PHP zmienione: 7 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="logo">
        <img src="slonce.png" alt="Słonecznie">
    </header>
    <header id="title">
        <h1>Pogoda w Europie</h1>
    </header>
    <main>
        <section id="left">
            <h2>Temperatury w lipcu</h2>
            <table>
                <tr>
                    <th>Miasto</th>
                    <th>Kraj</th>
                    <th>Temperatura</th>
                    <th>Pogoda</th>
                </tr>
                <?php
                    $connection = mysqli_connect("localhost", "root", "", "pogoda");
                    $query = "SELECT miejscowosc.nazwa, miejscowosc.kraj, pomiary.temperatura FROM miejscowosc JOIN pomiary ON miejscowosc.id = pomiary.id_miejscowosc WHERE pomiary.id_miesiac = 7;";
                    $result = mysqli_query($connection, $query);
                    while ($row = mysqli_fetch_row($result)) {
                        echo "<tr>";
                        echo "<td>$row[0]</td>";
                        echo "<td>$row[1]</td>";
                        echo "<td>$row[2]</td>";
                        echo "</tr>";
                    }
                ?>
            </table>
        </section>
        <section id="right">
            <h2>Średnie temperatury w roku</h2>
            <a href="index.php?id=1">Styczeń</a>
            <a href="index.php?id=2">Luty</a>
            <a href="index.php?id=3">Marzec</a>
            <a href="index.php?id=4">Kwiecień</a>
            <a href="index.php?id=5">Maj</a>
            <a href="index.php?id=6">Czerwiec</a>
            <a href="index.php?id=7">Lipiec</a>
            <a href="index.php?id=8">Sierpień</a>
            <a href="index.php?id=9">Wrzesień</a>
            <a href="index.php?id=10">Październik</a>
            <a href="index.php?id=11">Listopad</a>
            <a href="index.php?id=12">Grudzień</a>
            <p>Średnia temperatura dla wybranego miesiąca wynosi</p>
            <?php
                mysqli_close($connection);
            ?>
        </section>
    </main>
    <footer>
        <p>Numer zdającego: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  42. Krok 42: Skrypt 1: ikona pogody zależna od temperatury

    Kryteria:

    R.5.5 Skrypt 1 wstawia obraz ze słońcem dla temperatury > 30, z deszczem dla temperatury < 26, z chmurą w innych przypadkach

    ok. 3 min
    Polecenie z arkusza

    Czwarta kolumna wypełniona jest obrazem: slonce.png, gdy temperatura dla tego rekordu jest powyżej 30 oC. deszcz.png, gdy temperatura dla tego rekordu jest poniżej 26 oC. chmury.png, w innych przypadkach

    Trzy przypadki to if / elseif / else - sprawdzane po kolei, wykona się dokładnie jeden. „Powyżej 30” to > 30 (30 już nie), „poniżej 26” to < 26. Nazwę pliku zapisujesz w zmiennej $image i wstawiasz do <img>. Wynik jak na ilustracji 3: Ostrawa (dokładnie 30) dostaje chmury, Warszawa (25) i Brno (21) deszcz, a Gdańsk, Praga i Hamburg słońce. Ikony mają w tabeli 70 px - reguła table img czekała już w CSS.

    Typowe błędy

    >= 30 zamiast > 30 daje Ostrawie słońce zamiast chmur - na ilustracji 3 widać, że 30 stopni to jeszcze „inny przypadek”.

    index.php PHP zmienione: 8 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="logo">
        <img src="slonce.png" alt="Słonecznie">
    </header>
    <header id="title">
        <h1>Pogoda w Europie</h1>
    </header>
    <main>
        <section id="left">
            <h2>Temperatury w lipcu</h2>
            <table>
                <tr>
                    <th>Miasto</th>
                    <th>Kraj</th>
                    <th>Temperatura</th>
                    <th>Pogoda</th>
                </tr>
                <?php
                    $connection = mysqli_connect("localhost", "root", "", "pogoda");
                    $query = "SELECT miejscowosc.nazwa, miejscowosc.kraj, pomiary.temperatura FROM miejscowosc JOIN pomiary ON miejscowosc.id = pomiary.id_miejscowosc WHERE pomiary.id_miesiac = 7;";
                    $result = mysqli_query($connection, $query);
                    while ($row = mysqli_fetch_row($result)) {
                        echo "<tr>";
                        echo "<td>$row[0]</td>";
                        echo "<td>$row[1]</td>";
                        echo "<td>$row[2]</td>";
                        if ($row[2] > 30) {
                            $image = "slonce.png";
                        } elseif ($row[2] < 26) {
                            $image = "deszcz.png";
                        } else {
                            $image = "chmury.png";
                        }
                        echo "<td><img src=\"$image\"></td>";
                        echo "</tr>";
                    }
                ?>
            </table>
        </section>
        <section id="right">
            <h2>Średnie temperatury w roku</h2>
            <a href="index.php?id=1">Styczeń</a>
            <a href="index.php?id=2">Luty</a>
            <a href="index.php?id=3">Marzec</a>
            <a href="index.php?id=4">Kwiecień</a>
            <a href="index.php?id=5">Maj</a>
            <a href="index.php?id=6">Czerwiec</a>
            <a href="index.php?id=7">Lipiec</a>
            <a href="index.php?id=8">Sierpień</a>
            <a href="index.php?id=9">Wrzesień</a>
            <a href="index.php?id=10">Październik</a>
            <a href="index.php?id=11">Listopad</a>
            <a href="index.php?id=12">Grudzień</a>
            <p>Średnia temperatura dla wybranego miesiąca wynosi</p>
            <?php
                mysqli_close($connection);
            ?>
        </section>
    </main>
    <footer>
        <p>Numer zdającego: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  43. Krok 43: Skrypt 2: tylko po kliknięciu odnośnika

    Kryteria:

    R.5.6 Skrypt 2 jest wykonywany tylko, gdy dane zostały wysłane (np. przez isset)

    ok. 1 min
    Polecenie z arkusza

    Skrypt 2, wykonywany tylko jeżeli zostały wysłane dane poprzez kliknięcie odnośnika (ilustracja 5)

    Przy pierwszym wejściu adres to samo index.php i w tablicy $_GET nie ma klucza id. Po kliknięciu miesiąca adres ma ?id=... i warunek isset jest spełniony. Zamknięcie połączenia stoi pod blokiem if, poza nim - wykona się zawsze.

    index.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="logo">
        <img src="slonce.png" alt="Słonecznie">
    </header>
    <header id="title">
        <h1>Pogoda w Europie</h1>
    </header>
    <main>
        <section id="left">
            <h2>Temperatury w lipcu</h2>
            <table>
                <tr>
                    <th>Miasto</th>
                    <th>Kraj</th>
                    <th>Temperatura</th>
                    <th>Pogoda</th>
                </tr>
                <?php
                    $connection = mysqli_connect("localhost", "root", "", "pogoda");
                    $query = "SELECT miejscowosc.nazwa, miejscowosc.kraj, pomiary.temperatura FROM miejscowosc JOIN pomiary ON miejscowosc.id = pomiary.id_miejscowosc WHERE pomiary.id_miesiac = 7;";
                    $result = mysqli_query($connection, $query);
                    while ($row = mysqli_fetch_row($result)) {
                        echo "<tr>";
                        echo "<td>$row[0]</td>";
                        echo "<td>$row[1]</td>";
                        echo "<td>$row[2]</td>";
                        if ($row[2] > 30) {
                            $image = "slonce.png";
                        } elseif ($row[2] < 26) {
                            $image = "deszcz.png";
                        } else {
                            $image = "chmury.png";
                        }
                        echo "<td><img src=\"$image\"></td>";
                        echo "</tr>";
                    }
                ?>
            </table>
        </section>
        <section id="right">
            <h2>Średnie temperatury w roku</h2>
            <a href="index.php?id=1">Styczeń</a>
            <a href="index.php?id=2">Luty</a>
            <a href="index.php?id=3">Marzec</a>
            <a href="index.php?id=4">Kwiecień</a>
            <a href="index.php?id=5">Maj</a>
            <a href="index.php?id=6">Czerwiec</a>
            <a href="index.php?id=7">Lipiec</a>
            <a href="index.php?id=8">Sierpień</a>
            <a href="index.php?id=9">Wrzesień</a>
            <a href="index.php?id=10">Październik</a>
            <a href="index.php?id=11">Listopad</a>
            <a href="index.php?id=12">Grudzień</a>
            <p>Średnia temperatura dla wybranego miesiąca wynosi</p>
            <?php
                if (isset($_GET["id"])) {
                }
                mysqli_close($connection);
            ?>
        </section>
    </main>
    <footer>
        <p>Numer zdającego: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

    Podgląd strony bez zmian - taki jak po kroku 42.

  44. Krok 44: Skrypt 2: zapytanie 1 dla wybranego miesiąca

    Kryteria:

    R.5.7 Skrypt 2 zawiera instrukcję wysyłającą do bazy danych zmodyfikowane zapytanie 1, tak że w warunku zapytania jest wstawiona wartość przesłana metodą GET

    ok. 2 min
    Polecenie z arkusza

    Wysyła do bazy danych zapytanie 1, zmodyfikowane tak, żeby wybierane były dane dotyczące wybranego przez użytkownika miesiąca (w miejscu id miesiąca jest wstawiona wartość przesłana metodą GET)

    Wartość z adresu przepisujesz do zmiennej $month i wstawiasz do zapytania 1 w miejsce 7. Od tego kroku podgląd pokazuje stronę po kliknięciu „Luty” (index.php?id=2) - zapytanie już się wykonuje, ale wyniku jeszcze nie wypisujesz.

    index.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="logo">
        <img src="slonce.png" alt="Słonecznie">
    </header>
    <header id="title">
        <h1>Pogoda w Europie</h1>
    </header>
    <main>
        <section id="left">
            <h2>Temperatury w lipcu</h2>
            <table>
                <tr>
                    <th>Miasto</th>
                    <th>Kraj</th>
                    <th>Temperatura</th>
                    <th>Pogoda</th>
                </tr>
                <?php
                    $connection = mysqli_connect("localhost", "root", "", "pogoda");
                    $query = "SELECT miejscowosc.nazwa, miejscowosc.kraj, pomiary.temperatura FROM miejscowosc JOIN pomiary ON miejscowosc.id = pomiary.id_miejscowosc WHERE pomiary.id_miesiac = 7;";
                    $result = mysqli_query($connection, $query);
                    while ($row = mysqli_fetch_row($result)) {
                        echo "<tr>";
                        echo "<td>$row[0]</td>";
                        echo "<td>$row[1]</td>";
                        echo "<td>$row[2]</td>";
                        if ($row[2] > 30) {
                            $image = "slonce.png";
                        } elseif ($row[2] < 26) {
                            $image = "deszcz.png";
                        } else {
                            $image = "chmury.png";
                        }
                        echo "<td><img src=\"$image\"></td>";
                        echo "</tr>";
                    }
                ?>
            </table>
        </section>
        <section id="right">
            <h2>Średnie temperatury w roku</h2>
            <a href="index.php?id=1">Styczeń</a>
            <a href="index.php?id=2">Luty</a>
            <a href="index.php?id=3">Marzec</a>
            <a href="index.php?id=4">Kwiecień</a>
            <a href="index.php?id=5">Maj</a>
            <a href="index.php?id=6">Czerwiec</a>
            <a href="index.php?id=7">Lipiec</a>
            <a href="index.php?id=8">Sierpień</a>
            <a href="index.php?id=9">Wrzesień</a>
            <a href="index.php?id=10">Październik</a>
            <a href="index.php?id=11">Listopad</a>
            <a href="index.php?id=12">Grudzień</a>
            <p>Średnia temperatura dla wybranego miesiąca wynosi</p>
            <?php
                if (isset($_GET["id"])) {
                    $month = $_GET["id"];
                    $query = "SELECT ROUND(AVG(temperatura), 2) FROM pomiary WHERE id_miesiac = $month;";
                    $result = mysqli_query($connection, $query);
                }
                mysqli_close($connection);
            ?>
        </section>
    </main>
    <footer>
        <p>Numer zdającego: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

    Podgląd strony bez zmian - taki jak po kroku 42.

  45. Krok 45: Skrypt 2: temperatura w nagłówku trzeciego stopnia

    Kryteria: ,

    R.5.8 Zwróconą zapytaniem temperaturę wyświetla w sposób „<temp> stopni”

    R.5.9 W skryptach zastosowana przynajmniej jedna zmienna oraz nazwy wszystkich zmiennych są w języku polskim lub angielskim i odzwierciedlają cel zastosowania

    ok. 2 min
    Polecenie z arkusza

    Zwróconą zapytaniem temperaturę wyświetla w nagłówku trzeciego stopnia w sposób „<temp> stopni”, gdzie <> oznacza wartość zwróconą zapytaniem

    Zapytanie z AVG zwraca zawsze dokładnie jeden wiersz, więc zamiast pętli wystarczy jedno wywołanie mysqli_fetch_row. Wartość wstawiasz do <h3> i dopisujesz słowo „stopni”. Dla lutego: 3.50 stopni, jak na ilustracji 5. W skryptach są zmienne $connection, $query, $result, $row, $image i $month - nazwy po angielsku mówią, do czego służą (R.5.9).

    index.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="logo">
        <img src="slonce.png" alt="Słonecznie">
    </header>
    <header id="title">
        <h1>Pogoda w Europie</h1>
    </header>
    <main>
        <section id="left">
            <h2>Temperatury w lipcu</h2>
            <table>
                <tr>
                    <th>Miasto</th>
                    <th>Kraj</th>
                    <th>Temperatura</th>
                    <th>Pogoda</th>
                </tr>
                <?php
                    $connection = mysqli_connect("localhost", "root", "", "pogoda");
                    $query = "SELECT miejscowosc.nazwa, miejscowosc.kraj, pomiary.temperatura FROM miejscowosc JOIN pomiary ON miejscowosc.id = pomiary.id_miejscowosc WHERE pomiary.id_miesiac = 7;";
                    $result = mysqli_query($connection, $query);
                    while ($row = mysqli_fetch_row($result)) {
                        echo "<tr>";
                        echo "<td>$row[0]</td>";
                        echo "<td>$row[1]</td>";
                        echo "<td>$row[2]</td>";
                        if ($row[2] > 30) {
                            $image = "slonce.png";
                        } elseif ($row[2] < 26) {
                            $image = "deszcz.png";
                        } else {
                            $image = "chmury.png";
                        }
                        echo "<td><img src=\"$image\"></td>";
                        echo "</tr>";
                    }
                ?>
            </table>
        </section>
        <section id="right">
            <h2>Średnie temperatury w roku</h2>
            <a href="index.php?id=1">Styczeń</a>
            <a href="index.php?id=2">Luty</a>
            <a href="index.php?id=3">Marzec</a>
            <a href="index.php?id=4">Kwiecień</a>
            <a href="index.php?id=5">Maj</a>
            <a href="index.php?id=6">Czerwiec</a>
            <a href="index.php?id=7">Lipiec</a>
            <a href="index.php?id=8">Sierpień</a>
            <a href="index.php?id=9">Wrzesień</a>
            <a href="index.php?id=10">Październik</a>
            <a href="index.php?id=11">Listopad</a>
            <a href="index.php?id=12">Grudzień</a>
            <p>Średnia temperatura dla wybranego miesiąca wynosi</p>
            <?php
                if (isset($_GET["id"])) {
                    $month = $_GET["id"];
                    $query = "SELECT ROUND(AVG(temperatura), 2) FROM pomiary WHERE id_miesiac = $month;";
                    $result = mysqli_query($connection, $query);
                    $row = mysqli_fetch_row($result);
                    echo "<h3>$row[0] stopni</h3>";
                }
                mysqli_close($connection);
            ?>
        </section>
    </main>
    <footer>
        <p>Numer zdającego: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  46. Etap 5: Dobre praktyki (poza kluczem)

    Kroki 46-48 · po tym etapie masz 38 z 38 kryteriów (pkt)

    Krok 46: Miesiąc z adresu: liczba, zapytanie przygotowane, brak pomiarów

    ok. 4 min
    Polecenie z arkusza

    Wysyła do bazy danych zapytanie 1, zmodyfikowane tak, żeby wybierane były dane dotyczące wybranego przez użytkownika miesiąca (w miejscu id miesiąca jest wstawiona wartość przesłana metodą GET)

    Adres może wpisać każdy. Sprawdzone na tej bazie: index.php?id=2 OR 1=1 daje w wersji egzaminacyjnej 14.43 stopni - średnią ze wszystkich pomiarów, podaną jako luty. A ?id=13 (miesiąca nie ma) wypisuje samo „stopni”, bo średnia z pustego zbioru to NULL. Poprawki: rzutowanie (int), zapytanie przygotowane (mysqli_prepare, znak ?, mysqli_stmt_bind_param z typem "i") i sprawdzenie null przed wypisaniem. Stara wersja zostaje w komentarzu. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.

    index.php PHP zmienione: 17 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="logo">
        <img src="slonce.png" alt="Słonecznie">
    </header>
    <header id="title">
        <h1>Pogoda w Europie</h1>
    </header>
    <main>
        <section id="left">
            <h2>Temperatury w lipcu</h2>
            <table>
                <tr>
                    <th>Miasto</th>
                    <th>Kraj</th>
                    <th>Temperatura</th>
                    <th>Pogoda</th>
                </tr>
                <?php
                    $connection = mysqli_connect("localhost", "root", "", "pogoda");
                    $query = "SELECT miejscowosc.nazwa, miejscowosc.kraj, pomiary.temperatura FROM miejscowosc JOIN pomiary ON miejscowosc.id = pomiary.id_miejscowosc WHERE pomiary.id_miesiac = 7;";
                    $result = mysqli_query($connection, $query);
                    while ($row = mysqli_fetch_row($result)) {
                        echo "<tr>";
                        echo "<td>$row[0]</td>";
                        echo "<td>$row[1]</td>";
                        echo "<td>$row[2]</td>";
                        if ($row[2] > 30) {
                            $image = "slonce.png";
                        } elseif ($row[2] < 26) {
                            $image = "deszcz.png";
                        } else {
                            $image = "chmury.png";
                        }
                        echo "<td><img src=\"$image\"></td>";
                        echo "</tr>";
                    }
                ?>
            </table>
        </section>
        <section id="right">
            <h2>Średnie temperatury w roku</h2>
            <a href="index.php?id=1">Styczeń</a>
            <a href="index.php?id=2">Luty</a>
            <a href="index.php?id=3">Marzec</a>
            <a href="index.php?id=4">Kwiecień</a>
            <a href="index.php?id=5">Maj</a>
            <a href="index.php?id=6">Czerwiec</a>
            <a href="index.php?id=7">Lipiec</a>
            <a href="index.php?id=8">Sierpień</a>
            <a href="index.php?id=9">Wrzesień</a>
            <a href="index.php?id=10">Październik</a>
            <a href="index.php?id=11">Listopad</a>
            <a href="index.php?id=12">Grudzień</a>
            <p>Średnia temperatura dla wybranego miesiąca wynosi</p>
            <?php
                if (isset($_GET["id"])) {
                    $month = (int) $_GET["id"];
                    $statement = mysqli_prepare($connection, "SELECT ROUND(AVG(temperatura), 2) FROM pomiary WHERE id_miesiac = ?");
                    mysqli_stmt_bind_param($statement, "i", $month);
                    mysqli_stmt_execute($statement);
                    $result = mysqli_stmt_get_result($statement);
                    $row = mysqli_fetch_row($result);
                    if ($row[0] === null) {
                        echo "<h3>brak pomiarów</h3>";
                    } else {
                        echo "<h3>$row[0] stopni</h3>";
                    }
                }
                mysqli_close($connection);
                /* Wersja z egzaminu:
                $month = $_GET["id"];
                $query = "SELECT ROUND(AVG(temperatura), 2) FROM pomiary WHERE id_miesiac = $month;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "<h3>$row[0] stopni</h3>";
                */
            ?>
        </section>
    </main>
    <footer>
        <p>Numer zdającego: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

    Podgląd strony bez zmian - taki jak po kroku 45.

  47. Krok 47: Przecinek dziesiętny w temperaturze

    ok. 2 min
    Polecenie z arkusza

    Zwróconą zapytaniem temperaturę wyświetla w nagłówku trzeciego stopnia w sposób „<temp> stopni”, gdzie <> oznacza wartość zwróconą zapytaniem

    Baza zwraca liczbę z kropką (3.50), a po polsku piszesz przecinek. number_format($liczba, 2, ",", "") formatuje liczbę: dwa miejsca po przecinku, przecinek jako separator dziesiętny, bez separatora tysięcy. W podglądzie: „3,50 stopni”. Na egzaminie wystarczy wersja wcześniejsza - arkusz wymaga wartości zwróconej zapytaniem, ilustracja 5 pokazuje kropkę.

    index.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="logo">
        <img src="slonce.png" alt="Słonecznie">
    </header>
    <header id="title">
        <h1>Pogoda w Europie</h1>
    </header>
    <main>
        <section id="left">
            <h2>Temperatury w lipcu</h2>
            <table>
                <tr>
                    <th>Miasto</th>
                    <th>Kraj</th>
                    <th>Temperatura</th>
                    <th>Pogoda</th>
                </tr>
                <?php
                    $connection = mysqli_connect("localhost", "root", "", "pogoda");
                    $query = "SELECT miejscowosc.nazwa, miejscowosc.kraj, pomiary.temperatura FROM miejscowosc JOIN pomiary ON miejscowosc.id = pomiary.id_miejscowosc WHERE pomiary.id_miesiac = 7;";
                    $result = mysqli_query($connection, $query);
                    while ($row = mysqli_fetch_row($result)) {
                        echo "<tr>";
                        echo "<td>$row[0]</td>";
                        echo "<td>$row[1]</td>";
                        echo "<td>$row[2]</td>";
                        if ($row[2] > 30) {
                            $image = "slonce.png";
                        } elseif ($row[2] < 26) {
                            $image = "deszcz.png";
                        } else {
                            $image = "chmury.png";
                        }
                        echo "<td><img src=\"$image\"></td>";
                        echo "</tr>";
                    }
                ?>
            </table>
        </section>
        <section id="right">
            <h2>Średnie temperatury w roku</h2>
            <a href="index.php?id=1">Styczeń</a>
            <a href="index.php?id=2">Luty</a>
            <a href="index.php?id=3">Marzec</a>
            <a href="index.php?id=4">Kwiecień</a>
            <a href="index.php?id=5">Maj</a>
            <a href="index.php?id=6">Czerwiec</a>
            <a href="index.php?id=7">Lipiec</a>
            <a href="index.php?id=8">Sierpień</a>
            <a href="index.php?id=9">Wrzesień</a>
            <a href="index.php?id=10">Październik</a>
            <a href="index.php?id=11">Listopad</a>
            <a href="index.php?id=12">Grudzień</a>
            <p>Średnia temperatura dla wybranego miesiąca wynosi</p>
            <?php
                if (isset($_GET["id"])) {
                    $month = (int) $_GET["id"];
                    $statement = mysqli_prepare($connection, "SELECT ROUND(AVG(temperatura), 2) FROM pomiary WHERE id_miesiac = ?");
                    mysqli_stmt_bind_param($statement, "i", $month);
                    mysqli_stmt_execute($statement);
                    $result = mysqli_stmt_get_result($statement);
                    $row = mysqli_fetch_row($result);
                    if ($row[0] === null) {
                        echo "<h3>brak pomiarów</h3>";
                    } else {
                        echo "<h3>" . number_format($row[0], 2, ",", "") . " stopni</h3>";
                        // echo "<h3>$row[0] stopni</h3>";
                    }
                }
                mysqli_close($connection);
                /* Wersja z egzaminu:
                $month = $_GET["id"];
                $query = "SELECT ROUND(AVG(temperatura), 2) FROM pomiary WHERE id_miesiac = $month;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "<h3>$row[0] stopni</h3>";
                */
            ?>
        </section>
    </main>
    <footer>
        <p>Numer zdającego: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  48. Krok 48: Tabela: pola po nazwach i tekst alternatywny ikon

    ok. 3 min
    Polecenie z arkusza

    Czwarta kolumna wypełniona jest obrazem: slonce.png, gdy temperatura dla tego rekordu jest powyżej 30 oC. deszcz.png, gdy temperatura dla tego rekordu jest poniżej 26 oC. chmury.png, w innych przypadkach

    mysqli_fetch_assoc oddaje wiersz z kluczami takimi jak nazwy kolumn - $cityRow["temperatura"] mówi więcej niż $row[2], a temperaturę zapisujesz raz w zmiennej i porównujesz ją dwa razy. Ikona dostaje tekst alternatywny dobrany w tym samym if (osoba z czytnikiem ekranu usłyszy „słonecznie”), a nazwy z bazy przechodzą przez htmlspecialchars. Wygląd strony się nie zmienia. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.

    index.php PHP zmienione: 12 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pogoda</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="logo">
        <img src="slonce.png" alt="Słonecznie">
    </header>
    <header id="title">
        <h1>Pogoda w Europie</h1>
    </header>
    <main>
        <section id="left">
            <h2>Temperatury w lipcu</h2>
            <table>
                <tr>
                    <th>Miasto</th>
                    <th>Kraj</th>
                    <th>Temperatura</th>
                    <th>Pogoda</th>
                </tr>
                <?php
                    $connection = mysqli_connect("localhost", "root", "", "pogoda");
                    $query = "SELECT miejscowosc.nazwa, miejscowosc.kraj, pomiary.temperatura FROM miejscowosc JOIN pomiary ON miejscowosc.id = pomiary.id_miejscowosc WHERE pomiary.id_miesiac = 7;";
                    $result = mysqli_query($connection, $query);
                    while ($cityRow = mysqli_fetch_assoc($result)) {
                        $temperature = $cityRow["temperatura"];
                        echo "<tr>";
                        echo "<td>" . htmlspecialchars($cityRow["nazwa"]) . "</td>";
                        echo "<td>" . htmlspecialchars($cityRow["kraj"]) . "</td>";
                        echo "<td>$temperature</td>";
                        if ($temperature > 30) {
                            $image = "slonce.png";
                            $description = "słonecznie";
                        } elseif ($temperature < 26) {
                            $image = "deszcz.png";
                            $description = "deszczowo";
                        } else {
                            $image = "chmury.png";
                            $description = "pochmurno";
                        }
                        echo "<td><img src=\"$image\" alt=\"$description\"></td>";
                        // wersja z egzaminu: mysqli_fetch_row i $row[0] - $row[2], obraz bez alt
                        echo "</tr>";
                    }
                ?>
            </table>
        </section>
        <section id="right">
            <h2>Średnie temperatury w roku</h2>
            <a href="index.php?id=1">Styczeń</a>
            <a href="index.php?id=2">Luty</a>
            <a href="index.php?id=3">Marzec</a>
            <a href="index.php?id=4">Kwiecień</a>
            <a href="index.php?id=5">Maj</a>
            <a href="index.php?id=6">Czerwiec</a>
            <a href="index.php?id=7">Lipiec</a>
            <a href="index.php?id=8">Sierpień</a>
            <a href="index.php?id=9">Wrzesień</a>
            <a href="index.php?id=10">Październik</a>
            <a href="index.php?id=11">Listopad</a>
            <a href="index.php?id=12">Grudzień</a>
            <p>Średnia temperatura dla wybranego miesiąca wynosi</p>
            <?php
                if (isset($_GET["id"])) {
                    $month = (int) $_GET["id"];
                    $statement = mysqli_prepare($connection, "SELECT ROUND(AVG(temperatura), 2) FROM pomiary WHERE id_miesiac = ?");
                    mysqli_stmt_bind_param($statement, "i", $month);
                    mysqli_stmt_execute($statement);
                    $result = mysqli_stmt_get_result($statement);
                    $row = mysqli_fetch_row($result);
                    if ($row[0] === null) {
                        echo "<h3>brak pomiarów</h3>";
                    } else {
                        echo "<h3>" . number_format($row[0], 2, ",", "") . " stopni</h3>";
                        // echo "<h3>$row[0] stopni</h3>";
                    }
                }
                mysqli_close($connection);
                /* Wersja z egzaminu:
                $month = $_GET["id"];
                $query = "SELECT ROUND(AVG(temperatura), 2) FROM pomiary WHERE id_miesiac = $month;";
                $result = mysqli_query($connection, $query);
                $row = mysqli_fetch_row($result);
                echo "<h3>$row[0] stopni</h3>";
                */
            ?>
        </section>
    </main>
    <footer>
        <p>Numer zdającego: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.php)

  49. Etap 6: Oddanie pracy

    Krok 49 · po tym etapie masz 38 z 38 kryteriów (pkt)

    Krok 49: Plik przeglądarka.txt i nagranie płyty

    ok. 5 min
    Polecenie z arkusza

    UWAGA: 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. Umieść go w folderze z numerem zdającego. Nagraj płytę z rezultatami pracy.

    W przeglądarka.txt wpisujesz nazwę przeglądarki, w której sprawdzasz stronę.

    W folderze z numerem zdającego: chmury.png, deszcz.png, import.png, index.php, kw1.jpg - kw4.jpg, kwerendy.txt, przeglądarka.txt, slonce.png, styl.css. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.

    przeglądarka.txt Tekst nowy plik 
    Google Chrome

    Podgląd strony bez zmian - taki jak po kroku 48.

Podgląd

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: . 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.