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

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

Zadanie egzaminacyjne

Wykonaj aplikację internetową salonu kosmetycznego, 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 kosmetyczka.zip zabezpieczone hasłem: Do{Rozp4kow4ni4}

Archiwum należy rozpakować.

Pobierz kosmetyczka.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 egzamin1
  • Do bazy egzamin1 zaimportuj tabele z pliku egzamin.sql z rozpakowanego archiwum
  • Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie JPEG o nazwie 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 egzamin1. 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ące jedynie pola nazwa i cena z tabeli uslugi dla usług, których cena jest niższa od 30 zł
    • Zapytanie 2: liczące sumę cen dla wszystkich usług kosmetycznych (rodzaj odpowiada usługom kosmetycznym)
    • Zapytanie 3: tworzące użytkownika kosmetyczka na localhost z hasłem Kosmet34
    • Zapytanie 4: nadające prawa przeglądania danych i wstawiania rekordów do tabeli uslugi bazy egzamin1 dla użytkownika kosmetyczka

Witryna internetowa

Obraz 2. Witryna internetowa, strona index.html, kursor znajduje się na obrazie po lewej stronie

Przygotowanie grafiki:

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

Cechy witryny:

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

Cechy wspólne dla obu stron:

  • Zastosowany właściwy standard kodowania polskich znaków
  • Tytuł strony widoczny na karcie przeglądarki: „Usługi kosmetyczne”
  • Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
  • Podział strony na bloki: dwa bloki po lewej stronie i dwa po prawej, poniżej stopka. Podział zrealizowany za pomocą znaczników sekcji, tak aby po uruchomieniu w przeglądarce układ bloków był zgodny z Obrazem 2
  • Zawartość pierwszego bloku po lewej stronie:
    • Nagłówek drugiego stopnia o treści „W ofercie”
    • Lista punktowa (nieuporządkowana) z elementami: Zabiegi na twarz, Masaż, Diety oczyszczające
      • Element „Zabiegi na twarz” ma zagnieżdżoną listę numerowaną (uporządkowaną) z elementami: Piling, Maska, Regulacja brwi
      • Tekst elementu „Zabiegi na twarz” jest równocześnie odnośnikiem do strony twarz.html
    • Odnośnik o treści „Do strony głównej” do strony index.html
  • Zawartość pierwszego bloku po prawej stronie: nagłówek pierwszego stopnia o treści „Salon Kosmetyczny”
  • Zawartość drugiego bloku po lewej stronie: obraz o nazwie obraz1.jpg z tekstem alternatywnym „Kosmetyczka”
  • Zawartość stopki: akapit (paragraf) o treści „Autor: ”, dalej wstawiony numer PESEL zdającego

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

  • Obraz o nazwie obraz2.jpg z tekstem alternatywnym „Zabiegi kosmetyczne”
  • Akapit (paragraf) o treści zgodnej z Obrazem 2, łamanie wiersza zgodne z Obrazem 2
  • Nagłówek czwartego stopnia o treści „Telefon: 111 222 333”
Treść akapitu: „Witaj! Miło nam, że odwiedziłeś nasz salon. Zapoznaj się z ofertą i sprawdź ceny zabiegów lub skontaktuj się z nami”

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

  • Nagłówek drugiego stopnia o treści „Sprawdź cenę swojej wizyty”
  • Cztery pola checkbox jeden pod drugim z podpisami: Piling, Maska, Masaż twarzy, Regulacja brwi
  • Poniżej przycisk o treści „Sprawdź cenę”
  • Poniżej wyniki działania skryptu

Obraz 3. Fragment strony twarz.html

Styl CSS witryny internetowej

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

  • Domyślne dla całej strony: krój czcionki Garamond
  • Dla pierwszego lewego bloku: wysokość 500 px, szerokość 25%, kolor tła Lavender
  • Dla drugiego lewego bloku: wysokość 300 px, szerokość 25%, kolor tła Lavender
  • Dla pierwszego prawego bloku: wysokość 150 px, szerokość 75%, kolor tła Indigo, biały kolor czcionki, rozmiar czcionki 200%, wyrównanie tekstu do środka
  • Dla drugiego prawego bloku: wysokość 650 px, szerokość 75%, kolor tła Lavender, rozmiar czcionki 200%, wyrównanie tekstu do środka
  • Dla stopki: kolor tła Indigo, biały kolor czcionki, wyrównanie tekstu do prawej strony
  • Dla listy punktowanej (nieuporządkowanej): kwadrat jako punktor
  • Dla obrazu: marginesy wewnętrzne 5 px, marginesy zewnętrzne 10 px
  • W momencie, gdy kursor znajduje się na obrazie, styl obrazu zmienia się na: marginesy wewnętrzne 4 px oraz obramowanie linią ciągłą o szerokości 1 px i kolorze Indigo (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 twarz.html
  • Oblicza łączną cenę zabiegów wybranych za pomocą pól checkbox zgodnie z cennikiem w tabeli
  • Wyświetla wynik działania pod przyciskiem według wzoru: „Cena zabiegów: <suma>”, gdzie <suma> oznacza całkowitą cenę wybranych zabiegów
Usługa Cena
Piling 45
Maska 30
Masaż 20
Regulacja brwi 5

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: index.html, twarz.html, egzamin.jpg, kw1.png, kw2.png, kw3.png, kw4.png, kwerendy.txt, obraz1.jpg, obraz2.jpg, przeglądarka.txt, styl.css, 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
  • zawartość witryny internetowej
  • działanie witryny internetowej
  • styl CSS witryny internetowej
  • skrypt.