E.14 - 07 - 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 materialy1.zip zabezpieczone hasłem: TwojeZ@d@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 typy


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, opis, cena z tabeli podzespoly dla tych podzespołów, które są procesorami
    -Zapytanie 2: wybierające jedynie pola id oraz nazwa z tabeli podzespoly dla tych podzespołów, które są dostępne oraz ich cena jest mniejsza niż 400zł
    -Zapytanie 3: wybierające jedynie pole nazwa z tabeli podzespoly oraz odpowiadające mu pole kategoria z tabeli typy dla podzespołów, które są procesorami
    -Zapytanie 4: modyfikujące strukturę tabeli typy poprzez dodanie kolumny o nazwie opis i typie TEXT
Witryna internetowa
Brak obrazu proszę zgłosić do supportu
Obraz 2. Witryna internetowa, przycisk AMD został wcześniej wybrany
Przygotowanie grafiki:
- Plik zad1.png, wypakowany z archiwum, należy przeskalować z zachowaniem proporcji tak, aby jego wysokość wynosiła dokładnie 270px
-Plik zapisać jako komputer.png, z zachowaniem pozostałych atrybutów, w tym przezroczystości

Cechy witryny:
  • Składa się ze strony o nazwie sklep.php
  • Zastosowany właściwy standard kodowania polskich znaków
  • Tytuł strony widoczny na karcie przeglądarki: "Hurtownia"
  • Arkusz stylów w pliku o nazwie styl1.css prawidłowo połączony z kodem strony
  • Podział strony na bloki: na górze blok logo, blok listy i blok formularza, 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 logo: obraz komputer.png z tekstem alternatywnym "hurtownia komputerowa"
  • Zawartość bloku listy: lista punktowana z wpisami: "Sprzęt" oraz "Oprogramowanie". Element "Sprzęt" zagnieżdża listę numerowaną z elementami: "Procesory", "Pamięć RAM", "Monitory", "Obudowy", "Karty graficzne, "Dyski twarde"
  • Zawartość bloku formularza:
    - Nagłówek drugiego stopnia o treści "Hurtownia komputerowa"
    - Formularz z napisem "Wybierz kategorię sprzętu", polem edycyjnym typu numerycznego oraz przyciskiem "SPRAWDŹ"
    - Formularz przekazuje dane do serwera za pomocą przycisku "SPRAWDŹ", metodą post
  • Zawartość bloku głównego:
    - Nagłówek pierwszego stopnia o treści "Podzespoły we wskazanej kategorii"
    - Efekt wykonania skryptu
  • Zawartość stopki:
    - Nagłówek trzeciego stopnia o treści "Hurtownia działa od poniedziałku do soboty w godzinach 700-1600, oznaczenie minut z zastosowaniem indeksu górnego"
    - Odnośnik o treści "Napisz do nas" łączący z adresem e-mail bok@hurtownia.pl
    - Tekst "Partnerzy"
    - Dwa odnośniki: pierwszy o treści "Intel", prowadzący do strony "http://intel.pl/"" oraz drugi o treści "AMD", prowadzący do strony "http://amd.pl/"; oba odnośniki otwierają strony w nowej karcie przeglądarki
    - 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 Verdana
- Dla bloku logo: kolor tła #FF9F79, wysokość 270px, szerokość 30%
- Wspólnie dla bloku listy i formularza: kolor tła #FF9F79, zielony kolor czcionki, wysokość 270px, szerokość 35%
- Dla bloku głównego: kolor tła #80CDAC, wysokośc 400px, marginesy wewnętrzne 30px, wyrównanie tekstu do środka
- Dla stopki: kolor tła #188256, wysokość 150px, marginesy wewnętrzne 10xp
- Dla znacznika odnośnika nieodwiedzonego: zielony kolor tła zielony, marginesy zewnętrzne oraz wewnętrzne 10px, obramowanie 2px, linią ciągłą w kolorze pomarańczowym
- Dla znacznika odwiedzonego: kolor tła - violet

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 sklep.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 poprawną kategorię sprzętu"
  • Skrypt wysyła do bazy danych zmodyfikowane zapytanie 1, w ten sposób, że w sekcji warunku typ sprawdzanego podzespołu jest zgodny z wartością pola edycyjnego. Jeśli w polu wpisana jest wartość 1 - zapytanie dotyczy producentów, wartość 2 - zapytanie dotyczy pamięci RAM
  • Każdy zwrócony zapytaniem wiersz jest wyświetlany w osobnym akapicie, w bloku głównym zgodnie z Obrazem 2, według wzoru <nazwa> <opis> CENA: <cena>
  • Na końcu skrypt zamyka połączenie z serwerem bazodanowym
PODANE ROZWIĄZANIE JEST TYLKO PRZYKŁADEM.