Egzamin zawodowy - Rok 2026 Część praktyczna
	Nazwa kwalifikacji: Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych Oznaczenie kwalifikacji: INF.03     Numer zadania: 14     Wersja: SG Autor arkusza: Tomasz Puchała, toloki.pl

Zadanie egzaminacyjne

Wykonaj internetowy panel zgłoszeń serwisowych „IT‑Help”, który pozwala pracownikom działu IT przeglądać zgłoszenia klientów zapisane w bazie danych, filtrować je według statusu oraz wyróżniać zgłoszenia o wysokim priorytecie.

Panel powinien korzystać z bazy danych MySQL, skryptów w języku PHP oraz JavaScript po stronie klienta. Zadbaj o czytelny wygląd zgodny z załączonym szablonem graficznym.

1. Struktura bazy danych

Utwórz bazę danych ithelp i tabelę zgloszenia zgodnie ze skryptem z pliku ithelp.sql.

Struktura tabeli zgloszenia:

• id – int, klucz główny, auto_increment,
• klient – varchar(60), not null,
• temat – varchar(100), not null,
• opis – text, not null,
• data_zgloszenia – date, not null,
• status – enum('Nowe','W realizacji','Zamknięte'), not null,
• priorytet – enum('Niski','Średni','Wysoki'), not null.

Zaimportuj przykładowe dane z pliku ithelp.sql do tabeli zgloszenia przy użyciu phpMyAdmin.

2. Utworzenie plików witryny

1. W katalogu C:\EGZAMIN\[PESEL]\htdocs\ithelp utwórz plik index.php.
2. W tym samym katalogu utwórz plik arkusza stylów style.css oraz plik skryptu JavaScript skrypt.js.
3. W dokumencie index.php utwórz poprawną strukturę HTML5 i dołącz pliki style.css oraz skrypt.js.

3. Wygląd panelu (szablon graficzny)

Na rysunku (plik szablon_ithelp.png) przedstawiono przykładowy wygląd panelu zgłoszeń.

Przykładowy wygląd strony index.php

Strona index.php powinna odwzorowywać powyższy układ: nagłówek z nazwą panelu, lewy panel filtrów statusu i priorytetu oraz tabela zgłoszeń z kolorami wierszy zależnymi od priorytetu, a także stopka z numerem PESEL zdającego.

4. Funkcjonalności w PHP

W pliku index.php zaimplementuj następujące funkcje z wykorzystaniem biblioteki mysqli.

1. Nawiąż połączenie z bazą danych ithelp na serwerze localhost z użyciem użytkownika root bez hasła.
2. Odczytaj z tabeli zgloszenia listę wszystkich różnych statusów i wyświetl je jako opcje w polu <select> formularza (dodaj opcję „Wszystkie”).
3. Po wysłaniu formularza:
   • jeśli wybrano „Wszystkie” – pobierz i wyświetl wszystkie zgłoszenia,
   • jeśli wybrano konkretny status – pobierz i wyświetl tylko zgłoszenia o tym statusie.
4. Wyświetl dane zgłoszeń w tabeli HTML z nagłówkami: „ID”, „Klient”, „Temat”, „Status”, „Priorytet”, „Data”.
5. Pod tabelą wyświetl liczbę zgłoszeń w aktualnie wyświetlanej liście w formacie:
   „Liczba wyświetlonych zgłoszeń: X”.

5. Funkcjonalności w JavaScript

W pliku skrypt.js zaimplementuj skrypty działające po stronie klienta na już wygenerowanej tabeli zgłoszeń.

1. Po załadowaniu strony:
   • odnajdź wiersze tabeli zawierające zgłoszenia o priorytecie „Wysoki” i ustaw im czerwone tło (np. #ffdddd),
   • wierszom z priorytetem „Średni” ustaw tło żółte (np. #fff8dc),
   • wierszom z priorytetem „Niski” ustaw tło jasnozielone (np. #e6ffe6).
2. Zaimplementuj przycisk „Pokaż tylko wysoki priorytet”:
   • po kliknięciu ukryj wszystkie wiersze tabeli, których priorytet jest różny od „Wysoki”,
   • ponowne kliknięcie przywraca wyświetlanie wszystkich wierszy (przełącznik).
3. W panelu bocznym, w miejscu tekstu „Nowe zgłoszenia: 3”, dynamicznie wyświetl aktualną liczbę zgłoszeń o statusie „Nowe” (na podstawie zawartości tabeli):
   • po zmianie zawartości strony (np. po przesłaniu formularza PHP i ponownym załadowaniu tabeli) skrypt przelicza wiersze o statusie „Nowe” i aktualizuje tekst.

6. Styl CSS

W pliku style.css nadaj panelowi wygląd zbliżony do szablonu:

• ustaw maksymalną szerokość zawartości na 900–1000 px i wyśrodkuj panel na stronie,
• nagłówek panelu z ciemnoniebieskim tłem (#003366) i białym tekstem,
• lewy panel filtrów o jaśniejszym niebieskim tle i cieniu,
• tabela z cienkimi obramowaniami komórek i nagłówkami na szarym tle,
• stopka panelu z napisem „Autor: [PESEL]” wyśrodkowanym białym tekstem na ciemnoniebieskim tle.

7. Rezultaty podlegające ocenie

Załącznik 1 – plik ithelp.sql

Plik ithelp.sql zawiera skrypt tworzący bazę danych ithelp, tabelę zgloszenia oraz przykładowe dane.

CREATE DATABASE IF NOT EXISTS ithelp
  CHARACTER SET utf8
  COLLATE utf8_general_ci;

USE ithelp;

DROP TABLE IF EXISTS zgloszenia;

CREATE TABLE zgloszenia (
  id INT AUTO_INCREMENT PRIMARY KEY,
  klient VARCHAR(60) NOT NULL,
  temat VARCHAR(100) NOT NULL,
  opis TEXT NOT NULL,
  data_zgloszenia DATE NOT NULL,
  status ENUM('Nowe','W realizacji','Zamknięte') NOT NULL,
  priorytet ENUM('Niski','Średni','Wysoki') NOT NULL
) ENGINE=InnoDB
  DEFAULT CHARSET=utf8
  COLLATE utf8_general_ci;

INSERT INTO zgloszenia (klient, temat, opis, data_zgloszenia, status, priorytet) VALUES
('Firma ABC', 'Brak dostępu do VPN',
 'Pracownicy nie mogą połączyć się z siecią firmową przez VPN.',
 '2026-01-09', 'Nowe', 'Wysoki'),
('Jan Kowalski', 'Problem z drukarką',
 'Drukarka w dziale księgowości nie drukuje dokumentów.',
 '2026-01-08', 'W realizacji', 'Średni'),
('Sklep XYZ', 'Zawieszający się program magazynowy',
 'Aplikacja magazynowa zawiesza się podczas generowania raportu.',
 '2026-01-07', 'Nowe', 'Wysoki'),
('Anna Nowak', 'Reset hasła do poczty',
 'Użytkownik zapomniał hasła do konta e-mail.',
 '2026-01-06', 'Zamknięte', 'Niski'),
('Firma Delta', 'Wolne działanie sieci',
 'Użytkownicy zgłaszają bardzo wolne działanie internetu.',
 '2026-01-05', 'W realizacji', 'Średni'),
('Biuro Rondo', 'Brak dostępu do serwera plików',
 'Użytkownicy nie widzą udziału sieciowego na serwerze plików.',
 '2026-01-04', 'Nowe', 'Wysoki'),
('Marek Lis', 'Aktualizacja oprogramowania antywirusowego',
 'Prośba o instalację najnowszej wersji programu antywirusowego.',
 '2026-01-03', 'Zamknięte', 'Niski');