Créez votre première application !

Découvrez Nette Framework en créant un simple blog avec commentaires. Allons-y !

Après les deux premiers chapitres, vous aurez votre propre blog fonctionnel et serez prêt à publier vos formidables articles, même si les fonctionnalités resteront assez limitées à ce stade. Vous devriez aussi lire les chapitres suivants, où nous implémenterons l'ajout de commentaires, l'édition des articles et, enfin, la sécurisation du blog.

Ce tutoriel suppose que vous avez suivi le document Installation et que vous avez correctement mis en place vos outils. Il suppose aussi que vous comprenez la programmation orientée objet en PHP.

Utilisez PHP 8.1 ou plus récent. Vous trouverez l'application complète sur GitHub.

La page de bienvenue

Commençons par créer un nouveau projet dans le répertoire nette-blog :

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

À ce stade, la page de bienvenue du Web Project devrait fonctionner. Essayez en ouvrant votre navigateur à l'adresse suivante :

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

et vous devriez voir la page de bienvenue de Nette Framework :

L'application fonctionne et vous pouvez maintenant commencer à la modifier.

Si vous rencontrez un problème, essayez ces quelques conseils.

Contenu du Web Project

Le Web Project a la structure suivante :

nette-blog/
├── app/              ← répertoire de l'application
│   ├── Core/         ← classes de base indispensables
│   ├── Presentation/ ← presenters, templates & cie
│   │   └── Home/     ← répertoire du presenter Home
│   └── Bootstrap.php ← classe de démarrage Bootstrap
├── assets/           ← assets bruts (SCSS, TypeScript, images sources)
├── bin/              ← scripts pour la ligne de commande
├── config/           ← fichiers de configuration
├── log/              ← journaux d'erreurs
├── temp/             ← fichiers temporaires, cache, …
├── vendor/           ← bibliothèques installées par Composer
│   └── autoload.php  ← autoloading de tous les paquets installés
└── www/              ← dossier public - le seul endroit accessible depuis le navigateur
    ├── assets/       ← fichiers statiques compilés (CSS, JS, images, …)
    └── index.php     ← fichier initial qui lance l'application

Le répertoire www/ est destiné à stocker les images, les fichiers JavaScript, les styles CSS et les autres fichiers accessibles publiquement. C'est le seul répertoire directement accessible depuis internet, réglez donc le document root de votre serveur web pour qu'il pointe ici (vous pouvez le configurer dans Apache ou Nginx, mais faisons-le plus tard, ce n'est pas essentiel pour l'instant).

Le répertoire le plus important pour vous est app/. Vous y trouverez le fichier Bootstrap.php, qui contient une classe chargeant le framework et configurant l'application. Elle active l'autoloading, met en place le débogueur et configure les routes.

Nettoyage

Le Web Project contient une page de bienvenue, que nous allons supprimer avant de commencer à programmer. N'hésitez pas à remplacer le contenu du fichier app/Presentation/Home/default.latte par “Hello world!”.

Tracy (le débogueur)

Un outil extrêmement important pour le développement est l'outil de débogage Tracy. Essayez d'introduire une erreur dans votre fichier app/Presentation/Home/HomePresenter.php (par exemple en supprimant une accolade de la définition de la classe HomePresenter) et regardez ce qui se passe. Une page à l'écran rouge apparaîtra, avec une description compréhensible de l'erreur.

Tracy vous aidera énormément lors du débogage. Remarquez aussi la Tracy Bar flottante dans le coin inférieur droit de l'écran, qui affiche des informations importantes sur l'exécution.

En mode production, Tracy est bien sûr désactivée et n'affiche aucune information sensible. Toutes les erreurs sont enregistrées dans le répertoire log/ à la place. Essayons. Dans le fichier app/Bootstrap.php, trouvez le morceau de code suivant, décommentez la ligne et changez le paramètre de l'appel de méthode en false, pour obtenir ceci :

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

Après avoir rafraîchi la page web, vous ne verrez plus l'écran rouge. Un message convivial s'affichera à la place :

Regardez maintenant dans le répertoire log/. Vous y trouverez (dans le fichier exception.log) l'erreur journalisée, ainsi que la page de message d'erreur que vous connaissez déjà (enregistrée comme fichier HTML dont le nom commence par exception-).

Recommentez la ligne // $this->configurator->setDebugMode(false);. Tracy active automatiquement le mode développement dans un environnement localhost et le désactive ailleurs.

Nous pouvons maintenant corriger l'erreur que nous avons introduite et poursuivre la construction de notre application.

Dire merci

Nous allons vous montrer une astuce qui ravira les auteurs open source. Vous pouvez facilement donner une étoile sur GitHub aux bibliothèques que votre projet utilise. Il suffit d'exécuter :

composer thanks

Essayez !