Arkusz E.14-04-19.06

Zadanie egzaminacyjne 

Wykonaj aplikację internetową portalu biblioteki miejskiej. Wykorzystaj pakiet XAMPP jako środowisko bazodanowo-aplikacyjne. Stronę internetową zbuduj przy wykorzystaniu edytora kodu zaznaczającego składnię.
Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie materialy4.zip zabezpieczone hasłem: Z@d@nie
Archiwum należy rozpakować.
Na pulpicie konta Egzamin utwórz folder. Jako nazwy folderu użyj swojego numeru PESEL. Rozpakowane pliki umieść w tym folderze. Wyniki swojej pracy również zapisz w tym folderze.

Operacje na bazie danych 

Tabele w bazie biblioteka wykorzystane w zadaniu przedstawione są na obrazie 1.
Obraz 1. Baza danych
Uruchom usługi MySQL i Apache z XAMPP Control Panel i przejdź do narzędzia phpMyAdmin. Następnie wykonaj operacje na bazie danych:
- Utwórz nową bazę danych o nazwie biblioteka
- Do bazy zaimportuj tabele z pliku biblioteka.sql, z wcześniej rozpakowanego archiwum
- Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w folderze z Twoim numerem PESEL, w formacie JPEG i nazwij dane. 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 w phpMyAdmin podane niżej zapytania SQL działające na bazie. Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz w formacie JPEG i nadaj im nazwy: zapytanie1, zapytanie2, zapytanie3, zapytanie4. Zrzuty powinny obejmować cały ekran monitora z widocznym paskiem zadań oraz zawierać wynik działania zapytania. Zapytania zapisz w pliku zapytania.txt. Pliki zawierające zrzuty ekranu oraz plik zapytania.txt umieść w folderze z Twoim numerem PESEL
- Zapytanie 1: wstawiające do tabeli czytelnicy nowy rekord z danymi: Anna, Michalak, an05mi
- Zapytanie 2: wybierające jedynie pola imie i nazwisko dla wszystkich rekordów w tabeli czytelnicy
- Zapytanie 3: wybierające jedynie pole tytul dla wszystkich utworów, których autorem jest Fredro
- Zapytanie 4: wybierające jedynie pole nazwisko dla wszystkich rekordów w tabeli autorzy oraz obliczające ilość tytułów danego autora znajdujących się w bazie biblioteka. Pole obliczające ilość tytułów należy nazwać ilosc.

Witryna internetowa 

Obraz 2. Witryna internetowa

Obraz 3. Zawartość formularza w bloku lewym: dwa pola edycyjne, jedno pole numeryczne oraz przycisk 

Obraz 4. Lista punktowana (nieuporządkowana)w bloku prawym 
Cechy witryny:
- Składa się ze strony o nazwie biblioteka.php
- Zastosowany właściwy standard kodowania polskich znaków
- Tytuł strony widoczny na karcie przeglądarki: „Biblioteka publiczna”
- Arkusz stylów w pliku o nazwie style.css prawidłowo połączony z kodem strony
- Podział strony na bloki: na górze baner, poniżej bloki: lewy, środkowy i prawy oraz 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ść banera: nagłówek drugiego stopnia o treści „Miejska Biblioteka Publiczna w Książkowicach”
- Zawartość bloku lewego:
 - Nagłówek drugiego stopnia o treści „Dodaj czytelnika”
 - Formularz zgodny z obrazem 3 zawierający:
   - Pole edycyjne typu tekstowego poprzedzone napisem „imię:”
   - Pole edycyjne typu tekstowego poprzedzone napisem „nazwisko:”
   - Pole edycyjne typu numerycznego poprzedzone napisem „rok urodzenia:”
   - przycisk DODAJ –realizujący skrypt 2
 - Formularz wysyła dane do serwera za pomocą przycisku DODAJ, metodą post
 - Skrypt 1
- Zawartość bloku środkowego:
Plik biblioteka.png
 - Obraz biblioteka.png z tekstem alternatywnym „biblioteka”
 - Nagłówek czwartego stopnia o treści: „ul. Czytelnicza 25 12-120 Książkowice tel.: 123123123 e-mail: biuro@bib.pl”
 - Treść nagłówka podzielona jest na cztery wiersze zgodnie z obrazem 2
 - Napis biuro@bib.pl jest odsyłaczem pocztowym łączącym z tym samym adresem e-mail
- Zawartość bloku prawego:
 - Nagłówek trzeciego stopnia o treści „Nasi czytelnicy:”
 - Lista punktowana (nieuporządkowana) zgodna z obrazem 4, elementy listy generowane są skryptem 2
- Zawartość stopki: akapit (paragraf) o treści „Projekt witryny:”, dalej wstawiony Twój numer PESEL

Styl CSS witryny internetowej 

Formatowanie strony zawiera:
- Format banera: kolor tła #D47958, wysokość 50 px
- Format bloku lewego: kolor tła #AA593B, wysokość 450 px, szerokość 40%
- Format bloku środkowego: kolor tła #E5998B, wysokość 450 px, szerokość 30%
- Format bloku prawego: kolor tła #AA593B, wysokość 450 px, szerokość 30%
- Format stopki: kolor tła #D47958, wysokość 50 px, wyrównanie tekstu do prawej strony
- Format listy punktowanej: margines zewnętrzny lewy 100 px, punktor elementów listy –okrąg
- Formatowanie obrazu: margines zewnętrzny górny 100 px, oblewanie tekstem z prawej strony(zgodnie z obrazem 2)
- Formatowanie formularza: margines zewnętrzny lewy 120 px, margines zewnętrzny górny 50 px
- Formatowanie nagłówka czwartego stopnia: margines zewnętrzny lewy 100 px, margines zewnętrzny górny 200 px
- Formatowanie nagłówka drugiego stopnia: wyrównanie tekstu do środka, wszystkie marginesy zewnętrzne 0 px
- Formatowanie nagłówka trzeciego stopnia: wyrównanie tekstu do środka

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, umieszczony w pliku biblioteka.php
- Skrypt łączy się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie biblioteka
- Nie jest wymagane sprawdzenie czy operacje na bazie danych powiodły się
- Na końcu działania skrypt zamyka połączenie z serwerem
Skrypt 1
- Pobiera dane z formularza
- Wyświetla napis „Czytelnik: .................. został dodany do bazy danych” (w miejscu kropek należy umieścić nazwisko pobrane z formularza)
- Tworzy kod czytelnika składający się z dwóch początkowych liter imienia, dwóch ostatnich cyfr z roku urodzenia oraz dwóch początkowych liter nazwiska (wszystkie litery w kodzie powinny być małe)
- Wysyła do bazy danych zmodyfikowane zapytanie 1 (z pliku zapytania.txt), wstawiające do tabeli czytelnicy nowy rekord zawierający imię i nazwisko pobrane z formularza oraz kod czytelnika wygenerowany w skrypcie
Skrypt 2
- Wysyła do bazy danych zapytanie 2 (z pliku zapytania.txt)
- Imiona i nazwiska wszystkich czytelników pobrane zapytaniem wypisywane są jako elementy listy punktowanej (nieuporządkowanej) zgodnie z obrazem 4
Tabela 1. Wybór funkcji języka PHP do obsługi bazy MySQLi i MariaDB

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: przeglądarka.txt, dane.jpg, zapytanie1.jpg, zapytanie2.jpg, zapytanie3.jpg, zapytanie4.jpg, zapytania.txt, biblioteka.php, style.css, biblioteka.png oraz 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,
- wygląd witryny internetowej,
- działanie witryny internetowej,
- styl CSS witryny internetowej,
- skrypt połączenia z bazą.