Stwórz swoją pierwszą aplikację!

Poznaj Nette Framework, tworząc prostego bloga z komentarzami. Zaczynajmy!

Po pierwszych dwóch rozdziałach będziesz mieć własnego działającego bloga i będziesz gotowy publikować swoje świetne wpisy, choć po ukończeniu tylko tych dwóch rozdziałów funkcje będą dość ograniczone. Powinieneś przeczytać także kolejne rozdziały, w których zrealizujemy dodawanie komentarzy, edycję wpisów, a na koniec zabezpieczenie bloga.

Ten samouczek zakłada, że ukończyłeś dokument Instalacja i pomyślnie przygotowałeś swoje narzędzia. Zakłada też, że rozumiesz programowanie obiektowe w PHP.

Używaj PHP 8.1 albo nowszego. Kompletną aplikację znajdziesz na GitHubie.

Strona powitalna

Zacznijmy od utworzenia nowego projektu w katalogu nette-blog:

composer create-project nette/web-project nette-blog

W tym momencie powinna działać strona powitalna Web Projectu. Wypróbuj to, otwierając przeglądarkę i przechodząc pod ten URL:

http://localhost/nette-blog/www/

i powinieneś zobaczyć stronę powitalną Nette Framework:

Aplikacja działa i możesz teraz zacząć wprowadzać w niej zmiany.

Jeśli masz problem, wypróbuj te kilka wskazówek.

Zawartość Web Projectu

Web Project ma następującą strukturę:

nette-blog/
├── app/              ← katalog aplikacji
│   ├── Core/         ← podstawowe niezbędne klasy
│   ├── Presentation/ ← presentery, szablony i spółka
│   │   └── Home/     ← katalog presentera Home
│   └── Bootstrap.php ← klasa rozruchowa Bootstrap
├── assets/           ← surowe zasoby (SCSS, TypeScript, obrazki źródłowe)
├── bin/              ← skrypty dla wiersza poleceń
├── config/           ← pliki konfiguracyjne
├── log/              ← logi błędów
├── temp/             ← pliki tymczasowe, cache, …
├── vendor/           ← biblioteki zainstalowane przez Composera
│   └── autoload.php  ← autoloading wszystkich zainstalowanych pakietów
└── www/              ← folder publiczny - jedyne miejsce dostępne z przeglądarki
    ├── assets/       ← skompilowane pliki statyczne (CSS, JS, obrazki, …)
    └── index.php     ← plik początkowy uruchamiający aplikację

Katalog www/ przeznaczony jest do przechowywania obrazków, plików JavaScript, stylów CSS i innych publicznie dostępnych plików. To jedyny katalog bezpośrednio dostępny z internetu, więc ustaw document root swojego serwera webowego tak, żeby wskazywał tutaj (możesz to skonfigurować w Apache albo Nginksie, ale zróbmy to później, bo teraz nie jest to krytyczne).

Najważniejszym katalogiem jest dla Ciebie app/. Znajdziesz w nim plik Bootstrap.php zawierający klasę, która wczytuje framework i konfiguruje aplikację. Aktywuje autoloading, ustawia debugger i konfiguruje trasy.

Sprzątanie

Web Project zawiera stronę powitalną, którą usuniemy przed rozpoczęciem programowania. Śmiało zastąp treść pliku app/Presentation/Home/default.latte napisem “Hello world!”.

Tracy (debugger)

Niezwykle ważnym narzędziem przy tworzeniu jest narzędzie debugujące Tracy. Spróbuj wprowadzić błąd do swojego pliku app/Presentation/Home/HomePresenter.php (np. usuń nawias klamrowy z definicji klasy HomePresenter) i zobacz, co się stanie. Pojawi się strona z czerwonym ekranem i zrozumiałym opisem błędu.

Tracy znacząco pomoże Ci przy debugowaniu błędów. Zwróć też uwagę na pływający Tracy Bar w prawym dolnym rogu ekranu, który wyświetla ważne informacje o działaniu.

W trybie produkcyjnym Tracy jest oczywiście wyłączona i nie wyświetla żadnych wrażliwych informacji. Wszystkie błędy zapisywane są zamiast tego do katalogu log/. Wypróbujmy to. W pliku app/Bootstrap.php znajdź poniższy fragment kodu, odkomentuj linię i zmień parametr wywołania metody na false, żeby wyglądało to tak:

// ...
$this->configurator->setDebugMode(false);

Po odświeżeniu strony nie zobaczysz już czerwonego ekranu. Zamiast niego wyświetli się przyjazny dla użytkownika komunikat:

Teraz zajrzyj do katalogu log/. Tutaj (w pliku exception.log) znajdziesz zalogowany błąd, a także znajomą stronę z komunikatem o błędzie (zapisaną jako plik HTML o nazwie zaczynającej się od exception-).

Zakomentuj linię // $this->configurator->setDebugMode(false); z powrotem. Tracy automatycznie włącza tryb deweloperski w środowisku localhost, a gdzie indziej go wyłącza.

Teraz możemy naprawić wprowadzony błąd i kontynuować budowanie naszej aplikacji.

Wyślij podziękowanie

Pokażemy Ci trik, który ucieszy autorów open source. Możesz w prosty sposób dać gwiazdkę na GitHubie bibliotekom, których używa Twój projekt. Wystarczy uruchomić:

composer thanks

Wypróbuj!