Un guide pour construire une application de raccourcissement d'URL avec Django

La meilleure façon d’apprendre Django, ou toute autre compétence, est d’appliquer les connaissances acquises en créant des projets fonctionnels

Django est le framework de développement web Python le plus utilisé. Ses fonctionnalités intégrées et le grand nombre de paquets tiers en ont fait l’un des frameworks web les plus appréciés dans le monde entier

Il est rapide, fiable et possède de nombreuses fonctionnalités intégrées. Par exemple, un système d’authentification complet, qui vous permet de vous concentrer sur les fonctionnalités principales de votre application. Vous pouvez également installer des paquets externes pour accomplir des tâches encore plus complexes, comme Django-allauth, qui vous permet d’enregistrer les utilisateurs avec leurs comptes sociaux

Mais exposons quelques faits. Django est un framework tellement vaste qu’il est parfois difficile de commencer à l’utiliser

Aujourd’hui, vous allez donc construire à partir de zéro une application Django totalement fonctionnelle

À la fin de ce tutoriel, vous aurez

Avoir écrit une application de raccourcissement d’URL
Comprendre le modèle MVT de Django
Avoir appris le processus de création d’un projet

Pré-requis

Tous les prérequis suivants sont facultatifs et vous aideront à suivre le tutoriel. Mais si vous n’avez pas d’expérience dans l’un de ces domaines, ne vous inquiétez pas. L’étape la plus importante est la première

Connaissance de base des commandes UNIX (ls, cd, rm, touch)
Compréhension de base des classes et fonctions Python
Python installé sur votre ordinateur (Peut-être évident mais je me devais de l’inclure)
Ce serait bien si vous aviez déjà construit quelque chose avec Django

Tout le code de travail sera disponible sur ce repo Github

Maintenant que les concepts précédents sont clairs comme de l’eau de roche, entrons dans le vif du sujet

Déclaration de projet

Dans ce tutoriel, vous allez construire un raccourcisseur d’URL. Fondamentalement, un raccourcisseur d’URL est un service qui prend une longue URL et la transforme en une URL compacte

Par exemple, si vous souhaitez partager un tweet et inclure un lien vers votre site web, mais que vous êtes confronté à la limite de caractères, vous pouvez utiliser un raccourcisseur d’URL

Voyons cela à l’aide d’un graphique

Comme vous pouvez le voir, le raccourcisseur d’URL récupère une longue URL et en renvoie une courte. C’est exactement ce que vous allez construire aujourd’hui

Avec ce projet, vous allez pratiquer l’utilisation du modèle MVT, apprendre les bases de la conception de base de données avec les modèles de Django, et apprendre à montrer des informations à l’utilisateur à travers des vues, des URL et des modèles

Structure d’un projet Django

Fondamentalement, un site web Django est construit à partir d’un projet unique et de plusieurs applications séparées. Chacune de ces applications possède des fonctionnalités spécifiques et est capable de fonctionner de manière autonome

Imaginons une application web complexe comme Stackoverflow. Sa fonctionnalité est basée sur deux aspects principaux

La gestion des utilisateurs : Connexion, Déconnexion, Réputation, Permissions
Forum : Questions, réponses, tags, filtres

En suivant la structure du site web de Django, le projet s’appellerait StackOverflow et aurait deux applications principales. L’application des utilisateurs et l’application du forum

Chacune de ces applications a une fonctionnalité autonome. Cela signifie qu’elles contiennent toutes deux tout le code dont elles ont besoin pour fonctionner correctement

Cela inclut les modèles (structure de la base de données), les vues (requêtes et réponses), les modèles d’URL spécifiques et, bien sûr, les modèles et les fichiers statiques (images, CSS, JavaScript). Cela signifie que n’importe quelle application Django peut être réutilisée puisqu’elle est capable de fonctionner seule

En résumé, un projet fait référence à un ensemble de configurations et d’applications destinées à construire une application web. D’autre part, une application Django est une partie d’un projet, qui est autonome (elle possède tout ce dont elle a besoin pour fonctionner), et son but est d’effectuer une opération spécifique

Mise en place d’un projet Django

Dans cette section, vous allez mettre en place un projet Django. Pour cela, vous allez utiliser différents outils comme un environnement virtuel pour organiser les dépendances de Python et les scripts Django les plus importants. Django-admin et manage.py

Environnement virtuel

Je recommande toujours de travailler avec des environnements virtuels lorsque l’on construit des applications avec Django. C’est le moyen le plus efficace de maintenir un ensemble spécifique de dépendances. Mais son but principal est d’isoler les paquets de développement des paquets globaux

Créons donc un environnement virtuel avec python, la commande form intégrée

Note : Cette méthode nécessite Python 3.6 ou des versions plus récentes pour fonctionner

python -m venv .venv

Cette commande utilise la commande python -m ou python –mod . Fondamentalement, elle exécute un module ou une bibliothèque sous la forme d’un script. Selon la signification de cette commande, venv est la bibliothèque que nous exécutons, et .venv fait référence au nom de l’environnement virtuel que nous voulons créer

En clair, cette commande signifie

Hey Python, exécutez en tant que script la bibliothèque intégrée venv et créez un environnement virtuel nommé .venv

Maintenant, il est temps d’activer l’environnement virtuel que nous venons de créer, avec la commande suivante

source .venv/bin/activate

Pour affirmer que vous n’avez aucun paquet installé dans le nouveau venv, vous exécutez

pip freeze

Si vous avez correctement activé l’environnement virtuel, vous n’obtiendrez aucun résultat. C’est parce que nous n’avons encore rien installé

Entrons dans Django

Afin de créer notre application de raccourcissement d’URL, nous allons commencer par installer le paquetage Django. Django est un paquetage tiers, nous devons donc l’installer avec Pip (Pip Installs Packages)

$ pip install django
Collecte de django
 Téléchargement de Django-3.2.1-py3-none-any.whl (7.9 MB)
 |████████████████████████████████| 7.9 MB 344 kB/s
Collecte de asgiref<4,>=3.3.2
 Utilisation de asgiref-3.3.4-py3-none-any.whl (22 kB)
Collecte sqlparse>=0.2.2
 Utilisation de sqlparse-0.4.1-py3-none-any.whl (42 kB)
Collecte pytz
 Utilisation de pytz-2021.1-py2.py3-none-any.whl (510 kB)
Installation des paquets collectés : asgiref, sqlparse, pytz, django
Installation réussie de asgiref-3.3.4 django-3.2.1 pytz-2021.1 sqlparse-0.4.1

Note : Rappelez-vous que $ n’est rien d’autre que le symbole de votre shell

Pour vérifier que l’installation s’est déroulée correctement, nous vérifions à nouveau les paquets installés sur notre serveur

$ pip freeze
asgiref==3.3.4
Django==3.2.1

pytz==2021

.1
sqlparse==0.4.1

Ne vous inquiétez pas si les versions que vous obtenez sont différentes des miennes. Si Django est toujours en version 3.x, vous pouvez continuer sans problème

Démarrer un projet Django

Une fois que vous avez installé Django, il est temps de créer la structure du site web du raccourcisseur d’URL. Vous souvenez-vous de ce qu’est un projet Django ? Créons-en un en exécutant la commande suivante

django-admin startproject config

Pour tout savoir sur cette commande, sachez que django-admin est un utilitaire en ligne de commande qui effectue toutes les tâches nécessaires à la création d’un projet Django. La partie “startproject” est la commande exécutée par l’utilitaire Django-admin, et config est le nom du projet que nous allons créer

Il est important de souligner que config peut être le nom que vous voulez. La raison pour laquelle j’utilise config comme nom de ce projet est juste pour des raisons de commodité. Il est agréable de passer d’un projet à l’autre tout en conservant la même convention de nommage. N’ayez donc pas peur d’utiliser d’autres noms de projet lorsque vous le souhaitez

Comme vous pouvez le remarquer, vous avez maintenant un dossier config/ et à l’intérieur, il y a de nombreux fichiers. Nous verrons plus tard la structure des fichiers du projet. Pour l’instant, entrons dans le répertoire du projet et lançons le serveur local

cd config/

Le fichier le plus important que vous utiliserez est le script manage.py . Il a les mêmes fonctionnalités que django-admin, mais le principal avantage de son utilisation est qu’il vous permet de gérer les paramètres lors de l’exécution du projet

Voyons maintenant si tout fonctionne correctement

python manage.py runserver

Création de l’application de raccourcissement d’url

Il est temps de créer l’application principale du projet. Vous allez utiliser le fichier manage.py pour accomplir cette tâche

python manage.py startapp urlshortener

Ceci crée une application Django, avec le nom urlshortener. Si vous exécutez la commande tree, vous obtiendrez quelque chose comme ceci

.
├── config
│ ├── asgi.py
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── manage.py
└── urlshortener
 ├── admin.


 ├──

 apps.py
 ├── __init__.py
 ├── migrations
 │

 └── __init__.py
 ├── models.py
 ├── tests.py
 └── views.py

Clarifions les différents fichiers créés jusqu’à présent. “config” est le nom de notre projet et il est nommé ainsi juste pour la convention. À l’intérieur de config, vous obtenez settings.py, c’est le fichier où vous définissez tous les paramètres de votre projet. urls.py est la configuration générale des URLs à l’intérieur du projet. Il définit les chemins d’URL de toutes les applications à l’intérieur du projet

Ne vous préoccupez pas trop des fichiers asgi.py et wsgi.py. Ce sont des fichiers qui vous permettent de configurer votre application lors du déploiement

Le fichier manage.py est le script python qui vous permet d’exécuter toutes les commandes disponibles de Django-admin

En jetant un coup d’œil à l’intérieur de urlshortener, qui est le nom de l’application que vous venez de créer, vous pouvez remarquer qu’il y a un dossier bizarre appelé “migrations/” et quelques autres fichiers qui sont cruciaux pour la logique de n’importe quelle application

apps.py est l’endroit où se trouve la configuration de l’application. En général, vous ne vous en occupez pas, à moins que vous ne fassiez des choses très avancées

admin.py est l’endroit où vous enregistrez vos modèles pour les rendre visibles dans le panneau d’administration de Django

models.py est le plus important. Dans ce module, vous devez définir les modèles, qui sont (vaguement) la manière dont les données sont stockées. Vous en saurez plus sur les modèles plus tard

migrations/ est le dossier où sont stockées les migrations de Django. Nous y jetterons un coup d’œil approfondi plus tard

tests.py est le fichier où sont stockés les tests. Nous n’aborderons pas les tests dans ce tutoriel

views.py est le fichier qui stocke les vues. Fondamentalement, il définit comment l’utilisateur interagira avec tous les aspects de votre application

Installation d’une application Django

Avant de continuer, ouvrez le fichier settings.py et modifiez la variable INSTALLED_APPS en ajoutant l’application urlshortener

# Définition de l'application

INSTALLED_APPS = [
 'django.contrib.admin',
 'django.contrib.auth',
 'django.contrib.contenttypes',
 'django.contrib.sessions',
 'django.contrib.messages',
 'django.contrib.staticfiles',
 # Applications personnalisées
 'urlshortener',

]
Il s’agit d’un processus de routine lorsque vous créez une application. Chaque fois que vous le faites, n’oubliez pas de l’installer dans les paramètres du projet

Comprendre le modèle MVT

Le modèle MVT (Model, View, Template) est le modèle de conception logicielle que les développeurs de Django utilisent pour créer des applications web

Il est basé sur 3 concepts principaux. Modèle (données), Vue (interaction de l’utilisateur avec les données), Modèle (comment les utilisateurs voient les données)

Les modèles sont des classes Python qui définissent tous les champs et le comportement des données que vous souhaitez stocker. Normalement, chaque modèle fait référence à une table unique dans la base de données

Les vues, dans leur expression la plus simple, sont des éléments appelables qui reçoivent une demande de l’utilisateur et génèrent une réponse. Entre ce processus se trouve la logique d’entreprise. Je sais que la “logique d’entreprise” est un concept assez obscur, alors laissez-moi vous expliquer exactement de quoi il s’agit. La logique d’entreprise est la façon dont les données sont créées, stockées et supprimées, c’est tout

Enfin, les modèles sont des documents textuels (généralement Html) qui sont présentés aux utilisateurs. Leur but est de présenter les données aussi proprement que possible. Django intègre un mini-langage appelé Django template language (DTL) qui vous permet d’incorporer une partie de la puissance de Python dans des documents textuels

Créez le modèle de raccourcisseur

Une fois que vous avez rapidement compris le modèle MVT, commençons à créer le raccourcisseur d’URL de Django à partir de zéro

Tout d’abord, définissons le modèle du raccourcisseur dans le fichier models.py

'''
Modèle de raccourcisseur d'URL
'''

from django.db import models

# Créez vos modèles ici.

class Shortener(models.Model) :
 '''
 Crée une url courte à partir d'une url longue
    
 created -> Heure et date de création du raccourcisseur
    
 times_followed -> Nombre de fois où le lien raccourci a été suivi

 long_url -> Le lien original

 short_url -> lien raccourci https://domain/(short_url)
 '''
 created = models.DateTimeField(auto_now_add=True)

 times_followed = models.PositiveIntegerField(default=0)

 long_url = models.URLField()

 short_url = models.CharField(max_length=15, unique=True, blank=True)

 class Meta :

 ordering = ["-created"]


 def __str__(self) :

 return f'{self.long_url} to {self.short_url}'

Je sais. C’est une classe assez énorme, avec beaucoup de choses bizarres qui se passent, mais ne désespérez pas. Je vais aller pas à pas sur chaque chose importante

Explication du modèle

Tout d’abord, nous importons le module models. Ce module contient toutes les fonctionnalités dont nous avons besoin pour créer un modèle Django

En regardant le modèle “Shortener”, la première chose à noter est qu’il étend models.Model. En fait, tout modèle dans une application Django doit être une sous-classe de la classe models.Model

Ensuite, nous définissons tous les champs que le modèle aura dans la base de données. Le champ “created” est la date et l’heure de création du lien raccourci, nous utilisons donc DateTimeField pour créer ce type de fonctionnalité. Nous utilisons l’argument auto_now_add=True car nous voulons que le champ ne soit modifié que lorsque l’instance est créée

Le deuxième champ times_followed fait référence aux fois où l’URL raccourcie a été utilisée. Il s’agit d’un champ PositiveIntegerField et nous spécifions une valeur par défaut de zéro. Cela signifie qu’à chaque fois qu’une instance a créé le champ times_followed, Django remplit ce champ avec 0

D’autre part, long_url fait référence à l’URL saisie par l’utilisateur. Il s’agit d’un champ URLField, car nous voulons que l’utilisateur n’entre que des caractères de la forme : http://yoursite.com

Le dernier champ est short_url, et il présente des détails intéressants. Nous précisons qu’il ne peut contenir que 15 caractères et qu’il doit être unique, ce qui signifie qu’il ne peut y avoir d’éléments répétés dans ce champ. Enfin, nous indiquons qu’il peut être laissé vide, ce qui signifie que lorsque vous travaillez avec des formulaires, les utilisateurs n’auront pas besoin d’écrire leur propre code de raccourcissement

La classe interne Meta nous indique comment la classe doit se comporter, et nous définissons que l’ordre (en appelant Shortener.objects.all()) des objets de raccourcissement sera discriminé par les plus récents

La méthode __str__ indique comment le modèle doit être imprimé. Ainsi, si nous avons un objet avec long_url = “https://geekflare.com/” et une partie raccourcie “123456”, et que nous l’imprimons, la méthode __str__ indique comment le modèle doit être imprimé

https://geekflare.com/ à 123456

Il est maintenant temps de trouver un moyen d’enregistrer le lien court de manière aléatoire

Création d’une fonctionnalité de raccourcissement

Nous allons créer deux fonctions personnalisées. La première générera un code aléatoire et la seconde évitera de recevoir des codes aléatoires répétés de la part du modèle de raccourcissement. Pour ce faire, créez un fichier utils.py dans l’application “urlshortener”

touch utils.py

Dans ce fichier, nous allons utiliser la fonction choose du module intégré random. Cela facilite la tâche de choisir des caractères aléatoires pour créer le code

'''
Utilities for Shortener
'''
from django.conf import settings

from random import choice

from string import ascii_letters, digits

# Essayez d'obtenir la valeur du module settings
SIZE = getattr(settings, "MAXIMUM_URL_CHARS", 7)

AVAIABLE_CHARS = ascii_letters digits


def create_random_code(chars=AVAIABLE_CHARS) :
   """
 Crée une chaîne aléatoire de la taille prédéterminée
 """
 return "".join(
 [choice(chars) for _ in range(SIZE)]
 )

Comme vous pouvez le constater, cette fonction renvoie une chaîne aléatoire de la longueur spécifiée dans le fichier de configuration ou 7 par défaut. Vous utilisez la fonction getattr pour obtenir une variable du module de configuration, mais sans générer d’erreur si la variable n’est pas spécifiée

Faisons quelques calculs. Si nous avons 7 endroits où il peut y avoir jusqu’à 62 caractères disponibles pour chaque endroit, les permutations possibles sont

Sur la base de ces calculs rapides, la partie abrégée peut donc être remplie avec 2,5 trillions de codes différents. Nous pouvons donc oublier de nous débarrasser des URL raccourcis aléatoires

Bien qu’il puisse exister un tel nombre de permutations, il existe une faible probabilité d’obtenir des parties abrégées répétées. C’est un problème puisque nous avons configuré le champ shortened_url pour qu’il soit unique. C’est pourquoi la fonction suivante est si utile

def create_shortened_url(model_instance) :
 random_code = create_random_code()
 # Obtient la classe du modèle

 model_class = model_instance.__class__

 if model_class.objects.filter(short_url=random_code).exists() :
 # Exécutez la fonction à nouveau
 return create_shortened_url(model_instance)

 return random_code

Voyons ce qui se passe ici. La fonction prend comme argument une instance de modèle “Shortener”. Tout d’abord, la fonction génère un code aléatoire à l’aide de la fonction create_random_code. Ensuite, elle récupère la classe du modèle et vérifie si un autre objet possède le même short_url. Si c’est le cas, elle s’exécute encore une fois, mais si tout va bien, elle renvoie le code aléatoire

Plus tard, vous interagirez avec l’interpréteur de commandes afin d’examiner cette fonction de plus près

Après avoir créé la fonction utilitaire, utilisons-la pour créer des codes aléatoires dans le modèle de raccourcisseur

Modification de la méthode save

A la fin de la classe “Shortener”, vous allez modifier la méthode save du modèle. La méthode save est appelée à chaque fois qu’un objet est sauvegardé dans la base de données, nous allons donc voir comment l’utiliser ici

# Importez la fonction utilisée pour créer des codes aléatoires
from .utils import create_shortened_url

# A la fin du modèle du Shortener
 def save(self, *args, **kwargs) :

 # Si l'url courte n'a pas été spécifiée
 if not self.short_url :
 # Nous transmettons l'instance de modèle qui est sauvegardée
 self.short_url = create_shortened_url(self)

 super().save(*args, **kwargs)

La méthode save est écrasée, ce qui signifie que vous introduisez une nouvelle fonctionnalité dans une méthode parent préexistante. Elle indique à Django qu’à chaque fois qu’un objet ” Shortener ” est sauvegardé et que le short_url n’est pas spécifié, il doit être rempli avec un code aléatoire

Exécution des migrations

Il est maintenant temps de réaliser et d’exécuter les migrations du modèle Shortener. Pour ce faire, exécutez les commandes suivantes dans le dossier racine du projet

$ python manage.py makemigrations
Migrations pour 'urlshortener' :
 urlshortener/migrations/0001_initial.py
 - Create model Shortener

$ python manage.py migrate
Opérations à effectuer :
 Appliquer toutes les migrations : admin, auth, contenttypes, sessions, urlshortener
Exécuter les migrations :
......
 # Appliquer les migrations du raccourcisseur d'URL
 Appliquer urlshortener.0001_initial... OK

Pour l’instant, vous n’avez pas à vous préoccuper de ce que sont les migrations. Gardez simplement à l’esprit que lorsque vous exécutez ces deux commandes, Django crée un fichier de base de données db.sqlite, basé sur les modèles que vous avez définis

Créons quelques objets avec l’interpréteur de commandes de Django

$ python manage.py shell

>>> from urlshortener.models import Shortener
>>> s = Shortener(long_url="https://geekflare.com")
>>> s.short_url
''
>>> s.save()
>>> s.short_url
'kdWFVIc'
>>> s.long_url
'https://geekflare.com'
>>> print(s)
https://geekflare.com to kdWFVIc

C’est à peu près ainsi que fonctionneront tous les objets de raccourcissement

Écrire des vues

Comme je l’ai dit précédemment, une vue est une simple fonction qui prend une requête et renvoie une réponse. Voyons donc comment créer une vue hello world

Modèle de base de réponse

Dans le fichier “urlshortener/views.py”, créez une fonction home_view. aa
‘

''
Vues du raccourcisseur
'''
from django.shortcuts import render, get_object_or_404 # Nous l'utiliserons plus tard

from django.http import HttpResponse

 Créez vos vues ici.

def home_view(request) :
 return HttpResponse("Hello world")

Le message retourné est simple : “Hello world”. Vous verrez plus tard ce que cela donne dans le navigateur. Créez maintenant un fichier “urls.py”, qui contiendra tous les modèles d’URL de l’application

touch urls.py

Ajoutez le code suivant
‘

''
Urls pour l'application shortener urlshortener/urls.py
'''

from django.urls import path

 Importer la vue de la maison
from .views import home_view

appname = "shortener"

urlpatterns = [
 # Vue de la maison
 path("", home_view, name="home")

]

La variable appname déclare (comme son nom l’indique) l’espacement des noms de l’application urlshortener

Pour l’expliquer rapidement, nous importons la fonction path, qui renvoie un élément à inclure dans les urlpatterns de l’application. L’attribut name est l’espace de noms du path, qui peut être appelé à l’intérieur des templates si nécessaire

Maintenant, modifions les URLs globales du projet

# config/urls.py

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

urlpatterns = [
 path('admin/', admin.site.urls),
    
 # Urls de raccourcissement
 path('', include('urlshortener.urls'))

]

Maintenant, lançons à nouveau le serveur

python manage.py runserver

Si vous lancez le serveur, vous obtiendrez un simple message “Hello world”. C’est parce que vous incluez les urlpatterns de l’application de raccourcissement d’URL dans le projet global

Ce n’est qu’un point de départ. Il est maintenant temps de créer un formulaire qui permettra à l’utilisateur de créer lui-même des URL raccourcies

Création de formulaires

Dans Django, un formulaire est une classe simple qui permet d’obtenir des données de l’utilisateur

Vous allez créer un fichier forms.py. C’est une convention de stocker tous les formulaires de l’application dans ce fichier

cd urlshortener/
touch forms.py

Dans ce fichier, vous allez créer une classe “ShortenerForm” qui s’étend à partir de “ModelForm”

'''
Shortener Forms urlshortener/forms.py
'''

from django import forms

from .models import Shortener

class ShortenerForm(forms.ModelForm) :
    
 long_url = forms.URLField(widget=forms.URLInput(
 attrs={"class" : "form-control form-control-lg", "placeholder" : "Votre URL à raccourcir"}))
    
 class Meta :
 model = Shortener

 fields = ('long_url',)

Il s’agit d’un formulaire de modèle puisque son but est de créer un objet modèle à partir des données de l’utilisateur. Nous utilisons également l’argument widget, qui nous permet de spécifier l’attribut “class” (classe en CSS, pas en python). C’est parce que nous allons styliser l’application avec bootstrap plus tard

Finition des vues

Après avoir construit les formulaires, il est temps de créer la logique métier finale de l’application

Naviguez vers le fichier views.py à l’intérieur de l’application du raccourcisseur, et modifiez la vue home_view. Vous pouvez consulter le repo Github pour avoir une idée de la structure du projet

Il y a deux vues pour l’application de raccourcissement d’URL

La vue d’accueil : Elle affiche le formulaire de raccourcissement et la nouvelle URL si le formulaire a déjà été soumis.
Vue de redirection : Cette vue redirige vers l’URL longue et ajoute 1 aux temps suivis.

Commençons par la vue d’accueil, qui est la plus complexe. Vous devrez importer le modèle et le formulaire du raccourcisseur. Vous utilisez toujours une fonction car je veux que vous compreniez tout le flux de données de la vue. De plus, vous utiliserez le chemin d’un modèle (qui n’est pas encore créé)

Vue d’accueil

'''
Vues de raccourcis
'''
from django.shortcuts import render # Nous l'utiliserons plus tard

from django.http import HttpResponse, Http404, HttpResponseRedirect


# Modèle
from .models import Shortener

# Formulaire personnalisé

from .forms import ShortenerForm

# Créez vos vues ici.

def home_view(request) :
    
 template = 'urlshortener/home.html'

    
 context = {}

 # Formulaire vide
 context['form'] = ShortenerForm()

 if request.method == 'GET' :
 return render(request, template, context)

 elif request.method == 'POST' :

 used_form = ShortenerForm(request.POST)

 if used_form.is_valid() :
            
 shortened_object = used_form.save()

 new_url = request.build_absolute_uri('/') shortened_object.short_url
            
 long_url = shortened_object.

long_url


             
 context['new_url'] = new_url
 context['long_url'] = long_url
             
 return render(request, template, context)

 context['errors'] = used_form.errors

 return render(request, template, context)

La vue est basée sur deux conditions

Lorsque la méthode HTTP est GET : Nous ne transmettons comme contexte que le formulaire de raccourcissement utilisé pour créer des objets de raccourcissement.
Lorsque la méthode HTTP est POST : Nous transmettons toujours le formulaire dans le contexte puisque nous voulons que l’utilisateur puisse saisir une autre URL. Mais nous transmettons la requête Post à un autre formulaire appelé used_form.

Un moyen délicat d’obtenir l’URL complète du site de manière dynamique consiste à utiliser la méthode de l’objet de requête build_absolute_uri

>>> print(request.build_absolute_uri('/'))
'https://localhost:8080/'

Comme moyen sûr de traiter une mauvaise requête (l’utilisateur n’a pas saisi une URL valide), nous récupérons les erreurs de formulaire, nous les passons en tant que contexte et nous rendons le modèle comme d’habitude. Vous verrez plus tard comment implémenter l’affichage des erreurs dans le modèle

Vue de redirection

La vue redirect_url_view est un peu plus simple. Il s’agit d’une vue détaillée, ce qui signifie que la vue ne fonctionne qu’avec un objet

Cette fonction prend en paramètre la requête de l’utilisateur et la partie raccourcie de l’URL. Il n’est pas nécessaire d’affirmer le type de requête que nous recevons, puisque nous ne travaillons pas avec des formulaires dans cette vue

def redirect_url_view(request, shortened_part) :

 try :
 shortener = Shortener.objects.get(short_url=shortened_part)

 shortener.times_followed = 1

 shortener.save()
        
 return HttpResponseRedirect(shortener.long_url)
        
 except :
 raise Http404('Sorry this link is broken :(

‘)
Nous protégeons la vue avec une instruction try/except, au cas où la partie raccourcie ne serait pas trouvée dans la base de données. Si l’objet est trouvé, il ajoute 1 au champ times_followed et redirige avec la fonction HttpResponseRedirect vers l’URL du site correspondant au code aléatoire

Mise à jour des URL

Une fois que vous avez créé les deux vues de l’application, il est temps de créer les modèles d’URL finaux en incluant le chemin vers la vue redirect_url_

Comme toujours, vous commencez par importer les vues, puis vous créez une fonction path et vous la passez en argument

La route URL
La vue pointant vers le chemin
Le nom du chemin

'''
Urls for shortener app urlshortener/urls.py
'''

from django.urls import path

# Import the home view
from .views import home_view, redirect_url_view

appname = "shortener"

urlpatterns = [
 # Home view
 path('', home_view, name='home'),
 path('<str:shortened_part>', redirect_url_view, name='redirect'),

]

Avec cette configuration d’URL, le routage de l’application ressemble à ceci

localhost:8000/: Vue d’accueil
localhost:8000/URL-code: Redirection vers l’URL longue

Création de modèles

Vous y êtes presque. La seule chose qui vous sépare de la construction de cette application est l’interface utilisateur. Pour cela, nous utilisons les modèles de Django

Les modèles sont utilisés pour rendre une interface propre à l’utilisateur de l’application. Ces fichiers sont créés à l’intérieur de l’application dans une double structure de dossiers de la forme : “templates/appname”

# répertoire urlshortener

mkdir

-p templates/urlshortener/

Remarque : la structure à double dossier et le langage de gabarit de Django sortent du cadre de ce tutoriel, mais vous pouvez en prendre connaissance dans la documentation officielle

Modèle de base

Django permet l’héritage de modèles. Cela signifie que nous pouvons avoir un modèle de base et l’étendre dans le but de suivre le principe DRY (Don’t repeat yourself)

cd templates/urlshortener
touch base.html

Le fichier base.html est une convention et signifie que tous les autres modèles de l’application doivent être une extension de celui-ci

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Django Url shortener</title>

 <link
 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css"
 rel="stylesheet"
 integrity="sha384-wEmeIV1mKuiNpC IOBjI7aAzPcEZeedi5yW5f2yOq55WLwNGmvx4Um1vskeMj0"
 crossorigin="anonymous"
 />

 <link
 rel="stylesheet"
 href="https ://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
 integrity="sha512-iBBXm8fW90 nuLcSKlbmrPcLa0OT92xO1BIsZ ywDWZCvqsWgccV3gFoRBv0z 8dLJgyAHIhR35VZc2oM/gI1w=="
 crossorigin="anonymous"
 />
 </head>
 <body>
   
 {% block body %} 
   
   
    
   {% endblock body %}
    
 <script
 src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"
 integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy 8"
 crossorigin="anonymous"
 ></script>
 </body>
</html&gt

Nous allons utiliser le CDN bootstrap, pour créer une interface rapide et jolie sans avoir besoin de fichiers CSS ou javascript

Si vous voulez en savoir plus sur les balises DTL, vous pouvez consulter la documentation officielle

Modèle d’accueil

Le modèle home, hérite du fichier base.html. Cela signifie que ce modèle inclut tout le HTML du fichier parent

{% extends 'urlshortener/base.html' %} 

{% block body %}

<div class="container">
 <div class="card mt-5">
 <div class="card-header text-center py-3">
 <h1>URL Shortner Application <i class="fas fa-link px-2"><i><i><i><i><i><i><i>./i></h1>
 </div>
 <div class="px-3 py-4">
 <form action="" method="POST">
 {% csrf_token %}
 <div class="row g-1">
 <div class="col-10">{{form.long_url}}</div>
 <div class="col-2">
 <button class="btn btn-success btn-lg w-100" type="submit">
 Raccourcir
 </button>
         </div>
 </div>
 </form>
 </div>
 </div>
 {% if errors %}
 <div class="alert alert-danger mt-4" role="alert">
 <p>{{errors}}</p>
 </div>
 {% endif %}

 {% if new_url %}

 <div class="mx-auto text-center mt-5">
 <h2 class="text-danger">Votre Url raccourcie</h2>
   <p>Vous pouvez copier le lien ci-dessous et le partager avec vos amis</p>
 <p class="">{{new_url}}</p>
 <p><span class="text-danger">Url précédente :</span> {{long_url}}</p>
 </div>
 {% endif %}
</div>

 endblock body %}

Je vais vous expliquer rapidement le flux de données de ce modèle

Le formulaire du raccourcisseur s’affiche. À l’intérieur, le jeton crsf est défini (pour des raisons de sécurité), et seul le champ URL long du formulaire est affiché. Rappelez-vous que ce champ a la classe CSS “form-control form-control-lg”, parce que nous l’avons définie dans le formulaire.
Si des erreurs sont trouvées, affichez-les
Si l’opération POST réussit, la nouvelle URL est affichée.

Application finale

Félicitations ! 🎉. Vous avez construit une application fonctionnelle complète de raccourcisseur d’URL avec Django

Voici quelques captures d’écran de ce à quoi ressemble l’application

Obtenez seulement

Erreur de raccourcissement d’URL

URL raccourcie avec succès

URL redirigée

Que pensez-vous d’exposer une démo de cette application de raccourcissement d’URL à quelqu’un ? Découvrez comment exposer une application Django Demo à l’internet

Défi 🔥

Si vous vous sentez à l’aise avec vos compétences en Django, pourquoi ne pas vous entraîner avec un défi ?

Clonez le code de cette application et créez un système d’authentification, où seuls les utilisateurs enregistrés peuvent raccourcir leurs URL

Lorsque vous aurez terminé, envoyez une pull request et envoyez-moi un ping sur Twitter pour présenter vos réalisations

Pour conclure

Vous avez atteint la fin de ce tutoriel. Croyez-le ou non, vous venez de passer en revue tous les aspects principaux de la création d’un projet Django. J’espère que vous l’avez trouvé extrêmement utile

Dans ce tutoriel, vous avez

Appris à connaître le processus de création d’une application Django.
Construit un projet de CV
Compris les différences et la structure des projets Django et des applications Django.
Découvert le modèle MVT.
Création de vues de base de fonctions
Utilisé l’ORM (Object Relational Mapper) de Django pour créer des modèles simples

C’est tout, il y a beaucoup à couvrir avec le framework web Django, alors restez en contact pour d’autres tutoriels étonnants.

Daniel Diaz

Auteur