戻る

Rails6.0


動画学習サイトの構築 Rails6.0

  (0)
2,000円

タスク6-5   ホームページ

このタスクについて


タスクの内容を一部抜粋します。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてこのアプリケーションのフルコードをダウンロードすることが可能になります。




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


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


「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> 



この続きはプロジェクトを購入していただくことで見ることができます。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてプロジェクトを購入するとこのアプリケーションのフルコードをダウンロードすることができます。

まだレビューはありません。

動画学習サイトの構築 Rails6.0

2,000円

Rails6.0で作成しています。
動画で学べるサイトを構築するプロジェクトです。
プロジェクトを登録し、そのプロジェクトに動画を登録できます。
プロジェクトはクレジットカードで購入でき、購入後すぐに動画を見ることができます。
写真の複数アップロード、レビュー機能の実装、Google認証、アマゾンS3の利用方法も解説。
管理ダッシュボードtrestleの実装、Gメールの設定、 HEROKUへのデプロイ方法を解説。
質問があればメッセージを送ることができ、リアルタイムで会話表示することができます。
フルコードのダウンロード可能。

タスク数: 128