こんにちはジャムです。

Railsを一通り学んだので、自分自身のポートフォリオ用にTwitter風のwebアプリケーションを作成して行きます。

今回はSTEP1として、プロジェクトフォルダの立ち上げからユーザーの新規登録までやっていきます。

でわ、早速

プロジェクトフォルダの作成

今回はそのまんまでtwitterという名にします。

コマンドライン

$ rails new twitter #twitterという名のプロジェクトフォルダ作成

ユーザーを登録するモデル、テーブルの構築

Userモデルの作成

今回のWEBアプリのユーザー情報はメールアドレスとパスワードを設定

コマンドライン

$ rails g model User email:string password_digest:string #userモデルの作成
$ rails db:migrate #データベースへの反映、usersテーブルの作成

Gemfileにbcryptを追記

bycryptはusersテーブルにパスワードを保存する際に暗号化し、セキュリティを高めることができるgemです。

Gemfile

gem 'bcrypt'

インストール

コマンドライン

$ bundle install

userモデルにパスワード暗号化用のおまじないとバリデーションを追記

app/models/user.rb

class User < ApplicationRecord
  validates :email, presence: true,uniqueness: true
  validates :password, presence: true
  has_secure_password
end

presence：Eメールを登録する際に空白だった場合エラーを返す

ルーティングの設定

config/routes.rb

Rails.application.routes.draw do
  resources :users
  root "users#index"
end

ユーザーコントローラーの作成

index new createコントローラーとビュー作成

コマンドライン

rails g controller Users index new create

コントローラーの修正

app/controller/users_controller.rb

class UsersController < ApplicationController

  def index
    @user = User.all 
  end

  def new
    @user = User.new
  end

  def create
    @user = User.new(user_params)
    @user.save
    redirect_to "/"
  end

  private
  def user_params
    params.require(:user).permit(:email,:password,:password_confirmation)
  end
end

View関連を作成

　全体のhtmlを構成するviewを若干修正

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Twitter</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>

  <body>
    <%= render "shared/header" %> #ここを追記
    <div class="container">
    <%= yield %>
    </div>
  </body>
</html>

ヘッダーを作成

先ほど記載した<%= render "shared/header" %>で読み込まれるファイル

app/views/shared/_header.html.erb

<nav class="navbar navbar-inverse">
  <div class="navbar-header">
    <%= link_to "Twitter style Web application","/", class: "navbar-brand" %>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gnavi">

      <span class="sr-only">メニュー</span><!--音声ブラウザにメニューがあることを伝えています-->
      <span class="icon-bar"></span><!--ハンバーガーメニューの三本線を設定-->
      <span class="icon-bar"></span><!--ハンバーガーメニューの三本線を設定-->
      <span class="icon-bar"></span><!--ハンバーガーメニューの三本線を設定-->

    </button>

  </div>

  <div id="gnavi" class="collapse navbar-collapse"><!--ハンバーガーメニュー内に折り畳まれる部分の設定-->
    <ul class="nav navbar-nav navbar-right">
      <li><%= link_to "新規登録",new_user_path %></li>
    </ul>
  </div>
</nav>

ユーザーの一覧を表示するビューを作成

app/views/users/index.html.erb

<h3>ユーザーリスト</h3>
<ul class="list-group">
<% @user.each do |user| %>
<li class="list-group-item"><%= link_to user.email,user_path(user.id) %></li>
<% end %>
</ul>

新規登録用のビューを作成

app/views/users/new.html.erb

  <div class="row">
  <div class="col-md-6 col-md-offset-2">
    <h3 class="page-header">新規登録する</h3>
    <%= form_for(@user) do |f| %>
    <p><%= f.label :email , "メールアドレス"%></p>
    <p><%= f.email_field :email %></p>
    <p><%= f.label :password,"パスワード" %></p>
    <p><%= f.password_field :password %></p>
    <p><%= f.label :password_confirmation, "パスワード（再入力）" %></p>
    <p><%= f.password_field :password_confirmation %></p>
    <p><%= f.submit "登録する", class: "btn btn-primary" %></p>
    <% end %>
  </div>
</div>

bootstrapの導入

Gemfaiに追記

Gemfile

gem 'bootstrap-sass'
gem 'jquery-rails'

インストール

コマンドライン

$ bundle install

custom.scssを作成し、以下の内容を追記

app/assets/stylesheets/custom.scss

@import "bootstrap-sprockets";
@import "bootstrap";

@media screen and (min-width: 500px) {
   /*　画面サイズ 500px以上で適用　*/
   input {width:600px;}
   textarea {
     width:600px;
     height:300px;
   }
 }

@media screen and (max-width: 499px) {
   /*　画面サイズ 499pxまで適用　*/
   input {width:300px;}
   textarea {
     width:300px;
     height:200px;
   }
 }

 .btn {
   margin-top:20px;
 }

 a {
   text-decoration:none;
 }

 a:hover {
   color:red;
 }

 .badge a {
   color:white;
 }

jqueryの設定追記

app/assets/javascripts/application.js

//= require jquery3
//= require bootstrap-sprockets

一旦、ブラウザで確認

コマンドライン

$ rails s -b 192.168.33.11 -d #192.168.33.11はipアドレスを確認してください

ブラウザを開いて192.168.33.11:3000にアクセス

新規登録をクリック

登録したユーザーが表示される

今回はここまで

次回はユーザーの編集、削除機能の実装をします。コチラ