Arkusz INF.03 : 2024 - czerwiec - zad. 08 (js)

Oznaczenie: INF.03-08-24.06-SG   Limit czasu: 150 minut

Zadanie egzaminacyjne

UWAGA!
Folder z rezultatami pracy oraz płytę należy opisać numerem zdającego, którym został podpisany arkusz, czyli numerem PESEL lub w przypadku jego braku numerem paszportu. Dalej w zadaniu numer ten jest nazwany numerem zdającego.

Wykonaj aplikację internetową rejestrującą nowego użytkownika sklepu, wykorzystując pakiet XAMPP, edytor grafiki rastrowej oraz edytor zaznaczający składnię.

Aby wykonać zadanie, należy zalogować się na konto Egzamin bez hasła. Na pulpicie znajduje się archiwum ZIP o nazwie PlikiCz202408 zabezpieczone hasłem: _Rejestr@cja_

Pobierz PlikiCz202408.zip

Archiwum należy rozpakować.

Na pulpicie konta Egzamin należy utworzyć folder. Jako nazwy folderu należy użyć numeru zdającego. Rozpakowane pliki należy umieścić w tym folderze. Po skończonej pracy wszystkie wyniki należy zapisać w tym folderze.

Operacje na bazie danych

Baza danych jest zgodna ze strukturą przedstawioną na Obrazie 1. Jedna osoba może mieć zdefiniowane kilka adresów i kilka telefonów.

Obraz 1. Baza danych

Za pomocą narzędzia phpMyAdmin wykonaj operacje na bazie danych:

  • Utwórz bazę danych o nazwie klienci, z zestawem polskich znaków (np. utf8_unicode_ci)
  • Do bazy zaimportuj tabele z pliku baza.sql z rozpakowanego archiwum
  • Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie PNG i nazwij import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel.
  • Wykonaj zapytania SQL działające na bazie klienci. Zapytania zapisz w pliku kwerendy.txt. Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz w formacie JPEG i nadaj im nazwy kw1, kw2, kw3, kw4. Zrzuty powinny obejmować cały ekran monitora z widocznym paskiem zadań.
    • Zapytanie 1: wybierające jedynie imiona i nazwiska osób urodzonych po 2000 roku
    • Zapytanie 2: wybierające nazwy miast, z których pochodzą klienci posortowane alfabetycznie rosnąco. Nazwy miast nie mogą się powtarzać
    • Zapytanie 3: wybierające jedynie imiona i nazwiska osób oraz odpowiadające im numery telefonów. Należy posłużyć się relacją
    • Zapytanie 4: Dodające kolumnę numerMieszkania typu całkowitego, do tabeli Adresy po kolumnie numer

Witryna internetowa

Obraz 2. Witryna internetowa. Stan początkowy. Kursor na zakładce Klient

Przygotowanie grafiki:

  • Plik obraz.jpg wypakowany z archiwum należy skadrować, tak aby była widoczna tylko niebieska plakietka z pętelką (patrz Obraz 2), ustawić tło przezroczyste oraz przeskalować z zachowaniem proporcji do wysokości 200 px
  • Obraz zapisać pod tą samą nazwą w formacie PNG

Cechy witryny:

  • Składa się ze strony o nazwie rejestracja.html zapisanej w języku HTML5
  • Ustawiony język zawartości strony na polski
  • Jawnie zastosowany właściwy standard kodowania polskich znaków
  • Tytuł strony widoczny na karcie przeglądarki: „Sklep - rejestracja”
  • Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
  • Podział strony na blok boczny i obok niego bloki: baner, główny, blok paska postępu oraz na dole blok stopki. Podział zrealizowany wyłącznie za pomocą semantycznych znaczników sekcji języka HTML5 tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z Obrazem 2
  • Zawartość bloku bocznego:
    • Obraz o nazwie obraz.png z tekstem alternatywnym „promocje”
    • Nagłówek drugiego stopnia o treści „Sprawdź promocje”
    • Tabela, której pierwszy wiersz jest złożony z komórek nagłówkowych, wypełniona treściami widocznymi na Obrazie 3

Obraz 3. Tabela

  • Zawartość banera:
    • Nagłówek pierwszego stopnia o treści „Zarejestruj się w sklepie”
  • Zawartość bloku głównego:
    • Trzy przyciski o treściach: „Klient”, „Adres”, „Kontakt”, wciśnięcie dowolnego z nich wywołuje funkcję aktywującą kolejno blok pierwszy, drugi, trzeci
    • Blok pierwszy z kontrolkami (Obraz 2):
      • Paragraf „Imię”, następnie pole edycyjne z podpowiedzią „Wpisz dane...”
      • Paragraf „Nazwisko”, następnie pole edycyjne
      • Paragraf „Data urodzenia”, następnie pole edycyjne typu daty
    • Blok drugi z kontrolkami (Obraz 4):
      • Paragraf „Ulica”, następnie pole edycyjne
      • Paragraf „Numer”, następnie pole edycyjne typu numerycznego
      • Paragraf „Miasto”, następnie pole edycyjne
    • Blok trzeci z kontrolkami (Obraz 5):
      • Paragraf „Numer komórkowy”, następnie pole edycyjne typu numeru telefonu
      • Pole wyboru podpisane „Akceptuję RODO”
      • Przycisk „Zatwierdź dane”, którego kliknięcie powoduje wywołanie funkcji zatwierdzającej
    • Dla wszystkich pól edycyjnych – utrata focusa powoduje wywołanie funkcji zmieniającej wartość paska postępu
  • Zawartość paska postępu: pusty blok (sekcja)
  • Zawartość stopki: nagłówek czwartego stopnia o treści: „Rejestrację do sklepu wykonał: ”, dalej wstawiony numer zdającego

Styl CSS witryny internetowej

Styl CSS zdefiniowany jest w całości w zewnętrznym pliku o nazwie styl.css. Cechy formatowania CSS, działające na stronie:

  • Domyślne formatowanie wszystkich selektorów: krój czcionki Cambria
  • Dla ciała dokumentu: kolor tła Linen
  • Wspólne dla bloków bocznego, banera i stopki: kolor tła SteelBlue, biały kolor czcionki, wyrównanie tekstu do środka
  • Dodatkowo dla bloku bocznego: szerokość 25%, wysokość 510 px, margines zewnętrzny górny i dolny 0, lewy i prawy 1%, cień bloku o przesunięciu 4 px w obu osiach, rozmyciu 5 px i kolorze DimGray
  • Dodatkowo dla banera: szerokość 73%, wysokość 80 px
  • Dla bloku głównego: szerokość 73%, wysokość 400 px
  • Dla wszystkich przycisków: kolor tła SteelBlue, biały kolor czcionki, szerokość 20%, marginesy wewnętrzne 15 px, margines zewnętrzny górny 30 px, rozmiar czcionki 130%, bez obramowania
  • Gdy kursor znajduje się na przycisku jego kolor tła zmienia się na Navy
  • Dla trzech bloków z kontrolkami: kolor tła LightBlue, margines zewnętrzny prawy 80 px, marginesy wewnętrzne 10 px. W stanie początkowym jest widoczny tylko pierwszy blok z kontrolkami
  • Dla bloku paska postępu: kolor tła LightGrey, szerokość 73%, margines zewnętrzny dolny 10 px
  • Dla pustego bloku w bloku paska postępu: kolor tła Navy, szerokość 4%, wysokość 30 px
  • Dla tabeli: szerokość 100%, obramowanie linią kropkowaną o szerokości 1 px i kolorze Navy

Skrypt

Wymagania dotyczące skryptu:

  • Napisany w języku JavaScript
  • Należy stosować znaczące nazewnictwo wszystkich zmiennych i funkcji
  • Funkcja aktywująca
    • Wywoływana przez wciśnięcie dowolnego przycisku zakładki w bloku głównym
    • Ukrywa wszystkie zakładki
    • Pokazuje jedynie tę zakładkę (blok), której przycisk wybrano. Na Obrazach 4 i 5 pokazano stan bloku głównego po wciśnięciu kolejno przycisku Adres i przycisku Kontakt

Obraz 4. Po wciśnięciu przycisku Adres

Obraz 5. Po wciśnięciu przycisku Kontakt

  • Funkcja zmieniająca wartość paska postępu
    • Wywoływana po utracie focusa przez dowolne pole edycyjne
    • Działanie paska postępu polega na zmianie szerokości pustego bloku w bloku paska postępu (Obrazy 4 i 5)
    • Funkcja jest uproszczona, zakładamy że każda utrata focusa kontrolki jest równa wpisaniu do niej danych i powoduje zwiększenie szerokości paska (nie sprawdzamy czy dane rzeczywiście zostały wpisane, zostały usunięte itp.)
    • Funkcja modyfikuje właściwość stylu dla pustego bloku wewnątrz bloku paska postępu, w ten sposób, że jego szerokość jest zwiększana o 12%, np. po utracie focusa za pierwszym razem wartość wynosi 16%; za drugim razem jest to 28%, trzecim 40% i tak dalej
    • Należy zabezpieczyć funkcję, aby wartość szerokości nigdy nie była wyższa niż 100%
  • Funkcja zatwierdzająca
    • Wywoływana po wybraniu przycisku „Zatwierdź dane”
    • Pobiera wartość z każdego pola edycyjnego i pola wyboru
    • Wartości wyświetlane są w konsoli przeglądarki (Obraz 6)
    • Dla uproszczenia wszelką walidację należy pominąć

Obraz 6. Działanie funkcji zatwierdzającej

UWAGA!
Po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Umieść go w folderze z numerem zdającego.
UWAGA!
Nagraj płytę z rezultatami pracy. W folderze z numerem zdającego powinny znajdować się pliki: import.png, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, kwerendy.txt, obraz.png, przeglądarka.txt, rejestracja.html, styl.css, ewentualnie inne przygotowane pliki. Po nagraniu płyty sprawdź poprawność jej odczytu. Opisz płytę numerem zdającego, którym został podpisany arkusz 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.

Tabela 1. Wybrane pola i metody modelu DOM języka JavaScript

Wyszukiwanie elementów
document.getElementById(Id)
document.getElementByTagName(TagName)
document.getElementsByClassName(ClassName)
document.getElementsByName(ElementName)
document.querySelector(CSSselector)
document.querySelectorAll(CSSselector)
Zmiana elementów
element.innerHTML = "nowa zawartość"
element.attribute_name = "nowa wartość"
element.setAttribute(atrybut,wartość)
element.style.property_name = "nowa wartość"
Operacje na elementach dokumentu
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"
listStyleType = "circle| decimal | disc | none | square | initial..."

Wybrane zdarzenia HTML
Zdarzenia myszy: onclick, ondblclick, onmouseover, onmouseout
Zdarzenia klawiatury: onkeydown, onkeypress, onkeyup
Zdarzenia obiektów: onload, onresize, onfocusin, onfocusout
Elementy formularzy
Ważniejsze typy pola input: button, checkbox, number, password, radio, text, range
Inne elementy: select, textarea
Metody i pola obiektu string (JS)
length
indexOf(text)
search(text)
substr(startIndex, endIndex)
replace(textToReplace, newText)
toUpperCase()
toLowerCase()

Tabela 2. Cień elementu i tekstu w CSS