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

Oznaczenie: INF.03-10-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ę prezentującą pracowników firmy, 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 PlikiCz202410 zabezpieczone hasłem: K@dra_FirMy#

Pobierz PlikiCz202410.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. Pole staz określa staż pracy pracownika w latach.

Obraz 1. Baza danych

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

  • Utwórz bazę danych o nazwie kadra, 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 kadra. 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 liczbę wierszy i pensję grupując pracowników według pensji i sortując dane malejąco ze względu na pensję. W wyniku zapytania są wyświetlane poszczególne pensje oraz liczba osób, które pobierają taką pensję
    • Zapytanie 2: wybierające jedynie imiona i nazwiska pracowników oraz odpowiadające im nazwy stanowisk dla pracowników o stażu wyższym niż 10 lat. Należy posłużyć się relacją
    • Zapytanie 3: wybierające jedynie nazwiska i pensję dla pracowników, których staż wynosi od 10 do 20 lat
    • Zapytanie 4: Dodające do tabeli stanowiska kolumnę o nazwie minPensja dowolnego typu całkowitego

Witryna internetowa

Obraz 2. Witryna internetowa. Kursor na przycisku środkowej karty

Cechy grafiki:

  • Dla grafiki logo.png (górny lewy róg Obrazu 2) należy:
    • Ustawić przezroczyste tło
    • Skadrować, tak aby kształt wypełniał całość obrazu
    • Przeskalować z zachowaniem proporcji do dokładnej wysokości 100 px

Cechy witryny:

  • Składa się ze strony o nazwie pracownicy.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: „Nasz zespół”
  • Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
  • Podział strony na: dwa bloki banera obok siebie, poniżej blok główny, poniżej blok cytatu, na dole stopka. 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ść pierwszego banera: obraz logo.png z tekstem alternatywnym „logo firmy”
  • Zawartość drugiego banera: nagłówek pierwszego stopnia o treści „Nasz zespół”
  • Zawartość bloku głównego: trzy bloki kart pracowniczych, umieszczone obok siebie. Zawartość kart jest zgodna z Obrazem 2. Dane do kart należy skopiować do dokumentu HTML z pliku tekstyNaStrone.txt, wypakowanego z archiwum. Każdy z bloków zawiera:
    • Obraz z tekstem alternatywnym
    • Imię i nazwisko w nagłówku drugiego stopnia
    • Stanowisko w nagłówku trzeciego stopnia
    • Opis i numer telefonu w dwóch paragrafach (akapitach)
    • Odnośnik pocztowy o treści „Kontakt” do adresu e-mail danej osoby, zapisany w nagłówku piątego stopnia
  • Zawartość bloku cytatów:
    • Trzy cytaty, które należy skopiować do dokumentu HTML z pliku tekstyNaStrone.txt. Do zdefiniowania poszczególnych cytatów należy zastosować znacznik semantyczny przeznaczony dla cytatu. Treść cytatu jest zapisana w cudzysłowach, imię w paragrafie.
    • W momencie kliknięcia na cytat jest wywoływana funkcja
  • Zawartość stopki: paragraf o treści: „Stronę 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 Bookman Old Style, w przypadku braku - Serif
  • Dla obu bloków banera: kolor tła DarkCyan, biały kolor czcionki, szerokość 50%, wysokość 100 px, odstępy między literami 15 px
  • Dla bloku stopki kolor tła DarkCyan, biały kolor czcionki
  • Dla bloku karty pracowniczej: kolor tła Azure, szerokość 30%, marginesy zewnętrzne 1%, cień bloku o przesunięciu w obu osiach 4 px, rozmyciu 8 px, kolorze DimGray
  • Jedynie dla obrazów w karcie pracowniczej: szerokość 100%
  • Dla paragrafu oraz nagłówków drugiego i trzeciego stopnia: marginesy zewnętrzne 15 px
  • Dla selektora odnośnika: biały kolor czcionki
  • Dla nagłówka piątego stopnia: kolor tła Teal, szerokość 100%, wyrównanie tekstu do środka, marginesy wewnętrzne górny i dolny 10 px, pozostałe 0
  • W momencie gdy kursor myszy znajdzie się na nagłówku piątego stopnia jego kolor tła zmienia się na LightSeaGreen (patrz Obraz 2 – środkowa karta)
  • Dla bloku cytatów: wyrównanie tekstu do środka, marginesy wewnętrzne górny i dolny 30 px, pozostałe 0, czcionka pochylona
  • Drugi i trzeci cytat jest usunięty (nie jest wyświetlany)
UWAGA!
Styl CSS odnośnika należy zdefiniować wyłącznie przy pomocy selektora znacznika odnośnika. Jest to uwarunkowane projektem późniejszej rozbudowy witryny.

Skrypt

Wymagania dotyczące skryptu:

  • Napisany w języku JavaScript
  • Należy stosować znaczące nazewnictwo wszystkich zmiennych i funkcji
  • Usuwanie lub uwidacznianie cytatów odbywa się przez zmianę wartości odpowiedniej właściwości CSS
  • Działanie funkcji dla kliknięcia w pierwszy cytat:
    • Pierwszy cytat jest usuwany/ukryty
    • Drugi cytat jest uwidoczniony (blokowo)
  • Działanie funkcji dla kliknięcia w drugi cytat:
    • Drugi cytat jest usuwany/ukryty
    • Trzeci cytat jest uwidoczniony (blokowo)
  • Działanie funkcji dla kliknięcia w trzeci cytat:
    • Trzeci cytat jest usuwany/ukryty
    • Pierwszy cytat jest uwidoczniony (blokowo)

Skrypt może być zorganizowany w dowolny sposób, może być to jedna funkcja parametrowa lub trzy osobne dla każdego cytatu.

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, logo.png, osoba1.jpg, osoba2.jpg, osoba3.jpg, pracownicy.html, przeglądarka.txt, styl.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 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()

Wybrane fragmenty pomocy ze strony kodilla.com na temat właściwości CSS display

Opis: CSS display definiuje sposób wyświetlania elementu.

Składnia: display: value;

Spis wartości:

Wartość (value) Opis
inline Wyświetla element w linii (np. <span>)
block Wyświetla element w bloku (np. <p>)
inline-block Wyświetla element jako kontener liniowo-blokowy
none Element jest usunięty

Wybrane fragmenty pomocy ze strony w3schools.com na temat właściwości CSS box-shadow CSS Syntax

box-shadow: h-offset v-offset blur spread color;

Property Values:

Value Description
h–offset Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box
v–offset Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box
blur Optional. The blur radius. The higher the number, the more blurred the shadow will be
spread Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow
color Optional. The color of the shadow. The default value is the text color. Look at CSS Color Values for a complete list of possible color values.