Pliki do pobrania poniżej:
INF.03-04-24.01-SG-pliki

 

INSTRUKCJA:

 

Twoim zadaniem na egzaminie nie jest tylko wykonanie projektu, ale także udowodnienie, że wiesz, jak i dlaczego go wykonałeś.

Celem jest stworzenie instrukcji tak jasnej, że osoba, która po raz pierwszy widzi Twój projekt, będzie w stanie zrozumieć każdą jego część i (teoretycznie) odtworzyć go od zera.

Zasady ogólne

1. Struktura to podstawa: Twój dokument (np. w Wordzie) musi być podzielony na sekcje. Używaj nagłówków (np. „Baza danych”, „Kwerendy SQL”, „Skrypty PHP”).
2. Zrzuty ekranu są OBOWIĄZKOWE: Każdy kluczowy element musi być poparty zrzutem ekranu.
3. Opisuj zrzuty: Nie wstawiaj samego obrazka. Pod każdym zrzutem ekranu napisz, co on przedstawia i dlaczego jest ważny.
4. Pisz jasno i na temat: Wyobraź sobie, że tłumaczysz to koledze. Używaj prostego języka.
5. Krok po kroku: Zachowaj logiczną kolejność, najlepiej zgodną z arkuszem egzaminacyjnym (zazwyczaj: Baza -> Kwerendy -> Strona WWW -> Skrypty).

Krok 1: Środowisko pracy i struktura plików

Zanim zaczniesz opisywać kod, pokaż swoje „miejsce pracy”.

• Co pokazać (Screeny):
  • Zrzut ekranu panelu XAMPP, który pokazuje, że usługi Apache i MySQL są uruchomione.
  • Zrzut ekranu drzewa folderów Twojego projektu (np. w Eksploratorze Plików lub edytorze kodu), aby pokazać, jak nazywają się pliki (index.php, styl.css, skrypt.js itp.) i gdzie się znajdują.
• Co opisać:
  • „Pracę rozpocząłem od uruchomienia usług Apache i MySQL w panelu XAMPP, co jest niezbędne do działania strony i bazy danych.”
  • „Wszystkie pliki projektu umieściłem w folderze egzamin w lokalizacji htdocs serwera XAMPP. Struktura plików jest następująca:…”

 

Krok 2: Baza danych

To fundament Twojego projektu. Opisz go bardzo dokładnie:

• Co pokazać (Screeny):
  • Widok struktury (projektu) każdej tabeli: To najważniejszy zrzut. Musi być na nim widać nazwy pól, ich typy danych (np. INT, VARCHAR(50), TEXT), czy są kluczami głównymi (PK) oraz czy mają np. auto_increment.
  • Import danych: Zrzut ekranu tabeli po zaimportowaniu danych z pliku .csv lub .sql.
• Co opisać:
  • „Stworzyłem bazę danych o nazwie nazwa_bazy zgodnie z arkuszem.”
  • „Baza składa się z dwóch tabel: uzytkownicy i posty.”
  • Opisując tabelę (na podstawie screena): „Tabela uzytkownicy zawiera pola: id (typ INT, klucz główny, auto-inkrementacja), login (typ VARCHAR(30)) oraz haslo (typ VARCHAR(40)). Klucz główny id jednoznacznie identyfikuje każdego użytkownika.”
  • Opisując relacje: „Pomiędzy tabelą uzytkownicy a posty ustanowiłem relację jeden-do-wielu. Pole id_uzytkownika w tabeli posty jest kluczem obcym wskazującym na pole id w tabeli uzytkownicy.”

Krok 3: Kwerendy (Zapytania SQL)

Musisz udowodnić, że potrafisz „rozmawiać” z bazą danych.

• Co pokazać (Screeny):
  • Dla każdej kwerendy osobno:
    1. Zrzut ekranu kodu SQL (z okna edytora w phpMyAdmin).
    2. Zrzut ekranu wyniku działania tej kwerendy (dane, które zwróciła).
• Co opisać:
  • Dla każdej kwerendy:

• • • „Kwerenda 1: Wybór użytkowników z miasta X„
    • Kod: (Wklej tu kod SQL jako tekst lub pokaż na screenie)

SQL

SELECT imie, nazwisko FROM uzytkownicy WHERE miasto = ‚X’;

• • • Objaśnienie kodu: „Użyłem polecenia SELECT do wybrania kolumn imie i nazwisko. Polecenie FROM wskazuje na tabelę uzytkownicy. Na końcu użyłem warunku WHERE miasto = ‚X’, aby przefiltrować wyniki tylko do tych rekordów, gdzie miasto to ‚X’.”
    • Wynik: „Poniższy zrzut ekranu pokazuje wynik działania kwerendy:” (Tu wstawiasz screen z wynikiem).
  • Powtórz ten schemat dla każdej kwerendy z arkusza! Jeśli używasz JOIN, GROUP BY lub funkcji agregujących (COUNT, AVG), koniecznie opisz, dlaczego ich użyłeś.

Krok 4: Wygląd strony (HTML i CSS)

Teraz czas na część widoczną dla użytkownika.

• Co pokazać (Screeny):
  • Zrzut ekranu gotowej, działającej strony w przeglądarce.
  • Fragmenty kodu HTML (np. podział na bloki header, nav, main, footer; kod formularza).
  • Fragmenty kodu CSS (np. definicje selektorów dla głównych bloków, style formularza, style tabeli, definicje flex lub grid, jeśli były używane).
• Co opisać:
  • „Struktura strony została zdefiniowana w pliku index.html (lub index.php).”
  • Opisując HTML: „Strona została podzielona semantycznie na bloki: baner (<header>), menu nawigacyjne (<nav>), treść główną (<main>) oraz stopkę (<footer>). W sekcji <head> podłączyłem arkusz stylów CSS o nazwie styl.css.”
  • Opisując CSS: „Plik styl.css odpowiada za wygląd strony. Poniższy fragment kodu ustawia kolor tła dla całej strony oraz czcionkę:”

CSS

body {

background-color: #EEE;

font-family: Arial, sans-serif;

}

• • Opisując kluczowe elementy: „Aby ułożyć bloki główne (menu i treść) obok siebie, użyłem display: flex dla kontenera, który je obejmuje. Baner został wyśrodkowany za pomocą text-align: center.”

Krok 5: Skrypty po stronie serwera (PHP)

To serce aplikacji. Tu musisz być najbardziej szczegółowy, ponieważ ten kod łączy wszystko w całość. Opisz go fragment po fragmencie.

• Co pokazać (Screeny):
  • Cały kod PHP (możesz go wkleić jako tekst i dodać screeny kluczowych fragmentów).
  • Screeny działania skryptu (np. strona po dodaniu rekordu przez formularz, komunikat błędu, dane pobrane z bazy wyświetlone na stronie).
• Co opisać (fragment po fragmencie):
  • Fragment 1: Połączenie z bazą danych
    • Kod:

PHP

$conn = mysqli_connect(‚localhost’, ‚root’, ”, ‚nazwa_bazy’);

• • • Objaśnienie: „Ten fragment kodu odpowiada za nawiązanie połączenia z serwerem bazy danych. Użyłem funkcji mysqli_connect, podając kolejno: adres serwera (‚localhost’), nazwę użytkownika (‚root’), puste hasło oraz nazwę bazy danych (nazwa_bazy), z którą chcę się połączyć.”
  • Fragment 2: Pobieranie i wyświetlanie danych z bazy (np. Kwerenda 1 na stronie)
    • Kod:

PHP

$query = „SELECT tytul, tresc FROM posty”;

$result = mysqli_query($conn, $query);

while ($row = mysqli_fetch_assoc($result)) {

echo „<h2>” . $row[‚tytul’] . „</h2>”;

echo „<p>” . $row[‚tresc’] . „</p>”;

}

• • • Objaśnienie: „Ta część skryptu jest odpowiedzialna za pobranie postów z bazy i wyświetlenie ich na stronie.
      1. Najpierw definiuję zapytanie SQL w zmiennej $query.
      2. Następnie wykonuję to zapytanie za pomocą mysqli_query.
      3. Używam pętli while z funkcją mysqli_fetch_assoc, aby ‚przejść’ przez wszystkie zwrócone wiersze.
      4. Wewnątrz pętli, za pomocą echo, generuję kod HTML (nagłówek <h2> i paragraf <p>), wstawiając do niego dane z odpowiednich kolumn ($row[‚tytul’]).”
  • Fragment 3: Obsługa formularza (np. dodawanie danych)
    • Kod:

PHP

if (isset($_POST[‚przycisk_dodaj’])) {

$tytul = $_POST[‚tytul_z_formularza’];

$tresc = $_POST[‚tresc_z_formularza’];

 

$query_insert = „INSERT INTO posty (tytul, tresc) VALUES (‚$tytul’, ‚$tresc’)”;

mysqli_query($conn, $query_insert);

}

• • • Objaśnienie: „Powyższy kod obsługuje formularz dodawania nowego posta.

• • • 1. Warunek if (isset($_POST[‚przycisk_dodaj’])) sprawdza, czy użytkownik kliknął przycisk ‚Dodaj’. Skrypt wykona się tylko wtedy.
      2. Następnie pobieram dane wysłane metodą POST z pól formularza (o nazwach tytul_z_formularza i tresc_z_formularza) i zapisuję je w zmiennych $tytul i $tresc.
      3. Tworzę zapytanie INSERT INTO, które wstawia te zmienne jako nowy wiersz do tabeli posty.
      4. Na końcu wykonuję to zapytanie.”
  • Fragment 4: Zamykanie połączenia
    • Kod:

PHP

mysqli_close($conn);

• • • Objaśnienie: „Na samym końcu skryptu zamykam połączenie z bazą danych za pomocą mysqli_close(). Jest to dobra praktyka, która zwalnia zasoby serwera.”

Podsumowanie

Na końcu dokumentu dodaj ostatni zrzut ekranu działającej w pełni aplikacji i napisz jedno zdanie podsumowania, np. „Aplikacja działa zgodnie z założeniami arkusza egzaminacyjnego. Wszystkie funkcjonalności (wyświetlanie danych, dodawanie rekordów, stylizowanie) zostały zaimplementowane.”