بسم الله الرحمن الرحيم

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_01

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.

FILEapp/models/article.rb
1
2
3
4
5
6
7
8
9
10
11
12

class Article < ApplicationRecord
  belongs_to :user

  # For go to next & prev feature
  def next
    self.class.where('id > ?', id).order(id: :asc).limit(1).first
  end

  def prev
    self.class.where('id < ?', id).order(id: :desc).limit(1).first
  end
end

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.

FILEapp/controllers/articles_controller.rb
1
2
3
4
5
6
7
8
9
10
11

class ArticlesController < ApplicationController

  # ...

  def show
    @article = Article.find(params[:id])
  end

  # ...

end

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.

FILEapp/views/articles/show.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13

<!-- ... -->

<!-- For go to next & prev feature -->
<div class="page-navigation mt-5">
  <div class="row d-flex justify-content-between">
    <div class="col-6 text-left">
      <%= link_to "Sebelumnya", article_path(@article.next) if @article.next %>
    </div>
    <div class="col-6 text-right">
      <%= link_to "Selanjutnya", article_path(@article.prev) if @article.prev %>
    </div>
  </div>
</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.

FILEapp/views/articles/show.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!-- ... -->

<!-- For go to next & prev feature -->
<div class="page-navigation my-3 mx-3">
  <div class="row d-flex justify-content-between">
    <div class="col-6 text-left">
      <% if @article.prev %>
        <%= link_to article_path(@article.prev), data: {toggle: "tooltip", placement: "top"}, title: @article.prev.title do %>
          <%= "Sebelumnya" %>
        <% end %>
      <% end %>
    </div>
    <div class="col-6 text-right">
      <% if @article.next %>
        <%= link_to article_path(@article.next), data: {toggle: "tooltip", placement: "top"}, title: @article.next.title do %>
          <%= "Selanjutnya" %>
        <% end %>
      <% end %>
    </div>
  </div>
</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


Lisensi

logo_cc-by-nc-sa
Tulisan ini dilisensikan dengan :
Atribusi-NonKomersial-BerbagiSerupa 4.0 Internasional (CC BY-NC-SA 4.0)

Penulis

bandithijo

My journey kicks off from reading textbooks as a former Medical Student to digging bugs as a Software Engineer – a delightful rollercoaster of career twists. Embracing failure with the grace of a Cat avoiding water, I've seamlessly transitioned from Stethoscope to Keyboard. Armed with ability for learning and adapting faster than a Heart Beat, I'm on a mission to turn Code into a Product.

- Rizqi Nur Assyaufi

d98d8237fef8f1017d0be931b6e291341cbe6ca8