Un guide pour créer 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 que vous avez 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 sa grande quantité de packages tiers en ont fait l'un des plus appréciés frameworks web 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 des trous, qui vous permet de vous concentrer sur les principales fonctionnalités de votre application. En outre, vous pouvez installer des packages externes pour accomplir des tâches encore plus complexes, telles que Django-allauth, qui vous permet d'enregistrer des utilisateurs avec leurs comptes sociaux.

Mais exposons quelques faits. Django est un cadre tellement vaste qu'il est parfois difficile de s'y mettre.

Donc, aujourd'hui, vous allez construire à partir de zéro une application Django totalement fonctionnelle.

À la fin de ce didacticiel, vous allez:

• Avoir écrit une application de raccourcissement d'URL
• Comprendre le modèle Django MVT
• Avoir appris le flux de travail de la création d'un projet

Pre-requirements

Toutes les exigences suivantes sont facultatives et vous aideront à suivre le didacticiel. Mais si vous n'avez pas d'expérience avec l'un d'entre eux, ne vous inquiétez pas. L'étape la plus importante est la première.

• Compréhension de base de Commandes UNIX (ls, cd, rm, toucher)
• Compréhension de base des classes et des fonctions Python
• Python installé sur votre ordinateur (peut-être évident mais je devais l'inclure)
• Ce serait génial si vous avez déjà construit quelque chose avec Django

Tout le code de travail sera disponible sur ce Github repo.

Maintenant que vous avez parfaitement compris les concepts précédents, entrons dans le vif du sujet.

Project statement

Dans ce didacticiel, vous allez créer un raccourcisseur d'URL. Fondamentalement, un URL raccourcisseur est un service qui prend une longue URL et la transforme en une URL compacte.

Par exemple, si vous souhaitez partager un tweet et que vous souhaitez 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 avec un graphique.

Comme vous pouvez le voir, le raccourcisseur d'URL obtient une URL longue et en renvoie une courte. C'est exactement ce que vous allez construire aujourd'hui.

Avec ce projet, vous vous exercerez à utiliser le modèle MVT, apprendrez les bases de la conception de bases de données avec les modèles Django et apprendrez à montrer des informations à l'utilisateur via des vues, des URL et des modèles.

Structure of a Django project

Fondamentalement, un site Web Django est construit sur un seul projet et plusieurs séparés applications. Chacune de ces applications a des fonctionnalités spécifiques et elle est capable de fonctionner par elle-même.

Imaginons une application Web complexe comme Stackoverflow. Sa fonctionnalité repose sur deux aspects principaux.

• Gestion des utilisateurs: Connexion, déconnexion, réputation, autorisations
• Forum: Questions, réponses, tags, filtres

Donc, suivant la structure du site Web de Django, le projet serait nommé StackOverflow qui a deux applications principales. le utilisateurs' app et le forum app.

Chacune de ces applications a des fonctionnalités autonomes. Cela signifie que les deux contiennent tout le code dont ils 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 toute application Django peut être réutilisée car elle peut fonctionner seule.

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

Set Up a Django project

Dans cette section, vous allez configurer un projet Django. Pour cela, vous allez utiliser différents outils comme un Environnement virtuel pour organiser Python dépendances et les scripts Django les plus importants. Django-admin et gérer.py

Environnement virtuel

Je recommande toujours de travailler avec environnements virtuels lors de la création d'applications avec Django. C'est le moyen le plus efficace de maintenir un ensemble spécifique de dépendances. Mais son objectif principal est d'isoler les packages de développement des packages globaux.

Créons donc un environnement virtuel avec python, la commande de formulaire intégrée.

Remarque : Cette méthode nécessite Python 3.6 ou versions plus récentes à travailler.

python -m venv .venv

Cette commande utilise le python-m or python-mod commander. Fondamentalement, il exécute un module ou une bibliothèque, sous forme de 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.

Donc, en langage clair, cette commande signifie.

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

Il est maintenant 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, exécutez.

pip freeze

Si vous avez activé correctement l'environnement virtuel, vous n'obtiendrez aucune sortie. 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 package Django. Django est un package tiers, nous devons donc l'installer avec Pépin (Pip installe les packages).

$ pip install django
Collecting django
  Downloading Django-3.2.1-py3-none-any.whl (7.9 MB)
     |████████████████████████████████| 7.9 MB 344 kB/s 
Collecting asgiref<4,>=3.3.2
  Using cached asgiref-3.3.4-py3-none-any.whl (22 kB)
Collecting sqlparse>=0.2.2
  Using cached sqlparse-0.4.1-py3-none-any.whl (42 kB)
Collecting pytz
  Using cached pytz-2021.1-py2.py3-none-any.whl (510 kB)
Installing collected packages: asgiref, sqlparse, pytz, django
Successfully installed asgiref-3.3.4 django-3.2.1 pytz-2021.1 sqlparse-0.4.1

Remarque : Rappelez-vous que $ n'est rien d'autre que votre symbole de coquille.

Pour vérifier si l'installation s'est déroulée correctement, nous vérifions à nouveau les paquets installés de notre venv.

$ 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 sur la version 3.x, vous pouvez continuer sans aucun 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

Expliquer tout sur cette commande, django-admin est un utilitaire de ligne de commande qui effectue toutes les tâches nécessaires pour créer 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 n'importe quel nom que vous voulez. La raison pour laquelle j'utilise config comme nom de ce projet est simplement pour des raisons de commodité. C'est bien de basculer entre les projets tout en conservant la même convention de dénomination. N'ayez donc pas peur d'utiliser d'autres noms de projet quand vous le souhaitez.

Comme vous le remarquerez peut-être maintenant, vous avez un config / dossier et à l'intérieur, il y a de nombreux fichiers. Plus tard, nous verrons la structure des fichiers du projet. Pour l'instant, entrons dans le répertoire du projet et exécutons le serveur local.

cd config/

Le fichier le plus important que vous utiliserez est le gérer.py scénario. Il a la même fonctionnalité 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

Creating the Url shortener app

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

python manage.py startapp urlshortener

Cela crée une application Django, avec le nom raccourcisseur d'url. Si vous exécutez le arbre commande, vous obtiendrez quelque chose comme ça.

.
├── config
│   ├── asgi.py
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── manage.py
└── urlshortener
    ├── admin.py
    ├── apps.py
    ├── __init__.py
    ├── migrations
    │   └── __init__.py
    ├── models.py
    ├── tests.py
    └── views.py

Clarifions les différents fichiers créés jusqu'à ce moment. «Config» est le nom de notre projet et il est nommé comme ça juste pour la convention. À l'intérieur de la configuration, vous obtenez settings.py, c'est le fichier dans lequel vous définissez tous les paramètres de votre projet. urls.py est la configuration globale des URL à l'intérieur du projet. Il définit les chemins URL de toutes les applications à l'intérieur du projet.

Ne vous inquiétez pas trop de la asgi.py et wsgi.py des dossiers. Ce sont des fichiers qui vous permettent de configurer votre application en déploiement.

La solution manage.py est le script python qui vous permet d'exécuter toutes les commandes disponibles de Django-admin.

Jetant un œil à l'intérieur urlshortener qui est le nom de l'application que vous venez de créer, vous remarquerez peut-être qu'il existe un dossier étrange appelé «migrations /» et d'autres fichiers cruciaux pour la logique de toute application.

apps.py est l'endroit où réside la configuration de l'application. Habituellement, vous ne dérangez pas avec ça, sauf que vous faites des choses assez avancées.

admin.py est l'endroit où vous enregistrez votre numériques jumeaux (digital twin models) pour les rendre visibles dans le panneau d'administration de Django.

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

migrations/ est le dossier dans lequel les migrations Django sont stockées. Nous y reviendrons plus tard.

tests.py est le fichier dans lequel les tests sont stockés. Nous ne couvrirons pas les tests dans ce didacticiel.

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

Installer une application Django

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

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # Custom apps
    'urlshortener',
]

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

Understanding the MVT pattern

Le modèle Modèle, Vue, Modèle est le modèle de conception de logiciel que les développeurs 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 êtes prêt à 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 appelables qui prennent une demande de l'utilisateur et génèrent une réponse. Entre ce processus se produit la logique métier. Je sais que la «logique métier» est un concept assez obscur, alors laissez-moi vous expliquer exactement ce que c'est. La logique métier 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 texte (généralement Html) qui sont présentés aux utilisateurs. Son objectif est de présenter les données aussi propres que possible. Django intègre un mini-langage appelé Langage de modèle Django (DTL) qui vous permet d'incorporer une partie de la puissance de python dans les documents texte.

Create the Shortener model

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

Tout d'abord, définissons le modèle de raccourcisseur à l'intérieur du models.py fichier.

'''
Url shortener model
'''

from django.db import models

# Create your models here.

class Shortener(models.Model):
    '''
    Creates a short url based on the long one
    
    created -> Hour and date a shortener was created 
    
    times_followed -> Times the shortened link has been followed

    long_url -> The original link

    short_url ->  shortened link 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 connais. C'est une classe assez énorme, avec beaucoup de trucs bizarres, mais ne désespérez pas. J'irai étape par étape sur chaque chose importante.

Explication du modèle

Tout d'abord, nous importons le models module. 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 s’étend models.Model. En fait, tout modèle de toute application Django doit être une sous-classe de la modèles.Modèle classe.

Ensuite, nous définissons tous les champs que le modèle aura sur la base de données. Le champ «créé» est la date et l'heure de création du lien raccourci, c'est pourquoi nous utilisons Champ DateHeure pour créer ce type de fonctionnalité. Nous utilisons l'argument auto_now_add = Vrai car nous voulons que le champ ne soit modifié que lors de la création de l'instance.

Le deuxième champ times_followed fait référence aux heures d'utilisation de l'URL raccourcie. C'est un ChampEntier Positif et nous spécifions une valeur par défaut de zéro. Cela signifie que chaque fois qu'une instance a créé le times_followed champ, Django remplira ce champ avec 0.

D'autre part, long_url fait référence à l'URL que l'utilisateur saisit. C'est un URLChamp, car nous souhaitons que l'utilisateur saisisse uniquement les caractères du formulaire: http://yoursite.com.

Le dernier champ est  short_url, et il a des détails intéressants. Nous précisons qu'il ne peut comporter que 15 caractères, il doit être unique, ce qui signifie qu'il ne peut pas 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 lorsqu'ils travaillent avec des formulaires, les utilisateurs n'auront pas besoin d'écrire leur propre code raccourci.

La classe interne Meta, dites-nous comment la classe doit se comporter, et nous définissons que l'ordre (appelant Shortener.objects.all ()) des objets plus courts seront discriminés par les plus récents.

La solution __str__ La méthode indique comment le modèle doit être imprimé. Donc, si nous avons un objet avec long_url = "https://geekflare.com/" et la partie raccourcie "123456", et nous l'imprimons.

https://geekflare.com/ to 123456

Il est maintenant temps de rechercher un moyen d'enregistrer le lien court de manière aléatoire.

Créer une fonctionnalité de raccourcissement

Nous allons créer 2 fonctions personnalisées. Le premier générera un code aléatoire et le second empêchera d'obtenir des codes aléatoires répétés du modèle Shortener. Pour ce faire, créez un fichier utils.py dans l'application «urlshortener».

touch utils.py

À l'intérieur de ce fichier, nous allons utiliser la fonction de sélection du module intégré aléatoire. 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

# Try to get the value from the settings module
SIZE = getattr(settings, "MAXIMUM_URL_CHARS", 7)

AVAIABLE_CHARS = ascii_letters + digits


def create_random_code(chars=AVAIABLE_CHARS):
    """
    Creates a random string with the predetermined size
    """
    return "".join(
        [choice(chars) for _ in range(SIZE)]
    )

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

Faisons quelques maths. Si nous avons 7 endroits où il peut y avoir jusqu'à 62 personnages disponibles pour chaque lieu, le possible permutations sont:

Ainsi, sur la base de ces calculs rapides, la partie raccourcie peut être remplie jusqu'à 2.5 billions de codes différents. Nous pouvons donc oublier de sortir des URL raccourcies aléatoires.

Bien qu'il puisse exister un tel nombre de permutations, il y a une faible probabilité d'obtenir des pièces raccourcies répétées. C'est un problème puisque nous avons mis en place le shortened_url domaine pour être unique. C'est pourquoi la fonction suivante est si utile.

def create_shortened_url(model_instance):
    random_code = create_random_code()
    # Gets the model class

    model_class = model_instance.__class__

    if model_class.objects.filter(short_url=random_code).exists():
        # Run the function again
        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 en utilisant le create_random_code. Ensuite, il obtient le modèle classe et vérifie s'il y a un autre objet qui a le même short_url. Si c'est le cas, il s'exécute une fois de plus, mais si tout va bien, il renvoie le random_code.

Plus tard, vous interagirez avec le shell, afin d'examiner cette fonction de près.

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

Modifier la méthode de sauvegarde

À la fin de la classe «Shortener», vous allez modifier la méthode de sauvegarde du modèle. le enregistrer est appelée à chaque fois qu'un objet est enregistré dans la base de données, nous verrons donc comment l'utiliser ici.

# Import the function used to create random codes
from .utils import create_shortened_url

# At the end of the  Shortener model
    def save(self, *args, **kwargs):

        # If the short url wasn't specified
        if not self.short_url:
            # We pass the model instance that is being saved
            self.short_url = create_shortened_url(self)

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

La méthode de sauvegarde est en cours d'écrasement, ce qui signifie que vous introduisez de nouvelles fonctionnalités dans une méthode parente préexistante. Il indique essentiellement à Django que chaque fois qu'un objet «Shortener» est enregistré et que le short_url n'est pas spécifié, il doit être rempli avec un code aléatoire.

Exécution de migrations

Il est maintenant temps de faire 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 for 'urlshortener':
  urlshortener/migrations/0001_initial.py
    - Create model Shortener

$ python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions, urlshortener
Running migrations:
  ......
  # Apply the URL shortener migrations
  Applying urlshortener.0001_initial... OK

Pour l'instant, vous n'avez pas à vous soucier de ce que sont les migrations. N'oubliez pas que lors de l'exécution de ces deux commandes, Django crée un base de données db.sqlite fichier, basé sur les modèles que vous avez définis.

Créons des objets avec le shell 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 tous les objets raccourcisseurs fonctionneront.

Writing views

Comme je l'ai déjà dit, une vue est une fonction simple qui prend une demande et renvoie une réponse. Voyons donc comment créer une vision du monde bonjour.

Réponse de modèle de base

À l'intérieur du fichier «urlshortener / views.py», créez une fonction home_view. aa

'''
Shortener views
'''
from django.shortcuts import render, get_object_or_404 # We will use it later

from django.http import HttpResponse 

# Create your views here.

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

Il renvoie un simple message «Hello world». Plus tard, vous verrez à quoi il ressemble dans le navigateur. Maintenant, créez un "urls.py", il y aura tous les modèles d'URL de l'application.

touch urls.py


Ajoutez le code suivant.

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

from django.urls import path

# Import the home view
from .views import home_view

appname = "shortener"

urlpatterns = [
    # Home view
    path("", home_view, name="home")
]

La solution nom de l'application La variable déclare (comme son nom l'indique) l'espacement des noms de l'application urlshortener.

Expliquant rapidement que nous importons le fonction de chemin, qui renvoie un élément à inclure dans les modèles d'url de l'application. le prénom L'attribut est l'espace de noms du chemin, qui peut être appelé à l'intérieur des modèles si nécessaire.

Maintenant, modifions les URL globales du projet.

# config/urls.py

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

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

Maintenant, exécutons à nouveau le serveur.

python manage.py runserver

Si vous exécutez le serveur, vous recevrez un simple message «Hello world». En effet, vous incluez les modèles d'URL 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 pour permettre à l'utilisateur de créer lui-même des URL raccourcies.

Creating forms

Dans Django, un formulaire est une classe simple qui permet d'obtenir des entrées de l'utilisateur.

Vous allez créer un fichier forms.py. C'est une convention pour stocker toutes les formes de l'application dans ce fichier.

cd urlshortener/
touch forms.py

À l'intérieur de ce fichier, vous allez créer une classe "ShortenerForm" qui s'étend 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": "Your URL to shorten"}))
    
    class Meta:
        model = Shortener

        fields = ('long_url',)

Il s'agit d'un formulaire modèle puisque son but est de créer un objet modèle à partir de l'entrée 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.

Finishing the views

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

Accédez à la views.py fichier dans l'application de raccourcisseur et modifiez le home_view vue. Vous pouvez consulter le Github repo à ce moment pour avoir une idée de la structure du projet.

Il existe deux vues pour l'application de raccourcissement d'URL:

1. Vue de la maison: Cela montre le formulaire de raccourcissement et la nouvelle URL si le formulaire a déjà été soumis.
2. Rediriger la vue: Cela redirige vers l'URL longue et ajoute 1 aux heures suivies.

Commençons par la vue d'accueil qui est la plus complexe. Vous devrez importer le modèle et le formulaire Shortener. 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 de la maison

'''
Shortener views
'''
from django.shortcuts import render # We will use it later

from django.http import HttpResponse, Http404, HttpResponseRedirect


# Model
from .models import Shortener

# Custom form

from .forms import ShortenerForm

# Create your views here.

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

    
    context = {}

    # Empty form
    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:

1. Lorsque la méthode HTTP est égale à GET: Nous passons uniquement comme contexte, la forme Shortener utilisée pour créer des objets Shortener.
2. Lorsque la méthode HTTP est égale à POST: Nous passons toujours le formulaire dans le contexte car nous voulons que l'utilisateur puisse entrer une autre URL. Mais nous transmettons la demande de publication à un autre formulaire appelé formulaire_utilisé.

Un moyen délicat d'obtenir l'URL complète du site de manière dynamique consiste à utiliser le nécessaire méthode objet build_absolute_uri .

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

Comme moyen sûr de traiter une mauvaise demande (l'utilisateur n'a pas entré d'URL valide), nous obtenons les erreurs de formulaire, les passons en contexte et rendons le modèle normal. Plus tard, vous verrez comment implémenter l'affichage des erreurs dans le modèle.

Rediriger la vue

La solution redirect_url_view  , est un peu plus simple. C'est une vue détaillée ce qui signifie que la vue ne fonctionne qu'avec un objet.

Cette fonction prend comme paramètres, la demande de l'utilisateur et le partie_raccourcie de l'URL. Il n'est pas nécessaire d'affirmer le type de demande que nous recevons, car 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 un essayer / sauf instruction, 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 times_followed champ et redirige avec le HttpResponseRedirect fonction à l'URL du site correspondant au code aléatoire.

Updating URLs

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 d'accès au redirect_url_view.

Comme toujours, vous commencez par importer les vues, puis créez une fonction de chemin et passez en arguments:

• 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 de la maison
• localhost:8000/URL-code: Redirection vers l'URL longue

Creating templates

Tu es presque là. La seule chose qui vous sépare d'avoir créé cette application est l'interface utilisateur. Pour cela, nous utilisons des modèles 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 structure à double dossier de la forme: "templates / appname"

# urlshortener directory
mkdir -p templates/urlshortener/

Remarque : La structure du double dossier et le langage de Django Template sortent du cadre de ce tutoriel, mais vous pouvez en savoir plus sur le documentation officielle.

Modèle de base

Django autorise 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 (Ne vous répétez pas).

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 celle-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+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
      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>

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

Si vous souhaitez en savoir plus sur les balises DTL, vous pouvez le faire avec le documents officiels.

Modèle de maison

Le modèle home, hérité 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></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">
              Shorten
            </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">Your shortened Url</h2>
    <p>You can copy the Link below and share it with your friends</p>
    <p class="">{{new_url}}</p>
    <p><span class="text-danger">Previous URL:</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 Shortener s'affiche. À l'intérieur de jeton crsf est défini (raisons de sécurité), et seul le champ URL long du formulaire est affiché. N'oubliez pas que ce champ a la classe CSS «form-control form-control-lg», car nous l'avons définie dans le formulaire.
• Si des erreurs sont trouvées, montrez-les
• Si l'opération POST réussit, la nouvelle URL s'affiche.

Final application

Toutes nos félicitations! 🎉. Vous avez créé une application de raccourcissement d'URL fonctionnelle complète avec Django.

Voici quelques captures d'écran de l'apparence de l'application.

Obtenez seulement:

Erreur lors du raccourcissement de l'URL:

URL raccourcie réussie:

URL redirigée:

Que pensez-vous d'exposer une démo de cette application de raccourcissement d'URL à quelqu'un? Vérifier comment exposer une application Django Demo à l'internet.

Défi 🔥

Si vous vous sentez à l'aise avec vos compétences 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 avez terminé, envoyez une pull request et envoyez-moi un ping sur Twitter pour mettre en valeur vos réalisations.

Emballage en place

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

Dans ce tutoriel, vous:

• En savoir plus sur le flux de travail de création d'une application Django.
• Construire un projet de CV
• Compréhension des différences et de la structure des projets Django et des applications Django.
• Découverte du modèle MVT.
• Vues de base des fonctions créées
• Utilisation de Django ORM (Object Relational Mapper) 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 des tutoriels plus étonnants.