クリップ詳細ページ

クリップ詳細ページ

上記の構成を図にしたものが以下です。row(行)の中にグリッド４つと６つ分の２つのカラムがあります。

では、実装していきましょう。clips/show.html.erbに以下のように記述して下さい。

<div class="row">
  <h1><%= @clip.title %></h1>
  <div class="col-md-4">
    <%= image_tag @clip.image, 
            class: 'img-fluid' if @clip.image %>
  </div>
  <div class="col-md-8">    
      <%=link_to @clip.url, @clip.url, 
         target: '_blank' %>
            <%= @clip.description %>
        </div>
</div>

これを、ブラウザで確認してみます。以下のようになっていればOKです。

困ったこと「誰でもデータを書き換えられる！」

なんと現在、誰でもclips/new, clips/:id/editなどが出来てしまう状態です。
つまり、こんなURLを直接入力すると誰でも新しいクリップ作成・編集ができてしまう状態です。

https://xxx.com/clips/new
https://xxx.com/clips/1/edit

これはちょっと困ってしまいますね。データを書き換えられてしまうということです。これが公開されたら大問題です！
そうさせないようにクリップは直接作成、編集、削除は出来ないようにしたいと思います。

routesを編集することで解決

上記の問題は、routesでonly（～のみ）やexcept（～以外）を使用する事で解決できます。onlyやexceptを使用するとroutesを適用するアクションを選択することができるのです。以下オレンジ部分を追加して下さい。

Rails.application.routes.draw do
  resources :categories
  resources :user_clips
  resources :clips, only: [:index, :show]
end

今回はonlyを使用して、クリップはindexとshowのみroutesを適用するとしています。

課題

clips/indexを以下のようにデザインしましょう。またuser_clips/index.html.erbも同じデザインにしましょう。

ユーザークリップを整える

ユーザークリップにBootstrapのボタンやフォームを実装します。デザインを整えながらcssクラスの使い方などを学びましょう。

UserClipはメイン機能

まず、ユーザークリップへのリンクボタンです。ユーザークリップはメイン機能なので、いつでもクリックできるようにすることが望ましいでしょう。なので、ボタンはナビゲーションに配置します。これで、どのページにいても常に新規ユーザークリップを作成する事が出来ます、

では、実装していきます。まず、以下のように新規ユーザークリップの位置を変更しましょう。

以下を追加して、ヘッダーにボタンを作成して下さい。

<ul class="navbar-nav ml-auto">
  <li class="nav-item">
    <%= link_to "新規クリップ", new_user_clip_path, class: 'btn btn-outline-light' %>
  </li>
</ul>

次に、user_clips/newを編集します。以下のように、ページタイトルやユーザークリップの作成方法の説明を追加してください。

<h1>新規ユーザークリップ</h1>
<p class="lead">
  URLを下に入力して作成ボタンを押してください。
<%= render 'form', user_clip: @user_clip %>  

次は、フォームです。user_clps/_form.html.erbを以下のように編集して下さい。rowやcolなどのグリッドシステムを使用してフォームを整えています。mt-2というのは、余白の設定でmargin-topを指定しています。form-controlというクラスは、入力欄に適用するものです。

<div class="row">
   <div class="col-md-8 mt-2">
       <%= text_field_tag :url, user_clip.clip&.url, class: 'form-control', placeholder: 'urlをコピペしてください' %>
   </div>
   <div class="col-md-4 mt-2">
       <%= form.submit 'クリップを保存する', class: 'btn btn-primary ' %>
   </div>
</div>

次に、ボタンです。これは、btnというCSSクラスを使用します。これは、ボタン作成の為のクラスです。そしてもうひとつは、ボタンのデザインを指定する為のCSSクラスです。この部分は、Bootstrapで用意されているカラーテンプレートから任意のものを選び使用します。では、一例ですが色々なデザインを見てみましょう。

課題

ユーザーのサインアップ・編集のフォームもBootstrapを適用してデザインしてみましょう。