Skip to content
Codex13

Prosty czat lokalny

This content is not available in your language yet.

Cel projektu

Dział zatytułowany „Cel projektu”

Stworzysz Prosty czat lokalny - aplikację webową umożliwiającą wymianę wiadomości tekstowych między użytkownikami. Wiadomości są zapisywane do pliku JSON i wyświetlane w formie listy chronologicznej. Użytkownicy podają swoją nazwę (nick) przy wysyłaniu wiadomości, co pozwala na identyfikację autora każdego wpisu.

Czego się nauczysz?

  • Obsługi formularzy z wieloma polami w PHP
  • Zapisu i odczytu wiadomości z pliku JSON
  • Wyświetlania danych w formacie czatu (odwrócona chronologia)
  • Sanityzacji danych wejściowych (ochrona przed XSS)

Dlaczego to jest ważne?

Dział zatytułowany „Dlaczego to jest ważne?”

W prawdziwej pracy...

Systemy komunikacji i komentarzy to fundament większości aplikacji webowych - od prostych formularzy kontaktowych po zaawansowane platformy społecznościowe. Umiejętność bezpiecznego zapisywania i wyświetlania treści użytkowników jest kluczowa w pracy każdego programisty webowego.

Co ma robić aplikacja?

Dział zatytułowany „Co ma robić aplikacja?”

Funkcje podstawowe

Dział zatytułowany „Funkcje podstawowe”

  1. Wysyłanie wiadomości Użytkownik wpisuje swoją nazwę (nick) oraz treść wiadomości w formularzu. Po zatwierdzeniu wiadomość jest zapisywana do pliku JSON.

  2. Wyświetlanie historii Lista wszystkich wiadomości wyświetlana jest na stronie - najnowsze na górze lub na dole (zależnie od preferencji). Każda wiadomość pokazuje autora, treść i czas wysłania.

  3. Walidacja danych Aplikacja sprawdza, czy nick i treść wiadomości nie są puste, a także czy nie przekraczają maksymalnej długości.

Dane i ich struktura

Dział zatytułowany „Dane i ich struktura”

Przykładowa struktura pliku JSON:

{
  "messages": [
    {
      "id": 1,
      "user": "Jan",
      "message": "Cześć wszystkim!",
      "created_at": "2026-02-13 10:30:00"
    },
    {
      "id": 2,
      "user": "Anna",
      "message": "Hej Jan, co słychać?",
      "created_at": "2026-02-13 10:31:15"
    }
  ]
}

Warianty realizacji

Dział zatytułowany „Warianty realizacji”

Wariant podstawowy

Dział zatytułowany „Wariant podstawowy”

Wymagane funkcje:

  • Formularz z polami: nick, treść wiadomości
  • Walidacja podstawowa w PHP (niepuste pola)
  • Zapis wiadomości do pliku JSON z datą
  • Wyświetlanie listy wiadomości
  • Prosty interfejs CSS

Przykładowy scenariusz:

Jan otwiera stronę czatu, wpisuje nick “Jan” i wiadomość “Cześć!”. Po kliknięciu “Wyślij” wiadomość pojawia się na liście z datą i godziną. Strona odświeża się i pokazuje wszystkie wiadomości.

Ocena: 3.0

Wskazówki implementacyjne

Dział zatytułowany „Wskazówki implementacyjne”

Przydatne fragmenty kodu

Dział zatytułowany „Przydatne fragmenty kodu”

Sanityzacja wiadomości przed wyświetleniem:

<?php
// ZAWSZE escapuj dane użytkownika przy wyświetlaniu!
echo htmlspecialchars($message['user'], ENT_QUOTES, 'UTF-8');
echo htmlspecialchars($message['message'], ENT_QUOTES, 'UTF-8');
?>

Dodawanie wiadomości do JSON:

<?php
$file = 'messages.json';
$data = file_exists($file) ? json_decode(file_get_contents($file), true) : ['messages' => []];


$newMessage = [
    'id' => count($data['messages']) + 1,
    'user' => trim($_POST['user']),
    'message' => trim($_POST['message']),
    'created_at' => date('Y-m-d H:i:s')
];


$data['messages'][] = $newMessage;
file_put_contents($file, json_encode($data, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));
?>

Auto-odświeżanie strony (HTML):

<!-- W sekcji <head> -->
<meta http-equiv="refresh" content="10">

Najczęstsze błędy

Dział zatytułowany „Najczęstsze błędy”

Zasoby

Dział zatytułowany „Zasoby”
PHP: htmlspecialchars()
PHP: json_encode()
PHP: date()
PHP: Sessions

Do dzieła!

Dział zatytułowany „Do dzieła!”

Wykorzystaj lekcje!

Cotygodniowe spotkania podczas lekcji to idealny moment, by:

  • Pokazać postępy - nawet małe kroki się liczą
  • Wyjaśnić wątpliwości - pytaj, nie zgaduj
  • Skonsultować rozwiązania - feedback pomoże Ci się rozwijać

Pracuj iteracyjnie - lepiej mieć działający wariant A niż niedokończony C!