##ユーザー登録フォーム
今度はユーザー登録フォームを作成しましょう。
signupのページに示したとおり、ユーザー登録ページはまだ空白のままなので、このままではユーザー登録できません。
この節の目標は、登録欄を作成することです。
###form_withを使用する
ユーザー登録ページで重要な要素は、ユーザー登録に不可欠な情報を入力するフォーム
です。
Railsでform_with
ヘルパーメソッドを使います。
このメソッドはActive Recordのオブジェクトを取り込み、そのオブジェクトの属性を使ってフォームを構築
します。
ユーザー登録ページ /signup のルーティングは、Usersコントローラーのnewアクションに既に紐付けられていることを思い出してください。
したがって、次のステップは、form_with
の引数で必要となるUserオブジェクトを作成
することになります。
必要となる@user変数の定義は、下のようになります。
class UsersController < ApplicationController
def show
@user = User.find(params[:id])
# データベースからユーザー情報を取り出す
end
def new
@user = User.new
#新しくユーザーオプジェクトを作成する
# オブジェクトの属性をつける
end
end
フォームそのものは下に示します。7.2.2で詳しく触れますが、まずはSCSSで見栄えを整えてみましょう。
box_sizing
ミックスインをリスト 7.2から再利用していることに注目してください。
これらのCSSルールが一度適用されると、ユーザー登録ページは図 7.13のようになります。
####新規ユーザーのためのユーザー登録フォーム
app/views/users/new.html.erb
<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= form_with(model: @user, local: true) do |f| %>
<%= f.label :name %>
<%= f.text_field :name %>
<!--名前をつける欄を作成-->
<%= f.label :email %>
<%= f.email_field :email %>
<!--email-->
<%= f.label :password %>
<%= f.password_field :password %>
<!--パスワード-->
<%= f.label :password_confirmation, "Confirmation" %>
<%= f.password_field :password_confirmation %>
<!---->
<%= f.submit "Create my account", class: "btn btn-primary" %>
<% end %>
</div>
</div>
####ユーザー登録フォームのCSS
app/assets/stylesheets/custom.scss
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
@include box_sizing;
}
input {
height: auto !important;
}
####演習
1.試しに、ブロックの変数fをすべてfoobarに置き換えてみて、結果が変わらないことを確認してみてください。
確かに結果は変わりませんが、変数名をfoobarとするのはあまり良い変更ではなさそうですね。その理由について考えてみてください。
確認 成功。