Przejdź do głównej zawartości
Codex13

Notatnik tekstowy

Cel projektu

Dział zatytułowany „Cel projektu”

Stworzysz Notatnik tekstowy - aplikacje umozliwiajaca tworzenie, przegladanie i zarzadzanie notatkami. Użytkownik może dodawać nowe notatki z tytułem i trescia, przegladac liste zapisanych notatek, otwierac ich szczegóły oraz edytować lub usuwać istniejace wpisy. Dane sa przechowywane w pliku JSON.

Czego się nauczysz?

  • Tworzenia aplikacji CRUD (Create, Read, Update, Delete)
  • Pracy z formularzami zawierajacymi pola tekstowe (textarea)
  • Wyswietlania listy elementow z linkami do szczegółów
  • Zabezpieczania tresci przed atakami XSS

Dlaczego to jest ważne?

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

W prawdziwej pracy...

Aplikacje do zarzadzania trescia (notatki, artykuły, dokumenty) to podstawa wielu systemow - od prostych narzedzi do notatek (Notion, Evernote), przez CMS-y (WordPress, Drupal), aż po systemy dokumentacji firmowej. Umiejetnosc tworzenia CRUD z obsługa tekstu to fundament web developmentu.

Co ma robić aplikacja?

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

Funkcje podstawowe

Dział zatytułowany „Funkcje podstawowe”

  1. Formularz dodawania notatki Użytkownik wpisuje tytuł notatki i jej tresc (textarea). Po zapisaniu notatka pojawia się na liscie.

  2. Lista notatek Wszystkie notatki sa wyświetlane jako lista z tytułami i datami utworzenia. Klikniecie w tytuł otwiera szczegóły.

  3. Podglad szczegółowy Po kliknieciu w notatke użytkownik widzi pełna tresc wraz z data utworzenia i ostatniej modyfikacji.

Dane i ich struktura

Dział zatytułowany „Dane i ich struktura”

Przykładowa struktura pliku JSON:

{
  "notes": [
    {
      "id": 1,
      "title": "Lista zakupow",
      "content": "Mleko, chleb, jajka, masło",
      "created_at": "2026-02-13 10:30:00",
      "updated_at": "2026-02-13 10:30:00"
    },
    {
      "id": 2,
      "title": "Pomysły na projekt",
      "content": "1. Aplikacja do notatek\n2. Kalkulator BMI\n3. Quiz wiedzy",
      "created_at": "2026-02-13 11:45:00",
      "updated_at": "2026-02-14 09:15:00"
    }
  ]
}

Warianty realizacji

Dział zatytułowany „Warianty realizacji”

Wariant podstawowy

Dział zatytułowany „Wariant podstawowy”

Wymagane funkcje:

  • Formularz: tytuł, tresc (textarea)
  • Walidacja w PHP (tytuł niepusty, tresc min. 10 znakow)
  • Lista notatek z tytułami i datami
  • Podglad pojedynczej notatki
  • Zapis do pliku JSON
  • Prosty interfejs CSS

Przykładowy scenariusz:

Użytkownik wpisuje tytuł “Zakupy” i tresc “Mleko, chleb, jajka”. Po kliknieciu “Zapisz” notatka pojawia się na liscie. Klika w tytuł i widzi pełna tresc. Przy pustym tytule widzi komunikat błędu.

Ocena: 3.0

Wskazowki implementacyjne

Dział zatytułowany „Wskazowki implementacyjne”

Przydatne fragmenty kodu

Dział zatytułowany „Przydatne fragmenty kodu”

Dodawanie notatki:

$data = json_decode(file_get_contents('notes.json'), true) ?? ['notes' => []];


$newNote = [
    'id' => time(),
    'title' => htmlspecialchars(trim($_POST['title'])),
    'content' => htmlspecialchars(trim($_POST['content'])),
    'created_at' => date('Y-m-d H:i:s'),
    'updated_at' => date('Y-m-d H:i:s')
];


$data['notes'][] = $newNote;
file_put_contents('notes.json', json_encode($data, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));

Pobieranie notatki po ID:

$noteId = (int)$_GET['id'];
$note = null;


foreach ($data['notes'] as $n) {
    if ($n['id'] === $noteId) {
        $note = $n;
        break;
    }
}


if ($note === null) {
    die("Notatka nie znaleziona");
}

Edycja notatki:

$noteId = (int)$_POST['id'];


foreach ($data['notes'] as &$note) {
    if ($note['id'] === $noteId) {
        $note['title'] = htmlspecialchars(trim($_POST['title']));
        $note['content'] = htmlspecialchars(trim($_POST['content']));
        $note['updated_at'] = date('Y-m-d H:i:s');
        break;
    }
}


file_put_contents('notes.json', json_encode($data, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));

Wyszukiwanie:

$search = strtolower(trim($_GET['search'] ?? ''));


$filtered = array_filter($data['notes'], function($note) use ($search) {
    if (empty($search)) return true;
    return strpos(strtolower($note['title']), $search) !== false
        || strpos(strtolower($note['content']), $search) !== false;
});

Najczestsze błędy

Dział zatytułowany „Najczestsze błędy”

Zasoby

Dział zatytułowany „Zasoby”
PHP: nl2br()
PHP: strpos()
PHP: htmlspecialchars()
HTML: textarea

Do dziela!

Dział zatytułowany „Do dziela!”

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!