Ćwiczenia INF.03 – Schronisko dla zwierząt

Zadanie 1 – Utworzenie bazy danych

Utwórz bazę danych schronisko z zestawem znaków utf8_unicode_ci. Następnie utwórz tabelę zwierzeta z kolumnami: id, imie, gatunek, wiek, data_przyjecia.

CREATE DATABASE schronisko CHARACTER SET utf8 COLLATE utf8_unicode_ci;
USE schronisko;
CREATE TABLE zwierzeta (
    id INT PRIMARY KEY AUTO_INCREMENT,
    imie VARCHAR(50),
    gatunek VARCHAR(30),
    wiek INT,
    data_przyjecia DATE
);

Zadanie 2 – Wyświetlanie zwierząt w PHP

Stwórz stronę lista.php, która wyświetli wszystkie zwierzęta w tabeli HTML.

<?php
$pdo = new PDO('mysql:host=localhost;dbname=schronisko', 'root', '');
$query = $pdo->query("SELECT * FROM zwierzeta");
echo '<table border="1">';
echo '<tr><th>ID</th><th>Imię</th><th>Gatunek</th><th>Wiek</th><th>Data przyjęcia</th></tr>';
while($row = $query->fetch(PDO::FETCH_ASSOC)){
    echo "<tr>";
    echo "<td>{$row['id']}</td>";
    echo "<td>{$row['imie']}</td>";
    echo "<td>{$row['gatunek']}</td>";
    echo "<td>{$row['wiek']}</td>";
    echo "<td>{$row['data_przyjecia']}</td>";
    echo "</tr>";
}
echo '</table>';
?>

Zadanie 3 – Formularz dodawania zwierząt

Stwórz formularz dodaj.php, który umożliwi dodanie nowego zwierzęcia.

<?php
if($_SERVER['REQUEST_METHOD'] === 'POST'){
    $stmt = $pdo->prepare("INSERT INTO zwierzeta (imie, gatunek, wiek, data_przyjecia) VALUES (?, ?, ?, ?)");
    $stmt->execute([$_POST['imie'], $_POST['gatunek'], $_POST['wiek'], $_POST['data_przyjecia']]);
    echo "Zwierzę dodane!";
}
?>

<form method="post">
Imię: <input type="text" name="imie">
Gatunek: <input type="text" name="gatunek">
Wiek: <input type="number" name="wiek">
Data przyjęcia: <input type="date" name="data_przyjecia">
<input type="submit" value="Dodaj">
</form>

Zadanie 4 – Wyszukiwanie zwierząt

Dodaj możliwość wyszukiwania zwierząt po imieniu lub gatunku.

<form method="get">
Szukaj: <input type="text" name="q">
<input type="submit" value="Szukaj">
</form>

<?php
if(isset($_GET['q'])){
    $q = "%".$_GET['q']."%";
    $stmt = $pdo->prepare("SELECT * FROM zwierzeta WHERE imie LIKE ? OR gatunek LIKE ?");
    $stmt->execute([$q,$q]);
    while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        echo $row['imie'] . " - " . $row['gatunek'] . "<br>";
    }
}
?>

Zadanie 5 – Galeria zdjęć zwierząt

Stwórz stronę galeria.php, która wyświetla zdjęcia zwierząt w siatce 3x3. Zdjęcia pobierane z folderu img/.

<?php
$dir = 'img/';
$images = scandir($dir);
foreach($images as $img){
    if($img != '.' && $img != '..'){
        echo '<div style="display:inline-block;margin:10px;">';
        echo '<img src="'.$dir.$img.'" width="200">';
        echo '</div>';
    }
}
?>

Zadanie 6 – Procedury w MySQL

Utwórz procedurę dodaj_zwierze, która dodaje nowe zwierzę do tabeli zwierzeta z podanymi parametrami.

DELIMITER //
CREATE PROCEDURE dodaj_zwierze(
    IN p_imie VARCHAR(50),
    IN p_gatunek VARCHAR(30),
    IN p_wiek INT,
    IN p_data DATE
)
BEGIN
    INSERT INTO zwierzeta (imie, gatunek, wiek, data_przyjecia)
    VALUES (p_imie, p_gatunek, p_wiek, p_data);
END //
DELIMITER ;

Zadanie 7 – Wyzwalacze (Triggers)

Utwórz wyzwalacz aktualizacja_ostatniego_dodania, który po dodaniu zwierzęcia zaktualizuje tabelę zwierzeta_log.

DELIMITER //
CREATE TRIGGER aktualizacja_ostatniego_dodania
AFTER INSERT ON zwierzeta
FOR EACH ROW
BEGIN
    INSERT INTO zwierzeta_log (zwierze_id, data_modyfikacji)
    VALUES (NEW.id, NOW());
END //
DELIMITER ;

Zadanie 8 – Walidacja formularzy w PHP i JS

Rozbuduj formularz dodawania zwierząt tak, aby:

Sprawdzał w JS, czy pola są wypełnione.
Weryfikował w PHP poprawność danych.
Wyświetlał komunikaty o błędach bez przeładowania strony (AJAX).

// Przykład walidacji JS
<script>
function validateForm() {
    let imie = document.forms["dodajForm"]["imie"].value;
    if(imie == "") { alert("Imię wymagane"); return false; }
    return true;
}
</script>

// Przykład PHP
if($_SERVER['REQUEST_METHOD'] === 'POST'){
    if(!empty($_POST['imie']) && $_POST['wiek'] > 0){
        // dodaj zwierzę
    } else {
        echo "Błąd: wypełnij poprawnie wszystkie pola";
    }
}

Zadanie 9 – Dynamiczna filtracja galerii

Dodaj możliwość filtrowania zdjęć według gatunku:

Formularz wyboru gatunku (select box).
Wyświetlanie tylko wybranego gatunku.
Dynamiczne ładowanie wyników bez przeładowania strony (AJAX).

<select id="gatunek">
    <option value="wszystkie">Wszystkie</option>
    <option value="pies">Pies</option>
    <option value="kot">Kot</option>
</select>

<script>
document.getElementById("gatunek").onchange = function(){
    let gatunek = this.value;
    fetch("filtruj_galerie.php?gatunek=" + gatunek)
    .then(response => response.text())
    .then(data => document.getElementById("galeria").innerHTML = data);
};
</script>

Zadanie 10 – Raporty i statystyki

Stwórz stronę raport.php z dynamicznymi raportami:

Średni wiek zwierząt.
Liczba zwierząt według gatunku (wykres słupkowy).
Ostatnie 5 dodanych zwierząt.

// Pobranie danych PHP
<?php
$wiek = $pdo->query("SELECT AVG(wiek) as sredni_wiek FROM zwierzeta")->fetch()['sredni_wiek'];
$liczba = $pdo->query("SELECT gatunek, COUNT(*) as ilosc FROM zwierzeta GROUP BY gatunek")->fetchAll();
$ostatnie = $pdo->query("SELECT * FROM zwierzeta ORDER BY data_przyjecia DESC LIMIT 5")->fetchAll();
?>

// Przykład użycia Chart.js do wykresu
<canvas id="wykres"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('wykres').getContext('2d');
const chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [/* nazwy gatunków */],
        datasets: [{
            label: 'Ilość zwierząt',
            data: [/* liczby */],
            backgroundColor: 'rgba(0,255,153,0.5)'
        }]
    }
});
</script>