Les bases de Django

00:00:00 :Dans cette vidéo, je vais vous montrer comment j'ai assez rapidement mis en place cette page d'accueil sur le site avec un peu de CSS et une image de fond également que vous voyez en ce moment. Donc tout de suite, je vais vous montrer ce que ça donne au niveau du HTML et du CSS. Je
00:00:16 :ne vais pas écrire toutes les lignes avec vous, je les ai déjà écrites parce que je trouve que ça n'a pas grand intérêt d'écrire chaque ligne séparément devant vous, ce n'est pas une formation axée sur le CSS. Donc je voulais juste arriver à un résultat un peu plus sympathique que ce
00:00:29 :qu'on avait jusqu'à présent et dans cette vidéo, je vais donc vous montrer comment j'ai réussi à faire ce résultat qu'on a actuellement avec un peu de HTML et de CSS. Donc au niveau de mon fichier
00:00:39 :HTML, je n'ai rien changé au début, j'ai bien le load static qui me permet d'accéder à mon fichier CSS. J'ai fait quelques changements ici, donc j'ai rajouté une div avec une classe
00:00:50 :container qui va me permettre de styliser cette div dans mon fichier CSS et ici j'ai légèrement modifié le contenu. J'ai mis un h1, un h2 et un h3 avec bienvenue sur mon site. On affiche ensuite
00:01:02 :la date avec le format jour, le mois et l'année et j'affiche également l'heure. Donc là ici j'ai utilisé encore une fois le filtre de template date et je lui ai passé l'heure et les minutes et ici vous voyez que j'ai rajouté un slash h. Donc ça en fait c'est tout simplement pour échapper le h
00:01:19 :ici parce que si on met juste h, en fait h c'est un symbole qui signifie quelque chose. Si je me souviens bien ça correspond aux heures mais sans padding, donc par exemple s'il est une heure de l'après-midi ça va afficher 1 et non pas 0 1. Donc moi ce que je voulais c'est mettre ici
00:01:32 :vraiment la lettre h et non pas l'information de l'heure. Donc pour ce faire j'échappe ce caractère avec un slash en lui disant donc que ce caractère doit être considéré comme un h, donc comme la lettre h. Ce qui fait qu'on a bien ici 17h43 qui est affiché. Ensuite dans le CSS et bien j'ai
00:01:48 :quelques lignes de code ici. La première c'est un import qui me permet d'utiliser une police d'écriture. Donc cette police d'écriture je l'ai trouvée sur Google Fonts. Dans mon cas j'ai
00:01:58 :pris une police qui s'appelle la police Lato qui est une police d'écriture assez populaire et j'ai pris le Régular 400 ici. Donc pour l'ajouter vous cliquez ici sur Select this style et vous allez
00:02:09 :tout en haut à droite cliquer sur View your selected families, donc l'icône ici. Et vous allez avoir les liens ici pour soit l'importer depuis le HTML soit dans un fichier CSS avec le at import. Donc c'est cette ligne ici donc sans les balises style que je copie et que je mets à
00:02:25 :l'intérieur de mon fichier CSS. Et vous avez ensuite l'indication qui vous montre comment utiliser cette police d'écriture donc avec la chaîne de caractère Lato avec un L majuscule.
00:02:34 :Donc c'est ce que je fais ici dans mon fichier, j'importe la police d'écriture et ensuite je spécifie que pour mon HTML ebody je veux avoir le font family donc la police d'écriture qui utilise Lato. Et si cette police d'écriture n'est pas trouvée on revient sur un sans serif
00:02:50 :normal. Ici je set la hauteur du HTML et du body à 100%. Je remets à zéro les marges et les bords donc margin et border à zéro. Donc ça c'est ce qu'on appelle un reset du CSS puisque par défaut
00:03:02 :il va y avoir des marges qui seront présentes sur votre site et moi dans ce cas ci je ne veux pas avoir de marge donc je remets tout ça à zéro. Dans le body j'utilise une image que j'ai
00:03:11 :téléchargée qui est disponible et libre de droit donc cette image background.jpg qui est directement dans le fichier CSS donc dans nos dossiers statiques ici dans doc blog et cette icône donc je l'affiche dans le body avec background image en utilisant url et là vu que l'icône est au même niveau que mon fichier style.css il me suffit de mettre le nom de l'image
00:03:31 :donc background.jpg en chemin relatif donc puisque on est dans le même dossier ici. Ensuite je fais un background position center, je ne veux pas répéter l'image et j'utilise background side à cover pour que ça prenne toute la largeur de mon écran. Ensuite on a le container ici donc là
00:03:48 :encore je spécifie une hauteur de 100% pour pouvoir bien aligner mon contenu sur le milieu de la page. On met là aussi les paddings et les margins à zéro et on va créer ce qu'on
00:03:58 :appelle un container flexible donc un flex container en anglais avec display flex. On met la direction en colonne donc ça c'est pour avoir les trois éléments ici qui sont sur la hauteur et non pas sur la largeur donc pour avoir le h1, le h2 et le h3. Ensuite on a ici les alignements
00:04:16 :donc align items et justify content qui sont à center ce qui me permet d'avoir l'alignement sur l'axe horizontal et vertical. On grossit un petit peu la police d'écriture avec font size qu'on
00:04:26 :met à 2rem donc ça c'est relative. On a ensuite une couleur de blanc pour la police d'écriture et j'ai mis un background color en noir avec une opacité de 0,35 sur mon fond. Donc ça me permet
00:04:39 :de détacher un peu mieux la police d'écriture on pourrait même peut-être l'augmenter jusqu'à 0.5 et si j'actualise on aura bien ici le fond qui va être un peu plus sombre qu'auparavant et également l'heure qui se met à jour ici donc il est actuellement 17h50. Vous remarquerez si vous
00:04:54 :regardez tout en haut à droite de mon écran que moi il est 18h50 au moment où j'enregistre alors c'est normal puisque en fait on a une heure de décalage. Par défaut le serveur de Django va être
00:05:05 :basé sur l'heure GMT qui est l'heure de la zone autour de Londres donc Londres c'est une heure de moins que la France donc de Paris là où j'enregistre actuellement et donc c'est pour ça qu'on a ce décalage horaire c'est tout à fait normal et vous pensez bien qu'il est bien entendu
00:05:19 :possible de modifier cet horaire pour qu'on ait le bon fuseau horaire. Je ne vous montrerai pas ça dans cette formation mais si jamais vous souhaitez changer le fuseau horaire de votre serveur c'est tout à fait possible avec Django. Donc voilà pour cette petite partie qui nous permet d'avoir un
00:05:33 :rendu assez sympathique, d'avoir quelque chose qui est aussi responsive puisque si je change la taille de ma fenêtre vous voyez que tout reste centré correctement et que l'image change bien de taille aussi pour pouvoir s'adapter à la largeur de ma fenêtre. Donc voilà pour cette partie dans laquelle
00:05:48 :je vous ai fait un aperçu rapide de ce qu'on pourrait faire en CSS avec notre site qui est donc dynamique avec l'heure qui se met à jour ici puisqu'on l'a récupéré dans notre vue et donc un rendu assez sympa pour ce petit site créé avec Django. Et avec cet exemple j'espère que vous voyez
00:06:04 :que faire un site web ce n'est pas que ce qu'on appelle donc le back-end puisque actuellement Django ce que ça nous permet de faire c'est toute la partie back donc c'est à dire par exemple récupérer la vue, les routages du RL et envoyer des informations à la vue comme on le fait ici
00:06:17 :en affichant l'heure. Donc ça c'est toute la partie back-end mais il y a toute la partie front-end donc ce qu'on appelle le front-end c'est ce que vous voyez qui là est en fait tout simplement du html, du css, éventuellement du javascript donc tout ça c'est complètement différent de Python.
00:06:33 :Vous voyez que dans le template html on peut très bien inclure des variables on va pouvoir également faire des boucles ou des structures conditionnelles donc grâce au langage de template donc de gabarit de Django on va pouvoir avoir cette logique à l'intérieur du fichier html tout comme on pourrait le faire par exemple avec d'autres langages comme du php ou du javascript
00:06:52 :si on utilisait ces langages pour le back-end mais vous voyez que donc c'est vraiment un travail à la fois en Python et également en html, en css et éventuellement un peu de javascript.

Mettre en forme le site

Débloquez votre potentiel ! ✨

Prêt à passer au niveau supérieur ?

Toutes les questions

Jeed0

Partage sur Github en preservant les données confidentielles de settings.py

Rechercher sur le site