Implémenter l'affichage d'un article unique

Au cours de cette étape, nous allons créer une nouvelle route Flask avec une fonction d'affichage et un nouveau modèle HTML pour afficher les détails d'un article de blog à partir de son ID.

Avant d'entamer la réalisation de cette nouvelle tâche, veuillez penser à :

déplacer l'intitulé de la tâche dans la colonne « In progress »\
créer une nouvelle branche dans Git :
git checkout -b show-one-post

À la fin de cette étape, l'URL http://127.0.0.1:5000/1 sera une page qui affichera le premier article (parce qu'il a l'ID 1). L'URL http://127.0.0.1:5000/ID affichera l'article avec le numéro ID associé s'il existe.

Ouvrez app.py pour le modifier.

Comme nous souhaitons afficher un article de blog par son ID à plusieurs endroits plus tard dans ce projet, nous allons créer une fonction autonome appelée get_post().

Nous appellerons cette fonction get_post() en lui passant un ID afin de recevoir en retour l'article associé à l'ID fourni. Si l'article n'existe pas, nous afficherons le message 404 Not Found.

Pour répondre avec une page 404, vous devez importer la fonction abort() de la bibliothèque Werkzeug, qui a été installée avec Flask, en haut du fichier :

import mysql.connector
from flask import Flask, render_template
from werkzeug.exceptions import abort
from post import Post
. . .

Ensuite, ajoutez la fonction get_post() juste après la fonction get_db_connection() que vous avez créée à l'étape précédente :

. . .

def get_db_connection():

. . .

def get_post(post_id):
    myconn = get_db_connection()
    mycursor = myconn.cursor(dictionary=True)
    mycursor.execute('SELECT \* FROM post WHERE id =%s', (post_id,))
    row = mycursor.fetchone()  
    myconn.close()
    if row is None:
        abort(404)
    else:
        post = Post(row['id'], row['created'], row['title'], row['content'])
        return post
. . .

Notre nouvelle fonction get_post(post_id) a un argument post_id qui détermine quel article de blog doit être renvoyé.

À l'intérieur de la fonction, vous utilisez la fonction get_db_connection() pour ouvrir une connexion à la base de données et exécuter une requête SQL pour obtenir l'article de blog associé à la valeur post_id donnée. Vous ajoutez la méthode fetchone() pour obtenir le résultat et le stocker dans la variable post, puis fermez la connexion. Si la variable post a la valeur None, ce qui signifie qu'aucun résultat n'a été trouvé dans la base de données, vous utilisez la fonction abort() que vous avez importée précédemment pour répondre avec un code d'erreur 404 et la fonction terminera son exécution. Si toutefois, un article a été trouvé, vous retournez la valeur de la variable post.

Ensuite, ajoutez la fonction d'affichage suivante à la fin du fichier app.py :

. . .

\@app.route('/<int:post_id>')

def post(post_id):

post = get_post(post_id)

return render_template('post.html', post=post)

Dans cette nouvelle fonction de visualisation, vous ajoutez une règle de variable <int:post_id> pour spécifier que la partie après la barre oblique (/) est un entier positif (marqué avec le convertisseur int). Flask reconnaît cela et passe sa valeur à l'argument du mot-clé post_id de notre fonction de visualisation post(). Vous utilisez ensuite la fonction get_post() pour obtenir l'article de blog associé à l'ID spécifié et stocker le résultat dans la variable post, que vous passez à un modèle post.html que nous allons bientôt créer.

Tapez le code suivant dans ce nouveau fichier post.html. Celui-ci sera similaire au fichier index.html, sauf qu'il n'affichera qu'un seul article, en plus d'afficher également le contenu de l'article :

{% extends 'base.html' %}

{% block content %}

    <h2>{% block title %} {{ post.title }} {% endblock %}</h2>

    <span>{{ post.created }}</span>

    <p>{{ post.content }}</p>

{% endblock %}

Vous ajoutez le bloc title que vous avez défini dans le modèle base.html pour que le titre de la page reflète en même temps le titre de l'article qui est affiché dans un titre <h2>.

Enregistrez et fermez le fichier, puis stoppez le serveur Web (Ctrl + C) et redémarrez le : flask run

Vous pouvez tester notre page dans votre navigateur.

Vous pouvez maintenant naviguer vers les URL suivantes pour voir les deux articles que vous avez dans notre base de données, ainsi qu'une page qui indique à l'utilisateur que l'article de blog demandé n'a pas été trouvé (puisqu'il n'y a pas d'article avec un numéro d'identification de 3 pour l'instant) :

http://127.0.0.1:5000/1

http://127.0.0.1:5000/2

http://127.0.0.1:5000/3

En retournant à la page d'index, Nous ferons en sorte que le titre de chaque article renvoie à sa page respective. Nous ferons cela en utilisant la fonction url_for().

Tout d'abord, ouvrez le modèle index.html pour le modifier.

Changez la valeur de l'attribut href

remplacez \# par {{ url_for('post', post_id=post.id) }}

pour que la boucle for se présente exactement comme suit :

{% for post in posts %}
    <a href="{{ url_for('post', post_id=post.id) }}">
        <h2>{{ post.title }}</h2>
    </a>
    <span>
        {{ post.created }}
    </span>
    <hr>
{% endfor %}

Ici, vous passez « post » à la fonction url_for() comme un premier argument. C'est le nom de la fonction d'affichage post() et comme elle accepte un argument post_id, vous lui donnez la valeur post.id. La fonction url_for() renvoie l'URL appropriée pour chaque article en fonction de son ID.

Enregistrez et fermez le fichier.

Les liens de la page d'index fonctionneront désormais comme prévu. Vous avez maintenant terminé la construction de la partie de l'application responsable de l'affichage des articles de blog. Ensuite, nous allons ajouter à notre application Web la possibilité de créer, de modifier et de supprimer des articles de blog.