Modèle de connexion Django Bootstrap (mode d’emploi)

Remise à niveau de haut niveau

Django est un framework Python de haut niveau qui suit le modèle architectural modèle-modèle-vues. Django est l’un des frameworks Web les plus populaires en raison de sa sécurité, de son évolutivité et de sa conception flexible. Des entreprises comme Instagram, Reddit et Dropbox utilisent toutes Django.

Amorcer est un framework CSS open source qui fournit des composants HTML, CSS et JavaScript prédéfinis. Cela inclut des éléments tels que les barres de navigation, les formulaires, les boutons, les modaux, etc. Créé à l’origine par Twitter, Bootstrap est maintenant maintenu par une grande communauté de développeurs.

Conditions préalables

Une compréhension de base de HTML, CSS et Javascript
Une compréhension de base de Django
Python3 installé sur votre machine
Django installé sur votre machine

Configurer une application Django

Commençons par créer un projet. Dans votre ligne de commande, recherchez le répertoire approprié et exécutez la commande suivante :

 django-admin startproject django_login

Cela crée le projet sur lequel nous allons travailler. À partir de là, nous devrons créer une application. Puisque nous construisons un écran de connexion, naviguez dans le projet avec cd django_loginpuis exécutez la commande suivante :

$ python3 manage.py startapp login

Lançons maintenant le serveur pour tester si tout a été configuré correctement. Exécutez la commande suivante :

$ python3 manage.py runserver

En déployant notre application Django, nous pouvons vérifier en temps réel si le build se compile correctement. Comme nous n’avons fait qu’initialiser notre application Django, dans localhost:8000/, vous devriez voir la page Web suivante :

Vous trouverez ci-dessous une capture d’écran en ligne de commande de la configuration d’une application Django à partir de zéro.

Modification des configurations de projet

django_login/settings.py

Tout d’abord, nous informerons notre projet que nous avons créé une application. Pour ce faire, rendez-vous dans django_login dossier et recherchez le settings.py déposer. Faites défiler jusqu’à INSTALLED_APPS section et ajouter 'login' (nom de notre application) à la liste des applications.

django_login/urls.py

À partir de là, nous devrons modifier le urls.py fichier pour rendre compte de notre nouvelle application. Nous utiliserons la fonction intégrée LoginView de Django, qui affichera le formulaire de connexion et traitera l’action de connexion.

Remplacez le code du modèle par ce qui suit :

from django.contrib import admin
from django.urls import path, include
from django.contrib.auth.views import LoginView

urlpatterns = [
    path('', LoginView.as_view()),
    path('login/', include('login.urls')),
    path('admin/', admin.site.urls),
]

Construire l’écran de connexion avec Bootstrap

login/templates/inscription/login.html

Tout d’abord, au sein de la login dossier, nous devrons créer un templates dossier, puis un registration dossier à l’intérieur. À partir de là, nous allons créer un login.html déposer.

Parce que nous utilisons la fonction intégrée LoginView de Django, il faut fournir le template HTML avec le registration/login.html format.

À l’intérieur login.htmlnous ajouterons le code Bootstrap suivant (livré via CDN pour plus de commodité, bien qu’il existe d’autres méthodes d’installation Bootstrap) :


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta data-fr-http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Signin</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    
  </head>
  <body class="text-center">
    <form class="form-signin">
      <h1 class="h3 mb-3 font-weight-normal">Django Login Demo</h1>
      {% csrf_token %}
      <input id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="" type="email">
      <input id="inputPassword" class="form-control" placeholder="Password" required="" type="password">
      <div class="checkbox mb-3">
        <label>
          <input value="remember-me" type="checkbox"> Remember me
        </label>
      </div>
      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </form>
  </body>
</html>

<style>
html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}

.form-signin .checkbox {
  font-weight: 400;
}

.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}

.form-signin .form-control:focus {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
</style>

login/views.py

Maintenant que nous avons notre code HTML, nous devons le rendre dans Django. Allez à la views.py fichier et remplacez le code du modèle par ce qui suit :

from django.shortcuts import render 
def index(request):    return render(request, 'authentication/login.html')

Exécution de l’application

Une fois que tout est configuré, votre login la structure des dossiers devrait ressembler à ceci :

Lorsque nous exécutons Python manage.py runserverla page Web suivante devrait apparaître sur votre hôte local.

Grand succès!

Conclusion

Félicitations – vous avez créé un écran de connexion en utilisant Django avec Bootstrap ! Vous devrez toujours configurer la logique d’authentification (hachage et stockage des informations d’identification de l’utilisateur, gestion de la session, création des écrans d’inscription et de mot de passe oublié et redirection après la connexion).

Mais pour l’instant, il est temps de célébrer !