Arkusz EE.09 : 2020 - styczeń - zad. 02 (js)

Oznaczenie: EE.09-02-20.01-SG   Limit czasu: 150 minut

Zadanie egzaminacyjne

Wykonaj aplikację internetową portalu stacji paliw, 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 paliwo.zip zabezpieczone hasłem: P4liWo$3

Archiwum należy rozpakować.

Pobierz paliwo.zip

Na pulpicie konta Egzamin utwórz folder. Jako nazwy folderu użyj swojego numeru PESEL. Rozpakowane pliki umieść w tym folderze. Wyniki pracy zapisz w tym folderze.

Operacje na bazie danych

Do wykonania operacji na bazie należy wykorzystać tabelę samochody z polami: id (klucz główny), marka, model, rocznik, kolor, stan.

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 samochody
  • do bazy samochody 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. 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 samochody. 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 model, kolor i stan z tabeli samochody dla samochodów, których rocznik jest większy od 2010 r.
    • zapytanie 2: zmieniające wartość w tabeli samochody. Dla samochodów, których model to „Yaris” należy zmienić wartość pola kolor na „ciemny niebieski”
    • zapytanie 3: tworzące użytkownika joanna na localhost z hasłem joan87$
    • zapytanie 4: nadające użytkownikowi joanna prawo do tworzenia tabeli i zmiany jej struktury dla tabeli samochody

Witryna internetowa

Obraz 1. Witryna internetowa, Obliczona ilość paliwa

Przygotowanie grafiki:

  • plik samochod.png, wypakowany z archiwum, należy przeskalować z zachowaniem proporcji tak, aby jego wysokość wynosiła dokładnie 250 px

Cechy witryny:

  • składa się ze stron o nazwach index.html oraz kalkulacja.html. Obie strony różnią się jedynie panelem głównym

Cechy wspólne dla obu stron:

  • zastosowany standard kodowania polskich znaków
  • tytuł strony widoczny na karcie przeglądarki: „Nasza stacja paliw”
  • arkusz stylów w pliku o nazwie styl4.css prawidłowo połączony z kodem strony
  • podział strony na bloki: na górze blok banera, poniżej dwa bloki: lewy i prawy, poniżej blok główny, na dole dwa bloki stopki: lewy i prawy. Podział zrealizowany za pomocą znaczników sekcji tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z obrazem 1
  • zawartość bloku banera: nagłówek drugiego stopnia o treści „Witamy na stacji paliw!”
  • zawartość bloku lewego:
    • obraz home.png, który jest odnośnikiem do strony index.html
    • obraz znak.png, który jest odnośnikiem do strony kalkulacja.html
  • zawartość bloku prawego: obraz samochod.png z tekstem alternatywnym „grafika: samochód”
  • zawartość bloku stopki lewej: akapit (paragraf) o treści: „Stronę opracował: PESEL”, gdzie PESEL to Twój numer PESEL
  • zawartość bloku stopki prawej: odnośnik do pliku kwerendy.txt o treści: „Tu pobierzesz zapytania”

Zawartość bloku głównego strony index.html:

  • nagłówek drugiego stopnia o treści „Oferujemy paliwa:”
  • tabela 2x3, której komórki są wypełnione zgodnie z obrazem 2

Zawartość bloku głównego strony kalkulacja.html:

  • nagłówek drugiego stopnia o treści „Oblicz, ile litrów musisz zatankować”
  • pole edycyjne typu numerycznego, a nad nim napis o treści: „dystans do przejechania w km:”
  • pole edycyjne typu numerycznego, a nad nim napis o treści: „spalanie samochodu w l/100km:”
  • przycisk o treści „OBLICZ”

Obraz 2. Tabela z pliku index.html

Styl CSS witryny internetowej

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

  • domyślne dla całej strony: krój czcionki Arial
  • wspólne dla bloku lewego i bloku prawego: kolor tła RGB 255, 127, 80; biały kolor czcionki, szerokość 50%, wysokość 410 px
  • wspólne dla bloku banera i bloku głównego: kolor tła RGB 220, 220, 220; marginesy wewnętrzne 20 px, wyrównanie tekstu do środka
  • wspólne dla bloku stopki lewej i bloku stopki prawej: kolor tła RGB 255, 127, 80; biały kolor czcionki, szerokość 50%, wysokość 100 px
  • dla znacznika tabeli i komórki tabeli: obramowanie linią ciągłą o grubości 1 px i kolorze RGB 255, 127, 80; marginesy wewnętrzne 10 px, wyrównanie tekstu do środka
  • dla znacznika odnośnika: biały kolor czcionki

Skrypt

Wymagania dotyczące skryptu:

  • napisany w języku wykonywanym po stronie przeglądarki
  • skrypt uruchamia się po wciśnięciu przycisku OBLICZ na stronie kalkulacja.html
  • skrypt pobiera wartości z obu pól edycyjnych numerycznych
  • następnie oblicza ilość potrzebnego paliwa ze względu na drogę do przebycia w km i spalanie w litrach na 100 km
  • następnie skrypt wyświetla wynik działania pod przyciskiem OBLICZ według wzoru: „Potrzebujesz: <wartość> litrów paliwa”, gdzie <wartość> oznacza obliczoną wcześniej ilość paliwa

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 o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny. Umieść go w folderze z numerem PESEL.
Nagraj płytę z rezultatami pracy. W folderze z numerem PESEL powinny znajdować się pliki: home.png, import.png, index.html, kalkulacja.html, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, kwerendy.txt, przeglądarka.txt, samochod.png, styl4.css, znak.png, ewentualnie inne przygotowane pliki.
Po nagraniu płyty sprawdź poprawność jej odczytu. Opisz płytę swoim numerem PESEL i pozostaw zapakowaną w pudełku 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.