Pisanie pierwszej aplikacji!

Poznajmy razem Nette Framework, tworząc prosty blog z komentarzami. Zaczynajmy!

Już po pierwszych dwóch rozdziałach będziemy mieli swój własny działający blog i będziemy mogli publikować swoje wspaniałe posty, chociaż funkcje będą na razie w znacznym stopniu ograniczone. Powinieneś przeczytać również następne rozdziały, gdzie zaprogramujemy dodawanie komentarzy, edytowanie artykułów i na koniec zabezpieczymy blog.

Ten poradnik zakłada, że przeczytałeś stronę Instalacja i pomyślnie przygotowałeś potrzebne narzędzia. Zakłada również, że rozumiesz programowanie obiektowe w PHP.

Używaj PHP 8.1 lub nowszej wersji. 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 już działać strona startowa Web Projectu. Wypróbujemy to, otwierając przeglądarkę pod następującym adresem URL:

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

i zobaczymy stronę startową Nette Frameworku:

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

Jeśli wystąpił problem, wypróbuj te wskazówki.

Zawartość Web Project

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

nette-blog/
├── app/              ← katalog aplikacji
│   ├── Core/         ← podstawowe klasy niezbędne do działania
│   ├── Presentation/ ← presentery, szablony itp.
│   │   └── Home/     ← katalog presentera Home
│   └── Bootstrap.php ← klasa startowa Bootstrap
├── assets/           ← surowe zasoby (SCSS, TypeScript, obrazy źródłowe)
├── bin/              ← skrypty uruchamiane z linii poleceń
├── config/           ← pliki konfiguracyjne
├── log/              ← logowanie błędów
├── temp/             ← pliki tymczasowe, cache, …
├── vendor/           ← biblioteki zainstalowane przez Composer
│   └── autoload.php  ← autoloading wszystkich zainstalowanych pakietów
└── www/              ← katalog publiczny - jedyny dostępny z przeglądarki
	├── assets/       ← skompilowane pliki statyczne (CSS, JS, obrazy, ...)
    └── index.php     ← plik początkowy, który uruchamia aplikację

Katalog www/ jest przeznaczony do przechowywania obrazów, plików JavaScript, stylów CSS i innych publicznie dostępnych plików. Tylko ten katalog jest dostępny z internetu, więc ustaw katalog główny swojej aplikacji tak, aby wskazywał właśnie tutaj (można to ustawić w konfiguracji Apache lub nginx, ale zróbmy to później, teraz to nie jest ważne).

Najważniejszy folder dla nas to app/. Tutaj znajdziemy plik Bootstrap.php, w którym znajduje się klasa służąca do załadowania całego frameworka i ustawienia aplikacji. Aktywuje się tutaj autoloading, ustawia się tutaj debugger i routing.

Sprzątanie

Web Project zawiera stronę startową, którą usuniemy, zanim zaczniemy coś programować. Bez obaw zastąpimy więc zawartość pliku app/Presentation/Home/default.latte tekstem “Witaj świecie!”.

Tracy (debugger)

Niezwykle ważnym narzędziem do rozwoju jest narzędzie do debugowania Tracy. Spróbuj wywołać jakiś błąd w pliku app/Presentation/Home/HomePresenter.php (np. usuwając nawias klamrowy w definicji klasy HomePresenter) i zobacz, co się stanie. Pojawi się strona z powiadomieniem, która w zrozumiały sposób opisuje błąd.

Tracy ogromnie nam pomoże, gdy będziemy szukać błędów w aplikacji. Zwróć również uwagę na pływający pasek Tracy Baru w prawym dolnym rogu ekranu, który zawiera informacje z działania aplikacji.

W trybie produkcyjnym Tracy jest oczywiście wyłączona i nie wyświetla żadnych wrażliwych informacji. Wszystkie błędy są w tym przypadku zapisywane w folderze log/. Spróbujmy to zrobić. W pliku app/Bootstrap.php odkomentujemy następujący wiersz i zmienimy parametr wywołania na false, aby kod wyglądał tak:

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

Po odświeżeniu strony już nie zobaczymy Tracy. Zamiast niej wyświetli się przyjazna dla użytkownika wiadomość:

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

Zakomentujemy ponownie wiersz // $configurator->setDebugMode(false);. Tracy automatycznie włączy tryb deweloperski na localhost i wyłączy go wszędzie indziej.

Błąd, który stworzyliśmy, możemy naprawić i kontynuować pisanie aplikacji.

Wyślij podziękowania

Pokażemy Ci sztuczkę, którą ucieszysz autorów open source. W prosty sposób dasz na GitHubie gwiazdkę bibliotekom, których używa Twój projekt. Wystarczy uruchomić:

composer thanks

Spróbuj!