Blok 6

Dziś: ten sam arkusz, razem

Dziś przechodzimy razem arkusz „Wodospady” z bloku 5. Każdy punkt arkusza czytamy i od razu zamieniamy na kod, a wy piszecie go razem z prowadzącym, od zera. Nic nie jest oddawane ani oceniane. Najważniejsza myśl: arkusz to nie luźny opis zadania, tylko instrukcja krok po kroku.

To było napisane w arkuszu

Pięć rzeczy, które w arkuszu stały napisane wprost, a w większości z 21 prac były źle: nazwa pliku styl.css, paski przewijania tylko przy przepełnieniu (overflow: auto), wysyłanie formularza metodą bezpieczną (POST), warunek idRodzaj = 10 podpowiedziany w nawiasie przy zapytaniu 2 i kolejność marginesów: wewnętrzne 8 px, zewnętrzne 10 px. Żadna z nich nie wymagała nowej wiedzy, tylko uważnego przeczytania.

Polowanie

Ćwiczenie: znajdź w arkuszu nazwę bazy danych, tekst przycisku, tekst alternatywny zdjęć, zachowanie skryptu 2 bez parametru w adresie i funkcję zamykającą połączenie. Odpowiedzi: wodospady, „Wpisz”, „wodospad”, wartość 6 i mysqli_close. Ostatniej nie trzeba pamiętać, bo arkusz ma tabelę funkcji PHP na stronie 5.

Jak czytać jeden punkt

Metoda na każdy punkt arkusza: zaznacz każdą liczbę i słowo, które ma trafić do kodu, zamień każde zaznaczenie na jedną linijkę i sprawdź wynik w przeglądarce. Przykład: „szerokość 70%, wysokość 300 px, paski przewijania jedynie w przypadku przepełnienia” to width: 70%, height: 300px i overflow: auto. overflow: scroll pokazuje paski zawsze, więc nie spełnia warunku.

R.1 Baza — tylko czytamy

Część R.1 (baza danych) tylko czytamy, bo wyszła najlepiej. Najważniejsze: baza ma się nazywać wodospady, zapytania lądują w pliku kwerendy.txt, a podpowiedź w nawiasie przy zapytaniu 2 (idRodzaj = 10) jest wymogiem — bez niej wynik wygląda dobrze, ale kryterium przepada. Zapytania 3, 4 i 5 wracają później w skryptach PHP 2, 4 i 3.

R.2 HTML: z arkusza do znacznika

Część R.2 (zawartość strony) zamieniona na znaczniki: <!DOCTYPE html> i lang="pl", <meta charset="UTF-8"> i tytuł „Wodospady”, link do styl.css, bloki header, main z aside i section, article i footer, nagłówki w stopniach podanych w arkuszu, wiersz nagłówkowy tabeli jako <tr> z komórkami <th>, alt="wodospad" przy każdym zdjęciu i stopka jako <p>. Arkusz ma na stronie 6 tabelę semantycznych znaczników HTML5.

R.2 Formularz

Formularz z arkusza: „metodą bezpieczną do tego samego pliku” to <form method="post"> bez action. Etykieta łączy się z polem przez for i id, pole identyfikatora ma typ number, przycisk ma treść „Wpisz”. Atrybut id łączy pole z etykietą, a name to klucz, pod którym wartość trafi do $_POST w PHP.

R.4 CSS: z arkusza do reguły

CSS z arkusza, część 1. „Dla wszystkich selektorów” to selektor *, nie body. Marginesy wewnętrzne to padding, zewnętrzne to margin. „Paski przewijania jedynie w przypadku przepełnienia” to overflow: auto. Blok główny potrzebuje display: flex (albo float), żeby blok boczny i blok sekcji stanęły obok siebie jak na ilustracji 3.

R.4 CSS, część 2

CSS z arkusza, część 2: obrazy z marginesem 4 px i float: left, tabela 90% z obramowaniem 1px dotted black, odnośnik z siedmioma właściwościami z jednego zdania arkusza i a:hover z kolorem RoyalBlue. Arkusz każe stylować obraz, tabelę i odnośnik wyłącznie selektorem znacznika (img, table, a), bez klas.

Skrypty: wymagania wspólne

Wymagania wspólne dla skryptów: połączenie z localhost, użytkownik root bez hasła, baza wodospady, zmienne o nazwach mówiących, co trzymają, i mysqli_close po ostatnim zapytaniu na stronie. Zła nazwa bazy wyłącza wszystkie skrypty naraz. Funkcje mysqli są wypisane w tabeli 1 na stronie 5 arkusza.

Skrypt 1 i 2

Skrypt 1 wypisuje odnośnik do index.php?kontynent=… dla każdego kontynentu. Skrypt 2 bierze identyfikator z $_GET, a gdy go brak — wartość 6, i wstawia go do zapytania 3 zamiast stałej. Nazwa parametru w linku musi być taka sama jak klucz w $_GET, a policzona zmienna musi trafić do zapytania. Sprawdzenie: samo index.php pokazuje 8 wodospadów z Europy, klik w Afrykę — 2.

Skrypt 3 i 4

Skrypt 3 wypełnia listę opcjami, gdzie value to idTurysta, a treść to nick. Skrypt 4 działa tylko wtedy, gdy formularz wysłał dane (isset na kluczach $_POST, czyli na name pól), i wstawia je do zapytania 4 w miejsce stałych 34 i 2. W pliku stoi na samej górze, przed HTML-em, bo musi wykonać się przed zamknięciem połączenia, a strona pokazuje wtedy stan już po zapisie.

Przed oddaniem

Na stronie 6 arkusz wypisuje komplet plików do oddania: index.php, styl.css, kwerendy.txt, przeglądarka.txt, cztery zdjęcia, zrzut import.jpg i zrzuty kw1.png–kw5.png. Ostatnie minuty egzaminu warto przeznaczyć na odhaczenie tej listy plik po pliku.