Les balises conditionnelles dans les templates django

Dans la partie précédente, on a vu comment afficher des blocs HTML dans les templates en se basant sur d’autres fichiers templates mais au niveau du style, c’est pas trop ça.

Donc, on va faire du CSS !

Pour commencer, je vais tout centrer, car le contenu n’est pas centré sur la page de détail, ni pour les deux formulaires de la page de détail et de la page d’index.

Cela est dû à la propriété qui centre, qui est sur un ID existant uniquement dans le fichier index.html.

Centrer le contenu

Je vais déplacer cet ID au niveau global dans le fichier base.html. Je vais donc créer une balise <div> avec un ID que je vais mettre à container. Ensuite, dans le fichier index.html, je vais supprimer cet ID de la balise <div>. Avec ça, le formulaire de la page d’index est centré, mais aussi tous les éléments de la page de détail.

Gérer l’accès des utilisateurs

On a plusieurs autres problèmes. Déjà, notre application ne fonctionne que pour les utilisateurs connectés. Si on n’est pas connecté, on voit quand même le formulaire pour poster un message, mais si on essaie de poster un message sans être connecté, ça va générer une erreur.

On peut gérer ça en montrant le formulaire à l’utilisateur uniquement s’il est connecté. Pour ce faire, dans le fichier form.html, j’ajoute la balise Django {% if request.user.is_authenticated %} avec un else pour afficher un message à ceux qui ne sont pas connectés. Dans cette balise <div>, je vais mettre la phrase “Veuillez vous connecter” qui sera un lien pour se connecter à l’interface d’administration.

Améliorer le style du formulaire

Tant que j’y suis, je vais améliorer le style du formulaire. Sur la balise <form>, j’ajoute un ID égal à form_container. Sur l’input de type texte, j’ajoute un ID form_content, et sur le bouton pour poster notre message, j’ajoute un ID form_button. Pour la <div> qui affiche le texte d’invitation à se connecter, j’ajoute l’ID form_unauthenticated.

Une fois ces IDs ajoutés, je vais dans le fichier style.css pour ajouter des règles CSS. Pour le container, j’ajoute un display: flex; et un margin vertical de 1rem. Pour le content, je lui mets flex: 1; avec un margin-right de 1rem. Pour le bouton, j’ajoute un border-radius, une couleur, un padding, une couleur de texte, une épaisseur de texte, une bordure et je change le curseur en pointeur. Enfin, pour le message invitant à se connecter, je vais centrer le texte, ajouter une marge verticale, et mettre le texte en bold.

Vérification du style

Si on rafraîchit la page, on voit que le formulaire est un peu mieux visuellement. Si chez vous le style n’a pas changé, essayez de forcer le rafraîchissement avec Ctrl + F5. J’ouvre un navigateur en navigation privée et je vois que j’ai bien le bon message qui s’affiche.

Ajouter un avatar pour les utilisateurs

Maintenant, je vais m’occuper des messages dans le fichier message.html. Je vais ajouter un avatar pour les utilisateurs. Pour les images en Django, on peut soit ajouter un champ ImageField dans le modèle, soit mettre les images dans le dossier statique. Ici, je vais garder les choses simples et mettre une image unique pour mon utilisateur unique dans mon dossier statique. Je crée donc un dossier images dans le dossier statique et y ajoute une image.

Dans mon fichier HTML, je crée une balise <img> qui aura comme classe message_avatar, comme src une balise Django qui prend static et puis le chemin vers mon image. Je vais aussi mettre le nom d’utilisateur de la personne qui poste le message comme texte alternatif.

Redimensionner l’image et améliorer le style des messages

Pour que la balise statique fonctionne, on doit ajouter {% load static %} tout en haut du fichier. Ensuite, je vais ajouter du style dans mon fichier CSS pour redimensionner l’image. Je vais donner à la classe message_avatar des propriétés width de 64px, un border-radius de 4px, et un margin-right de 1rem.

En retournant sur le navigateur, on voit que nos messages n’ont plus de soulignage bleu et ont un effet quand on passe la souris dessus, avec l’image à gauche pour chaque message.

Gérer les espaces et les commentaires

Il reste un peu trop d’espace entre les messages, donc je vais dans le fichier style.css et j’ajoute margin: 0; pour la balise <hr>. Ensuite, je vais m’occuper des commentaires dans la page détail.html. J’ajoute des <div> et des classes pour structurer les commentaires, comme comment_container, comment_header, comment_username, et comment_content.

Pour le style, je vais donner à comment_container une marge verticale de 0.5rem et utiliser display: flex; pour le comment_header. Je veux que le nom d’utilisateur soit en bold et avec une marge sur la droite.

Améliorer le header

Pour finir, je vais améliorer la barre de header. J’ajoute un logo qui sera le nom de notre application, une couleur de fond, et des liens. Dans le fichier base.html, je mets une balise <header> autour de ma <nav> et j’ajoute un <h1> pour le titre de l’application, ainsi qu’une <div> avec l’ID header_container.

Je vais aussi afficher soit le nom d’utilisateur soit un lien pour l’inviter à se connecter. Pour cela, je vais vérifier si l’utilisateur est connecté avec request.user.is_authenticated.

Conclusion

Je vais ajouter du CSS pour le header, en mettant un fond qui correspond à l’interface d’administration de Django, une couleur de texte blanche, et en affichant les éléments horizontalement. Je mets display: flex;, align-items: center;, et justify-content: space-between; pour centrer les éléments.

Et voilà, en ajoutant margin: 0; pour le body, j’ai réglé l’espace autour du header. C’est tout pour ce tutoriel sur Django !

Vous connaissez maintenant les concepts essentiels pour pouvoir débuter et faire vos propres applications web en Python.