Django --Overview the tutorial app on Qiita and add features (2)
Introduction
This is a continuation of the previous Django --Overview of the tutorial app on Qiita and adding functions (1).
Django has a standard login feature, but it doesn't have a signup feature.
This time, we will implement the user authentication function, user registration function, and their screens. You can also create a log-out screen, but this time we will handle it by transitioning to the login screen.
The reference articles are as follows. Tutorial for implementing user authentication (login authentication) in Django2 -2-Sign-up and login / logout
The following is the one given to git with the previous function added. https://github.com/Rio157/crud-image-accounts.git
Completed type
Login screen
User registration screen
User authentication function (login) and its screen
First, specify the url.
settings.py(Under project)
LOGIN_REDIRECT_URL = '/'
LOGOUT_REDIRECT_URL='/'
#Specify the page to redirect after login and logout.
#Here, I will jump to the list screen.
urls.py(Under project)
path('accounts/', include('django.contrib.auth.urls')),
#Added to urls patterns. The authentication feature that comes standard with django is now enabled.
Next, we will create templates.
_base.html(templates/Under app)
{% block customcss %}
{% endblock customcss %}
<!--Added to head tag._base.You can read the css file when you inherit html.-->
<!--Also, in the body tag, along with the management site and logout,-->
<li class="nav-item">
<a class="nav-link" href="{% url 'accounts:signup'%}">user registration</a>
</li>
<!--Add. Also, at logout-->
<li class="nav-item">
<a class="nav-link" href="{% url 'logout'%}">Logout</a>
</li>
<!--{% url 'admin:logout'%}→{% url 'logout' %}will do. This is to prevent the transition to the logout screen by the authentication function for the administrator.-->
login.html(Create a registration folder under templates, under registration)
{% extends 'app/_base.html' %}
{% load static %}
{% block customcss %}
<link rel='stylesheet' type='text/css' href="{% static 'app/css/style.css' %}">
{% endblock customcss %}
{% block content %}
<section class="common-form">
{% if form.errors %}
<p class="error-msg">Your username and password didn't match. Please try again.</p>
{% endif %}
{% if next %}
{% if user.is_authenticated %}
<p class="error-msg">Your account doesn't have access to this page. To proceed,
please login with an account that has access.</p>
{% endif %}
{% endif %}
<form class="form-signin" method="POST" action="{% url 'login'%}">{% csrf_token %}
<h1 class="h3 mb-3 font-weight-normal">Please login</h1>
<table>
<tr>
<td>{{ form.username.label_tag }}</td>
<td>{{ form.username }}</td>
</tr>
<tr>
<td>{{ form.password.label_tag }}</td>
<td>{{ form.password }}</td>
</tr>
</table>
<div class="checkbox mb-3">
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
<p class="mt-5 mb-3 text-muted">© 2017-2020</p>
</form>
</section>
{% endblock %}
Inherit with {% extends'filename'%}. Add {% load static%} when loading css.
First, create a css file including the user registration screen.
style.css(app/static/app/under css)
div, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6 label, input, textarea, select, button {
margin: 0;
padding: 0;
color: #555555;
font-size: 1rem;
line-height: 1.8;
box-sizing: border-box;
}
h1{
font-size: 2rem;
padding-top: 20px;
padding-bottom: 15px;
}
section {
margin: 0 0 8px;
}
.container {
margin: 0 auto;
width: 100%;
max-width: 800px;
}
.content {
padding: 0 8px;
}
.common-form label {
display: block;
}
.common-form p {
margin-bottom: 8px;
}
.common-form input, .common-form textarea {
padding: 4px;
width: 100%;
margin-bottom: 8px;
}
.common-form select {
padding: 4px;
margin-bottom: 8px;
}
.common-form .submit {
margin-top: 8px;
margin-bottom: 8px;
padding: 8px 36px;
border: none;
color: #ffffff;
text-align: center;
text-decoration: none;
display: inline-block;
background-color: #4CAF50;
border-radius: 2px;
}
.common-form .delete {
background-color: #f44336;
}
.form-signin {
width: 100%;
max-width: 315px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin h1{
margin-top: 50px;
}
Like the login screen, the user registration screen also loads style.css. By the way, this css is taken from the sample page screen of bootstrap.
User registration function (signup) and its screen
First, launch a new app. Do the following on terminal:
django-admin startapp accounts
python3 manage.py makemigrations
python3 manage.py migrate
Have your project authenticate your new app.
settings.py(Under project)
INSTALLED_APPS = [...,
'accounts.apps.AccountsConfig',
]
urls.py(Under project)
path('accounts/', include('accounts.urls')),
#Added to urlpatterns.
#You can now find the url of the accounts app in your browser.
Go back to the accounts app. Create a new urls.py under the accounts app.
urls.py(Under accounts)
from django.urls import path
from . import views
# set the application namespace
# https://docs.djangoproject.com/en/2.0/intro/tutorial03/
app_name = 'accounts'
urlpatterns = [
# ex: /accounts/signup/
path('signup/', views.SignUpView.as_view(), name='signup'),
]
views.py(Under accounts)
from django.contrib.auth.forms import UserCreationForm
from django.urls import reverse_lazy
from django.views import generic
class SignUpView(generic.CreateView):
form_class = UserCreationForm
success_url = reverse_lazy('login')
template_name = 'accounts/signup.html'
#The user registration form itself comes standard with Django, so
#Specify UserCreationForm, reverse_When you move to the login screen with lazy, add it and specify the templates directory.
After creating the templates/accounts directory under accounts
signup.html
{% extends 'app/_base.html' %}
{% load static %}
{% block customcss %}
<link rel='stylesheet' type='text/css' href="{% static 'app/css/style.css' %}">
{% endblock customcss %}
{% block content %}
<h1>Sign up</h1>
<section class="common-form">
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="submit">Sign up</button>
</form>
</section>
{% endblock %}
Load style.css as well as the login screen.
Looking back
Thank you for your hard work.
This time we have implemented minimal functionality and appearance. There are various points that can be improved (the screen at the time of login failure is not cleaned with css, the notes in signup are lying), but for the time being I was able to grasp the entire work flow.
Personally, I summarized the work I was doing around the end of last year, so it was a good review. In that respect, there may be omissions, but it's not bad.
Recommended Posts