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

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

Zadanie egzaminacyjne

Wykonaj stronę „moje konto” dla portalu społecznościowego, wykorzystując pakiet XAMPP oraz edytor zaznaczający składnię a także edytor grafiki rastrowej.

Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajduje się archiwum ZIP o nazwie portal.zip zabezpieczone hasłem: List@Przyjaciol&

Należy utworzyć folder o nazwie odpowiadającej numerowi PESEL zdającego lub w przypadku jego braku innemu numerowi, którym został podpisany arkusz. Archiwum należy rozpakować do tego folderu.

Pobierz portal.zip

Ważne! Aby strona działała poprawnie rozpakowane pliki muszą znaleźć się w tym samym folderze, co pliki strony. Wszystkie wykonane w czasie egzaminu pliki w tym zrzuty ekranu, pliki strony, stylów należy umieścić w tym folderze.

Operacje na bazie danych

Do wykonania operacji na bazie należy wykorzystać tabele osoby i hobby przedstawione na Obrazie 1.

Obraz 1. Tabele bazy danych

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 dane
  • Do bazy dane zaimportuj plik dane.sql z rozpakowanego archiwum
  • Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w folderze z numerem PESEL lub w przypadku jego braku w folderze z innym numerem, którym został podpisany arkusz, w formacie JPEG i nazwij egzamin. 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 dane. Zapytania zapisz w pliku kwerendy.txt, w folderze z numerem PESEL lub w przypadku jego braku w folderze z innym numerem, którym został podpisany arkusz. Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz w formacie PNG 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, nazwisko, opis, zdjecie z tabeli osoby, dla wszystkich osób, których Hobby_id jest jedną z wartości: 1, 2, 6
    • Zapytanie 2: wybierające jedynie pola id i nazwisko z tabeli osoby oraz odpowiadające im pole nazwa z tabeli hobby dla osób, które urodziły się po 2000 roku
    • Zapytanie 3: wybierające jedynie pola id i zdjecie z tabeli osoby dla osób, które mają na imię Monika. Kwerenda wybiera pierwsze 5 wierszy, należy jawnie wskazać liczbę wierszy
    • Zapytanie 4: tworzące tabelę o nazwie wpisy z następującymi polami:
      • id, klucz główny jawnie zapisany, typu całkowitego dodatniego, automatycznie inkrementowany, nie może przyjmować wartości pustych
      • wpis typu tekstowego
      • uzytkownik_id typu całkowitego dodatniego, nie może przyjmować wartości pustych

Witryna internetowa

Obraz 2. Witryna internetowa, strona lista.php

Cechy grafiki:

  • Plik osoba1.jpg, wypakowany z archiwum, skadrowany do proporcji 1:1, tak aby była widoczna twarz osoby. Przeskalowany do rozmiaru dokładnie 100 px na 100 px

Pozostałe pliki graficzne są przygotowane i nie należy ich zmieniać.

Cechy witryny:

  • Składa się ze strony o nazwie lista.php
  • Zastosowany właściwy standard kodowania polskich znaków
  • Tytuł strony widoczny na karcie przeglądarki: „Lista przyjaciół”
  • Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
  • Podział strony na bloki umiejscowione jeden pod drugim: baner, główny i dwa obok siebie bloki stopki. Dodatkowo w bloku głównym, za pomocą skryptu generowane są bloki: zdjęcie, opis, linia odpowiadające każdej z wyświetlanych osób z bazy. Podział zrealizowany za pomocą znaczników sekcji tak, aby wygląd układu bloków strony po uruchomieniu w przeglądarce, był zgodny z Obrazem 2
  • Zawartość banera: nagłówek pierwszego stopnia o treści „Portal Społecznościowy - moje konto”
  • Zawartość bloku głównego:
    • Nagłówek drugiego stopnia o treści „Moje zainteresowania”
    • Lista punktowana (nieuporządkowana) z elementami: muzyka, film, komputery
    • Nagłówek drugiego stopnia o treści „Moi znajomi”
    • Efekt działania skryptu
  • Zawartość pierwszego bloku stopki: napis o treści „Stronę wykonał: ”, dalej wstawiony numer PESEL zdającego lub w przypadku jego braku inny numer, którym został podpisany arkusz
  • Zawartość drugiego bloku stopki: odnośnik pocztowy o treści „napisz do mnie” prowadzący do adresu: ja@portal.pl

Styl CSS witryny internetowej

Cechy formatowania CSS:

  • Domyślne dla całej strony: krój czcionki Georgia
  • Dla banera: kolor tła #005B4F, biały kolor czcionki, wyrównanie tekstu do środka, rozmiar czcionki 50%, wysokość 20 px
  • Dla bloku głównego: kolor tła #E1E2E1, wysokość 400px, marginesy wewnętrzne 20 px, paski przesuwania (scroll)
  • Dla bloku zdjęcie: szerokość 20%
  • Dla bloku opis: blok jest wyświetlany obok zdjęcia
  • Dla bloku linia: linia jest wyświetlana pod zdjęciem i opisem zgodnie z obrazem 2
  • Dla obu bloków stopki: kolor tła #005B4F, biały kolor czcionki, wyrównanie tekstu do środka, szerokość 50%, wysokość 20 px
  • Dla selektora obrazu: marginesy wewnętrzne 20 px, zakrzywienie obramowania 100% (tak, że obraz jest wyświetlany w kształcie koła)
  • Dla selektora nagłówka drugiego stopnia: wyrównanie tekstu do środka, tło #00897B
  • Dla selektora odnośnika: biały kolor czcionki

Skrypt

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

  • Napisany w języku PHP
  • Skrypt łączy się z serwerem bazy danych na localhost, użytkownik root bez hasła, baza danych o nazwie dane
  • Po wykonaniu operacji na bazie danych skrypt zamyka połączenie z serwerem
  • Wysyła do bazy danych zapytanie 1
  • Dane z każdego zwróconego zapytaniem wiersza podzielone są na trzy bloki
    • blok zdjęcie, w którym jest wyświetlony obraz o nazwie pobranej z bazy danych oraz tekście alternatywnym „przyjaciel”
    • blok opis, w którym jest wyświetlony nagłówek trzeciego stopnia z imieniem i nazwiskiem pobranym z bazy danych oraz paragraf (akapit) o treści: „Ostatni wpis: <opis>”, gdzie pole <opis> jest pobrane z bazy danych
    • blok linia, w którym jest wyświetlona linia pozioma

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 w folderze z numerem PESEL lub w przypadku jego braku w folderze z innym numerem, którym został podpisany arkusz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny.
Nagraj płytę z rezultatami pracy. W folderze z numerem PESEL lub w przypadku jego braku w folderze z innym numerem, którym został podpisany arkusz powinny się znajdować pliki: egzamin.jpg, kw1.png, kw2.png, kw3.png, kw4.png, kwerendy.txt, lista.php, osoba1.jpg, osoba2.jpg, osoba3.jpg, osoba4.jpg, osoba5.jpg, osoba6.jpg, osoba7.jpg, osoba8.jpg, przeglądarka.txt, styl.css, ewentualnie inne przygotowane pliki.
Po nagraniu płyty sprawdź poprawność nagrania. Opisz płytę swoim numerem PESEL lub w przypadku jego braku innym numerem, którym został podpisany arkusz i pozostaw na stanowisku, zapakowaną w pudełku 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.