戻る

Rails6.0


お仕事売買サイトの構築 Rails6.0

  (0)
3,000円

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

このタスクについて


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




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

  • 「app\assets\images」フォルダに「home」フォルダを新規作成して下さい。
  • 作成した「home」フォルダに「フルコード」の「サンプル画像」に入っている「background01.jpg」「category_1.jpg」「category_2.jpg」「category_3.jpg」「category_4.jpg」「category_5.jpg」「category_6.jpg」「category_7.jpg」ファイルをコピーして下さい。



「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> 
                フリーランスのお仕事探し 
            </h1> 
            <%= form_tag search_path, method: :get, class: "field has-addons" do %> 
                <div class="control has-icons-left"> 
                    <span class="icon is-small is-left"> 
                        <i class="fa fa-search"></i> 
                    </span> 
                    <%= text_field_tag 'q', '', class: "input", placeholder: "どんなお仕事をお探し?" %> 
                </div> 
                <div class="control"> 
                    <button class="button is-success" type="submit">検索する</button> 
                </div> 
            <% end %> 
        </div> 
    </div> 
</section> 
<section class="m-t-100"> 
    <div class="container"> 
        <h1 class="title is-4 p-l-10">人気のカテゴリー</h1> 
        <div id="carousel-category" class="hero-carousel"> 
            
            <div class="carousel-item"> 
                <div class="p-10"> 
                    <%= link_to search_path(category: 1) do %> 
                        <div class="card-image"> 
                            <%= image_tag "home/category_1.jpg", class: "is-background", width: "100%", height: "100%" %> 
                            <div class="card-content is-overlay is-clipped"> 
                                <span class="subtitle f-15 has-text-white">カテゴリー1</span><br> 
                                <span class="title is-4 has-text-white">テスト1</span> 
                            </div> 
                        </div> 
                    <% end %> 
                </div> 
            </div> 
            <div class="carousel-item"> 
                <div class="p-10"> 
                    <%= link_to search_path(category: 2) do %> 
                        <div class="card-image"> 
                            <%= image_tag "home/category_2.jpg", class: "is-background", width: "100%", height: "100%" %> 
                            <div class="card-content is-overlay is-clipped"> 
                                <span class="subtitle f-15 has-text-white">カテゴリー2</span><br> 
                                <span class="title is-4 has-text-white">テスト2</span> 
                            </div> 
                        </div> 
                    <% end %> 
                </div> 
            </div> 
            <div class="carousel-item"> 
                <div class="p-10"> 
                    <%= link_to search_path(category: 3) do %> 
                        <div class="card-image"> 
                            <%= image_tag "home/category_3.jpg", class: "is-background", width: "100%", height: "100%" %> 
                            <div class="card-content is-overlay is-clipped"> 
                                <span class="subtitle f-15 has-text-white">カテゴリー3</span><br> 
                                <span class="title is-4 has-text-white">テスト3</span> 
                            </div> 
                        </div> 
                    <% end %> 
                </div> 
            </div> 
            <div class="carousel-item"> 
                <div class="p-10"> 
                    <%= link_to search_path(category: 4) do %> 
                        <div class="card-image"> 
                            <%= image_tag "home/category_4.jpg", class: "is-background", width: "100%", height: "100%" %> 
                            <div class="card-content is-overlay is-clipped"> 
                                <span class="subtitle f-15 has-text-white">カテゴリー4</span><br> 
                                <span class="title is-4 has-text-white">テスト4</span> 
                            </div> 
                        </div> 
                    <% end %> 
                </div> 
            </div> 
            <div class="carousel-item"> 
                <div class="p-10"> 
                    <%= link_to search_path(category: 5) do %> 
                        <div class="card-image"> 
                            <%= image_tag "home/category_5.jpg", class: "is-background", width: "100%", height: "100%" %> 
                            <div class="card-content is-overlay is-clipped"> 
                                <span class="subtitle f-15 has-text-white">カテゴリー5</span><br> 
                                <span class="title is-4 has-text-white">テスト5</span> 
                            </div> 
                        </div> 
                    <% end %> 
                </div> 
            </div> 
            <div class="carousel-item"> 
                <div class="p-10"> 
                    <%= link_to search_path(category: 6) do %> 
                        <div class="card-image"> 
                            <%= image_tag "home/category_6.jpg", class: "is-background", width: "100%", height: "100%" %> 
                            <div class="card-content is-overlay is-clipped"> 
                                <span class="subtitle f-15 has-text-white">カテゴリー6</span><br> 
                                <span class="title is-4 has-text-white">テスト6</span> 
                            </div> 
                        </div> 
                    <% end %> 
                </div> 
            </div> 
            <div class="carousel-item"> 
                <div class="p-10"> 
                    <%= link_to search_path(category: 7) do %> 
                        <div class="card-image"> 
                            <%= image_tag "home/category_7.jpg", class: "is-background", width: "100%", height: "100%" %> 
                            <div class="card-content is-overlay is-clipped"> 
                                <span class="subtitle f-15 has-text-white">カテゴリー7</span><br> 
                                <span class="title is-4 has-text-white">テスト7</span> 
                            </div> 
                        </div> 
                    <% end %> 
                </div> 
            </div> 
        </div> 
    </div> 
</section> 
<script> 
    BulmaCarousel.attach('#carousel-category', { 
        slidesToScroll: 1, 
        slidesToShow: 4, 
        infinite: true, 
        pagination: false 
    }); 
</script> 



「app\views\layouts\application.html.erb」ファイルに以下の記述を追加します。


記述追加 app\views\layouts\application.html.erb(15行目)
     <% if content_for?(:head) %> 
      <%= yield(:head) %> 
    <% end %> 



app\views\layouts\application.html.erb
 
<!DOCTYPE html> 
<html> 
  <head> 
    <title>Oshigoto</title> 
    <%= csrf_meta_tags %> 
    <%= csp_meta_tag %> 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 
    <!-- Googleフォント --> 
    <link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet"> 
    <!-- アイコン Font Awesome --> 
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> 
  
    <% if content_for?(:head) %> 
      <%= yield(:head) %> 
    <% end %> 
  </head> 
  <body> 
    <!-- ナビゲーションバー --> 
    <%= render  "shared/navbar" %> 
    <!-- noty --> 
    <%= render 'shared/notification' %> 
    <%= yield %> 
  </body> 
</html> 



「app\views\gigs\show.html.erb」ファイルに以下の記述を追加します。


記述追加 app\views\gigs\show.html.erb(1行目)
 <% content_for :head do %> 
  <meta name="turbolinks-cache-control" content="no-cache"> 
<% end %> 



app\views\gigs\show.html.erb
 
<% content_for :head do %> 
  <meta name="turbolinks-cache-control" content="no-cache"> 
<% end %> 
<%= render 'shared/categories' %> 
<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"> 
                                    <p class="title is-4"><%= @gig.title %></p> 
                                </div> 
                                <hr> 
                                <div class="hero-carousel" id="carousel-photo"> 
                                    <% @gig.photos.each do |photo| %> 
                                        <div class="carousel-item has-background image is-16by9"> 
                                            <%= image_tag url_for(photo), class: "is-background", width: "100%" %> 
                                        </div> 
                                    <% end %> 
                                    <% if @gig.video.present? %> 
                                        <div class="video-container"> 
                                            <iframe src="https://www.youtube.com/embed/<%= @gig.video %>" allowfullscreen></iframe> 
                                        </div> 
                                    <% end %> 
                                </div> 
                            </div> 
                        </div> 
                    </div> 
                    <!-- お仕事の内容 --> 
                    <div class="column"> 
                        <div class="card"> 
                            <div class="card-content"> 
                                <article class="media"> 
                                    <div class="media-content"> 
                                        <p><strong>このお仕事について</strong></p> 
                                        <hr> 
                                        <%= @gig.description %> 
                                    </div> 
                                </article> 
                            </div> 
                        </div>                        
                    </div> 
                    
                </div> 
            </div> 
            <!-- 右側 --> 
            <div class="column"> 
                <div class="columns is-multiline"> 
                    <!-- 価格プラン --> 
                    <div class="column is-full"> 
                        <div class="tabs is-fullwidth" id="tabs"> 
                            <ul> 
                                <% Pricing.pricing_types.each do |key, value| %> 
                                    <li class="tab <%= 'is-active' if value == 0 %> " 
                                                data-tab="<%= key %>" style="<%= 'display: none' if @gig.has_single_pricing && value != 0 %>"> 
                                        <a> 
                                            <% if value == 0 %> 
                                                ベーシック 
                                            <% elsif value == 1 %> 
                                                スタンダード 
                                            <% else %> 
                                                プレミアム 
                                            <% end %> 
                                        </a> 
                                    </li> 
                                <% end %> 
                            </ul> 
                        </div> 
                        <div class="tabs-content"> 
                            <% @gig.pricings.each do |p| %> 
                                <div class="tab-content" id="tab-<%= p.pricing_type %>" style="<%= 'display: none' if !p.basic? %>"> 
                                    <div class="card"> 
                                        <div class="card-content"> 
                                            <div class="media"> 
                                                <div class="media-content"> 
                                                    <strong><%= p.title %></strong>                                                                                                        
                                                </div> 
                                                <div class="media-right"> 
                                                    <p class="title is-4"><%= number_to_currency(p.price) %></p> 
                                                </div>                                                
                                            </div> 
                                            <div class="content f-15"> 
                                                <p class="m-t-30"><%= p.description %></p> 
                                                <p class="m-t-30"> 
                                                    <strong><i class="far fa-clock"></i> 期日: <%= p.delivery_time %>日</strong>                                                    
                                                </p> 
                                            </div> 
                                            <% if (!user_signed_in? && @gig.active) || (user_signed_in? && @gig.active && @gig.user_id != current_user.id) %> 
                                                <%= form_for([@gig, @gig.orders.new]) do |f| %> 
                                                    <%= hidden_field_tag 'pricing_type', p.pricing_type %> 
                                                    <%= f.submit "購入する (#{number_to_currency(p.price)})", class: "button is-fullwidth is-danger", data: {confirm: "本当によろしいですか?"} %> 
                                                <% end %> 
                                            <% else %> 
                                                <button class="button is-fullwidth is-danger" disabled>ご利用できません</button>  
                                            <% end %> 
                                            
                                        </div> 
                                    </div> 
                                </div> 
                            <% end %> 
                        </div> 
                    </div> 
                    <!-- プロフィール --> 
                    <div class="column"> 
                        <div class="card"> 
                            <div class="card-content is-horizontal-center is-flex"> 
                                <figure class="image is-256x256"> 
                                    <%= image_tag avatar_url(@gig.user), class: "is-rounded" %> 
                                </figure> 
                            </div> 
                            <div class="card-content f-15"> 
                                <div class="content has-text-centered"> 
                                    <p class="title is-5"><%= @gig.user.full_name %></p> 
                                    <button class="button is-black is-outlined is-fullwidth">メッセージを送る</button> 
                                </div> 
                                <article class="media"> 
                                    <div class="media-content"> 
                                        <i class="fas fa-user m-r-5"></i> アカウント登録日 
                                    </div> 
                                    <div class="media-right"> 
                                        <%= I18n.l(@gig.user.created_at, format: :full_date) %> 
                                    </div> 
                                </article> 
                                <article class="media"> 
                                    <div class="media-content"> 
                                        <i class="fas fa-map-marker-alt m-r-5"></i> 出身地 
                                    </div> 
                                    <div class="media-right"> 
                                        <%= @gig.user.from %> 
                                    </div> 
                                </article> 
                                <article class="media"> 
                                    <div class="media-content"> 
                                        <%= @gig.user.about %> 
                                    </div> 
                                </article> 
                            </div> 
                        </div> 
                    </div> 
                    
                </div> 
            </div> 
            
        </div> 
    </div> 
</section> 
<script> 
    BulmaCarousel.attach('#carousel-photo', { 
        slidesToScroll: 1, 
        slidesToShow: 1 
    }); 
    $(document).ready(function() { 
        $('#tabs li').on('click', function() { 
            var type = $(this).data('tab'); 
            $('#tabs li').removeClass('is-active'); 
            $(this).addClass('is-active'); 
            $('.tab-content').hide(); 
            $('#tab-' + type).show(); 
        }) 
    }) 
</script> 



ナビゲーションバーを更新します。


記述追加 app\views\shared\_navbar.html.erb(18行目)
 
<%= form_tag search_path, method: :get do %> 
    <div class="field has-addons <%= 'is-hidden' if current_page?(root_path) %>"> 
        <div class="control has-icons-left"> 
            <span class="icon is-small is-left"> 
                <i class="fa fa-search"></i> 
            </span> 
            <%= text_field_tag 'q', '', class: "input", placeholder: "どんなお仕事を?" %> 
        </div> 
        <div class="control"> 
            <button class="button is-success" type="submit">検索</button> 
        </div> 
    </div> 
<% end %> 



app\views\shared\_navbar.html.erb
コードをコピーしてファイルの内容を置き換えて下さい。
 
<nav class="navbar is-danger" role="navigation" aria-label="main navigation"> 
    <div class="navbar-brand"> 
        <a class="navbar-item" href="/"> 
            <h1>テストサイトOshigoto</h1> 
        </a> 
        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> 
            <span aria-hidden="true"></span> 
            <span aria-hidden="true"></span> 
            <span aria-hidden="true"></span> 
        </a> 
    </div> 
    <div id="navbarBasicExample" class="navbar-menu"> 
        <div class="navbar-start"> 
            <div class="navbar-item"> 
                <%= form_tag search_path, method: :get do %> 
                    <div class="field has-addons <%= 'is-hidden' if current_page?(root_path) %>"> 
                        <div class="control has-icons-left"> 
                            <span class="icon is-small is-left"> 
                                <i class="fa fa-search"></i> 
                            </span> 
                            <%= text_field_tag 'q', '', class: "input", placeholder: "どんなお仕事を?" %> 
                        </div> 
                        <div class="control"> 
                            <button class="button is-success" type="submit">検索</button> 
                        </div> 
                    </div> 
                <% end %> 
            </div> 
        </div> 
        <div class="navbar-end"> 
            <a class="navbar-item"></a> 
            <a class="navbar-item"></a> 
            <!-- もしログインしていなかったら--> 
            <% if (!user_signed_in?) %> 
                <div class="navbar-item"> 
                    <div class="buttons"> 
                        <%= link_to  "新規ユーザ登録", new_user_registration_path, class: "button is-primary" %> 
                        <%= link_to  "ログイン", new_user_session_path, class: "button is-light" %> 
                    </div> 
                </div> 
            <!-- ログインしていたら --> 
            <% else %> 
                <div class="navbar-item has-dropdown is-hoverable"> 
                     <a class="navbar-link"> 
                        <figure class="image is-48x48 m-r-5"> 
                            <div style="margin-top: 0.6rem;"> 
                                <%= image_tag avatar_url(current_user), class: "is-rounded" %> 
                            </div> 
                        </figure> 
                        <%= current_user.full_name %> 
                    </a> 
                    <div class="navbar-dropdown"> 
                        <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %> 
                        <%= link_to  "ユーザ登録情報編集", edit_user_registration_path, class: "navbar-item" %> 
                        <hr class="navbar-divider"> 
                        <%= link_to  "ログアウト", destroy_user_session_path, method: :delete, class: "navbar-item" %> 
                    </div> 
                </div> 
            <% end %> 
        </div> 
    </div> 
</nav> 
<% if (user_signed_in?) && !current_page?(root_path) && !current_page?(search_path) && !current_page?("/gigs/#{params[:id]}") && !current_page?("/users/#{params[:id]}") %> 
    <nav class="navbar has-shadow" style="z-index: 5;"> 
        <div class="container"> 
            <div class="navbar"> 
                <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %> 
                <div class="navbar-item has-dropdown is-hoverable"> 
                    <a class="navbar-link">お仕事を売る人</a> 
                    <div class="navbar-dropdown"> 
                        <%= link_to 'お仕事を登録する', new_gig_path, class: "navbar-item" %> 
                        <%= link_to '売れた注文の確認', selling_orders_path, class: "navbar-item" %> 
                         <%= link_to 'リクエストを見る', all_requests_path, class: "navbar-item" %> 
                         <%= link_to '申込みの確認', my_offers_path, class: "navbar-item" %> 
                    </div> 
                </div> 
                <div class="navbar-item has-dropdown is-hoverable"> 
                    <a class="navbar-link">お仕事を買う人</a> 
                    <div class="navbar-dropdown"> 
                        <%= link_to '買った注文の確認', buying_orders_path, class: "navbar-item" %> 
                        <%= link_to 'お仕事をリクエストする', new_request_path, class: "navbar-item" %> 
                        <%= link_to 'リクエストの確認', requests_path, class: "navbar-item" %> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </nav> 
<% end %> 
<script> 
$(document).ready(function() { 
  // navbar burgerアイコンでクリックイベントを確認する 
  $(".navbar-burger").click(function() { 
      // 「navbar-burger」と「navbar-menu」の両方で「is-active」クラスを切り替える 
      $(".navbar-burger").toggleClass("is-active"); 
      $(".navbar-menu").toggleClass("is-active"); 
  }); 
}); 
</script> 






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

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

お仕事売買サイトの構築 Rails6.0

3,000円

フリーランスの方がお仕事を登録し、仕事を探している人が探して買うことができます。
お仕事を探している人がリクエストを出してお仕事をしてくれる人を募集する事もできます。
お仕事が売れると売上の80%が自動で指定口座に振り込まれます。
お仕事の購入はクレジットカードで決済します。
質問があればメッセージを送ることができ、リアルタイムで会話表示することができます。
検索機能、写真のアップロード、レビュー機能の実装、Facebook認証、アマゾンS3の利用方法も解説。
HEROKUへのデプロイ方法を解説。
フルコードのダウンロード可能。

タスク数: 146