Prerequisite

ruby 2.7.2 rails 6.1.2 postgresql 12.5 rspec 4.0.0

Latar Belakang Masalah

Catatan kali ini, saya akan membahas Ruby on Rails dari sisi front-end.

Apabila kita memiliki sebuah fitur blog pada web aplikasi yang kita bangun menggunakan Ruby on Rails, mungkin akan cukup praktis kalau kita dapat menavigasikan halaman blog post dengan go to next & previous post pada halaman di mana saat ini kita berada.

Gambar 1. Fitur Go to Next-Prev di post/article

Contohnya seperti gambar di atas, bagian yang saya beri kotak merah.

Pemecahan Masalah

Untuk mengimplementasikan fitur go to next & previous post di atas, sangat mudah sekali.

Kita hanya perlu bermain di Model dan juga View template.

ActiveRecord

Misal, saya memiliki sebuah model bernama article.

Saya akan membuat business logic pada article model, seperti di bawah ini.

1class Article < ApplicationRecord
2  belongs_to :user
3
4  # For go to next & prev feature
5  def next
6    self.class.where('id > ?', id).order(id: :asc).limit(1).first
7  end
8
9  def prev
10    self.class.where('id < ?', id).order(id: :desc).limit(1).first
11  end
12end

Nah, method tersebut tinggal kita gunakan saja.

ActionController

Anggaplah controllernya bernama articles_controller.

Pada Blog post untuk menampilkan halaman dari artikel biasanya terdapat pada action show.

1class ArticlesController < ApplicationController
2
3  # ...
4
5  def show
6    @article = Article.find(params[:id])
7  end
8
9  # ...
10
11end

Sekarang tinggal menggunakannya pada view template.

ActionView

Mengikuti dari articles_controller dengan action show, artinya kita akan memiliki susunan dari halaman template seperti ini.

.
├─ 📂 app/
│  ├─ ...
│  └─ 📂 views/
│     ├─ 📂 articles/
│     │  ├─ ...
│     │  └─ 📄 show.html.erb 👈️
...   ...

Nah, tinggal kita gunakan instance variable dari @article yang telah kita definisikan di articles_controller.

1<!-- ... -->
2
3<!-- For go to next & prev feature -->
4<div class="page-navigation mt-5">
5  <div class="row d-flex justify-content-between">
6    <div class="col-6 text-left">
7      <%= link_to "Sebelumnya", article_path(@article.next) if @article.next %>
8    </div>
9    <div class="col-6 text-right">
10      <%= link_to "Selanjutnya", article_path(@article.prev) if @article.prev %>
11    </div>
12  </div>
13</div>

* Abaikan nama class d-flex dan justify-content-between, saya menggunakan Bootstrap 4.

Method .next dan .prev adalah method yang kita definisikan pada article model.

Kalau ingin menggunakan tooltip, dapat menggunakan cara seperti ini.

1<!-- ... -->
2
3<!-- For go to next & prev feature -->
4<div class="page-navigation my-3 mx-3">
5  <div class="row d-flex justify-content-between">
6    <div class="col-6 text-left">
7      <% if @article.prev %>
8        <%= link_to article_path(@article.prev), data: {toggle: "tooltip", placement: "top"}, title: @article.prev.title do %>
9          <%= "Sebelumnya" %>
10        <% end %>
11      <% end %>
12    </div>
13    <div class="col-6 text-right">
14      <% if @article.next %>
15        <%= link_to article_path(@article.next), data: {toggle: "tooltip", placement: "top"}, title: @article.next.title do %>
16          <%= "Selanjutnya" %>
17        <% end %>
18      <% end %>
19    </div>
20  </div>
21</div>

Selesai!

Pesan Penulis

Sepertinya, segini dulu yang dapat saya tuliskan.

Selanjutnya, saya serahkan kepada imajinasi dan kreatifitas teman-teman. Hehe.

Mudah-mudahan dapat bermanfaat.

Terima kasih.

(^_^)

Referensi

1. stackoverflow.com/questions/1275963/rails-next-post-and-previous-post-links-in-my-show-view-how-to
   Diakses tanggal: 2021/02/13

2. gorails.com/forum/setting-up-next-post-and-previous-post
   Diakses tanggal: 2021/02/13