« Django et base de données » : différence entre les versions
De GBLL, TAL, ALAO, etc.
Aucun résumé des modifications |
|||
| Ligne 95 : | Ligne 95 : | ||
class Item(models.Model): | class Item(models.Model): | ||
titre = models.CharField(max_length=50) | titre = models.CharField(max_length=50) #ici on indique que ça dépassera pas 50 caractères | ||
texte = models.TextField() | texte = models.TextField() | ||
</syntaxhighlight> | </syntaxhighlight> | ||
2. Il faut maintenant mettre à jour la base de données, comme à chaque fois que nous modifierons le fichier models.py. Pour cela, deux commandes à retenir (stopper le serveur pour pouvoir les exécuter) : | 2. Il faut maintenant mettre à jour la base de données, comme à chaque fois que nous modifierons le fichier models.py. Pour cela, deux commandes à retenir (stopper le serveur pour pouvoir les exécuter) : | ||
- {{code|python manage.py makemigrations|bash}} : pour préparer la mise à jour | - {{code|python manage.py makemigrations|bash}} : pour préparer la mise à jour | ||
- {{code|python manage.py migrate|bash}} : pour effectuer la mise à jour | - {{code|python manage.py migrate|bash}} : pour effectuer la mise à jour | ||
3. | 3. À partir de là, on peut ajouter/supprimer/modifier des éléments dans la base, et toutes les modifications seront stockées dans le fichier db.sqlite du projet. Les données sont persistantes, elles sont donc conservées même si on redémarre le serveur. Pour ajouter des données, Django propose plusieurs solutions. Le plus classique, c'est de créer des views dédiées à l'ajout, la suppression, la recherche dans la base de données et afficher le résultat soit directement dans une page avec render(), soit en les envoyant dans une JsonResponse() comme on l'a fait pour Spacy. Django propose aussi une fonctionnalité très utile pour les administrateurs du site, et on va commencer par regarder ça. En gros c'est un genre de PhpMyAdmin en mieux pour Django. | ||
=== Gérer la base de données avec l'interface admin du site === | |||
- L'interface admin est présente par défaut. L'url par défaut est [http://127.0.0.1:8000/admin/]. On vous demande alors de vous connecter (l'accès est réservé à ceux qui en ont le droit. Or, il n'y a pas encore d'utilisateur enregistré sur notre appli. On va donc commencer par créer un superutilisateur qui aura tous les droits. Stoppez votre serveur et exécutez la commande suivante : | |||
{{code|python manage.py createsuperuser|bash}} (il faut avoir fait au moins une fois les migrations de votre base de données pour que la table User soit initialisée) | |||
- Ensuite, relancez votre serveur et connectez-vous à la page admin. Par défaut sont affichées la table des utilisateurs et celles des groupes. Elles sont présentes par défaut dans tous les projets Django. On va pouvoir afficher sur cette page toutes les tables qu'on veut. Pour cela, il faut ajouter une ligne dans le fichier admin.py : | |||
(admin.py) | |||
<syntaxhighlight lang="python" highlight="2,5" style="border: 1px solid #dfdfdf;background-color:#f8f8f8;font-size: 90%;padding:10px"> | |||
from django.contrib import admin | |||
from .models import Item | |||
# Register your models here. | |||
admin.site.register(Item) | |||
</syntaxhighlight> | |||
- Maintenant, la table Item devrait apparaître sur la page admin. D'ici, vous pouvez directement lister, ajouter, modifier ou supprimer des objets de votre base de données. Ajoutez un item pour voir. | |||
=== Lister, ajouter, modifier, supprimer des items depuis votre site === | |||
Bon OK, c'est bien beau le site admin, mais c'est pour les admins. Or on aimerait éditer la base de données directement depuis le site, sans avoir à se connecter par exemple. C'est parti. On va commencer par lister les items présents dans la base sur la page todolist. | |||
On pourrait requéter la table Item et injecter la liste des résultats directement lors du render() de la page todolist.html, dans la view todolist. Ça marchera, mais il faudra recharger la page à chaque fois qu'on veut mettre à jour la liste des items. On va donc préférer faire une requête depuis la page todolist.html, pour récupérer la liste des items et les afficher dans la div "items" prévue à cet effet. On pourra le faire autant de fois qu'on veut, sans recharger la page. | |||
1. Créer un fichier javascript todolist.js, et y mettre une fonction getItems() qui requêtera le serveur comme on l'a fait pour Spacy. L'url pour lister les items sera /todolist/list. | |||
(todolist.js) | |||
<syntaxhighlight lang="javascript" style="border: 1px solid #dfdfdf;background-color:#f8f8f8;font-size: 90%;padding:10px"> | |||
async function getItems() { | |||
// PARAMÈTRES DE LA REQUÊTE | |||
const requete = { | |||
method: 'POST', | |||
headers: { | |||
'Content-Type': 'application/json' | |||
} | |||
}; | |||
// ENVOI ET RÉCUPÉRATION DE LA RÉPONSE | |||
const response = await fetch('/todolist/list', requete) | |||
const data = await response.json(); | |||
console.table(data['items']); | |||
} | |||
</syntaxhighlight> | |||
Version du 16 novembre 2022 à 19:59
Django est un framework python qui vous permet de rapidement créer un site web, une application web ou une API.
Pour installer Django et faire ses premier pas, jetez un œil à [Cours:Initiation_à_Django].
Dans ce tutoriel, nous allons utiliser la base de données native de Django. Nous allons créer une page Todo list, sur laquelle sera lister les items de notre todo list. Nous pourrons en ajouter et en supprimer depuis cette même page via une requête AJAX.
Todo list de base pour commencer :)
Création d'une page dédiée pour notre Todo list
1. Créer un template html pour notre page todo list. La balise ligne 1 permet d'injecter le contenu de cette page dans la page principale base.html que nous avons créée dans le tuto précédent. La balise ligne 2 permettra de charger le fichier javascript todolist.js, que nous n'avons pas encore créé. Pour l'instant, il n'y a qu'un titre sur la page, et une div "items" vide.
(todolist.html)
{% extends "base.html" %}
{% load static %}
{% block content %}
<h1>Ma todo list</h1>
<div id="items"></div>
{% endblock %}
{% block script %}
<script src="{% static 'scripts/todolist.js' %}"></script>
{% endblock %}
2. Créer une view pour afficher cette page dans views.py.
(view.py)
def todolist(request):
return render(request, 'todolist.html')
3. Ajouter une url pour pouvoir appeler cette view dans urls.py.
(urls.py)
urlpatterns = [
path('admin/', admin.site.urls),
path('', myApp.home),
path('variables/', myApp.variables),
path('spacy/', myApp.spacy),
path('analyze/', csrf_exempt(myApp.analyze)),
path('todolist/', myApp.todolist),
4. Vous pouvez éventuellement ajouter un lien dans votre barre de navigation dans base.html pour accéder facilement à cette nouvelle page.
(base.html)
...
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" href="/">Accueil
<span class="visually-hidden">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/spacy/">Spacy</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/variables/">Variables</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/todolist/">Todo list</a>
</li>
</div>
</div>
</nav>
5. Vous pouvez maintenant afficher la page todolist (avec juste un titre qui s'affiche).
Créer une table Item dans la base de données
1. Voilà, c'est maintenant que ça commence vraiment. Chaque tables de votre base de données est définie dans le fichier models.py de votre application. Chaque table est une classe qui peut avoir des propriétés et des méthodes. Ici on va se limiter à juste 3 ou 4 tables avec quelques propriétés. Commençons par créer une table Item. Chaque item que nous créerons ensuite sera une instance de la classe Item, et aura donc les mêmes propriétés. Faisons basique pour l'instant : chaque item aura un champs de titre et un champs de texte. On ajoutera d'autres propriétés plus tard.
(models.py)
from django.db import models
class Item(models.Model):
titre = models.CharField(max_length=50) #ici on indique que ça dépassera pas 50 caractères
texte = models.TextField()
2. Il faut maintenant mettre à jour la base de données, comme à chaque fois que nous modifierons le fichier models.py. Pour cela, deux commandes à retenir (stopper le serveur pour pouvoir les exécuter) :
- python manage.py makemigrations : pour préparer la mise à jour
- python manage.py migrate : pour effectuer la mise à jour
3. À partir de là, on peut ajouter/supprimer/modifier des éléments dans la base, et toutes les modifications seront stockées dans le fichier db.sqlite du projet. Les données sont persistantes, elles sont donc conservées même si on redémarre le serveur. Pour ajouter des données, Django propose plusieurs solutions. Le plus classique, c'est de créer des views dédiées à l'ajout, la suppression, la recherche dans la base de données et afficher le résultat soit directement dans une page avec render(), soit en les envoyant dans une JsonResponse() comme on l'a fait pour Spacy. Django propose aussi une fonctionnalité très utile pour les administrateurs du site, et on va commencer par regarder ça. En gros c'est un genre de PhpMyAdmin en mieux pour Django.
Gérer la base de données avec l'interface admin du site
- L'interface admin est présente par défaut. L'url par défaut est [1]. On vous demande alors de vous connecter (l'accès est réservé à ceux qui en ont le droit. Or, il n'y a pas encore d'utilisateur enregistré sur notre appli. On va donc commencer par créer un superutilisateur qui aura tous les droits. Stoppez votre serveur et exécutez la commande suivante :
python manage.py createsuperuser (il faut avoir fait au moins une fois les migrations de votre base de données pour que la table User soit initialisée)
- Ensuite, relancez votre serveur et connectez-vous à la page admin. Par défaut sont affichées la table des utilisateurs et celles des groupes. Elles sont présentes par défaut dans tous les projets Django. On va pouvoir afficher sur cette page toutes les tables qu'on veut. Pour cela, il faut ajouter une ligne dans le fichier admin.py :
(admin.py)
from django.contrib import admin
from .models import Item
# Register your models here.
admin.site.register(Item)
- Maintenant, la table Item devrait apparaître sur la page admin. D'ici, vous pouvez directement lister, ajouter, modifier ou supprimer des objets de votre base de données. Ajoutez un item pour voir.
Lister, ajouter, modifier, supprimer des items depuis votre site
Bon OK, c'est bien beau le site admin, mais c'est pour les admins. Or on aimerait éditer la base de données directement depuis le site, sans avoir à se connecter par exemple. C'est parti. On va commencer par lister les items présents dans la base sur la page todolist.
On pourrait requéter la table Item et injecter la liste des résultats directement lors du render() de la page todolist.html, dans la view todolist. Ça marchera, mais il faudra recharger la page à chaque fois qu'on veut mettre à jour la liste des items. On va donc préférer faire une requête depuis la page todolist.html, pour récupérer la liste des items et les afficher dans la div "items" prévue à cet effet. On pourra le faire autant de fois qu'on veut, sans recharger la page.
1. Créer un fichier javascript todolist.js, et y mettre une fonction getItems() qui requêtera le serveur comme on l'a fait pour Spacy. L'url pour lister les items sera /todolist/list.
(todolist.js)
async function getItems() {
// PARAMÈTRES DE LA REQUÊTE
const requete = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
};
// ENVOI ET RÉCUPÉRATION DE LA RÉPONSE
const response = await fetch('/todolist/list', requete)
const data = await response.json();
console.table(data['items']);
}