Skip to content

Prosty system komentarzy

This content is not available in your language yet.

Stworzysz Prosty system komentarzy - aplikacje umozliwiajaca uzytkownikom dodawanie komentarzy pod artykułem lub postem. System pozwala na wyswietlanie komentarzy, ich moderacje oraz zabezpieczenie przed atakami XSS. Wszystkie komentarze sa zapisywane do pliku JSON.

Czego się nauczysz?

  • Obsługi formularzy HTML i walidacji danych w PHP
  • Zabezpieczania aplikacji przed XSS (htmlspecialchars)
  • Implementacji prostego systemu moderacji
  • Zapisu i odczytu danych z plikow JSON

W prawdziwej pracy...

Systemy komentarzy sa obecne na praktycznie każdej stronie internetowej - od blogow, przez sklepy, po portale informacyjne. Umiejetnosc tworzenia bezpiecznych systemow przyjmujacych dane od użytkowników to absolutna podstawa pracy web developera. Zabezpieczenia przed XSS to jeden z pierwszych tematow na rozmowie kwalifikacyjnej.

  1. Formularz dodawania komentarza Użytkownik podaje swoje imie (lub nick) oraz tresc komentarza. Opcjonalnie może podac adres e-mail.

  2. Lista komentarzy System wyświetla wszystkie zatwierdzone komentarze w czytelnej formie, od najnowszych.

  3. Zabezpieczenie przed XSS Wszystkie dane wprowadzone przez użytkownika sa escapowane przed wyswietleniem.

Przykładowa struktura pliku JSON:

{
"comments": [
{
"id": 1,
"author": "Jan Kowalski",
"email": "jan@example.com",
"content": "Swietny artykuł! Bardzo pomocny.",
"status": "approved",
"created_at": "2026-02-17 10:30:00"
},
{
"id": 2,
"author": "Anna Nowak",
"email": "",
"content": "Czy można prosic o więcej przykładów?",
"status": "pending",
"created_at": "2026-02-17 11:45:00"
}
]
}

Wymagane funkcje:

  • Formularz z polami: autor, tresc komentarza
  • Walidacja danych w PHP (niepuste pola, minimalna długość)
  • Wyswietlanie listy komentarzy
  • Zabezpieczenie XSS (htmlspecialchars)
  • Zapis komentarzy do pliku JSON
  • Prosty interfejs CSS

Przykładowy scenariusz:

Użytkownik wchodzi na strone z artykułem. Pod artykułem widzi formularz komentarza i liste poprzednich komentarzy. Wpisuje swoje imie i tresc, klika “Dodaj”. Komentarz pojawia się na liscie.

Ocena: 3.0

Zabezpieczenie przed XSS (OBOWIAZKOWE!):

// Przy wyswietlaniu - ZAWSZE escapuj dane od użytkownika!
echo htmlspecialchars($comment['author'], ENT_QUOTES, 'UTF-8');
echo htmlspecialchars($comment['content'], ENT_QUOTES, 'UTF-8');
// Możesz też utworzyć funkcje pomocnicza:
function safe($string) {
return htmlspecialchars($string, ENT_QUOTES, 'UTF-8');
}

Walidacja komentarza:

$errors = [];
$author = trim($_POST['author'] ?? '');
$content = trim($_POST['content'] ?? '');
if (empty($author)) {
$errors[] = "Podaj swoje imie lub nick";
}
if (strlen($author) < 2) {
$errors[] = "Imie musi mieć minimum 2 znaki";
}
if (empty($content)) {
$errors[] = "Tresc komentarza nie może być pusta";
}
if (strlen($content) < 10) {
$errors[] = "Komentarz musi mieć minimum 10 znakow";
}

Walidacja e-mail (opcjonalne pole):

$email = trim($_POST['email'] ?? '');
if (!empty($email) && !filter_var($email, FILTER_VALIDATE_EMAIL)) {
$errors[] = "Podaj poprawny adres e-mail";
}

Zapis do JSON z moderacja:

$data = json_decode(file_get_contents('comments.json'), true) ?? ['comments' => []];
$data['comments'][] = [
'id' => count($data['comments']) + 1,
'author' => $author,
'email' => $email,
'content' => $content,
'status' => 'pending', // Oczekuje na moderacje
'created_at' => date('Y-m-d H:i:s')
];
file_put_contents('comments.json', json_encode($data, JSON_PRETTY_PRINT));

Zmiana statusu komentarza:

function updateCommentStatus($id, $newStatus) {
$data = json_decode(file_get_contents('comments.json'), true);
foreach ($data['comments'] as &$comment) {
if ($comment['id'] === $id) {
$comment['status'] = $newStatus;
break;
}
}
file_put_contents('comments.json', json_encode($data, JSON_PRETTY_PRINT));
}

Wykorzystaj lekcje!

Cotygodniowe spotkania podczas lekcji to idealny moment, by:

  • Pokazac postepy - nawet małe kroki się licza
  • Wyjaśnić watpliwosci - pytaj, nie zgaduj
  • Skonsultowac rozwiązania - feedback pomoze Ci się rozwijac

Pracuj iteracyjnie - lepiej mieć działający wariant A niz niedokonczony C!