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

Oznaczenie: EE.09-01-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 z1.zip zabezpieczone hasłem: &futbol&

Archiwum należy rozpakować.

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 zespol1, zespol2, wynik, data_rozgrywki z tabeli rozgrywka dla rekordów o wartości pola zespol1 równej „EVG”
    • Zapytanie 2: wybierające jedynie pola imie i nazwisko z tabeli zawodnik dla zawodników, dla których przypisane jest id pozycji równe 3
    • Zapytanie 3: wybierające jedynie pola id, nazwisko z tabeli zawodnik oraz nazwę pozycji z tabeli pozycja dla zawodników, którym przypisane jest id równe 1, 2 lub 3
    • Zapytanie 4: usuwające tabelę liga

Witryna internetowa

Obraz 2. Witryna internetowa, kursor na drugim bloku informacyjnym, zmienił się kolor obramowania

Przygotowanie grafiki:

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

Cechy witryny:

  • Składa się ze strony o nazwie futbol.php
  • Zastosowany właściwy standard kodowania polskich znaków
  • Tytuł strony widoczny na karcie przeglądarki: „Rozgrywki futbolowe”
  • Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
  • Podział strony na bloki: baner, poniżej blok mecze zawierający zmienną liczbę bloków z informacją o rozgrywkach. Bloki informacyjne generowane są skryptem, a ich liczba zależy od danych w bazie. Poniżej blok główny, poniżej bloki lewy i prawy. Podział zrealizowany za pomocą znaczników sekcji, zgodnie z obrazem 2
  • Zawartość bloku banera:
    • Nagłówek drugiego stopnia o treści „Światowe rozgrywki piłkarskie”
    • Obraz obraz1.jpg z tekstem alternatywnym o treści: „boisko”
  • Zawartość bloku mecze: Efekt działania skryptu 1
  • Zawartość bloku głównego: nagłówek drugiego stopnia o treści: „Reprezentacja Polski”
  • Zawartość bloku lewego:
    • Paragraf (akapit) o treści: „Podaj pozycję zawodników (1-bramkarze, 2-obrońcy, 3-pomocnicy, 4-napastnicy):”
    • Formularz wysyłający dane metodą POST do tej samej strony, zawierający:
      • Pole edycyjne typu numerycznego
      • Przycisk wysyłający zawartość formularza z opisem „Sprawdź”
    • Lista punktowana (nieuporządkowana) a w niej efekt działania skryptu 2
  • Zawartość bloku prawego:
    • Obraz zad1.png z tekstem alternatywnym o treści: „piłkarz”
    • Paragraf (akapit) o treści: „Autor: ”, dalej wstawiony numer PESEL zdającego

Styl CSS witryny internetowej

Cechy formatowania CSS:

  • Dla bloku banera: biały kolor czcionki, wyrównanie tekstu do środka, wysokość 370 px
  • Dla pojedynczego bloku z informacją o rozgrywkach: biały kolor czcionki, wyrównanie tekstu do środka, szerokość 200 px, marginesy zewnętrzne 10 px, obramowanie: 1 px, linia ciągła, kolor czarny, zaokrąglenie rogów obramowania 10 px
  • W momencie najechania kursorem na pojedynczy blok z informacją o rozgrywkach, kolor jego ramki zmienia się na biały
  • Dla bloku głównego: kolor tła WhiteSmoke, wysokość 50 px
  • Dla bloku lewego: kolor tła WhiteSmoke, szerokość 70%, wysokość 230 px
  • Dla bloku prawego: kolor tła WhiteSmoke, szerokość 30%, wysokość 230 px, wyrównanie tekstu do prawej strony
  • Dla znacznika body: krój czcionki Tahoma, kolor tła Crimson
  • Dla znacznika nagłówka drugiego stopnia: wyrównanie tekstu do środka, odległość między literami 7 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 futbol.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:
    • Wysyła do bazy danych zapytanie 1
    • Definiuje blok (za pomocą znacznika sekcji), a w nim wyświetla dane zwrócone zapytaniem dotyczące jednego wiersza:
      • W nagłówku trzeciego stopnia tekst: „<zespół 1> - <zespół 2>”, gdzie pola w nawiasach <> oznaczają dane pobrane zapytaniem
      • W nagłówku czwartego stopnia wynik pobrany zapytaniem
      • W paragrafie tekst: „w dniu: <data rozgrywki>”, gdzie pole w nawiasach <> oznacza dane pobrane zapytaniem
    • Liczba wygenerowanych bloków odpowiada liczbie wierszy zwróconych zapytaniem
  • Działanie skryptu 2, który odbiera dane przesłane z formularza
    • Odbiera dane z pola edycyjnego
    • Jeśli pole edycyjne jest puste nie jest wykonywana żadna akcja
    • Jeżeli wpisano dane skrypt wysyła do bazy danych zmodyfikowane zapytanie 2 tak, że w warunku id pozycji jest równe wartości z pola edycyjnego
    • Wyświetla zwrócone zapytaniem dane: imiona i nazwiska w paragrafach, jako elementy listy punktowanej

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, futbol.php, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, kwerendy.txt, obraz1.jpg, przeglądarka.txt, styl.css, zad1.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ą.