Belajar Laravel Dari Dasar Sampai Expert Part 2

Tinggalkan Komentar / Uncategorized / Oleh

Route dan View

Halo, teman-teman! Apa kabarnya hari ini? Semoga semuanya dalam keadaan baik dan tetap semangat untuk melanjutkan pembelajaran Laravel.

Pada Part 1 sebelumnya, kita sudah mempelajari pengenalan Laravel serta cara menginstalnya hingga berhasil dijalankan. Nah, di Part 2 ini, kita akan melanjutkan pembelajaran dengan membahas dua konsep dasar yang sangat penting dalam Laravel, yaitu Route dan View. Kedua konsep ini menjadi salah satu fondasi dalam membangun halaman web menggunakan Laravel. Sebelum masuk ke praktiknya, mari kita kenali terlebih dahulu apa itu Route dan View serta bagaimana keduanya bekerja dalam sebuah aplikasi web.

Apa itu Route dan View

Dalam pengembangan aplikasi web menggunakan Laravel, Route dan View adalah dua konsep fundamental yang saling berkaitan.

  • Route: Mendefinisikan bagaimana aplikasi merespons permintaan HTTP (misalnya, ketika pengguna mengunjungi URL tertentu). Setiap route memetakan URL ke sebuah action, yang bisa berupa pengembalian string sederhana, pemanggilan fungsi anonim (closure), atau memanggil metode dalam sebuah Controller. Route untuk aplikasi web biasanya didefinisikan dalam file routes/web.php.
  • View: Bertanggung jawab untuk menampilkan antarmuka pengguna (UI) kepada pengguna. View berisi markup HTML, CSS, dan JavaScript, serta dapat menyertakan kode PHP yang disisipkan. Laravel menggunakan template engine yang kuat bernama Blade. File view Blade selalu memiliki ekstensi: “.blade.php” (misalnya, namafile.blade.php) dan disimpan di direktori resources/views. Blade memungkinkan penulisan kode PHP yang lebih bersih dan menyediakan fitur-fitur seperti pewarisan template (template inheritance) dan menampilkan data dengan mudah.

Peralatan dan Bahan untuk Memulai Project:

  • Komputer dengan instalasi Laravel yang sudah berfungsi (seperti pada part 1 sebelumnya).
  • Terminal/Command Prompt.
  • Teks Editor (Contohnya Visual Studio Code, Sublime Text, Atom, dan lainnya).
  • Web Browser (Contohnya Google Chrome, Mozilla Firefox, Microsoft Edge, dan lainnya).

Langkah Kerja

A. Persiapan Awal

Sebelum mulai mempelajari Route dan View, pastikan kamu sudah menyelesaikan instalasi Laravel pada Part 1 sebelumnya. Pada materi sebelumnya, kita sudah berhasil membuat proyek Laravel dengan nama folder latihan1 dan menjalankannya melalui browser. Pada Part 2 ini, kita akan menggunakan kembali project tersebut sebagai tempat untuk mempraktikkan materi Route dan View.

1. Mengaktifkan XAMPP
  • Buka aplikasi XAMPP Control Panel di komputer kamu.
  • Setelah aplikasi terbuka, klik tombol Start pada bagian Apache dan MySQL
  • Pastikan keduanya sudah berjalan. Jika berhasil, indikator pada Apache dan MySQL akan berubah menjadi hijau.

2. Buka Project Laravel di Visual Studio Code:
  • Buka aplikasi Visual Studio Code.
  • Pilih menu File, kemudian klik Open Folder.

  • Cari lokasi penyimpanan project Laravel yang sudah dibuat pada Part 1, yaitu folder latihan1.
  • Pilih folder tersebut, kemudian klik Select Folder untuk membukanya di Visual Studio Code

3. Mengaktifkan Fitur Auto Save di Visual Studio Code:

Sebelum mulai mengedit file Laravel, aktifkan fitur Auto Save terlebih dahulu, agar setiap perubahan yang dilakukan dapat tersimpan secara otomatis tanpa harus menekan Ctrl + S berulang kali. Hal kecil ini bisa mencegah kejadian kode sudah diedit panjang lebar ternyata belum tersimpan. Langkah-langkahnya sebagai berikut:

  • Pada Visual Studio Code, klik menu File di bagian kiri atas.
  • Pilih menu Auto Save.
  • Jika sudah ada tanda centang di sebelahnya, berarti fitur Auto Save berhasil diaktifkan.

4. Buka Terminal di Visual Studio Code:
  • Setelah itu, lanjutkan dengan membuka terminal melalui menu Terminal yang terdapat pada bagian atas Visual Studio Code.
  • Klik New Terminal untuk membuka terminal bawaan Visual Studio Code.

  • Terminal akan muncul di bagian bawah layar.
5. Jalankan Development Server:
  • Setelah berada di dalam folder project, ketik perintah berikut pada terminal:php artisan serve.
  • Tekan Enter dan tunggu sampai server berhasil dijalankan.
  • Jika berhasil, akan muncul alamat server seperti: http://127.0.0.1:8000.
  • Biarkan terminal tetap terbuka selama proses pembelajaran berlangsung.

Catatan: Jika nanti kamu ingin menghentikan atau mematikan server, cukup klik di dalam area terminal, lalu tekan tombol Ctrl + C pada keyboard.

6. Buka Project di Browser:
  • Buka web browser pilihan kamu, seperti Google Chrome, Mozilla Firefox, atau Microsoft Edge.
  • Masukkan alamat: http://127.0.0.1:8000 pada kolom alamat browser.
  • Jika berhasil, halaman utama Laravel akan ditampilkan seperti pada Part 1 sebelumnya.

B. Membuat Route Dasar

1. Buka File Route (web.php):
  • Pada bagian kiri Visual Studio Code (panel Explorer), cari dan buka folder routes.
  • Di dalam folder tersebut, klik file web.php.
  • Di dalam file ini, kamu akan melihat satu baris kode route bawaan (default) dari Laravel untuk halaman utama (/).

2, Tambahkan Route Baru:

Tambahkan kode route baru di bagian paling bawah file web.php untuk menampilkan teks sederhana:

PHP

Route::get(‘/’, function () {

    return view(‘welcome’);

});

// — Route Baru Dimulai Di Sini —

// Route untuk URL /salam

Route::get(‘/salam’, function () {

    return ‘Halo dari Route Laravel!’;

});

// Route untuk URL /info

Route::get(‘/info’, function () {

    return ‘Ini adalah halaman informasi sederhana.’;

});

3. Uji Route di Browser:

(Catatan: Karena di Tahap A terminal server masih berjalan, kamu bisa langsung membuka browser tanpa perlu mengetik ulang perintah php artisan serve).

  • Buka tab baru di web browser kamu.
  • Masukkan URL berikut pada kolom alamat browser secara bergantian untuk melihat hasilnya:
  • Ketik: http://127.0.0.1:8000/salam 

lalu tekan Enter.

lalu tekan Enter.

  • Jika berhasil, kamu akan melihat teks sederhana yang sesuai dengan isi route tampil di layar browser, seperti berikut:

C. Membuat dan Menampilkan View:

Pada tahap sebelumnya, kita sudah berhasil menampilkan pesan teks sederhana langsung dari Route. Nah, sekarang saatnya kita membuat tampilan halaman web yang lebih rapi dan menarik. Kita akan memanfaatkan fitur View di Laravel untuk menuliskan kode HTML, lalu menyambungkannya ke Route agar bisa diakses lewat browser.

1. Buat File View Baru:
  • Pada panel sebelah kiri Visual Studio Code (Explorer), cari dan buka folder resources, lalu klik folder views.
  • Klik kanan tepat pada folder views tersebut, lalu pilih New File.
  • Beri nama file tersebut profil.blade.php lalu tekan Enter.
  • (Penting: Akhiran “.blade.php” wajib ditulis karena ini adalah format khusus dari Laravel untuk mengenali file tampilan/View).
2. Isi Konten View profil.blade.php:

Buka file profil.blade.php dan tambahkan markup HTML berikut:

PHP

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Halaman Profil</title>

    <style>

        body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; background-color: #f0f8ff; color: #333; }

        h1 { color: #007bff; }

        p { font-size: 1.1em; }

    </style>

</head>

<body>

    <h1>Selamat Datang di Halaman Profil Saya!</h1>

    <p>Ini adalah contoh sederhana penggunaan View di Laravel.</p>

    <p>Belajar Laravel itu menyenangkan!</p>

</body>

</html>

3. Modifikasi Route untuk Menampilkan View:
  • Kembali bukafile web.php.
  • Buat route baru yang akan merender view profil.blade.php.

PHP

// Route untuk menampilkan view ‘profil’

Route::get(‘/profil-saya’, function () {

    return view(‘profil’); // Nama view tanpa ekstensi .blade.php

});

4. Uji Halaman Profil di Browser:
  • Buka kembali web browser anda.
  • Masukkan URL berikut pada kolom alamat browser: http://127.0.0.1:8000/profil-saya lalu tekan Enter.
  • Jika berhasil, halaman profil dengan judul “Selamat Datang di Halaman Profil Saya!” akan ditampilkan seperti berikut:

D. Melewatkan Data dari Route ke View

Setelah berhasil membuat halaman profil dengan View, sekarang kita akan belajar cara mengirimkan data dari Route ke dalam View. Fitur ini sangat berguna agar halaman website kita tidak kaku, melainkan bisa menampilkan data yang berubah-ubah (dinamis) dari sistem, seperti nama pengguna, email, atau umur. Yuk, ikuti langkah-langkahnya

1. Modifikasi Route untuk Melewatkan Data:
  • Buka kembali file web.php.
  • Buat route baru yang akan melewatkan data ke view. Anda bisa melewatkan sebuah array asosiatif sebagai argument kedua dari fungsi view()
  • Tambahkan kode berikut ini di bagian paling bawah:

PHP

// Route untuk melewatkan data ke view

Route::get(‘/data-pengguna’, function () {

    $namaPengguna = “Alice Wonderland”;

    $emailPengguna = “alice@example.com”;

    $usiaPengguna = 25;

// Melewatkan data ke view menggunakan array asosiatif

return view(‘pengguna’, [

        ‘nama’ => $namaPengguna,

        ‘email’ => $emailPengguna,

        ‘usia’ => $usiaPengguna

    ]);

});

2. Buat File View Baru untuk Menampilkan Data:
  • Buat file baru di resources/views dengan nama pengguna.blade.php.
  • Tambahkan markup HTML berikut untuk menampilkan data yang dilewatkan. Gunakan sintaks Blade {{ $namaVariabel }} untuk menampilkan nilai variabel.

HTML

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device width, initial-scale=1.0″>

<title>Detail Pengguna</title>

<style>

 body { font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif; text-align: center; margin-top: 50px; background-color: #e9f5ee; color: #2e8b57; }

.container { background-color: #ffffff; padding: 30px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: inline-block; }

 h1 { color: #3cb371; }

 p { font-size: 1.2em; margin: 10px 0; }

 strong { color: #008000; }

</style>

</head>

<body>

<div class=”container”>

<h1>Detail Pengguna</h1>

<p>Nama: <strong>{{ $nama }}</strong></p>

      <p>Email: <strong>{{ $email}}</strong></p>

<p>Usia: <strong>{{ $usia  }}</strong>tahun</p>

      <p>Data ini ditampilkan dari backend Laravel!</p>

    </div>

</body>

</html>

Catatan Penting: Perhatikan tanda kurung kurawal ganda seperti {{ $nama }}. Itu adalah fitur ajaib dari Laravel (disebut sintaks Blade). Fungsinya adalah untuk menangkap dan menampilkan data yang sudah kita kirimkan dari file web.php tadi.

3. Uji Route Dengan Data di Browser:
  • Buka kembali web browser anda.
  • Kunjungi URL: http://127.0.0.1:8000/data-pengguna.
  • Anda seharusnya melihat halaman dengan detail pengguna yang telah Anda definisikan di route.

Penutup

Nah, sampai di sini kita sudah mempelajari dasar penggunaan Route dan View di Laravel. Mulai dari membuat route sederhana, menampilkan halaman menggunakan View, hingga mengirimkan data dari Route ke View menggunakan Blade.

Dengan memahami materi ini, diharapkan kamu sudah memiliki gambaran tentang bagaimana Laravel menangani URL dan menampilkan halaman web secara dinamis. Materi ini juga menjadi bekal untuk mempelajari fitur Laravel lainnya yang akan kita bahas pada pertemuan selanjutnya.

Sampai di sini dulu pembelajaran Laravel Part 2. Jangan lupa untuk terus berlatih dan mengikuti materi berikutnya agar pemahaman kamu tentang Laravel semakin berkembang.

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Need Help?
Scroll to Top