Premiers pas avec Python Django (4)

Présentation de Bootstrap

Avant d'expliquer comment créer un CRUD avec Django, introduisons Bootstrap.

Le HTML que nous créons par nos ingénieurs sera terne en termes de conception. J'ai donc décidé d'utiliser Bootstrap, un framework CSS.

La documentation est en anglais, mais avec des exemples, vous trouverez ce que vous voulez faire.

Bootstrap

Téléchargez-le à partir de ce qui suit, y compris le jQuery requis par Bootstrap.

• Bootstrap-http://getbootstrap.com/(v4.0.0)
• jQuery-http://jquery.com/(v3.4.1)

Créez un répertoire appelé mybook / cms / static / cms / et placez le fichier téléchargé comme suit.

Les fichiers * .map sont des outils de développement de navigateur qui fournissent les numéros de ligne d'origine lors du débogage de JavaScript ou de la consultation d'éléments HTML pour valider CSS. Cela fonctionne sans cela.

bootstrap.bundle.min.js contient (bundles) Popper.js.

mybook
└── cms
    └── static
        └── cms
            ├── css
            │   ├── bootstrap.min.css
            │   └── bootstrap.min.css.map
            └── js
                ├── bootstrap.bundle.min.js
                ├── bootstrap.bundle.min.js.map
                ├── jquery-3.4.1.min.js
                └── jquery-3.4.1.min.map

La raison pour laquelle c'est mybook / cms / static / cms /

• Django recherche un répertoire statique pour chaque application (cms) sous le projet (mybook) (mybook / cms / static)
• Puisque le répertoire statique de chaque application est interprété comme un seul, ajoutez votre propre nom d'application (cms) pour l'identification. (Mybook / cms / statique / cms)

Ceux-ci sont similaires au mécanisme de recherche de modèle décrit plus loin, mais sont destinés à une réutilisation indépendante de l'application. Vous n'avez pas besoin de savoir maintenant. Pensez-y comme ça.

django-bootstrap4

Pour le HTML de liste, écrivez à la main la classe requise par Bootstrap, et pour le formulaire d'inscription / modification HTML, utilisez un module Python appelé django-bootstrap4.

• django-bootstrap4 - https://github.com/zostera/django-bootstrap4

L'installation se fait avec la commande pip.

Lors de l'exécution avec python manage.py runserver, arrêtez avec Ctrl + c avant de continuer. (env1) On suppose que vous êtes dans un environnement virtuel.

Malheureusement, le django-bootstrap-form que j'utilisais semble avoir cessé de se mettre à jour dans Bootstrap3 et ne prend pas en charge 4. Alors j'ai changé pour celui-ci.

$ pip install django-bootstrap4

Pour le moment, 1.1.1 est inclus.

$ pip freeze -l
asgiref==3.2.3
beautifulsoup4==4.8.2
Django==3.0.2
django-bootstrap4==1.1.1
pytz==2019.3
soupsieve==1.9.5
sqlparse==0.3.0

Si vous pouvez le confirmer, recommençons avec python manage.py runserver.

Ajoutez'bootstrap4 'à INSTALLED_APPS dans mybook / settings.py.

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'cms.apps.CmsConfig',   #application cms
    'bootstrap4',           # django-bootstrap4
)

Django CRUD

Faire grossièrement une vue

Nous avons besoin de la liste, de l'enregistrement, de la modification et de la suppression des fonctions, alors créez un modèle dans `cms / views.py '. Les enregistrements et les corrections sont regroupés sous forme de modifications. (Enregistrez-vous si book_id n'est pas spécifié, corrigez s'il y en a)

En tant que style de code, si vous n'ouvrez pas deux lignes avant def, des lignes ondulées apparaîtront et il y aura du bruit.

from django.shortcuts import render
from django.http import HttpResponse


def book_list(request):
    """Liste des livres"""
    return HttpResponse('Liste des livres')


def book_edit(request, book_id=None):
    """Edition de livres"""
    return HttpResponse('Edition de livres')


def book_del(request, book_id):
    """Supprimer des livres"""
    return HttpResponse('Supprimer des livres')

Conception de schéma d'URL

Le fichier cms / urls.py n'existe pas, alors créez-en un nouveau.

Cliquez avec le bouton droit sur cms à gauche et spécifiez ʻurls.py` dans Nouveau> Fichier Python.

En cela, l'URL et la fonction de la vue sont liées.

L'URL et le nom de la fonction ne doivent pas nécessairement correspondre. Cette zone est gratuite.

from django.urls import path
from cms import views

app_name = 'cms'
urlpatterns = [
    #Livres
    path('book/', views.book_list, name='book_list'),   #liste
    path('book/add/', views.book_edit, name='book_add'),  #enregistrement
    path('book/mod/<int:book_id>/', views.book_edit, name='book_mod'),  #Réparer
    path('book/del/<int:book_id>/', views.book_del, name='book_del'),   #Effacer
]

Ensuite, incluez «cms / urls.py» dans «mybook / urls.py» pour l'ensemble du projet.

from django.contrib import admin
from django.urls import path, include   # ←,ajouter inclure

urlpatterns = [
    path('cms/', include('cms.urls')),   #← Ajouter ici
    path('admin/', admin.site.urls),
]

L'URL finale ressemblera à ceci: Veuillez vérifier avec votre navigateur.

http://127.0.0.1:8000/cms/book/
http://127.0.0.1:8000/cms/book/add/
http://127.0.0.1:8000/cms/book/mod/5/
http://127.0.0.1:8000/cms/book/del/7/

Vue de liste

Écrivons la vue qui affiche correctement la liste. Modifiez def book_list dans cms / views.py comme suit:

from django.shortcuts import render
from django.http import HttpResponse

from cms.models import Book


def book_list(request):
    """Liste des livres"""
    # return HttpResponse('Liste des livres')
    books = Book.objects.all().order_by('id')
    return render(request,
                  'cms/book_list.html',     #Modèle à utiliser
                  {'books': books})         #Données à transmettre au modèle

Créer un modèle de liste

Créez un modèle appelé book_list.html à utiliser dans l'application cms du projet mybook. La situation est la suivante.

mybook/cms/templates/cms/book_list.html

Avant cela, créons un modèle appelé base.html qui en héritera.

Cliquez avec le bouton droit sur cms à gauche et spécifiez templates dans Nouveau> Répertoire Cliquez avec le bouton droit sur> modèle et spécifiez cms dans Nouveau> Répertoire Faites un clic droit sur> cms et spécifiez base.html dans Nouveau> Fichier HTML.

mybook/cms/templates/cms/base.html

Le contenu de base.html est le suivant.

{% load i18n static %}
<!DOCTYPE html>{% get_current_language as LANGUAGE_CODE %}
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="{% static 'cms/css/bootstrap.min.css' %}">
{% block extra_css %}{% endblock %}
<title>{% block title %}My books{% endblock %}</title>
</head>
<body>
  <div class="container">
    {% block content %}
      {{ content }}
    {% endblock %}
  </div>
<script src="{% static 'cms/js/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'cms/js/bootstrap.bundle.min.js' %}"></script>
{% block extra_js %}{% endblock %}
</body>
</html>

Maintenant, héritons de ce base_html et créons mybook / cms / templates / cms / book_list.html. Ici, seules les parties nécessaires seront écrites.

La classe spécifiée pour la classe est la classe requise par Bootstrap.

{% extends "cms/base.html" %}

{% block title %}Liste des livres{% endblock title %}

{% block content %}
    <h4 class="mt-4 border-bottom">Liste des livres</h4>
    <a href="{% url 'cms:book_add' %}" class="btn btn-primary btn-sm my-3">ajouter à</a>
    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <th scope="col">ID</th>
          <th scope="col">Titre de livre</th>
          <th scope="col">l'éditeur</th>
          <th scope="col">nombre de pages</th>
          <th scope="col">opération</th>
        </tr>
      </thead>
      <tbody>
        {% for book in books %}
        <tr>
          <th scope="row">{{ book.id }}</th>
          <td>{{ book.name }}</td>
          <td>{{ book.publisher }}</td>
          <td>{{ book.page }}</td>
          <td>
            <a href="{% url 'cms:book_mod' book_id=book.id %}" class="btn btn-outline-primary btn-sm">Réparer</a>
            <a href="{% url 'cms:book_del' book_id=book.id %}" class="btn btn-outline-danger btn-sm">Effacer</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
{% endblock content %}

Vérifions-le avec un navigateur.

http://127.0.0.1:8000/cms/book/

Formulaire d'ajout / correction

Créez un fichier appelé cms / forms.py et écrivez comme suit. Ici, nous allons créer un formulaire de base pour ajouter et modifier des modèles de livres dans cms / models.py.

from django.forms import ModelForm
from cms.models import Book


class BookForm(ModelForm):
    """Formulaire de livre"""
    class Meta:
        model = Book
        fields = ('name', 'publisher', 'page', )

Vue des ajouts et modifications

Modifiez def book_edit dans cms / views.py comme suit:

from django.shortcuts import render, get_object_or_404, redirect
from django.http import HttpResponse

from cms.models import Book
from cms.forms import BookForm

  :

def book_edit(request, book_id=None):
    """Edition de livres"""
    # return HttpResponse('Edition de livres')
    if book_id:   # book_id est spécifié(Au moment de la correction)
        book = get_object_or_404(Book, pk=book_id)
    else:         # book_id non spécifié(Au moment de l'ajout)
        book = Book()

    if request.method == 'POST':
        form = BookForm(request.POST, instance=book)  #Créer un formulaire à partir des données de demande POSTÉES
        if form.is_valid():    #Validation du formulaire
            book = form.save(commit=False)
            book.save()
            return redirect('cms:book_list')
    else:    #Au moment de GET
        form = BookForm(instance=book)  #Créer un formulaire à partir d'une instance de livre

    return render(request, 'cms/book_edit.html', dict(form=form, book_id=book_id))

Modèles d'ajout et de modification

Créez mybook / cms / templates / cms / book_edit.html en héritant de mybook / templates / base_html.

{% extends "cms/base.html" %}
{% load bootstrap4 %}

{% block title %}Edition de livres{% endblock title %}

{% block content %}
    <h4 class="mt-4 mb-5 border-bottom">Edition de livres</h4>
    {% if book_id %}
    <form action="{% url 'cms:book_mod' book_id=book_id %}" method="post">
    {% else %}
    <form action="{% url 'cms:book_add' %}" method="post">
    {% endif %}
      {% csrf_token %}
      {% bootstrap_form form layout='horizontal' %}
      <div class="form-group row">
        <div class="offset-md-3 col-md-9">
          <button type="submit" class="btn btn-primary">Envoyer</button>
        </div>
      </div>
    </form>
    <a href="{% url 'cms:book_list' %}" class="btn btn-secondary btn-sm">Revenir</a>
{% endblock content %}

Passez les éléments définis dans BookForm de cms / forms.py au modèle avec une variable appelée form dans cms / views.py, et écrivez{% bootstrap_form form layout = 'horizontal'%} `` form La partiedéveloppe le contenu du formulaire en HTML.

Ici, nous utilisons également la balise bootstrap_form pour la convertir au format Bootstrap.

La page d'inscription pour le livre est la suivante.

Supprimer la vue

Modifiez def book_del dans cms / views.py comme suit:

def book_del(request, book_id):
    """Supprimer des livres"""
    # return HttpResponse('Supprimer des livres')
    book = get_object_or_404(Book, pk=book_id)
    book.delete()
    return redirect('cms:book_list')

Maintenant, essayez de supprimer le livre en appuyant sur le bouton "Supprimer" de la page de la liste des livres.

Il est désactivé soudainement, mais il est en fait préférable d'afficher la boîte de dialogue modale Bootstrap et d'obtenir un message de confirmation. Cela sera abordé plus tard.

Continuez vers Introduction à Python Django (5).