Zadanie bazy - rejestracja graczy

Temat: Rejestracja uczestników na turniej e-sportowy

Zadaniem jest stworzenie bazy danych oraz strony internetowej, która pozwoli graczom zapisać się do bazy za pomocą formularza.

Zadanie 1: Operacje na bazie danych (SQL)

Uruchom narzędzie phpMyAdmin i wykonaj poniższe czynności:

Utwórz bazę danych o nazwie turniej.
W bazie utwórz tabelę zawodnicy o następującej strukturze:
- id: typ INT, klucz podstawowy, Auto Increment.
- nick: typ VARCHAR(30).
- gra: typ VARCHAR(50).
- wiek: typ INT.

Zadanie 2: Witryna internetowa (HTML + PHP)

Stwórz plik index.php. Witryna musi spełniać następujące wymagania:

A. Formularz HTML:

Metoda wysyłania danych: POST.
Pole tekstowe dla nicku gracza.
Pole typu select (rozwijana lista) z grami: „League of Legends”, „Counter-Strike 2”, „Valorant”.
Pole numeryczne dla wieku.
Przycisk typu submit o nazwie (name) wyslij.

B. Skrypt PHP (pod formularzem):

Nawiąże połączenie z bazą turniej na serwerze localhost (użytkownik root, brak hasła).
Pobierze dane z formularza po kliknięciu przycisku.
Zbuduje zapytanie SQL typu INSERT, które wstawi dane do tabeli zawodnicy.
Wykona zapytanie do bazy.
Wyświetli komunikat: „Gracz [nick] został dodany do bazy!” lub błąd połączenia.
Zamknie połączenie z serwerem.

Zadanie 3: Stylizacja witryny (CSS)

Twoim celem jest sprawienie, by formularz nie wyglądał jak surowy dokument tekstowy, ale jak profesjonalny panel gracza. Stwórz plik styl.css i podepnij go do index.php w sekcji <head>.

Wytyczne do wykonania:

Tło i Czcionka:
- Ustaw kolor tła całej strony na ciemnoszary (np. #2c3e50).
- Zmień czcionkę na bezszeryfową (np. Arial lub Verdana).
- Kolor tekstu ustaw na biały lub jasnoszary, aby był czytelny na ciemnym tle.
Centrowanie i Kontener:
- Umieść formularz wewnątrz bloku <div> (nadaj mu klasę np. .kontener).
- Ustaw szerokość kontenera na 400px i wyśrodkuj go na stronie (użyj margin: auto).
- Dodaj obramowanie (border) o szerokości 2px, ciągłe, w kolorze błękitnym (np. #3498db).
- Dodaj wewnętrzny odstęp (padding) o wielkości 20px.
Stylizacja Formularza:
- Ustaw, aby wszystkie pola <input> oraz <select> wyświetlały się w nowych liniach (użyj display: block) i miały szerokość 100%.
- Dodaj margines dolny pod każdym polem, aby elementy nie „kleiły się” do siebie.
Przycisk Wysyłania:
- Zmień kolor tła przycisku na zielony (np. #27ae60).
- Usuń domyślne obramowanie przycisku.
- Dodaj efekt hover – niech przycisk zmienia kolor na ciemniejszy zielony po najechaniu myszką.

Przykład rozwiązania (bez CSS):

<!DOCTYPE html>
<html lang=”pl”>
<head>
<meta charset=”UTF-8″>
<title>Zapisy na turniej</title>
</head>
<body>
<h1>Zgłoś się do gry!</h1>
<form method=”POST” action=”index.php”>
Nick: <input type=”text” name=”nick_gracza” required><br>
Gra: <select name=”wybrana_gra”>
<option value=”LoL”>League of Legends</option>
<option value=”CS2″>Counter-Strike 2</option>
<option value=”Valorant”>Valorant</option>
</select><br>
Wiek: <input type=”number” name=”wiek_gracza”><br>
<input type=”submit” name=”wyslij” value=”Dodaj zawodnika”>
</form>

<?php
if (isset($_POST[’wyslij’])) {
// 1. Połączenie
$conn = mysqli_connect(„localhost”, „root”, „”, „turniej”);

// 2. Pobranie danych
$nick = $_POST[’nick_gracza’];
$gra = $_POST[’wybrana_gra’];
$wiek = $_POST[’wiek_gracza’];

// 3. Zapytanie (ID pomijamy, bo jest Auto Increment)
$sql = „INSERT INTO zawodnicy (nick, gra, wiek) VALUES (’$nick’, '$gra’, $wiek)”;

// 4. Wykonanie i komunikat
if (mysqli_query($conn, $sql)) {
echo „<h3>Gracz $nick został dodany do bazy!</h3>”;
} else {
echo „Błąd zapisu: ” . mysqli_error($conn);
}

// 5. Zamknięcie
mysqli_close($conn);
}
?>
</body>
</html>

Kontakt: mgzsp22@gmail.com