【実装の方法】aタグ内の画像をクリックして、DBをupdateする方法

Question

現状・実現したいこと

標記の件について質問させていただきます。

【現状】
現在、画面には、DB内にある画像データを２つ表示しています（再読み込みするたびにランダムに表示）
下のGIFの状況です。

○画像とその下の文字列はaタグ内に配置
○その画像が格納しているitemsテーブルはid,name,image,points,compe_id,created_at,updated_atのカラムが存在

【実現したいこと】
画像をクリックしたときに、itemsテーブルのpointsカラムの値に+1されるように実装したい

該当のソースコード

app/views/competitions/top.html.erb

<h1 id="heading">Click either you "like".</h1>

<div id="pictures">
  <% @random_items.each do |item| %>
  <div id="picture">
    <%= link_to "#" do %>
<!--      public/item_images の中に画像を格納しておく。-->
<!--      DBには画像のデータの名前を入れておく-->
    <%= image_tag "/item_images/#{item.image}" ,width: "500px"%>
      <div>
        <%= item.name %>
      </div>
    <% end %>
  </div>
  <% end %>
</div>

app/controllers/competitions_controller.rb

class CompetitionsController < ApplicationController

  # GET /
  # ランダムに画像を表示させる
  def top
    # ItemモデルのデータをRANDOMメソッドで並び替え、その中の2つを@random_itemsに入れて、テンプレートへ渡す
    @random_items = Item.order("RANDOM()").limit(2)
  end

  def index
  end

  def show
  end

  def update
  end
end

config/routes.rb

Rails.application.routes.draw do
  # GET / top画面
  root 'competitions#top'

  # GET /index 大会一覧画面へ遷移
  get '/competitions', to: 'competitions#index'

  # GET /conpetitions/:id で大会詳細画面へ遷移
  # PATCH PUT/competitions/:id でポイント+1　
  resources :competitions,     only: [:show,:update]
end

補足情報（FW/ツールのバージョンなど）

• ruby 2.7.0p0
• Rails 6.1.0
• sqlite

Comments

[y_waiwai]

提示のコードではどういう動作になるんでしょうか

[hoshi-takanori]

ブラウザ上で a タグをクリックした時に、サーバー側にその情報を送って、サーバー上のデータベースを更新する必要がある、というのはお分かりでしょうか？ その際、ブラウザ側で画面遷移するなら普通のリンクですが、画面遷移しないなら JavaScript で処理することになります。

[katahik]

y_waiwai 様
>提示のコードではどういう動作になるんでしょうか

現在、aタグ内に画像を仕込んであり、aタグ内のsrcは"/"としているため、画像をクリックすると同じく、toppageに飛んできます。

hoshi-takanori 様
>ブラウザ上で a タグをクリックした時に、サーバー側にその情報を送って、サーバー上のデータベースを更新する必要がある、というのはお分かりでしょうか？
その際、ブラウザ側で画面遷移するなら普通のリンクですが、画面遷移しないなら JavaScript で処理することになります。
一応、aタグをクリックしたときにDBを更新する必要があることは、認識しています。
ただ、今まで、私が経験してきたものは、formを使ってPOSTリクエストで作成（更新）してきたものばかりでしたので、通常、GETリクエストを送るaタグでどのように実装していいかが疑問でした。

[hoshi-takanori]

<a href=".../update_count?id=1234"> または <a href=".../update_count/1234"> (1234 は画像の ID) みたいにして、リクエストを受け取った側で id を受け取って処理することは可能です。ただ、GET だとキャッシュや先読みされる可能性がありますね。

[katahik]

hoshi-takanori 様
> <a href=".../update_count?id=1234"> または <a href=".../update_count/1234"> (1234 は画像の ID) みたいにして、

2点確認させてください。
・update_count?(update_count/)は、組み込み関数でしょうか？それとも、自分で定義するのでしょうか？

・GETリクエストにて、update_count?(/)1234のパラメーターを送信して、それをcontroller側で受け取り、contoller側で+1したものを保存する。という流れになるのでしょうか？

お忙しいところお手数ですが、ご教授いただければ幸いです。

[hoshi-takanori]

・update_count は自分で定義してください。Rails 知りませんが、/update_count/1234 なら get '/update_count/:id' とか書くのでは。
・はい。(HTML の仕組み上、<form method="GET" action="submit.html"> に送信すると、.../submit.html?name=xxx みたいに入力内容が追加された URL に飛びますが、form を使わずに <a href=".../submit.html?name=xxx"> とすれば同じ URL に飛ぶので、サーバーからは違いが見えません。)

[katahik]

詳細に教えていただきありがとうございます。
早速やってみたいと思います。ありがとうございました。

Answer 1

hoshi-takanori 様のご指摘どおり記述したら、無事実装できました。ありがとうございました。

top.html.erb

<%= link_to "#{item.id}" do %>
<!--      public/item_images の中に画像を格納しておく。-->
<!--      DBには画像のデータの名前を入れておく-->
　　<%= image_tag "/item_images/#{item.image}" ,width: "500px",height: "500px"%>
　　　　<div>
       　　<%= item.name %>
　　　　</div>
<% end %>

competitions_controller.rb

def top
    # Competitionモデルの中で、period_startが今日以前で、なおかつ、
    # period_endが今日以降をin_session_competitionに格納する
    in_session_competition =
        Competition.find_by(period_start: -Float::INFINITY..Date.today,period_end: Date.today..Float::INFINITY)

    # topページから渡ってきた/:idを@paramsに格納
    @params=params[:id]
    # paramsが渡ってきたかどうかで場合分け
    # /にアクセスした場合と、2回目以降にアクセスした場合（パラメータに値が入っている場合）
    if @params.nil?
      # 今日開催中の大会のitemsをRANDOMメソッドで並び替え、その中の2つを@random_itemsに入れて、テンプレートへ渡す
      @random_items =in_session_competition.items.order("RANDOM()").limit(2)

    else
      # idを頼りに該当のitemを探す
      @selected_item = Item.find(@params)
      # そのアイテムのpointsカラムに+1
      @selected_item.points += 1
      # 保存
      @selected_item.save
      # 今日開催中の大会のitemsをRANDOMメソッドで並び替え、その中の2つを@random_itemsに入れて、テンプレートへ渡す
      @random_items = in_session_competition.items.order("RANDOM()").limit(2)
    end

Answer 2

Railsでの実装方法はともかくよくあるのは
「
クリック時にIDだけサーバーサイドに渡して
update table名 set points=points+1 where id = :idのようなSQLを実行
」
ですね。
実行については同期・非同期どちらでも良いですが、非同期のほうが多いと思います。

Comments

[katahik]

ご回答ありがとうございます。

2点確認させてください。

・aタグ内のhref=""内にその画像のidを仕込んでおいて、その画像がクリックされたら、GETリクエストされて、パラメータとしてcontrollerで受け取るということでしょうか？

・cotrollerで受け取ったあとに、そのcontroller内にSQLを実行して、DBを更新するといった流れになるでしょうか？

お忙しいところお手数ですが、ご教授いただければ幸いです。