Page d'accueil du blog

Créons la page d'accueil qui affiche vos derniers articles.

Avant de commencer, vous devriez connaître au moins quelques bases du patron de conception Model-View-Presenter (proche de MVC) :

  • Model – la couche qui travaille avec les données. Elle est complètement séparée du reste de l'application. Elle ne communique qu'avec le presenter.
  • View – la couche front-end. Elle rend les données demandées à l'aide de templates et les présente à l'utilisateur.
  • Presenter (ou Controller) – la couche de liaison. Le presenter relie le Model et la View. Il traite les requêtes, demande les données au Model, puis les passe à la View.

Dans le cas d'une application simple comme notre blog, toute la couche modèle ne consistera qu'en requêtes de base de données : nous n'avons pas encore besoin de code PHP supplémentaire pour cela. Pour commencer, nous ne créerons donc que des presenters et des templates. Dans Nette, chaque presenter a ses propres templates, nous les créerons donc en même temps.

Créer la base de données avec Adminer

Pour stocker les données, nous utiliserons une base MySQL, car c'est le choix le plus courant chez les développeurs web. Si vous ne voulez pas l'utiliser, choisissez librement la base de votre choix.

Préparons la structure de la base qui stockera les articles de notre blog. Nous pouvons commencer très simplement, avec une seule table pour les articles.

Pour créer la base, nous pouvons télécharger Adminer, ou utiliser un autre outil de gestion de base de données que vous préférez.

Ouvrons Adminer et créons une nouvelle base nommée quickstart.

Créez une nouvelle table nommée posts et ajoutez-y ces colonnes :

  • id int, cochez autoincrement (AI)
  • title varchar, longueur 255
  • content text
  • created_at timestamp

Cela devrait ressembler à ceci :

CREATE TABLE `posts` (
	`id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
	`title` varchar(255) NOT NULL,
	`content` text NOT NULL,
	`created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB CHARSET=utf8;

Il est très important d'utiliser le moteur de stockage InnoDB. Vous en verrez la raison plus tard. Pour l'instant, choisissez-le simplement et cliquez sur Enregistrer.

Essayez d'ajouter manuellement quelques articles de blog d'exemple avant que nous n'implémentions l'ajout de nouveaux articles directement depuis notre application.

INSERT INTO `posts` (`id`, `title`, `content`, `created_at`) VALUES
(1,	'Article One',	'Lorem ipsum dolor one',	CURRENT_TIMESTAMP),
(2,	'Article Two',	'Lorem ipsum dolor two',	CURRENT_TIMESTAMP),
(3,	'Article Three',	'Lorem ipsum dolor three',	CURRENT_TIMESTAMP);

Se connecter à la base de données

Maintenant que la base est créée et que nous y avons quelques articles, il est temps de les afficher sur notre toute nouvelle page.

Nous devons d'abord dire à notre application quelle base utiliser. La configuration de la connexion se définit dans le fichier config/common.neon à l'aide du DSN et des identifiants. Cela devrait ressembler à ceci :

database:
	dsn: 'mysql:host=127.0.0.1;dbname=quickstart'
	user: *saisissez ici votre nom d'utilisateur*
	password: *saisissez ici le mot de passe de votre base*

Attention à l'indentation en modifiant ce fichier. Le format NEON accepte aussi bien les espaces que les tabulations, mais pas les deux à la fois. Le fichier de configuration par défaut du Web Project utilise des tabulations.

Injecter la connexion à la base de données

Le presenter HomePresenter, qui listera les articles, a besoin d'une connexion à la base de données. Pour la recevoir, nous utiliserons le constructeur, ainsi :

<?php
namespace App\Presentation\Home;

use Nette;

final class HomePresenter extends Nette\Application\UI\Presenter
{
	public function __construct(
		private Nette\Database\Explorer $database,
	) {
	}

	// ...
}

Charger les articles depuis la base de données

Récupérons maintenant les articles depuis la base et passons-les au template, qui rendra ensuite le code HTML. C'est à cela que sert ce qu'on appelle la méthode render :

public function renderDefault(): void
{
	$this->template->posts = $this->database
		->table('posts')
		->order('created_at DESC')
		->limit(5);
}

Le presenter a désormais une méthode render renderDefault(), qui passe les données de la base au template (la View). Les templates se trouvent dans app/Presentation/{NomDuPresenter}/{nomDeLaVue}.latte, dans ce cas le template est donc dans app/Presentation/Home/default.latte. Une variable nommée $posts, contenant les articles récupérés de la base, y est désormais disponible.

Template

Pour tout le site, nous avons un template principal (appelé layout, contenant l'en-tête, les styles, le pied de page, …) et des templates spécifiques à chaque vue (par exemple pour afficher les articles du blog), qui peuvent redéfinir des parties du template principal.

Par défaut, le template de layout se trouve dans app/Presentation/@layout.latte et contient :

...
{include content}
...

La balise {include content} insère un bloc nommé content dans le template principal. Nous définirons ce bloc dans les templates des différentes vues. Dans notre cas, nous modifierons le fichier Home/default.latte ainsi :

{block content}
	Hello World
{/block}

Cela définit le bloc content, qui sera inséré dans le layout principal. Si vous rafraîchissez de nouveau le navigateur, vous verrez une page avec le texte “Hello World” (dans le code source, avec aussi l'en-tête et le pied de page HTML définis dans @layout.latte).

Affichons les articles du blog : nous modifierons le template ainsi :

{block content}
	<h1>Mon blog</h1>

	{foreach $posts as $post}
	<div class="post">
		<div class="date">{$post->created_at|date:'F j, Y'}</div>

		<h2>{$post->title}</h2>

		<div>{$post->content|truncate:256}</div>
	</div>
	{/foreach}
{/block}

Si vous rafraîchissez votre navigateur, vous verrez la liste de vos articles. Elle n'est pas encore très élégante ni colorée, n'hésitez donc pas à ajouter de jolis styles CSS au fichier www/css/style.css et à les lier dans le layout :

	...
	<link rel="stylesheet" href="{$basePath}/css/style.css">
</head>
...

La balise {foreach} parcourt tous les articles passés au template dans la variable $posts et affiche un morceau de code HTML pour chacun. Elle se comporte exactement comme du code PHP.

La notation |date: s'appelle un filtre. Les filtres servent à mettre en forme la sortie. Celui-ci convertit une date (par exemple 2013-04-12) en une forme plus lisible (April 12, 2013). Le filtre |truncate tronque la chaîne à la longueur maximale indiquée et ajoute des points de suspension (…) à la fin si elle a été tronquée. Comme il s'agit d'un aperçu, il n'y a pas de raison d'afficher tout le contenu de l'article. Les autres filtres par défaut se trouvent dans la documentation, et vous pouvez créer les vôtres au besoin.

Encore une chose. Nous pouvons rendre le code précédent plus court et plus simple. Pour cela, nous remplaçons les balises Latte par des n:attributs :

{block content}
	<h1>Mon blog</h1>

	<div n:foreach="$posts as $post" class="post">
		<div class="date">{$post->created_at|date:'F j, Y'}</div>

		<h2>{$post->title}</h2>

		<div>{$post->content|truncate:256}</div>
	</div>
{/block}

L'attribut n:foreach enveloppe le bloc div dans une boucle foreach (cela fonctionne exactement comme le code précédent).

Résumé

Nous avons maintenant une base MySQL très simple contenant quelques articles. L'application se connecte à cette base et affiche une liste simple de ces articles dans un template.

  1. Documentation
  2. Créez votre première application !
  3. Page d'accueil du blog