Recherche de site Web

Comment créer des applications Web adaptées aux mobiles à l’aide de Django Framework - Partie 3

"Cet article est révisé et mis à jour avec la dernière version de Django – Mai 2016 »

Dans la première partie de cette série, vous avez appris à installer et à configurer Django dans un environnement virtuel et vous avez créé le squelette de votre premier projet.

Ensuite, dans la partie 2, nous avons créé une application et un modèle pour les objets Post, que nous avons ensuite migrés vers la base de données. Enfin, nous vous avons montré comment intégrer votre application nouvellement créée à l’interface utilisateur d’administration de Django.

Ces articles font partie de la série Django :

Installation et configuration de Django Web Framework avec des environnements virtuels - Partie 1

Révision des bases de Python et création de votre première application Web avec Django - Partie 2

Dans ce guide final, nous verrons comment accéder à l’application à l’aide de l’interface utilisateur et comment la rendre compatible avec les mobiles pour tous les types d’appareils. Cela dit, commençons.

Création d’objets via l’interface d’administration de Django

Pour créer des objets de type Post (rappelez-vous qu’il s’agit du modèle que nous avons défini dans la partie 2 de cette série), nous allons utiliser l’interface d’administration de Django.

Assurez-vous que le serveur web intégré à Django fonctionne sur le port 8000 (ou un autre de votre choix) en exécutant la commande suivante à partir du répertoire externe myfirstdjangoproject :


cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000

Ouvrez maintenant votre navigateur Web et pointez sur http://ip-address:8000/admin, puis connectez-vous à l’aide des informations d’identification que vous avez configurées dans l’article précédent et commencez à écrire un article (qui, encore une fois, créera un objet de type Post et insérera les données associées dans la base de données sous-jacente) :

Répétez le processus 2 ou 3 fois :

Après avoir créé quelques articles, voyons ce que nous devons faire pour les afficher à l’aide de notre navigateur Web.

Notre premier point de vue

Notre première vue (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) sera chargée de filtrer tous les objets Post et de renvoyer ceux dont la valeur de whenPublished est inférieure ou égale à la date et à l’heure actuelles (whenPublished__lte=timezone.now()) ordonnée en descendant whenPublished, ce qui revient à dire « latest first ».

Ces objets sont enregistrés dans une variable commodément nommée posts, et sont renvoyés (identifiés comme allposts) pour être intégrés dans le HTML, comme nous le verrons dans la section suivante :


from django.shortcuts import render
from .models import Post
from django.utils import timezone
def posts(request):
        posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')
        return render(request, 'myblog/posts.html', {'allposts': posts})

Enfin, le double trait de soulignement dans whenPublished__lte ci-dessus est utilisé pour séparer un champ de base de données (whenPublished) d’un filtre ou d’une opération (lte=inférieur ou égal).

Une fois que nous avons défini notre vue initiale, travaillons sur le modèle associé.

Créer un modèle pour notre premier projet

En suivant les directives et les chemins donnés dans la section précédente, nous stockerons notre modèle initial dans myblog/templates/myblog. Cela signifie que vous devrez créer un répertoire nommé templates et un sous-répertoire appelé myblog :


cd ~/myfirstdjangoenv/myfirstdjangoproject/myblog
mkdir -p templates/myblog

Nous allons appeler le modèle posts.html et y insérer le code suivant. Vous remarquerez que nous ajoutons des références en ligne aux polices jQuery, Bootstrap, FontAwesome et Google.

De plus, nous avons inclus du code Python entre accolades dans le HTML. Veuillez noter que pour chaque objet de type Post, nous afficherons son titre, sa date de publication et son auteur, et enfin son texte. Enfin, en rouge vous verrez que nous faisons référence aux objets renvoyés via myblog/views.py :

Ok, voici le fichier posts.html :


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'">
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
</script>
    <style>
      .title {
        font-family: 'Indie Flower', serif;
        font-size: 30px;
        color: #1E90FF;
      }
      h1 {
        font-family: 'Pacifico', serif;
        font-size: 45px;
        color: #1E90FF;
      }
    </style>
</head>
<body>
<div class="container"><h1>My blog</h1><br>
{% for post in allposts %}
    <div>
        <div class="title">{{ post.title }}</div>
        <strong>Published on {{ post.whenPublished }} by {{ post.author }}.</strong>
        <p>{{ post.text|linebreaks }}</p>
    </div>
{% endfor %}
</div>
</body>
</html>

Dans le modèle ci-dessus, le filtre de sauts de ligne est utilisé pour remplacer les sauts de ligne en texte brut par l’équivalent HTML correspondant (<br /> ou </p>) pour formater correctement chaque message avec une séparation de paragraphe.

Ensuite, nous devons mettre en place un mappage entre les URL de notre application et les vues correspondantes qui renvoient les données. Pour ce faire, créez un fichier nommé urls.py inside myblog avec le contenu suivant :


from django.conf.urls import url
from . import views
urlpatterns = [
    url(r'^$', views.posts, name='posts'),
]

Le r'^$' mérite un peu plus d'explications. Le r de début indique à Django de traiter la chaîne à l’intérieur des guillemets simples comme une expression régulière.

En particulier, r'^$' représente une chaîne vide de sorte que lorsque nous pointons notre navigateur sur http://ip-address:8000 (et rien d'autre), les données renvoyées par la variable posts à l'intérieur de views.py (voir la section précédente) seront présentées dans notre page d'accueil :

Enfin, nous inclurons le fichier urls.py de notre application de blog (~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py) dans le urls.py de notre projet principal (~/myfirstdjangoenv/myfirstdjangoproject/myfirstdjangoproject/urls.py) :


from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'', include('myblog.urls')),
]

Commençons ensuite le serveur web :


cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000

Nous devrions maintenant être en mesure de voir les listes d’articles que nous avons créés précédemment :

Grâce à Bootstrap, vous pouvez toujours avoir une excellente visualisation dans un appareil plus petit :

Résumé

Passons maintenant en revue les concepts que nous avons abordés dans cet article et tout au long de cette série :

1. Chaque modèle définit un objet et mappe à une table de base de données, dont les champs sont à leur tour mappés aux propriétés de cet objet. D’autre part, un modèle définit l’interface utilisateur où les données renvoyées par la vue seront affichées.

Supposons que nous souhaitions modifier notre modèle en ajoutant un champ nommé summary à l’objet Post, où nous stockerons une brève description facultative de chaque article. Ajoutons la ligne suivante dans myblog/models.py :

summary = models.CharField(max_length=350, blank=True, null=True)

Comme nous l’avons appris dans l’article précédent, nous devons migrer les modifications vers la base de données :


python manage.py makemigrations myblog
python manage.py migrate myblog

Utilisez ensuite l’interface d’administration pour modifier les messages et ajouter un bref résumé à chaque message. Enfin, remplacez la ligne suivante dans le modèle (posts.html) :

<p>{{ post.text|linebreaks }}</p>

avec

<p>{{ post.summary }}</p>

Actualisez la page d’accueil pour voir les modifications :

2. Une fonction view prend une requête HTTP et renvoie une réponse HTTP. Dans cet article, def posts(request) dans views.py effectue un appel à la base de données sous-jacente pour récupérer tous les messages. Si nous voulons récupérer tous les articles avec le mot ansible dans le titre, nous devons remplacer.

posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')

avec

posts = Post.objects.filter(title__icontains="ansible").order_by('-whenPublished')

En séparant l’interface utilisateur de la logique de l’application dans les applications Web, Django facilite les tâches de maintenance et d’escalade des applications.

3. Si vous avez suivi les instructions fournies dans cette série, la structure de votre projet devrait être la suivante :


myfirstdjangoenv/myfirstdjangoproject
├── db.sqlite3
├── manage.py
├── myblog
│   ├── admin.py
│   ├── admin.pyc
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   ├── 0001_initial.pyc
│   │   ├── __init__.py
│   │   └── __init__.pyc
│   ├── models.py
│   ├── models.pyc
│   ├── templates
│   │   └── myblog
│   │       └── posts.html
│   ├── tests.py
│   ├── urls.py
│   ├── urls.pyc
│   ├── views.py
│   └── views.pyc
└── myfirstdjangoproject
    ├── __init__.py
    ├── __init__.pyc
    ├── settings.py
    ├── settings.pyc
    ├── urls.py
    ├── urls.pyc
    ├── wsgi.py
    └── wsgi.pyc

Si la liste ci-dessus ne s’affiche pas correctement dans votre navigateur, voici une capture d’écran de la sortie de la commande suivante :


tree myfirstdjangoenv/myfirstdjangoproject

Résumé

Bien que tous ces concepts puissent sembler un peu intimidants au début, je peux vous assurer que Django vaut bien tous les efforts nécessaires pour se familiariser avec lui

J’espère que l’exemple que nous avons utilisé dans cette série pour vous présenter ce cadre web exceptionnel vous motivera à en savoir plus. Si c’est le cas, la documentation officielle de Django (qui est constamment mise à jour) est le meilleur endroit pour commencer.

Je peux vous assurer qu’il y a beaucoup plus à Django que ce que nous pouvons couvrir correctement dans une série d’articles, alors n’hésitez pas à l’explorer et à apprendre par la pratique !

N’hésitez pas à nous envoyer un message avec des questions ou des suggestions en utilisant le formulaire ci-dessous.

Articles connexes: