LoginSignup
0
1

More than 3 years have passed since last update.

【CRUD】【Django】PythonフレームワークDjangoを使ってCRUDサイトを作成する~5~

Posted at

シリーズ一覧(全記事完成したら更新していきます)

ユーザ登録アプリを追加する

アプリを作成する

ユーザ登録アプリ(register)を作成します。

python manage.py startapp register

アプリをDjangoに登録する

アプリを登録するには/crud/<アプリ名>/apps.pyの中のアプリクラスを、/crdu/config/setings.pyのINSTALLED_APPSに記述します。

/crud/config/setting.py
INSTALLED_APPS = [
    'register.apps.RegisterConfig',
    ***
]

※参考

/crud/register/apps.py
from django.apps import AppConfig


class RegisterConfig(AppConfig):
    name = 'register'

Viewsを作成する

signup関数をrequestを引数として実行し、formをレンダリングした/crud/register/templates/register/signup.htmlを返すという意味です。

/crud/register/views.py
from django.shortcuts import render
from django.contrib.auth.forms import UserCreationForm

# Create your views here.


def signup(request):
    form = UserCreationForm()
    return render(request, 'register/signup.html', {'form': form})

URLConfを設定する

URLConfとはDjangoのURL管理をする機能を指し、urls.pyファイルで管理します。
URLConfはPJのurls.pyで一元管理することも可能ですが、今回はアプリ内の画面遷移はアプリのURLConfで管理し、そのフロントにPJのURLConfを配置するという構成を取りたいと思います。

つまり、PJのURLConf内でアプリのURLConfをインクルードして、アプリのURLConfでurlとviewのマッピングを実装します。

PJのURLConf
「http://***/」へのアクセスを返せるようにregisterアプリのurls.pyをインクルードしてくださいという意味です。

/crud/config/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    ***
    path('', include('register.urls')),
    ***
]

アプリのURLConf
「http://***/signup/」へのアクセスはviews.pyのsignup関数を返してくださいという意味です。

/crud/register/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('signup/', views.signup, name='signup'),
]

テストHTMLを作成する

views.pyで関連付けたHTMLを作成します。
まずはテストHTMLとして、引数を使用しない(レンダリングしない)HTMLを記述します。

/crud/register/templates/register/signup.html
<h1>signup</h1>

動作確認(テストHTML)

python manage.py runserver

http://127.0.0.1:8000/signup/」にアクセスし以下の画面が表示されることを確認します。
image.png

フォームを作成する

ユーザ登録フォームを作成します。HTMLのinputタグを使ってもよいのですが、Djangoには便利なdjango-crispy-formsがあります。

django-crispy-formsのインストール

pipenv install django-crispy-forms

django-crispy-formsをDjangoに適用するために、setting.pyを編集します。

/crud/config/setting.py
INSTALLED_APPS = [
    ***
    'crispy_forms',
]

CRISPY_TEMPLATE_PACK = 'bootstrap4'

HTMLを改修する

django-crispy-formsをHTMLに適用します。{{ form|crispy }}と記述します。
{% load crispy_forms_tags %}を読み込むのも忘れないでください。

/crud/register/templates/register/signup.html
{% extends 'register/base.html' %}

{% load static %}
{% load crispy_forms_tags %}

<body class="main-layout">
    {% block content %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-5">
                <form method="POST">
                    {% csrf_token %}
                    {{ form|crispy }}
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
    {% endblock content %}
</body>

URLConfを改修する

POSTメソッドの場合、ホームへリダイレクトします。異なる場合は、入力データを引き継ぎ、再度ユーザ登録ページを表示します。

/crud/register/views.py
from django.shortcuts import render, redirect
from django.contrib.auth.forms import UserCreationForm

# Create your views here.


def signup(request):
    if request.method == 'POST':
        form = UserCreationForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('blog-home')
    else:
        form = UserCreationForm()
    return render(request, 'register/signup.html', {'form': form})

動作確認

python manage.py runserver

http://127.0.0.1:8000/signup/」にアクセスし以下の画面が表示されることを確認します。

以下を入力します。
ユーザ名:testuser1
パスワード:testpass
パスワード(確認用):testpass

image.png

「Submit」ボタンをクリックし、ユーザを登録します。
ユーザ登録完了後、HOME画面に遷移することを確認します。
image.png

新規登録されたユーザを確認します。
http://127.0.0.1:8000/admin/auth/user/」にアクセスし以下の画面が表示されることを確認します。
image.png

今回はここまでにします。ありがとうございます。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1