Exercice 4 || Solution
Développement d'un projet Django appelé time_convert avec une application convert. L'interface présente un champ de saisie pour entrer une durée en secondes (nombre entier) et un bouton "Convertir". L'action déclenche la conversion et l'affichage du résultat sous la forme : heures, minutes, secondes. Illustration : 3671 → 1h 1min 11s.
Solution
1. Création du Projet et de l'Application
Pour initialiser le projet Django, exécutez les commandes suivantes dans votre terminal. Ces commandes créent la structure de base du projet time_convert et de l'application convert.
|
1 2 3 |
django-admin startproject time_convert cd time_convert python manage.py startapp convert |
2. Configuration des Templates à la Racine
Créez le dossier templates à la racine du projet. Ce dossier contiendra tous les templates HTML de l'application.
|
1 2 3 |
# Depuis le dossier time_convert/ mkdir templates mkdir templates/convert |
3. Configuration du Fichier settings.py
Modifiez le fichier time_convert/settings.py pour :
- Ajouter l'application 'convert' à INSTALLED_APPS
- Configurer le chemin des templates à la racine du projet
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
# time_convert/settings.py # Ajout de l'application convert INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'convert', # Notre application ] # Configuration des templates import os from pathlib import Path BASE_DIR = Path(__file__).resolve().parent.parent TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR, 'templates')], # Dossier templates à la racine 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] |
4. Configuration des URLs du Projet
Modifiez le fichier time_convert/urls.py pour inclure les URLs de l'application convert.
|
1 2 3 4 5 6 7 8 |
# time_convert/urls.py from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('convert.urls')), # Inclut les URLs de l'app convert ] |
5. Création des URLs de l'Application
Créez le fichier convert/urls.py pour définir les routes spécifiques à l'application.
|
1 2 3 4 5 6 7 |
# convert/urls.py from django.urls import path from . import views urlpatterns = [ path('', views.convert_time, name='convert_time'), ] |
6. Développement de la Vue (views.py)
Le fichier convert/views.py contient la logique de conversion des secondes en heures, minutes et secondes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
# convert/views.py from django.shortcuts import render def convert_time(request): """ Vue pour convertir les secondes en heures, minutes, secondes. Gère les requêtes POST du formulaire de conversion. """ result = None seconds_input = "" if request.method == 'POST': # Récupération de la valeur saisie seconds_input = request.POST.get('seconds', '').strip() # Validation et conversion if seconds_input.isdigit(): total_seconds = int(seconds_input) # Calcul des heures, minutes et secondes hours = total_seconds // 3600 remaining_seconds = total_seconds % 3600 minutes = remaining_seconds // 60 seconds = remaining_seconds % 60 # Formatage du résultat result = f"{hours}h {minutes}min {seconds}s" else: # Message d'erreur pour entrée invalide result = "Veuillez entrer un nombre entier valide" # Rendu du template avec le contexte return render(request, 'convert/index.html', { 'result': result, 'seconds_input': seconds_input }) |
7. Configuration de l'Application
Le fichier convert/apps.py définit la configuration de base de l'application.
|
1 2 3 4 5 6 |
# convert/apps.py from django.apps import AppConfig class ConvertConfig(AppConfig): default_auto_field = 'django.db.models.BigAutoField' name = 'convert' |
8. Création du Template HTML
Créez le fichier templates/convert/index.html contenant l'interface utilisateur.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Convertisseur de Temps</title> </head> <body> <h1>Convertisseur de Temps</h1> <form method="POST"> {% csrf_token %} <div> <label for="seconds"><strong>Nombre de secondes :</strong></label> <input type="number" id="seconds" name="seconds" value="{{ seconds_input }}" placeholder="Entrez le nombre de secondes" required min="0"> </div> <button type="submit"><strong>Convertir</strong></button> </form> {% if result %} <div> <h2>Résultat de la Conversion</h2> <p><strong>Conversion :</strong> {{ result }}</p> </div> {% endif %} <div> <h2>Exemple</h2> <p><strong>Exemple :</strong> 3671 secondes → 1h 1min 11s</p> <p>Entrez un nombre entier de secondes pour voir la conversion en heures, minutes et secondes.</p> </div> </body> </html> |
9. Migration et Lancement du Serveur
Exécutez ces commandes pour initialiser la base de données et démarrer le serveur de développement.
|
1 2 3 4 5 |
# Appliquer les migrations de base de données python manage.py migrate # Démarrer le serveur de développement python manage.py runserver |
10. Accès à l'Application
Ouvrez votre navigateur web et accédez à l'application à l'adresse suivante :
http://127.0.0.1:8000/
Vous obtenez ainsi votre application django qui converti les secondes en heures H, minutes min, secondes s.
11. Structure Finale des Fichiers
Voici la structure complète du projet avec les templates à la racine :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
time_convert/ # Dossier racine du projet ├── manage.py # Script de gestion Django ├── templates/ # Dossier templates à la racine │ └── convert/ │ └── index.html # Template principal ├── time_convert/ # Configuration du projet │ ├── __init__.py │ ├── settings.py # Configuration avec templates à la racine │ ├── urls.py # URLs du projet │ └── wsgi.py └── convert/ # Application convert ├── __init__.py ├── admin.py ├── apps.py # Configuration de l'app ├── migrations/ │ └── __init__.py ├── models.py ├── tests.py ├── urls.py # URLs de l'app └── views.py # Logique de conversion |
12. Fonctionnalités Implémentées
- Formulaire de saisie pour les secondes
- Validation des entrées numériques
- Conversion automatique en heures, minutes, secondes
- Affichage du résultat formaté (ex: 1h 1min 11s)
- Gestion des erreurs pour entrées non valides
- Interface simple et intuitive
Auteur : Younes Derfoufi
Lieu de travail : CRMEF OUJDA
Site Web : www.tresfacile.net
Chaine YouTube : https://www.youtube.com/user/InformatiquesFacile
Me contacter : https://www.tresfacile.net/me-contacter/
