Rails6.0 | 動画学習サイトを作成| 37 | ホームページ - 学生向けプログラミング入門

[36]レビュー表示　<<　[ホームに戻る]　>> [38]購入確認電子メール

ホームページを作成します。

「app\assets\images」フォルダに「home」フォルダを新規作成し、何でも良いので「background01.jpg」ファイルを入れて下さい。

「app\controllers\pages_controller.rb」ファイルを以下のように編集して下さい。

記述編集　app\controllers\pages_controller.rb
3行目に記述を追加しています。

class PagesController < ApplicationController
  def home
    @projects = Project.all
  end
end

「app\views\pages\home.html.erb」ファイルを以下のように編集します。

app\views\pages\home.html.erb

<% content_for :head do %>
  <meta name="turbolinks-cache-control" content="no-cache">
<% end %>

<section class="hero is-medium has-bg-img">
    <div class="hero-body">
        <div class="container">
            <h1 class="title has-text-white">
            <br/>
               動画で学習するサイト <br/>
               いつでもどこでも学習できます
            </h1>
        </div>
    </div>
</section>

<div class="box">
  <article class="media">
    <div class="column">
        <div class="columns is-multiline">
            <% if @projects.count > 0 %>
                <% @projects.each do |project| %>
                    <%= link_to project do %>
                        <div class="column is-one-third">
                            <div class="card">
                                <div class="card-image">
                                    <%= link_to project_path(project) do %>
                                        <figure class="image is-4by3">
                                            <%= image_tag project_cover(project) %>
                                        </figure>
                                    <% end %>
                                </div>
                                <div class="card-content p-t-5 p-b-5">
                                    <h4 class="title is-4" style="color: black; margin: 10px;"><%= project.name %></h4>
                                </div>
                                <div class="card-content p-t-5 p-b-5" style="margin-left: 10px;">
                                    <span class="star-review"><i class="fa fa-star"></i>
                                        <%= project.average_rating %>
                                        <span class="has-text-primary">(<%= project.reviews.count %>)</span>
                                    </span>
                                </div>                                           
                                <div class="card-content p-t-5 p-b-5">
                                    <h4 class="title is-6" style="color: black; margin: 5px;">タスク&nbsp;&nbsp;<i class="far fa-clock"></i> <%= project.tasks.count %></h4>
                                </div>
                                <div class="card-content p-t-5 p-b-5">
                                    <span class="tag is-danger is-large" style="margin-top: 10px; margin-bottom: 10px;"><%= number_to_currency(project.price) %></span>
                                </div>
                               <div class="card-content p-t-5 p-b-5" style="margin-bottom: 10px;">
                                    <%= link_to  "このプロジェクトを詳しく", project_path(project), class: "button is-success" %>
                                </div>
                               
                            </div>
                        </div>
                    <% end %>
                <% end %>
            <% else %>
                <div class="column is-one-third">
                    <div class="card">
                        <div class="card-content p-t-5 p-b-5">
                            <p class="subtitle is-6 m-b-5">表示できるプロジェクトはありません。</p>
                        </div>
                      
                    </div>
                </div>
            <% end %>
      </div>
    </div>
  </article>
</div>

<footer class="footer">
  <div class="content has-text-centered">
    <p>
      <strong>c2020　テストサイトGakushuu6, All Rights Reserved.</strong>
      <br/>
      <br/>
      Contact me at<br/>
      <strong>win.rails.learn@gmail.com</strong>
    </p>
  </div>
</footer>