【Rails#2】ユーザー登録フォームを作ろう │ コジマノテック

コジマです。

ユーザー登録フォームとユーザー一覧表示ページを作成していきたいと思います。

ルーティングとコントローラーを作っていきます。

諸々必要になりそうなやつをいっぺんに追加していきます。

  #user関連
  get "signup" => "users#signup" #登録
  post "users/create" => "users#create" #登録処理
  get "users/index" => "users#index" #一覧表示
  get "users/:id/show" => "users#show" #詳細表示
  get "users/:id/edit" => "users#edit" #編集
  post "users/:id/update" => "users#update" #更新処理
  post "users/:id/destroy" => "users#destroy" #削除処理
  get "login" => "users#login" #ログイン
  post "users/:id/logout" => "users#logout" #ログアウト

class UsersController < ApplicationController
  #ユーザー登録画面
  def signup
  end

  #ユーザー登録処理
  def create
    @user = User.new
    @user.name = params[:name]
    @user.password = params[:password]
    @user.email = params[:email]
    @user.save
    redirect_to("/users/index")
  end

  #ユーザー一覧表示
  def index
    @users = User.all
  end

  #ユーザー情報詳細表示
  def show
  end

  #ユーザー情報編集画面
  def edit
  end

  #ユーザー情報更新処理
  def update
  end

  #ユーザー情報削除処理
  def destroy
  end

  #ユーザーログイン画面
  def login
  end

  #ユーザーログアウト処理
  def logout
  end
end

今回必要なのは
signup,create,indexの3種類です。

ヘッダーにユーザー登録フォームへのリンクを作成
ユーザー登録フォームの作成
ユーザーを登録し、一覧ページへリダイレクト
ユーザー一覧表示ページの作成

こんな手順になります。

newに初期値読み込ませてエラーになってもテキストボックス空にならないようにするとかは
また別の機会に行います。

viewを作っていきましょう。
CSSは今は特に設定していないので、見た目は相変わらずみすぼらしいままですが、
一応CSSを組み込むことを意識した書き方をしていきます。

viewはdivにどんなクラス設定しようかこんな感じで簡単な設計図を書きます。
四角を重ねていくイメージで書くのがコツかと思います。
しかし、CSSを今回は当て込まないのでこんな理想の見た目にはなりませんw
クラス名はなんとなくイメージに反しないようにというレベルです。
ただ実際にCSS組む時は、テンプレート探して当て込むと思います。

まず、ヘッダーにユーザー登録のリンクを作りましょう。
全ページ共通部分はapplication.html.erbに書きます。

        <div class="head-menu">
            <ul>
              <li>
                <%= link_to("記事一覧","/articles/index")%>
              </li>
              <li>
                <%= link_to("記事作成","/articles/new")%>
              </li>
              <li>
                <%= link_to("ユーザー登録","/signup")%>
              </li>
            </ul>
        </div>

リンクが追加されましたね。

その次に
ログインフォームのビューを作ります。
アクションの名前に揃えるので、signup.html.erbとします。
入力値をコントローラに渡して処理をさせる場合はform_tagを使用します。
パスワードの入力フォームはinput type=”password”を使えば良いですね。

<div class="container">
  <div class="page-title">
    ユーザー登録
  </div>
  <!-- 入力値を送信したい場合にはform_tag -->
  <%= form_tag("/users/create") do%>
    <div class="input-block">
      <div class="category">
        ユーザー名:
      </div>
      <input class="input-box" name="name">
    </div>
    <div class="input-block">
      <div class="category">
        パスワード:
      </div>
      <input class="input-box" type="password" name="password">
    </div>
    <div class="input-block">
      <div class="category">
        メールアドレス:
      </div>
      <input class="input-box" name="email">
    </div>
    <input class="btn ok-btn" type="submit" value="ユーザー登録">
  <%end%>
</div>

見た目はクソダサいですが、今は気にしないようにします。
機能の実装を優先します。

ユーザー一覧表示のビューを作成していきます。
コントローラでUser.allしたものをeachで回していきます。

<div class="container">
  <div class="page-title">
    ユーザー一覧
  </div>
  <!-- まとまりを一つずつ処理する時はeach -->
  <% @users.each do |user| %>
    <div class="user-box">
      <div class="user-name">
        ユーザー名:<%= user.name %>
      </div>
      <div class="user-email">
        メールアドレス:<%= user.email %>
      </div>
    </div>
  <%end%>
</div>

こんな感じですね。めちゃめちゃ見辛いですが、登録したものが表示されています。