Actions

Cours

Différences entre versions de « Django et base de données »

De GBLL, TAL, ALAO, etc.

Ligne 11 : Ligne 11 :
 
== Création d'une page dédiée pour notre Todo list ==
 
== Création d'une page dédiée pour notre Todo list ==
  
# 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.
+
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)
 
(todolist.html)
Ligne 29 : Ligne 29 :
 
</syntaxhighlight>
 
</syntaxhighlight>
  
# Créer une view pour afficher cette page dans views.py.
+
2. Créer une view pour afficher cette page dans views.py.
  
 
(view.py)
 
(view.py)
Ligne 37 : Ligne 37 :
 
</syntaxhighlight>
 
</syntaxhighlight>
  
# Ajouter une url pour pouvoir appeler cette view dans urls.py.
+
3. Ajouter une url pour pouvoir appeler cette view dans urls.py.
  
 
(urls.py)
 
(urls.py)
Ligne 48 : Ligne 48 :
 
     path('analyze/', csrf_exempt(myApp.analyze)),
 
     path('analyze/', csrf_exempt(myApp.analyze)),
 
     path('todolist/', myApp.todolist),
 
     path('todolist/', myApp.todolist),
 +
</syntaxhighlight>
 +
 +
4. Vous pouvez éventuellement ajouter un lien dans votre barre de navigation dans base.html pour accéder facilement à cette nouvelle page.
 +
(todolist.html)
 +
<syntaxhighlight lang="html" highlight="25" style="border: 1px solid #dfdfdf;background-color:#f8f8f8;font-size: 90%;padding:10px">
 +
...
 +
<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>
 
</syntaxhighlight>
 
</syntaxhighlight>

Version du 16 novembre 2022 à 20:07

Django est un framework python qui vous permet de rapidement créer un site web, une application web ou une API.

[Site officiel de Django]

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. (todolist.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>