読者です 読者をやめる 読者になる 読者になる

ぞえの技術めも

Ruby on Rails勉強中

【97日目】【1日20分のRailsチュートリアル】【第9章】ユーザー編集ページを作成する

Ruby on Railsチュートリアル(第3版)

今日は「9.1.1 編集フォーム」のeditアクションを実装するところから。

9.1.1 編集フォーム

Usersコントローラにeditアクションを追加して、それに対応するeditビューを実装する必要があります。

まずUsersコントローラにeditアクションを追加。

app/controllers/users_controller.rb

  def edit
    @user = User.find(params[:id])
  end

ユーザー編集ページに対応するビュー を、リスト9.2に示します (このファイルは手動で作成する必要があります)。

ユーザー編集ページのビューファイルを作成。

touch app/views/users/edit.html.erb

作成したファイルを下記内容で更新。

app/views/users/edit.html.erb

<% provide(:title, "Edit user") %>
<h1>Update your profile</h1>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_for(@user) do |f| %>
      <%= render 'shared/error_messages' %>

      <%= f.label :name %>
      <%= f.text_field :name, class: 'form-control' %>

      <%= f.label :email %>
      <%= f.email_field :email, class: 'form-control' %>

      <%= f.label :password %>
      <%= f.password_field :password, class: 'form-control' %>

      <%= f.label :password_confirmation, "Confirmation" %>
      <%= f.password_field :password_confirmation, class: 'form-control' %>

      <%= f.submit "Save changes", class: "btn btn-primary" %>
    <% end %>

    <div class="gravatar_edit">
      <%= gravatar_for @user %>
      <a href="http://gravatar.com/emails" target="_blank">change</a>
    </div>
  </div>
</div>

プロフィール画像の編集はGravatarのページに遷移させるのか。
アプリケーション内には持ってないもんね。

ビューが作成できたら動作確認。

サーバーを起動して

$ rails server -b $IP -p $PORT

https://rails-tutorial-kt-zoe.c9users.io/users/1/editにアクセス。

f:id:kt_zoe:20170113123629p:plain

ユーザー編集ページが表示できました。

だとすると、Railsはどうやって新規ユーザー用のPOSTリクエストとユーザー編集用のPATCHリクエストを区別するのでしょうか。
その答えは、Railsは、ユーザーが新規なのか、それともデータベースに存在する既存のユーザーであるかを、Active Recordのnew_record?論理値メソッドを使用して区別できるからです。

Railsは、form_for(@user)を使用してフォームを構成すると、@user.new_record?がtrueのときにはPOSTを、falseのときにはPATCHを使用します。

へ~。自分がコード書くときにわざわざフラグとか用意しなくていいってことか。

仕上げに、ナビゲーションバーにあるユーザー設定へのリンクを更新します。

Settingsの文字列リンクをユーザー編集ページへのリンクに更新。

app/views/layouts/_header.html.erb

:
<li><%= link_to "Settings", edit_user_path(current_user) %></li>
:

これでログイン後のSettingsから編集ページに遷移できるようになりました。

今日の学習時間は【24分】

次は「9.1.2 編集の失敗」から。