Arkusz E.14-01-19.06

Zadanie egzaminacyjne 

Wykonaj aplikację internetową portalu ogłoszeniowego sklepu internetowego. 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 materialy1.zip zabezpieczone hasłem: Z@dani3
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 sklep wykorzystane w zadaniu przedstawione są na obrazie 1. Pole promocja przechowuje tylko dwie wartości: 0 – jeżeli towar nie jest objęty promocją, 1 – jeżeli towar jest objęty promocją.Tabele połączone są relacją opartą na polach: idDostawcy w tabeli towary oraz id w tabeli dostawcy.
Obraz 1. Baza danych
 kod pliku sklep.sql
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 sklep
- Do bazy zaimportuj tabele z pliku sklep.sql, z wcześniej rozpakowanego archiwum
- Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w folderze z Twoim numerem PESEL, w formacie JPEG i nazwij baza. 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 danych. Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz wformacie JPEG i nadaj im nazwy kwerenda1, kwerenda2, kwerenda3, kwerenda4. Zrzuty powinny obejmować cały ekran monitora z widocznym paskiem zadań oraz zawierać przykładowe zapytanie. Zapytania zapisz w pliku kwerendy.txt. Pliki zawierające zrzuty ekranu oraz plik kwerendy.txt umieść w folderze z Twoim numerem PESEL
- Zapytanie 1: wybierające jedynie pole nazwa dla produktów objętych promocją z tabeli towary
- Zapytanie 2: wybierające jedynie pole cena dla produktu cienkopis z tabeli towary
- Zapytanie 3: wybierające jedynie pole nazwa dla wszystkich rekordów z tabeli dostawcy oraz zliczające ilość towarów dostarczanych przez każdego z dostawców. Pole zliczające należy nazwać ilosc
- Zapytanie 4: modyfikujące strukturę tabeli dostawcy poprzez dodanie pola o nazwie e_mail i typie TEXT

Witryna internetowa 

Obraz 2. Witryna internetowa
Przygotowanie grafiki:
- Plik promocja.png, wypakowany z archiwum, należy przeskalować z zachowaniem proporcji tak, aby jego szerokość wynosiła dokładnie 200 px
Plik promocja.png
- Plik po przeskalowaniu należy zapisać jako promocja2.png, z zachowaniem pozostałych atrybutów, w tym przezroczystości
Obraz 3. Lista punktowana w bloku lewym
Obraz 4. Zawartość formularza w bloku środkowym: lista rozwijalna, zawierająca cztery elementy oraz przycisk
Cechy witryny:
- Składa się ze strony o nazwie index.php
- Zastosowany właściwy standard kodowania polskich znaków
- Tytuł strony widoczny na karcie przeglądarki „Sklep papierniczy”
- Arkusz stylów w pliku o nazwie styl.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 pierwszego stopnia o treści „W naszym sklepie internetowym kupisz najtaniej”
- Zawartość bloku lewego:
  - Nagłówek trzeciego stopnia o treści „Promocja 15% obejmuje artykuły:”
  - Lista punktowana (nieuporządkowana) zgodna z obrazem 3, elementy listy generowane są skryptem 1
- Zawartość bloku środkowego:
  - Nagłówek trzeciego stopnia o treści „Cena wybranego artykułu w promocji”
  - Formularz składający się z:
    - Listy rozwijalnej zawierającej nazwy wszystkich towarów w promocji, zgodnej z obrazem 4
    - Przycisku WYBIERZ – realizującego skrypt 2
    - Formularz wysyła dane do serwera za pomocą przycisku WYBIERZ, metodą post
    - Skrypt 2
- Zawartość bloku prawego:
  - Nagłówek trzeciego stopnia o treści: „Kontakt”
  - Umieszczony w akapicie (paragrafie) tekst „telefon: 123123123 e-mail: bok@sklep.pl” podzielony na dwa wiersze (zgodnie z obrazem 2)
  - Napis bok@sklep.pl jest odsyłaczem pocztowym łączącym z tym samym adresem
  - Obraz promocja2.png z tekstem alternatywnym „promocja”
- Zawartość stopki: nagłówek czwartego stopnia o treści „Autor strony”, dalej wstawiony Twój numer PESEL

Styl CSS witryny internetowej 

Formatowanie strony zawiera:
- Format banera: kolor tła #E8C84E, wysokość 50 px, wielkość czcionki 130%, wyrównanie tekstu do środka
- Format bloku lewego: kolor tła #FFB544, wysokość 500 px, szerokość 40%, wielkość czcionki 130%
- Format bloku środkowego: wysokość 500 px, szerokość 30%, wyrównanie tekstu do środka
- Format bloku prawego: kolor tła #FFB544, wysokość 500 px, szerokość 30%, wielkość czcionki 130%, wyrównanie tekstu do środka
- Format stopki: kolor tła #E8C84E, wysokość 50 px, wyrównanie tekstu do prawej strony, marginesy wewnętrzne 10 px
- Format elementów listy punktowanej: margines wewnętrzny górny 30 px, kolor tła #FFAA00
- Formatowanie obrazu i nagłówka h3: margines zewnętrzny górny 50 px
- Formatowanie formularza: margines zewnętrzny dolny 100 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, umieszczony w pliku index.php
- Skrypt łączy się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie sklep
- 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
- Wysyła do bazy danych zapytanie 1 (z pliku kwerendy.txt)
- Nazwy produktów pobrane zapytaniem wypisywane są jako elementy listy punktowanej (nieuporządkowanej) zgodnie z obrazem 3
Skrypt 2
- Pobiera z formularza nazwę produktu wybranego w liście rozwijalnej
- Wysyła do bazy danych zapytanie 2 (z pliku kwerendy.txt), zmodyfikowane w ten sposób, że w sekcji warunku nazwa produktu jest zgodna z wyborem w liście rozwijalnej
- Oblicza cenę w promocji jako 85% ceny pobranej zapytaniem
- Zaokrągla obliczoną cenę do dwóch miejsc po przecinku
- Obliczona cena w promocji wyświetlana jest poniżej formularza
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, baza.jpg, kwerenda1.jpg, kwerenda2.jpg, kwerenda3.jpg, kwerenda4.jpg, kwerendy.txt, index.php, styl.css, promocja.png, promocja2.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ą.