en"> Halaman Akun

Pengaturan Akun

{{ script('common') }} ```````````` 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 : ```````````` @!section('title') @include('components.menu') @!section('hero')

@!section('content')

{{ script('common') }} ```````````` ### 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. ```````````` @!section('title') @include('components.menu') @!section('hero')

@!section('content')

{{ script('common') }} ```````````` Saya memanggil sebuah komponen dengan tag ````@include```` untuk memanggil ````components.menu```` yang dapat diterjemahkan memanggil komponen pada alamat direktori ````resources/views/components/menu.edge````. ```````````` ```````````` ### 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')

Pengaturan Akun

@endsection @section('content')

@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](https://adonisjs.com/docs/4.1/views), 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\)](https://github.com/ambrizals/qa_adonis/tree/f5479dd263ed498e58816072da5e54b18612eace). Cover Icon : [Freepik](https://www.freepik.com/free-photos-vectors/design)

Pengaturan Akun

{{ auth.user.username }}

Pengaturan Akun

{{ auth.user.username }}

AdonisJS: Pengenalan Template Engine Edge