Arkusz EE.09 : 2021 - styczeń - zad. 02 (php)

Oznaczenie: EE.09-02-21.01-SG   Limit czasu: 150 minut

Zadanie egzaminacyjne

Wykonaj aplikację internetową strony o futbolu, wykorzystując pakiet XAMPP oraz edytor zaznaczający składnię.

Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie pilkarz2.zip zabezpieczone hasłem: $piLkaRze%

Archiwum należy rozpakować.

Pobierz pilkarz2.zip

Na pulpicie konta Egzamin utwórz folder. Jako nazwy folderu użyj swojego numeru PESEL. Umieść w tym folderze rozpakowane pliki.

Po skończonej pracy wyniki zapisz również w tym folderze.

Operacje na bazie danych

Do wykonania zadania należy użyć tabel: zawodnik, pozycja, rozgrywka i liga przedstawionych na obrazie 1. Ponadto na obrazie przedstawiono wartości w tabeli pozycja.

Obraz 1. Tabele wykorzystane w zadaniu oraz wartości w tabeli pozycja

Uruchom usługi MySQL i Apache za pomocą XAMPP Control Panel. Za pomocą narzędzia phpMyAdmin wykonaj podane operacje na bazie danych:

  • Utwórz bazę danych o nazwie egzamin
  • Do bazy egzamin zaimportuj plik egzamin.sql z rozpakowanego archiwum
  • Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w folderze z numerem PESEL, w formacie PNG i nazwij 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
  • Zapisz i wykonaj zapytania SQL działające na bazie egzamin. Zapytania zapisz w pliku kwerendy.txt, w folderze z numerem PESEL. Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz w formacie JPG i nadaj im nazwy kw1, kw2, kw3, kw4. Zrzuty powinny obejmować cały ekran monitora z widocznym paskiem zadań
    • Zapytanie 1: wybierające jedynie pola imie i nazwisko z tabeli zawodnik dla zawodników, którym przypisane jest id pozycji równe 4
    • Zapytanie 2: wybierające jedynie pola zespol, punkty, grupa z tabeli liga sortowane malejąco według punktów
    • Zapytanie 3: wybierające jedynie pola id, nazwisko z tabeli zawodnik oraz nazwę z tabeli pozycja dla zawodników, których id jest równe 3 lub 5
    • Zapytanie 4: usuwające jedną kwerendą SQL wszystkie dane z tabeli rozgrywka (sama tabela nie jest usuwana)

Witryna internetowa

Obraz 2. Witryna internetowa, kursor na piątym bloku informacyjnym, zmienił się kolor tła i czcionki

Przygotowanie grafiki:

  • Plik zad2.png, wypakowany z archiwum, należy przeskalować z zachowaniem proporcji tak, aby jego szerokość wynosiła dokładnie 50 px. Należy zachować przezroczystość obrazu

Cechy witryny:

  • Składa się ze strony o nazwie liga.php
  • Zastosowany właściwy standard kodowania polskich znaków
  • Tytuł strony widoczny na karcie przeglądarki: „piłka nożna”
  • Arkusz stylów w pliku o nazwie styl2.css prawidłowo połączony z kodem strony
  • Podział strony na bloki: baner, blok lewy i prawy, blok główny, blok liga zawierający zmienną liczbę bloków z informacją o drużynach. Bloki informacyjne generowane są skryptem, ich liczba zależy od liczby rekordów. Podział zrealizowany za pomocą znaczników sekcji, zgodnie z obrazem 2
  • Zawartość bloku banera:
    • Nagłówek trzeciego stopnia o treści „Reprezentacja polski w piłce nożnej”
    • Obraz obraz1.jpg z tekstem alternatywnym o treści: „reprezentacja”
  • Zawartość bloku lewego:
    • Formularz wysyłający dane metodą POST do tej samej strony, zawierający:
      • Listę rozwijalną z wpisami: Bramkarze, Obrońcy, Pomocnicy, Napastnicy
      • Przycisk wysyłający zawartość formularza z opisem „Zobacz”
    • Obraz zad2.png z tekstem alternatywnym o treści: „piłka”
    • Paragraf (akapit) o treści: „Autor: ”, dalej wstawiony numer PESEL zdającego
  • Zawartość bloku prawego:
    • Lista numerowana (uporządkowana) a w niej efekt działania skryptu 1
  • Zawartość bloku głównego: nagłówek trzeciego stopnia o treści: „Liga mistrzów”
  • Zawartość bloku liga: Efekt działania skryptu 2

Styl CSS witryny internetowej

Cechy formatowania CSS:

  • Dla bloku banera: biały kolor czcionki, wyrównanie tekstu do środka, wysokość 330 px
  • Dla pojedynczego bloku z informacją o drużynach: biały kolor czcionki, wyrównanie tekstu do środka, szerokość 170 px, marginesy zewnętrzne 5 px, obramowanie: 1 px, linia ciągła, kolor biały, zaokrąglenie rogów obramowania 15 px
  • W momencie najechania kursorem na pojedynczy blok z informacją o drużynach, kolor tła zmienia się na biały a kolor czcionki na czarny
  • Dla bloku głównego: biały kolor czcionki
  • Dla bloku lewego: kolor tła WhiteSmoke, szerokość 30%, wyrównanie tekstu do środka, wysokość 150 px
  • Dla bloku prawego: kolor tła WhiteSmoke, szerokość 70%, wysokość 150 px
  • Dla znacznika body: krój czcionki Verdana, kolor tła SeaGreen
  • Dla znacznika nagłówka trzeciego stopnia: wyrównanie tekstu do środka, odległość między literami 6 px, tekst napisany kapitalikami (capitalize)

Skrypt połączenia z bazą

W tabeli 1 podano wybór funkcji PHP do obsługi bazy danych. Wymagania dotyczące skryptów:

  • Napisany w języku PHP, w pliku liga.php
  • Skrypt łączy się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie egzamin
  • Po wykonaniu operacji na bazie danych skrypt zamyka połączenie z serwerem
  • Działanie skryptu 1, który odbiera dane przesłane z formularza:
    • Odbiera dane z pola listy wyboru
    • Jeśli nic nie jest wybrane nie jest wykonywana żadna akcja
    • W innym przypadku skrypt wysyła do bazy danych zmodyfikowane zapytanie 1 tak, że w warunku id pozycji jest zgodne z wyborem w liście
    • Wyświetla zwrócone zapytaniem dane: imiona i nazwiska w paragrafach, jako elementy listy numerowanej
  • Działanie skryptu 2
    • Wysyła do bazy danych zapytanie 2
    • Definiuje blok (za pomocą znacznika sekcji), a w nim wyświetla dane przesłane zapytaniem dotyczące jednego rekordu:
      • W nagłówku drugiego stopnia nazwę zespołu pobraną z bazy danych
      • W nagłówku pierwszego stopnia punkty pobrane skryptem
      • W paragrafie tekst: „grupa: <grupa>”, gdzie <grupa> oznacza daną pobraną skryptem
    • Liczba wygenerowanych bloków odpowiada liczbie wierszy zwróconych zapytaniem

Tabela 1. Wybór funkcji języka PHP do obsługi bazy MySQL i MariaDB

Funkcje bilioteki mysqli Zwracana wartość
mysqli_connect(serwer, uzytkownik, haslo, nazwa_bazy) id połączenia lub FALSE, gdy niepowodzenie
mysqli_select_db(id_polaczenia, nazwa_bazy) TRUE / FALSE, w zależności od stanu operacji
mysqli_error(id_polaczenia) Tekst komunikatu błędu
mysqli_close(id_polaczenia) TRUE / FALSE, w zależności od stanu operacji
mysqli_query(id_polaczenia, zapytanie) Wynik zapytania
mysqli_fetch_row(wynik_zapytania) Tablica numeryczna odpowiadająca wierszowi zapytania
mysqli_fetch_array(wynik_zapytania) Tablica zawierająca kolejny wiersz z podanych w wyniku zapytania lub FALSE, jeżeli nie ma więcej wierszy w wyniku zapytania
mysqli_num_rows(wynik_zapytania) Liczba wierszy w podanym zapytaniu
mysqli_num_fields (wynik_zapytania) Liczba kolumn w podanym zapytaniu
UWAGA!
Po zakończeniu pracy utwórz plik tekstowy. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny, zapisz go w folderze z numerem PESEL, jako przeglądarka.txt.
Nagraj płytę z rezultatami pracy. W folderze z numerem PESEL powinny się znajdować pliki: import.png, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, kwerendy.txt, liga.php, obraz1.jpg, przeglądarka.txt, styl2.css, zad2.png, ewentualnie inne przygotowane pliki.
Po nagraniu płyty sprawdź poprawność nagrania. Opisz płytę swoim numerem PESEL i zapakowaną w pudełku pozostaw na stanowisku wraz z arkuszem egzaminacyjnym.

Czas przeznaczony na wykonanie zadania wynosi 150 minut.

Ocenie będzie podlegać 5 rezultatów:

  • operacje na bazie danych
  • zawartość witryny internetowej
  • działanie witryny internetowej
  • styl CSS witryny internetowej
  • skrypt połączenia z bazą.