- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
Deviens membre Premium magic_button
Débloque cette session en devenant Membre Premium 🚀
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte person00:00:00 :Dans cette partie, on va créer la page d'accueil de notre site.Pour ça, on va créer une vue,on va créer une URL qui va rediriger vers cette vueet on va créer un fichier HTML de templateque l'on va afficher dans notre vue.
00:00:13 :La première chose à faire, c'est de créer la vue.On va la créer à l'intérieur du fichier views.py dans mon application Contact.Je vais enlever le commentaire iciet on va faire une vue qu'on va appeler index.
00:00:23 :Quand on crée une vue avec Django,qui est tout simplement une fonction Python,on va avoir à chaque fois un paramètre qu'il va falloir ajouter dans notre vuequi est le paramètre request.
00:00:32 :C'est obligatoire de le mettrepuisque c'est la requête web qui va être envoyée par Django à notre vueet donc on doit la récupérer.Pour l'instant, je vais juste mettre un pass à l'intérieur de cette fonction.
00:00:42 :On y reviendra par la suite.Pour l'instant, je vais mettre en place les trois éléments.La vue, ce qu'on vient de faire.On va mettre ensuite l'URL et pour finir, le template.
00:00:50 :L'URL, on va la mettre à l'intérieur directement de webapp,dans le fichier urls.py.Là, vous avez toute la documentation ici.On peut l'enlever.Vous pouvez la lire ou la laisser si ça vous intéresse.
00:01:00 :Et dans mon cas, ce que je vais faire,c'est mettre un nouveau chemin.On ne va pas avoir besoin de l'interface d'administrationdonc je vais enlever ce chemin iciet je vais enlever le fichier d'URLqui est utilisé pour la vue d'admin.
00:01:11 :On va juste remettre ça ici.À la place, on va mettre une chaîne de caractère videqui va correspondre à la page d'accueil de mon site.
00:01:18 :On va également enlever l'import de l'adminqui ne sert plus à rienet on va rediriger vers la vuequi se trouve à l'intérieur de Views.
00:01:24 :Pour ça, il va falloir l'importer.On va dire from contacts.viewsdonc contacts avec un seul Tcontacts.views import index.Et là, vous avez remarquéqu'on n'a pas l'autocomplétion.
00:01:34 :Alors ça, c'est normal.Il nous indique égalementqu'il ne trouve pas cette fonction ni ce module.C'est parce qu'il faut en fait ajouter ce dossier,donc le dossier de notre application,dans les sources de PyCharm.
00:01:44 :Pour ça, on va faire un clic droitet on va aller ici dans mark directory aset on va dire sources root.Ça, ça va permettre de définirque ce dossier contient des fichiersque l'on souhaite importer.
00:01:54 :Et si je reviens dans mon fichier urls.py,on remarque que le contacts iciet le index ne sont plus surlignés.Et si je refais l'import,vous allez voir que cette fois-ci,on a bien l'autocomplétion.
00:02:03 :Donc, je peux fairefrom contacts.views import index.Et donc, c'est cette vueque l'on va rediriger avec l'URL par défaut.Donc là, avec une chaîne de caractère vide,ça correspond à la page d'accueil de notre site.
00:02:14 :Donc, quand on se rendra en localsur 127.0.0.1 2.8000,eh bien là, on a le slashet ensuite, on n'a rien à la suite.Donc, c'est tout simplementl'adresse de base,donc la page d'accueil de notre site.
00:02:25 :Donc, on met ici justeune chaîne de caractère videet on indique que la page d'accueilva rediriger vers la vue index.On va également nommer cette URLavec le paramètre nameet on va l'appeler tout simplement index.
00:02:36 :Et donc ça, ça va être pratique par la suitepour pouvoir rediriger vers cette vuequand on va notamment ajouteret supprimer des contacts.Donc, on a créé notre URLqui pointe vers la vue d'index.
00:02:46 :Dans la vue d'index pour l'instant,on ne fait rien.Mais avant de retourner quoi que ce soità l'intérieur de cette vue,on va créer notre template HTML.
00:02:52 :Donc, pour ça,on va créer un dossier à l'intérieurde ce dossier contacts,donc de notre application.Donc, je fais un clic droitNew Directoryet on va créer un dossierqu'on appelle template avec un S,donc très important de le nommer comme ceci.
00:03:04 :Et on va également créer un sous-dossierqu'on va appeler contacts,donc le même nom que notre applicationà l'intérieur de ce dossier templates.Alors là, ce n'est pas obligatoirevu qu'on ne va pas avoir énormémentde fichiers ou d'applications,mais c'est une bonne idée toujoursde rajouter le contact,
00:03:17 :donc le nom de votre applicationà l'intérieur du dossier templatespuisque si on avait par exempleplusieurs fichiers index.htmlet qu'on les mettait tousà la racine du dossier templates,et bien Django ne pourrait pasfaire la distinctionentre les différents fichiersindex.html
00:03:31 :de nos différentes applications.Pour l'instant,on n'a qu'une seule application,l'application contacts,donc on pourra mettrenotre fichier index.htmldirectement dans un dossier templateset ça ne poserait pas de soucis,mais je préfère quand mêmele mettre directement dans un sous-dossier,comme ça,si jamais on rajoutedes applications par la suite
00:03:47 :qui ont également des fichiersd'index,on n'aura pas de clashentre les noms.Donc je crée ce dossier ici,on a donc le dossier templatesqui contient un sous-dossier contactset à l'intérieur de ce dossier,on va créer notre fichier htmlcette fois-ci,donc on fait un clic droit,
00:04:00 :new,et on va chercher icihtml file,on va l'appeler indexet on choisit icihtml5 filepour créer notre fichier.Là, il me demandesi je souhaite l'ajouter à gitpuisque là je suis à l'intérieurd'un dépôt git,donc j'ai mis annuler icipuisque je ne souhaite pas
00:04:14 :l'ajouter tout de suite à git.Donc là,on va changer quelques petites choses,on va mettre la langue en français,on va dire mon carnet d'adressepour le titreet on va juste rajouter iciun h1 avec un texte,on va dire pareil,mon carnet d'adresse,donc ça c'est juste pour s'assurer
00:04:27 :que tout fonctionneet pour finir,il ne reste donc plusqu'à retourner ce fichier htmldans la vue.Donc on va revenir dans views.pyet on va utilisercette fonction renderqui me permetde retourner un fichier html.
00:04:38 :Donc on va faire renderet on va retourner la requête,donc ça c'est la première choseque vous devez retourner,vous voyez avec l'aide iciqu'on a l'indicationde tout ce qu'on doit retourner,donc en premier lieu,la requête,ensuite le nom du templateet éventuellement un contextequi va nous permettre
00:04:52 :de passer des informationsà notre fichier html ici.Donc le deuxième élémentqu'on retourne,c'est notre fichier d'indexdonc qui se trouveà l'intérieur decontact.index.html,
00:05:01 :donc là vous voyezl'intérêt d'avoirle contact ici,donc le dossier contactspuisque ça nous permetd'ajouter un namespacequi va séparercomme je vous disais précédemmentles différentes vuesindex.html
00:05:11 :qu'on pourrait avoirdans différentes applications.Donc pour l'instant,on ne va rien faire de plus,on va déjà tester tout çadonc je vais ouvrirun terminalet je vais relancerla commandepython-manage-py-run-serverdonc assurez-vousde bien être à l'intérieurdu dossier webappet d'avoir sourcévotre environnement virtuel
00:05:26 :donc je lance le serveuret on va aller voirsur notre sitece que ça donnedonc je vais actualiser la pageet là vous voyezqu'il nous indiquequ'on ne retourne pasd'objet HTTP responsedonc ça c'est parce qu'en faitje n'ai pas mis le return,on a fait un render
00:05:38 :mais bien sûr il fautretourner quelque chosesi on met juste un render iciça ne va rien retourneret quand on fait une requêteet bien Djangova s'attendre à avoirun objet de typeHTTP responseet cet objet HTTP responseil est généréautomatiquement pour nousavec cette fonction render
00:05:51 :à partir de la requêteet du fichier HTMLdonc normalementça va recharger automatiquementmon sitedonc on attend que ça rechargesi jamais ça ne recharge pasvous pouvez l'arrêteren faisantCTRL-Cpour arrêter le serveuret le relancerpour être sûrque tous les changementssont bien pris en compte
00:06:06 :donc on va actualisernotre pageet là j'ai bien mon carnet d'adressequi s'affichedonc ce qui indiquepour finir cette partieje vais utiliser mon APIpour récupérerles utilisateursde ma base de donnéesdonc si on va voirdans l'API icidans le fichier db.json
00:06:20 :j'ai plusieurs utilisateursqui sont par défautdans cette base de donnéeset on va vouloirles afficher à l'intérieurde index.htmldonc pour çadans la vueon va déjà importerune fonction de notre APIdans l'APIon a une fonctionqui nous permet de récupérertous les utilisateurs
00:06:34 :de la base de donnéeset cette fonctionc'est getAllUsersdonc on va l'importer icidans le fichier views.pyon va direfrom api.crmimport getAllUserset on va utiliserensuite le contextepour passer les informationsà notre fichier htmldonc on va mettre une virguleet en troisième argument ici
00:06:51 :on va envoyerun dictionnairequi va conteniren cléle nom de la variablequ'on va utiliserdans le fichier htmlet en valeuron va passer la listede nos utilisateursdonc on va appelernotre fonction getAllUsersqui va nous retournerla liste de tous les utilisateursdans la base de données
00:07:06 :donc maintenantqu'on a notre listed'utilisateursdans cette variable userson va pouvoirfaire une bouclepour afficher tout simplementles utilisateurssur le fichier htmldonc je vais faireune bouclepour ça on metune accoladeun symbole pourcentageet on fait ensuiteune boucle comme avec Python
00:07:22 :donc on va direpour user in usersdonc users icic'est ce quej'ai récupéré icidonc là si vous mettezpar exemple utilisateuret bien il faudraitutiliser ce nomutilisateur à la placeici de usersok donc ça c'est vraimentle nom qu'on metdans notre dictionnaire
00:07:36 :donc je vais pouvoirensuite boucleravec for user in userset avec ces symbolesdonc l'accoladeet le symbole pourcentagepour ouvriret fermer ma boucleon va ensuite faireun h2cette fois-ciet on va utiliserles double accoladesdonc double accoladeouvrante et fermante icipour afficher
00:07:52 :des élémentsdonc dans ce cas-cion va afficher le full namede notre utilisateurdonc ça full namec'est un attributune propriété en faitque l'on avait faità l'intérieurde notre classe utilisateuret qui retournele prénomet le nom de famillede l'utilisateurdonc on affiche tout ça
00:08:07 :à l'intérieur d'une balise h2dans notre fichier htmlet dans les templates Djangoil faut indiquercontrairement à Pythonoù se termine notre bouclepuisqu'on n'a pasl'indentationcomme avec Pythonqui nous permet de définirdes blocs d'instructionsdans les fichiers htmlon n'a pas cette notiond'indentationet donc pour spécifier
00:08:22 :à Djangooù se termine la boucleil faut l'indiquer explicitementet pour çaon va mettredonc là encorela balise avecl'accolade et le pourcentageet on va direque c'est la fin de la boucleavec le mot clé end fortout attaché en minusculeset on ferme la balise ici
00:08:36 :avec un autre symbole pourcentageet l'accoladeon peut par la suitemettre une indentationmais elle n'est vraimentpas obligatoirec'est juste pourvisuellement un peu mieuxorganiser mon codemais vous pourriez laisservotre code comme ça iciça n'a pas d'importancec'est vraiment cette balise iciqui va indiquer que la boucle
00:08:50 :se terminedonc voilà commentboucler sur tous les utilisateursque l'on a récupérédans notre vuedonc dans la vue icigrâce à notre APIet comment donc les affichercomment afficher le full namegrâce à ces deux accolades iciqui nous permettent d'insérerdes variables à l'intérieurde notre fichier de template
00:09:06 :donc je retourne ici maintenantsur mon serveurj'actualiseet là on a bien les noms completsdes trois utilisateursqui étaient à l'intérieurde notre base de donnéesdonc on commence à avoirquelque chose qui aun peu plus de senscomme je vous le disaispour l'instant c'est assez basique
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.