戻る

Rails5.0


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

  (0)
1,000円

タスク4-2   プロジェクトビュー

このタスクについて


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




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


app\views\project\index.html.erb
 
<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"> 
                                    <span class="tag is-danger is-large" style="margin-top: 10px; margin-bottom: 10px;"><%= number_to_currency(project.price) %></span> 
                                </div> 
                                <footer class="card-footer"> 
                                    <h4 class="title is-4" style="color: black; margin: 10px;"><%= project.content %></h4> 
                                </footer>  
                                
                            </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> 



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



プロジェクトインデックスページ




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


app\views\project\show.html.erb
 
<section class="section"> 
    <div class="container"> 
        <div class="columns"> 
            <!-- 左側 --> 
            <div class="column is-two-thirds"> 
                <div class="columns is-multiline"> 
                    <!-- プロジェクト --> 
                    <div class="column is-full">   
                        <div class="card"> 
                            <div class="card-content"> 
                                <div class="content"> 
                                    <h1 class="title"><%= @project.name %></h1> 
                                    <div class="title is-4 has-text-right" style="color: black;"><%= number_to_currency(@project.price) %></div> 
                                </div> 
                                <hr> 
                                <div class="hero-carousel" id="carousel-photo"> 
                                    <%= image_tag @project.image %> 
                                </div> 
                            </div> 
                        </div> 
                    </div> 
                    
                    <div class="column"> 
                        <div class="card"> 
                            <div class="card-content"> 
                                <!-- コンテンツ --> 
                                <div class="box"> 
                                    <article class="media"> 
                                        <div class="media-content"> 
                                            <div class="content"> 
                                                <h2 class="subtitle">このプランについて</h2> 
                                                <hr> 
                                                <%= @project.content %> 
                                            </div> 
                                        </div> 
                                    </article> 
                                </div> 
                                <!-- タスク Section --> 
                                <div class="box"> 
                                    <article class="media"> 
                                        <div class="media-content"> 
                                            <div class="content"> 
                                                <div class="collection"> 
                                                    <% @tasks.each do |task| %> 
                                                        <% if task.header %> 
                                                            <br/> 
                                                            <div class="collection-item active"> 
                                                                <span class="tag is-link is-large"> <%= task.title %></span> 
                                                                <span class="tag is-white is-large"> <%= task.note %></span> 
                                                            </div> 
                                                            <br/> 
                                                        <% else %> 
                                                            <div class="collection-item active"> 
                                                                &nbsp;&nbsp;&nbsp;&nbsp;<span class="tag is-light is-medium" style="margin: 3px;"> 
                                                                    <%= link_to [task.project, task], class: "collection-item", data: { turbolinks: false} do %> 
                                                                        <%= task.title %> 
                                                                    <% end %>                                                                
                                                                 </span> 
                                                                
                                                            </div>                            
                                                        <% end %> 
                                                    <% end %> 
                                                </div> 
                                            </div> 
                                        </div> 
                                    </article> 
                                </div> 
 
                            </div> 
                        </div>                        
                    </div> 
                </div> 
            </div> 
            <!-- 右側 --> 
            <div class="column"> 
                <div class="columns is-multiline"> 
                    <!-- 購入 --> 
                    <div class="column is-full"> 
                        <div class="card"> 
                            <div class="card-content"> 
                                <div class="media"> 
                                    <div class="media-content"> 
                                        <strong><%= @project.name %></strong>                                                                                                        
                                    </div> 
                                    <div class="media-right"> 
                                        <p class="title is-4" style="color: black;"><%= number_to_currency(@project.price) %></p> 
                                    </div>                                                
                                </div> 
                                <div class="content f-15"> 
                                    <p class="m-t-30"><%= @project.content %></p> 
                                    <p class="m-t-30"> 
                                        <strong>タスク数: <i class="far fa-clock"></i> <%= @tasks.count %></strong>                                                    
                                    </p> 
                                </div> 
                                <% if user_signed_in? %> 
                                    <button type="submit" class="button is-fullwidth is-danger">購入する</button> 
                                <% else %> 
                                    <button class="button is-fullwidth is-danger" disabled>ログインして下さい</button>  
                                <% end %> 
                            </div> 
                        </div> 
                    </div> 
                   
                </div> 
            </div> 
            
        </div> 
    </div> 
</section> 



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

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

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

1,000円

動画で学べるサイトを構築するプロジェクトです。プロジェクトを登録し、そのプロジェクトに動画を登録できます。プロジェクトはクレジットカードで購入でき、購入後すぐに動画を見ることができます。写真のアップロード、レビュー機能の実装、Google認証、アマゾンS3の利用方法も解説。ActiveAdminの実装、Gメールの設定、 HEROKUへのデプロイ方法を解説。 フルコードのダウンロード可能。

タスク数: 100