Apprendre Django en partant de Zéro - 1 heure de Tutoriel pour les Débutants en Python 2024

bienvenue dans cette formation Django dans laquelle on va apprendre à faire des sites et applications web avec python dans cette formation on va voir comment faire une application Django qui est un fil d'actualité comme vous pouvez retrouver sur la page d'index de la plupart des réseaux sociaux aujourd'hui mais avant de pouvoir commencer à suivre cette formation je vous conseille d'avoir un niveau minimum en python pas besoin d'un gros niveau mais il faut au moins comprendre les concepts de base sinon ça risque d'être compliqué de suivre d'ailleurs si vous voulez apprendre python j'ai une vidéo d'une

heure qui se trouve sur cette chaîne Youtube qui couvre tous les concepts essentiels dont vous aurez besoin pour pouvoir suivre cette formation en jongo vous devriez voir ir cette formation en python s'affichée à l'écran ou bien vous pouvez toujours la retrouver en description de cette vidéo aussi avoir deux trois bases en html css sera utile là encore vous trouver tout ce qu'il faut dans la description de cette vidéo et voilà c'est à peu près tout ce que vous devez savoir pour être capable de suivre cette vidéo mais avant de commencer je vais vous inviter à

vous abonner à cette chaîne pour ne pas rater la suite du développement de notre application en jongo et puis n'hésitez pas à poster des commentaires si vous avez des retours des remarques ou bien des questions concernant le code qu'on fait en Django ensemble donc commençons sans plus tarder pour nous simplifier la vie dans le développement de cette application Django on va utiliser un IDE alors si vous suivez cette chaîne vous avez pu voir que dans plusieurs de mes autres vidéos j'utilise Visual Studio code mais aujourd'hui pour changer on va prendre by charm son édition communautaire

gratuite pour l'entièreté du développement de cette application en Jango mais ce tutoriel n'est pas exclusif à pcharm vous pouvez évidemment choisir un autre éditeur de texte ou en ido si vous préférez ne pas utiliser pcharm donc pour télécharger pcharm rendez-vous sur son site officiel sur jetbrains.com/pcharm et puis cliquez sur le bouton Télécharger et descendez un peu sur la page pour trouver son édition communautaire grâ gratuite donc cliquez sur le bouton pour la télécharger en fonction de votre système d'exploitation et une fois téléchargé Lanz l'exécutable pour installer pcharm sur votre machine et une fois l'installation terminée

lancer pcharm pour pouvoir créer un nouveau projet donc on se retrouve sur cette fenêtre on va choisir de faire un nouveau projet en cliquant sur new project et là vous pouvez donner un nom à votre projet moi je vais simplement l'appeler projet django et puis vous pouvez aussi vérifier l'endroit où pcharm va installer vos projet Dango je vais laisser celui par défaut et ensuite vous voyez des options pour avoir un environnement virtuel vous devrez voir une version de Python s'affichée à l'heure où je tourne cette vidéo la dernière version de Python c'est la 3.12 et

on est à quelques mois de la version 3.13 donc si vous n'avez pas une version supérieure ou égale à 3.12 pensez à mettre python à jour sur votre machine donc vérifions une dernière fois qu'on a le nom qu'on veut le bon chemin et la bonne version de Python et puis on peut appuyer sur Create si tout s'est bien passé vous devriez vous retrouver sur la page d'éditeur de texte de pcharm avec en haut à gauche un dossier pointven qui est un dossier caché qui contient notre environnement virtuel la prochaine chose à faire c'est lancer un

terminal pour installer Django mais avant on va vérifier qu'on a la bonne version de Python qui est celle de notre environnement virtuel donc pour ça vous pouvez taper la commande PIP PIP étant le gestionnaire de paquet des modules python qu'on va installer donc faites PIP et puis TR ti version pour afficher la version de pipe faites entrer et vous verrez afficher la version de pipe mais ce qui nous intéresse surtout c'est le chemin vers le pipe qu'on va utiliser et ce que vous voulez voir c'est que comme moi PIP se situe bien dans notre dossier

dans le dossier caché van donc si vous avez bien suivi ces étapes PIP devrait être celui qui se trouve dans votre environnement virtuel et donc on va pouvoir installer Django et Django va être installé pas sur votre machine en entier mais juste dans l'environnement virtuel dans le dossier là donc pour installer Django faites PIP install Django et puis appuyer sur Entrer après quelques secondes Django sera installé sur votre machine et Dango nous donne accès à une nouvelle commande qui est django- admin dungo admin va nous servir à créer un nouveau projet donc pour ça on

tape django- admin tout collé espace start project et puis vous pouvez donner le nom que vous voulez à votre projet moi je vais l'appeler tutorial et on va pas appuyer sur Entrer tout de suite on va rajouter un point pour éviter une arborescence de fichier plus compliqué car si on met pas le point en fait djungo va nous créer un dossier donc moi j'appelle mon projet tutorial donc j'aurais eu mon projet de base projet django dans lequel j'aurais un dossier tutorial qui lui-même contiendrait un autre dossier tutoriel et je préfère une arborescence plus simple donc

veuillez bien avoir un espace et un point qui suit le nom de votre projet django appuyez sur Entrer et là vous verrez un nouveau dossier qui apparaît et aussi un fichier manage.py on va commencer par le contenu du dossier qui porte le nom de votre projet donc moi il s'appelle tutorial dedans il y a un premier fichier qui est vide et qui est le fichier init init ça sert simplement à dire à Python qu'il faut considérer ce dossier comme un module ensuite on a les fichiers asgi et WSGI qui sont utiles au déploiement on va

pas s'y intéresser pour le moment après il y a le fichier settings p settings contient toute la configuration de notre projet vous pouvez y voir une clé privée donc comme Django nous le dit en commentaire c'est une clé secrète qu'on utilise en production et qu'il ne faut absolument pas partager donc s'il y en a qui se demande pourquoi moi j'affiche ma clé secrète c'est simplement parce que cette application ne va jamais voir le jour en production mais si vous avez l'intention de passer votre projet en production un jour il faut que cette clé secrète reste

privée donc ne la partagez pas ensuite un peu plus bas on voit des applications qui sont installées on verra le concept d'application en Dongo un peu plus tard mais là on peut voir que jongo vient déjà avec plusieurs applications de base qui sont admin car jjongo possède une interface d'administration de base ça aussi on verra plus tard il bienent aussi avec une application d'authentification qui va nous permettre si on souhaite d'utiliser les méthodes et pages de jongo pour que les utilisateurs puissent s'enregistrer sur notre site et puissent se connecter ou régénérer un mot de passe

s'ils ont oublié le leur et jongo vient avec d'autres applications auxquelles on ne va pas s'intéresser pendant ce tutoriel ensuite un dans le fichier settings.p on voit qu'on a une configuration pour la base de données de base Jungo vient avec une base de données très simple qui est SQL Lite 3 et qui va nous permettre de faire tout ce qu'on veut en développement si vous voulez une base de données plus robuste ou avec plus de fonctionnalités comme postgress par exemple c'est ici que vous pourrez changer la configuration de votre ou vos bases de données si

vous en avez une pour les développement une pour staging et une pour production par exemple ensuite encore plus bas on a un language code qui est qui a comme valeur l'anglais américain de base si vous vous voulez changer la langue de votre projet et la mettre en français c'est ici que vous pouvez changer et mettre fr-fr pour la time zone on est en UTC de base si votre application venait à viser la France particulièrement vous pourrez mettre une time zone de région comme par exemple europe/pis et le fuseau horaire se mettrait sur l'heure de Paris

et voilà c'est tout ce qui nous intéresse dans le fichier settings et le dernier fichier de notre dossier qui moi s'appelle tutorials et urls.p et urls.p c'est la configuration générale des URL pour notre projet donc c'est ici qu'on va ramener toutes les URL de nos différentes applications on voit qu'on a déjà l'application admin qui a son chemin et qui vient par défaut avec Django donc on rajoutera à cette liste URL patterns nos chemins en fonction des différents fichiers URL qui se trouveront dans nos différentes applications et donc c'est tout pour le fichier URL et donc

on a un dernier fichier qui nous intéresse c'est manage.p celui-là on va pas le modifier et en fait il va nous permettre de ne plus devoir utiliser Django admin mais d'avoir une ligne de commande propre qu'on appellera en faisant Python manage.py et puis une sous-commande et si vous tapez juste python manage.py vous verrez déjà une liste de sous-commande et on va utiliser certaines d'entre elles d'ailleurs on va utiliser la première ensemble on va faire python manage.pie run Server et si tout s bien passé Jungo vous dit qu'il a commencé un serveur de développement sur l'URL

127.0.0.1 au port 8000 vous pouvez cliquer sur cette url pour qu'elle soit lancée dans votre navigateur ou bien simplement la copier et la coller dans votre navigateur et si tout s'est bien passé et que l'installation s'est déroulé avec succès vous arriverez sur cette page qui est d'ailleurs en français car dans le fichier settings on a changé la langue du projet en FR FRR et donc Django a déjà fait une partie des traductions notamment sur cette page et voilà c'est tout pour la configuration de base de notre projet django maintenant on a toutinaller pour commencer à

créer des applications le concept d'application en Django c'est très simple vous pouvez voir ça comme sur votre téléphone vous avez le projet qui est le système d'exploitation iOS ou Android sur lequel on vient installer des applications d'un point de vue plus web on peut prendre facebook facebook c'est pas seulement un fil d'actualité c'est aussi une Marketplace une application de rencontre une application pour les vidéos et puis Messenger il y a Facebook gaming les événements et cetera et cetera en gardant l'exemple de Facebook nous ce qu'on va faire ensemble c'est une application similaire à leur mur

c'est-à-dire un fil d'actualité et l'avantage c'est qu'après si on fait d'autres sites qui nécessitent d'avoir un fil d'actualité on pourra prendre le dossier de notre application et simplement le mettre dans un autre projet django pour pouvoir le réutiliser rend donc Django composable ou modulaire dans le but de pouvoir réutiliser du code donc pour commencer à créer une application on se retrouve dans le terminal d'abord si votre serveur de développement tourne toujours python vous dit que vousz faire un contrôle C pour envoyer un signal d'interruption et fermer votre serveur donc faites le raccourci contrôle C peu

importe votre système d'exploitation et on va taper python manage.py start app et puis le nom de notre application moi je vais appeler mon application feed appuyez sur Entrer et vous verrez un nouveau dossier qui s'est créé à côté de celui de votre projet qui est le nom de votre application dans ce dossier d'application on a un dossier pour les migration le dossier migration c'est un dossier qui va comprendre des fichiers qui sont des formes de patch pour passer d'une version à une autre dans notre base de données ça veut dire que chaque fois qu'on va

créer des nouveaux modèles ça va créer des nouvelles tables en base de données chis qu'on va les modifier potentiellement on va modifier les champs mais on peut aussi modifier les données en faisant des scripts Python qui lisent les objets déjà existant dans la base de données et qui les modifie le fichier init est toujours le même il est vide et c'est pour dire à piton considérer notre dossier feed comme un module admin.py c'est un fichier qui va nous permettre de modifier l'interface d'administration pour cette application donc on va voir ensemble en quoi consiste cette fameuse

interface d'administration qui vient de base avec Django et on verra aussi comment la modifier apps.py c'est un fichier qui contient la configuration de votre application mais on va pas s'y intéresser pendant ce tutoriel model c'est donc un fichier python dans lequel on va créer des classes qui deviendront des tables en base de données et dans ces classes on va définir plusieurs attributs qui deviendront des champs en base de données avec des règles qu'on veut test c'est pour écrire des tests unitaires et views ça va nous permettre de gérer les requêtes HTTP qui viennent et de

fournir la bonne réponse donc chaque fois que l'utilisateur va faire une requête c'est views qui va gérer la requête HTTP et qui va gérer ce qu'il doit afficher pour l'utilisateur donc dans notre application on va vouloir que views chaque fois qu'un utilisateur connecté arrive sur notre page ça récupère les informations qu'il doit avoir dans son fil d'actualité et voilà c'est tout ce qui compose d'une application Django de base donc on va commencer à remplir le fichier views mais avant de commencer à implémenter la première fonction dans views on doit ajouter dans settings notre application si

on ne le fait pas maintenant on va avoir des erreurs plus tard comme par exemple quand on voudra importer des fichiers statiques CSS JavaScript et cetera et aussi quand on voudra utiliser nos template HTML servi par views donc dans settings.py en dernière position de la liste installed apps on va ajouter le nom de votre application moi je vais ajouter donc feed et maintenant que c'est fait on va pouvoir se rendre dans le fichier views.py dans dans lequel on va implémenter une première fonction pour ça je vais simplement l'appeler index pour commencer donc je vais faire

def index et les fonctions de views prennent en paramètre une variable qui est request request étant la requête HTTP que notre fonction views doit gérer donc dans cette fonction je vais écrire un return directement je vais return la fonction render qui prend paramètre request un nom de template que je vais appeler index.html et un contexte qui est pour le moment un objet vide donc request c'est la request qu'on a pris en paramètrre le nom de template c'est le fichier HTML qu'on va servir à l'utilisateur quand on passe dans cette fonction de views les templates de

notre application ils vont vivre dans un dossier qui s'appelle templates et il faut créer ce dossier donc on va créer un dossier templates au pluriel dans lequel on va créer un fichier HTML qui sera index.html donc dans les fichiers HTML de Djongo on utilise de l'HTML amélioré qui est en fait un langage de balisage c'est le DTL ou djengo template language dans lequel on va pouvoir utiliser des balises qui vont nous permettre d'afficher la valeur de variable mais aussi d'avoir des structures de contrôle comme des boucles for des conditions if de faire des imports externes

et plein d'autres choses donc pour le moment dans le fichier index.html on va juste insérer tous les messages du feed pour ça on va mettre entre double accollade le nom d'une variable qui est la variable message au pluriel vous pouvez sauver le fichier HTML et maintenant on va retourner dans views cette variable message doit exister dans le contexte pour le moment on a un contexte qui a un objet vide donc on va créer une nouvelle variable qui s'appelle contexte qui est un objet qui possède une clé message au pluriel c'est le message qu'on va retrouver

dans notre fichier HTML et commençant à remplir le contenu de message en créant une liste Python qui contient plusieurs objets pour le moment on va en créer seulement un et pour commencer on va donc dans cet objet créer plusieurs clés qui sont content pour le message à proprement parler donc on va écrire test ensuite ce message qui apparaît dans feed aura un utilisateur donc on va mettre USERNAME dans lequel on va écrire votre nom d'utilisateur moi je vais écrire comment coder et puis on aura une clé pour le temps de la création pour ça pour

le moment je vais mettre datetime. now DateTime c'est un module Python qui nous permet de gérer la date et le temps comme son nom l'indique et pour avoir ça tout en notre fichier je vais faire un form de Time import date time donc maintenant on doit faire une dernière chose qui est modifier la valeur du paramètre contexte dans notre fonction render remplacer l'objet vide par contexte et sauver votre fichier une dernière chose qu'on do faire pour afficher le rendu de notre fonction c'est de définir l'URL sur laquelle il faudra aller pour voir le résultat de

la fonction View pour ça pour garder les choses simples pour le moment on va retourner dans le fichier urls.py de notre projet et on va ajouter un nouveau chemin pass qui sera l'URL de base ça veut dire quand on se rend sur l'URL 127.0.0.1 port 8000 donc dans la liste URL patterns tout au dessus on va ajouter un pass qui prend deux paramètres vous pouvez vous baser sur le Pass d'admin juste en dessous à la place d'admin/ash on va simplement ouvrir les guillemets et les fermer et puis la fonction qu'on lui passe ça sera notre

fonction index qu'on vient de créer dans le fichier views de feed donc on va mettre index et puis finalement on doit importer index donc en dessous des deux imports qui existent déjà on va ajouter le nôtre en faisant fromfeed.views import index et maintenant relancez votre serveur de test si c'est nécessaire sinon s'il tourne toujours vous pouvez vous rendre sur 127.0.0.1 port 8000 et là vous devriez voir une page qui contient une liste avec notre objet qu'on a créé dans views.py s'il y a un problème et que vous voyez ça c'est certainement une de ces deux

choses soit il faut terminer le serveur et le lancer pour que jongo comprenne qu'il y a une nouvelle application soit vous devez aller dans settings.pie et vérifier que dans installed apps vous avez bien le nom de votre application qui est tout en dernier donc si votre application se trouve bien dans la liste installed apps relance c'est votre serveur de développement et là retourner sur la page et cette fois-ci ça devrait fonctionner maintenant qu'on a notre projet et notre application feed qui fonctionne on va voir comment est plus loin dans les templates donc on a un

template HTML qui affiche une liste de messages et si on se rend sur la page d'index de notre site ça donne ça et puis dans le fichier views.py on a une variable contexte qui est un objet qui a une clé message qui contient une liste de messages qui sont eux-mêmes des objets avec des clés content username et created ad donc la première chose qu'on va faire c'est copier-coller cet objet pour pouvoir la afficher plusieurs fois sur la page une fois qu'on a fait ça on va se rendre dans le fichier index.html et dans ce fichier

pour le moment on affiche message au pluriel mais ça serait bien qu'on puisse boucler sur cette liste et on peut justement faire ça avec une boucle fort donc c'est le moment de voir un deuxième type de balise en jongo on a déjà vu les doubles accolad qui permettent d'afficher du contenu comme des variables des blocs HTML ou des valeurs brutes d'ailleurs on a déjà utilisé ce type de balise pour afficher le contenu notre variable message maintenant on va voir l'autre type de balise Django qui est àolade pourcentage et qu'on va utiliser quand on a besoin

de logique dans notre code donc que ça soit soit pour faire des imports soit des structures de contrôle comme des conditions avec if et ce qui va nous intéresser maintenant des boucles fort donc les boucles forts en html avec Django fonctionnent comme les boucles forts en Python et on les écrit comme ça on les met entreacolade et signe pourcentage et on veut boucler sur notre liste de messages donc on fait fort message au singulier in message au pluriel et puis petite spécificité on doit fermer le bloc for avec la même structure acolade parenthèse mais en

écrivant for et donc à l'intérieur de ce nouveau bloc qu'on a créé entre ces deux balises for et n for on a maintenant accès à une nouvelle variable message au singulier dont on peut afficher le contenu en utilisant les doubles accolad et donc à chaque passage de la boucle on affichera les différents éléments de notre liste on va commencer par créer une div qui va servir de container et puis dedans on aura trois div pour chacun des éléments content username et created at dans ces div on va afficher entre double accolade donc message content pour

le premier élément de l'objet puis message username et finalement message.cated at maintenant on peut supprimer notre ancienne variable message au plurel si vous ne l'avez pas encore fait qui se trouve audessus de notre fichier et quand on rafraîchit la page on voit qu'on a les trois messages qui s'écrivent les uns à la suite des autres avec des retour à la ligne là c'est le moment de faire un peu de CSS pour mettre ça en forme donc le but c'est pas de faire quelque chose de joli maintenant c'est juste de pouvoir mieux s'y retrouver avec les

différents objets et éléments qu'on affiche dans notre page avec Django d'ailleurs tant qu'on y est si vous ne voulez pas vous prendre la tête avec cette partie frontaine de jongo vous trouverez un lien vers les sources du projet en description de cette vidé vidéo et je vous mettrai un lien direct vers les fichiers HTML et CSS que je vais utiliser comme ça vous pouvez simplement les copier-coller pour avoir un fichier CSS fonctionnel on doit faire quelque chose de propre à Django qui est la notion de fichier statique le dossier statique va nous permettre d'avoir des

fichiers statiques comme du CSS des fichiers Javascript et des images donc pour faire ça créer un nouveau dossier en faisant clic droit sur le dossier feed faites créer un nouveau dossier et appelez-le staticque S a t I c et puis dans ce dossier je vais créer un autre dossier que j'appelle CSS et qui contiendra lui-même un fichier que je vais appeler style.css alors si j'ai insisté sur le nom du dossier comme étant statique c'est parce que de base Django va chercher tous les dossiers avec ce nom dans ses différentes applications et vous pouvez d'ailleurs retrouver

ça dans le fichier settings de votre projet si vous allez vers la fin du fichier vous trouverez une variable statique URL qui a la valeur statique de base si vous changez ce nom de variable alors il faudra changer le nom de vos dossier statique dans chacune des applications et d'ailleurs pour que jjongo puisse repérer notre nouveau fichier et notre dossier statique on doit redémarrer le serveur donc on va le faire maintenant avant de continuer donc faites contrôle C et puis relancer votre serveur avec python.py manage.p run Server une fois que votre serveur est relancé ouvrez

le fichier style.css et on va voir si ça fonctionne bien en ajoutant une règle CSS globale pour toutes les balises HTML en faisant étoile acolade font family Verdana d'ailleurs je vais en profiter pour ouvrir ce fichier style.css à droite de mon IDE et avoir mon fichier HTML à gauche mais pour que ça fonctionne on doit faire une dernière chose qui est que dans le fichier HTML on doit importer le fichier CSS et pour faire ça on va utiliser une Palise logique Django qui va permettre de charger le dossier statique donc tout en haut de votre

fichier faites accolade pourcentage load statique et puis fermer en faisant pourcentage et acolade ferm et puis on va faire une balise link avec un attribut rel qu'on va mettre à Style Sheet un attribut type qu'on va mettre à text/css et puis dans href encore une fois on va passer quelque chose particulier à Django on ouvre les doubles guillemets puis on fait accolade pourcentage espace statique espace simple àollade et puis le chemin vers votre fichier style.css donc moi ça va être css/style.css et puis il faut fermer les simples guemets fermer la balise dungo avec pourcentage acolade

fermente et puis les doubles guemets pour la valeur de l'attribut href et finalement notre balise HTML link donc maintenant on peut rafraîchir la page et si tout a bien fonctionné vous devriez voir une fonte différente qui est Verdana et vous pouvez vérifier ça en sélectionnant du texte et puis en faisant clic droit inspecter l'élément et là dans vos attributs CSS vous devriez voir font family Verdana maintenant qu'on a un dossier statique et un fichier CSS qui sont fonctionnels on va voir comment on va afficher notre fil d'actualité dans la plupart des sites qui ont des

fils d'actualité on va souvent retrouver en haut une barre avec leur logo et deux trois liens rapides pour se connecter par exemple puis au milieu de la page on va avoir d'abord un encart pour créer un nouveau poste qui sera suivi de tous les messages avec souvent un scroll infini et puis sur la gauche on aura un menu plus complet et sur la droite on aura des recommandations et des pubs pour le moment on va juste s'occuper de la partie avec tous les posts et donc pour ça je vais retourner dans mon fichier HTML et

je vais mettre ma boucle for entre div et C div je vais lui ajouter un ID qui sera container et maintenant dans mon fichier CSS je vais ajouter une règle CSS en faisant di container ou hashtag container avec les attribut with de 700 px et margine auto maintenant je rafraîchis la page et je vois que le contenu est bien centré ensuite j'aimerais bien avoir le USERNAME et la date sur la même ligne au-dessus du contenu de message donc je vais changer l'ordre de mes balises en mettant d'abord content en bas des deux autres et puis

mes deux div qui contiennent username et created at je vais les mettre ell-même dans un nouveau div et à ces div je vais ajouter la classe message header créer du style pour message header en lui donnant un attribut display à flex pour que ses enfants s'affichent sans retour à la ligne maintenant que c'est fait je vais retourner dans mon fichier HTML et ajouter des noms de classe pour username created at et content donc je vais faire class message username class message created et class age content et puis en CSS je vais mettre pour message username

une font weight à bold et un margin right de 0.5 rè pour avoir un peu d'espace entre le nom d'utilisateur et la date je vais aussi mettre message created at avec une couleur un peu moins sombre et donc je vais mettre color # 42 42 42 et content avec une taille un peu plus élevée disons un point de REM et puis je veux aussi un padding vertical pour content donc je vais mettre 0.5 REM 0 par exemple rrchons la page pour voir ce que ça donne ok donc une dernière chose que j'aimerais faire c'est séparer

mes messages par des lignes verticales donc je vais utiliser une simple balise HR que je mets en fin de boucle là elle est un peu trop sombre à mon goût donc pour que ce soit un peu plus doux je vais retourner dans mon fichier CSS et je vais lui ajouter une border top en faisant HR border top un px solide # 84 8484 avec une opacité de 10 et voilà c'est tout ce que je vais faire en CSS pour le moment le but c'est pas de faire quelque chose de joli pour l'instant c'est juste de

pouvoir mieux s retrouver visuellement pour pouvoir continuer sur le le projet et donc la prochaine étape c'est de créer des objets en base de données grâce au modèles les modèles sont des classes qui représentent des tables en base de données donc pour nos messages on va avoir une classe message qui représente un message en base de données cette classe message va avoir des attributs qui seront ses champs en base de données et donc on peut créer notre modèle message en allant dans le fichier models.py puis en faisant class message qui va hérité de models. mododel

que je mets entre parenthèses et puis voyons de quoi est composé un message pour normalement dans nos messages on a un contenu content qui est du contenu textuel on a aussi une date avec created AD et puis un nom d'utilisateur avec username on va donc créer quelque chose de similaire et donc on veut un attribut content pour lequel on veut un champ de type texte qui a une longueur maximum de 280 caractères par exemple pour ça on veut utiliser un champ de Jungo qui s'appelle le charfield à qui on peut passer une longueur maximum de

28 avec le paramètre max lengs donc déclarons l'attribut on fait content ég models point charfield et on lui passe en paramètrre entre parenthèses max Leng = 280 ensuite pour la date on va utiliser un champ spécifique pour les dates et le temps qui est date time donc on fait un deuxième attribut qui est created at et on lui assigne la valeur models.datetime field et on veut que la date se remplisse automatiquement à sa création ce qu'on peut faire avec un paramètre qui s'appelle auto no add et il suffit simplement de le mettre à trou donc

maintenant à chaque fois qu'on va créer un nouvel objet dans message jjongo va lui assigner une date automatiquement sans qu'on doit faire quoi que ce soit et finalement le troisième attribut qu'on veut c'est un nom d'utilisateur car on va vooir quelque chose de similaire à ce qu'on a déjà username alors là on pourrait se dire qu'on a un chant texte avec un pseudo qu'on met dedans mais ce qui serait mieux ce serait de lier un message à un utilisateur qui existe déjà plutôt que juste mettre du texte et donc on aurait une table utilisateur avec

ses propres champs comme un prénom un nom de famille un USERNAME et cetera et on ferait juste une forme de lien entre les deux message et user pour les relier et bien ça Tom bien parce que Dango vient déjà avec son implémentation du modèle user de la même manière que nous on a fait un modèle message Dango possède son propre modèle pour les utilisateur et on peut lier ces deux modèles avec une clé étrangère ou FOREIGN KEY pour faire ça on fait donc notre troisème attribut de classe message user à qui on assigne l'objet models.forign

key et on va lui passer entre parenthèses en paramètrre le modèle user de jongo pour avoir accès au modèle user de Djongo on doit simplement l'importer donc en haut de notre fichier on va faire jungo.crib.hos.models import user schématiquement ça fait qu'en base de données on a une table message qui a des champs content created at et user et user est une forme de lien vers une autre table la table user de Django maintenant une dernière chose qu'on doit ajouter c'est de dire ce qui va se passer si un utilisateur qui a des messages est supprimé

car imaginons qu'on a plusieurs messages qui pointent vers un utilisateur qu'est-ce qu'on fait quand cet utilisateur est supprimé on peut soit dire que les messages continuent d'exister mais l'utilisateur n'existe plus et on met par exemple que l'utilisateur a été supprimé ou bien une autre option c'est quand un utilisateur est supprimé on supprime tout le contenu qu'il a créé donc dans ce cas-là on supprimerait l'utilisateur et en cascade on supprimerait tous ces messages je vais choisir la deuxème option et supprimer tous les messages d'un utilisateur quand il se fait supprimer lui-même et donc en paramètrre on

met ON DELETE = models.cascade en majuscule et voilà c'est tout ce qu'on doit faire pour le moment dans notre fichier models maintenant on doit à Django d'aller dans nos modèles et de créer ces tables en base de données ce qui va nous permettre de découvrir un nouveau concept en Django les migrations donc peut-être que certains d'entre vont remarquer mais à chaque fois qu'on lance un serveur de développement on a un message en rouge qui nous dit qu'on a 18 migrations non appliquées dont admin host content types et sessions host par exemple c'est là où vit

notre modèle utilisateur donc maintenant on en a besoin pour appliquer ces migrations on va simplement taper une sous-commande de manage.p en faisant python manage.p my là appuyer sur entré et on voit plein de OK et Django nous dit que tout s'est bien passé mais vu qu'on a nous-même créé une table message on doit aussi faire notre migration et il y a une sous-commande pour ça make migrations donc on va taper python manage.py make migrations et là jjongo a bien remarqué qu'on a créé un modèle message si on lance notre serveur on voit maintenant qu'on a

une seule migration non appliquée la nôtre celle de message et donc on va faire un migrate pour l'appliquer mais avant voyons ce que la sous-commande mais ve migration a fait pour ça on se rend dans le dossier migrations de notre application feed et on voit qu'on a un nouveau fichier Python qui va appliquer des changements à notre base de données pas besoin de toucher à ce fichier mais en lisant son contenu on voit qu'on a une liste d'opérations qu'il va effectuer et donc l'opération qui nous intéresse c'est qu'il va créer un modèle donc une table

en base de données avec différents champs dont un identifiant ID qui vient automatiquement donc maintenant on peut retourner dans le terminal et pour appliquer cette migration on doit donc couper notre serveur et faire de nouveau Python manage.p migrate on voit que Django a correctement appliqué notre migration et on voit toujours un ok en vert donc maintenant voyons comment créer un nouveau message comme un message est rattaché à un utilisateur on doit d'abord créer un utilisateur donc comme je vous l'ai dit à plusieurs reprises Django vient avec plus de fonctionnalités comme par exemple un panneau d'administration

et un système d'auutentification et on va justement s'en servir maintenant donc on va créer des messages via l'interface d'administration Django et si vous retournez dans votre terminal et que vous relancez votre site puis que sur votre site vous vous rendez sur/ash admin vous z une interface qui vous demande de vous connecter et pour créer un administrateur dans Jango on va passer par une autre sous commommande create Super User donc retourner dans votre terminal ferme votre serveur et puis tapez python manage.py create Super User Django nous demande un nom d'utilisateur moi je vais mettre comment coder

puis dans adresse email c'est optionnel moi je vais rien mettre et puis dans mot de passe je vais mettre un mot de passe pas très sécurisé pour me connecter facilement si j'étais en prod je mettrai un mot de passe beaucoup plus complexe évidemment et VO voilà maintenant j'ai un nouveau compte administrateur je peux relancer mon serveur aller sur http 2.2/127.0.0.ort8000/admin et là je vais rentrer mes nouveaux identifiants donc comment coder et puis le mot de passe que je viens de créer là j'ai une nouvelle interface que je découvre et je vois que je peux interagir

avec des utilisateurs et des groupes dans utilisateur on voit que j'ai bien mon utilisateur que je viens de créer comment coder et si on clique dessus on voit qu'on a plein de détails sur cet utilisateur donc c'est bien on a un panneau administration pour nos utilisateurs mais ça serait bien de pouvoir aussi modérer et administrer nos messages depuis cette interface et donc pour avoir accès au modèle qu'on a créé dans cette interface d'administration comme le modèle message qu'on vient de créer il suffit de l'enregistrer dans le fichier admin de notre application donc retourner dans votre

IDE et dans le fichier admin.py et puis pour enregistrer notre modèle message dans le site d'administration on va taper admin.site.register à qui on passe en paramètres notre modèle message et donc pour avoir accès à notre modèle message il faut pas oublier de l'importer en faisant fromfeed.models import message et donc là retournons sur notre site sur/ash admin rafraîchissons la page et la magie on a une nouvelle section message qui vient d'apparaître rendez-vous dedans et appuyer sur le bouton pour créer un nouveau message on voit qu'on a un champ texte pour écrire du contenu donc tapons Hello

World et puis on a un champ pour choisir un utilisateur et pour le moment j'ai juste un utilisateur comment coder on peut aussi voir que le champ created at n'apparaît pas c'est parce qu'on a dit à Django de le remplir automatiquement quand on crée un message et donc pas besoin de le modifier depuis cette interface et donc Django ne nous l'affiche pas mais il existe bien et on pourra le récupérer quand on récupère tous nos messages faites sauver et là sur la page où on voit tous les messages on voit qu'on a un message object

avec un id de 1 ça n dit pas grand-chose sur son contenu ni son utilisateur ça serait bien de pouvoir modifier cette page pour avoir plus de détails et vous vous en doutez sûrement mais on peut faire ça en modifiant simplement de nouveau le fichier admin.py donc rendez-vous de nouveau dans le fichier admin.py et là notre fonction admin.site.register qui prend notre modèle en paramètres on peut aussi lui passer un deuxième paramètre dans lequel on va définir à quoi ressemble notre interface d'administration pour ce modèle donc pour le moment on va garder les choses simples en

affichant juste les détails de notre page avec message pour ça on va ajouter une classe que je vais appeler message admin en faisant classe message admin et cette classe hérite de admin.model admin dedans on va lui passer un attribut qui sera list bar en bas display pour définir ce qu'on veut afficher et donc ce sera une liste dans laquelle on va mettre les chaînes de caractèrees content et user et pour finir on doit passer notre nouvelle classe message admin en second paramètre de admin.site.register voilà retournons sur le site d'administration rafraîchissons la page et maintenant on

a bien deux colonnes avec le contenu du message et le nom d'utilisateur pour chaque message pour continuer on va voir comment afficher ces messages directement sur la page d'index de notre site car pour le moment on triche un peu en les mettant en dur dans le fichier views.py alors que ce qu'on veut en fait c'est les récupérer en base de données pour les afficher et aussi à terme pouvoir en créer des nouveau maintenant on va voir comment afficher des éléments en base de données dans nos pages HTML en les passant par les vues pour récupérer

des objets en base de données et les afficher sur des pages on doit se rendre dans le fichier views.py une fois dedans supprimons nos messages codés en dur qu'on a mis dans le contexte et on va juste recréer une variable contexte qui contient un objet vide avec acolade ante acolade ferment maintenant on va remplir cet objet contexte avec les messages qu'on a en base de données on va d'abord commencer par importer notre modèle message en faisant from feed models import message puis on va remplir le contexte avec une clé message en faisant contexte de message

égal et là on va se servir de l'ORM de Django ORM ça veut dire Object Relational ma peur et expliquer simplement ça va nous permettre d'interagir avec les tables dans notre base de données sans faire de SQL donc pour récupérer tous les messages on va écrire message.objects.all et puis ouvrir et fermer les parenthèses et la traduction de ça c'est je veux récupérer tous les objets de la table message et là rendez-vous dans votre navigateur sur la table d'index de votre site et si tout s'est bien passé vous verrez le message Hello World qui s'affiche correctement

on a cependant un problème username le nom d'utilisateur n'existe plus pour ça rendez-vous dans votre fichier index.html qui se trouve dans le dossier templates et à la place de message.username mettez message.user.username car username n'existe plus directement mais il existe à l'intérieur de l'objet user rafraîchisser la page et le nom d'utilisateur devrait s'afficher correctement une note en passant on aurait pu mettre directement message.user car en fait Django va représenter le modèle user par quelque chose de lisible par les humains et sa représentation d'un user en fait c'est le champ username mais en gardant message.user.username on est

plus explicite et on sait exactement ce qu'on veut c'est-à-dire username ça veut aussi dire que si je complète mon utilisateur ce qu'on va faire par exemple en allant sur slash admin et puis dans utilisateur je vais choisir mon utilisateur comment coder et je vais lui mettre un prénom Thomas et puis je vais sauver mon objet maintenant je peux retourner dans mon fichier HTML etchanger message.user.username en message.user.firstname et maintenant quand je rafraîchie ma page j'ai bien mon prénom Thomas qui s'affiche mais bon nous on veut le nom d'utilisateur donc dans notre fichier HTML on va changer

message.user.firstname par message.user.username ou bien simplement message.user mais bon moi je vais garder message.user.username donc là on a un seul message en base de données et qu'est-ce qui se passe quand on en a plusieurs si j'ajoute un nouveau message en passant par l'interface d'administration dans message et puis je clique sur le bouton pour créer un nouveau message je vais mettre en contenu deuxième message et toujours choisir mon éutilisateur comment coder puis je vais sauver l'objet et en rafraîchissant ma page d'index je vois que mon deuxième message s'est mis à la suite du premier juste en dessous

et moi je voudrais l'ordre inverse avec le plus récent d'abord et on peut changer ça dans le fichier views.py donc dans le fichier views plutôt que faire un message.objects. pour récupérer tous les objets de message je vais changer le H en order byy et je vais ORDER BY date created at inversé donc je passe en paramètre la string moins created at created at veut dire qu'on va trier par created ad qui est le champ date time qu'on a choisi et le moins permet d'inverser cet ordre naturel donc maintenant je rafraîchis ma page et j'ai bien

l'ordre inversé avec le message du plus récent au plus ancien maintenant c'est bien d'avoir ça mais pour le moment on doit créer des messages dans l'interface d'administration ça serait mieux de faire qu'un utilisateur connecté puisse créer directement un message depuis la page d'index et c'est ce qu'on va voir maintenant pour récupérer ce que l'utilisateur tape sur la page d'index on doit d'abord créer les éléments en html donc rendez-vous sur la page index . HTML dans le dossier templates et puis on va créer de quoi récupérer un nouveau message donc commencez par faire une balise HTML

form qui aura action qu'on va mettre à slash entre double guillemets et puis dans méthode on va mettre post dans cette balise forme on va créer deux balises input donc notre première balise input on va lui mettre le type texte et là important il faut donner des noms aux input qu'on veut récupérer avec jongo donc on va lui donner un attribut name qui sera qu' content ensuite on va faire la deuxième balise input qui sera lelle de type submit avec la valeur postée donc value ég poster ça va nous servir de bouton qui aura un

texte posté et quand on clique dessus ça valide notre forme et on va voir ce qui se passe maintenant on veut récupérer le contenu du message quelque part pour le sauver en base de données et c'est encore une fois dans le fichier views que ça se passe car le fichier views gère toutes nos requêtes HTML donc retourner dans views.py et on va faire quelque chose de spécifique quand on a une méthode POST dans la fonction index on va créer une condition en début de fonction qui est que si la méthode est post on fait quelque

chose de particulier donc on peut traduire ça en if request.method est égal à post entre guillemets on va d'abord récupérer le Content récupérer le user et puis créer un nouveau message en lui passant content et user pour récupérer le Content donc notre message texte on doit le récupérer dans request.post avec la méthode GET donc faites content é= request.post en majuscule.get et là on va get content et c'est pour ça que je vous avais dit de faire attention à bien ajouter un attribut name à vos balises input car content c'est le name que vous avez donné

à votre balise input qui est dans votre forme HTML ensuite user se trouve aussi dans l'objet request et il est géré par Django donc on peut faire user = request.user avant d'écrire la ligne de code pour créer l'objet et le sauver en base de données on va vérifier qu'on récupère bien les bonnes valeurs et qu'on a pas d'erreur donc je vais faire un print de content et de user et puis je vais retourner sur mon navigateur sur la page d'index et là je devrais avoir un formulaire sans style je vais l'utiliser pour taper test et

puis cliquer sur le bouton poster mais là j'ai une erreur qui me dit qu'il me manque un token CSRF alors le token CSRF c'est pour cross site request forgery qui est un token qui va permettre d'authentifier qu'on vient bien de mon site pour éviter qu'on fasse des requêtes externes bizarres si vous voulez plus d'informations je vous mets un lien vers des explications plus complètes sur les tokens CSRF pour sécuriser vos applications web mais continuons en ajoutant un CSRF simplement grâce à Django pour ça il suffit que dans notre formulaire on ajoute CSRF token en tracolade

pourcentage maintenant je rafraîchis ma page je tape de nouveau quelque chose dans mon input text j'appuie sur le bouton là je retourne dans mon IDE et dans le terminal je vois que Django m'a bien affiché le contenu de ma balise input texte et aussi mon nom d'utilisateur comment coder il nous reste plus qu'à sauver les message en fonction de ce qu'on reçoit et on va de nouveau utiliser l'ORM de Dango pour faire ça donc dans le fichier views.p supprimons le print et puis on va écrire message.object.create et on va lui passer content = content et

user = user donc on a déjà utilisé message.objects avec les méthodes all et ORDER BY et là on utilise une des manières de créer des objets en base de données avec le RM de Django grâce à la méthode Create bref retournons sur le navigat ur rafraîchissons la page d'index et là je vais taper encore un message et appuyer sur mon bouton poster et là la page s'est rafraîchie très rapidement avec directement mon dernier message que je viens de créer tout en haut de la liste si je rafraîchis encore la page je vois que mon message

est bien toujours là donc ça veut dire qu'il a été correctement sauvé en base de données on peut même vérifier que notre message existe en allant dans l'interface d'administration Django pour ça rendez-vous sur/ash admin et puis dans messages on voit que j'ai bien mes messages dont le dernier message qui est encore un message on a une page d'index qui affiche des messages et qui nous permet d'en poster grâce à un formulaire maintenant on va voir comment créer des commandaires pour répondre à ces messages et ces commentaires seront eux aussi des messages avec une seule particularité

c'est qu'ils répondent à d'autres messages on va aussi voir comment créer une nouvelle page la page de détail qui prendra un identifiant pour un message et qui nous permettra d'afficher le message original avec tous ses commentaires pour faire ça on va commencer par créer une nouvelle fonction dans le fichier views Py donc faisons une nouvelle fonction avec Def details qui prend en paramètre toujours l'objet request et dans le corps de la fonction on va en profiter pour découvrir une nouvelle fonction c'est une fonction qui renvoie une simple réponse HTTP quand on arrive sur la page

et elle s'appelle HTTP response donc on écrit return HTTP response avec une string entre parenthèses moi je vais mettre ça marche pour voir si ça marche bien puis il faut importer cette fonction HTTP response depuis django.http en faisant from jango.http import HTTP response et voilà notre fonction est finie dans un premier temps donc maintenant on doit la lier à une URL et pour le moment on gère nos URL au niveau du projet dans le fichier url.p du projet maintenant qu'on a plusieurs URL en en ajoutant une deuxième ça serait mieux de gérer ces URL au

niveau de l'application et pas au niveau du projet global comme ça si on veut réutiliser notre application feed dans un autre projet on pourra importer toutes ces URL d'un seul coup grâce à ce fichier URL qui vit dans l'application directement donc je vais créer ce fichier urls.p dans le dossier de mon application feed et ce fichier va beaucoup ressembler à celui qui existe déjà au niveau du projet donc je vais ouvrir les deux fichiers en même temps les uns à côté des autres et dans mon nouveau fichier URL ce qui est vide je vais faire

from jungo.urls import pass puis on doit importer les views de notre application donc faisons from.import views et puis là pareil que pour l'autre fichier URLs on aura une liste de pattern URL donc on déclare une variable URL patterns qui sera égal à une liste vide pour le moment et dans cette liste vide je vais mettre un chemin vers ma page d'index avec pass et puis une string vide pour représenter la page d'index et views.index je vais en profiter pour la retirer du fichier urls.p qui est dans mon projet et puis maintenant pour notre nouvelle fonction

détail on va voir si elle fonctionne bien en ajoutant un deuxième pass dans la liste ce passe prendra en premier paramètre le chemin qu'on veut attribuer à notre nouvelle page pour le moment on va mettre details et puis Slash et comme fonction qu'on lui passe je vais lui mettre views.details comme c'est le nom que j'ai donné à ma fonction dans le fichier views.py et finalement dans le fichier URLs du projet on doit quand même le prévenir qu'il y a des URL qui vivent ailleurs et pour rajouter toutes les URL de mon application feed à mon

projet je vais utiler la fonction pass dans laquelle je passe en premier paramètre une chaîne de caractère vide et en second paramètre une autre fonction la fonction include qui prend un paramètre une chaîne de caractère qui sera un lien vers notre autre fichier URL donc dans la chaîne de caractère je mets feed.url au pluriel et j'oublie pas d'importer la fonction include depuis Jungo URL si on retourne dans le navigateur et qu'on rafraîchit la page normalement rien devrait n'avoir changé et si on va sur slash details on a bien une réponse HTTP en texte qui nous

dit ça marche donc là l'idée c'est d'avoir une page qui affiche un seul message avec ces commentaires liés et aussi d'avoir un formulaire qui nous permet de commenter ce message en en créant donc un nouveau message qui va être lié au message qui s'affiche en haut de la page et donc cette modification il faut qu'on la fasse dans modèle donc à ce point il y a plusieurs types d'implémentation poss possible soit on peut créer une nouvelle table en base de données qui est comments pour les commentaires et on lui donne des champs content user et

puis un message qui est le message que le commentaire commmente mais bon c'est assez redondant avec notre modèle message qui lui aussi a un champ content et un champ user donc là pour notre application je vais opter pour une autre solution qui est de modifier ier le modèle message directement on va lui rajouter un autre champ qui sera une clé étrangère en base de données et qui peut pointer vers un autre message donc on a déjà utilisé une clé étrangère pour lier un user à un message et là on va faire pareil je vais appeler

ce nouvel attribut response to pour dire que c'est un message qui est une réponse à un autre message et cet attribut sera donc un models.fign key qui pointe vers message mais si vous mettez message ici vous voyez que votre IDE se plain normalement ça fonctionne comme avec notre attribut user une clé étrangère ça pointe simplement vers un modèle et c'est tout là c'est un cas un peu spécifique la clé étrangère pointe vers le même modèle et donc on met juste self maintenant on doit encore définir ce qui va se passer quand on supprime un message

vers lequel notre commentaire pointe si le message d'origine est supprimé on peut soit conserver ses messages et afficher que le message d'origine a été supprimé ou bien comme avec user si un message parent est supprimé alors tous les commentaires enfant qui pointent vers le message parent vont être supprimés on a déjà utilisé la deuxième option avec la suppression en casque CAD pour notre clé étrangère user donc là pour changer je vais utiliser une autre option cette fois-ci pour ça dans ON DELETE on va mettre models. protect et puis pour finir des fois on aura une

valeur dans ce champ respon to mais des fois il sera nul parce que quand on crée un nouveau message par an qui n'est pas un commentaire à un autre message et ben ce champ devra être nul vu que ça répond pas à quoi que ce soit donc on doit spécifier à jjango que ce champ response to va parfois être nul et on peut faire ça en ajoutant dans les parenthèses nul égal trou et voilà c'est tout ce qu'on va faire dans le fichier models mais maintenant comme on altère notre table en base de données on

doit refaire un coup de make migrations et migrate et donc on peut faire ça donc rendez-vous dans le terminal si votre serveur tourne coupez-le et puis on va faire python manage.p make myrations et là si vous avez bien suivi vous verrez qu'on ajoute un champ response to à notre modèle message et puis on fait python manage.p migrate et si tout s bien passé ça affichera ok maintenant on peut relancer le serveur pour voir ce qui s'est passé et puis sur le navigateur je vais rafraîchir la page d'index et là normalement rien n'a changé on peut

aller sur slash admin pour voir l'interface d'administration et puis dans message je vais prendre un message au hasard et là je vois bien que j'ai un nouveau champ qui est response to et dans ce champ je peux choisir un des autres messages ok donc ça a l'air de fonctionner maintenant on va rendre la page de détail un peu plus intéressante donc si on veut afficher le détail d'un message et ses commentaires on doit savoir de quel message on parle on a donc passé quelque chose à Django qui va lui permettre d'afficher les détails du message

et dans ce cas-là on va utiliser son index en jongo on peut faire ça en se rendant dans le fichier URL donc allant dans le fichier URL de notre application feed et puis on va remplacer details par chevron int de.id donc int ça veut dire que jongo doit s'attendre à trouver un nombre entier dans son URL et ID c'est le nom qu'on attribue à cet entier pour pouvoir le récupérer dans notre fonction et maintenant dans le fichier views on peut récupérer cet ID dans la fonction details en rajoutant un second paramètre ID après request pour

tester ça je vais faire print ID dans ma fonction et maintenant je vais aller tester pour voir si ça fonctionne bien sur le navigateur je vais aller sur slash1/ et on voit qu'on a toujours le résultat de notre fonction HTTP response qui affiche ça marche mais si on va dans le terminal on voit qu'on récupère bien l'ID 1 et grâce à cet ID je vais pouvoir récupérer le message que je veux donc dans le fichier views et la fonction details on va récupérer le message grâce à son ID avec message = message.objects pointget et là

je vais lui passer ID qui sera égal à ID et on peut fournir ce résultat à un template HTML grâce à la fonction render et un contexte comme on l'a fait pour notre fonction index commençons par créer un objet contexte tout en haut de notre fonction et puis on va lui passer l'objet message en changeant la variable message en contexte message et on garde le reste de la ligne on va ensuite changer la fonction HTTP response en un render comme on l'a fait pour la fonction index et donc ça fait return render avec entre parenthèses

là on va créer un fichier details.html qui n'existe pas encore mais on va déjà mettre sa valeur entre guillemets et comme troisème paramètre le contexte bah c'est le contexte qu'on vient de créer donc allons créer ce fichier details.html dans notre dossier templates et dedans on va afficher le contenu de l'objet qui vit dans le contexte et donc la clé qu'on a mis c'est message on peut donc l'afficher avec accolad accolade message et puis on ferme les accolades retourner sur le navigateur et je vais rafraîchir la page donc il faut que l'ID en question existe si

vous avez supprimé le tout premier message que vous avez créé là vous aurez une erreur moi j'ai bien trois messages avec les ID 1 2 et 3 et donc là je peux mettre un des trois et je vais juste mettre un parce que c'est le premier et donc si vous fournissez un ID correct vous devriez voir message object avec son ID entre parenthèses donc moi c'est 1 maintenant on peut déballer le contenu de ce fameux message et je vais faire ça en récupérant une partie du HTML de mon fichier index.html donc j'ouvre le fichier index.html

et donc je vais récup tout le bloc HTML qui est entre les balises for et n for je le copie puis je le colle dans mon fichier details.html et puis je retourne dans mon navigateur et là j'ai bien tous les détails de mon message qui s'affiche donc maintenant on va tester que le mécanisme de commentaire fonctionne bien pour ça je vais me rendre dans l'admin message et puis je vais créer un nouveau message en appuyant sur le bouton Add message dans content je vais écrire réponse user c'est toujours mon unique utilisateur comme encodé et puis

là dans resp to je vais le mettre vers le tout premier message et je sais que c'est message object de 1 je vais sauver ce message et puis maintenant il faut que je récupère tous les messages qui pointent vers mon message object 1 et ça ça se passe dans le fichier views.py donc allons dans le fichier views.py et on va rajouter une clé comment à notre objet contexte puis on va récupérer tous les messages qui ont un response to égal à l'ID de notre message actuel donc on va faire context de comment égal message.objects.filter et

là on veut filtrer avec response to qui est égal à id id étant l'identifiant du message parent filter c'est une autre méthode de l'ORM jongo qui permet de filtrer et ne prendre que les objets qui respectent nos critères de filtre ici c'est respon to qui doit être égal à l'ID d'un message pour tester on peut faire un print de contexte et voir si ça a bien fonctionné donc je vais écrire print context puis je vais retourner sur mon navigateur et rafraîchir ma page là je reviens sur mon IDE et dans le terminal je vois que

le contexte est bien composé d'un message mais aussi d'une liste de commentaires et ça va nous permettre d'afficher les commentaires à la suite de nos messages dans le template HTML details donc dans le fichier details. HTML je vais rajouter une boucle for pour boucler sur tous les commentaire d'un message je vais commencer par écrire entracolade de pourcentage for comment au singulier in comments au pluriel et j'oublie pas de fermer le bloc directement avec accolade pourcentage for pourcentage accolade entre ces deux balises on a accès à une nouvelle variable comment au singulier qui va changer à

chaque passage dans la boucle pour avoir chaque message commentaire lié à notre message par an qui s'affiche au-dessus de la page donc comme pour les messages on veut le nom d'utilisateur une date et son contenu je vais donc faire trois div dans la première div j'aurai entre double accolade command.user.username dans la deuxième div j'aurai aussi entre double accolade command.cated at et dans la dernière div j'auraai là encore entre double colade comment. content et puis maintenant je retourne sur mon navigateur je rafraîchis la page et là si tout s bien passé on aura toujours le message

au-dessus et puis juste en dessous on aura notre commentaire donc on a une application fonctionnelle avec une page d'index qui liste tous les messages et puis pour chacun des messages on a une page de détail plus spécifique qui va afficher le message parent en plus de tous ces commentaires qui sont des messagees enfant comment rendre les templates HTML Django intelligent en ayant des blocs de code réutilisables pour nos applications c'est ce qu'on va voir maintenant avec le concept de balise extends et block avec Django donc on a deux fichiers HTML un pour afficher une liste

de message et un autre pour afficher les détails d'un message avec tous ces commentaires liés ça fait qu'on a plusieurs blocs de code très similaires le blog pour afficher un message sur la page d'index qui est exactement le même que celui pour afficher le message sur la page détail et puis on a les commentaires de la page détail qui eux aussi sont très proche de l'affichage d'un message aussi si on veut du CSS dans notre page détail on va devoir réimporter le fichier CSS et donc à ce niveau ça serait mieux d'avoir un fichier qui

contient le layout de notre page et puis d'avoir simplement des blocs HTML pour les parti qui change sans devoir tout récrire à chaque fois et c'est là que les notions de extends et block vont nous être utiles on va commencer par créer un fichier pour la base de la structure de nos pages HTML ce fichier pourra contenir tout ce qui reste sur nos pages donc par exemple un header avec une barre de navigation peut-être un pied de page footeur et puis si on a d'autres choses qui se répètent par exemple à gauche un menu plus

long on peut les les mettre aussi créons un fichier HTML que je vais appeler base. HTML dans le dossier template de mon application feed donc dans ce fichier base. HTML je vais déclarer la structure de base d'un fichier html avec les balises HTML head body et cetera après je vais récupérer les blocs HTML qui doivent être commun à toutes nos pages dans le fichier index. HTML pour les mettre dans base. HTML donc ce qui va le plus nous intéresser ici c'est d'importer notre fichier CSS partout je reprends donc la valise load statique mon fichier index.html

que je vais mettre tout en haut de mon fichier base. HTML et puis dans head je mets ma valise de lien Link qui pointe vers le fichier CSS maintenant il faut aussi définir où on va avoir le bloc qui contient les fichiers HTML enfant donc dans base. HTML dans son body je vais faire un bloc content entre ACOLAD pourcentage que je ferme avec la balise end block et c'est là que va apparaître le contenu des autres fichiers HTML index et details et dans index.html je dois ouvrir ce même bloc avec la base block content sauf

que là je mets toutes mes balises HTML dedans et tout en bas du fichier je ferme avec end block et surtout tout en haut de mon fichier j'oublie pas d'ajouter la balise extend base. HTML entre guillemets ce qui va permettre à jongo de savoir que ce fichier index.html est une extension du fichier base. HTML donc là vérifions rapidement qu'il y a pas de problème donc dans mon navigateur je rafrchie la page et si vous avez bien suivi rien n'a changé ok donc maintenant on peut faire la même chose pour le fichier détail. HTML donc pareil

que pour mon fichier index.html je vais commencer tout en haut de mon fichier à écrire la balise extend base. HTML puis je vais ouvrir le bloc content avec la balise block content et tout en bas de mon fichier je ferme avec la balise block là je peux retourner dans mon navigateur et si je vais sur slash 1 ou/ash n'importe quel ID pour lequel vous êtes sûr qu'un message existe ça fonctionne et en plus j'ai les styles CSS qui ont bien été appliqués et voilà donc là on a une structure de base qui est définie dans

le fichier base. HTML on va pouvoir créer plein de balises HTML dedans pour améliorer la structure du site déjà j'aimerais avoir des liens en haut de ma page pour pouvoir facilement naviguer entre ma page d'index et celle de l'administration donc dans base. HTML dans body je vais créer une balise nav dans cette balise nav je vais mettre deux liens avec les balises a un vers l'accueil avec href/ et un autre vers l'admin avec href = admin aussi tant qu'on fait de l'HTML j'aimerais rendre les messages clic et que quand je clique dessus ça me dirige

vers leur page de détail en fonction de leur ID pour ça sur la page index.html dans le bloc de code je vais changer la DIV en a et puis je vais lui ajouter un href qui sera double guillemet/ double accolad message.id et puis je ferme les accolades le slash et les double gu je vais retourner sur ma page d'index et là je vais cliquer sur un des messages pour voir si je suis bien redirigé vers la page de détail avec le bon message ok super ça fonctionne mais là on a exact exactement le même bloc

pour message qui se répète dans index.html et details.html j'aimerais pouvoir inclure ce bloc message en une ligne en changeant juste la variable message qu'on lui passe et on peut faire ça avec une autre balise de Django qui est la balise include donc je vais créer un nouveau fichier que je vais appeler message. HTML et dans ce fichier message je copie colle le bloc qui affiche un message et là à la place je vais mettre une div dans cette div je vais mettre une balise logique donc accolade de pourcentage et le mot include et je vais

include mon nouveau fichier message.html et là je dois lui passer un message pour que le fichier message.html connaisse le contenu d'un message et je peux faire ça avec with message = message on va faire pareil dans details.html en remplaçant tout le bloc message avec cette même ligne et si là je retourne dans mon navigateur je vois que mon site n'a pas changé ça fonctionne pareil et ça nous a permis d'enlever pas mal de répétition là dans ma page de détail il manque toujours quelque chose qui est la capacité de pouvoir commenter un message et pour

ça il faut que j'ajoute un formulaire je vais garder la même logique que pour le bloc message et je vais créer un fichier HTML pour mon formulaire comme ça je pourrais l'importer facilement dans mes deux fichiers donc je vais copier mon formulaire qui existe déjà dans la page d'index le mettre dans mon nouveau fichier form.html et là la seule chose qui va changer c'est la valeur de la balise action du Form car dans le cas où on veut créer un tout nouveau message on doit effectuer l'action post vers la vue index mais pour les commentaires

on doit faire ça avec la fonction details et donc dans mon fichier index là où était le formulaire je vais mettre un autre include donc je fais une balise div et puis je fais une balise logique Chango j'écrit includeform.html with action qui est la string/ash et puis je ferme ma balise et donc la note form a bien la valeur slash qui est l'action correcte pour le form de notre page index et maintenant qu'on a cette structure on peut ajouter en une seule ligne un formulaire dans la page de détail sauf que le form sur la

page détail aura pas l'action qui sera slash mais son action ça sera slash l'ID du message et un slash pour avoir ça le plus simple c'est d'utiliser request.pth qu'on peut utiliser dans template Django et maintenant qu'on a ça au niveau HTML on doit implémenter la logique dans la fonction details qui se trouve dans le fichier views donc pareil que pour la fonction index dans le cas où notre requête est de méthode POST on peut récupérer le contenu et le user comme on l'avait fait dans index donc on va d'abord vérifier que la méthode HTTP est

bien post en faisant if request. methode = é= post puis on va récupérer le Content pareil que dans notre fonction index en faisant content = request.post.get content pareil pour le user on fait user = request.user et puis pour créer un message on va avoir quelque chose de presque pareil sauf qu'en plus on va fournir un response to qui sera le message pour lequel on regarde le détails donc faisons message.objects.create content = content user = user response to OK on doit passer tout l'objet message qu'on peut récupérer en faisant message.objects.getid = id ou bien plus simplement

on peut lui passer l'ID directement en faisant response to id = id et donc maintenant qu'on a fait ça on peut se rendre sur le navigateur vérifier que la page d'index fonctionne toujours pareil et surtout la page de détail pour laquelle on vient d'implémenter la logique pour le formulaire on va se rendre dessus et essayer d'écrire un commentaire pour le message sur laquelle on est sur la page de détail et là si tout c'est bien passer vous devriez voir votre commentaire s'afficher maintenant on a beaucoup touché à l'HTML mais le CSS a du retard et

donc ce qu'on va faire c'est améliorer le CSS pour améliorer le visuel de notre application donc on a une application fonctionnelle en jongo mais au niveau style c'est pas trop ça donc là on va faire du CSS et pour commencer je vais tout centrer car là le contenu n'est pas centré sur la page de détail ni pour les deux formulaires de la page de détail et la page d'index et c'est parce que la propriété qui centre est sur un ID qui existe uniquement dans le fichier index.html et donc je vais la déplacer au niveau global

dans la base donc je vais plutôt mettre l'ID de la balise qui englobe le bloc content dans mon fichier base.html plutôt que sur la page d'index dans le fichier base. HTML je vais donc créer une balise div avec un ID que je vais mettre à container et dans le fichier index.html je supprime 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 et puis on a plusieurs autres problèmes déjà notre appliation ne fonctionne que pour les utilisateurs connectés mais là

si on n'est pas connecté on voit quand même le formulaire pour poster un message alors que si on essaie de poster un message sans être connecté ça va générer une erreur donc on peut gérer ça en montrant le formulaire à l'utilisateur que s'il est connecté ce qu'on peut faire en mettant notre formulaire entre des balises Django qui vérifie que l'utilisateur est bien authentifié donc dans le fichier form.html j'ajoute la balise Django if avec la condition qui est que l'objet user est authentifié ce qu'on peut faire avec request.user is authenticated et finalement j'oublie pas de fermer

ma valise Django avec un N if et puis on va montrer une balise HTML quand l'utilisateur n'est pas connecté avec un else dans cette balise DIV je vais mettre la phrase veuillezv connecter avec vous conncter qui est une balise HTML qui redirige vers un lien pour se connecter à l'interface d'administration donc on le met entre a avec comhref/admin/login/ pointinrogation next =/ ce qui va faire qu'on va être redirigé vers la page d'authentification de Django et quand l'utilisateur est connecté il va être redirigé vers la page d'index tant qu'on est dans le fichier pour le formulaire

je vais en profiter pour améliorer son style donc je vais commencer pour ajouter des ID aux balises sur la balise form je vais ajouter un ID é= form container sur l'input de type texte j'ajoute un ID form content sur le bouton pour poster notre message j'ajoute un ID form Button et puis sur la div qui affiche le texte qui invite notre utilisateur à se connecter s'il n'est pas connecté j'ajoute l'ID form unauthenticated une fois que ces ID sont ajoutés je vais aller dans dans le fichier style.css pour ajouter des règles HTML pour ces ID donc

pour le container j'ajoute un display Flex et un margine vertical de 1 avec un margine horizontal de 0 pour le content je lui mets flex pour qu'il prenne tout l'espace je le mets à 1 et un margine right de un REM pour qu'il ait de l'espace sur la droite pour le bouton je vais ajouter un Border radius une couleur un padding une couleur de texte une épaisseur de texte une bordure et changer le curseur en pointeur finalement pour le message quand l'utilisateur n'est pas authentifié je vais centrer le texte ajouter une margine verticale et une

épaisseur de texte à bold et là si on rafraîchit la page on voit que le formulaire est un peu mieux visuellement d'ailleurs si chez vous vous avez rafraîchi la page mais que le style n'a pas changé c'est que vous devez peut-être rafraîchir en forçant ce que vous pouvez faire avec le raccourci contrôle mage et puis la touche R et puis là je vais ouvrir un navigateur en navigation privée et je vois que j'ai bien le bon message qui s'affiche celui qui m'invite à me connecter maintenant je vais m'occuper des messages dans le fichier message HTML

je vais ajouter un avatar pour les utilisateurs donc je commence par créer un dossier image au pluriel dans mon dossier statique et puis je vais aller chercher une image sur mon ordinateur et la mettre dans ce dossier puis dans mon fichier HTML je vais créer une balise image qui aura comme classe message avatar comme SRC une balise Django qui prend statique et puis le chemin vers mon image moi dans statique c'est image au pluriel/comoncod.com.jpg et puis comme texte alternative si jjongo n'arrive pas afficher l'image je vais mettre le nom d'utilisateur de la personne qui poste

le message aussi pour que la balise statique fonctionne on doit ajouter la balise load statique tout en haut du fichier maintenant qu'on a fait ça allons voir ce que ça donne là on a un problème de dimension d'image donc je vais lui ajouter du style donc sur mon fichier HTML j'ajoute l'attribut classe é= message.container à ma balise a puis une div qui va permettre d'afficher mon image à gauche et puis le reste de mon message qui occupe l'espace en ajoutant du CSS et je sors ma balise h de ma balise a pour la mettre en

bas du fichier aussi tous les messages sont en bleu et soulignés car c'est le style de base qui vient avec une balise a en html donc je vais retirer ça et maintenant sur mon fichier styles.css je vais ajouter des règles HTML donc pour message container on veut pas de texte décoration pour color pareil je vais forcer en noir pour éviter la couleur bleue au violette dispay Flex va me permettre de mieux orienter mes messages avec l'image à gauche et le reste du contenu à droite Flex 1 pour que ça occupe tout l'espace je vais aussi

ajouter un padding pour un peu aérer le message et puis je vais ajouter un effet quand on met notre souris dessus d'avoir un background gris pour ça je fais point message container de points over et puis un background que je vais mettre à da da da ensuite on doit redimensionner l'image donc dans message avatar je mets les propriétés a et with à 64 px je vais aussi lui mettre une border radius de 4 et un margine sur la droite de un REM maintenant je retourne sur le navigateur donc on a bien no messagees sans soulignage

bleu avec un effet quand on passe notre souris dessus et avec l'image à gauche pour chaque message mais là on voit qu'on a trop d'espace car les HR appliquent leur propre margine donc je vais retourner dans le fichier style et dans les règles pour la balise HR je vais ajouter margine 0 ensuite je vais me rendre sur la page d'un message en cliquant dessus et je vais faire les commentaires donc les commentaires vivent dans la page détail. html et là je vais ajouter des div et des classes donc d'abord je vais ajouter une div qui

va contenir toutes mes autres div pour mes commentaires et je vais lui ajouter le nom de classe comment container puis je crée une autre div avec le nom de classe comment header qui va englober le nom d'utilisateur et la date je vais ensuite ajouter un nom de classe pour ma div qui contient le nom d'utilisateur je vais ajouter comment username et finalement pareil pour le contenu message commentaire avec la classe comment content et puis dans mon fichier styles.css je vais ajouter du style avec une margine verticale de 0.5 REM pour command container avoir mon header

en flex pour que les éléments ne s'affichent pas les en dessous des autres mais les uns à côté des autres pour le USERNAME on le veut en bold et avec une margine sur la droite pour qu'il ait de l'espace entre le nom d'utilisateur et la date et puis pour le contenu je veux un peu d'arération avec un padding de un REM voyons voir ce que ça donne en rafraîchissant la page avant de passer à la suite donc là on est bon mais la barre de header peut être aussi améliorée je vais donc ajouter un logo

qui sera en fait le nom de notre application une couleur de fond et aussi des liens je veux que ma barre fasse toute la largeur et que ses enfants soient centrés et puis je vais améliorer le visuel des liens et en plus on va afficher soit le nom d'utilisateur soit un lien pour l'inviter à se connecter donc dans le fichier base. HTML je vais commencer par mettre une balise hier autour de ma nave dedans je vais ajouter une balise h1 qui sera le titre de l'application feed puis une balise div avec l'ID header container directement

dans le header puis je vais ajouter un ID nav bar sur ma balise nav et enfin je vais ajouter un bloc qui affiche soit le nom d'utilisateur soit un lien pour se connecter à la suite des liens dans ma balise nav donc si request.user is authenticated je vais afficher une div qui aura comme classe avatar container dedans il y aura un span avec le nom d'utilisateur qu'on peut avoir en faisant request.user.username une image qui aura comme classe user avatar elle est pareil que dans le fichier message.html donc elle aura une SRC de statique image commcodé.com.jpg

et un alt qui sera toujours request.user.username ensuite si l'utilisateur n'est pas connecté on l'invite à se connecter en mettant un lien a avec un href de admin login next = Slash et comme texte se connecter et on n'oublie pas de fermer la balise if avec la balise if maintenant on va ajouter du CSS le header on veut qu'il ait en background je vais choisir le même background que dans l'interface d'administration de Django le texte sera de couleur blanche le header on veut que les choses s'affichent horizontalement et pas les unes auudessus des autres donc je

mets un display Flex je veux que mes éléments soient centrés mais qui ait de l'espace entre eux ce qu'on peut faire avec Aline item Center et justify content space between il aura une largeur maximum de 700 px comme le bloc contenu de notre application avec un margine auto puis pareil pour la navb je veux qu'elle a un display Flex et aligner les choses de manière centrée pour que ça soit centré verticalement ensuite tous mes liens de navb que je peux sélectionner en faisant hashtag navb et puis chevron vers la droite a donc ça va sélectionner

tous les liens qui sont des enfant de la balise qui a comme ID NAB je vais leur mettre une couleur blanche une text decoration à pour enlever le style de base des balises a et puis je vais ajouter un peu de padding horizontal avec padding 0 0.8 REM ensuite on a une classe avatar container qui aura un display Flex Aline items de Center et puis notre image avatar on va lui mettre une HE et une width de 32 px border radius toujours à 4 px et une margine left de 0.4 REM et voyons ce que

ça donne donc là on voit que notre header a de l'espace autour de lui donc je vais faire une dernière chose pour enlever cet espace dans styles.css je vais créer body avec une margine de zéro là je rafrchi la page et il y a plus cet espace et voilà c'est tout pour ce tutoriel en Django vous connaissez maintenant les concepts essentiels pour pouvoir débuter et faire vos propre application web en python d'ailleurs n'hésitez pas à me dire en commentaire ce que vous voulez apprendre en jjango si vous voulez que j'aille plus loin en faisant un

tutoriel sur un sujet spécifique ou bien une application complète