Exercice 2
Exemple simple django en utilisant la classe Form du module django.forms Développer une application Django nommée Doubleur. Cette application doit générer une page web comportant les éléments suivants :
- Un champ de saisie : permettant à l'utilisateur d'indiquer un nombre entier N.
- Une zone de résultat : où sera présenté le double de la valeur entrée.
- Un bouton Valider : pour soumettre et traiter la saisie.
- Contrainte requise : la saisie doit être validée comme un entier ; un message d'erreur doit apparaître si ce n'est pas le cas.
- L'application impérativement utiliser la classe Form
Le rendu final doit correspondre à l'image suivante:
Solution
1. Objectif du projet
Créer en utilisant la classe Form du module django.forms une simple interface web sous forme d'application Django permettant à l’utilisateur de saisir un nombre et d’afficher son double.
2. Structure du projet
|
1 2 3 4 5 6 7 8 9 10 11 12 |
mysite/ │ ├── manage.py ├── db.sqlite3 ├── mysite/ ├── doubleapp/ │ ├── forms.py │ ├── views.py │ └── urls.py └── templates/ └── doubleapp/ └── form.html |
3. Création de la vue Django
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
from django.shortcuts import render from .forms import DoubleForm def double_view(request): result = "" n = "" form = DoubleForm(request.POST) # toujours initialiser le formulaire if request.method == "POST": form = DoubleForm(request.POST) if form.is_valid(): n = form.cleaned_data["number"] result = 2*n return render(request, "doubleapp/form.html", {"form": form, "result": result, "input": n}) |
Cette fonction crée une instance sur la classe DoubleForm : form = DoubleForm(request.POST) afin de pouvoir récupérer la valeur saisie et calculer son double et l’envoyer au template HTML.
4. Configuration des URLS
Configuration des URLs de l’application
|
1 2 3 4 5 6 |
from django.urls import path from .views import double_view urlpatterns = [ path("", double_view, name="double"), ] |
Liaison avec les URLs du projet principal
|
1 2 3 4 5 |
from django.urls import path, include urlpatterns = [ path("", include("doubleapp.urls")), ] |
5. Création du formulaire HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<h2>Simple Django Example</h2> <form method="post"> {% csrf_token %} <pre> Enter Value of N : {{ form.number }} Double 2*N : <input type="text" value="{{ result }}" readonly> <button type="submit">Validate</button> </pre> </form> |
6. Lancement du serveur Django & Test de l'application
Lancement du serveur
|
1 |
python manage.py runserver |
Test de l’application
Ouvrir le navigateur à l’adresse suivante pour visualiser l'application:
|
1 |
http://127.0.0.1:8000/ |
Younes Derfoufi
CRMEF OUJDA
