Solution Exercice Django N°1: Simple interface web de calcul

Exercice 1

Créer un projet Django intitulé **mysite** avec une application nommée **Doubleur**. Cette application doit présenter une interface web comprenant :

Un champ de saisie : pour que l'utilisateur puisse entrer un nombre entier N.
Une zone de résultat : destinée à afficher la valeur du double du nombre saisi.
Un bouton Valider : pour déclencher le calcul.
Contrainte à intégrer : une vérification assurant que N est un entier valide, avec un message d'erreur affiché dans le cas contraire.
Sans utiliser la classe : Form du module django.forms

L'interface attendue correspond à l'illustration suivante :

Solution

1. Objectif du projet

Créer une petite application Django permettant à l’utilisateur de saisir un nombre et d’afficher automatiquement son double.

2. Structure du projet

mysite/
│
├── manage.py
├── db.sqlite3
├── mysite/
├── doubleapp/
│   ├── views.py
│   └── urls.py
└── templates/
    └── doubleapp/
        └── form.html

mysite/

│

├── manage.py

├── db.sqlite3

├── mysite/

├── doubleapp/

│ ├── views.py

│ └── urls.py

└── templates/

└── doubleapp/

└── form.html

3. Création de la vue Django

from django.shortcuts import render

def double_view(request):
    result = ""
    n = request.POST.get("number", "")

    if request.method == "POST":
        try:
            n = int(request.POST.get("number"))
            result = 2 * n
        except ValueError:
            result = "Entrée invalide"

    return render(request, "doubleapp/form.html", {
        "result": result,
        "input": n
    })

from django.shortcuts import render

def double_view(request):

result = ""

n = request.POST.get("number", "")

if request.method == "POST":

try:

n = int(request.POST.get("number"))

result = 2 * n

except ValueError:

result = "Entrée invalide"

return render(request, "doubleapp/form.html", {

"result": result,

"input": n

})

Cette fonction récupère la valeur saisie, calcule son double et l’envoie au template HTML.

4. Configuration des URLS

Configuration des URLs de l’application

from django.urls import path
from .views import double_view

urlpatterns = [
    path("", double_view, name="double"),
]

from django.urls import path

from .views import double_view

urlpatterns = [

path("", double_view, name="double"),

]

Liaison avec les URLs du projet principal

from django.urls import path, include

urlpatterns = [
    path("", include("doubleapp.urls")),
]

from django.urls import path, include

urlpatterns = [

path("", include("doubleapp.urls")),

]

5. Création du formulaire HTML

<!DOCTYPE html>
<html>
<head>
    <title>Double d’un nombre</title>
</head>
<body>

<h3>Exemple simple avec Django</h3>

<form method="post">
    {% csrf_token %}

    <label>Entrer un nombre :</label>
    <input type="number" name="number" value="{{ input }}" required>

    <label>Double :</label>
    <input type="text" value="{{ result }}" readonly>

    <button type="submit">Valider</button>
</form>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Double d’un nombre</title>

</head>

<body>

<h3>Exemple simple avec Django</h3>

{% csrf_token %}

<label>Entrer un nombre :</label>

<label>Double :</label>

<button type="submit">Valider</button>

</form>

</body>

</html>

6. Lancement du serveur Django & Test de l'application

Lancement du serveur

python manage.py runserver

1	python manage.py runserver

Test de l’application

Ouvrir le navigateur à l’adresse suivante pour visualiser l'application:

http://127.0.0.1:8000/

1	http://127.0.0.1:8000/

Younes Derfoufi
CRMEF OUJDA

Post Views: 170