Laravel Routing Basic

Laravel merupakan sebuah framework web development yang memanfaatkan design pattern dengan menggunakan MVC yang merupakan singkatan dari Model View Controller. Dalam hal ini Laravel akan menyediakan fitur Routing atau pengaturan rute apakah sebuah permintaan dari pengguna melalui pengetikan halaman akan diteruskan ke View atau Controller tertentu. Modul ini akan membahas mengenai MVC pada Laravel serta juga membahas mengenai penggunaan Routing sederhana di Laravel.

MVC di Laravel

Seperti disebutkan sebelumnya, Laravel menggunakan MVC sebagai design pattern dari frameworknya. Dalam hal ini akan tersedia Model, View, dan Controller. Model akan berisi dengan struktur data termasuk dengan database yang dipergunakan dalam project. View akan berfungsi untuk mengatur tampilan yang akan diperlihatkan di layar pengguna pada saat sebuah halaman web diakses. Controller sendiri akan berisi logicatau bagian program yang mengatur akses ke database ataupun berbagai fungsi pemrograman lainnya.

Gambar di bawah (sumber https://selftaughtcoders.com/from-idea-to-launch/lesson-17/laravel-5-mvc-application-in-10-minutes/) menggambarkan bagaimana alur kerja MVC pada Laravel. Pada saat pengguna mengetikkan alamat web atau url, maka Routes akan melakukan proses pengaturan melalui Controller. Apabila dibutuhkan akses ke database, maka Controller akan terlebih dahulu berkomunikasi melalui model untuk mengakses database. Sebaliknya apabila tidak dibutuhkan atau setelah proses komunikasi dengan model selesai, maka hasilnya akan ditampilkan pada View.

MVC

MVC – Model View Controller

Latihan Membuat Project dengan Laravel Routing

Pada latihan berikut akan dibuat sebuah project Laravel untuk membuat sebuah situs web sederhana dengan memanfaatkan fungsi Routing dari Laravel.

Membuat Project Laravel Baru

Langkah pertama adalah membuat sebuah project baru Laravel. Ketikkan perintah berikut di Terminal atau Command Prompt:

Copy to Clipboard

atau dengan perintah:

Copy to Clipboard

Apabila berhasil, pada bagian akhir akan tampil di layar sebagai berikut:

Laravel New Project

Laravel New Project

Check file .env

Langkah berikut adalah memeriksa file .env yang berisi konfigurasi dari project yang dibuat. File .env berisi beberapa setting yang perlu diperhatikan aplikasi dapat dijalankan. Pada umumnya file ini tidak perlu dimodifikasi pada Laravel versi terbaru. Kalau file .env belum tersedia, silahkan copy dan rename .env.example

Berikut ini adalah perintah untuk membuat application key:

Copy to Clipboard
File .env

File .env

Jalankan Server XAMPP

Sebelum proses pembuatan project, maka perlu dipastikan apakah web server telah berjalan dengan semestinya. Untuk database server dapat dijalankan secara optional karena belum dibutuhkan untuk saat ini.

Pastikan XAMPP Web Server dan Database Server telah dijalankan (Run)

Pastikan XAMPP Web Server dan Database Server telah dijalankan (Run)

Test apakah website Laravel berjalan

Langkah berikutnya adalah melakukan pengujian apakah server Laravel berjalan sesuai dengan kebutuhan. Folder yang merupakan root folder untuk situs web Laravel adalah folder public yang ada di dalam instalasi.

Tampilan Web apabila dijalankan

Tampilan Web apabila dijalankan

Menggunakan Virtual Host

Agar alamat yang dipergunakan dapat diakses dengan mudah dengan alamat yang lebih singkat dan mudah diingat, perlu dilakukan konfigurasi Virtual Host.

  • Edit file httpd-vhosts.conf dengan text editor
Lokasi Virtual Host pada Windows dengan menggunakan XAMPP

Lokasi Virtual Host pada Windows dengan menggunakan XAMPP

  • Pastikan baris berikut di uncomment:
Copy to Clipboard

Tambahkan baris berikut:

Copy to Clipboard

Editfile hosts pada System (Win). Gunakan Windows > Search > Run, kemudian ketikkan alamat seperti tertera di gambar berikut:

Hosts File

Buka file tersebut dengan text editor Notepad dan pastikan untuk open sebagai administrator agar diperkenankan untuk melakukan editing pada file tersebut.

Isi File Hosts

Isi File Hosts

Tambahkan baris berikut di file hosts:

Copy to Clipboard

Untuk sistem operasi Mac OSX proses mengedit file hosts dapat dilakukan sebagai berikut:

Open Terminal dan ketik baris berikut:

Copy to Clipboard

Tambahkan baris berikut:

Copy to Clipboard

Restart Apache and access http://portfolio.test melalui browser.

Source Code

Setelah proses instalasi project selesai, dapat dilihat beberapa folder penting dari ratusan folder dan ribuan file yang dihasilkan.

Model

Lokasi model ada di /app folder. File/app/User.php merupakan salah satu contoh model yang sudah terdapat dalam instalasi project Laravel

Laravel Model

Laravel Model

Controller

Controllers terletak di dalam folder /app/Http/Controllers. Pada saat project dibuat, sudah tersedia file Controller.phpdan folder Authyang berisi beberapa file controller untuk autentikasi pengguna.

Laravel Controller

Laravel Controller

View

View terletak di folder /resources/views. Pada saat project Laravel degenerate, terdapat sebuah file view yang bernama welcome.blade.php. Laravel menggunakan Blade template engine dari Laravel, setiap penamaan file view mengunakan .blade.php.

Laravel View

Laravel View

Routes

Routes berfungsi untuk mengatur lalu lintas file berdasarkan request dari pengguna. Routes terletak di dalam folder /routes.
Routes utama Laravel terletak dalam file web.php

Laravel Route

Laravel Route

Folder Public

Folder /public berisi semua file yang akan dikirimkan ke komputer pengguna apabila ada request  ke website yang dibuat dengan Laravel.

Public Folder

Public Folder

Skenario Basic Routing

Berikut adalah langkah membuat sebuah website portfolio sederhana yang terdiri dari halaman utama dan 3 halaman utama lain:

    • home
    • about
    • education
    • projects

Routes Default

Berikut adalah contoh Routes yang dibuat:

Copy to Clipboard

Penjelasan:

  • get pada contoh merupakan tipe request
  • ‘/’merupakan url, dimana tanda slash mengacu ke root folder
  • welcomemengarah ke welcome.blade.php

Silahkan mencoba mengetikkan potongan program berikut di /routes/web.php

Copy to Clipboard

Silahkan mencoba mengubah potongan program di /routes/web.php menjadi:

Copy to Clipboard

View dan Route

Silahkan kerjakan beberapa langkah berikut untuk membuat View:

  • Karena pada umumnya akan banyak sekali file view, maka sebaiknya dibuat folderuntuk view berdasarkan pengelompokkan
  • Contohnya untuk view pada masing-masing halaman web (page), dibuat folder /resources/views/pages
  • Untuk view pada halaman about, buat file blade.php pada folder tersebut, dan isi dengan sebarang teks untuk ditampilkan

Silahkan melakukan beberapa langkah berikut untuk mengatur route halaman about

  • Tambahkan di /routes/web.php
Copy to Clipboard
  • Coba akses halaman /about

Silahkan mencoba menambahkan routes dan halaman blade untuk kedua halaman web lainnya:

  • education
  • project

Available Router Methods

Berikut adalah beberapa format Routes yang disediakan Laravel:

Format Route Laravel

Format Route Laravel

Berikut adalah contoh Route + Data:

Copy to Clipboard

Membuat Controller

Pada real world project, view tidak dihasilkan dari Route, namun dari Controller.

Buatlah controller dengan menggunakan perintah artisan, pastikan folder aktif berada di dalam folder project:

Copy to Clipboard

Sebagai best practice, gunakan nama dengan diawali huruf besar dan dengan huruf besar sebagai pemisah kata. Contoh di atas menggunakan PagesController.

Tampilan hasil membuat Controller

Tampilan hasil membuat Controller

Isi file /app/Http/Controllers/PagesController.php yang dihasilkan adalah sebagai berikut:

Isi File Controller yang dibuat melalui Artisan

Isi File Controller yang dibuat melalui Artisan

Silahkan mencoba membuat method dalam PagesController.

Contoh Method index dalam Controller

Contoh Method index dalam Controller

Berikut adalah pembuatan method untuk menampilkan hasil di view melalui Controller.

Menampilkan View melalui Controller

Menampilkan View melalui Controller

Latihan

Silahkan mengerjakan routing untuk setiap fungsi dari setiap halaman website portfolio sederhana:

  • home
  • about
  • education
  • projects

Written by: SEW 20190922