Écrivons notre première application !

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

Dès les deux premiers chapitres, nous aurons notre propre blog fonctionnel et pourrons publier nos superbes articles, bien que les fonctionnalités soient encore largement limitées. Vous devriez également lire les chapitres suivants, où nous programmerons l'ajout de commentaires, l'édition d'articles et enfin sécuriserons le blog.

Ce tutoriel suppose que vous avez lu la page Installation et préparé avec succès les outils nécessaires. Il suppose également que vous comprenez la programmation orientée objet en PHP.

Veuillez utiliser PHP 8.1 ou une version plus récente. L'application complète se trouve sur GitHub.

Page d'accueil

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 d'accueil du Web Project devrait déjà fonctionner. Essayons en ouvrant le navigateur à l'URL suivante :

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

et nous verrons la page d'accueil de Nette Framework :

L'application fonctionne et vous pouvez commencer à faire des modifications.

Si un problème survient, 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 nécessaires au fonctionnement
│   ├── Presentation/ ← presenters, templates & co.
│   │   └── Home/     ← répertoire du presenter Home
│   └── Bootstrap.php ← classe de démarrage Bootstrap
├── bin/              ← scripts exécutés depuis la ligne de commande
├── config/           ← fichiers de configuration
├── log/              ← journalisation des erreurs
├── temp/             ← fichiers temporaires, cache, …
├── vendor/           ← bibliothèques installées par Composer
│   └── autoload.php  ← autoloading de tous les paquets installés
└── www/              ← répertoire public - le seul accessible depuis le navigateur
    └── index.php     ← fichier initial par lequel l'application démarre

Le répertoire www/ est destiné au stockage des images, des fichiers JavaScript, des styles CSS et d'autres fichiers accessibles au public. Seul ce répertoire est accessible depuis Internet, alors configurez le répertoire racine de votre application pour qu'il pointe ici (vous pouvez le configurer dans la configuration d'Apache ou de nginx, mais faisons cela plus tard, ce n'est pas important pour l'instant).

Le dossier le plus important pour nous est app/. Nous y trouvons le fichier Bootstrap.php, qui contient la classe servant à charger l'ensemble du framework et à configurer l'application. L'autoloading y est activé, le debugger et les routes y sont configurés.

Nettoyage

Le Web Project contient une page d'accueil que nous supprimerons avant de commencer à programmer quoi que ce soit. Remplacez donc sans crainte le contenu du fichier app/Presentation/Home/default.latte par “Hello world!”.

Tracy (debugger)

Un outil extrêmement important pour le développement est l'outil de débogage Tracy. Essayez de provoquer une erreur dans le fichier app/Presentation/Home/HomePresenter.php (par exemple, en supprimant une accolade dans la définition de la classe HomePresenter) et voyez ce qui se passe. Une page de notification apparaîtra, décrivant l'erreur de manière compréhensible.

Tracy nous aidera énormément lorsque nous chercherons des erreurs dans l'application. Remarquez également la barre Tracy flottante dans le coin inférieur droit de l'écran, qui contient des informations sur l'exécution de l'application.

En mode production, Tracy est bien sûr désactivé et n'affiche aucune information sensible. Toutes les erreurs sont dans ce cas stockées dans le dossier log/. Essayons cela. Dans le fichier app/Bootstrap.php, décommentez la ligne suivante et changez le paramètre de l'appel à false, pour que le code ressemble à ceci :

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

Après avoir rechargé la page, nous ne verrons plus Tracy. À la place, un message convivial s'affichera :

Maintenant, regardons dans le répertoire log/. Ici (dans le fichier exception.log), nous trouverons l'erreur journalisée ainsi que la page déjà connue avec le message d'erreur (enregistrée sous forme de fichier HTML avec un nom commençant par exception-).

Commentez à nouveau la ligne $configurator->setDebugMode(false);. Tracy active automatiquement le mode développeur sur localhost et le désactive partout ailleurs.

Nous pouvons corriger l'erreur que nous avons créée et continuer à écrire l'application.

Envoyez un remerciement

Nous allons vous montrer une astuce qui fera plaisir aux 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 !