Czego się nauczysz?
- Tworzenia formularzy CRUD (Create, Read, Update, Delete)
- Kategoryzacji danych (przedmioty szkolne)
- Wyszukiwania i filtrowania tekstowego
- Pracy z sesjami PHP
- Implementacji prostego systemu uprawnień
Stworzysz Notatnik ucznia - aplikację do tworzenia i organizowania notatek szkolnych. Użytkownik może dodawać notatki przypisane do przedmiotów, przeglądać je, wyszukiwać i organizować według kategorii.
Czego się nauczysz?
W prawdziwej pracy...
Aplikacje do zarządzania notatkami i treścią (Evernote, Notion, OneNote) są podstawą produktywności cyfrowej. Umiejętność projektowania systemów do tworzenia, kategoryzowania i wyszukiwania treści jest fundamentem dla każdego programisty tworzącego systemy CMS, bazy wiedzy czy aplikacje edukacyjne.
Formularz dodawania notatki Użytkownik podaje tytuł, treść notatki oraz wybiera przedmiot (kategorię) z listy.
Walidacja danych System sprawdza poprawność wprowadzonych danych - czy tytuł ma min. 3 znaki, czy przedmiot jest wybrany.
Lista notatek Wszystkie notatki są wyświetlane w formie listy z tytułem, przedmiotem i datą utworzenia.
Podgląd notatki Użytkownik może kliknąć na notatkę i zobaczyć jej pełną treść.
Przykładowa struktura pliku JSON:
{ "notes": [ { "id": 1, "title": "Wzory na pole figur", "content": "Pole prostokąta: a × b\nPole trójkąta: (a × h) / 2\nPole koła: π × r²", "subject": "matematyka", "user_id": 1, "created_at": "2026-02-10 14:30:00", "updated_at": "2026-02-10 14:30:00" }, { "id": 2, "title": "Rewolucja francuska - daty", "content": "1789 - Zburzenie Bastylii\n1791 - Konstytucja\n1793 - Egzekucja Ludwika XVI", "subject": "historia", "user_id": 1, "created_at": "2026-02-11 10:15:00", "updated_at": "2026-02-11 10:15:00" }, { "id": 3, "title": "Słówka - Unit 5", "content": "ambitious - ambitny\nachieve - osiągnąć\ngoal - cel", "subject": "angielski", "user_id": 2, "created_at": "2026-02-12 16:00:00", "updated_at": "2026-02-12 16:00:00" } ]}Wymagane funkcje:
Przykładowy scenariusz:
Ocena: 3.0Użytkownik wchodzi na stronę i widzi listę swoich notatek. Klika “Dodaj notatkę”, wpisuje tytuł “Wzory na pole figur”, wybiera przedmiot “Matematyka” i wpisuje treść. Po zapisie notatka pojawia się na liście.
Wszystko z wariantu A, plus:
htmlspecialchars() przy wyświetlaniuPrzykładowy scenariusz:
Ocena: 4.0-5.0Użytkownik wybiera filtr “Matematyka” i widzi tylko notatki z tego przedmiotu. Wpisuje “pole” w wyszukiwarce i znajduje notatkę “Wzory na pole figur”. Może posortować notatki od najnowszej.
Wszystko z wariantu B, plus:
Przykładowy scenariusz:
Ocena: 5.0-6.0Użytkownik loguje się i widzi tylko swoje notatki. Może edytować notatkę - system zapisuje datę modyfikacji. Admin widzi notatki wszystkich użytkowników i może je usuwać. Dashboard pokazuje: “Matematyka: 5, Historia: 3, Angielski: 2”.
Walidacja danych wejściowych:
$title = trim($_POST['title'] ?? '');$content = trim($_POST['content'] ?? '');$subject = $_POST['subject'] ?? '';
if (strlen($title) < 3) { $errors[] = "Tytuł musi mieć minimum 3 znaki";}
if (strlen($title) > 200) { $errors[] = "Tytuł może mieć maksymalnie 200 znaków";}
if (empty($content)) { $errors[] = "Treść notatki jest wymagana";}
$validSubjects = ['matematyka', 'polski', 'angielski', 'historia', 'fizyka', 'chemia', 'biologia', 'informatyka', 'inne'];if (!in_array($subject, $validSubjects)) { $errors[] = "Wybierz poprawny przedmiot";}Dodawanie notatki:
function addNote(array &$notes, array $data): int { $newId = empty($notes) ? 1 : max(array_column($notes, 'id')) + 1; $now = date('Y-m-d H:i:s');
$newNote = [ 'id' => $newId, 'title' => $data['title'], 'content' => $data['content'], 'subject' => $data['subject'], 'user_id' => $data['user_id'] ?? 1, 'created_at' => $now, 'updated_at' => $now, ];
$notes[] = $newNote; return $newId;}Wyszukiwanie notatek:
function searchNotes(array $notes, string $query): array { if (empty($query)) { return $notes; }
$queryLower = mb_strtolower($query);
return array_filter($notes, function($note) use ($queryLower) { $titleLower = mb_strtolower($note['title']); $contentLower = mb_strtolower($note['content']);
return strpos($titleLower, $queryLower) !== false || strpos($contentLower, $queryLower) !== false; });}Filtrowanie po przedmiocie:
function filterBySubject(array $notes, string $subject): array { if (empty($subject)) { return $notes; }
return array_filter($notes, fn($note) => $note['subject'] === $subject);}Sortowanie notatek:
function sortNotes(array $notes, string $sortBy = 'created_at', string $order = 'desc'): array { usort($notes, function($a, $b) use ($sortBy, $order) { $result = strcmp($a[$sortBy] ?? '', $b[$sortBy] ?? ''); return $order === 'desc' ? -$result : $result; });
return $notes;}JavaScript - walidacja formularza:
function validateForm() { const title = document.getElementById('title').value.trim(); const content = document.getElementById('content').value.trim(); const subject = document.getElementById('subject').value; const errors = [];
if (title.length < 3) { errors.push('Tytuł musi mieć minimum 3 znaki'); }
if (content.length === 0) { errors.push('Treść jest wymagana'); }
if (!subject) { errors.push('Wybierz przedmiot'); }
if (errors.length > 0) { alert(errors.join('\n')); return false; }
return true;}Dostępne przedmioty:
function getSubjects(): array { return [ 'matematyka' => ['label' => 'Matematyka', 'icon' => '📐', 'color' => '#3498db'], 'polski' => ['label' => 'Język polski', 'icon' => '📖', 'color' => '#e74c3c'], 'angielski' => ['label' => 'Język angielski', 'icon' => '🇬🇧', 'color' => '#9b59b6'], 'historia' => ['label' => 'Historia', 'icon' => '🏛️', 'color' => '#f39c12'], 'fizyka' => ['label' => 'Fizyka', 'icon' => '⚡', 'color' => '#1abc9c'], 'chemia' => ['label' => 'Chemia', 'icon' => '🧪', 'color' => '#2ecc71'], 'biologia' => ['label' => 'Biologia', 'icon' => '🌿', 'color' => '#27ae60'], 'informatyka' => ['label' => 'Informatyka', 'icon' => '💻', 'color' => '#34495e'], 'inne' => ['label' => 'Inne', 'icon' => '📝', 'color' => '#95a5a6'], ];}Wykorzystaj lekcje!
Cotygodniowe spotkania podczas lekcji to idealny moment, by:
Pracuj iteracyjnie - lepiej mieć działający wariant A niż niedokończony C!