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

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

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

### アプリを作成する

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

```python
python manage.py startapp register
```

### アプリをDjangoに登録する

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

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

※参考

```python:/crud/register/apps.py
from django.apps import AppConfig


class RegisterConfig(AppConfig):
    name = 'register'
```

### Viewsを作成する

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

```python:/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をインクルードしてくださいという意味です。

```python:/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関数を返してくださいという意味です。

```python:/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を記述します。

```python:/crud/register/templates/register/signup.html
<h1>signup</h1>
```

### 動作確認（テストHTML）

```python
python manage.py runserver
```

「[http://127.0.0.1:8000/signup/](http://127.0.0.1:8000/signup/)」にアクセスし以下の画面が表示されることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763383/55156148-d0c8-0f05-6dc2-1f02908a4d2a.png)

### フォームを作成する

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

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

```python
pipenv install django-crispy-forms
```

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

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

CRISPY_TEMPLATE_PACK = 'bootstrap4'
```

### HTMLを改修する

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

```python:/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メソッドの場合、ホームへリダイレクトします。異なる場合は、入力データを引き継ぎ、再度ユーザ登録ページを表示します。

```python:/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
python manage.py runserver
```

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763383/47978f4f-226d-090a-d475-25ee13193945.png)

「Submit」ボタンをクリックし、ユーザを登録します。
ユーザ登録完了後、HOME画面に遷移することを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763383/fe5e234f-7540-7787-80e3-bfe1470c67fb.png)

新規登録されたユーザを確認します。
「[http://127.0.0.1:8000/admin/auth/user/](http://127.0.0.1:8000/admin/auth/user/)」にアクセスし以下の画面が表示されることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/763383/5295e24f-68fd-a253-cd60-48c7e1a16201.png)

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