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

- Oznaczenie: INF.03-02-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ę będącą prototypem części front-end do chata, 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 PlikiCz202402 zabezpieczone hasłem: ChaT_Ch@t

Pobierz PlikiCz202402.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.

Obraz 1. Baza danych

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

  • Utwórz bazę danych o nazwie chat, 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 chat. 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, kw5. Zrzuty powinny obejmować cały ekran monitora z widocznym paskiem zadań.
    • Zapytanie 1: wstawiające do tabeli logowanie nick „Jeremi” z hasłem „Jer123”. Wstawianemu wierszowi należy nadać identyfikator, odpowiadający wartości klucza obcego dla wiersza z danymi „Jeremi Kowalski” z tabeli uczestnicy
    • Zapytanie 2: obliczające średni rok urodzenia uczestników. Wybrana kolumna powinna mieć nazwę (alias) „Średni rok urodzenia”, a obliczony wynik powinien być zaokrąglony w dół do liczby całkowitej
    • Zapytanie 3: wybierające jedynie imię i nazwisko uczestnika oraz odpowiadające mu nick i hasło dla imion rozpoczynających się literą J. Należy posłużyć się relacją
    • Zapytanie 4: tworzące użytkownika uczestnik na localhost z hasłem Ucz123&
    • Zapytanie 5: nadające utworzonemu użytkownikowi prawa do wybierania i aktualizacji danych jedynie dla tabeli uczestnicy

Witryna internetowa

Obraz 2. Witryna internetowa. Stan początkowy

Cechy grafiki:

  • Grafika Jolka.jpg przygotowana, podobnie jak Krzysiek.jpg. Grafikę Jolka.jpg należy wykadrować do kwadratu tak, aby była widoczna tylko cała twarz. Następnie należy przeskalować dokładnie do rozmiaru 70 px na 70 px.

Cechy witryny:

  • Składa się ze strony o nazwie chat.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: „Chat”
  • Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
  • Podział strony na baner i pod nim blok główny, obok obu bloków blok boczny oraz 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ść banera: nagłówek drugiego stopnia o treści „Chat”
  • Zawartość bloku bocznego:
    • Nagłówek trzeciego stopnia o treści „Chaty”
    • Lista punktowana z elementami: „Ogólny” , „Tematyczne”. Drugi element zagnieżdża listę numerowaną z elementami „Turystyczny”, „Żeglarski”, „Filatelistyczny”, „Hodowla zwierzątek domowych”
    • Nagłówek trzeciego stopnia o treści „Uczestnicy”
    • Paragraf (akapit) o treści „Jolanta Nowak”
    • Obraz Jolka.jpg z tekstem alternatywnym "Jolanta Nowak"
    • Paragraf o treści „Krzysztof Łukasiński”
    • Obraz Krzysiek.jpg z tekstem alternatywnym "Krzysztof Łukasiński"
  • Zawartość bloku głównego:
    • Blok chatu zawierający:
      • Jeden blok z wypowiedzią Jolanty: Obraz Jolka.jpg i paragraf: „Cześć idziesz jutro do kina?”
      • Jeden blok z wypowiedzią Krzysztofa: Obraz Krzysiek.jpg i paragraf: „Tak! A ty?”
    • Obok siebie: napis „Wpisz wiadomość:”, pole edycyjne, przycisk o treści „Wyślij”. Kliknięcie przycisku powoduje wywołanie funkcji skryptu
    • Poniżej: przycisk o treści: „Generuj losową odpowiedź”. Kliknięcie przycisku powoduje wywołanie funkcji skryptu
  • Zawartość stopki: nagłówek piątego stopnia o treści: „Chat 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 Garamond
  • Dla banera: kolor tła Tomato, biały kolor czcionki, wyrównanie tekstu do środka, szerokość 80%, wysokość 80 px
  • Dla bloku głównego: szerokość 80%, wysokość 600 px
  • Dla bloku bocznego: kolor tła Coral, szerokość 20%, wysokość 680 px
  • Dla stopki: kolor tła Tomato, biały kolor czcionki, wyrównanie tekstu do środka
  • Dla selektora obrazu: zaokrąglenie rogów 50%, marginesy wewnętrzne lewy i prawy 10 px
  • Dla bloku chatu: obramowanie linią ciągłą o szerokości 1 px i kolorze Tomato, marginesy zewnętrzne 15 px, wysokość 470 px, paski przewijania zawsze widoczne na stronie
  • Wspólne dla bloków z wypowiedziami: zaokrąglenie rogów 5 px, szerokość 90%, wysokość 70 px, marginesy zewnętrzne 2%, marginesy wewnętrzne 3 px
  • Dodatkowo dla bloków z wypowiedziami Jolanty: kolor tła #EEE, obraz opływany tekstem z prawej strony (obraz po lewej stronie)
  • Dodatkowo dla bloków z wypowiedziami Krzysztofa: kolor tła #CCC, wyrównanie tekstu do prawej strony, obraz opływany tekstem z lewej strony (obraz po prawej stronie)
  • Dla obu przycisków: kolor tła Tomato, obramowanie linią ciągłą o szerokości 1 px i kolorze DarkRed, marginesy wewnętrzne 5 px, czcionka pogrubiona
  • Dla pola edycyjnego tekstowego: szerokość 500 px
UWAGA!
Styl CSS obrazu należy zdefiniować wyłącznie przy pomocy selektora znacznika obrazu. 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
  • Działanie funkcji wywoływanej po kliknięciu przycisku Wyślij:
    • Pobierany jest tekst z pola edycyjnego i umieszczany w oknie chatu jako ostatni
    • Tekst jest formatowany jako wypowiedź Jolanty, zgodnie z Obrazem 3, czyli utworzony jest blok z wypowiedzią zawierający obraz Jolka.jpg i paragraf zgodny z tekstem wpisanym do pola edycyjnego
    • Jeśli blok chatu jest cały wypełniony, powinien być przewinięty do nowo wstawionej wypowiedzi

Obraz 3. Działanie funkcji wywoływanej kliknięciem przycisku Wyślij

  • Działanie funkcji wywoływanej po kliknięciu przycisku „Generuj losową odpowiedź”
    • Losowana jest wypowiedź Krzysztofa z wcześniej zadeklarowanej tablicy. Tablica zawiera 9 elementów, którymi są wypowiedzi. Należy je skopiować z pliku pomocniczego tekstyDoChatu.txt rozpakowanego z archiwum
    • Losowana liczba z przedziału od 0 do 8 jest indeksem tablicy
    • Wypowiedź jest umieszczana w oknie chatu jako ostatnia
    • Tekst jest formatowany jako wypowiedź Krzysztofa, zgodnie z Obrazem 4, czyli utworzony jest blok z wypowiedzią zawierający obraz Krzysiek.jpg i paragraf zgodny z wylosowanym tekstem
    • Jeśli blok chatu jest cały wypełniony, powinien być przewinięty do nowo wstawionej wypowiedzi

Obraz 4. Działanie funkcji wywoływanej kliknięciem przycisku Generuj...

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: chat.html, import.png, Jolka.jpg, Krzysiek.jpg, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, kw5.jpg kwerendy.txt, 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()

Tabela 2. Tworzenie nowych elementów DOM i wstawianie ich do bloków

UWAGA!
W miejscu element należy wstawić obiekt konkretnego elementu, zwróconego takimi funkcjami jak getElementById, createElement...
Kod Opis
document.createElement("h2"); Tworzy element DOM <h2> i zwraca go. Jako parametr należy podać nazwę elementu, np. ul, p, table ...
element. classList.add("klasa1"); Przypisuje do danego elementu klasę stylu CSS
element.nazwa-atrybutu = ... Ustawia wartości atrybutów dla danego elementu
element.innerText = .... Ustawia tekst dla elementów takich jak paragraf, nagłówek, przycisk itp.
element1.appendChild(element2); Zagnieżdża element2 w elemencie1. Elementem1 może być cały dokument, blok, lista lub inny element agregujący. Wewnątrz niego zostaje umieszczony element2
element.scrollIntoView(); Przewija zawartość bloku / strony do wskazanego elementu

Tabela 3. Wybrane funkcje numeryczne MySQL

CEIL(number)  The CEIL() function returns the smallest integer value that is bigger than or equal to a number.
FLOOR(number) The FLOOR() function returns the largest integer value that is smaller than or equal to a number.
ROUND(number, decimals) The ROUND() function rounds a number to a specified number of decimal places.
TRUNCATE(number, decimals) The TRUNCATE() function truncates a number to the specified number of decimal places.