Czego się nauczycie?
- Projektowania systemów zarządzania treścią
- Pracy z kategoriami i tagami
- Tworzenia interfejsu dla redaktorów
- Bezpiecznego wyświetlania treści użytkowników (XSS)
- Praca zespołowa - podział zadań, współpraca, integracja kodu
Stworzycie Mini CMS plikowy - prosty system zarządzania treścią, który pozwala tworzyć, edytować i przeglądać artykuły lub strony. W przeciwieństwie do WordPress czy Joomla, wasz CMS nie używa bazy danych - wszystkie dane są zapisywane do plików JSON. To świetny sposób na zrozumienie podstaw działania systemów CMS.
Czego się nauczycie?
W prawdziwej firmie...
Systemy CMS to podstawa większości stron internetowych. WordPress obsługuje ponad 40% wszystkich stron w internecie! Zrozumienie jak działa CMS “od środka” jest niezbędne dla każdego web developera - nawet jeśli później będziecie używać gotowych rozwiązań.
Umiejętności rynkowe
Nauczycie się bezpiecznego wyświetlania treści użytkowników - krytycznej umiejętności w każdej aplikacji webowej. Zrozumiecie też koncepcję separacji treści od prezentacji i zarządzania metadanymi (tagi, kategorie, daty).
Formularz dodawania artykułu Redaktor wypełnia formularz z tytułem, treścią, kategorią i tagami. System automatycznie generuje ID, slug (URL-friendly tytuł) i timestamp. Treść może być formatowana (akapity).
Walidacja i sanityzacja System sprawdza poprawność danych i sanityzuje treść przed zapisem. Szczególnie ważna jest ochrona przed XSS przy wyświetlaniu - nigdy nie ufaj danym od użytkownika!
Lista artykułów z filtrami Strona główna wyświetla listę artykułów z możliwością filtrowania po kategorii lub tagu. Artykuły są posortowane od najnowszych.
Podgląd artykułu Dedykowana strona z pełną treścią artykułu, metadanymi (autor, data, kategoria) i listą tagów.
Strona główna (lista)
Formularz artykułu
Podgląd artykułu
Panel redaktora (B/C)
Przykładowa struktura pliku JSON (wariant A/B):
{ "posts": [ { "id": 1, "slug": "wprowadzenie-do-php", "title": "Wprowadzenie do PHP", "content": "PHP to popularny język programowania server-side...\n\nW tym artykule poznasz podstawy...", "category": "programowanie", "tags": ["php", "backend", "podstawy"], "author": "Jan Kowalski", "created_at": "2026-02-13 10:30:00", "updated_at": "2026-02-13 10:30:00" }, { "id": 2, "slug": "css-flexbox-poradnik", "title": "CSS Flexbox - kompletny poradnik", "content": "Flexbox to potężne narzędzie do układania elementów...", "category": "frontend", "tags": ["css", "flexbox", "layout"], "author": "Anna Nowak", "created_at": "2026-02-14 09:15:00", "updated_at": "2026-02-14 09:15:00" } ]}Wariant C - plik per artykuł:
data/ posts/ post-1.json post-2.json post-3.json index.json (lista wszystkich postów z metadanymi)Wymagane funkcjonalności:
htmlspecialchars() na treści przy wyświetlaniuStruktura plików:
Wszystko z wariantu A, plus:
Struktura plików:
Wszystko z wariantu B, plus:
Generowanie slug z tytułu:
<?phpfunction generateSlug(string $title): string { // Zamień polskie znaki $slug = strtr($title, [ 'ą' => 'a', 'ć' => 'c', 'ę' => 'e', 'ł' => 'l', 'ń' => 'n', 'ó' => 'o', 'ś' => 's', 'ź' => 'z', 'ż' => 'z', 'Ą' => 'a', 'Ć' => 'c', 'Ę' => 'e', 'Ł' => 'l', 'Ń' => 'n', 'Ó' => 'o', 'Ś' => 's', 'Ź' => 'z', 'Ż' => 'z' ]);
// Zamień na małe litery $slug = strtolower($slug);
// Zamień spacje i znaki specjalne na myślniki $slug = preg_replace('/[^a-z0-9]+/', '-', $slug);
// Usuń myślniki z początku i końca $slug = trim($slug, '-');
return $slug;}
// Użycie:$slug = generateSlug("Wprowadzenie do PHP - część 1");// Wynik: "wprowadzenie-do-php-część-1"Parsowanie tagów z tekstu:
<?phpfunction parseTags(string $tagsString): array { // Rozdziel po przecinku $tags = explode(',', $tagsString);
// Oczyść każdy tag $tags = array_map(function($tag) { return strtolower(trim($tag)); }, $tags);
// Usuń puste i duplikaty $tags = array_filter($tags); $tags = array_unique($tags);
return array_values($tags);}
// Użycie:$tags = parseTags("PHP, JavaScript, php, CSS ");// Wynik: ["php", "javascript", "css"]Bezpieczne wyświetlanie treści:
<?phpfunction renderContent(string $content): string { // Escapuj HTML $safe = htmlspecialchars($content, ENT_QUOTES, 'UTF-8');
// Zamień podwójne entery na akapity $paragraphs = explode("\n\n", $safe); $html = ''; foreach ($paragraphs as $p) { $p = trim($p); if (!empty($p)) { // Zamień pojedyncze entery na <br> $p = nl2br($p); $html .= "<p>$p</p>\n"; } }
return $html;}Generowanie zajawki:
<?phpfunction getExcerpt(string $content, int $maxLength = 200): string { // Usuń HTML i przytnij $text = strip_tags($content);
if (strlen($text) <= $maxLength) { return $text; }
// Przytnij do ostatniego słowa $excerpt = substr($text, 0, $maxLength); $lastSpace = strrpos($excerpt, ' ');
if ($lastSpace !== false) { $excerpt = substr($excerpt, 0, $lastSpace); }
return $excerpt . '...';}Filtrowanie artykułów po tagu:
<?phpfunction filterByTag(array $posts, string $tag): array { return array_filter($posts, function($post) use ($tag) { return in_array($tag, $post['tags'], true); });}
function filterByCategory(array $posts, string $category): array { return array_filter($posts, function($post) use ($category) { return $post['category'] === $category; });}
// Generowanie chmury tagówfunction getTagCloud(array $posts): array { $tagCounts = [];
foreach ($posts as $post) { foreach ($post['tags'] as $tag) { if (!isset($tagCounts[$tag])) { $tagCounts[$tag] = 0; } $tagCounts[$tag]++; } }
arsort($tagCounts); return $tagCounts;}CSS dla tagów i kategorii:
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px;}
.tag { display: inline-block; padding: 4px 12px; background-color: #e0f2fe; color: #0369a1; border-radius: 16px; font-size: 0.85em; text-decoration: none; transition: background-color 0.2s;}
.tag:hover { background-color: #bae6fd;}
.category-badge { display: inline-block; padding: 4px 12px; background-color: #f3e8ff; color: #7c3aed; border-radius: 4px; font-size: 0.85em; font-weight: 500;}
.post-meta { color: #6b7280; font-size: 0.9em; margin-bottom: 1rem;}
.post-excerpt { color: #4b5563; line-height: 1.6;}To prawdziwy projekt zespołowy!
Ten projekt to wasz własny mini-WordPress! Nauczycie się, jak działają systemy CMS “od kuchni” - wiedza, która przyda się przy pracy z każdym CMS-em.
Pracujcie iteracyjnie - lepiej mieć działający wariant A niż niedziałający C!