Setelah berhasil membuat route, dalam lanjutan tutorial belajar Laravel 10 kali ini akan di bahas tentang View, mulai dari pengertian View, cara penggunaannya serta cara mengakses View dari route.
Pengertian View Laravel
Di bagian awal tutorial, tepatnya di Pengertian MVC (Model – View – Controller), kita sempat bahas konsep dasar MVC. Di sana di jelaskan bahwa View adalah komponen MVC yang menangani tampilan. Di dalam view-lah kode HTML, CSS dan juga JavaScript berada.
Sebelum kita masuk ke praktek pembuatan view, mari lihat kembali diagram alur MVC berikut:
Dalam gambar ini terlihat bahwa view sebenarnya diakses dari controller, namun Laravel mengizinkan kita untuk langsung mengakses view dari route. Jalur Route->View ini biasa dipakai untuk menampilkan halaman statis yang tidak perlu pemrosesan kompleks.
Jika nantinya kita butuh mengolah data yang rumit, maka jalur untuk menampilkan view harus ke controller terlebih dahulu. Mengenai hal ini akan di bahas dalam tutorial khusus mengenai controller. Di sini kita akan fokus mempelajari cara pengaksesan view langsung dari route saja.
View welcome Bawaan Laravel
Laravel sebenarnya sudah memiliki 1 view bawaan yang terlihat saat kita mengakses halaman homepage atau halaman root Laravel. Pemanggilan view ini berasal dari kode berikut di file route/web.php:
Route::get('/', function () {
return view('welcome');
});
Kode ini bisa dibaca: "Jika halaman root '/ ' diakses, tampilkan view bernama welcome".
Di dalam Laravel, nama sebuah view mewakili nama suatu file, artinya harus terdapat file bernama 'welcome' di dalam folder instalasi Laravel. Di manakah letaknya? Laravel menyimpan view di dalam folder resources\views.
Jika anda membuka folder ini, akan menemukan file bernama welcome.blade.php. Inilah view 'welcome' yang dimaksud.
Dalam Laravel, setiap view harus ditulis dengan format berikut:
<nama_file>.blade.php
Sehingga jika kita ingin membuat view 'welcome', nama filenya adalah welcome.blade.php.
Blade adalah sebuah templating engine bawaan Laravel. Bahasan lebih lanjut tentang blade akan kita bahas dalam tutorial setelah ini. Untuk sementara, cukup pahami bahwa semua file view Laravel harus diakhiri dengan .blade.php. Selain itu file view juga harus berada di dalam folder resources\views.
File welcome.blade.php bawaan Laravel terdiri dari kode HTML, CSS, dan beberapa perintah blade.
Untuk membuktikan bahwa inilah file yang memproses tampilan home Laravel, silahkan buka file welcome.blade.php lalu scroll hingga baris 19 tepat pada pembuka tag <body>. Kemudian tambah baris <h1 style="text-align: center; font-size: 36px">Duniailkom</h1> antara tag <body> dan tag <div> seperti contoh berikut:
<body class="antialiased"> <h1 style="text-align: center; font-size: 36px">Duniailkom</h1> <div class="relative flex items-top justify-center...>
Save file welcome.blade.php lalu buka kembali alamat http://localhost:8000 di web browser:
Sekarang terdapat teks "Duniailkom" di bagian paling atas.
Membuat View di Laravel 10
Sampai di sini kita sudah bisa mengambil beberapa kesimpulan tentang cara membuat view:
- Buat route yang akan mengembalikan view.
- Buat file view di folder resources\views dengan format <nama_file>.blade.php
Untuk langkah pertama, cukup tulis perintah return view('nama_view') ke dalam anonymous function di route.
Sebagai contoh, saya ingin ketika mengakses URL http://localhost:8000/mahasiswa akan ditampilkan view mahasiswa. Maka kode route-nya adalah sebagai berikut:
Route::get('/mahasiswa', function () {
return view('mahasiswa');
});
Alamat URL dan nama view tidak harus sama, boleh suka-suka tergantung keperluan. Bisa saja kita membuat URL 'mahasiswa' yang akan menampilkan view 'dosen':
Route::get('/mahasiswa', function () {
return view('dosen');
});
Sebagai bahan praktek, silahkan tambah route mahasiswa pertama ke dalam file route/web.php. Dengan demikian isi file route/web.php adalah sebagai berikut:
<?php
use Illuminate\Support\Facades\Route;
/*
|-------------------------------------------------------------------------
| Web Routes
|-------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::get('/mahasiswa', function () {
return view('mahasiswa');
});
Jika anda memiliki beberapa route lain hasil dari tutorial sebelumnya, itu tidak masalah.
Sekarang silahkan buat file mahasiswa.blade.php di folder resources\views, dan isi dengan kode program berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Laravel di Duniailkom</title>
</head>
<body>
<h1>Daftar Mahasiswa Kampus Ilkoom</h1>
<ol>
<li>Rudi Permana</li>
<li>Sari Citra Lestari</li>
<li>Rina Kumala Sari</li>
<li>James Situmorang</li>
</ol>
</body>
</html>
Setelah itu akses alamat http://127.0.0.1:8000/mahasiswa di web browser:
Sip, kita sudah berhasil membuat view dan mengaksesnya di Laravel 10!
Seperti yang terlihat, file view bisa diisi dengan kode HTML biasa, termasuk juga bisa diisi kode CSS, JavaScript, hingga PHP.
Khusus jika kita ingin mengakses kode PHP, Laravel menyediakan perintah blade untuk mempermudah penulisan kode program. Misalnya jika ingin menampilkan data array, lebih praktis jika menggunakan blade.
Dalam tutorial belajar Laravel selanjutnya, kita akan bahas perintah-perintah blade Laravel.