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

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
    Article.where('id > ?', id).order(id: :asc).limit(1).first
  end

  def prev
    Article.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
<!-- ... -->

<!-- For go to next & prev feature -->
<div class="d-flex justify-content-between">
  <%= link_to "Prev Post", article_path(@article.prev) if @article.prev %>
  <%= link_to "Next Post", article_path(@article.next) if @article.next %>
</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.

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


Penulis

bandithijo

BanditHijo adalah nama pena saya – meminjam istilah keren dari para penulis. Teman-teman menyebut saya sebagai GNU/Linux Enthusiast. Saya memang gemar mengutak-atik sistem operasi ini. Bukan karena hobi tapi karena saya perlu untuk menggunakannya. Hehe.

- Rizqi Nur Assyaufi

Berlangganan via Email

Jangan sampai ketinggalan kabar dan info terbaru mengenai BanditHijo (R)-Chive.
Ayo bergabung!
c2deb4abbcb1b30e9079c35732dca589f2d7b6e8