Webサービスの作り方を実例のRailsで【ログイン認証・devise】新規登録のフォーム作成

  • 2015/9/3
  • Webサービスの作り方を実例のRailsで【ログイン認証・devise】新規登録のフォーム作成 はコメントを受け付けていません。

スクリーンショット 2015-08-31 18.59.21
前回までに作成した新規登録フォームにBootstrapで装飾を加えていきます。

サインアップ用のフォーム
app/views/devise/registrations/new.html.erb

<% provide(:title, 'Sign up') %>
<center><h1>Sign up</h1></center>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <div class="row">
    <div class="col-md-6 col-md-offset-3">

        <div class="field">
          <%= f.label :name, class: "control-label" %>
          <%= f.text_field :name, autofocus: true, class: "form-control" %>
        </div>

        <div class="field">
          <%= f.label :email, class: "control-label" %>
          <%= f.email_field :email, autofocus: true, class: "form-control" %>
        </div>

        <div class="field">
          <%= f.label :password, class: "control-label" %>
          <% if @validatable %>
          <em>(<%= @minimum_password_length %> characters minimum)</em>
          <% end %>
          <%= f.password_field :password, autocomplete: "off", class: "form-control" %>
        </div>

        <div class="field">
          <%= f.label :password_confirmation, class: "control-label" %>
          <%= f.password_field :password_confirmation, autocomplete: "off", class: "form-control" %>
        </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-3 col-md-offset-3">
        <div class="actions">
          <%= f.submit "Create my account", class: "btn btn-lg btn-primary" %>
        </div>
    </div>
  </div>
<% end %>

サインアップフォームのCSS
app/assets/stylesheets/custom.css.scss

/* mixins */

@mixin box_sizing {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* forms */

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  @include box_sizing;
}

input {
  height: auto !important;
}

サインアップページへのリンクを設置
app/views/pages/home.html.erb

<div id="home" class="home">
      <div class="text-top">
        <h1>Hello World</h1>
        <h3>Bootstrap-based one column layout</h3>
        <center><%= link_to "Sign up", new_user_registration_path, class: "btn btn-success btn-lg" %></center>
      </div>
</div>

http://*****/users/sign_up でページ確認。
(*****)はお使いの独自ドメイン。
スクリーンショット 2015-08-31 20.16.30

次回はユーザーが新規登録(サインアップ)に失敗した時の処理を記述します。

バックナンバー
Webサービスの作り方をRailsでイチから学ぶ【レイアウト作成】part1
Webサービスの作り方をRailsでイチから学ぶ【レイアウト作成】part2
Webサービスの作り方を実例のRailsで【ログイン認証・devise】part1

  • このエントリーをはてなブックマークに追加

関連記事

コメントは利用できません。

ピックアップ記事

  1. 第3回目ではボタンを押すとyoutubeの動画がランダム表示されるものを作成しました。今度はランダム…
  2. ワードプレスでオリジナルテーマを作ってみたい! 全くのイチからの作成手順をご紹介していきたいと思い…

ピックアップ記事

  1. 独学でプログラミング学習に挑戦したは良いが、結局挫折を繰り返す日々。   そんな挫折経験者や…
  2. ネットで調べると実に様々な方法が出てきます。 サーバーによっても様々なアプローチが。 今回私…
  3. 1.さくらVPSにPHP、MySQL、Ruby on Railsを設置。 これらを設置するまで…
  4. 他人様のコンテンツを引っ張ってきて、 自分なりにアレンジを加えた形で 独自のコンテンツとして提供…
ページ上部へ戻る