E.14 - 08 - 19.01




Zadania egzaminacyjne

Wykonaj aplikację internetową prezentującą możliwości HTML,CSS i JavaScript. Wykorzystaj pakiet XAMPP jako środowisko bazowo-aplikacyjne, edytor zaznaczający skadnię oraz program do obróbki grafiki rastrowej i wektorowej.
Aby wykonać zadanie, zaloguj się na konto Egazamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie materialy2.zip zabezpieczone hasłem: Twoj3Zad@niE
Archiwum należy rozpakować
Na pulpicie konta Egzamin utwórz folder. Jako nzawy folderu użyj swojego numeru PESEL. Rozpakowane pliki umieść w tym folderze. Wyniki swojej pracy zapisz w tym folderze.

Operacje na bazie danych
Baza danych jest zgodna ze strukturą przedstawioną na obrazie 1. Tabela podzespoly ma dwa klucze obce, łączące je z tabelami producenci i typy. Pole dostepnosc tabeli podzespoly przybiera wartość 0, gdy produkt nie jest dostępny oraz 1, gdy produkt jest dostępny
Brak obrazu proszę zgłosić do supportu Brak obrazu proszę zgłosić do supportu
Obraz 1. Baza danych oraz wartości w tabeli producenci


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 sklep
  • Do bazy sklep zaimportuj tabele z pliku baza.sql z rozpakowanego archiwum
  • Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w folderze z numerem PESEL, w formacie PNG i nazwij import. 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 sklep. Zapytania zapisz w pliku kwerendy.txt w folderze z numerem PESEL. Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz w formacie JPG 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: nazwa, dostepnosc, cena z tabeli podzespoly dla tych podzespołów, których producentem jest ADATA
    - Zapytanie 2: wybierające jedynie pola id oraz opis z tabeli podzespoly dla tych podzespołów, które nie są dostępne oraz producentem jest Intel lub AMD
    - Zapytanie 3: wybierające jedynie pola opis i cena z tabeli podzespoly oraz odpowiadające mu pole nazwa z tabeli producenci
    - Zapytanie 4: modyfikujące strukturę tabeli producenci poprzez dodanie kolumny o nazwie priorytet i dowolnym type całkowitym
Witryna internetowa
Brak obrazu proszę zgłosić do supportu
Obraz 2. Witryna internetowa, przycisk ADATA został wcześniej wybrany.
Przygotowanie grafiki:
- Plik zad2.png, wypakowany z archiwum, należy przeskalować z zachowaniem proporcji tak, aby jego wysokość wynosiła dokładnie 300px
-Plik zapisać jako sprzet.png, z zachowaniem pozostałych atrybutów, w tym przezroczystości

Cechy witryny:
  • Składa się ze strony o nazwie hurtownia.php
  • Zastosowany właściwy standard kodowania polskich znaków
  • Tytuł strony widoczny na karcie przeglądarki: "Hurtownia komputerowa"
  • Arkusz stylów w pliku o nazwie styl2.css prawidłowo połączony z kodem strony
  • Podział strony na bloki: na górze blok listy, blok formularza i blok logo, poniżej blok główny, na dole blok stopki. Podział zrealizowany za pomocą znaczików sekcji tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z obrazem 2
  • Zawartość bloku listy: lista punktowana z wpisami: "Producenci". Element "Producenci" zagnieżdża listę numerowaną z 9 elementami: "Intel", "AMD", "Motorola", "Corsair", "ADATA, "WD", "Kingstone", "Patriot", "Asus"
  • Zawartość bloku formularza:
    - Nagłówek pierwszego stopnia o treści "Dystrybucja sprzętu komputerowego"
    - Formularz z napisem "Wybierz producenta", polem edycyjnym typu numerycznego oraz przyciskiem "WYŚWIETL"
    - Formularz przekazuje dane do serwera za pomocą przycisku "WYŚWIETL", metodą post
  • Zawartość bloku logo: obraz sprzet.png z tekstem alternatywnym "Sprzedajemy komputery"
  • Zawartość bloku głównego:
    - Nagłówek pierwszego stopnia o treści "Podzespoły wybranego producenta"
    - Efekt wykonania skryptu
  • Zawartość stopki:
    - Nagłówek trzeciego stopnia o treści "Zapraszamy od poniedziałku do soboty w godzinach 700-1630, oznaczenie minut z zastosowaniem indeksu górnego"
    - Tekst "Strony partnerów: "
    - Dwa odnośniki: pierwszy o treści "ADATA", prowadzący do strony "http://adata.pl/"" oraz drugi o treści "Patriot", prowadzący do strony "http://patriot.pl/"; oba odnośniki otwierają strony w nowej karcie przeglądarki
    - Odnośnik o treści "Napisz" łączący z adresem e-mail biuro@hurt.pl
    - Akapit o treści "Stronę wykonał: ", dalej wstawiony numer PESEL
Styl CSS witryny internetowej
Cechy formatowania działające na stronie:
- Domyślne dla całej strony: krój czcionki Helvetica
- Wspólnie dla bloku listy i logo: kolor tła #6FACE3, niebieski kolor czcionki, wysokość 300px, szerokość 30%
- Dla bloku formularza: kolor tła #6FACE3, wysokość 300px, szerokość 40%
- Dla bloku głównego: kolor tła #4C93D2, wysokośc 350px, marginesy wewnętrzne 20px, wyrównanie tekstu do środka
- Dla stopki: kolor tła #2D77BA, biały kolor czcionki, wysokość 170px, marginesy wewnętrzne 15px
- Dla znacznika odnośnika nieodwiedzonego: kolor tła LightSkyBlue, marginesy zewnętrzne 5px, wewnętrzne 10px
- Dla znacznika odwiedzonego: kolor tła - LightSteelBlue

W tabeli 1 podano wybór funkcji do obsługi bazy danych

Brak obrazu proszę zgłosić do supportu
Tabela 1. Wybór funkcji języka PHP do obsługi bazy MySQL i MariaDB
Skrypt połączenia z bazą
Wymagania dotyczące skryptu:
  • Napisany w języku PHP, umieszczony w pliku hurtownia.php
  • Skrypt łączy się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie sklep
  • Skrypt pobiera dane z pola edycyjnego formularza
  • Po wczytaniu strony przeglądarki na stronie wyświetlony jest komunikat "Wybierz producenta"
  • Skrypt wysyła do bazy danych zmodyfikowane zapytanie 1, w ten sposób, że w sekcji warunku numer producenta jest zgodny z wartością pola edycyjnego. Jeśli w polu wpisana jest wartość 1 - zapytanie dotyczy firmy Intel, wartość 2 - zapytanie dotyczy firmy AMD itd.
  • Każdy zwrócony zapytaniem wiersz jest wyświetlany w osobnym akapicie, w bloku głównym zgodnie z Obrazem 2, według wzoru <nazwa> CENA: <cena>
  • Jeżeli produkt jest dostępny to dopisywane jest w tym samym akapicie "DOSTĘPNY", w przeciwnym wypadku "NIEDOSTĘPNY"
  • Na końcu skrypt zamyka połączenie z serwerem bazodanowym
PODANE ROZWIĄZANIE JEST TYLKO PRZYKŁADEM.