Arkusz EE.09 : 2020 - czerwiec - zad. 01 (php)

Oznaczenie: EE.09-01-20.06-SG   Limit czasu: 150 minut

Zadanie egaminacyjne

Wykonaj aplikację internetową organizera, 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 egzamin5.zip zabezpieczone hasłem: kaL(end)arz%

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.

Obraz 1. Tabela zadania

Operacje na bazie danych

Do wykonania zadania należy użyć tabeli zadania przedstawionej na Obrazie 1.

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 egzamin6
  • Do bazy egzamin6 zaimportuj tabele z pliku baza5.sql z rozpakowanego archiwum
  • Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie PNG pod nazwą import w folderze z numerem PESEL. Nie kadruj zrzutu. Zrzut powinien obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel  
  • Zapisz i wykonaj zapytania SQL działające na bazie egzamin6. 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 dataZadania, miesiac i wpis z tabeli zadania dla zadań, których miesiąc to sierpień
    • Zapytanie 2: wybierające jedynie pola miesiac i rok z tabeli zadania dla zadania z datą 2020-08-01
    • Zapytanie 3: wybierające jedynie pole wpis i wyświetlające je bez powtórzeń, z tabeli zadania dla wpisów kończących się literą „o” 
    • Zapytanie 4: zmieniające pole wpis w tabeli zadania dla zadania z datą 2020-08-27, nowy wpis to „Wycieczka: Karkonosze”

Witryna internetowa

Obraz 2. Witryna internetowa

Przygotowanie grafiki: 

  • Plik logo2.png, wypakowany z archiwum, należy przeskalować dokładnie do wymiarów 100 px na 100 px

Cechy witryny: 

  • Składa się ze strony o nazwie organizer.php
  • Zastosowany właściwy standard kodowania polskich znaków
  • Tytuł strony widoczny na karcie przeglądarki: „Organizer”
  • Arkusz stylów w pliku o nazwie styl6.css prawidłowo połączony z kodem strony 
  • Podział strony na bloki: trzy bloki banera, poniżej blok główny, w którym znajdują się bloki wyświetlające dane kolejnych dni, na dole blok stopki. Podział zrealizowany za pomocą znaczników sekcji tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z Obrazem 2
  • Zawartość pierwszego bloku banera: nagłówek drugiego stopnia o treści „MÓJ ORGANIZER” 
  • Zawartość drugiego bloku banera: formularz wysyłający dane metodą POST do tej samej strony, zawierający:
    • Pole edycyjne podpisane: „Wpis wydarzenia: ”
    • Przycisk wysyłający zawartość formularza z etykietą „ZAPISZ”
  • Zawartość trzeciego bloku banera: logo2.png z tekstem alternatywnym o treści: „Mój organizer” 
  • Zawartość bloku głównego: efekt działania skryptu 1
  • Zawartość stopki:
    • Efekt działania skryptu 2
    • Paragraf (akapit) o treści: „Stronę wykonał: ”, dalej wstawiony numer PESEL zdającego

Styl CSS witryny internetowej 

Cechy formatowania CSS:

  • Domyślne dla całej strony: krój czcionki Georgia
  • Dla pierwszego i drugiego bloku banera: kolor tła #3CB371, biały kolor czcionki, wysokość 100 px, szerokość 40% 
  • Dla trzeciego bloku banera: kolor tła #3CB371, wysokość 100 px, szerokość 20%
  • Dla bloku wyświetlającego dane jednego dnia: kolor tła #FFDAB9, szerokość 170 px, wysokość 90 px, marginesy zewnętrzne 5 px, obramowanie o szerokości 1 px, linią ciągłą o kolorze #3CB371 
  • Dla stopki: kolor tła #3CB371, biały kolor czcionki 
  • Dla znacznika nagłówka szóstego stopnia: wyrównanie tekstu do prawej strony
  • Dla znacznika formularza: marginesy wewnętrzne 30 px

Skrypt połączenia z bazą

W Tabeli 1 podano wybór funkcji PHP do obsługi bazy danych.

Wymagania dotyczące skryptu:

  • Napisany w języku PHP, w pliku organizer.php 
  • Skrypt łączy się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie egzamin6
  • Działanie skryptu, który odbiera dane przesłane z formularza:
    • Skrypt pobiera dane z pole edycyjnego
    • Następnie uaktualnia dane w bazie danych. Aby uprościć zadanie skrypt wprowadza wpis zawsze dla rekordu o dacie 2020-08-27. Do uaktualnienia danych wykorzystaj zapytanie 4, modyfikując w nim wartość pola wpis

Obraz 3. Pierwszy blok

  • Działanie skryptu 1:
    • Wysyła do bazy danych zapytanie 1
    • Definiuje blok (za pomocą znaczników sekcji), a w nim wyświetla dane przesłane skryptem dotyczące jednego wiersza. Blok jest zgodny z obrazem 3 oraz jest w nim wyświetlone:
      • W nagłówku szóstego stopnia data zadania i miesiąc oddzielone przecinkiem
      • Pole wpis w paragrafie (akapicie)
    • Liczba wygenerowanych bloków powinna odpowiadać liczbie wierszy zwróconych zapytaniem
  • Działanie skryptu 2:
    • Wysyła do bazy danych zapytanie 2
    • Wyświetla w nagłówku pierwszego stopnia tekst: „miesiąc: <nazwa_miesiąca>, rok:  <rok>”, gdzie pola w nawiasach <…> oznaczają dane pobrane skryptem
    • Na końcu działania skrypt zamyka połączenie z serwerem

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

Funkcje biblioteki mysql Funkcje bilioteki mysqli Zwracana wartość
mysql_connect(serwer, użytkownik, hasło) mysqli_connect(serwer, uzytkownik, haslo, nazwa_bazy) id połączenia lub FALSE, gdy niepowodzenie
mysql_select_db ('nazwa_bazy' [,id_polaczenia]) mysqli_select_db(id_polaczenia, nazwa_bazy) TRUE / FALSE, w zależności od stanu operacji
mysql_error([id_polaczenia]) mysqli_error(id_polaczenia) Tekst komunikatu błędu
mysql_close([id_polaczenia]) mysqli_close(id_polaczenia) TRUE / FALSE, w zależności od stanu operacji
mysql_query(zapytanie [,id_polaczenia]) mysqli_query(id_polaczenia, zapytanie) Wynik zapytania
mysql_fetch_row (wynik_zapytania) mysqli_fetch_row(wynik_zapytania) Tablica numeryczna odpowiadająca wierszowi zapytania
mysql_fetch_array (wynik_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
mysql_num_rows (wynik_zapytania) mysqli_num_rows(wynik_zapytania) Liczba wierszy w podanym zapytaniu
mysql_num_fields (wynik_zapytania) 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. Nazwij plik przeglądarka.txt i zapisz go w folderze z numerem PESEL.
Nagraj płytę z rezultatami pracy. W folderze z numerem PESEL powinny się znajdować następujące pliki: import.png, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, kwerendy.txt, logo2.png, organizer.php, przeglądarka.txt, styl6.css, 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ą.