TOC

Comment créer des vues Django

introduction

Si vous avez suivi notre sérieDjango Development, vous avez réussi à créer une application Django qui permet aux utilisateurs disposant de privilèges d'administrateur d'ajouter descomments etposts, via le tableau de bord de l'interface utilisateur d'administration de Django. Vous avez également configuré la persistance des données en tirant parti de MySQL et de la solution de mappage objet-relationnelmodels de Django.

Dans ce tutoriel, nous allons créer des Djangoviews qui permettent à notre application Web de gérer correctement les requêtes Web et de renvoyer les réponses Web requises. Comme défini dans lesDjango docs, une réponse Web peut être le contenu HTML d'une page Web, une redirection ou une erreur HTTP (par ex. 404). Le code des fonctions d’affichage peut techniquement vivre n’importe où dans votre projet, à condition qu’il se trouve sur votre chemin Python. Cependant, il existe certaines conventions populaires pour nommer et placer le fichier dans lequel ces fonctions d'affichage existent, et nous suivrons ces pratiques.

Une fois que vous avez terminé les étapes de ce didacticiel, votre site de blog Django va extraire un article récent dans l'URL deyour-IP-or-domain/post.

Conditions préalables

Ce tutoriel fait partie de la sérieDjango Development. Afin de compléter la configuration technique exacte de ce tutoriel, vous devriez avoir effectué les opérations suivantes:

Cependant, si vous avez une configuration Django existante, vous pouvez suivre pour mieux comprendre comment implémenter les vues Django.

[[step-1 -—- create-view-functions]] == Étape 1 - Créer des fonctions de vue

Dans votre terminal de serveur Ubuntu, vous devez d'abord vous déplacer dans le répertoire approprié et activer votre environnement virtuel Python: 

cd ~/my_blog_app
. env/bin/activate

Maintenant que votre environnement virtuel est activé, naviguons vers le répertoireblogsite où nous allons ouvrir un fichier Python et créer notre première vuefunction. 

cd ~/my_blog_app/blog/blogsite

Ouvrez le fichier de vues pour l’éditer, en utilisant nano ou l’éditeur de texte de votre choix. 

nano views.py

Lors de l'ouverture du fichier, vous devriez voir un code qui ressemble à ceci:

/my_blog_app/blog/blogsite/views.py

from django.shortcuts import render

# Create your views here.

Nous conserverons lesimport statement qui importe la fonctionrender() de la bibliothèquedjango.shortcuts. Lerender() function nous permet de combiner à la fois un modèle et un contexte afin que nous puissions renvoyer l'objetHttpResponse approprié. Gardez cela à l'esprit car pour chaque vue que nous écrivons, nous sommes responsables de l'instanciation, du remplissage et du retour d'unHttpResponse.

Nous ajouterons ensuite notre première vue qui accueillera les utilisateurs sur la page d’index. Nous allons importer la fonctionHttpResponse() de la bibliothèque Djangohttp. En utilisant cette fonction, nous transmettons du texte à afficher lorsque la page Web est demandée.

~/my_blog_app/blog/blogsite/views.py

from django.shortcuts import render
from django.http import HttpResponse


def index(request):
    return HttpResponse('Hello, welcome to the index page.')

Ensuite, nous ajouterons une fonction supplémentaire qui affichera le message individuel que nous allons créer plus tard dans le didacticiel.

~/my_blog_app/blog/blogsite/views.py

...
def individual_post(request):
    return HttpResponse('Hi, this is where an individual post will be.')

Notre fichier finalviews.py ressemblera à ceci.

~/my_blog_app/blog/blogsite/views.py

from django.http import HttpResponse
from django.shortcuts import render


def index(request):
    return HttpResponse('Hello, welcome to the index page.')

def individual_post(request):
    return HttpResponse('Hi, this is where an individual post will be.')

Lorsque vous avez terminé de modifier le fichier, veillez à enregistrer et à quitter.

À l'heure actuelle, il n'y a pas d'URL désignée vers laquelle ces fonctions pointent, nous devrons donc l'ajouter à notre blocurlpatterns dans notre fichier de configuration d'URL. Une fois les vues ajoutées, passons au mappage des URL via ce fichier de configuration afin de pouvoir afficher les pages que nous avons créées.

[[step-2 -—- map-urls-to-views]] == Étape 2 - Mapper les URL aux vues

Avec Django, il est relativement pratique pour les personnes de concevoir leurs propres URL à utiliser avec leur application. Cela se fait en pur Python en utilisant un fichier communément appelé votreURLconf ou fichier de «configuration d'URL».

Pour que la page Web soit affichée, Django doit d'abord déterminer le module racineURLconf à utiliser, puis cherche à rechercherurlpatterns, unlist data structure contenant tous les modèles d'URL. Django parcourt ensuite chaque modèle d'URL jusqu'à trouver le premier correspondant. Une fois qu'une correspondance est trouvée, Django trouve la vue associée, et cette fonction de vue recevra les données relatives au modèle d'URL et à un objetHttpRequest. En cas d'échec à tout moment de ce processus, unerror-handling view s'affiche à la place.

Dans le répertoire~/my_blog_app/blog/blogsite, ouvrez le fichierurls.py - également connu sous le nom de fichier URLconf - pour le modifier. Nous allons utiliser nano ici pour éditer le fichier. 

nano urls.py

Modifiez le fichier pour qu'il ressemble exactement à ceci, avec la listeurlpatterns comme indiqué ci-dessous.

~/my_blog_app/blog/blogsite/urls.py

from django.urls import path
from . import views


urlpatterns = [
    path('', views.index, name='index'),
    path('post/', views.individual_post, name='individual_post')
]

Lorsque vous avez terminé d'ajouter les lignes ci-dessus, enregistrez et fermez le fichier.

Une fois que nous avons mis à jour le fichier URLconf du répertoireblogsite, nous devons maintenant l'inclure dans l'URLconf du répertoireblog, sinon il ne sera pas reconnu. Nous devons le faire car il est défini commeROOT_URLCONF dans notre fichier de paramètres. Cela signifie que Django regarde l'URLconf du répertoireblog poururlpatterns.

Pour inclure notre URLconfblogsite dans notre URLconfblog, nous devons accéder à ce répertoire. 

cd ~/my_blog_app/blog/blog

Une fois que vous y êtes, vous pouvez ouvrir le fichier URLconf avec nano ou un autre éditeur de texte de votre choix. 

nano urls.py

Dans ce fichier, nous ajouterons les lignes suivantes pour inclure le fichier/blogsite/urls.py avec lequel nous venons de travailler, indiqué dans la deuxième ligne.

~/my_blog_app/blog/blog/urls.py

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('blogsite.urls'))
]

Enregistrez et fermez le fichier.

Maintenant ouvrons un navigateur Web pour naviguer vers les URL que nous avons créées et vérifier qu’elles affichent le texte que nous avons ajouté aux vues. Nous devrons nous déplacer dans le répertoire parent pour accéder au fichiermanage.py qui sert l'application Django. 

cd ..

Émettez la commande suivante en remplaçant votre adresse IP ci-dessous. 

python manage.py runserver your-server-ip:8000

Dans votre navigateur Web, accédez à l'URL suivante: 

your-server-ip:8000

Vous verrez une page Web qui ressemble à ceci:

Django Initial Index Page

Ensuite, accédez à l'URL suivante: 

your-server-ip:8000/post/

À partir de là, vous devriez voir ce qui suit être affiché:

Django Initial Post Page

Nous avons maintenant vérifié que les deux fichiersurls.py fonctionnent et les données nous montrent exactement ce à quoi nous nous attendions. Cela fonctionne, ajoutons de vraies données dans notre blog.

[[step-3 -—- create-a-blogpost]] == Étape 3 - Créer un blogpost

Maintenant que vous comprenez les bases des modèles et des vues d’URL, ajoutons un article de blog et l’afficherons sur la page Web au lieu du texte que nous avons codé en dur dans les fichiers Python.

Nous allons créer un message via la page d’administration que nous avons créée. Avec votre serveur servant l'application Django, utilisez un navigateur Web pour accéder à la page adminBlogsite à l'adresse: 

your-server-ip:8000/admin/blogsite/

Dans l'interface, cliquez sur le lien+ Add situé dans la lignePosts pour commencer à remplir la base de données avec un exemple d'article de blog.

Django Blogsite Admin Page

En cliquant sur le lien, vous verrez un formulaire de saisie ressemblant à ceci:

Django Add Post Form

Lorsque vous souhaitez ajouter un message, vous devez vous rendre sur cette page pour le faire. Alternativement, vous pouvez modifier les messages avec le lienChange.

Dans le formulaire, vous verrez les champs suivants:

Champ Contenu

Title

Ajoutez ici le titre de votre article de blog, par exempleMy First Blog Post.

Slug

Cela fait référence à la partie d'une URL qui identifie un élément d'adresse Web valide avec des mots-clés lisibles par l'homme. Ceci est généralement dérivé du titre de la page, donc dans ce cas, nous pouvons utilisermy-first-blog-post.

Content

Ceci est le corps de votre article de blog. Nous ajouterons simplementHello, World! à des fins d'exemple, mais c'est là que vous pouvez être verbeux.

Author

Dans ce champ, ajoutez votre nom ou nom d'utilisateur pertinent. Nous utiliseronsSammy.

Remplissez le formulaire de publication du blog à votre convenance.

Django Filled Out Blog Post Form

Une fois que vous avez ajouté des exemples de données dans la page, cliquez sur le boutonSAVE. Vous recevrez la page de confirmation suivante:

Django Post Submission Successful

Toutes nos félicitations! Vous avez créé votre premier article de blog!

Ensuite, vérifions qu’il a ajouté une ligne contenant les données que nous avons ajoutées à la base de données MySQL.

[[step-4 -—- display-database-data]] == Étape 4 - Afficher les données de la base de données

À ce stade, nous devons passer à MySQL, alors arrêtez le processus serveur actuel via le terminal en tapantCTRL + C, puis ouvrez votre interpréteur MySQL: 

mysql -u root

Une fois que vous êtes dans l'invite MySQL, accédez à la base de donnéesblog_data: 

use blog_data;

Affichez ensuite le contenu de la tableblogsite_post. 

select * from blogsite_post;

Vous recevrez une sortie similaire à celle-ci, qui devrait afficher les informations que vous avez ajoutées dans l'interface utilisateur admin. 

Output+----+--------------------+--------------------+---------------+----------------------------+--------+
| id | title              | slug               | content       | created_on                 | author |
+----+--------------------+--------------------+---------------+----------------------------+--------+
|  1 | My First Blog Post | my-first-blog-post | Hello, World! | 2018-04-24 17:10:00.139735 | Sammy  |
+----+--------------------+--------------------+---------------+----------------------------+--------+
1 row in set (0.00 sec)

Comme indiqué dans la sortie, il existe une ligne avec les données de la publication que nous avons ajoutée. Nous allons maintenant référencer ces données dans la fonction d'affichage pour les publications. UtilisezCTRL + D pour quitter l'interpréteur MySQL.

Accédez à l'emplacement du fichierviews.py à l'intérieur de votre applicationblogsite. 

cd ~/my_blog_app/blog/blogsite

Ouvrez maintenant le fichier afin que nous puissions inclure nos nouvelles données. 

nano views.py

Editez le fichier pour qu'il ressemble exactement à l'illustration ci-dessous.

~/my_blog_app/blog/blogsite

from django.shortcuts import render
from django.http import HttpResponse
from .models import Post


def index(request):
    return HttpResponse('Hello, welcome to the index page.')

def individual_post(request):
    recent_post = Post.objects.get(id__exact=1)
    return HttpResponse(recent_post.title + ': ' + recent_post.content)

Dans le code ci-dessus, nous avons ajouté une instructionimport supplémentaire pourPost. Nous avons également supprimé la chaîne citée desHttpResponse et l'avons remplacée par les données de notre article de blog. Pour référencer les données d'un objet particulier, nous utilisons l'ID de l'article de blog associé à l'objet que nous souhaitons afficher, et nous stockons cet ID dans une variable appeléerecent_post. Nous pouvons ensuite obtenir des champs particuliers de cet objet en ajoutant le champ avec un séparateur de période.

Une fois que vous avez enregistré et fermé le fichier, accédez à l'emplacement du fichiermanage.py pour exécuter l'application Django. 

cd ~/my_blog_app/blog
python manage.py runserver your-server-ip:8000/post/

Depuis un navigateur Web, accédez à l'adresse suivante: 

your-server-ip:8000/post/

Ici, nous verrons les changements que nous avons apportés. la page ressemblera à celle-ci, affichant le texte que vous avez ajouté à la publication.

Django Served Blog Post

Lorsque vous avez terminé d'inspecter la page, appuyez surCTRL + C dans le terminal pour arrêter le processus de s'exécuter.

Pour désactiver votre environnement de programmation, vous pouvez taper la commandedeactivate puis quitter le serveur.

Conclusion

Dans ce didacticiel, nous avons créé des vues, des modèles d'URL mappés et du texte affiché sur une page Web à partir de notre base de données d'articles de blog.

Le prochain didacticiel couvrira comment rendre cela plus esthétique en utilisant HTML pour créer Djangotemplates. Jusqu'à présent, cette série a couvert les modèles Django et les vues Django. Les modèles constituent la dernière partie cruciale pour la création de votre application Django.

Related