===== Autonomie 1 : Une galerie en Django =====
En vous basant sur l'ensemble des TD précédents, vous devez à présent programmer un site web en Django qui reproduit les fonctionnalités de l'animalerie [[public:appro-s7:td1|vue dans le cadre du modèle MVC]]. Attention, vous devez cette fois-ci personnaliser le modèle de données pour l'adapter à un univers de votre choix.
Exemples d'univers :
* Jeu de rôle
* Tamagotchi
* Pet shop
* Pocket Monster
* Aquarium
* Elevage d'escargots
* Course hippique
* Equipe de foot
* Athlètes
* etc.
Vous pouvez bien sûr conserver la structure de base qui est d'avoir un ensemble de créatures et/ou de personnages, et un ensemble de lieux avec des fonctions différentes (par exemple, pour un centre d'entrainement : terrain de foot, cantine, salle de muscu, dortoir). Il peut y avoir des variantes : Pour une maison des poupées il peut y avoir plusieurs chambres, une pièce commune, un jardin et une terrasse. Laissez libre cours à votre imagination.
Les créatures passent par différents états au cours de la journée en fonction des lieux qu'ils visitent.
** Rappel **
Reprenez cette structure de données de type ''Animal'' -- ''Equipement'' utilisée dans les TD précédents
{{ :public:appro-s7:mie-_ea.png?600| }}
==== Indications ====
Créez un projet 'playground' et reprenez toutes les étapes 1 à 15 du tutoriel [[public:appro-s7:td_web|précédent]] avec le modèle suivant, en remplaçcant "Animal" par "Character" pour être plus général.
=== model.py ===
from django.db import models
class Equipement(models.Model):
id_equip = models.CharField(max_length=100, primary_key=True)
disponibilite = models.CharField(max_length=20)
photo = models.CharField(max_length=200)
def __str__(self):
return self.id_equip
class Character(models.Model):
id_character = models.CharField(max_length=100, primary_key=True)
etat = models.CharField(max_length=20)
type = models.CharField(max_length=20)
race = models.CharField(max_length=20)
photo = models.CharField(max_length=200)
lieu = models.ForeignKey(Equipement, on_delete=models.CASCADE)
def __str__(self):
return self.id_character
Vous deviez obtenir une interface simple de ce type:
{{ :public:appro-s7:simple-hamster.png?600 |}}
Il est bien sûr possible d'améliorer les choses en utilisant des fonctions de mise en page plus évoluées
La mise en page du site repose sur l'utilisation de fichiers de style (css) ainsi que de composants javascript de type :
* {{https://francoisbrucker.github.io/cours_informatique/cours/web/|Web Front, option S7 (F. Brucker)}}
* {{https://getbootstrap.com/|bootstrap}}
* et : {{https://www.w3schools.com/bootstrap5/index.php|w3school}}
* {{https://materializecss.com|materialize}}
* (voir aussi ce {{https://openclassrooms.com/fr/courses/3936801-composez-des-interfaces-utilisateurs-en-material-design/4392371-utilisez-le-framework-materialize-css|tutoriel}}).
Vous pouvez exploiter les photos qui sont définies dans les attributs du modèle pour obtenir par exemple:
{{ :public:appro-s7:animalerie_web.png?800 |}}
==== Formulaires Django ====
(repris du tutoriel {{https://tutorial.djangogirls.org/fr/django_forms/}})
La dernière chose que nous voulons faire sur notre site web, c'est créer une manière de mettre a jour l'etat des personnages. Les formulaires (forms) vont nous permettre de rendre le site dynamique !
Comme toutes les choses importantes dans Django, les formulaires ont leur propre fichier : ''forms.py''.
Nous allons devoir créer un fichier avec ce nom dans notre dossier blog.
playground
└── forms.py
Ouvrez maintenant ce fichier dans l'éditeur de code et tapez le code suivant :
from django import forms
from .models import Character
class MoveForm(forms.ModelForm):
class Meta:
model = Character
fields = ('lieu',)
Tout d'abord, nous avons besoin d'importer les formulaires Django (''from django import forms''), puis notre modèle Character (''from .models import Character'').
Comme vous l'avez probablement deviné, ''MoveForm'' est le nom de notre formulaire. Nous avons besoin d'indiquer à Django que ce formulaire est un ModelForm (pour que Django fasse certaines choses automatiquement pour nous). Pour cela, nous utilisons ''forms.ModelForm''.
Ensuite, nous avons la class Meta qui nous permet de dire à Django quel modèle il doit utiliser pour créer ce formulaire (''model = Character'').
Enfin, nous précisions quel⋅s sont le⋅s champ⋅s qui doivent figurer dans notre formulaire. Dans notre cas, nous souhaitons que seul le lieu apparaisse dans notre formulaire.
Et voilà, c'est tout ! Tout ce qu'il nous reste à faire, c'est d'utiliser ce formulaire dans une vue et de l'afficher dans un template.
Nous allons donc une nouvelle fois suivre le processus suivant et créer : un lien vers la page, une URL, une vue et un template.
==== Lien vers une page contenant le formulaire ====
Il est temps d'ouvrir ''playground/templates/playground/base.html'' dans l'éditeur de code et ajouter un lien vers la vue ''character_detail''.
{{ character.id_character }}
==== URL ====
Ouvrez le fichier playground/urls.py dans l'éditeur de code et mettez ceci:
from django.urls import path
from . import views
urlpatterns = [
path('', views.character_list, name='character_list'),
path('character//', views.character_detail, name='character_detail'),
path('character//?', views.character_detail, name='character_detail_mes'),
]
==== La vue character_detail ====
Ouvrez maintenant le fichier ''playground/views.py'' dans l'éditeur de code et ajoutez les lignes suivantes avec celles du ''from'' qui existent déjà :
from django.shortcuts import render, get_object_or_404, redirect
from .forms import MoveForm
from .models import Character, Equipement
# Create your views here.
def character_list(request):
characters = Character.objects.filter()
return render(request, 'playground/character_list.html', {'characters': characters})
def character_detail(request, id_character):
character = get_object_or_404(Character, id_character=id_character)
lieu = character.lieu
form=MoveForm()
return render(request,
'playground/character_detail.html',
{'character': character, 'lieu': lieu, 'form': form})
Afin de pouvoir créer un nouveau formulaire ''Move'', nous avons besoin d'appeler la fonction ''MoveForm()'' et de la passer au template. Nous reviendrons modifier cette //vue// plus tard, mais pour l'instant, créons rapidement un template pour ce formulaire.
==== Template ====
Nous avons à présent besoin de créer un fichier ''character_detail.html'' dans le dossier ''playground/templates/playground'' et de l'ouvrir dans l'éditeur de code. Afin que notre formulaire fonctionne, nous avons besoin de plusieurs choses :
- Nous avons besoin d'afficher le formulaire. Pour cela, nous n'avons qu'à utiliser ''{{ form.as_uk }}''.
- La ligne précédente va avoir besoin d'être entourée des balises HTML ''''.
- Nous avons besoin d'un bouton ''Valider''. Nous allons le créer à l'aide d'un bouton HTML : ''''.
- Enfin, nous devons ajouter ''{% csrf_token %}'' juste après ''