Construire une application Portfolio – Real Python

By | avril 11, 2019

Formation Python

Django est un framework Web Python complet qui peut être utilisé pour créer des applications Web complexes. Dans ce tutoriel, vous allez apprendre et apprendre Django par exemple. Vous suivrez les étapes pour créer une application Web pleinement opérationnelle et, en cours de route, découvrirez certaines des fonctionnalités les plus importantes du cadre et leur interaction.

Dans les articles suivants de cette série, vous découvrirez comment créer des sites Web plus complexes en utilisant davantage de fonctionnalités de Django que celles que vous présenterez dans ce didacticiel.

À la fin de ce tutoriel, vous serez capable de:

  • Comprendre ce qu'est Django et pourquoi c'est un excellent framework web
  • Comprendre l'architecture d'un site Django et sa comparaison avec d'autres frameworks
  • Configurer un nouveau projet et une application Django
  • Construire un site Web portefeuille personnel avec Django

Pourquoi devriez-vous apprendre Django

Il existe une infinité de cadres de développement Web, alors pourquoi devriez-vous apprendre Django plutôt que d’autres? Tout d’abord, il est écrit en Python, l’un des langages de programmation les plus lisibles et les plus conviviaux pour les débutants.

La deuxième raison pour laquelle vous devriez apprendre Django est la portée de ses fonctionnalités. Si vous devez créer un site Web, vous n'avez pas besoin de recourir à des bibliothèques ou des packages externes si vous choisissez Django. Cela signifie que vous n’avez pas besoin d’apprendre à utiliser quoi que ce soit, et la syntaxe est transparente puisque vous n’utilisez qu’un seul framework.

L’avantage supplémentaire est que vous n’aurez pas à craindre que la mise à jour d’une bibliothèque ou d’un framework rende inutilisables les autres que vous avez installées.

Si vous avez besoin d'ajouter des fonctionnalités supplémentaires, vous pouvez utiliser une gamme de bibliothèques externes pour améliorer votre site.

L'un des points forts du framework Django est sa documentation détaillée. Il contient une documentation détaillée sur chaque aspect de Django, ainsi que d'excellents exemples et même un tutoriel pour vous aider à démarrer.

Il existe également une fantastique communauté de développeurs Django, donc si vous êtes bloqué, il est presque toujours possible de progresser en vérifiant la documentation ou en demandant à la communauté.

Django est un cadre d'applications Web de haut niveau doté de nombreuses fonctionnalités. C’est une excellente chose pour les débutants en développement Web en raison de la qualité de sa documentation, et en particulier si vous connaissez également Python.

La structure d'un site web Django

Un site web Django consiste en un seul projet qui est divisé en séparé applications. L'idée est que chaque application gère une fonction autonome que le site doit exécuter. Par exemple, imaginons une application comme Instagram. Plusieurs fonctions différentes doivent être exécutées:

  • Gestion des utilisateurs: Connexion, déconnexion, inscription, etc.
  • Le flux d'images: Téléchargement, édition et affichage d'images
  • Messagerie privée: Messages privés entre utilisateurs et notifications

Il s’agit de fonctionnalités distinctes. Ainsi, s’il s’agissait d’un site Django, chaque fonctionnalité devrait correspondre à une application Django différente au sein d’un même projet Django.

Le projet Django contient certaines configurations qui s'appliquent au projet dans son ensemble, telles que les paramètres de projet, les URL, les modèles partagés et les fichiers statiques. Chaque application peut avoir sa propre base de données et ses propres fonctions pour contrôler la façon dont les données sont affichées à l'utilisateur dans des modèles HTML.

Chaque application possède également ses propres URL, ainsi que ses propres modèles HTML et fichiers statiques, tels que JavaScript et CSS.

Les applications Django sont structurées de manière à séparer la logique. Il prend en charge le modèle Model-View-Controller, qui est l'architecture sur laquelle la plupart des infrastructures Web sont construites. Le principe de base est que dans chaque application, il y a trois fichiers distincts qui traitent les trois éléments de logique principaux séparément:

  • Modèle définit la structure de données. Il s'agit généralement d'une base de données et constitue la couche de base d'une application.
  • Vue affiche tout ou partie des données à l'utilisateur avec HTML et CSS.
  • Manette gère les interactions entre la base de données et la vue.

Si vous souhaitez en savoir plus sur le modèle MVC, consultez le document MVC (Model-View-Controller) – Avec Legos.

À Django, l'architecture est légèrement différente. Bien que basé sur le modèle MVC, Django gère la partie contrôleur elle-même. Il n’est pas nécessaire de définir les interactions entre la base de données et les vues. Tout est fait pour vous!

Le modèle utilisé par Django est appelé modèle MVT (Model-View-Tempalate). La vue et le modèle du modèle MVT constituent la vue du modèle MVC. Tout ce que vous avez à faire est d’ajouter des configurations d’URL pour mapper les vues, et Django se charge du reste!

Un site Django commence par un projet et est construit avec un certain nombre d'applications qui gèrent chacune une fonctionnalité distincte. Chaque application suit le modèle modèle-vue-modèle. Maintenant que vous connaissez la structure d’un site Django, voyons ce que vous allez construire!

Ce que vous allez construire

Avant de vous lancer dans un projet de développement Web, il est judicieux de définir un plan de ce que vous allez construire. Dans ce tutoriel, nous allons construire une application avec les fonctionnalités suivantes:

  • Un blog entièrement fonctionnelSi vous souhaitez démontrer votre capacité à coder, un blog est un excellent moyen de le faire. Dans cette application, vous pourrez créer, mettre à jour et supprimer des articles de blog. Les messages auront des catégories qui peuvent être utilisées pour les trier. Enfin, les utilisateurs pourront laisser des commentaires sur les messages.

  • Un portfolio de votre travail: Vous pouvez présenter les projets de développement Web précédents ici. Vous construirez une page de style galerie avec des liens cliquables vers les projets que vous avez terminés.

Nous n’utiliserons aucune bibliothèque Python externe dans ce tutoriel. L’un des avantages de Django est qu’il dispose de tellement de fonctionnalités qu’il n’est pas nécessaire de s’appuyer sur des bibliothèques externes. Cependant, nous ajouterons le style Bootstrap 4 dans les modèles.

En construisant ces deux applications, vous apprendrez les bases des modèles Django, des fonctions d'affichage, des formulaires, des modèles et de la page d'administration de Django. Avec la connaissance de ces fonctionnalités, vous pourrez vous en aller et créer plus d'applications. Vous aurez également les outils pour apprendre encore plus et créer des sites Django sophistiqués.

Bonjour le monde!

Maintenant que vous connaissez la structure d'une application Django et ce que vous êtes sur le point de construire, nous allons suivre le processus de création d'une application dans Django. Vous allez étendre cela plus tard à votre application de portefeuille personnel.

Configurez votre environnement de développement

Lorsque vous démarrez un nouveau projet de développement Web, il est judicieux de configurer d’abord votre environnement de développement. Créez un nouveau répertoire pour votre projet, et CD dans ça:

$ mkdir rp-portfolio
$ CD rp-portfolio

Une fois dans le répertoire principal, c’est une bonne idée de créer un environnement virtuel pour gérer les dépendances. Il existe de nombreuses façons de configurer des environnements virtuels, mais ici, vous allez utiliser venv:

Cette commande va créer un dossier venv dans votre répertoire de travail. Dans ce répertoire, vous trouverez plusieurs fichiers, dont une copie de la bibliothèque standard Python. Plus tard, lorsque vous installerez de nouvelles dépendances, elles seront également stockées dans ce répertoire. Ensuite, vous devez activer l'environnement virtuel en exécutant la commande suivante:

$ la source venv / bin / activate

Vous saurez que votre environnement virtuel a été activé, car votre invite de console dans le terminal changera. Ça devrait ressembler a quelque chose comme ca:

Maintenant que vous avez créé un environnement virtuel, il est temps d’installer Django. Vous pouvez le faire en utilisant pépin:

(venv) $ pip installer Django

Une fois que vous avez configuré l’environnement virtuel et installé Django, vous pouvez maintenant vous plonger dans la création de l’application.

Créer un projet Django

Comme vous l'avez vu dans la section précédente, une application Web Django est composée d'un projet et de ses applications constitutives. Assurez-vous d'être dans le rp_portfolio répertoire et que vous avez activé votre environnement virtuel, exécutez la commande suivante pour créer le projet:

$ django-admin startproject personal_portfolio

Cela va créer un nouveau répertoire personal_portfolio. Si vous CD dans ce nouveau répertoire, vous verrez un autre répertoire appelé personal_portfolio et un fichier appelé gérer.py. Votre structure de répertoire devrait ressembler à ceci:

rp-portfolio /
│
├── portfolio personnel /
│ ├── portfolio personnel /
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
│
└── manage.py
│
└── venv /

La plupart du travail que vous faites sera dans cette première personal_portfolio annuaire. Pour éviter d'avoir à CD à travers plusieurs répertoires à chaque fois que vous travaillez sur votre projet, il peut être utile de le réorganiser légèrement en déplaçant tous les fichiers d’un répertoire à l’autre. Pendant que vous êtes dans le rp-portfolio répertoire, exécutez les commandes suivantes:

$ mv personal_portfolio / manage.py ./
$ mv personal_portfolio / personal_portfolio / * personal_portfolio
$ rm -r personal_portfolio / personal_portfolio /

Vous devriez vous retrouver avec quelque chose comme ça:

rp-portfolio /
│
├── portfolio personnel /
├── __init__.py
├── ├── settings.py
├── urls.py
└── wsgi.py
│
├── venv /
│
└── gérer.py

Une fois la structure de votre fichier configurée, vous pouvez maintenant démarrer le serveur et vérifier que votre configuration a réussi. Dans la console, exécutez la commande suivante:

$ serveur python manage.py

Ensuite, dans votre navigateur, allez à localhost: 8000, et vous devriez voir ce qui suit:

Vue initiale du site Django

Félicitations, vous avez créé un site Django! Le code source de cette partie du tutoriel est disponible sur GitHub. L'étape suivante consiste à créer des applications afin que vous puissiez ajouter des vues et des fonctionnalités à votre site.

Créer une application Django

Pour cette partie du didacticiel, nous allons créer une application appelée Bonjour le monde, que vous supprimerez par la suite, car ce n’est pas nécessaire pour notre site de portefeuille personnel.

Pour créer l'application, exécutez la commande suivante:

$ python manage.py startapp hello_world

Cela créera un autre répertoire appelé Bonjour le monde avec plusieurs fichiers:

  • __init__.py indique à Python de traiter le répertoire comme un paquet Python.
  • admin.py contient les paramètres pour les pages d’administration Django.
  • apps.py contient les paramètres pour la configuration de l'application.
  • models.py contient une série de classes que l'ORM de Django convertit en tables de base de données.
  • tests.py contient des classes de test.
  • views.py contient des fonctions et des classes qui gèrent les données affichées dans les modèles HTML.

Une fois que vous avez créé l’application, vous devez l’installer dans votre projet. Dans rp-portfolio / settings.py, ajoutez la ligne de code suivante sous INSTALLED_APPS:

INSTALLED_APPS = [[[[
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'Bonjour le monde',
]

Cette ligne de code signifie que votre projet sait maintenant que l'application que vous venez de créer existe. L'étape suivante consiste à créer une vue afin de pouvoir afficher quelque chose à un utilisateur.

Créer une vue

Les vues dans Django sont un ensemble de fonctions ou de classes à l’intérieur du views.py fichier dans votre répertoire app. Chaque fonction ou classe gère la logique qui est traitée chaque fois qu'une URL différente est visitée.

Accédez au views.py déposer dans le Bonjour le monde annuaire. Il y a déjà une ligne de code là-bas qui importe rendre(). Ajoutez le code suivant:

de django.shortcuts importation rendre

def Bonjour le monde(demande):
    revenir rendre(demande, 'hello_world.html', )

Dans ce morceau de code, vous avez défini un fonction de vue appelé Bonjour le monde(). Lorsque cette fonction est appelée, un fichier HTML appelé hello_world.html. Ce fichier n’existe pas encore, mais nous le créerons bientôt.

La fonction de vue prend un argument, demande. Cet objet est un HttpRequestObject qui est créé chaque fois qu'une page est chargée. Il contient des informations sur la requête, telles que la méthode, pouvant prendre plusieurs valeurs, notamment OBTENIR et POSTER.

Maintenant que vous avez créé la fonction d'affichage, vous devez créer le modèle HTML à afficher pour l'utilisateur. rendre() recherche des modèles HTML dans un répertoire appelé des modèles dans votre répertoire d'applications. Créez ce répertoire et ensuite un fichier nommé hello_world.html à l'intérieur:

$ mkdir hello_world / templates /
$ Appuyez sur hello_world / templates / hello_world.html.

Ajoutez les lignes HTML suivantes à votre fichier:

Vous avez maintenant créé une fonction pour gérer vos vues et les modèles à afficher pour l'utilisateur. La dernière étape consiste à brancher vos URL afin que vous puissiez visiter la page que vous venez de créer. Votre projet a un module appelé urls.py dans lequel vous devez inclure une configuration d’URL pour le Bonjour le monde app. À l'intérieur personal_portfolio / urls.py, ajoutez ce qui suit:

de django.contrib importation admin
de django.urls importation chemin, comprendre

urlpatterns = [[[[
    chemin('admin /', admin.site.les urls),
    chemin('', comprendre('hello_world.urls')),
]

Cela cherche un module appelé urls.py à l'intérieur de Bonjour le monde application et enregistre toutes les URL définies à cet endroit. Chaque fois que vous visitez le chemin racine de votre URL (localhost: 8000), la Bonjour le monde Les URL de l'application seront enregistrées. le hello_world.urls Le module n’existe pas encore, vous devez donc le créer:

$ touchez hello_world / urls.py

Dans ce module, nous devons importer l’objet de chemin ainsi que les applications de notre application. vues module. Ensuite, nous voulons créer une liste de modèles d'URL correspondant aux différentes fonctions d'affichage. Pour le moment, nous n’avons créé qu’une seule fonction de vue. Il n’est donc nécessaire de créer qu’une seule URL:

de django.urls importation chemin
de Bonjour le monde importation vues

urlpatterns = [[[[
    chemin('', vues.Bonjour le monde, prénom='Bonjour le monde'),
]

Maintenant, lorsque vous redémarrez le serveur et visitez localhost: 8000, vous devriez pouvoir voir le modèle HTML que vous avez créé:

Bonjour le monde! vue du site Django

Félicitations encore! Vous avez créé votre première application Django et l'avez connectée à votre projet. N'oubliez pas de consulter le code source de cette section et de la précédente. Le seul problème, c’est que ce n’est pas très joli. Dans la section suivante, nous allons ajouter des styles de bootstrap à votre projet pour le rendre plus joli!

Ajouter Bootstrap à votre application

Si vous n’ajoutez pas de style, l’application que vous créez ne sera pas très belle. Au lieu d'entrer dans le style CSS avec ce tutoriel, nous allons simplement expliquer comment ajouter des styles d'amorçage à votre projet. Cela nous permettra d'améliorer l'apparence du site sans trop d'effort.

Avant de commencer à utiliser les styles Bootstrap, nous allons créer un modèle de base que nous pourrons importer dans chaque vue suivante. Ce modèle est l’endroit où nous ajouterons ensuite les importations de style Bootstrap.

Créez un autre répertoire appelé des modèles, cette fois à l'intérieur personal_portfolioet un fichier appelé base.html, dans le nouveau répertoire:

$ mkdir personal_portfolio / templates /
$ touchez personal_portfolio / templates / base.html

Nous créons ce répertoire de modèles supplémentaire pour stocker les modèles HTML qui seront utilisés dans chaque application Django du projet. Comme vous l'avez vu précédemment, chaque projet Django peut être composé de plusieurs applications qui gèrent une logique séparée, et chaque application contient sa propre des modèles répertoire pour stocker les modèles HTML liés à l'application.

Cette structure d’application fonctionne bien pour la logique de l’arrière-plan, mais nous voulons que l’ensemble de notre site soit cohérent sur le front-end. Au lieu d'avoir à importer des styles Bootstrap dans chaque application, nous pouvons créer un modèle ou un ensemble de modèles partagés par toutes les applications. Tant que Django sait rechercher des modèles dans ce nouveau répertoire partagé, il peut enregistrer de nombreux styles répétés.

Dans ce nouveau fichier (personal_portfolio / templates / base.html), ajoutez les lignes de code suivantes:

% bloc Contenu de la page % % bloc terminal %

Maintenant en hello_world / templates / hello_world.html, nous pouvons étendre ce modèle de base:

% s'étend "base.html" %

% bloc Contenu de la page %
<h1>Bonjour le monde!</h1>
% bloc terminal %

Qu'est-ce qui se passe ici est que tout HTML à l'intérieur du Contenu de la page bloc est ajouté à l'intérieur du même bloc base.html.

Pour installer Bootstrap dans votre application, vous utiliserez le CDN Bootstrap. C’est un moyen très simple d’installer Bootstrap qui consiste simplement à ajouter quelques lignes de code à base.html. Consultez le code source pour voir comment ajouter les liens CDN à votre projet.

Tous les futurs modèles que nous créerons seront étendus base.html afin que nous puissions inclure le style Bootstrap sur chaque page sans avoir à importer à nouveau les styles.

Avant de voir notre nouvelle application stylée, nous devons dire à notre projet Django que base.html existe. Le registre des paramètres par défaut modèle répertoires dans chaque application, mais pas dans le répertoire du projet lui-même. Dans personal_portfolio / settings.py, mettre à jour GABARITS:

GABARITS = [[[[
    
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [[[["personal_portfolio / templates /"],
        "APP_DIRS": Vrai,
        "OPTIONS": 
            "context_processors": [[[[
                "django.template.context_processors.debug",
                "django.template.context_processors.request",
                "django.contrib.auth.context_processors.auth",
                "django.contrib.messages.context_processors.messages",
            ]
        ,
    
]

Maintenant, quand vous visitez localhost: 8000, vous devriez voir que la page a été formatée avec un style légèrement différent:

Bonjour le monde! vue du site Django avec les styles Bootstrap

Chaque fois que vous souhaitez créer des modèles ou importer des scripts que vous souhaitez utiliser dans toutes vos applications Django au sein d'un projet, vous pouvez les ajouter à ce répertoire au niveau du projet et les étendre à l'intérieur de vos modèles d'application.

L’ajout de modèles est la dernière étape de la création de votre Bonjour le monde! Site Django. Vous avez appris le fonctionnement du moteur de modèles Django et comment créer des modèles au niveau du projet pouvant être partagés par toutes les applications de votre projet Django.

Dans cette section, vous avez appris à créer un Bonjour le monde! Site Django en créant un projet avec une seule application. Dans la section suivante, vous allez créer une autre application pour présenter les projets de développement Web et en apprendre davantage sur les modèles dans Django!

Le code source de cette section est disponible sur GitHub.

Présentez vos projets

Tout développeur Web cherchant à créer un portefeuille a besoin d'un moyen de montrer les projets sur lesquels il a travaillé. C’est ce que vous allez construire maintenant. Vous allez créer une autre application Django appelée projets qui contiendra une série d'exemples de projets qui seront affichés à l'utilisateur. Les utilisateurs peuvent cliquer sur des projets et voir plus d'informations sur votre travail.

Avant de construire le projets l’application, supprimons d’abord le Bonjour le monde application. Tout ce que vous devez faire est de supprimer le Bonjour le monde répertoire et supprimer la ligne "Bonjour le monde", de INSTALLED_APPS dans settings.py:

INSTALLED_APPS = [[[[
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'Bonjour le monde',  # Supprimer cette ligne
]

Enfin, vous devez supprimer le chemin d’URL créé dans personal_portfolio / urls.py:

de django.contrib importation admin
de django.urls importation chemin, comprendre

urlpatterns = [[[[
    chemin('admin /', admin.site.les urls),
    chemin('', comprendre('hello_world.urls')),  # Supprimer cette ligne
]

Maintenant que vous avez supprimé le Bonjour le monde application, nous pouvons créer le projets app. Assurez-vous d'être dans le rp-portfolio répertoire, exécutez la commande suivante dans votre console:

$ python manage.py projets startapp

Cela créera un répertoire nommé projets. Les fichiers créés sont les mêmes que ceux créés lors de la configuration du Bonjour le monde application. Afin de connecter notre application, nous devons l'ajouter à INSTALLED_APPS dans settings.py:

INSTALLED_APPS = [[[[
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'projets',
]

Découvrez le code source de cette section sur GitHub. Nous n'allons pas nous inquiéter des URLs pour cette application pour l'instant. Au lieu de cela, nous allons nous concentrer sur la construction d’un Projet modèle.

Projets App: Modèles

Si vous souhaitez stocker des données à afficher sur un site Web, vous aurez besoin d’une base de données. En règle générale, si vous souhaitez créer une base de données avec des tables et des colonnes dans ces tables, vous devez utiliser SQL pour gérer la base de données. Mais lorsque vous utilisez Django, vous n'avez pas besoin d'apprendre un nouveau langage, car il dispose d'un objet ORM (Object Relational Mapper) intégré.

Un ORM est un programme qui vous permet de créer des classes qui correspondent à des tables de base de données. Les attributs de classe correspondent aux colonnes et les instances des classes correspondent aux lignes de la base de données. Ainsi, au lieu d'apprendre un tout nouveau langage pour créer notre base de données et ses tables, nous pouvons simplement écrire quelques classes Python.

Lorsque vous utilisez un ORM, les classes que vous construisez et qui représentent des tables de base de données sont appelées des modèles. À Django, ils vivent dans le models.py module de chaque application Django.

Dans votre application de projets, vous n’avez besoin que d’une seule table pour stocker les différents projets que vous afficherez à l’utilisateur. Cela signifie que vous n'aurez besoin que de créer un modèle dans models.py.

Le modèle que vous allez créer sera appelé Projet et aura les champs suivants:

  • Titre sera un champ de chaîne courte pour contenir le nom de votre projet.
  • la description sera un champ de chaîne plus grand pour contenir un morceau de texte plus long.
  • La technologie sera un champ de chaîne, mais son contenu sera limité à un nombre restreint de choix.
  • image sera un champ d’image contenant le chemin du fichier où l’image est stockée.

Pour créer ce modèle, nous allons créer une nouvelle classe dans models.py et ajoutez ce qui suit dans nos champs:

de django.db importation des modèles

classe Projet(des modèles.Modèle):
    Titre = des modèles.CharField(longueur maximale=100)
    la description = des modèles.Champ de texte()
    La technologie = des modèles.CharField(longueur maximale=20)
    image = des modèles.FilePathField(chemin="/ img")

Les modèles Django sont livrés avec de nombreux types de champs de modèles intégrés. Nous n’en avons utilisé que trois dans ce modèle. CharField est utilisé pour les chaînes courtes et spécifie une longueur maximale.

Champ de texte est similaire à CharField mais peut être utilisé pour un texte de formulaire plus long car il n’a pas de limite de longueur maximale. Finalement, FilePathField contient également une chaîne mais doit pointer sur un nom de chemin de fichier.

Maintenant que nous avons créé notre Projet classe, nous avons besoin de Django pour créer la base de données. Par défaut, l'ORM de Django crée des bases de données en SQLite, mais vous pouvez utiliser d'autres bases de données utilisant le langage SQL, telles que PostgreSQL ou MySQL, avec l'ORM de Django.

Pour démarrer le processus de création de notre base de données, nous devons créer un migration. Une migration est un fichier contenant un Migration classe avec des règles qui indiquent à Django les modifications à apporter à la base de données. Pour créer la migration, tapez la commande suivante dans la console, en vous assurant que vous êtes bien rp-portfolio annuaire:

$ projets python manage.py makemigrations
Migrations pour 'projets':
        projets / migrations / 0001_initial.py
                - Créer un projet modèle

Vous devriez voir qu'un fichier projets / migrations / 0001_initial.py a été créé dans l'application de projets. Consultez ce fichier dans le code source pour vous assurer que votre migration est correcte.

Maintenant que vous avez créé un fichier de migration, vous devez appliquer les migrations définies dans le fichier de migration et créer votre base de données à l'aide de la émigrer commander:

$ python manage.py migrer des projets
Opérations à effectuer:
        Appliquer toutes les migrations: projets
Migrations en cours:
        Application de projects.0001_initial ... OK

Vous devriez également voir qu'un fichier appelé db.sqlite3 a été créé à la racine de votre projet. Maintenant, votre base de données est configurée et prête à fonctionner. Vous pouvez maintenant créer dans votre table des lignes contenant les différents projets que vous souhaitez afficher sur votre site de portefeuille.

Pour créer des instances de notre Projet classe, nous allons devoir utiliser le shell Django. Le shell Django est similaire au shell Python, mais vous permet d'accéder à la base de données et de créer des entrées. Pour accéder au shell Django, nous utilisons une autre commande de gestion Django:

Une fois que vous avez accédé au shell, vous remarquerez que l’invite de commande changera de $ à >>>. Vous pouvez ensuite importer vos modèles:

>>>

>>> de projets.modèles importation Projet

Nous allons d’abord créer un nouveau projet avec les attributs suivants:

  • prénom: Mon premier projet
  • la description: Un projet de développement web.
  • La technologie: Django
  • image: img / project1.png

Pour ce faire, nous créons une instance de la classe Project dans le shell Django:

>>>

>>> p1 = Projet(
...     Titre='Mon premier projet',
...     la description='Un projet de développement web.',
...     La technologie='Django',
...     image='img / project1.png'
... )
>>> p1.enregistrer()

Cela crée une nouvelle entrée dans votre table de projets et l’enregistre dans la base de données. Vous avez maintenant créé un projet que vous pouvez afficher sur le site de votre portefeuille.

La dernière étape de cette section consiste à créer deux exemples de projets supplémentaires:

>>>

>>> p2 = Projet(
...     Titre='Mon deuxième projet',
...     la description="Un autre projet de développement web.",
...     La technologie='Ballon',
...     image='img / project2.png'
... )
>>> p2.enregistrer()
>>> p3 = Projet(
...     Titre="Mon troisième projet",
...     la description='Un projet de développement final.',
...     La technologie='Django',
...     image='img / project3.png'
... )
>>> p3.enregistrer()

Bravo d'avoir atteint la fin de cette section! Vous savez maintenant comment créer des modèles dans Django et construire des fichiers de migration afin de pouvoir traduire ces classes de modèles en tables de base de données. Vous avez également utilisé le shell Django pour créer trois instances de votre classe de modèle.

Dans la section suivante, nous allons prendre ces trois projets que vous avez créés et créer une fonction d'affichage pour les afficher aux utilisateurs sur une page Web. Vous pouvez trouver le code source de cette section du tutoriel sur GitHub.

Projets App: Vues

Maintenant que vous avez créé les projets à afficher sur votre site de portefeuille, vous devez créer des fonctions d'affichage pour envoyer les données de la base de données aux modèles HTML.

dans le projets app, vous allez créer deux vues différentes:

  1. Une vue d'index contenant un extrait d'informations sur chaque projet
  2. Une vue détaillée qui montre plus d'informations sur un sujet particulier

Commençons par la vue index car la logique est légèrement plus simple. À l'intérieur views.py, vous devrez importer le Projet classe de models.py et créer une fonction index_projet () qui rend un modèle appelé project_index.html. Dans le corps de cette fonction, vous ferez une requête Django ORM pour sélectionner tous les objets du dossier. Projet table:

    1 de django.shortcuts importation rendre
    2 de projets.modèles importation Projet
    3 
    4 def index_projet(demande):
    5     projets = Projet.objets.tout()
    6     le contexte = 
    7         'projets': projets
    8     
    9     revenir rendre(demande, 'project_index.html', le contexte)

Il se passe beaucoup de choses dans ce bloc de code, alors décomposons-le.

Dans ligne 6, vous effectuez un question. Une requête est simplement une commande qui vous permet de créer, d'extraire, de mettre à jour ou de supprimer des objets (ou des lignes) dans votre base de données. Dans ce cas, vous récupérez tous les objets dans le projets table.

Une requête de base de données renvoie une collection de tous les objets correspondant à la requête, appelée Queryset. Dans ce cas, vous souhaitez que tous les objets de la table soient renvoyés, ce qui renverra une collection de tous les projets.

Dans ligne 7 du bloc de code ci-dessus, nous définissons un dictionnaire le contexte. Le dictionnaire n'a qu'une entrée projets auquel nous affectons notre ensemble de requêtes contenant tous les projets. Le dictionnaire de contexte est utilisé pour envoyer des informations à notre modèle. Chaque fonction de vue que vous créez doit avoir un dictionnaire de contexte.

Dans ligne 10, le contexte est ajouté comme argument à rendre(). Toute entrée dans le le contexte dictionnaire sont disponibles dans le modèle, tant que le le contexte l'argument est passé à rendre(). Vous devrez créer un dictionnaire de contexte et le transmettre à rendre dans chaque fonction de vue que vous créez.

Nous rendons également un modèle nommé project_index.html, qui n’existe pas encore. Ne vous inquiétez pas pour ça pour le moment. Vous créerez les modèles pour ces vues dans la section suivante.

Ensuite, vous devrez créer le projet_detail () fonction de vue. Cette fonction nécessitera un argument supplémentaire: l’identifiant du projet en cours de visualisation.

Sinon, la logique est similaire:

13 def détail_projet(demande, pk):
14     projet = Projet.objets.obtenir(pk=pk)
15     le contexte = 
16         'projet': projet
17     
18     revenir rendre(demande, 'project_detail.html', le contexte)

Dans ligne 14, nous effectuons une autre requête. Cette requête récupère le projet avec la clé primaire, pk, égal à celui de l'argument de la fonction. Nous assignons ensuite ce projet dans notre le contexte dictionnaire, que nous passons à rendre(). Encore une fois, il y a un modèle project_detail.html, que nous avons encore à créer.

Une fois vos fonctions de vue créées, nous devons les relier à des URL. Nous allons commencer par créer un fichier projets / urls.py pour contenir la configuration de l'URL pour l'application. Ce fichier doit contenir le code suivant:

    1 de django.urls importation chemin
    2 de . importation vues
    3 
    4 urlpatterns = [[[[
    5     chemin("", vues.index_projet, prénom="project_index"),
    6     chemin("/ ", vues.détail_projet, prénom="projet_detail"),
    7 ]

Dans ligne 5, nous relions l'URL racine de notre application au index_projet vue. Il est légèrement plus compliqué de brancher le détail_projet vue. Pour ce faire, nous voulons que l'URL soit /1, ou / 2et ainsi de suite, selon les cas pk du projet.

le pk la valeur dans l'URL est la même pk passé à la fonction d'affichage, vous devez donc générer dynamiquement ces URL en fonction du projet que vous souhaitez afficher. Pour ce faire, nous avons utilisé le notation. Cela indique simplement à Django que la valeur transmise dans l'URL est un entier et que son nom de variable est pk.

Avec ceux qui sont maintenant configurés, nous devons relier ces URL aux URL du projet. Dans personal_portfolio / urls.py, ajoutez la ligne de code en surbrillance suivante:

de django.contrib importation admin
de django.urls importation chemin, comprendre

urlpatterns = [[[[
    chemin("admin /", admin.site.les urls),
    chemin("projets/", comprendre("projets.urls")),
]

Cette ligne de code inclut toutes les URL de l’application de projets, mais signifie qu’elles sont accessibles lorsque préfixé par projets/. Il existe maintenant deux URL complètes accessibles avec notre projet:

  • localhost: 8000 / projets: La page d'index du projet
  • localhost: 8000 / projets / 3: La vue détaillée du projet avec pk = 3

Ces URL ne fonctionnent toujours pas correctement car nous n’avons aucun modèle HTML. Mais nos points de vue et notre logique sont en place, il ne reste donc plus qu’à créer ces modèles. Si vous voulez vérifier votre code, jetez un coup d'œil au code source de cette section.

Application Projets: Modèles

Phew! Vous êtes presque là avec cette application. Notre dernière étape consiste à créer deux modèles:

  1. le index_projet modèle
  2. le détail_projet modèle

Comme nous avons ajouté des styles Bootstrap à notre application, nous pouvons utiliser certains composants pré-stylés pour rendre les vues agréables. Commençons par le index_projet modèle.

Pour le index_projet modèle, vous créerez une grille de cartes Bootstrap, chaque carte affichant les détails du projet. Bien sûr, nous ne savons pas combien de projets il va y avoir. En théorie, il pourrait y en avoir des centaines à afficher.

Nous ne souhaitons pas créer 100 cartes Bootstrap différentes et coder en dur dans toutes les informations relatives à chaque projet. Au lieu de cela, nous allons utiliser une fonctionnalité du moteur de template Django: pour les boucles.

Using this feature, you’ll be able to loop through all the projects and create a card for each one. The for loop syntax in the Django template engine is as follows:

% pour projet dans projets %
# Do something... #
% endfor %

Now that you know how for loops work, you can add the following code to a file named projects/templates/project_index.html:

    1 % s'étend "base.html" %
    2 % charge statique %
    3 % bloc page_content %
    4 <h1>Projects</h1>
    5 <div classe="row">
    6 % pour projet dans projets %
    7     <div classe="col-md-4">
    8         <div classe="card mb-2">
    9             <img classe="card-img-top" src="% statique project.image %">
dix             <div classe="card-body">
11                 <h5 classe="card-title"> project.title </h5>
12                 <p classe="card-text"> project.description </p>
13                 <une href="% url 'project_detail' project.pk %"
14                    classe="btn btn-primary">
15                     Read More
16                 </une>
17             </div>
18         </div>
19     </div>
20     % endfor %
21 </div>
22 % endblock %

There’s a lot of Bootstrap HTML here, which is not the focus of this tutorial. Feel free to copy and paste and take a look at the Bootstrap docs if you’re interested in learning more. Instead of focusing on the Bootstrap, there are a few things to highlight in this code block.

Dans ligne 1, we extend base.html as we did in the Hello, World! app tutorial. I’ve added some more styling to this file to include a navigation bar and so that all the content is contained in a Bootstrap container. The changes to base.html can be seen in the source code on GitHub.

Sur line 2, we include a % load static % tag to include static files such as images. Remember back in the section on Django models, when you created the Project model. One of its attributes was a filepath. That filepath is where we’re going to store the actual images for each project.

Django automatically registers static files stored in a directory named static/ in each application. Our image file path names were of the structure: img/.png.

When loading static files, Django looks in the static/ directory for files matching a given filepath within static/. So, we need to create a directory named static/ with another directory named img/ inside. À l'intérieur img/, you can copy over the images from the source code on GitHub.

Sur line 6, we begin the for loop, looping over all projects passed in by the le contexte dictionary.

Inside this for loop, we can access each individual project. To access the project’s attributes, you can use dot notation inside double curly brackets. For example, to access the project’s title, you use project.title . The same notation can be used to access any of the project’s attributes.

Sur line 9, we include our project image. Inside the src attribute, we add the code % static project.image %. This tells Django to look inside the static files to find a file matching project.image.

The final point that we need to highlight is the link on ligne 13. This is the link to our project_detail page. Accessing URLs in Django is similar to accessing static files. The code for the URL has the following form:

% url '' <view_function_arguments> %

In this case, we are accessing a URL path named project_detail, which takes integer arguments corresponding to the pk number of the project.

With all that in place, if you start the Django server and visit localhost:8000/projects, then you should see something like this:

project index view

Avec le project_index.html template in place, it’s time to create the project_detail.html template. The code for this template is below:

% s'étend "base.html" %
% charge statique %

% bloc page_content %
<h1> project.title </h1>
<div classe="row">
    <div classe="col-md-8">
        <img src="% statique project.image %" alt="" largeur="100%">
    </div>
    <div classe="col-md-4">
        <h5>About the project:</h5>
        <p> project.description </p>
        <br>
        <h5>Technology used:</h5>
        <p> project.technology </p>
    </div>
</div>
% endblock %

The code in this template has the same functionality as each project card in the project_index.html template. The only difference is the introduction of some Bootstrap columns.

If you visit localhost:8000/projects/1, you should see the detail page for that first project you created:

project detail view

In this section, you learned how to use models, views, and templates to create a fully functioning app for your personal portfolio project. Check out the source code for this section on GitHub.

In the next section, you’ll build a fully functioning blog for your site, and you’ll also learn about the Django admin page and forms.

Share Your Knowledge With a Blog

A blog is a great addition to any personal portfolio site. Whether you update it monthly or weekly, it’s a great place to share your knowledge as you learn. In this section, you’re going to build a fully functioning blog that will allow you to perform the following tasks:

  • Create, update, and delete blog posts
  • Display posts to the user as either an index view or a detail view
  • Assign categories to posts
  • Allow users to comment on posts

You’ll also learn how to use the Django Admin interface, which is where you’ll create, update, and delete posts and categories as necessary.

Before you get into building out the functionality of this part of your site, create a new Django app named blog. Don’t delete projets. You’ll want both apps in your Django project:

$ python manage.py startapp blog

This may start to feel familiar to you, as its your third time doing this. Don’t forget to add blog à ton INSTALLED_APPS dans personal_porfolio/settings.py:

INSTALLED_APPS = [[[[
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "projects",
    "blog",
]

Hold off on hooking up the URLs for now. As with the projets app, you’ll start by adding your models.

Blog App: Models

le models.py file in this app is much more complicated than in the projets app.

You’re going to need three separate database tables for the blog:

  1. Post
  2. Catégorie
  3. Comment

These tables need to be related to one another. This is made easier because Django models come with fields specifically for this purpose.

Below is the code for the Catégorie et Post models:

    1 de django.db importation des modèles
    2 
    3 classe Catégorie(des modèles.Modèle):
    4     prénom = des modèles.CharField(max_length=20)
    5 
    6 classe Post(des modèles.Modèle):
    7     Titre = des modèles.CharField(max_length=255)
    8     corps = des modèles.TextField()
    9     created_on = des modèles.DateTimeField(auto_now_add=Vrai)
dix     last_modified = des modèles.DateTimeField(auto_now=Vrai)
11     catégories = des modèles.ManyToManyField('Category', related_name='posts')

le Catégorie model is very simple. All that’s needed is a single CharField in which we store the name of the category.

le Titre et corps fields on the Post model are the same field types as you used in the Project model. We only need a CharField pour le Titre as we only want a short string for the post title. The body needs to be a long-form piece of text, so we use a TextField.

The next two fields, created_on et last_modified, are Django DateTimeFields. These store a datetime object containing the date and time when the post was created and modified respectively.

Sur ligne 11, la DateTimeField takes an argument auto_now_add=True. This assigns the current date and time to this field whenever an instance of this class is created.

Sur ligne 12, la DateTimeField takes an argument auto_now=True. This assigns the current date and time to this field whenever an instance of this class is saved. That means whenever you edit an instance of this class, the date_modified is updated.

The final field on the post model is the most interesting. We want to link our models for categories and posts in such a way that beaucoup categories can be assigned to beaucoup posts. Luckily, Django makes this easier for us by providing a ManytoManyField field type. This field links the Post et Catégorie models and allows us to create a relationship between the two tables.

le ManyToManyField takes two arguments. The first is the model with which the relationship is, in this case its Catégorie. The second allows us to access the relationship from a Catégorie object, even though we haven’t added a field there. By adding a related_name de des postes, we can access category.posts to give us a list of posts with that category.

The third and final model we need to add is Comment. We’ll use another relationship field similar the ManyToManyField that relates Post et Catégorie. However, we only want the relationship to go one way: one post should have many comments.

You’ll see how this works after we define the Comment class:

16 classe Comment(des modèles.Modèle):
17     auteur = des modèles.CharField(max_length=60)
18     corps = des modèles.TextField()
19     created_on = des modèles.DateTimeField(auto_now_add=Vrai)
20     poster = des modèles.ForeignKey('Post', on_delete=des modèles.CASCADE)

The first three fields on this model should look familiar. There’s an auteur field for users to add a name or alias, a corps field for the body of the comment, and a created_on field that is identical to the created_on field on the Post model.

Sur line 20, we use another relational field, the ForeignKey champ. This is similar to the ManyToManyField but instead defines a many to one relationship. The reasoning behind this is that beaucoup comments can be assigned to un post. But you can’t have a comment that corresponds to many posts.

le ForeignKey field takes two arguments. The first is the other model in the relationship, in this case, Post. The second tells Django what to do when a post is deleted. If a post is deleted, then we don’t want the comments related to it hanging around. We, therefore, want to delete them as well, so we add the argument on_delete=models.CASCADE.

Once you’ve created the models, you can create the migration files with makemigrations:

$ python manage.py makemigrations blog

The final step is to migrate the tables. This time, don’t add the app-specific flag. Later on, you’ll need the User model that Django creates for you:

$ python manage.py migrer

Now that you’ve created the models, we can start to add some posts and categories. You won’t be doing this from the command line as you did with the projects, as typing out a whole blog post into the command line would be unpleasant to say the least!

Instead, you’ll learn how to use the Django Admin, which will allow you to create instances of your model classes in a nice web interface.

Don’t forget that you can check out the source code for this section on GitHub before moving onto the next section.

Blog App: Django Admin

The Django Admin is a fantastic tool and one of the great benefits of using Django. As you’re the only person who’s going to be writing blog posts and creating categories, there’s no need to create a user interface to do so.

On the other hand, you don’t want to have to write blog posts in the command line. This is where the admin comes in. It allows you to create, update, and delete instances of your model classes and provides a nice interface for doing so.

Before you can access the admin, you need to add yourself as a superuser. This is why, in the previous section, you applied migrations project-wide as opposed to just for the app. Django comes with built-in user models and a user management system that will allow you to login to the admin.

To start off, you can add yourself as superuser using the following command:

$ python manage.py createsuperuser

You’ll then be prompted to enter a username followed by your email address and password. Once you’ve entered the required details, you’ll be notified that the superuser has been created. Don’t worry if you make a mistake since you can just start again:

Username (leave blank to use 'jasmine'): jfiner
Email address: jfiner@example.com
Password:
Password (again):
Superuser created successfully.

Aller vers localhost:8000/admin and log in with the credentials you just used to create a superuse. You’ll see a page similar to the one below:

The Default Django Admin

The User and Groups models should appear, but you’ll notice that there’s no reference to the models you’ve created yourself. That’s because you need to register them inside the admin.

dans le blog directory, open the file admin.py and type the following lines of code:

    1 de django.contrib importation admin
    2 de blog.models importation Post, Catégorie
    3 
    4 classe PostAdmin(admin.ModelAdmin):
    5     passer
    6 
    7 classe CategoryAdmin(admin.ModelAdmin):
    8     passer
    9 
dix admin.site.registre(Post, PostAdmin)
11 admin.site.registre(Catégorie, CategoryAdmin)

Sur line 2, you import the models you want to register on the admin page.

Sur line 5 et line 9, you define empty classes PostAdmin et CategoryAdmin. For the purposes of this tutorial, you don’t need to add any attributes or methods to these classes. They are used to customize what is shown on the admin pages. For this tutorial, the default configuration is enough.

The last two lines are the most important. These register the models with the admin classes. If you now visit localhost:8000/admin, then you should see that the Post et Catégorie models are now visible:

Django Admin with Posts and Categories

If you click into Posts ou Categorys, you should be able to add new instances of both models. I like to add the text of fake blog posts by using lorem ipsum dummy text.

Create a couple of fake posts and assign them fake categories before moving onto the next section. That way, you’ll have posts you can view when we create our templates.

Don’t forget to check out the source code for this section before moving on to building out the views for our app.

Blog App: Views

You’ll need to create three view functions in the views.py file in the blog directory:

  • blog_index will display a list of all your posts.
  • blog_detail will display the full post as well as comments and a form to allow users to create new comments.
  • blog_category will be similar to blog_index, but the posts viewed will only be of a specific category chosen by the user.

The simplest view function to start with is blog_index(). This will be very similar to the project_index() view from your projet app. You’ll just query the Post models and retrieve all its objects:

    1 de django.shortcuts importation rendre
    2 de blog.models importation Post
    3 
    4 def blog_index(demande):
    5     des postes = Post.objets.tout().order_by('-created_on')
    6     le contexte = 
    7         "posts": des postes,
    8     
    9     revenir rendre(demande, "blog_index.html", le contexte)

Sur ligne 3, you import the Post model, and on line 6 inside the view function, you obtain a Queryset containing all the posts in the database. order_by() orders the Queryset according to the argument given. The minus sign tells Django to start with the largest value rather than the smallest. We use this, as we want the posts to be ordered with the most recent post first.

Finally, you define the le contexte dictionary and render the template. Don’t worry about creating it yet. You’ll get to creating those in the next section.

Next, you can start to create the blog_category() view. The view function will need to take a category name as an argument and query the Post database for all posts that have been assigned the given category:

13 def blog_category(demande, Catégorie):
14     des postes = Post.objets.filtre(
15         categories__name__contains=Catégorie
16     ).order_by(
17         '-created_on'
18     )
19     le contexte = 
20         "category": Catégorie,
21         "posts": des postes
22     
23     revenir rendre(demande, "blog_category.html", le contexte)

Sur ligne 14, you’ve used a Django Queryset filter. The argument of the filter tells Django what conditions need to be met for an object to be retrieved. In this case, we only want posts whose categories contain the category with the name corresponding to that given in the argument of the view function. Again, you’re using order_by() to order posts starting with the most recent.

We then add these posts and the category to the le contexte dictionary, and render our template.

The last view function to add is blog_detail(). This is more complicated as we are going to include a form. Before you add the form, just set up the view function to show a specific post with a comment associated with it. This function will be almost equivalent to the project_detail() view function in the projets app:

21 def blog_detail(demande, pk):
22     poster = Post.objets.obtenir(pk=pk)
23     commentaires = Comment.objets.filtre(poster=poster)
24     le contexte = 
25         "post": poster,
26         "comments": commentaires,
27     
28 
29     revenir rendre(demande, "blog_detail.html", le contexte)

The view function takes a pk value as an argument and, on line 22, retrieves the object with the given pk.

Sur line 23, we retrieve all the comments assigned to the given post using Django filters again.

Lastly, add both poster et commentaires au le contexte dictionary and render the template.

To add a form to the page, you’ll need to create another file in the blog directory named forms.py. Django forms are very similar to models. A form consists of a class where the class attributes are form fields. Django comes with some built-in form fields that you can use to quickly create the form you need.

For this form, the only fields you’ll need are auteur, which should be a CharField, et corps, which can also be a CharField.

blog/forms.py should contain the following code:

de django importation formes

classe CommentForm(formes.Form):
    auteur = formes.CharField(
        max_length=60,
        widget=formes.TextInput(attrs=
            "class": "form-control",
            "placeholder": "Your Name"
        )
    )
    corps = formes.CharField(widget=formes.Textarea(
        attrs=
            "class": "form-control",
            "placeholder": "Leave a comment!"
        )
    )

You’ll also notice an argument widget has been passed to both the fields. le auteur field has the forms.TextInput widget. This tells Django to load this field as an HTML text input element in the templates. le corps field uses a forms.TextArea widget instead, so that the field is rendered as an HTML text area element.

These widgets also take an argument attrs, which is a dictionary and allows us to specify some CSS classes, which will help with formatting the template for this view later. It also allows us to add some placeholder text.

When a form is posted, a POST request is sent to the server. So, in the view function, we need to check if a POST request has been received. We can then create a comment from the form fields. Django comes with a handy is_valid() on its forms, so we can check that all the fields have been entered correctly.

Once you’ve created the comment from the form, you’ll need to save it using save() and then query the database for all the comments assigned to the given post. Your view function should contain the following code:

21 def blog_detail(demande, pk):
22     poster = Post.objets.obtenir(pk=pk)
23 
24     forme = CommentForm()
25     si demande.méthode == 'POST':
26         forme = CommentForm(demande.POST)
27         si forme.is_valid():
28             commentaire = Comment(
29                 auteur=forme.cleaned_data[[[["author"],
30                 corps=forme.cleaned_data[[[["body"],
31                 poster=poster
32             )
33             commentaire.enregistrer()
34 
35     commentaires = Comment.objets.filtre(poster=poster)
36     le contexte = 
37         "post": poster,
38         "comments": commentaires,
39         "form": CommentForm(),
40     
41     revenir rendre(demande, "blog_detail.html", le contexte)

Sur line 25, we create an instance of our form class. Don’t forget to import your form at the beginning of the file:

de . importation CommentForm

We then go on to check if a POST request has been received. If it has, then we create a new instance of our form, populated with the data entered into the form.

The form is then validated using is_valid(). If the form is valid, a new instance of Comment is created. You can access the data from the form using form.cleaned_data, which is a dictionary.

They keys of the dictionary correspond to the form fields, so you can access the author using form.cleaned_data['author']. Don’t forget to add the current post to the comment when you create it.

The Django forms module will output some errors, which you can display to the user. This is beyond the scope of this tutorial, but you can read more about rendering form error messages in the Django documentation.

Sur line 34, save the comment and go on to add the forme au le contexte dictionary so you can access the form in the HTML template.

The final step before you get to create the templates and actually see this blog up and running is to hook up the URLs. You’ll need create another urls.py file inside blog/ and add the URLs for the three views:

de django.urls importation chemin
de . importation vues

urlpatterns = [[[[
    chemin("", vues.blog_index, prénom="blog_index"),
    chemin("/", vues.blog_detail, prénom="blog_detail"),
    chemin("/", vues.blog_category, prénom="blog_category"),
]

Once the blog-specific URLs are in place, you need to add them to the projects URL configuration using include():

de django.contrib importation admin
de django.urls importation chemin, comprendre

urlpatterns = [[[[
    chemin("admin/", admin.site.urls),
    chemin("projects/", comprendre("projects.urls")),
    chemin("blog/", comprendre("blog.urls")),
]

With this set up, all the blog URLs will be prefixed with blog/, and you’ll have the following URL paths:

  • localhost:8000/blog: Blog index
  • localhost:8000/blog/1: Blog detail view of blog with pk=1
  • localhost:8000/blog/python: Blog index view of all posts with category python

These URLs won’t work just yet as you still need to create the templates.

In this section, you created all the views for your blog application. You learned how to use filters when making queries and how to create Django forms. It won’t be long now until you can see your blog app in action!

As always, don’t forget that you can check out the source code for this section on GitHub.

Blog App: Templates

The final piece of our blog app is the templates. By the end of this section, you’ll have created a fully functioning blog.

You’ll notice there are some bootstrap elements included in the templates to make the interface prettier. These aren’t the focus of the tutorial so I’ve glossed over what they do but do check out the Bootstrap docs to find out more.

The first template you’ll create is for the blog index in a new file blog/templates/blog_index.html. This will be very similar to the projects index view.

You’ll use a for loop to loop over all the posts. For each post, you’ll display the title and a snippet of the body. As always, you’ll extend the base template personal_porfolio/templates/base.html, which contains our navigation bar and some extra formatting:

    1 % s'étend "base.html" %
    2 % bloc page_content %
    3 <div classe="col-md-8 offset-md-2">
    4     <h1>Blog Index</h1>
    5     <heure>
    6     % pour poster dans des postes %
    7     <h2><une href="% url 'blog_detail' post.pk%"> post.title </une></h2>
    8     <petit>
    9          post.created_on.date  | 
dix         Categories: 
11         % pour Catégorie dans post.categories.all %
12         <une href="% url 'blog_category' category.name %">
13              category.name 
14         </une> 
15         % endfor %
16     </petit>
17     <p> post.body ...</p>
18     % endfor %
19 </div>
20 % endblock %

Sur line 7, we have the post title, which is a hyperlink. The link is a Django link where we are pointing to the URL named blog_detail, which takes an integer as its argument and should correspond to the pk value of the post.

Underneath the title, we’ll display the created_on attribute of the post as well as its categories. Sur ligne 11, we use another for loop to loop over all the categories assigned to the post.

Sur line 17, we use a template filter tranche to cut off the post body at 400 characters so that the blog index is more readable.

Once that’s in place, you should be able to access this page by visiting localhost:8000/blog:

Blog Index View

Next, create another HTML file blog/templates/blog_category.html où votre blog_category template will live. This should be identical to blog_index.html, except with the category name inside the h1 tag instead of Blog Index:

% s'étend "base.html" %
% bloc page_content %
<div classe="col-md-8 offset-md-2">
    <h1> Catégorie </h1>
    <heure>
    % pour poster dans des postes %
        <h2><une href="% url 'blog_detail' post.pk%"> post.title </une></h2>
        <petit>
             post.created_on.date  | 
            Categories: 
            % pour Catégorie dans post.categories.all %
            <une href="% url 'blog_category' category.name %">
                 category.name 
            </une> 
            % endfor %
        </petit>
        <p> post.body ...</p>
    % endfor %
</div>
% endblock %

Most of this template is identical to the previous template. The only difference is on line 4, where we use another Django template filter Titre. This applies titlecase to the string and makes words start with an uppercase character.

With that template finished, you’ll be able to access your category view. If you defined a category named python, you should be able to visit localhost:8000/blog/python and see all the posts with that category:

Blog Category View

The last template to create is the post_detail template. In this template, you’ll display the title and full body of a post.

Between the title and the body of the post, you’ll display the date the post was created and any categories. Underneath that, you’ll include a comments form so users can add a new comment. Under this, there will be a list of comments that have already been left:

    1 % extends "base.html" %
 2 % block page_content %
 3 <div classe="col-md-8 offset-md-2">
    4     <h1> post.title </h1>
    5     <petit>
    6          post.created_on.date  | 
    7         Categories: 
    8         % for category in post.categories.all %
 9         <une href="% url 'blog_category' category.name %">
dix              category.name 
11         </une> 
12         % endfor %
13     </petit>
14     <p> linebreaks </p>
15     <h3>Leave a comment:</h3>
16     <forme action="/blog/ post.pk /" méthode="post">
17         % csrf_token %
18         <div classe="form-group">
19              form.author 
20         </div>
21         <div classe="form-group">
22              form.body 
23         </div>
24         <bouton type="submit" classe="btn btn-primary">Soumettre</bouton>
25     </forme>
26     <h3>Comments:</h3>
27     % for comment in comments %
28     <p>
29         On comment.created_on.date  
30         <b> comment.author </b> wrote:
31     </p>
32     <p> comment.body </p>
33     <heure>
34     % endfor %
35 </div>
36 % endblock %

The first few lines of the template in which we display the post title, date, and categories is the same logic as for the previous templates. This time, when rendering the post body, use a linebreaks template filter. This tag registers line breaks as new paragraphs, so the body doesn’t appear as one long block of text.

Underneath the post, on line 16, you’ll display your form. The form action points to the URL path of the page to which you’re sending the POST request to. In this case, it’s the same as the page that is currently being visited. You then add a csrf_token, which provides security and renders the body and author fields of the form, followed by a submit button.

To get the bootstrap styling on the author and body fields, you need to add the form-control class to the text inputs.

Because Django renders the inputs for you when you include form.body et form.author , you can’t add these classes in the template. That’s why you added the attributes to the form widgets in the previous section.

Underneath the form, there’s another for loop that loops over all the comments on the given post. The comments, corps, auteur, et created_on attributes are all displayed.

Once that template is in place, you should be able to visit localhost:8000/blog/1 and view your first post:

Blog Detail View

You should also be able to access the post detail pages by clicking on their title in the blog_index view.

The final finishing touch is to add a link to the blog_index to the navigation bar in base.html. This way, when you click on Blog in the navigation bar, you’ll be able to visit the blog. Check out the updates to base.html in the source code to see how to add that link.

With that now in place, your personal portfolio site is complete, and you’ve created your first Django site. The final version of the source code containing all the features can be found on GitHub, so check it out! Click around the site a bit to see all the functionality and try leaving some comments on your posts!

You may find a few things here and there that you think need polishing. Go ahead and tidy them up. The best way to learn more about this web framework is through practice, so try to extend this project and make it even better! If you’re not sure where to start, I’ve left a few ideas for you in the conclusion below!

Conclusion

Congratulations, you’ve reached the end of the tutorial! We’ve covered a lot, so make sure to keep practicing and building. The more you build the easier it will become and the less you’ll have to refer back to this article or the documentation. You’ll be building sophisticated web applications in no time.

In this tutorial you’ve seen:

  • How to create Django projets et applications
  • How to add web pages with vues et des modèles
  • How to get user input with formes
  • How to hook your views and templates up with URL configurations
  • How to add data to your site using relational databases with Django’s Object Relational Mapper
  • How to use the Django Admin to manage your models

In addition, you’ve learned about the MVT structure of Django web applications and why Django is such a good choice for web development.

If you want to learn more about Django, do check out the documentation and make sure to stay tuned for Part 2 of this series!