INF.03 – czerwiec 2025, zadanie 1 (część praktyczna)

Krok 1. Baza i import. W phpMyAdmin zakładasz nową bazę gry i wybierasz porównywanie napisów utf8_unicode_ci – dopiero wtedy polskie znaki z pliku baza.sql wczytają się poprawnie. Import robisz w zakładce Import: wskazujesz baza.sql z rozpakowanego archiwum i zatwierdzasz. Po imporcie na liście po lewej stronie musi być widoczna tabela gry z danymi – i to właśnie ma być widać na niekadrowanym zrzucie import.png z paskiem zadań.

Krok 2. Zapytanie 1. Wybierasz trzy kolumny wymienione w treści i nic więcej – żadnej gwiazdki, żadnego opis.

Krok 3. Zapytanie 2. „Pierwsze 100 znaków opisu" to zadanie dla funkcji LEFT z tabeli 2. Warunek WHERE id = 1 ogranicza wynik do jednego wiersza.

Krok 4. Zapytanie 3. „Pięć pierwszych wierszy o najwyższej punktacji" to sortowanie malejąco po punkty i ograniczenie LIMIT 5. Bez ORDER BY samo LIMIT 5 da pięć przypadkowych wierszy.

Krok 5. Zapytanie 4. Dane przepisujesz z pliku rekord.txt. Kolumny id nie wymieniasz w ogóle – klucz główny ma być nadany automatycznie. Cenę i punkty wpisujesz jako liczby, bez „zł".

Za co są punkty:

• import tabel do bazy gry udokumentowany zrzutem import.png
• plik kwerendy.txt zawierający co najmniej jedno zapytanie wynikające z treści zadania
• zapytanie 1 z dokładnie trzema wskazanymi kolumnami i zrzut, na którym widać co najmniej osiem rekordów
• zapytanie 2 z funkcją skracającą opis do stu znaków i zrzut z dokładnie jednym rekordem
• zapytanie 3 zwracające dokładnie pięć rekordów posortowanych malejąco po punktach
• zapytanie 4 wstawiające wiersz z danymi z pliku, z kluczem głównym nadanym automatycznie, potwierdzone zrzutem
• zrzuty obejmujące cały ekran z paskiem zadań – kadrowane nie są oceniane

-- Krok 1: baza z polskim zestawem znaków
CREATE DATABASE gry DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;
USE gry;
-- Import pliku baza.sql wykonujesz w phpMyAdmin (zakładka Import)
-- Zapytanie 1
SELECT id, nazwa, zdjecie FROM gry;
-- Zapytanie 2
SELECT nazwa, LEFT(opis, 100), punkty, cena FROM gry WHERE id = 1;
-- Zapytanie 3
SELECT nazwa, punkty FROM gry ORDER BY punkty DESC LIMIT 5;
-- Zapytanie 4 (dane z pliku rekord.txt, bez kolumny id)
INSERT INTO gry (nazwa, opis, punkty, cena, zdjecie)
VALUES ('Zamczysko', 'Na odludziu stoi opuszczone zamczysko, w którym znajduje się skarb strzeżony przez złowrogie demony i duchy', 200, 50, 'zamczysko.jpg');

Krok 1. Grafika. zamczysko.jpg skalujesz w edytorze grafiki rastrowej do szerokości 550 px z zachowaniem proporcji – wysokość wychodzi wtedy 309 px. Plik zapisujesz pod tą samą nazwą, w folderze z numerem zdającego.

Krok 2. Szkielet dokumentu. Deklaracja DOCTYPE dla HTML5, atrybut lang="pl" w znaczniku html, znacznik meta z atrybutem charset ustawionym na utf-8 w sekcji head, tytuł „Gry komputerowe" i odwołanie do styl.css. To cztery osobne, osobno punktowane rzeczy – żadnej nie warto pominąć, bo każda to jedna linijka.

Krok 3. Podział na bloki. Układ z ilustracji 3 składasz z semantycznych znaczników: header, trzy znaczniki section (lewa, środkowa, prawa) i footer. Klasy albo identyfikatory potrzebne będą w rezultacie 4, więc od razu nadaj sekcjom nazwy.

Krok 4. Zawartość sekcji. W lewej: h3, pusta lista ul wypełniana przez skrypt 1, h3, odnośnik do http://sklep.gry.pl, h3 i akapit z numerem zdającego. W środkowej – tylko wynik skryptu 2. W prawej – h3 i formularz z czterema polami z etykietami oraz przyciskiem DODAJ. W stopce – formularz z jednym polem i przyciskiem „Pokaż opis" oraz wynik skryptu 3.

Krok 5. Metoda bezpieczna. „Metoda bezpieczna" w obu formularzach to method="post" – dane nie trafiają wtedy do adresu strony. Brak atrybutu action jest w porządku, bo formularz ma wysyłać dane do tego samego pliku.

Za co są punkty:

• przeskalowany zamczysko.jpg o szerokości 550 px i wysokości 309 px (z tolerancją kilku pikseli)
• deklaracja HTML5, język polski zawartości i jawnie podane kodowanie polskich znaków
• tytuł strony „Gry komputerowe"
• podział na bloki zrobiony semantycznymi znacznikami: nagłówek, trzy sekcje i stopka
• nagłówek pierwszego stopnia w bloku nagłówkowym, nagłówki trzeciego stopnia w sekcjach bocznych i przynajmniej jeden akapit
• lista punktowana w sekcji lewej zbudowana ze znaczników listy
• formularz w sekcji prawej z czterema polami, przyciskiem DODAJ i przynajmniej jedną etykietą
• formularz w stopce z jednym polem i przyciskiem „Pokaż opis"
• liczba punktów na liście zamknięta w osobnym znaczniku, np. w znaczniku span
• w sekcji środkowej przynajmniej jeden obraz z tekstem alternatywnym i atrybutem title

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Gry komputerowe</title>
  <link rel="stylesheet" href="styl.css">
</head>
<body>
  <header><h1>Ranking gier komputerowych</h1></header>
  <section id="lewa">
    <h3>Top 5 gier w tym miesiącu</h3>
    <ul><!-- wypełnia skrypt 1 --></ul>
    <h3>Nasz sklep</h3>
    <a href="http://sklep.gry.pl">Tu kupisz gry</a>
    <h3>Stronę wykonał</h3>
    <p>00000000000</p>
  </section>
  <section id="srodkowa"><!-- wypełnia skrypt 2 --></section>
  <section id="prawa">
    <h3>Dodaj nową grę</h3>
    <form method="post">
      <label for="nazwa">nazwa</label><input type="text" name="nazwa" id="nazwa">
      <label for="opis">opis</label><input type="text" name="opis" id="opis">
      <label for="cena">cena</label><input type="text" name="cena" id="cena">
      <label for="zdjecie">zdjęcie</label><input type="text" name="zdjecie" id="zdjecie">
      <input type="submit" value="DODAJ">
    </form>
  </section>
  <footer>
    <form method="post">
      <input type="text" name="id">
      <input type="submit" value="Pokaż opis">
    </form>
    <!-- wypełnia skrypt 3 -->
  </footer>
</body>
</html>

Krok 1. Uruchom XAMPP, nie klikaj pliku. Strona gry.php musi działać przez serwer (moduły Apache i MySQL uruchomione, plik w katalogu htdocs). Otwarta z pulpitu podwójnym kliknięciem pokaże surowy kod PHP i wszystkie rezultaty zależne od skryptów przepadną.

Krok 2. Układ trzech kolumn. Trzy sekcje obok siebie ustawiasz w arkuszu stylów – najprościej display: flex na wspólnym rodzicu albo float: left na sekcjach i clear: both na stopce. Oceniany jest efekt na ekranie szerszym niż 800 px; pusty środkowy blok nie jest błędem.

Krok 3. Połączenie z arkuszem stylów. Sprawdź w przeglądarce, czy tło faktycznie zrobiło się fioletowe. Jeżeli nie – zwykle literówka w nazwie pliku albo styl.css leży w innym folderze niż gry.php. Całe formatowanie ma pochodzić z tego jednego pliku, więc nie zostawiaj stylów w atrybucie style ani w sekcji head.

Krok 4. Odnośnik i formularze. Kliknij „Tu kupisz gry" – ma otworzyć się http://sklep.gry.pl (adres nie musi istnieć, liczy się przejście). Wpisz coś w pole w stopce i kliknij przycisk: strona ma się przeładować, a adres nie może pokazać wpisanej wartości – to dowód, że formularz wysyła dane metodą POST.

Za co są punkty:

• układ bloków w przeglądarce zgodny z ilustracją 3 dla ekranu szerszego niż 800 px, uzyskany poprawnymi właściwościami CSS
• działające połączenie z zewnętrznym arkuszem styl.css, z którego pochodzi całe formatowanie
• odnośnik „Tu kupisz gry" otwierający adres sklepu
• przynajmniej jeden formularz wysyłający dane do tego samego pliku metodą POST
• przycisk przynajmniej jednego formularza faktycznie wysyłający dane do skryptu

Krok 1. Selektor uniwersalny. Krój Garamond i biały kolor czcionki ustawiasz dla wszystkich selektorów, czyli przez *. Kolor przycisku bywa nieodziedziczony – arkusz sam zastrzega, że to nie jest błąd.

Krok 2. Tła i wysokości. Cztery bloki dostają tło Indigo (nagłówek, sekcja lewa, sekcja prawa, stopka), sekcja środkowa czarne. Wysokości: trzy sekcje po 600 px, stopka 150 px. To dwa osobne kryteria, więc warto je wpisać od razu razem.

Krok 3. Układ zależny od szerokości ekranu. Szerokości 20% / 60% / 20% i wyświetlanie obok siebie obowiązują powyżej 800 px, a poniżej sekcje mają stać jedna pod drugą. Najprościej: domyślnie zapisać układ „obok siebie", a w zapytaniu @media all and (max-width: 800px) zmienić szerokość na 100% i wyłączyć opływanie.

Krok 4. Punkty przy nazwie gry. Styl z ilustracji 4 (tło Tomato, border-radius: 50%, padding: 5px) nadajesz klasą – nie identyfikatorem, bo takich oznaczeń jest na stronie pięć, a identyfikator musi być unikalny. Ten sam powód dotyczy bloków gier w sekcji środkowej.

Krok 5. Paski przewijania. „Zawsze widoczne paski przewijania" to overflow: scroll, a nie auto – auto pokaże pasek dopiero wtedy, gdy treść się nie mieści.

Za co są punkty:

• domyślne formatowanie wszystkich selektorów: krój Garamond i biały kolor czcionki
• tło Indigo dla nagłówka, sekcji lewej, prawej i stopki oraz czarne tło dla sekcji środkowej
• kolor czcionki Indigo dla pola edycyjnego
• wysokość 600 px dla trzech sekcji i 150 px dla stopki
• układ trzech sekcji zależny od szerokości ekranu: obok siebie w proporcjach 20/60/20 powyżej 800 px, jedna pod drugą poniżej
• wyrównanie tekstu do środka w bloku nagłówkowym
• marginesy wewnętrzne 2 px w nagłówku i 5 px w elemencie listy oraz zewnętrzne 10 px przy polu edycyjnym
• zawsze widoczne paski przewijania w sekcji środkowej
• styl oznaczenia punktów nadany klasą, a nie identyfikatorem: tło Tomato, zaokrąglenie 50%, marginesy wewnętrzne 5 px
• styl bloku gry: bloki obok siebie, tekst wyśrodkowany, marginesy wewnętrzne 3 px, również bez identyfikatora

* { font-family: Garamond; color: white; }
header { background-color: Indigo; text-align: center; padding: 2px; }
#lewa, #prawa { background-color: Indigo; height: 600px; }
#srodkowa { background-color: black; height: 600px; overflow: scroll; }
footer { background-color: Indigo; height: 150px; }
#lewa, #srodkowa, #prawa { float: left; }
#lewa, #prawa { width: 20%; }
#srodkowa { width: 60%; }
footer { clear: both; }
li { padding: 5px; }
.punkty { background-color: Tomato; border-radius: 50%; padding: 5px; }
.gra { display: inline-block; text-align: center; padding: 3px; }
input { margin: 10px; color: Indigo; }
@media all and (max-width: 800px) {
  #lewa, #srodkowa, #prawa { float: none; width: 100%; }
}

Krok 1. Jedno połączenie na całą stronę. mysqli_connect wywołujesz raz, na początku pliku gry.php: serwer localhost, użytkownik root, puste hasło, baza gry. Wynik zapamiętujesz w zmiennej o czytelnej nazwie – nazewnictwo zmiennych jest osobno punktowane.

Krok 2. Skrypt 1 w sekcji lewej. Wysyłasz zapytanie 3 (pięć gier o najwyższej punktacji) i w pętli wypisujesz elementy listy. Liczbę punktów zamykasz w znaczniku span z klasą ze stylu z ilustracji 4 – ten sam element odpowiada za punkt w rezultacie 2 i w rezultacie 4.

Krok 3. Skrypt 2 w sekcji środkowej. Zapytanie 1 zwraca id, nazwa i zdjecie. Dla każdego wiersza wypisujesz blok z obrazem: źródłem jest nazwa pliku z pola zdjecie, tekstem alternatywnym pole nazwa, a atrybutem title – pole id. To właśnie title daje dymek widoczny na ilustracji 2. Pod obrazem akapit z nazwą.

Krok 4. Skrypt 3 w stopce. Działa tylko wtedy, gdy pole formularza zostało wypełnione – stąd sprawdzenie isset i niepusta wartość. Zapytanie 2 modyfikujesz tak, że zamiast id = 1 wstawiasz wartość z formularza. Zwrócony wiersz wypisujesz w nagłówku drugiego stopnia według wzoru z treści, a opis w akapicie. Pamiętaj, że opis jest skracany funkcją LEFT do stu znaków – tak jak w zapytaniu 2.

Krok 5. Skrypt 4 w sekcji prawej. Też uruchamia się warunkowo: tylko gdy wypełnione zostało pole nazwa. Wstawia wiersz z danymi z formularza, a liczbę punktów ustawia na 0. Kolumny id nie podajesz – klucz główny nadaje się sam.

Krok 6. Zamknięcie połączenia. mysqli_close musi być ostatnią operacją na bazie, czyli na końcu pliku, po wszystkich czterech skryptach – a nie po każdym z osobna.

Za co są punkty:

• działające połączenie z serwerem bazy danych i wybór bazy gry
• zamknięcie połączenia jako ostatnia operacja na bazie
• wysłanie do bazy przynajmniej jednego z zapytań wymaganych w skryptach 1–3
• warunek w przynajmniej jednym skrypcie formularza: działanie tylko przy wypełnionym polu
• pobranie danych z tablicy globalnej odpowiadającej metodzie formularza
• skrypt 1 wypisujący nazwę i punkty jako elementy listy
• skrypt 2 wypisujący obrazy wraz z ich nazwami
• skrypt 3 wypisujący nazwę, punkty i cenę według wzoru oraz opis
• skrypt 4 wstawiający do bazy rekord z danymi z formularza i zerową liczbą punktów
• znaczące nazwy zmiennych w języku polskim lub angielskim

<?php
$polaczenie = mysqli_connect("localhost", "root", "", "gry");
if (!$polaczenie) { die("Nie udało się połączyć z bazą danych"); }
// Skrypt 1 – sekcja lewa (zapytanie 3)
$top5 = mysqli_query($polaczenie, "SELECT nazwa, punkty FROM gry ORDER BY punkty DESC LIMIT 5");
while ($wiersz = mysqli_fetch_array($top5)) {
  echo "<li>" . $wiersz['nazwa'] . " <span class='punkty'>" . $wiersz['punkty'] . "</span></li>";
}
// Skrypt 2 – sekcja środkowa (zapytanie 1)
$gry = mysqli_query($polaczenie, "SELECT id, nazwa, zdjecie FROM gry");
while ($wiersz = mysqli_fetch_array($gry)) {
  echo "<div class='gra'>";
  echo "<img src='" . $wiersz['zdjecie'] . "' alt='" . $wiersz['nazwa'] . "' title='" . $wiersz['id'] . "'>";
  echo "<p>" . $wiersz['nazwa'] . "</p>";
  echo "</div>";
}
// Skrypt 3 – stopka (zapytanie 2 z id z formularza)
if (isset($_POST['id']) && $_POST['id'] != "") {
  $szukane = $_POST['id'];
  $opis = mysqli_query($polaczenie, "SELECT nazwa, LEFT(opis, 100), punkty, cena FROM gry WHERE id = " . $szukane);
  $wiersz = mysqli_fetch_row($opis);
  echo "<h2>" . $wiersz[0] . ", " . $wiersz[2] . " punktów, " . $wiersz[3] . " zł</h2>";
  echo "<p>" . $wiersz[1] . "</p>";
}
// Skrypt 4 – sekcja prawa (zapytanie 4 z danymi z formularza)
if (isset($_POST['nazwa']) && $_POST['nazwa'] != "") {
  $nazwa = $_POST['nazwa'];
  $tresc = $_POST['opis'];
  $cena = $_POST['cena'];
  $zdjecie = $_POST['zdjecie'];
  mysqli_query($polaczenie, "INSERT INTO gry (nazwa, opis, punkty, cena, zdjecie) VALUES ('$nazwa', '$tresc', 0, '$cena', '$zdjecie')");
}
mysqli_close($polaczenie);
?>