Gérer les images Django et les actifs statiques sur Ubuntu

Ce tutoriel vous montrera comment utiliser efficacement le module ** django **. Contrib.staticfiles pour améliorer l'expérience utilisateur Web avec le framework ** Django **.

Objectif

Les objectifs des didacticiels suivants sont:

Conditions préalables

Étape 1: initialiser et configurer le projet

1.1. Initialisation de l'environnement

Pour configurer l'environnement de développement, suivez la procédure présentée ici.

1, installation des bibliothèques requises

$ sudo apt install python3             # Install Python3 interpreter
$ sudo apt install python3-pip         # To manage python packages
$ sudo apt install python3-virtualenv  # To manage virtual python environments
$ sudo apt install apache2             # To serve images and static assets
  1. Créez et activez un environnement virtuel
$ virtualenv --python=python3 venv     # This create the virtual environment venv
$ source venv/bin/activate             # This is to activate the virtual environment

3, installation des dépendances du projet

(venv)$ pip install Django==2.1            # Install Django v2.1
(venv)$ pip install Pillow                 # To manage images through Python code
(venv)$ pip install easy_thumbnails        # To easyly manage image thumbnails

** Remarque **: Un suffixe venv a été ajouté pour indiquer la ruunning dans un environnement virtuel isolé nommé venv.

1.2. Paramètres du projet

  1. Créez une ** galerie de photos ** pour le projet django
(venv)$ django-admin startptoject photogallery

2, créez une application django ** galerie **

(venv)$ cd photogallery/
(venv)$ django-admin startapp gallery
  1. Ajoutez l'application ** Galerie ** à la ** Galerie de photos ** du projet

Pour ce faire, vous devez ajouter l'application de galerie au fichier settings.py de votre projet de galerie de photos.

INSTALLED_APPS = [
    ...
    'photogallery.gallery'
    ...
]

4, enregistrez les données de migration dans la base de données

(venv)$ pyhton manage.py migrate

5, créez un super utilisateur pour l'application de tableau de bord d'administration Django

(venv)$ python manage.py createsuperuser --username admin
(venv)$ Email address: [email protected]
(venv)$ Password:
(venv)$ Password (again):
  1. Lorsque vous effectuez cette opération, la structure du dossier de projet sera la suivante.
.
├── db.sqlite3
├── gallery
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── manage.py
└── socialgallery
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

7, assurez-vous que tout fonctionne correctement.

(venv)$ python manage.py runserver
...
Starting development server at http://127.0.0.1:8000/
...

Étape 2: configurer un serveur de fichiers statique

  1. Ajoutez l'application ** django.contrib.staticfiles ** à ** INSTALLED_APPS ** dans le fichier ** settings.py ** du projet.
INSTALLED_APPS = [
    ...
    'django.contrib.staticfiles'
    ...
]
  1. Créez un dossier pour les fichiers statiques et définissez les autorisations appropriées.
# Create static folders on the webserver
(venv)$ sudo mkdir /var/www/static
(venv)$ sudo mkdir /var/www/media
# Make static folders editable from the web browser
(venv)$ sudo chown -R www-data:www-data /var/www/static 
(venv)$ sudo chown -R www-data:www-data /var/www/media 
# Allow the group to write to the directory with appropriate permissions
(venv)$ sudo chmod -R 777 /var/www/static                   
(venv)$ sudo chmod -R 777 /var/www/media                   
# Add myself to the www-data group
(venv)$ sudo usermod -a -G www-data $(whoami)

3, configurez le projet pour servir les fichiers statiques.

STATIC_URL = '/static/'              # Used to include static resources in web pages
STATIC_ROOT = '/var/www/static/'     # Used to get static resources from web server
MEDIA_URL = '/media/'                # Used to include media items in web pages
MEDIA_ROOT = '/var/www/media/'       # Used to get media items from web server
  1. Migrez les images et les fichiers statiques de STATIC_URL vers STATIC_ROOT et de MEDIA_URL vers MEDIA_ROOT.
# This command will copy everything from the STATIC_URL to the STATIC_ROOT
(venv)$ python manage.py collectstatic

** Remarque **: Cette commande doit être exécutée à chaque fois que vous déployez une application en tenant compte des nouveaux fichiers statiques ajoutés par l'utilisateur.

Étape 3: Utilisez des images et des fichiers statiques

Pour utiliser des fichiers image ou statiques sur une page Web, vous devez précharger le module statique sur cette page. Pour ce faire, ajoutez le code suivant à ** base.html ** sur la page racine.

{% load static %}

Ensuite, vous pouvez mettre votre image sur la page d'accueil de cette manière.

<img src={% static 'gallery/images/background.jpg' alt='Background Image' %}>

Et en incluant ces balises, vous pouvez ajouter des éléments statiques à votre page Web.

{% static 'gallery/css/bootstrap.css'%}
{% static 'gallery/js/bootstrap.js'%}
{% static 'gallery/js/jquery.js'%}

Étape 4: définir le modèle de données

Restez au courant du sujet, créez un seul modèle de données pour gérer les images téléchargées par l'utilisateur.

1, ce qui suit est le contenu du fichier ** gallery / models.py **.

from django.db import models
from django.contrib.auth.models import User

class Image(models.Model):
    name = models.TextField(max_length='100')
    path = models.ImageField()
    number_views = models.IntegerField(default=0)

    def __str__(self):
        return self.name

2, enregistrez le modèle dans la base de données

(venv)$ python manage.py make migrations    # This command will create migrations files
(venv)$ python manage.py migrate            # Here the migrations created are executed

Étape 5: Comment rédiger une vue

Les vues définissent la manière dont les utilisateurs interagissent avec l'application.

Les vues sont créées dans le fichier: ** socialgallery / gallery / views.py **.

from django.shortcuts import render
from django.urls import reverse_lazy
from django.views.generic import ListView, CreateView, DetailView, \
     UpdateView, DeleteView
from .models import Image

class ImageListView(ListView):
    model = Image
    template_name = 'gallery/image_list.html'
    
class ImageDetailView(DetailView):
    model = Image
    template_name = 'gallery/image_detail.html'

class ImageCreateView(CreateView):
    model = Image
    template_name = 'gallery/image_create.html'
    fields = '__all__'

class ImageUpdateView(UpdateView):
    model = Image
    template_name = 'gallery/image_update.html'
    fields = '__all__'

class ImageDeleteView(DeleteView):
    model = Image
    template_name = 'gallery/image_delete.html'
    success_url = reverse_lazy('image-list')

Étape 6: définir l'URL

Pour accéder à la vue créée ici, vous devez définir la racine de l'URL. Ces racines sont définies dans le fichier ** gallery / urls.py **, donc si ce dossier n'existe pas dans le dossier de votre application, créez-le avant de continuer.

Le contenu du fichier ** gallery / urls.py ** est le suivant.

from django.urls import path
from .views import ImageListView, ImageDetailView, ImageCreateView, \
    ImageUpdateView, ImageDeleteView

urlpatterns = [
    path('', ImageListView.as_view(), name='image-list'), # Will serve as homepage
    path('<int:pk>', ImageDetailView.as_view(), name='image-detail'),
    path('create', ImageCreateView.as_view(), name='image-create'),
    path('update/<int:pk>', ImageUpdateView.as_view(), name='image-update'),
    path('delete/<int:pk>', ImageDeleteView.as_view(), name='image-delete'),
]

Ajoutez ensuite le fichier ** gallery / urls.py ** au fichier d'urls de votre projet ** photogallery / urls.py **.

Voici le contenu du fichier ** socialgallery / urls.py **.

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('images/', include('gallery.urls')),
]

Étape 7: créer un modèle HTML

Pour créer un modèle HTML, vous devez créer un dossier de modèles dans lequel Django trouvera le modèle HTML spécifié dans le fichier ** views.py **.

(venv)$ mkdir gallery/templates templates/gallery 

Créez le fichier html suivant dans le fichier de modèle de galerie.

1、templates/gallery/image_list.html

{% block content %}
    <h2>Images</h2>
    <ul>
        {% for image in object_list %}
            <li>{{ image.name }} - {{ image.path }} </li>
        {% endfor %}
    </ul>
{% endblock %}

2、templates/gallery/image_detail.html

<p>Image</p>
<p>name: {{ object.name }}</p>
<p>Path: {{ object.path }}</p>
<p>Views: {{ object.number_views }}</p>

3、templates/gallery/image_create.html

<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value="Save Image">
</form>

4、templates/gallery/image_update.html

<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value="Update User">
</form>

5、templates/gallery/image_delete.html

<form method="post">
    {% csrf_token %}
    <p>Are you sure you want to delete the image "{{ object.name }}"?</p>
    <input type="submit" value="Confirm">
</form>

Étape 8: Paramètres du tableau de bord d'administration

Pour configurer le tableau de bord d'administration de l'application de galerie, vous devez modifier le fichier ** gallery / admin.py ** pour ajouter ce code en interne.

from django.contrib import admin
from .models import Image

@admin.register(Image)
class ImageAdmin(admin.ModelAdmin):
    model = Image

Étape 9: Testez si tout fonctionne

Pour tester que tout fonctionne, vous devez démarrer le serveur de développement avec une commande.

(venv)$ python manage.py runserver

Conclusion

Vous êtes arrivé à la fin de ce didacticiel pour voir des exemples, des intégrations, des utilisations et des services d'utilisation de ressources statiques dans Django. Nous avons vu les paramètres à prendre en compte lors du développement d'applications qui gèrent les images et comment assurer un déploiement sécurisé de tous ces fichiers.

Vous trouverez ci-dessous un lien vers le code source d'une application publiée en ligne.

https://github.com/binel01/photogallery.git

Lire la suite

--Packages utilisés pour gérer les images: django-easythumbnails, Django Packages.

Recommended Posts

Gérer les images Django et les actifs statiques sur Ubuntu
Installez Mecab et mecab-python3 sur Ubuntu 14.04
Installez et exécutez Dropbox sur Ubuntu 20.04
Installez OpenCV et Chainer sur Ubuntu
Installez CUDA 8.0 et Chainer sur Ubuntu 16.04
Installez le fabric sur Ubuntu et essayez
Créer un environnement Python 3 et OpenCV sur Ubuntu 18.04
Environnement virtuel Python et packages sur Ubuntu
Remarques sur la création de fichiers statiques avec Django
Installez Puppet Master and Client sur Ubuntu 16.04
Installez pyenv et Python 3.6.8 sur Ubuntu 18.04 LTS
Django: enregistrez l'agent utilisateur et gérez-le avec l'administrateur
Déployer des applications Django sur Ubuntu + Nginx + MySQL (Build)
Intégrons Django et apache (httpd) sur Mac! !!
Installez MongoDB sur Ubuntu 16.04 et utilisez python
Shebang sur Ubuntu 20.04
Installez Apache 2.4 sur Ubuntu 19.10 Eoan Ermine et exécutez CGI
Ubuntu 20.04 sur raspberry pi 4 avec OpenCV et utilisation avec python
Traitement de pip et des erreurs d'installation associées sur Ubuntu 18.04
Installez django sur python + anaconda et démarrez le serveur
Configurer des bibliothèques Python et d'apprentissage automatique sur Ubuntu