Recherche de site Web

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


« Cet article a été révisé et mis à jour avec la dernière version de Django – mai 2016 »

Dans la Partie 1 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é 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 expliquerons comment accéder à l'application à l'aide de l'interface utilisateur et comment la rendre adaptée aux mobiles pour tous 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 utiliserons l'interface d'administration de Django.

Assurez-vous que le serveur Web intégré de Django s'exécute sur le port 8000 (ou sur 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 en utilisant les informations d'identification que vous avez définies dans l'article précédent et commencez à rédiger un message (qui, encore une fois, va créer un objet de type Post et insérer 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 première vision

Notre première vue (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) sera chargée de filtrer tous les objets Post et de renvoyer ceux où la valeur de whenPublished est inférieur ou égal à la date et à l'heure actuelles (whenPublished__lte=timezone.now()) classé par ordre décroissant whenPublished, ce qui revient à dire " dernier premier".

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=moins que 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 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é monblog :


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

Nous appellerons le modèle posts.html et y insérerons 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 placé le code Python entre accolades à l’intérieur du code 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 une 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 (
ou

) pour formater correctement chaque message avec séparation des paragraphes.

Ensuite, nous devons configurer 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 dans monblog 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 demande à Django de traiter la chaîne entre 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 vers http://ip-address:8000 (et rien d'autre), le les données renvoyées par la variable posts dans 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')),
]

Démarrons ensuite le serveur web :


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

Nous devrions maintenant pouvoir voir les listes de publications que nous avons créées 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 est mappé à 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 publication. 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 publications et ajouter un bref résumé à chaque publication. 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 appelle la base de données sous-jacente pour récupérer toutes les publications. Si nous voulons récupérer tous les messages avec le mot ansible dans le titre, nous devons le 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 d'application dans les applications Web, Django facilite les tâches de maintenance et de mise à niveau 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 du résultat de la commande suivante :


tree myfirstdjangoenv/myfirstdjangoproject

Résumé

Même si tous ces concepts peuvent paraître un peu intimidants au premier abord, je peux vous assurer que Django vaut bien tous les efforts nécessaires pour en prendre connaissance.

J'espère que l'exemple que nous avons utilisé dans cette série pour vous présenter ce framework Web exceptionnel vous motivera à en savoir plus. Si tel est le cas, la documentation officielle de Django (qui est constamment mise à jour) est le meilleur point de départ.

Je peux vous assurer qu'il y a bien plus à dire sur Django que ce que nous pouvons couvrir de manière adéquate dans une série d'articles, alors n'hésitez pas à l'explorer et à apprendre par la pratique !

N'hésitez pas à nous envoyer une note avec des questions ou des suggestions en utilisant le formulaire ci-dessous.