Mari Mengenal Konsep Routing Pada Laravel

Di dalam tutorial laravel kali ini kita akan belajar tentang salah satu konsep yang paling penting: yaitu konsep routing. Di mana dari proses routing ini kita akan bisa memetakan dari dan harus kemana alur aplikasi laravel kita.

Sebenarnya kita bisa mendapatkan panduan yang lengkap tentang routing pada laravel di dokumentasi resmi mereka, hanya saja pada tutorial kali ini saya akan membahasnya langsung dengan praktek agar mudah dipahami bagi pemula.

Tentang Aplikasi

Untuk memudahkan pemahaman, kita akan buat rancangan aplikasi kita dalam angan-angan. Anggap saja kita akan membuat sebuah website portofolio sederhana. Portofolio untuk developer. Yang di website tersebut akan dimuat tentang siapa si developer, dan project-project apa yang sudah pernah dia kerjakan.

Terdapat tiga buah halaman inti, yaitu:

/ Home Page.
/about Halaman about.
/projects Halaman untuk menampilkan project-project yang pernah kita kerjakan.

Membuat Project

Pertama-tama buat project laravel terlebih dahulu.

laravel new portofolio

Untuk lebih detil soal install laravel, anda bisa baca tutorialnya di tulisan saya yang lain dengan judul: Cara Install Laravel di Linux [Semua Distro].

Jalankan server bawaan php pada aplikasi laravel kita.

php artisan serve

Membuat Route Sederhana

Pada folder /routes terdapat 4 buat file. Yaitu api.php, channels.php, console.php, dan web.php. Semua file tersebut secara otomatis akan diload oleh laravel. Di sini saya tidak akan membahas masing-masingnya, yang jelas jika kalian ingin membuat web site, maka file routing yang paling banyak kalian akan gunakan (atau minimal yang paling pertama kalian butuhkan) adalah web.php.

Buka file routes/web.php lalu hapus semua isinya serta tulis kode berikut. Kita akan memulai aplikasi ini dari awal sekali.

<?php

# routing untuk homepage
Route::get('/', function () {
  return 'Home Page';
});

# routing untuk halaman about
Route::get('/about', function () {
  return 'About Page';
});

# routing untuk halaman list projects
Route::get('/projects', function () {
  return 'List Projects';
});

Sekarang kita punya tiga buah routing. Masing-masing menggunakan method GET. Kita bisa membuka browser lalu mengakses ketiga routing tersebut dengan alamat: http://localhost:8000/, http://localhost:8000/about, http://localhost:8000/projects.

Mengembalikan File View Sebagai Response

Oke. Kita sudah membuat routing. Ada tiga. Dengan method GET semua. Tapi kembalian yang kita kembalikan sebagai response masih string alias teks biasa. Kita ingin yang dikembalikan adalah kode html. Maka yang harus kita lakukan adalah mengembalikan file view.

Pada laravel, view yang disediakan menggunakan template engine. Yaitu blade, file dengan ekstensi .blade.php yang memiliki banyak helper yang sangat-sangat memudahkan kita untuk memanagement views yang ada pada aplikasi kita. Tapi pada tutorial kali ini kita tinggalkan dulu pembahasan tentang view pada laravel, kita pakai cara konvensional dulu, insyaallah kita akan bahas di tutorial yang lainnya.

Buka folder /resources/views. Lalu hapus semua file yang ada di dalamnya.

Buat tiga file view dengan nama: home.blade.php, about.blade.php, projects.blade.php.

Sehingga direktori kita menjadi seperti ini:

├── resources
│   ├── assets
│   ├── lang
│   └── views
│       ├── about.blade.php
│       ├── home.blade.php
│       └── projects.blade.php
└── ...

Masing-masing ketiga file view tersebut akan kita beri kode html. Harusnya kalau mengikuti standar laravel kita perlu mendefinsikan satu file sebagai layout dasar, kemudian layout tersebut akan diturunkan ke halaman-halaman di bawahnya sehingga UI web kita bisa konsisten. Akan tetapi seperti yang sudah disebutkan sebelumnya, hal-hal ini termasuk pembahasan tentang views, kita tinggalkan sementara dan kita pakai cara konvensional.

Buka file resources/views/home.blade.php lalu tulis kode berikut:

<!DOCTYPE html>
<html>
<head>
  <title>Home Page</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="/">Portofolio</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="/">Home</a></li>
        <li><a href="/projects">Projects</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </div>
  </nav>
  <div class="container">
    <h1>Home Page</h1>
    <hr>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</body>
</html>

Buka file /resources/views/projects.blade.php, lalu tulis kode berikut:

<!DOCTYPE html>
<html>
<head>
  <title>Projects</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="/">Portofolio</a>
      </div>
      <ul class="nav navbar-nav">
        <li><a href="/">Home</a></li>
        <li class="active"><a href="/projects">Projects</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </div>
  </nav>
  <div class="container">
    <h1>Projects</h1>
    <p><small>These are some projects I have contributed to.</small></p>
    <hr>
    <div class="row">
      <div class="col-md-3">
        <div class="thumbnail">
          <img src="https://images.pexels.com/photos/670042/pexels-photo-670042.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" style="width: 100%">
          <div class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.</div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="thumbnail">
          <img src="https://images.pexels.com/photos/672913/pexels-photo-672913.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" style="width: 100%">
          <div class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.</div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="thumbnail">
          <img src="https://images.pexels.com/photos/670246/pexels-photo-670246.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" style="width: 100%">
          <div class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.</div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="thumbnail">
          <img src="https://images.pexels.com/photos/3059/desk-laptop-notebook-pen.jpg?w=940&h=650&auto=compress&cs=tinysrgb" style="width: 100%">
          <div class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.</div>
        </div>
      </div>
    </div>
</body>
</html>

Buka file /resources/views/about.blade.php, lalu tulis kode berikut:

<!DOCTYPE html>
<html>
<head>
  <title>About</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="/">Portofolio</a>
      </div>
      <ul class="nav navbar-nav">
        <li><a href="/">Home</a></li>
        <li><a href="/projects">Projects</a></li>
        <li class="active"><a href="/about">About</a></li>
      </ul>
    </div>
  </nav>
  <div class="container">
    <h1>About</h1>
    <hr>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</body>
</html>

Setelah tiga file views kita berisi kode html, sekarang ubah file /routes/web.php untuk mengembalikan view.

<?php

# routing untuk homepage
Route::get('/', function () {
  return view('home');
});

# routing untuk halaman about
Route::get('/about', function () {
  return view('about');
});

# routing untuk halaman list projects
Route::get('/projects', function () {
  return view('projects');
});

Atau kita bisa juga membuatnya lebih sederhana lagi seperti ini:

<?php

# routing untuk homepage
Route::view('/', 'home');

# routing untuk halaman about
Route::view('/about', 'about');

# routing untuk halaman list projects
Route::view('/projects', 'projects');

Penampilan Home Page:

Penampilan halaman list projects:

Penampilan halaman about:

Membuat Route dengan Nama

Membuat sebuah routing dan memberikannya nama memudahkan kita untuk melakukan redirecting atau pun linking dari satu route ke route yang lain. Buka file /routes/web.php lalu ubah kodenya menjadi seperti ini:

<?php

# routing untuk homepage
Route::view('/', 'home')->name('home');

# routing untuk halaman about
Route::view('/about', 'about')->name('about');

# routing untuk halaman list projects
Route::view('/projects', 'projects')->name('projects');

Kemudian kita bisa men-generate url dari route-route tersebut dengan memanggil fungsi route dan memasukkan nama route sebagai parameter.

<?php

route('about'); # ini akan mengembalikan https://localhost:8000/about

Sehingga jika kita perhatikan pada ketiga view kita pada bagian navbar, di situ kita masih memasukkan url secara manual. Maka kita bisa menggantinya menggunakan helper route.

Pada file /resources/views/home.blade.php, ubah kode navbar menjadi berikut:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="{{route('home')}}">Portofolio</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="{{route('home')}}">Home</a></li>
      <li><a href="{{route('projects')}}">Projects</a></li>
      <li><a href="{{route('about')}}">About</a></li>
    </ul>
  </div>
</nav>

Lakukan hal yang sama pada kedua file blade lainnya.

Apa keuntungan menggunakan routing dengan nama?

Keuntungannya adalah ketika kita mengganti path url pada routing kita, selama nama route kita tidak berubah, kita tidak perlu mengganti semua link yang ada di views. Karena helper route sudah menghandlenya.

Misal, pada routing di atas kita ganti /about menjadi /about-us seperti ini:

<?php

...
Route::view('/about-us`)->name('about'');
...

Maka kita cukup mengganti satu file saja (yaitu file /routes/web.php) tanpa harus mengganti semua link-link yang tadinya /about menjadi /about-us.

Oke, untuk project di atas kita cukupkan dulu. Kita akan lanjutkan ke beberapa poin-poin lain tentang routing pada laravel. Insyaallah untuk project di atas akan kita lanjutkan lagi di tutorial mengenai views dan juga controller.

Untuk mendapatkan informasi tentang tutorial terbaru kalian bisa mengikuti blog ini di facebook mau pun di channel telegram.

Route dengan Parameter

Tentu saja kita akan membutuhkan routing yang dinamis. Di mana url-nya hanya berupa pattern saja dengan sebuah parameter. Seperti misalkan pada twitter, setiap user memiliki username, dan setiap username memiliki routing sendiri untuk halaman profilnya. Misal saya punya username ibnujakaria, maka url twitter saya adalah twitter.com/ibnujakaria.

Kita tidak mungkin mendefinsikan untuk setiap username satu routing. Maka di sinilah kita membutuhkan yang namanya routing dengan parameter.

Parameter Wajib

Yang pertama adalah parameter wajib. Di mana jika parameter tersebut kosong atau null, maka program akan mengembalikan hasil 404.

Pada laravel, kita bisa mendefinsikannya sebagai berikut:

<?php

Route::get('/user/{id}', function ($id) {
	return "User {$id}";
});

Kita juga bisa membuat parameter pada routing sebanyak yang kita mau:

<?php

Route::get('/user/{id}/tweet/{tweet}', function ($userId, $tweetId) {
	# aksi
});

Parameter Opsional

Kita juga bisa membuat routing dengan parameter opsional. Yaitu meskipun parameternya tidak diisi oleh user, aplikasi tetap bisa berjalan. Caranya seperti berikut:

<?php

Route::get('/user/{name?}', function ($name = null) {
	return "Welcome {$name}";
});

Untuk men-generate url ke routing yang ada parameternya, kita bisa melakukannya semisal berikut:

<?php

# /routes/web.php
...
Route::get('/user/{id}', function ($id) {
	# aksi
})->name('user.detail');
...
...
# views
route('user.detail', ['id' => 1]); # ini akan mereturn string http://localhost:8000/user/1

Tipe-Tipe Method Route yang Tersedia

Di dalam laravel, kita bisa mendefinisikan berbagai macam http method untuk membuat routing. Di antaranya:

GET
POST
PUT
DELETE
PATCH
OPTIONS

Akan tetapi, HTML forms tidak support dengan method PUT, DELETE, dan PATCH. Sehingga dalam laravel kita butuh melakukan method spoofing. Yaitu kita menambahkan hidden field pada form kita dengan nama _method dan isinya adalah method yang ingin kita spoof. Apa pun method yang kita ingin spoofing, form method kita harus POST.

<form action="/path/action" method="POST">
	{{csrf_field()}}
	<input type="hidden" name="_method" value="PUT">
</form>

Kita juga bisa menggunakan helper method_field() untuk men-generate input di atas.

<?php

{{ method_field('PUT') }}

Tips Helper Routing

Routing untuk Redirect

Kita bisa mereturn redirect pada aksi routing satu ke routing yang lainnya. Semisal berikut:

<?php

Route::get('/logout', function () {
	return redirect()->route('auth.login');
})->name('auth.logout');

Routing untuk Mereturn View

Untuk membuat routing yang hanya mereturn view, kita bisa langsung menggunakan fungsi view() pada facade Route.

<?php

Route::view('/user/{username}', 'user.detail');

Mendapatkan Current Routing

Anda juga bisa mendapatkan tentang informasi routing yang sedang aktif dengan memanggil method-method yang ada pada facade Route.

<?php

# untuk mendapatkan route instance
$route = Route::current();

# untuk mendapatkan nama route
$name = Route::currentRouteName();