Di beberapa blog atau portal berita, kalian mungkin pernah melihat sebuah artikel yang di bagian bawahnya terdapat navigasi. Navigasi ini berfungsi untuk mengarahkan pengguna untuk lanjut ke artikel sebelumnya atau sesudahnya.

Navigasi sederhana di hijabtraveler.com
Di aplikasi web berbasis Laravel, kita juga bisa membuat fitur serupa hanya dengan menambahkan beberapa baris skrip pada controller. Pada dasarnya, fitur ini mirip sekali dengan pagination. Namun, dalam implementasinya tidak menggunakan package pagination yang disediakan oleh Laravel.
Dalam tutorial kali ini, saya menggunakan data dan struktur tabel users
yang telah disediakan oleh Laravel. Tabel users
sendiri saya tambahkan kolomusername
sebagai identitas unik alternatif bagi user. Nah, kolom username
tersebut digunakan sebagai parameter untuk melihat data lengkap user.
+----------------+------------------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +----------------+------------------+------+-----+---------+----------------+ | id | int(10) unsigned | NO | PRI | NULL | auto_increment | | name | varchar(191) | NO | | NULL | | | username | varchar(50) | NO | UNI | NULL | | | email | varchar(191) | NO | UNI | NULL | | | password | varchar(191) | NO | | NULL | | | remember_token | varchar(100) | YES | | NULL | | | created_at | timestamp | YES | | NULL | | | updated_at | timestamp | YES | | NULL | | +----------------+------------------+------+-----+---------+----------------+
Untuk lebih mudah dipahami, kita perlu menambahkan datanya ke dalam tabelusers
. Data di bawah akan saya gunakan sebagai contoh pada paragraf lain dalam tutorial ini.
+----+---------------------------+-----------------+----------------------------+ | id | name | username | email | +----+---------------------------+-----------------+----------------------------+ | 1 | Stephany McClure | sreichel | keith.bogisich@example.net | | 2 | Prof. Franco Turcotte Sr. | spencer.katelin | maggio.brandyn@example.org | | 3 | Prof. Eleonore Conn | lenore.barrows | aparker@example.com | | 4 | Alisha Pfeffer | buster68 | miracle05@example.net | | 5 | Mr. Lance Swaniawski MD | fzieme | wframi@example.net | +----+---------------------------+-----------------+----------------------------+
***
Dalam aplikasi yang dibangun, kalian punya sebuah fitur untuk menampilkan rincian user. Route-nya sendiri didefinisikan sebagai berikut:
Route::get('/user/{username}', 'UserController@view')->name('user.view');
Dalam method view()
pada classUserController
, kalian sudah punya skrip untuk mencari data user dan menampilkannya pada view.
Anggaplah fitur tersebut sudah berjalan dengan sempurna. Maka langkah selanjutnya adalah mencari data user sesudahnya (next) dan data user sebelumnya (previous) dari pangkalan data untuk ditampilkan di view.
Sebagai contoh, kalian mengakses sebuah URI dengan segmen /user/buster68
yang menampilkan user dengan nama “Alisha Pfeffer”. Berdasarkan data di atas, user dengan username “buster68” mempunyai id
dengan nilai “4”.
Untuk mendapatkan data user sebelumnya, logika yang bisa diterapkan adalah sebagai berikut:
- Menyaring data user yang nilai
id
-nya kurang dari “4”. Berdasarkan query ini, maka didapat nilai deret [3, 2, 1]. - Dari deret angka tersebut, urutkan data berdasarkan
id
mulai dari yang paling besar (DESC/descending). - Ambil hanya satu data yang paling atas dari data yang sudah diurutkan. Dalam Eloquent, kita bisa menggunakan method
first()
ataufirstOrFail()
.
Jika diterjemahkan ke dalam skrip PHP, maka logika di atas dapat ditulis menjadi:
// get prev user data $prev = User::where('id', '<', $user->id) ->orderBy('id', 'DESC') ->first();
Hal yang sama juga berlaku untuk mencari data user setelahnya. Yaitu, menyaring data berdasar id
yang lebih besar dari user ditemukan, urutkan dari angka yang paling kecil, kemudian ambil data pertama dari deretan id
yang sudah disaring dan diurutkan.
// get next user data $next = User::where('id', '>', $user->id) ->orderBy('id', 'ASC') ->first();
Jika ditulis lengkap, maka skripnya akan menjadi seperti di bawah.
<?php namespace App\Http\Controllers; use App\User; class UserController extends Controller { public function view($username) { $user = User::whereUsername($username)->firstOrFail(); // get prev user data $prev = User::where('id', '<', $user->id) ->orderBy('id', 'DESC') ->first(); // get next user data $next = User::where('id', '>', $user->id) ->orderBy('id', 'ASC') ->first(); return view('user.view', compact('user', 'next', 'prev')); } }
Variabel $prev
dan $next
dapat digunakan pada view untuk menampilkan navigasi data user sebelumnya atau sesudahnya.
@if (! empty($next)) <a href="{{ route('user.view', $next->username }}" class="btn"> Next User: {{ $next->name }} </a> @endif
Cukup mudah bukan untuk diimplementasikan?
Untuk demo aplikasinya dapat dilihat pada gambar bergerak di bawah. Dan pada tutorial kali ini, tidak ada demo langsung aplikasi. Untuk mencoba langsung, kalian perlu menginstalnya dari repositori di Github.

Contoh aplikasi navigasi sederhana
Imbas dari fitur ini adalah uery SQL yang dijalankan lebih banyak dari sebelumnya. Untuk setiap permintaan, fitur ini butuh dua query tambahan. Berita baiknya, kalian sudah bisa membuat fitur di aplikasi web dan portal berita kebanyakan. 😉