Pada awal saya menulis artikel mengenai basic authentication, saya sempat menyinggung tentang penggunaan view dalam menampilkan sebuah halaman. Sempat terpikirkan bahwa saya ingin langsung membuat artikel mengenai CRUD (Create, Read, Update, Delete), hanya saja karena pembahasan mengenai view pada artikel tersebut tidak spesifik dan saya berasumsi bahwa pembaca artikel tersebut belum tentu mengenal sistem MVC maka saya putuskan untuk membuat materi ini.
Pengecualian
Artikel ini ditujukkan kepada anda yang baru pertama kali terjun dalam dunia backend developer atau fullstack developer atau untuk anda yang belum mengenal konsep MVC (Model, View, Controller) atau belum pernah menggunakan laravel.
Pada template engine pada adonis dengan nama edge ini memiliki kesamaan dengan template engine milik laravel yang bernama blade, jika anda menggunakan laravel anda dapat menutup artikel ini.
Mengenal Konsep View
Pada konsep MVC, view merupakan sebuah kumpulan atau jenis file yang memuat tag HTML untuk membuat sebuah halaman maupun user interface pada sebuah web. Meskipun view hanya berupa kumpulan tag HTML, anda dapat menambahkan beberapa proses logic sederhana seperti perulangan atau perhitungan namun sangat tidak direkomendasikan untuk menempatkan proses logic pada view karena kegunaannya sebagai template engine.
View biasanya selalu dipanggil di akhir baris dari sebuah method pada controller, karena setiap data yang akan dilempar ke view harus lengkap dan informasi yang diterima view biasanya lebih mengarah ke sebuah hasil dari sebuah eksekusi method pada controller.
Untuk informasi lebih lanjut mengenai konsep MVC, anda dapat melihat artikel dari cloudboost pada link medium berikut.
Elemen Pada View
Meskipun view atau template engine bertugas sebagai penampil halaman agar proses logic dan syntax kerangka user interface terpisah, view memiliki beberapa elemen yang bisa kita gunakan untuk mempermudah pengorganisir tiap - tiap komponen pada user interface dari sebuah web.
Layouts
Layout merupakan elemen yang biasa digunakan pada komponen - komponen yang bersifat global atau membuat halaman berdasarkan jenisnya, elemen ini dapat membantu kalian untuk mempercepat proses pengembangan tampilan web sebagai contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Halaman Akun</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="{{ route('/') }}">
QA Adonis
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Beranda
</a>
<a class="navbar-item">
Daftar Anggota
</a>
</div>
@loggedIn
<div class="navbar-end">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Hi, {{ auth.user.username }}
</a>
<div class="navbar-dropdown is-right">
<a class="navbar-item" href="{{ route('auth.account') }}">
Pengaturan
</a>
<a class="navbar-item" onclick="logout()">
Logout
</a>
</div>
</div>
</div>
<form action="{{ route('auth.logout') }}" method="post" id="formLogout">
{{ csrfField() }}
</form>
@else
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light" href="{{ route('auth.loginForm') }}">
Log in
</a>
</div>
</div>
</div>
@endloggedIn
</div>
</div>
</nav>
<section class="hero is-medium is-primary is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">
Pengaturan Akun
</h1>
<h2 class="subtitle">
{{ auth.user.username }}
</h2>
</div>
</div>
</section>
<div class="container">
<div class="box">
<form action="#" method="post">
{{ csrfField() }}
<div class="field">
<label for="username" class="label">Username :</label>
<div class="control">
<input type="text" name="username" placeholder="Masukkan Username" class="input" value="{{ auth.user.username }}" />
</div>
</div>
<button type="submit" class="button">Perbarui</button>
</form>
</div>
</div>
{{ script('common') }}
</body>
</html>
Tanpa menggunakan layout kita harus membuat beberapa komponen seperti menu, footer, header maupun sidebar secara berulang - ulang pada setiap halaman yang ingin ditampilkan. Dengan cara tersebut pengembangan website mungkin akan susah dan tidak efektif, apalagi jika kita ingin mengubah daftar link pada menu yang kita buat pada sebuah halaman.
Dengan menggunakan layout kita dapat mempercepat pengembangan aplikasi, kita hanya perlu memanggil komponen apa saja yang terdapat pada layout untuk dirender atau ditampilkan. Penggunaan layout jika membuat kode terlihat rapi, adapun hasilnya dapat anda lihat pada contoh berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
@!section('title')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
</head>
<body>
@include('components.menu')
@!section('hero')
<div class="container">
@!section('content')
</div>
{{ script('common') }}
</body>
</html>
Components
Setelah anda memahami konsep layout, penggunaan komponen juga penting pada pembuatan layout. Selain meminimalkan baris kode yang di tulis, penggunaan komponen juga dapat dilakukan untuk dipergunakan ulang pada dua atau lebih layout yang berbeda.
Pada contoh kali ini saya menamakan layout yang dibuat dengan default.edge, saya mengansumsikan bahwa ini adalah layout bawaan dari web yang akan saya buat.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
@!section('title')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
</head>
<body>
@include('components.menu')
@!section('hero')
<div class="container">
@!section('content')
</div>
{{ script('common') }}
</body>
</html>
Saya memanggil sebuah komponen dengan tag @include untuk memanggil components.menu yang dapat diterjemahkan memanggil komponen pada alamat direktori resources/views/components/menu.edge.
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="{{ route('/') }}">
QA Adonis
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Beranda
</a>
<a class="navbar-item">
Daftar Anggota
</a>
</div>
@loggedIn
<div class="navbar-end">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Hi, {{ auth.user.username }}
</a>
<div class="navbar-dropdown is-right">
<a class="navbar-item" href="{{ route('auth.account') }}">
Pengaturan
</a>
<a class="navbar-item" onclick="logout()">
Logout
</a>
</div>
</div>
</div>
<form action="{{ route('auth.logout') }}" method="post" id="formLogout">
{{ csrfField() }}
</form>
@else
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light" href="{{ route('auth.loginForm') }}">
Log in
</a>
</div>
</div>
</div>
@endloggedIn
</div>
</div>
</nav>
Page
Sesuai dengan namanya page merupakan halaman yang digunakan untuk menampilkan hasil dari proses yang terjadi pada controller atau route, pada dasarnya anda dapat membuat sebuah halaman tanpa bantuan layout. Namun karena cara tersebut kurang efektif, anda dapat memanfaatkan layout tersebut untuk membuat satu halaman utuh.
Menggunakan Layout
Untuk menggunakan sebuah layout anda hanya perlu menggunakan tag @layout pada awal halaman, ini berfungsi untuk mengambil layout yang kita buat untuk diterapkan pada halaman ini. Pada tahap ini saya mencoba untuk menggunakan layout pada resources/views/layouts/default.edge pada halaman account.edge
@layout('layouts.default')
Penggunaan Section
Karena anda menggunakan layout, anda dapat menggunakan tag section untuk menempatkan sebuah elemen halaman pada layout yang telah dibuat, section hanya membutuhkan satu parameter sebagai identifikasi dimana section ini akan diletakkan. Sebagai contoh saya akan menggunakan layout default.edge untuk meletakkan section hero dan content.
@section('hero')
<section class="hero is-medium is-primary is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">
Pengaturan Akun
</h1>
<h2 class="subtitle">
{{ auth.user.username }}
</h2>
</div>
</div>
</section>
@endsection
@section('content')
<div class="box">
<form action="#" method="post">
{{ csrfField() }}
<div class="field">
<label for="username" class="label">Username :</label>
<div class="control">
<input type="text" name="username" placeholder="Masukkan Username" class="input" value="{{ auth.user.username }}" />
</div>
</div>
<button type="submit" class="button">Perbarui</button>
</form>
</div>
@endsection
Pada halaman setiap @section harus ditutup dengan @endsection untuk mendadakan akhir dari sebuah section yang dibuat, sehingga anda dapat membuat section lain pada layout yang telah anda siapkan,
Referensi
Pada akhir artikel anda dapat membaca referensi mengenai views pada halaman dokumentasi adonisjs, namun jika anda bingung anda dapat melihat contoh implementasinya pada repositori github yang telah saya buat pada catatan perubahan atau commit Preparation : Pengenalan Edge (f5479dd).
Cover Icon : Freepik