TOLOKI.PL	Egzamin zawodowy - Rok 2026 Część praktyczna
	Nazwa kwalifikacji: Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych Oznaczenie kwalifikacji: INF.03     Numer zadania: 10     Wersja: SG

Zadanie egzaminacyjne

Na podstawie załączonych plików wykonaj witrynę internetową Portalu Tenisisty, która prezentuje światowy ranking graczy oraz umożliwia sprawdzenie liczby punktów wybranego zawodnika. Zadanie obejmuje pracę z bazą danych MySQL, przygotowanie grafiki, stylów CSS oraz skryptów PHP.

Do wykonania zadania wykorzystaj środowisko XAMPP (lub równoważne), serwer Apache, bazę danych MySQL, narzędzie phpMyAdmin, edytor kodu oraz program do edycji grafiki rastrowej. Czas przeznaczony na wykonanie zadania wynosi 150 minut.

1. Operacje na bazie danych

1. Zaimportuj do serwera bazy danych MySQL bazę z pliku tenis.sql. Po zaimportowaniu pracuj w bazie danych o nazwie tenis.
2. W pliku tekstowym kwerendy.txt zapisz cztery zapytania SQL, każde w osobnej linii:
   • Zapytanie 1: Wyświetl pola pseudonim, kraj, punkty, kategoria dla graczy, którzy mają więcej niż 5000 punktów (warunek punkty > 5000), uporządkowanych malejąco według liczby punktów.
   • Zapytanie 2: Oblicz sumę punktów graczy należących do kategorii Pro i wyświetl ją jako kolumnę o nazwie sumaPro.
   • Zapytanie 3: Zaktualizuj kategorię na Weteran dla wszystkich graczy, których data debiutu jest wcześniejsza niż 2010-01-01 (format daty RRRR-MM-DD, warunek data_debiutu < '2010-01-01').
   • Zapytanie 4: Usuń z tabeli wszystkich graczy, którzy mają 0 punktów (warunek punkty = 0).

2. Grafika

• Otwórz plik rakieta.png w programie graficznym i przeskaluj go do szerokości 150 pikseli, zachowując proporcje wysokości. Po przeskalowaniu zapisz plik pod tą samą nazwą rakieta.png w folderze z witryną.
• Utwórz plik logo.png zawierający napis „TOP TENIS”:
  • kolor tekstu: zielony,
  • czcionka: Arial lub podobna bezszeryfowa,
  • tło: przezroczyste,
  • szerokość grafiki co najmniej 120 pikseli (wysokość proporcjonalna).
  Zapisz plik w formacie PNG z przezroczystym tłem, pod nazwą logo.png.

3. Struktura strony tenis.php

W folderze roboczym utwórz plik tenis.php, w którym zbudujesz stronę Portalu Tenisisty zgodnie z poniższą strukturą. Zadbaj o poprawne ustawienie nagłówka meta z kodowaniem UTF-8.

• Baner:
  • umieść grafikę logo.png oraz nagłówek pierwszego stopnia H1 o treści „Światowy Ranking Tenisa”,
  • baner powinien zajmować pełną szerokość strony.
• Blok lewy:
  • nagłówek H2 „Najlepsi gracze”,
  • pod nagłówkiem tabela z danymi zawodników pobranymi z bazy danych za pomocą skryptu 1.
• Blok prawy:
  • obraz rakieta.png z atrybutem alt="Sprzęt tenisowy",
  • nagłówek H3 „Sprawdź punkty”,
  • formularz zawierający:
    • pole tekstowe do wpisania pseudonimu gracza (nazwa pola pseudonim),
    • przycisk z napisem „SZUKAJ”.
    Formularz ma wysyłać dane metodą POST.
  • pod formularzem wyświetl wynik działania skryptu 2.
• Stopka:
  • napis „Portal opracował: [Twój numer PESEL]”,
  • numer PESEL wpisz jako ciąg 11 cyfr, bez spacji, kropek i innych znaków.

4. Styl CSS (plik styl.css)

Utwórz plik styl.css w tym samym folderze co tenis.php i podepnij go w dokumencie HTML. Zastosuj następujące wymagania dotyczące stylu:

• Baner: tło #2E7D32, tekst biały, wyśrodkowany, wysokość 100px, cień bloku: 5px 5px 10px gray.
• Blok lewy: szerokość 70% szerokości strony, tło #F1F8E9, minimalna wysokość 500px, float: left.
• Blok prawy: szerokość 30% szerokości strony, tło #C8E6C9, minimalna wysokość 500px, tekst wyśrodkowany, float: left.
• Tabela w bloku lewym: obramowanie 1px, czarne, ciągłe dla całej tabeli i komórek, szerokość 90% bloku lewego.

5. Skrypty PHP

W pliku tenis.php zaimplementuj połączenie z bazą danych oraz dwa skrypty realizujące zapytania.

• Połączenie z bazą:
  • połącz się z serwerem bazy danych localhost,
  • użyj użytkownika root bez hasła,
  • jako bazę wybierz tenis.
• Skrypt 1:
  • wykonuje zapytanie 1 zapisane w pliku kwerendy.txt (warunek punkty > 5000, sortowanie malejące po liczbie punktów),
  • wyświetla wyniki w tabeli umieszczonej w bloku lewym,
  • pierwsza kolumna tabeli to „Lp.” – kolejne numery porządkowe generowane w pętli od 1,
  • pozostałe kolumny wyświetlają: pseudonim, kraj, punkty i kategorię.
• Skrypt 2:
  • odbiera z formularza (metodą POST) pseudonim gracza z pola pseudonim,
  • wyszukuje w bazie gracza o dokładnie takim pseudonimie,
  • jeżeli gracz zostanie znaleziony, wyświetla komunikat:
    „Gracz [pseudonim] posiada [punkty] pkt”,
  • jeżeli gracz o podanym pseudonimie nie istnieje, wyświetla komunikat:
    „Brak gracza o podanym pseudonimie”.

Pobierz przykładową grafikę rakiety tenisowej i zapisz ją lokalnie jako rakieta.jpg: Rakiety tenisowe – darmowy wektor .

6. Wizualizacja wyglądu (Obraz 1)

Na rysunku poniżej przedstawiono przykładowy wygląd witryny tenis.php. Rozmieszczenie elementów oraz ich kolory powinny być zbliżone do wzoru.

Załącznik 1. Plik tenis.sql

CREATE DATABASE IF NOT EXISTS tenis;
USE tenis;
CREATE TABLE zawodnicy (
    id_zawodnika INT AUTO_INCREMENT PRIMARY KEY,
    pseudonim VARCHAR(50),
    kraj CHAR(2),
    data_debiutu DATE,
    punkty INT,
    kategoria VARCHAR(20)
);
INSERT INTO zawodnicy (pseudonim, kraj, data_debiutu, punkty, kategoria) VALUES
('IgaSzi', 'PL', '2016-10-01', 9500, 'Pro'),
('RafNad', 'ES', '2001-05-12', 4200, 'Pro'),
('NovDjo', 'RS', '2003-03-20', 8900, 'Pro'),
('RogerF', 'CH', '1998-07-07', 0, 'Weteran');