[Rails5学習用]コメント付きブログを簡単に作成してデザインも一緒にする手順1　の続き

コピペでOK View編集・追加

application.html.erbの編集

application.html.erb

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>サンプルブログ</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' %>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#"><i class="fab fa-bitcoin fa-border"></i> Navbar</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item active mr-sm-2"><a class="nav-link" href="#"><i class="fas fa-user-circle fa-lg"></i></a></li>
        <li class="nav-item mr-sm-2"><a class="nav-link" href="#"><i class="far fa-comment-alt fa-lg"></i></a></li>
        <li class="nav-item mr-sm-2"><%= link_to 'ログイン/アカウント作成 ', root_path, class: 'nav-link btn btn-sm btn-outline-secondary' %></li>
      </ul>

      <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="fas fa-search"></i></button>
    </form>
  </div>
</nav>

<header>
  <div class="container">
    <h1><%= link_to 'サンプルブログ', root_path %></h1>
  </div>
</header>

<div class="container margin40">
  <div class="row">
    <div class="col-sm-10">
      <% if notice %>
        <div id="notice" class="alert alert-success" role="alert">
          <%= notice %>
        </div>
      <% end %>

      <%= yield %>

    </div>
    <div class="col-sm-2">
      <div class="marginBottom20">
        <%= link_to '新規投稿', new_post_path, class: 'btn btn-block btn-sm btn-primary' %>
      </div>

      サイドバー的な。
    </div>
  </div>
</div>

<footer class="text-center">
  <div class="container">
    &copy; 2018 サンプルブログ
  </div>
</footer>

</body>
</html>

app/views/layouts/application.html.erb

index.html.erbの編集

index.html.erb

<% @posts.each do |post| %>
  <div class="mainWrap">
    <div class="row">
      <div class="col-sm-2">
        <%#= image_tag 'sampleImage1200x628.gif', class: 'img-fluid' %>
        <%#= image_tag 'sampleImageCard.gif', class: 'img-fluid imgSmall' %>
      </div>

      <div class="col-sm-10">
        <i class="far fa-sticky-note"></i> <%= link_to post.title, post %>

        <div class="">
          <%= simple_format(truncate(post.content, length: 40, separator: ' ')) %>
        </div>


      </div>
      <div class="col-sm-12 text-right">
        <i class="fas fa-pencil-alt"></i> <%= post.name %>
        <!--<%= link_to '詳細', post, class: 'btn btn-sm btn-success' %>-->
        <!--<%= link_to '編集', edit_post_path(post), class: 'btn btn-sm btn-warning' %>-->
        <!--<%= link_to '削除', post, method: :delete, class: 'btn btn-sm btn-danger', data: {confirm: 'Are you sure?'} %>-->
        <i class="far fa-clock"></i> <%= post.updated_at.in_time_zone('Tokyo').strftime('%Y/%m/%d %H:%M:%S') %>
      </div>
    </div>
  </div>

<% end %>

app/views/posts/index.html.erb

new.html.erbの編集

new.html.erb

<div class="mainWrap card">
  <h1>New Post</h1>

  <%= render 'form', post: @post %>

  <%= link_to 'Back', posts_path %>
</div>

app/views/posts/new.html.erb

_form.html.erbの編集

_form.html.erb

<%= form_with(model: post, local: true) do |form| %>
  <% if post.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2>

      <ul>
        <% post.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

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

  <div class="field">
    <%= form.label :title %>
    <%= form.text_field :title, class: 'form-control' %>
  </div>

  <div class="field">
    <%= form.label :content %>
    <%= form.text_area :content, class: 'form-control' %>
  </div>

  <div class="actions">
    <%= form.submit '更新する', class: 'btn btn-block btn-success' %>
  </div>
<% end %>

app/views/posts/_form.html.erb

edit.erbの編集

edit.erb

<div class="mainWrap card">
  <h1><%= @post.title %>　編集</h1>

  <%= render 'form', post: @post %>

  <%= link_to 'Show', @post %> |
  <%= link_to 'Back', posts_path %>
</div>

app/views/posts/edit.erb

show.html.erbの編集

show.html.erb

<div class="mainWrap card">
  <h1>
    <%= @post.title %>
  </h1>

  <div>
    <%= simple_format(@post.content) %>
  </div>
  <p>
    <%= @post.name %>
  </p>


  <%= link_to 'Edit', edit_post_path(@post) %> | <%= link_to 'Back', posts_path %>


  <h3><i class="far fa-comments"></i> コメント</h3>
  <% @post.comments.each do |comment| %>
    <div>
      <%= simple_format( comment.body ) %>
      <%= comment.commenter %>
      <%= link_to '削除', [comment.post, comment],
                  :confirm => 'よろしいですか？',
                  :method => :delete %>

    </div>
  <% end %>

  <h3>コメントを書く</h3>
  <%= form_for([@post, @post.comments.build]) do |f| %>

      <!--<%= f.label :body %>-->
      <%= f.text_area :body, placeholder: 'コメントを入力してください' , class:'form-control marginBottom10' %>

      <!--<%= f.label :commenter %>-->
      <%= f.text_field :commenter, placeholder: 'お名前', class:'form-control marginBottom10' %>

      <%= f.submit 'コメントする', class:'btn btn-block btn-success' %>
  <% end %>

</div>

app/views/posts/show.html.erb

SCSSへ追加

applicatiom.scss

@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
body {
  background:linear-gradient(180deg,#4caf50 0%,#4caf50 12%,#edecec 0%,#edecec 100%) no-repeat;
  padding-top: 4.5rem;
}
header {
  h1 {
    color: #ffffff; font-size: 48px;
    padding: 30px 0 10px;
    a {
      color: #ffffff;
    }
    a:hover {
      color: #ffffff;
    }
  }
}
footer { padding: 10px 0;}

.mainWrap {
  //border-radius: 6px;
  background: #ffffff;
  padding: 30px;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  h1 {
    font-size: 18px;
  }
}
.imgSmall {
  width: 150px;
  height: auto;
}
.bgHeaderGreen {background: #4caf50;}
.bgFooterGray {background: #edecec;}
.mainWrap {border-radius: 4px;}

app/assets/stylesheets/applicatiom.scss

これでサンプルのブログみたいな、掲示板みたいなサイトが作れます。
確認するときにでもseed作ってサンプル記事を10個ぐらい流し込めばよいかと。

学習項目

[Rails5学習用]コメント付きブログを簡単に作成してデザインも一緒にする手順1
　┗ブログ(掲示板)の様なものを作成します。
[Rails5学習用]コメント付きブログを簡単に作成してデザインも一緒にする手順2
　┗Bootstrapをテンプレートに当てはめてきれいに表示します。
[Rails5学習用]コメント付きブログを簡単に作成してデザインも一緒にする手順3
　┗ページネーションとテストデータを一括登録します。