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:
![](https://files.nette.org/www/qs-welcome.webp)
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.
![](https://files.nette.org/www/qs-hello.webp)
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.
![debugger screen](https://files.nette.org/www/qs-tracy.avif)
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.
![](https://files.nette.org/www/qs-tracybar.webp)
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($rootDir . '/log');
...
A weboldal frissítése után a piros képernyős oldal helyébe a felhasználóbarát üzenet lép:
![error screen](https://files.nette.org/www/qs-fatal.webp)
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!