初心者向け : Railsログイン機能をつけてQAサイトを作る 1 -ログイン機能+質問機能-

初心者向け : Railsログイン機能をつけてQAサイトを作る 1 -ログイン機能+質問機能-

初心者向け : Railsログイン機能をつけてQAサイトを作る 1 -ログイン機能+質問機能-
初心者向け : Railsログイン機能をつけてQAサイトを作る 2 -Bootstrap+UI修正-
初心者向け : Railsログイン機能をつけてQAサイトを作る 3 -回答機能+リアクション機能+ベストアンサー機能-
初心者向け : Railsログイン機能をつけてQAサイトを作る 4 -タグ付け機能-
初心者向け : Railsログイン機能をつけてQAサイトを作る 5 -管理画面機能-
初心者向け : Railsログイン機能をつけてQAサイトを作る 6 -検索機能-

Railsを利用してQAサイトを作っていきます

このチュートリアルを通して

  • devise
  • qaサイトの基礎

を学ぶことができます

複数回に分けて実装していきます

今回は回答者がログインして質問を作成することろまでやります

 

イメージ

ユーザーについて

  • 質問者 → 何か質問したい人
  • 回答者 → 回答できる人
  • 管理者 → システムを管理する人

Railsのプロジェクト作成

まずはターミナルでプロジェクトを作成します

 

こちらがgemfile

 

次はターミナルで

 

railsのプロジェクトはこれでOK

 

ログイン機能を実装

ログイン機能はdeviseというgemを利用します

こちらのgemはログイン関連でかなり使われることが多いです

ちなみに自分で一から作成することもできますが、やはりバグやエラーの元となるコードを
生んでしまう可能性があるので、既存の便利な機能を使いましょう

deviseを利用するにはまずはGemfileに追加します

 

 

その後ターミナルで

 

deviseの設定ファイルを作成するためにターミナルで

 

ひとまずこちらでdeviseの準備は完了です

 

Home controllerを作成

ターミナルで

を実行しその後、views/lauouts/application.html.erbにこちらを追加します

こちらを追加することでログインのメッセージを表示することが可能となります

 

User modelを作成

ターミナルでこちらを実行

 

実行が完了すると、db/migrateにこのような内容のファイルが生成されます

 

このファイルはデータベースを作成するための指示書ですが、
User modelには名前とユーザーのタイプ(質問者、回答者)がないので追加します

 

追加が完了したらdbを作成します

 

User controllerを作成

User modelを利用するためにUser controllerを作成するのでターミナルで下記を実行

 

コントローラーの作成が完了したら、次はルートを設定します

 

次はHomeコントローラーをこのように修正します。

before_action :authenticate_user!はログインしていない状態であれば、
ログインページへ飛ばす、ログインしていればこのページのアクションを実行できる
という便利な機能です

 

ログイン機能の動作確認

それではログイン機能ができているか試します

ターミナルで

をして

「http://localhost:3000」にアクセスします

 

Railsは無事にうごきました!

 

ログインの前にまずは新規登録をします

Sign upをクリックして必要情報を入力すると、Homeコントローラーに遷移します

ただ先程データベースへ追加した

  • 名前
  • role

を追加できていなかったので、ターミナルで状況を確認しましょう

Userの状況が知りたいので、User.allをします

nameとroleはフォームで登録していないので、やはり空になっています

空になっている理由はdb/migrateのファイルがこのように、
defaultでは文字をいれずに空にする、設定になっているからです

 

 

nameとroleの追加修正

今後ユーザーが登録する際、せめて名前は自分でいれていただいて、
roleのところはひとまずセレクトボックスで対処しましょう

そのためにログアウトができるようにリンクをHomeコントローラーに
追加しておきます
views/home/index.html.erb

このようにSign outボタンが追加されています

 

次はdeviseのviewを作成するためターミナルで以下のコードを実行

 

実行が完了したら、views/devise/registrations/new.html.erbを修正します

 

 

 

その後追加したnameとroleをデータベースに保存することができるように
controllers/users/registrations_controller.rbをこのように修正します

 

最後にroute.rbをこのように修正します

 

それではテストしてみたいと思います

まずはこの情報でユーザーを登録します

 

登録が完了したら、ターミナルで確認します

 

先程作成した「テストユーザー」のデータにはnameとroleがしっかりと保存されています!

これでユーザーログインの土台は整いました

 

 

Question modelとAnswer modelの関係性について

これから作成するのはQuestion(質問)とAnswer(回答と回答に対しての返事)も
2つのモデルです

これらのモデルは以下の図のようなイメージの関係性があります

Userは複数のQuestion(質問)を持つことができ、
Question(質問)は複数のAnswer(回答)を持つことができる、
という設計です

 

Question modelの作成

ターミナルでこちらを実行

その後データベース情報を反映させるためにターミナルで下記を実行

 

User modelとQuestion modelにリレーションを与える

user.rbをこのように修正

question.rbをこのように修正

 

コントローラーの修正

User modelに関連するmodelのインスタンスを作成する場合は
buildメソッドを利用します

Questionコントローラーを
createアクションのみ変更し、このようなコードにしてください

 

次はviews/questions/_form.html.erbをこのように修正します

 

 

次はHome controllerを修正します
@questionsから現在ログインしているユーザーの質問を見ることができるようになります

 

次はHome controllerのindexで表示されるviews/home/index.html.erbを
以下のように修正します

 

 

それでは動作確認を行います

http://localhost:3000にアクセス

「New Question」をクリックしてQuestionを作成します

 

「create Question」をクリックして保存します

 

Backを押すとquestionの一覧に遷移し、Home controllerに戻れないので
シンプルにするためにHome controllerのindexをquestionと合体させます
その後Home controllerを削除します

 

htmlを修正するために
views/questions/index.html.erbをこのように修正

 

 

 

route.rbのrootを変更

 

 

 

結果をhttp://localhost:3000で確認

無事にrootアクセスでquestionを表示できました!

Home controllerはもう必要ないので削除するためにターミナルでこちらを実行

 

まとめ

ひとまずUserとQuestionのベースは作成できたので、
次はUIを少し整えていきます!

 

参考記事

gem”devise”を使ってお手軽にログイン画面を実装する!【Rails】

初めてのdevise ② — カラムを追加してみる — ~ やってみようカスマイズ! ~

devise にusername カラムを追加し、usernameを登録できるようにする。

【Rails】フォームタグをform_forでやるときのセレクトボックスの作り方

Deviseの設定手順をまとめてみた。 その2 ViewとControllerのカスタマイズ編

【Rails】has_many と belongs_to のリレーションで データベースに保存する

 

Railsカテゴリの最新記事