Zadanie egzaminacyjne
Utwórz stronę internetową oraz bazę danych. Do wykonania zadania wykorzystaj program phpMyAdmin z pakietu XAMPP, edytor zaznaczający składnię oraz edytor grafiki rastrowej.
Aby wykonać zadanie zaloguj się bez hasła na konto Egzamin. Na pulpicie znajduje się plik egzamin1.zip z plikami potrzebnymi do rozwiązania zadania. Plik ten zabezpieczony jest hasłem 2ws3ed!#
Na pulpicie utwórz folder i nazwij go Twoim numerem PESEL. Wszystkie pliki utworzone w czasie egzaminu umieść w tym folderze.
 |
| obraz.png |
Operacje na bazie danych
Za pomocą wizualnych narzędzi (kreatorów) przystawki phpMyAdmin utwórz bazę danych wraz z tabelami i danymi na podstawie opisu:
‒ Baza danych o nazwie malarz
‒ Dwie tabele: farby i malowanie
‒ Tabela farby zawiera kolumny z informacjami o puszkach farby: id_farby (klucz podstawowy), kolor, cena, pojemosc (kolor jest typu tekstowego, pozostałe pola - całkowite)
‒ Tabela malowanie zawiera kolumny z informacjami o liczbie zużytych puszek farby w poszczególnych pomieszczeniach,na poszczególne ściany i składa się z pól: id_pomieszczenia (klucz podstawowy), id_sciany (klucz podstawowy), id_farby (klucz obcy wiążący do tabeli farby), liczba_puszek. Wszystkie pola typu całkowitego
‒ Dane z tabeli farby zawiera Tabela 1. Należy wypełnić tabelę tymi danymi
‒ Dane z tabeli malowanie znajdują się w pliku malowanie.txt. Należy zaimportować plik do tabeli
‒ Wykonaj zrzuty ekranu dokumentujące utworzenie bazy danych. Zrzuty ekranu należy zapisać w formacje JPEG i muszą one zawierać cały obszar monitora z widocznym paskiem zadań. Powinny zawierać strukturę tabeli farby i malowanie (nazwy struktura_farby, struktura_malowanie) oraz dane zapisane do tabeli farby i malowanie (nazwa dane_farby, dane_malowanie)
‒ Zaprojektuj kwerendy i zapisz je w pliku kwerendy.txt. Udokumentuj wykonanie kwerend za pomocą zrzutów w formacie JPEG o nazwach kw1, kw2, kw3. Zapytania powinny mieć charakter uniwersalny,czyli powinny działać dla dowolnych danych wpisanych do tabeli. Zrzuty ekranu powinny zawierać cały obszar monitora z widocznym paskiem zadań.Opis kwerend:
‒ Kwerenda 1: wybierającą jedynie cenę niebieskiej puszki farby
‒ Kwerenda 2: wybierającą jedynie nazwę koloru oraz cenę jednego litra farby obliczoną za pomocą pól cena i pojemnosc dla wszystkich wierszy tabeli farby
‒ Kwerenda 3: wybierającą jedynie nazwy kolorów farb dla pomieszczenia 3
‒Wyeksportuj tabele do pliku malarz w formacie SQL
Grafika do strony
‒ Plik obraz.png przeskalowany do rozmiarów 200 px na 200 px oraz zapisany w formacie JPEG
Witryna internetowa
|
| Obraz 1. Podstrona index.html |
Witryna internetowa zawiera podstrony index.html, mieszamy.html i cena.html. Cechy wspólne wszystkich podstron witryny:
‒ Zastosowany standard kodowania polskich znaków
‒ Połączenie z zewnętrznym stylem CSS o nazwie styl.css
‒ Tytuł strony: malarz
‒ Strona podzielona na bloki: baner, poniżej obok siebie panel lewy i prawy, poniżej stopka.Podział na bloki przy pomocy znaczników sekcji
‒ Zawartość banera: nagłówek pierwszego stopnia o treści: „Koszty farby”, który jest odnośnikiem do pliku index.html
‒ Zawartość panelu lewego:
‒ Nagłówek trzeciego stopnia o treści: „Mieszamy czy wyceniamy?”
‒ Odnośnik o treści: „Mieszamy”, prowadzący do strony mieszamy.html
‒ W nowej linii odnośnik o treści: „Wyceniamy”prowadzący do strony cena.html
‒ Zawartość stopki: dwa napisy w osobnych liniach o treści: „MALARZ” oraz „Stronę opracował:”, dalej wstawiony numer PESEL zdającego
Zawartość panelu prawego podstrony index.html
‒ Paragraf (akapit) o treści: „Strona poświęcona malarstwu:)”
‒ Obraz obraz.jpg z tekstem alternatywnym o treści: „abstrakcja”
Zawartość panelu prawego podstrony mieszamy.html
‒ Paragraf o treści: „Strona w trakcie budowy”
|
| Obraz 2. Fragment panelu prawego podstrony cena.html |
Zawartość panelu prawego podstrony cena.html
‒ Nagłówek trzeciego stopnia o treści: „Obliczanie na podstawie powierzchni zapotrzebowania na farbę”
‒ Napis o treści: „Podaj powierzchnię:”
‒ Obok pole edycyjne służące do wprowadzenia liczby rzeczywistej,będącej powierzchnią do pomalowania
‒ Poniżej przycisk „Policz”, po jego wybraniu uruchamia się skrypt
Styl CSS
Arkusz CSS zawiera formatowanie dla:
‒ banera: kolor tła: #829EB9, wysokość bloku: 80 px, tekst wyśrodkowany, czcionką Arial, margines wewnętrzny górny: 10 px
‒ panelu lewego: kolor tła: #B3C6D9, wysokość: bloku 500px, szerokość: 25%, margines wewnętrzny górny: 100 px, tekst wyśrodkowany, rozmiar czcionki: 20 px
‒ panelu prawego: kolor tła: #E0E9F1, wysokość bloku 500px, szerokość: 75%, tekst wyśrodkowany, rozmiar czcionki: 20 px, margines wewnętrzny górny: 100 px
‒ stopki: żółty kolor tła, tekst wyśrodkowany, czcionką Arial, wysokość bloku: 50 px
‒ selektora obrazu: margines zewnętrzny 30px, margines wewnętrzny 10 px
Skrypt
Skrypt jest wykonywany po stronie przeglądarki, na podstronie cena.html
‒ Skrypt pobiera z pola edycyjnego wielkość powierzchni do pomalowania
‒ Na podstawie tej wartości wylicza minimalną liczbę puszek wystarczających do pomalowania tej powierzchni, wiedząc, że:
‒ Jedna puszka zawiera 1 litr farby
‒ 1 litr farby wystarcza do pomalowania powierzchni 4 m2
‒ Obliczona liczba puszek musi być liczbą całkowitą(zaokrąglona do góry). Np. do pomalowania powierzchni 6 m2, potrzeba 2 puszek, a nie 1 i pół.
‒ Obliczony wynik jest wyświetlony pod przyciskiem, a jego treść to: „Liczba jednolitrowych puszek farby potrzebnych do pomalowania wynosi: ”, dalej wstawiony obliczony skryptem wynik
UWAGA: Po zakończeniu pracy utwórzw folderze z numerem PESEL plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, wktórej weryfikowałeś poprawność działania witryny. Nagraj płytę z rezultatami pracy. W folderze z numerem PESEL powinny się znajdować pliki: cena.html, dane_farby.jpg, dane_malowanie.jpg, index.html, kw1.jpg, kw2.jpg, kw3.jpg, kwerendy.txt, malarz.sql, mieszamy.html, obraz.jpg, przeglądarka.txt, struktura_farby.jpg, struktura_malowanie.jpg, styl.css, 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,
– zawartość witryny internetowej,
– działanie witryny internetowej,
– styl CSS witryny internetowej,
– skrypt.
