【Django】ユーザ登録ページを作る

 

こんにちは。のっくんです。

 

BootstrapとDjangoを使って以下のようなユーザ登録ページの作り方をご紹介します。

 

・PC

 

・スマホ

 

ネコ
スマホでみた場合は配置が変わってイイ感じにゃー。どうやっているの?
のっくん
Bootstrapのグリッドレイアウトを使っているんだよ。

 

 

開発環境は以下の通りです。

  • Python 3.6
  • Django 2.1

フォームを準備

 

フォームと言っても普通の文字入力を受けつけるようなフォームではありません。

 

ユーザ登録の場合は、ユーザ名やパスワードをデータベースに登録したり、入力データが正しいかチェックしたりする必要があります。

 

このあたりを自分で作るのは大変ですが、DjangoのUserCreationFormを継承することで簡単に実装できます。

 

forms.py

 

今回は、ユーザ名、パスワード、パスワード確認の3つを用意します。必要であればメールアドレスなどもここで追加できます。

 

全て文字列での入力になるのでCharFieldを使っています。この他にも、EmailFieldやIntegerFieldなど様々なFieldクラスが用意されています。

 

widget=forms.PasswordInputがありますが、これはパスワードを入力したときに

 

パスワード:●●●

 

こんな感じで隠れるようにするためのものです。

 

フォームの準備はこれで終了です。モデルではないのでマイグレーションは必要ありません。

 

パスワード長を設定

 

今回作るのは掲示板サイトなのでそこまでセキュリティは強くなくても良いかと思います。パスワード長は4で設定します。

 

settings.py

 

VALIDATORSというのはパスワードチェック機能のことです。色んなバリデータがありますので整理してみます。

 

  • UserAttributeSimilarityValidator:ユーザ名とパスワードが似ていないかチェックする
  • MinimumLengthValidator:パスワードが最低限の長さかチェックする
  • CommonPasswordValidator:良く使われているパスワードかどうかチェックする
  • NumericPasswordValidator:全て数値でないかチェックする

 

色んなチェックをしてくれるそうですが、あまり厳しくでもアレなので必要ないものはコメントアウトしています。

 

ビューでの処理

 

フォームを処理するビューを書いていきましょう。

 

基本的な処理は以下の通り。

 

  • SignUpFormをインスタンス化してHTMLに渡す
  • フォームの入力内容をチェックしてDBに保存する
  • ユーザをログイン状態にする

 

views.py

 

この例ではリダイレクト先を/sns/board, SignUpFormを使うHTMLファイルをsns/signup.htmlとしています。

 

テンプレート

 

HTML側では、{{ form.as_p }} と記載するとそれだけでフォームが使えます。signup.htmlにブラウザでアクセスしてみると、、

 

 

フォームが表示されましたが、これだけだと英語ですし見た目があまり良くありません。

 

そこでBootstrapを使って装飾してみます。主な処理は以下の通り。

 

  • グリッドレイアウトを使ってラベルとフォームを一定間隔(3:9)で配置する
  • ラベルの後には「必須」バッジをつける
  • フォームの下に確認ボタンを配置する
  • エラーメッセージを表示する

 

signup.html

 

ブラウザでアクセスすると、、

 

 

だいぶそれっぽくなりました。

 

エラー画面

 

エラーメッセージが表示されるか確認してみます。

 

パスワードが違う場合

 

 

パスワードが短い場合

 

 

英語で出力されてますが、まぁこんな感じです。