Python - Django Simple Login and Logout

Submitted by nurhodelta_17 on Monday, October 23, 2017 - 18:27.

Getting Started

First we're gonna start a new project named dproject. If you have no idea how to create a new project you may refer to my tutorial Python Getting Started with Django.

Creating our Admin

We're gonna create our admin so that we can have our sample user. 1. After creating our project, go to command prompt and go to your project directory by typing cd dproject. Note: dproject is my project name. 2. We then make our migrations by typing the ff two lines in our command prompt: python manage.py makemigrations python manage.py migrate 3. We now create our admin by typing: python manage.py createsuperuser It will then give you the form for the admin account. Fill up the form and don't forget your account.

Setting up our URLs

In your main app, in my case in dproject, open urls.py and change the content with the following codes:

from django.conf.urls import url
from django.contrib import admin
from django.contrib.auth import views as auth_views
from django.views.generic.base import TemplateView
 
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$', TemplateView.as_view(template_name='home.html'), name='home'),
    url(r'^login/$', auth_views.login, {'template_name': 'login.html'}, name='login'),
    url(r'^logout/$', auth_views.logout, {'template_name': 'logged_out.html'}, name='logout'),
]

Editing our Settings

Next, we edit our settings. Open settings.py located in your main app, in my case in dproject and edit the ff: 1. Find TEMPLATES and change it with the ff codes:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates'), ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

2. Paste this code at the bottom of settings.py

LOGIN_REDIRECT_URL = 'home'

Setting up our Static Files

This is optional since our static file contains our bootstrap. The file is included in the source file of this tutorial.

Setting up our Templates

We now then set up our pages. base.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>{% block title %}Django Simple Login{% endblock %}</title>
  {% load staticfiles %}
  <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css">   
</head>
<body>
  <div class="container">
  <header>
    <h1>Django Simple Login</h1>
    by <a href="https://www.sourcecodester.com/user/224918/track">nurhodelta_17</a>
  </header>
  <hr>
  <main>
    {% block content %}
    {% endblock %}
  </main>
  <hr>
  </div>
</body>
</html>

home.html

{% extends 'base.html' %}
 
{% block title %}Login{% endblock %}
 
{% block content %}
        a<h2>Welcome!</h2>
        {% if user.is_authenticated %}
      Hi {{ user.username }}!
      <a href="{% url 'logout' %}" class="btn btn-danger">Logout</a>
    {% else %}
      <a href="{% url 'login' %}" class="btn btn-primary">Login</a>
    {% endif %}
{% endblock %}

login.html

{% extends 'base.html' %}
 
{% block title %}Login{% endblock %}
 
{% block content %}
  <h2>Login</h2>
  <form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit" class="btn btn-primary">Login</button>
  </form>
{% endblock %}

logout.html

{% extends 'base.html' %}
 
{% block title %}See you!{% endblock %}
 
{% block content %}
  <h2>Logged out</h2>
  <p>You have been successfully logged out.</p>
  <p><a href="{% url 'login' %}" class="btn btn-primary">Log in</a> again.</p>
{% endblock %}

Running our Server

We now run our server and check if everything is working as expected. You're index page should look like this: loginindex

Login using the admin account the you have created earlier to check if it is working. That ends this tutorial. Happy Coding :)

Add new comment

2547 views