Készítsd el az első alkalmazásodat!

Ismerkedjen meg a Nette Frameworkkel, miközben létrehoz egy egyszerű blogot kommentekkel. Kezdjük el!

Az első két fejezet után saját működő blogod lesz, és készen állsz arra, hogy közzétedd a fantasztikus bejegyzéseidet, bár a funkciók eléggé korlátozottak lesznek a két fejezet befejezése után. Hogy a felhasználók számára még szebb legyen, érdemes a következő fejezeteket is elolvasnod, és folyamatosan fejlesztened az alkalmazásodat.

Ez a bemutató feltételezi, hogy befejezte a Telepítés dokumentumot, és sikeresen beállította a szerszámokat. Feltételezi továbbá, hogy ért az objektumorientált PHP programozáshoz.

Kérjük, használjon PHP 8.1 vagy újabb verziót. A teljes alkalmazás megtalálható a GitHubon.

Az üdvözlő oldal

Kezdjük egy új projekt létrehozásával a nette-blog könyvtárban:

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

Ebben a pillanatban a webes projekt üdvözlő oldalának kell futnia. Próbálja ki, ha megnyitja a böngészőjét, és a következő URL-re lép:

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

és meg kell látnia a Nette Framework üdvözlő oldalát:

Az alkalmazás működik, és most már elkezdhet változtatásokat végezni rajta.

Ha problémája van, próbálja ki ezt a néhány tippet.

A webes projekt tartalma

A Web Project a következő felépítésű:

nette-blog/
├── app/              ← application directory
│   ├── Core/         ← alapvető szükséges osztályok
│   ├── UI/           ← prezenterek, sablonok és társai.
│   │   │ └── Home/   ← Főoldal prezenter könyvtár
│   └── Bootstrap.php ← booting class Bootstrap
├── bin/              ← scripts for the command line
├── config/           ← configuration files
├── log/              ← error logs
├── temp/             ← temporary files, cache, …
├── vendor/           ← libraries installed by Composer
│   └── autoload.php  ← autoloading of libraries installed by Composer
└── www/              ← public folder - the only place accessible from browser
    └── index.php     ← initial file that launches the application

A www könyvtár a képek, JavaScript, CSS és egyéb nyilvánosan elérhető fájlok tárolására szolgál. Ez az egyetlen könyvtár, amely közvetlenül elérhető a böngészőből, ezért a webszerver gyökérkönyvtárát ide irányíthatjuk (ezt az Apache-ban is beállíthatjuk, de tegyük ezt később, mert most nem fontos).

A számodra legfontosabb könyvtár a app/. Ott találod a Bootstrap.php fájlt, benne egy osztályt, amely betölti a keretrendszert és konfigurálja az alkalmazást. Aktiválja az automatikus betöltést, és beállítja a hibakeresőt és az útvonalakat.

Tisztítsa meg a

A webes projekt tartalmaz egy üdvözlő oldalt, amelyet eltávolíthatunk – nyugodtan töröljük a app/UI/Home/default.latte fájlt, és cseréljük ki a “Hello world!” szövegre.

Tracy (hibakereső)

A fejlesztés rendkívül fontos eszköze a Tracy nevű hibakereső. Próbálj meg néhány hibát elkövetni a app/UI/Home/HomePresenter.php fájlodban (pl. távolíts el egy szögletes zárójelet a HomePresenter osztály definíciójából), és nézd meg, mi történik. Egy piros képernyős oldal fog felugrani egy érthető hibaleírással.

A Tracy jelentősen segít a hibák felkutatásában. Figyelje meg a jobb alsó sarokban lebegő Tracy sávot is, amely tájékoztatja Önt a fontos futásidejű adatokról.

Termelési üzemmódban a Tracy természetesen le van tiltva, és nem árul el semmilyen érzékeny információt. Helyette minden hiba a log/ könyvtárba kerül mentésre. Csak próbálja ki. A app/Bootstrap.php könyvtárban keresse meg a következő kódrészletet, vegye ki a megjegyzést a sorból, és változtassa meg a metódushívás paraméterét false, így néz ki:

...
$configurator->setDebugMode(false);
$configurator->enableTracy(__DIR__ . '/../log');
...

A weboldal frissítése után a piros képernyős oldal helyébe a felhasználóbarát üzenet lép:

Most nézze meg a log/ könyvtárat. Ott megtalálja a hibanaplót (az exception.log fájlban) és a hibaüzenetet tartalmazó oldalt is (egy HTML fájlba mentve, amelynek a neve exception).

Kommentáld újra a // $configurator->setDebugMode(false); sort. A Tracy automatikusan bekapcsolja a localhost környezetben a fejlesztési módot, máshol pedig letiltja.

Most már kijavíthatjuk a hibát, és folytathatjuk az alkalmazásunk tervezését.

Köszönet küldése

Mutatunk egy trükköt, aminek a nyílt forráskódú szerzők örülni fognak. A GitHubon egyszerűen adhatsz csillagot azoknak a könyvtáraknak, amelyeket a projekted használ. Csak futtasd le:

composer thanks

Próbálja ki!