Arkusz E.14-02-18.01

Zadanie egzaminacyjne

Wykonaj aplikację internetową portalu ogłoszeniowego. Wykorzystaj pakiet XAMPP jako środowisko bazodanowo-aplikacyjne. Stronę internetową zbuduj przy wykorzystaniu edytora zaznaczającego składnię.
Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie materialy.zip zabezpieczone hasłem: Zad4ni3 
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. Po skończonej pracy wyniki zapisz także w tym folderze.

Operacje na bazie danych

Baza danych jest zgodna ze strukturą przedstawioną na obrazie 1. Tabela ogloszenie ma klucz obcy uzytkownik_id będący w relacji z kluczem głównym tabeli uzytkownik. Pole kategoria przyjmuje wartości liczbowe: 1 – książki, 2 – muzyka.
Obraz 1. Baza 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 nową bazę danych o nazwie ogloszenia


kod pliku baza.sql

- Do bazy ogloszenia zaimportuj tabele z pliku baza.sql z wcześniej rozpakowanego archiwum
- Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w folderze z numerem PESEL, w formacie JPEG i nazwij baza.jpg. Nie kadruj zrzutu. Powinien on obejmować cały ekran, 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 ogloszenia. Zapytania zapisz w pliku kwerendy.txt, w folderze z numerem PESEL. Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz w formacie JPEG 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 id, imie, nazwisko, email z tabeli uzytkownik dla tych rekordów, dla których id jest mniejsze od 4
 - Zapytanie 2: wybierające jedynie tytuł tego ogłoszenia, którego właściciel ma id równe 1
 - Zapytanie 3: tworzące użytkownika admin na localhost z hasłem zaq1@
 - Zapytanie 4: nadające prawa dla użytkownika admin do przeglądania, usuwania i zmiany danych w rekordach w tabeli uzytkownik

Witryna internetowa
Obraz 2. Witryna internetowa

Przygotowanie grafiki
obraz pliku książki.jpg
- Plik ksiazki.jpg, wypakowany z archiwum, należy przeskalować do wymiarów: szerokość 180 px, wysokość 240 px. Pozostałych atrybutów obrazu nie należy zmieniać
Cechy witryny 
- Nazwa pliku: portal.php
- Zastosowany właściwy standard kodowania polskich znaków
- Tytuł strony widoczny na karcie przeglądarki: „Ogłoszenia drobne”
- Arkusz stylów w pliku o nazwie styl2.css prawidłowo połączony z kodem strony
Podział strony na bloki: baner, panele lewy i prawy, stopka zrealizowany za pomocą znaczników sekcji, tak aby po uruchomieniu strony w przeglądarce wygląd był zgodny z obrazem 2
- Zawartość banera: nagłówek drugiego stopnia o treści: „Ogłoszenia drobne”
- Zawartość panelu lewego:
 - Nagłówek drugiego stopnia o treści: „Ogłoszeniodawcy”
 - Skrypt połączenia z bazą
- Zawartość panelu prawego:
 - Nagłówek drugiego stopnia o treści: „Nasze kategorie”
 - Lista punktowa (nieuporządkowana) z trzema elementami: Książki, Muzyka, Multimedia
 - Obraz ksiazki.jpg z tekstem alternatywnym o treści: „uwolnij swoją książkę”
 - Tabela o wymiarach 3 x 3. Ostatnia kolumna zawiera dwa wiersze scalone. Zawartość i wygląd tabeli zgodne ze wzorem

Tabela 1. Wygląd tabeli z panelu lewego

- Zawartość stopki: napis o treści: „Portal ogłoszenia drobne opracował:”, dalej wstawiony Twój numer PESEL.
Styl CSS witryny internetowej 
Plik styl2.css zawiera formatowanie:
- Banera: kolor tła #5A9089, biały kolor czcionki, krój czcionki: Verdana, wyrównanie tekstu do środka, wysokość 100 px
- Panelu lewego: kolor tła # BAD2CF, szerokość 55%, wysokość 600 px
- Panelu prawego: kolor tła #88AFAA, szerokość 45%, wysokość 600 px
- Stopki: kolor tła #5A9089, biały kolor czcionki, wyrównanie tekstu do prawej strony
- Tabeli, komórki tabeli: obramowanie na 1 px linią kropkowaną zieloną, szerokość tabeli 400 px, marginesy zewnętrzne 15 px, wyrównanie tekstu do środka
- Obrazu: marginesy wewnętrzne 25 px
- Listy punktowanej: styl punktora – okrąg
Niewymienione właściwości selektorów przybierają wartości domyślne.
Skrypt połączenia z bazą 
W tabeli 2 podano wybór funkcji PHP do obsługi bazy danych. Wymagania dotyczące skryptu:
- Napisany w języku PHP
- Nie jest wymagane sprawdzenie, czy operacja na bazie danych powiodła się
- Skrypt łączy się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie ogloszenia
- Skrypt wysyła do bazy danych dwa zapytania:
 - zapytanie 1 (patrz punkt „Operacje na bazie danych”)
 - zapytanie 2 (patrz punkt „Operacje na bazie danych”) zmodyfikowane tak, aby dla danego id użytkownika pobierany był tylko pierwszy tytuł ogłoszenia z jego ogłoszeń
- Dla każdego zwróconego zapytaniem wiersza wykonuje działania:
 - Wyświetla w nagłówku trzeciego stopnia pola: id imie nazwisko
 - Wyświetla w akapicie email
 - W kolejnym akapicie wyświetla tekst: „Ogłoszenie:” i dalej pierwszy tytuł ogłoszenia pobrany zmodyfikowanym zapytaniem 2
 - Na końcu działania skrypt zamyka połączenie z serwerem.

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

UWAGA: po zakończeniu pracy nagraj płytę z rezultatami pracy. W folderze z numerem PESEL powinny się znajdować pliki: baza.jpg, ksiazki.jpg, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, kwerendy.txt, portal.php, styl2.css, ewentualnie inne przygotowane pliki. 
Utwórz plik tekstowy. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny. Zapisz go na płycie jako przegladarka.txt. 
Po nagraniu płyty sprawdź poprawność nagrania. Opisz płytę swoim numerem PESEL i pozostaw zapakowaną w pudełku na stanowisku. 

Czas przeznaczony na wykonanie zadania wynosi 150 minut. 

Ocenie będą podlegać 4 rezultaty:
- operacje na bazie danych,
- witryna internetowa,
- styl CSS witryny internetowej,
- skrypt połączenia z bazą.