Arkusz EE.09 : 2020 - czerwiec - zad. 05 (js)

Oznaczenie: EE.09-05-20.06-SG   Limit czasu: 150 minut

Zadanie egzaminacyjne

Wykonaj aplikację internetową salonu fryzjerskiego, wykorzystując pakiet XAMPP oraz edytor zaznaczający składnię.

Aby wykonać zadanie zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie fryzjer.zip zabezpieczone hasłem: Salon[FryzUr]

Archiwum należy rozpakować.

Pobierz fryzjer.zip

Na pulpicie konta Egzamin utwórz folder. Jako nazwy folderu użyj swojego numeru PESEL. Umieść w tym folderze rozpakowane pliki.

Po skończonej pracy wyniki zapisz również w tym folderze.

Operacje na bazie danych

Do wykonania operacji na bazie danych należy wykorzystać tabele uslugi i kadra przedstawione na Obrazie 1. W tabeli uslugi znajduje się pole rodzaj, które przyjmuje wartości: 1 – usługi kosmetyczne, 2 – usługi fryzjerskie, 3 – inne.

Obraz 1. Tabele bazy 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 bazę danych o nazwie egzamin2
  • Do bazy egzamin2 zaimportuj tabele z pliku egzamin2.sql z rozpakowanego archiwum
  • Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie JPG pod nazwą egzamin, w folderze opisanym numerem PESEL. Nie kadruj zrzutu. Zrzut powinien 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 zapytania SQL działające na bazie egzamin2. Zapytania zapisz w pliku kwerendy.txt, w folderze z numerem PESEL. Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz w formacie PNG i nadaj im nazwy kw1, kw2, kw3, kw4. Zrzuty powinny obejmować cały ekran monitora, z widocznym paskiem zadań
    • Zapytanie 1: wybierająca jedynie pola imie i nazwisko z tabeli kadra dla pracowników na stanowisku fryzjer
    • Zapytanie 2: liczące liczbę rekordów w tabeli uslugi dla wszystkich usług fryzjerskich (rodzaj odpowiada usługom fryzjerskim)
    • Zapytanie 3: tworzące użytkownika fryzjer na localhost z hasłem Fryz12
    • Zapytanie 4: nadające prawa tworzenia i modyfikowania struktury tabeli oraz przeglądania danych w tabeli kadra bazy egzamin2 dla użytkownika fryzjer

Witryna internetowa

Obraz 2. Witryna internetowa, strona index.html, ramka obrazu pojawia się, gdy kursor znajduje się nad obrazem

Przygotowanie grafiki:

  • Plik obraz1.jpg, wypakowany z archiwum, należy przeskalować z zachowaniem proporcji tak, aby jego wysokość wynosiła dokładnie 290 px
  • Plik obraz2.jpg, wypakowany z archiwum, należy przeskalować z zachowaniem proporcji tak, aby jego szerokość wynosiła dokładnie 600 px

Cechy witryny:

  • Składa się ze stron o nazwach index.html oraz fryzura.html. Obie strony różnią się jedynie drugim blokiem lewym

Cechy wspólne dla obu stron:

  • Zastosowany właściwy standard kodowania polskich znaków
  • Tytuł strony widoczny na karcie przeglądarki: „Usługi fryzjerskie”
  • Arkusz stylów w pliku o nazwie styl2.css prawidłowo połączony z kodem strony
  • Podział strony na bloki: dwa bloki po lewej stronie i trzy po prawej, poniżej stopka. 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ść pierwszego bloku po lewej stronie:
    • Nagłówek drugiego stopnia o treści „SALON FRYZJERSKI”, który jest jednocześnie odnośnikiem do strony index.html
    • Obraz o nazwie obraz2.jpg z tekstem alternatywnym „Czesanie”
  • Zawartość pierwszego bloku po prawej stronie:
    • Nagłówek drugiego stopnia o treści „MENU”
  • Zawartość drugiego bloku po prawej stronie:
    • Lista numerowana (uporządkowana) z elementami: Strzyżenie, Czesanie, Koloryzacja
    • Element „Strzyżenie” ma zagnieżdżoną listę punktowaną (nieuporządkowaną) z elementami: krótkie, średnie, półdługie, długie
    • Tekst elementu „Strzyżenie” jest równocześnie odnośnikiem do strony fryzura.html
  • Zawartość trzeciego bloku po prawej stronie
    • Obraz o nazwie obraz1.jpg z tekstem alternatywnym „Fryzjer”
  • Zawartość stopki:
    • Akapit (paragraf) o treści „Autor: ”, dalej wstawiony numer PESEL zdającego

Zawartość drugiego bloku po lewej stronie dla index.html:

  • Nagłówek piątego stopnia o treści „Kontakt: 111 222 333”
  • Akapit (paragraf) o treści zgodnej z Obrazem 2, łamanie wiersza zgodne z Obrazem 2
Treść akapitu: „Witaj! Miło nam, że odwiedziłeś nasz salon. Zapoznaj się z ofertą i sprawdź promocje!”

Wygląd drugiego bloku po lewej stronie dla fryzura.html przedstawiono na Obrazie 3, jego zawartość to:

  • Nagłówek trzeciego stopnia o treści „Dziś promocja na strzyżenie włosów”
  • Cztery pola radio jedno pod drugim z podpisami: Krótkie, Średnie, Półdługie, Długie. W danym momencie tylko jedno pole radio może być zaznaczone
  • Poniżej przycisk o treści „Odkryj promocję”
  • Poniżej wyniki działania skryptu

Obraz 3. Fragment strony fryzura.html

Styl CSS witryny internetowej

Cechy formatowania CSS, działające na obu stronach:

  • Domyślne dla całej strony: krój czcionki Helvetica
  • Dla pierwszego lewego bloku: wysokość 400 px, szerokość 70%, kolor tła Snow, wyrównanie tekstu do środka
  • Dla drugiego lewego bloku: wysokość 400 px, szerokość 70%, kolor tła Snow, rozmiar czcionki 150%
  • Dla pierwszego prawego bloku: wysokość 150 px, szerokość 30%, kolor tła SteelBlue, biały kolor czcionki, wyrównanie tekstu do środka
  • Dla drugiego prawego bloku: wysokość 350 px, szerokość 30%, kolor tła SteelBlue, biały kolor czcionki
  • Dla trzeciego prawego bloku: wysokość 300 px, szerokość 30%, kolor tła Snow, wyrównanie tekstu do środka
  • Dla stopki: kolor tła SteelBlue, biały kolor czcionki
  • Dla nagłówka drugiego stopnia: rozmiar czcionki 250%
  • Dla obrazu: marginesy wewnętrzne 4 px
  • W momencie, gdy kursor znajduje się na obrazie, styl obrazu zmienia się na: marginesy wewnętrzne 3 px oraz obramowanie linią ciągłą o szerokości 1 px i kolorze SteelBlue (efekt ten jest widoczny na Obrazie 2)

Skrypt

Wymagania dotyczące skryptu:

  • Napisany w języku wykonywanym po stronie przeglądarki
  • Uruchamia się po wciśnięciu przycisku na stronie fryzura.html
  • Podaje cenę strzyżenia w zależności od wyboru dokonanego przez pola radio zgodnie z cennikiem w tabeli
  • Wyświetla wynik działania pod przyciskiem według wzoru: „Cena strzyżenia: <wartość>”, gdzie <wartość> oznacza cenę strzyżenia dla wskazanej długości włosów
Długość włosów Cena
Krótkie 25
Średnie 30
Półdługie 40
Długie 50

Wybrane pola i metody modelu DOM języka JavaScript

Wyszukiwanie elementów
document.getElementById(Id)
document.getElementByTagName(TagName)
document.getElementsByClassName(ClassName)
Zmiana elementów
element.innerHTML = "nowa zawartość"
element.attribute = "nowa wartość"
element.setAttribute(atrybut,wartość)
element.style.property = "nowa wartość"
Dodawanie i usuwanie elementów
document.createElement(element)
document.removeChild(element)
document.appendChild(element)
document.replaceChild(element)
document.write(text)
Wybrane właściwości obiektu style
backgroundColor, color, fontSize
fontStyle = "normal | italic | oblique | initial | inherit"
fontWeight = "normal | lighter | bold | bolder | value | initial | inherit"
Wybrane zdarzenia HTML
Zdarzenia myszy: onclick, ondblclick, onmouseover, onmouseout
Zdarzenia klawiatury: onkeydown, onkeypress, onkeyup
Zdarzenia obiektów: onload, onfocusin, onresize, onfocusout / onblur
Elementy formularzy
Ważniejsze typy pola input: button, checkbox, number, password, radio, text
Inne elementy: select, textarea
Metody i pola obiektu string (JS)
length
indexOf(text)
search(text)
substr(startIndex, endIndex)
replace(textToReplace, newText)
toUpperCase()
toLowerCase()
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: egzamin.jpg, fryzura.html, index.html, kw1.png, kw2.png, kw3.png, kw4.png, kwerendy.txt, obraz1.jpg, obraz2.jpg, przeglądarka.txt, styl2.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.