アラフォーからのプログラミングとデザイン

大人から始めたプログラミングとデザインについてのあれこれ

チュートリアル復習中:ユーザー登録画面を作る

なんとか年内にチュートリアルを終わらせたいと思っています。

今日はユーザー登録のところです。

現時点ではこんな画面です。

f:id:simpledancer:20171223155103p:plain

これをちゃんと登録できるように設定します。

form_forヘルパーメソッドを使う

ユーザー登録ページで重要な点は、ユーザー登録に欠かせない情報を入力するためのformです。Railsでform_forヘルパーメソッドを使います。このメソッドはActive Recordのオブジェクトを取り込み、そのオブジェクトの属性を使ってフォームを構築します

 Userオブジェクトの作成:まずインスタンス変数@userにUser.newを代入する

f:id:simpledancer:20171224104115p:plain

Scssで見栄えを整えると

f:id:simpledancer:20171224105003p:plain

sign up画面がこんな感じですっきり見やすく登録画面ができました。

ただし、まだ登録ボタンを押しても

このようなエラーが出ます。

f:id:simpledancer:20171224105214p:plain

コントローラにcreateするアクションが見当たらないとなっています。

まだ作ってないので当然ですが。

なのでこのcreateアクションを作っていきます。

コントローラにcreateアクションを作る

f:id:simpledancer:20171224111056p:plain

そうしてもう一度ユーザー登録をすると今度は

f:id:simpledancer:20171224111408p:plain

となります。

今度はcreateアクションの下に外部から使えないようにprivateアクションも追加します。

そしてユーザー登録に失敗した際のエラーメッセージも追加します。

パーシャルを作る

  <%= render 'shared/error_messages' %>

 ’shared/error_messages’というパーシャルをrender (描画)と云う意味。

sharedというディレクトリを作ってファイルを作ります。app/views/shared/_error_messages.html.erb

f:id:simpledancer:20171224114731p:plain

そこでエラーメッセージを表示することが可能になります。

もし空欄でcreateボタンを押した場合このように

f:id:simpledancer:20171224115855p:plain

上部に赤字でエラーメッセージが表示できるようになりました。

postの追加

f:id:simpledancer:20171224120340p:plain

エラーの処理ができたのでconfig/routes.rbに post '/signup', to: 'users#create'(postリクエスト)を追加する。

 

しかし、この状態だとcreateしようとsubmitボタンを押しても送信されません(フリーズする)

コントローラに追加をします。

redirect_to @user 

f:id:simpledancer:20171224121408p:plain

flashメッセージについてはちょっと割愛します。

Railsの一般的な慣習に倣って、ユーザー登録に成功した場合はページを描画せずに別のページにリダイレクト (Redirect) するようにしてみましょう。具体的には、新しく作成されたユーザーのプロフィールページにリダイレクトしてみようと思います (場合によってはルートURLにリダイレクトするのも1つの選択肢でしょう)。 

f:id:simpledancer:20171224121631p:plain

無事にuserをcreateすることができました!

長くなるので

今日はここまで!