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.

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.

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

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

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.