railsチュートリアル魔改造編 第20章 設定画面魔改造
第20章 設定画面魔改造編
設定画面を魔改造していきます。
いつものようにトピックブランチを作成します。
cd ‾/environment/sample_app
git checkout -b rails-makaizou-20
20.1 設定画面はどこから飛ぶ？
/sample_app/app/views/layouts/_header.html.erbに以下の行がある。
<%# 設定 %>
<li><%= link_to "設定", edit_user_path(current_user) %></li>
これで、設定画面へ飛ぶ。edit_user_pathは
/sample_app/app/controllers/users_controller.rbのeditへ
そして/sample_app/app/views/users/edit.html.erbへ
config/routes.rbのresources :usersのおかげ。
エラーメッセージは第16章で変更したので変える必要なさそう
20.2 Update your profile魔改造
/sample_app/app/views/users/edit.html.erbで変更
20.3 Name魔改造
/sample_app/app/views/users/edit.html.erbで変更
20.4 Password魔改造
/sample_app/app/views/users/edit.html.erbで変更
20.5 Confirmation魔改造
/sample_app/app/views/users/edit.html.erbで変更
20.6 save changes魔改造
/sample_app/app/views/users/edit.html.erbで変更
20.7 change魔改造
/sample_app/app/views/users/edit.html.erbで変更
なんとなくgravatar使いたくなかったからリンクは削除した
20.8 見出し魔改造
/sample_app/app/views/users/edit.html.erbで変更
20.9 profile updated魔改造
/sample_app/app/views/users/edit.html.erbで送信ボタンを押すと/sample_app/app/controllers/users_controller.rbのupdateアクションが実行される
20.10 最後に
保存する
rails test
git add -A
git status
ログ
----------------------------
modified: app/controllers/users_controller.rb
modified: app/views/layouts/_header.html.erb
modified: app/views/users/edit.html.erb
modified: app/views/users/new.html.erb
modified: config/routes.rb
----------------------------5ファイル修正したことを確認
git commit -m "add 20"
git checkout master
修正前ファイルをブログ用に保存しておく
git merge rails-makaizou-20
git push origin master
修正後ファイルをブログ用に保存しておく
そしてherokuの操作
source <(curl -sL https://cdn.learnenough.com/heroku_install)
git push heroku master
20.10.1 修正後
リスト20.1
app/controllers/users_controller.rb
----------------------------
class UsersController < ApplicationController
before_action :logged_in_user, only: [:index, :edit, :update, :destroy,
:following, :followers]
before_action :correct_user, only: [:edit, :update]
before_action :admin_user, only: :destroy
def index
@users = User.where(activated: true).paginate(page: params[:page])
end
#/users/1とかで呼ばれるアクション
def show
#userの情報を取得する
@user = User.find(params[:id])
#userの持つmicropostを取得する
#paginateメソッドとシンボルとparamsは
@microposts = @user.microposts.paginate(page: params[:page])
#/sample_app/app/views/users/show.html.erbへ
end
# /signup で呼ばれるアクション
# app/views/users/new.html.erbへ
def new
#ユーザーを新規に作成する
@user = User.new
end
# app/views/users/new.html.erbでform_forによって送信を押した後に呼ばれる
def create
#入力フォームに入力された値でユーザーデータを作成する
#user_paramsは同ファイルのprivateに定義がある
#user_paramsはStrongParameterが返ってくる
@user = User.new(user_params)
#セーブに成功した？
if @user.save
#メールを送信する
#send_activation_emailの定義はapp/models/user.rbにある
#メールの内容は以下で編集できる
#app/views/user_mailer/account_activation.html.erb
#app/views/user_mailer/account_activation.text.erb
@user.send_activation_email
#メールを送信したことを通知する
flash[:info] = @user.email+"にメールを送信しました。お手数ですが、承認をお願いします。"
#トップページに移行する
redirect_to root_url
#セーブに失敗した？
else
#再度入力をお願いする
#エラー文は自動的に出るようになってる
render 'new'
end
end
#設定画面へ
#/sample_app/app/views/layouts/_header.html.erbから飛ぶ
#/sample_app/app/views/users/edit.html.erbへ
def edit
end
#/sample_app/app/views/users/edit.html.erbで送信ボタンが押されたら飛ぶ
def update
#設定が変更できる場合
if @user.update_attributes(user_params)
flash[:success] = "設定を変更しました。"
redirect_to @user
#設定が変更できなかった場合
else
render 'edit'
end
end
def destroy
User.find(params[:id]).destroy
flash[:success] = "User deleted"
redirect_to users_url
end
def following
@title = "Following"
@user = User.find(params[:id])
@users = @user.following.paginate(page: params[:page])
render 'show_follow'
end
def followers
@title = "Followers"
@user = User.find(params[:id])
@users = @user.followers.paginate(page: params[:page])
render 'show_follow'
end
private
#paramsの中身を:userの:name,:email,:password,:password_confirmationのみにして返す
#StrongParameterというやつ
def user_params
params.require(:user).permit(:name, :email, :password,
:password_confirmation)
end
# beforeアクション
# 正しいユーザーかどうか確認
def correct_user
@user = User.find(params[:id])
redirect_to(root_url) unless current_user?(@user)
end
# 管理者かどうか確認
def admin_user
redirect_to(root_url) unless current_user.admin?
end
end
リスト20.2
app/views/layouts/_header.html.erb
----------------------------
<%# 以下はBootstrapのクラスです
navbar
navbar-fixed-top
navbar-inverse
container
nav
navbar-nav
navbar-right
%>
<header class="navbar navbar-fixed-top navbar-default">
<div class="container">
<%# ロゴ %>
<%= link_to "魔改造", root_path, id: "logo" %>
<nav>
<ul class="nav navbar-nav navbar-right">
<%# 右上に表示するリンク %>
<li><%= link_to "ホーム", root_path %></li>
<li><%= link_to "ヘルプ", help_path %></li>
<%# ログインしているとき %>
<% if logged_in? %>
<%# ユーザーを探す %>
<li><%= link_to "ユーザーを探す", users_path %></li>
<%# ドロップダウン形式にする %>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<%# ドロップダウンの名前のところをユーザー名にする %>
<%= current_user.name %> <b class="caret"></b>
</a>
<%# ドロップダウンの内容について %>
<ul class="dropdown-menu">
<%# プロフィール %>
<li><%= link_to "プロフィール", current_user %></li>
<%# 設定 %>
<%# /sample_app/app/controllers/users_controller.rbのeditへ %>
<li><%= link_to "設定", edit_user_path(current_user) %></li>
<%# 区切り線 %>
<li class="divider"></li>
<%# 設定 %>
<li>
<%= link_to "ログアウト", logout_path, method: :delete %>
</li>
</ul>
</li>
<%# ログインしていないとき %>
<% else %>
<li><%= link_to "ログイン", login_path %></li>
<% end %>
</ul>
</nav>
</div>
</header>リスト20.3
app/views/users/edit.html.erb
----------------------------
<%# /sample_app/app/controllers/users_controller.rbから飛ぶ %>
<% provide(:title, "設定") %>
<h1>設定</h1>
<%# %>
<%# %>
<%# %>
<%# %>
<%# %>
<%# %>
<%# %>
<%# %>
<%# %>
<%# %>
<%# BootStrapで区切る %>
<div class="row">
<%# 中6外3にする %>
<div class="col-md-6 col-md-offset-3">
<%= form_for(@user) do |f| %>
<%# エラー文を出力する %>
<%# /sample_app/app/views/shared/_error_messages.html.erbへ %>
<%= render 'shared/error_messages', object: f.object %>
<%# 名前 %>
<%= 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, "パスワード(再入力)" %>
<%= f.password_field :password_confirmation, class: 'form-control' %>
<%# 送信ボタン %>
<%# /sample_app/app/controllers/users_controller.rbのupdateアクションへ %>
<%= f.submit "設定を変更", class: "btn btn-danger" %>
<% end %>
<div class="gravatar_edit">
<%= gravatar_for @user %>
<br><br>
<a href="#">画像を変更する(仮)</a>
</div>
</div>
</div>リスト20.4
app/views/users/new.html.erb
----------------------------
<%#
# /signup で呼ばれるアクション
# app/views/users/new.html.erbへ
def new
#ユーザーを新規に作成する
@user = User.new
end
%>
<%# 見出しを新規登録にする %>
<% provide(:title, '新規登録') %>
<%# 見出しを新規登録にする %>
<h1>新規登録</h1>
<%# Bootstrapの機能で、12列に何を割り当てるか決める %>
<div class="row">
<%# 空白3-入力スペース6-空白3の構成にする %>
<div class="col-md-6 col-md-offset-3">
<%# フォームを作成し、@userにデータを入れていく %>
<%= form_for(@user) do |f| %>
<%# エラー文を出力する %>
<%# /sample_app/app/views/shared/_error_messages.html.erbへ %>
<%= render 'shared/error_messages', object: f.object %>
<%# 名前 %>
<%= 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, "パスワード(再入力)" %>
<%= f.password_field :password_confirmation, class: 'form-control' %>
<%# 送信ボタン %>
<%# form_forで:userを指定しているので/sample_app/app/controllers/users_controller.rbのcreateを呼ぶ %>
<%= f.submit "魔改造アカウントを作成する", class: "btn btn-danger" %>
<% end %>
</div>
</div>リスト20.5
config/routes.rb
----------------------------
Rails.application.routes.draw do
# ルートページ
root 'static_pages#home'
get '/help', to: 'static_pages#help'
get '/about', to: 'static_pages#about'
get '/contact', to: 'static_pages#contact'
# 新規登録ページは、/signup
# app/controllers/users_controller.rbのnewアクションへ
get '/signup', to: 'users#new'
#ログイン画面へのルーティング
#/sample_app/app/controllers/sessions_controller.rbへ
get '/login', to: 'sessions#new'
#ログイン画面
#/sample_app/app/controllers/sessions_controller.rbへ
post '/login', to: 'sessions#create'
delete '/logout', to: 'sessions#destroy'
#ユーザーのルーティングを自動で作成する
#/sample_app/app/controllers/users_controller.rbへ
resources :users do
member do
get :following, :followers
end
end
#アカウント有効化用ルーティングをeditのみ作成する
#edit_account_activation_urlで、以下が実行される
#app/controllers/users_controller.rbのeditアクション
resources :account_activations, only: [:edit]
resources :password_resets, only: [:new, :create, :edit, :update]
resources :microposts, only: [:create, :destroy]
resources :relationships, only: [:create, :destroy]
end
20.10.2 本章のまとめ
edit_user_pathは、resources :usersで自動的に作られることを知った。
editでフォームを送信すると、updateアクションが実行されることを知った。
学べることが少なくなってきた。
修正前
修正後
https://jun-killer-makaizou.herokuapp.com/
この記事が気に入ったらサポートをしてみませんか？