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

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:

  1. Menyaring data user yang nilai id-nya kurang dari “4”. Berdasarkan query ini, maka didapat nilai deret [3, 2, 1].
  2. Dari deret angka tersebut, urutkan data berdasarkanid mulai dari yang paling besar (DESC/descending).
  3. Ambil hanya satu data yang paling atas dari data yang sudah diurutkan. Dalam Eloquent, kita bisa menggunakan method first() atau firstOrFail().

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

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. 😉