Skip to content

Aplikacja „notatnik ucznia"

This content is not available in your language yet.

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?

  • Tworzenia formularzy CRUD (Create, Read, Update, Delete)
  • Kategoryzacji danych (przedmioty szkolne)
  • Wyszukiwania i filtrowania tekstowego
  • Pracy z sesjami PHP
  • Implementacji prostego systemu uprawnień

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.

  1. Formularz dodawania notatki Użytkownik podaje tytuł, treść notatki oraz wybiera przedmiot (kategorię) z listy.

  2. Walidacja danych System sprawdza poprawność wprowadzonych danych - czy tytuł ma min. 3 znaki, czy przedmiot jest wybrany.

  3. Lista notatek Wszystkie notatki są wyświetlane w formie listy z tytułem, przedmiotem i datą utworzenia.

  4. 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"
}
]
}
  • Directorynotatnik-ucznia/
    • index.php (strona główna - lista notatek)
    • dodaj.php (formularz dodawania)
    • notatka.php (podgląd notatki)
    • edytuj.php (edycja notatki - wariant C)
    • usun.php (usuwanie notatki - wariant C)
    • szukaj.php (wyszukiwarka - wariant B)
    • Directoryincludes/
      • config.php
      • functions.php
      • auth.php (wariant C)
    • Directorydata/
      • notes.json
      • users.json (wariant C)
    • Directorycss/
      • style.css
    • Directoryjs/
      • validation.js

Wymagane funkcje:

  • Formularz dodawania: tytuł, treść, przedmiot (select)
  • Walidacja PHP (tytuł min. 3 znaki, przedmiot wybrany)
  • Min. 1 walidacja JavaScript (np. długość tytułu)
  • Zapis notatek do pliku JSON
  • Lista notatek z podglądem pełnej treści
  • Komunikaty błędów i sukcesu

Przykładowy scenariusz:

Uż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.

Ocena: 3.0

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:

  • 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!