【学習5.0】【MacOSX】ホームページ

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

「フルコード」の「サンプル画像」に入っている「home」フォルダごと「app\assets\images」フォルダにコピーして下さい。

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

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

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

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

app\views\pages\about.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.image %>
                                        </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">
                                    <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　テストサイトGakushuu, All Rights Reserved.</strong>
      <br/>
      <br/>
      Contact me at<br/>
      <strong>win.rails.learn@gmail.com</strong>
    </p>

  </div>
</footer>

ブラウザ確認
http://localhost:3000/

ホームページが更新されました。

学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django