Créez votre première application !

Apprenez à connaître Nette Framework tout en créant un simple blog avec des commentaires. Commençons !

Après les deux premiers chapitres, vous aurez votre propre blog fonctionnel et vous serez prêt à publier vos superbes articles, bien que les fonctionnalités soient assez limitées après avoir terminé ces deux chapitres. Pour rendre les choses plus agréables pour vos utilisateurs, vous devriez également lire les chapitres suivants et continuer à améliorer votre application.

Ce tutoriel suppose que vous avez terminé le document d'installation et que vous avez configuré votre outil avec succès. Il suppose également que vous comprenez la programmation orientée objet en PHP.

Veuillez utiliser PHP 8.1 ou plus récent. Vous pouvez trouver l'application complète sur GitHub.

La 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

La page d'accueil du projet Web devrait alors s'afficher. Essayez-la en ouvrant votre navigateur et en allant à l'URL 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 à y apporter des modifications.

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

Contenu du projet Web

Le projet Web a la structure suivante :

nette-blog/
├── app/              ← répertoire des applications
│   ├── Core/         ← basic necessary classes
│   ├── UI/           ← presenters, templates & co.
│   │   └── Home/     ← Home répertoire de présentateurs
│   └── Bootstrap.php ← classe de démarrage Bootstrap
├── bin/              ← scripts pour la ligne de commande
├── config/           ← les fichiers de configuration
├── log/              ← journaux d'erreurs
├── temp/             ← fichiers temporaires, cache, …
├── vendor/           ← bibliothèques installées par Composer
│   └── autoload.php  ← autoloading des bibliothèques installées par Composer
└── www/              ← dossier public - le seul endroit accessible depuis le navigateur
    └── index.php     ← fichier initial qui lance l'application

Le répertoire www est censé stocker les images, JavaScript, CSS, et autres fichiers accessibles au public. C'est le seul répertoire directement accessible depuis le navigateur, vous pouvez donc faire pointer le répertoire racine de votre serveur web ici (vous pouvez le configurer dans Apache, mais faisons-le plus tard car ce n'est pas important pour le moment).

Le répertoire le plus important pour vous est app/. Vous y trouverez le fichier Bootstrap.php, dans lequel se trouve une classe qui charge le framework et configure l'application. Elle active l'autoloading et configure le débogueur et les routes.

Nettoyage de

Le projet Web contient une page de bienvenue, que nous pouvons supprimer – n'hésitez pas à supprimer le fichier app/UI/Home/default.latte et à le remplacer par le texte “Hello world !”.

Tracy (Débogueur)

Un outil extrêmement important pour le développement est un débogueur appelé Tracy. Essayez de faire quelques erreurs dans votre fichier app/UI/Home/HomePresenter.php (par exemple, supprimez une accolade de la définition de la classe HomePresenter) et voyez ce qui se passe. Une page d'écran rouge apparaîtra avec une description compréhensible de l'erreur.

Tracy vous aidera considérablement dans la recherche des erreurs. Notez également la barre Tracy flottante dans le coin inférieur droit, qui vous informe sur les données d'exécution importantes.

En mode production, Tracy est, bien entendu, désactivé et ne révèle aucune information sensible. Toutes les erreurs sont enregistrées dans le répertoire log/ à la place. Essayez-le. Dans app/Bootstrap.php, trouvez le morceau de code suivant, décommentez la ligne et changez le paramètre d'appel de méthode en false, de sorte que cela ressemble à ceci :

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

Après avoir rafraîchi la page Web, la page d'écran rouge sera remplacée par le message convivial :

Maintenant, regardez dans le répertoire log/. Vous y trouverez le journal des erreurs (dans le fichier exception.log) ainsi que la page contenant le message d'erreur (enregistrée dans un fichier HTML dont le nom commence par exception).

Commentez à nouveau la ligne // $configurator->setDebugMode(false);. Tracy active automatiquement le mode de développement sur l'environnement localhost et le désactive ailleurs.

Maintenant, nous pouvons corriger le bogue et continuer à concevoir notre application.

Envoyer des remerciements

Nous allons vous montrer une astuce qui fera le bonheur des auteurs de logiciels libres. Vous pouvez facilement donner une étoile sur GitHub aux bibliothèques que votre projet utilise. Il suffit de l'exécuter :

composer thanks

Essayez-le !