Arkusz INF.03 : 2025 - styczeń - zad. 01 (js)

Oznaczenie: INF.03-01-25.01-SG   Limit czasu: 150 minut

Zadanie egzaminacyjne

UWAGA!
Numer, którym został podpisany arkusz egzaminacyjny (PESEL lub w przypadku jego braku numer paszportu) jest w zadaniu nazywany numerem zdającego.

Wykonaj aplikację internetową firmy szkoleniowej, wykorzystując edytor grafiki rastrowej, pakiet XAMPP oraz edytor zaznaczający składnię.

Aby wykonać zadanie, należy zalogować się na konto Egzamin bez hasła. Na pulpicie znajduje się archiwum 7z o nazwie PlikiSt202501 zabezpieczone hasłem: KuRsyKompuTerow3&

Pobierz PlikiSt202501.7z

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

Do wykonania operacji na bazie należy wykorzystać przedstawione na Ilustracji 1 tabele.

Ilustracja 1. Baza danych

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

  • Utwórz bazę danych o nazwie obuwie, z zestawem polskich znaków (np. utf8_unicode_ci)
  • Do utworzonej bazy zaimportuj tabele z pliku baza.sql z rozpakowanego archiwum
  • Wykonaj zrzut ekranu po imporcie. Zapisz zrzut w formacie JPEG pod nazwą 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 obuwie. Zapytania zapisz w pliku kwerendy.txt. 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 kolor i materiał produktów, których wysokość buta jest większa niż 10
    • Zapytanie 2: wybierające jedynie nazwę i cenę buta oraz odpowiadającą im nazwę kategorii. Należy posłużyć się relacją
    • Zapytanie 3: tworzące konto użytkownika Marek na localhost z hasłem M@reK
    • Zapytanie 4: nadające kontu Marek prawa jedynie do przeglądania i aktualizacji danych jedynie w bazie danych obuwie, w tabeli produkt

Grafika

Na potrzeby witryny internetowej należy przygotować grafikę baner.png o cechach:

  • Utworzony na podstawie pliku klawiatura.jpg, który należy wykadrować do szerokości 1000 px i wysokości 100 px, zgodnie z kadrem przedstawionym na Ilustracji 2
  • Na środku umieszczony napis "Kursy komputerowe" czcionką Arial pochyloną i pogrubioną, o rozmiarze 60, wypełnioną kolorem białym

Ilustracja 2. Wykadrowanie obrazu klawiatura.jpg

Witryna internetowa

Ilustracja 3. Strona index.html, kursor na odnośniku

Cechy witryny:

  • Składa się z podstron o nazwach index.html, raty.html

Cechy wspólne dla stron:

  • Zapisane w języku HTML5
  • Zadeklarowany polski język zawartości witryny
  • Jawnie zastosowany właściwy standard kodowania polskich znaków
  • Tytuł strony widoczny na karcie przeglądarki: „Kursy komputerowe”
  • Arkusz stylów w pliku o nazwie style.css prawidłowo połączony z kodem strony
  • Podział strony na bloki: nagłówkowy, poniżej menu, poniżej główny, na dole stopka. Podział zrealizowany 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 Ilustracją 3
  • Zawartość bloku nagłówkowego: obraz baner.png z tekstem alternatywnym „kursy komputerowe” − Zawartość menu:
    • Odnośnik o treści „Strona główna” prowadzący do strony index.html
    • Odnośnik o treści „Koszt rat” prowadzący do strony raty.html
    • Odnośnik o treści „Nasz partner” prowadzący do strony https://moje-szkolenia.pl/
  • Zawartość stopki: paragraf o treści „Autor strony: ”, dalej wstawiony numer zdającego

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

  • Nagłówek trzeciego stopnia o treści „Kursy komputerowe - programowanie”
  • Tabela składająca się z 3 kolumn i 3 wierszy przedstawiona na Ilustracji 4, pierwszy wiersz zawiera komórki nagłówkowe
  • Nagłówek trzeciego stopnia o treści „Adres do korespondencji”
  • Lista punktowana (nieuporządkowana) wypełniona zawartością:
    • „Adres: Katowice, ul. Mariacka 5”
    • „Telefon: 32 888 88 88”
    • Odnośnik pocztowy o treści „skontaktuj się” prowadzący do adresu kursy@komputerowe.pl

Ilustracja 4. Tabela na stronie index.html

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

  • Nagłówek trzeciego stopnia o treści „Oblicz miesięczną ratę”
  • Pole wyboru z etykietą „Kurs React.js”
  • Pole wyboru z etykietą „Kurs JavaScript”
  • Pole edycyjne typu numerycznego poprzedzone etykietą: „Liczba rat: ”
  • Lista rozwijana z danymi: „Warszawa”, „Katowice”, „Gdańsk”
  • Przycisk o treści „Oblicz”, którego wybranie uruchamia skrypt
  • Rozmieszczenie kontrolek zgodnie z Ilustracją 5
  • Pusty paragraf do wyświetla wyniku działania skryptu

Styl CSS witryny internetowej

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

  • Domyślnie, dla wszystkich selektorów: krój czcionki Helvetica
  • Dla selektora ciała strony: kolor tła #EAEAEA
  • Wspólne dla bloków menu i stopki: kolor tła #625B5B, biały kolor czcionki, marginesy wewnętrzne 20 px, wyrównanie tekstu do środka
  • Dla selektora obrazu: szerokość 100%
  • Dla selektora listy punktowanej: margines zewnętrzny lewy 40 px, typ punktora okrąg
  • Dla odsyłaczy jedynie w bloku menu: czcionka pogrubiona, kolor tła #EAEAEA, kolor czcionki #625B5B, marginesy wewnętrzne 10 px, marginesy zewnętrzne 50 px, zaokrąglenie rogów 20 px
  • Gdy kursor myszy znajdzie się na odsyłaczu w menu jego kolor tła zmienia się na #625B5B, czcionki na #EAEAEA oraz pojawia się obramowanie linią ciągłą o szerokości 1 px i kolorze #EAEAEA
  • Dla selektora tabeli: obramowanie linią kreskową o grubości 1 px i kolorze #625B5B, szerokość 60%, margines zewnętrzny lewy 40 px, wyrównanie tekstu do środka
  • Dla klasy o nazwie kontrolki: marginesy zewnętrzne 5 px. Klasa jest przypisana do wszystkich kontrolek na stronie raty.html (pól wyboru, pola edycyjnego, listy rozwijalnej i przycisku)
UWAGA!
Styl CSS ciała strony, obrazu, listy i tabeli należy zdefiniować wyłącznie przy pomocy selektora tych znaczników. Jest to uwarunkowane projektem późniejszej rozbudowy witryny.

Skrypt

W Tabeli 1 zamieszczono wybrane funkcje języka JavaScript. Wymagania dotyczące skryptu:

  • Wykonywany po stronie klienta, na stronie raty.html po kliknięciu przycisku „Oblicz”
  • Należy stosować znaczące nazewnictwo zmiennych i funkcji w języku polskim lub angielskim
  • Pobiera dane z kontrolek
  • Ustala całkowitą kwotę za wybrane kursy na podstawie cen z tabeli z Ilustracji 4
  • Oblicza koszt jednej raty na podstawie kwoty całkowitej. Dla uproszczenia kwota całkowita jest dzielona przez podaną liczbę rat
  • Wyświetla pod przyciskiem w paragrafie treść: „Kurs odbędzie się w <miasto>. Koszt całkowity: <kwota> zł. Płacisz <liczba> rat po <rata> zł”, gdzie
    • <miasto> oznacza wybór z listy rozwijalnej
    • <kwota> oznacza obliczoną kwotę całkowitą
    • <liczba> oznacza podaną liczbę rat
    • <rata> oznacza wyliczoną ratę

Ilustracja 5. Blok główny na stronie raty.html. Działanie skryptu

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: baner.png, import.jpg, index.html, kw1.png, kw2.png, kw3.png, kw4.png, kwerendy.txt, raty.html, przeglądarka.txt, style.css, ewentualnie inne przygotowane pliki. Po nagraniu płyty sprawdź poprawność jej odczytu. Opisz płytę numerem zdającego i pozostaw zapakowaną w pudełku na stanowisku wraz z arkuszem egzaminacyjnym.

Czas przeznaczony na wykonanie zadania wynosi 150 minut.

Ocenie podlegać będzie 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()