0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

railsチュートリアル第七章 ユーザー登録フォーム

Posted at

##ユーザー登録フォーム
今度はユーザー登録フォームを作成しましょう。
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とするのはあまり良い変更ではなさそうですね。その理由について考えてみてください。
確認 成功。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?