Belajar Laravel 13 #3: Routing, Controller, View Step-by-Step

Setelah memahami konsep MVC di episode 2, sekarang kita masuk ke praktik nyata. Di Laravel, alur dari URL yang kamu ketik di browser sampai halaman tampil di layar melibatkan tiga pemain utama: Route, Controller, dan View. Ketiganya bekerja seperti orkestra — jika salah satu anggota ketinggalan nada, semuanya berantakan. Artikel ketiga series "Belajar Laravel 13 dari Nol" ini akan memandu kamu step-by-step membuat route pertama, controller pertama, dan view pertama dengan syntax Blade yang rapi. Siap-siap menulis kode production-ready? Mari kita mulai.

Artikel ini akan memandu kamu step-by-step membuat route pertama, controller pertama, dan view pertama dengan syntax Blade yang rapi. Siap-siap menulis kode production-ready? Mari kita mulai.

Langkah 1: Route Paling Sederhana — Return String

Mari kita mulai dari yang paling dasar. Buka file routes/web.php di project Laravel kamu. Di sini adalah tempat semua route didefinisikan.

Tambahkan baris ini di bawah route default:

Route::get('/halo', function () {
    return 'Halo, DuaMasa Tech!';
});

Itu saja. Sekarang jalankan server dengan php artisan serve, lalu buka browser ke http://localhost:8000/halo. Kamu akan melihat tulisan "Halo, DuaMasa Tech!" di layar. Selamat, kamu telah membuat route pertama kamu!

Route adalah penunjuk jalan — kapan user akses URL tertentu, Laravel tahu harus menjalankan apa. Di contoh di atas, URL /halo di-map ke sebuah anonymous function yang mengembalikan string.

Langkah 2: Upgrade ke Controller

Anonymous function OK untuk learning, tapi di aplikasi nyata, logika seharusnya disimpan di Controller — biar rapi dan mudah di-maintain. Mari kita buat controller pertama kamu.

Jalankan perintah artisan:

php artisan make:controller HaloController

Perintah ini membuat file baru di app/Http/Controllers/HaloController.php. Buka file tersebut, dan kamu akan melihat struktur dasar seperti ini:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HaloController extends Controller
{
    //
}

Sekarang tambahkan method index ke dalam controller:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HaloController extends Controller
{
    public function index()
    {
        return 'Halo dari Controller!';
    }
}

Selanjutnya, ubah route di routes/web.php untuk memanggil controller ini:

use App\Http\Controllers\HaloController;

Route::get('/halo', [HaloController::class, 'index']);

Refresh browser kamu, dan hasilnya sama — tapi kali ini logika berasal dari Controller. Jauh lebih rapi, kan?

Langkah 3: Return View Blade

Mengembalikan string langsung tidak cukup untuk aplikasi web modern. Biasanya kita perlu return HTML — dan di Laravel, itu dilakukan dengan View. Blade adalah template engine Laravel yang membuat kamu bisa menulis PHP dalam file HTML dengan cara yang lebih elegan.

Mari buat view file. Buat file baru di resources/views/halo.blade.php:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Halo</title>
</head>
<body>
    <h1>Halo, {{ $nama }}!</h1>
    <p>Selamat datang di Laravel 13.</p>
</body>
</html>

Perhatikan syntax {{ $nama }} — itu adalah cara Blade untuk menampilkan variable dari PHP ke HTML. Kita akan pass variable ini dari Controller.

Sekarang update method di HaloController:

public function index()
{
    $nama = 'DuaMasa Tech';
    return view('halo', ['nama' => $nama]);
}

Method view() adalah Laravel helper yang meload file view. Argument pertama adalah nama view (tanpa ekstensi .blade.php), dan argument kedua adalah array data yang ingin di-pass ke view.

Refresh browser, dan kamu akan melihat halaman HTML yang proper dengan heading "Halo, Duamasa Tech!".

Langkah 4: Passing Data & Blade Syntax

Data dari controller sering lebih kompleks dari sekadar string. Mari kita lihat cara yang lebih advanced.

Update controller untuk pass array:

public function index()
{
    $nama = 'Duamasa Tech';
    $skills = ['Laravel', 'Vue.js', 'MySQL', 'Docker'];
    
    return view('halo', [
        'nama' => $nama,
        'skills' => $skills
    ]);
}

Di view halo.blade.php, kita bisa loop array dengan @foreach:

<h1>Halo, {{ $nama }}!</h1>
<p>Skill yang dikuasai:</p>
<ul>
    @foreach($skills as $skill)
        <li>{{ $skill }}</li>
    @endforeach
</ul>

Ada juga @if untuk kondisional:

@if(count($skills) > 0)
    <p>Skill sudah terpenuhi!</p>
@else
    <p>Belum ada skill.</p>
@endif

Syntax Blade lainnya yang sering dipakai: {{ $variable }} untuk output, @foreach, @if/@else/@endif, @auth (cek autentikasi), dan {{ Str::upper($text) }} untuk helper function. Semuanya akan saya jelaskan lebih detail di episode berikutnya.

Langkah 5: Bedanya Route GET, POST, dan Resource

Sejauh ini kita pakai Route::get() yang merespons HTTP GET request. Tapi ada beberapa tipe route lain yang penting kamu tahu:

Route::get() — untuk menampilkan halaman atau mengambil data (tidak mengubah state)
Route::post() — untuk submit form atau mengirim data ke server
Route::put() / Route::patch() — untuk update resource
Route::delete() — untuk menghapus resource
Route::resource() — shortcut yang membuat semua operasi CRUD (Create, Read, Update, Delete) sekaligus

Contoh Route::post():

Route::post('/halo', [HaloController::class, 'store']);

Dan Route::resource() — ini akan membuat 7 route otomatis:

Route::resource('posts', PostController::class);

Perintah ini sama dengan menulis:

Route::get('/posts', [PostController::class, 'index']);
Route::get('/posts/create', [PostController::class, 'create']);
Route::post('/posts', [PostController::class, 'store']);
Route::get('/posts/{id}', [PostController::class, 'show']);
Route::get('/posts/{id}/edit', [PostController::class, 'edit']);
Route::put('/posts/{id}', [PostController::class, 'update']);
Route::delete('/posts/{id}', [PostController::class, 'destroy']);

Tapi cara Route::resource() jauh lebih ringkas dan sudah menjadi konvensi di Laravel. Kita akan praktik ini lebih detail di episode 4 saat membahas database.

Kesimpulan

Tiga langkah besar sudah kamu kuasai: membuat Route yang menunjuk ke URL, membuat Controller yang berisi logika, dan membuat View Blade yang menampilkan data ke user. Alur ini adalah fondasi setiap halaman di aplikasi Laravel kamu.

Di episode berikutnya, kita akan menambahkan database ke dalam mix — kamu akan belajar membuat migration, model, dan query data dari controller. Untuk sekarang, coba buat beberapa halaman dummy sendiri — misalnya halaman /tentang, /galeri, atau /kontak. Ulangi langkah 1-5, dan makin terbiasa kamu dengan alurnya, makin cepat kamu bisa develop. See you di episode 4!