Tutorial AdonisJS — Templating
Hella fellas! Pada tutorial kali ini gue akan berbagi insight mengenai cara membuat templating pada AdonisJS. Seperti yang kita tau ya, Templating adalah teknik untuk membuat sebuah view menjadi dinamis, sehingga kita hanya perlu mengubah isi konten dengan Dasar template yang sama.
Tutorial ini berlanjut dari tutorial AdonisJS pada artikel sebelumnya. Apabila agan belum coba, silahkan dibaca dari sana terlebih dahulu. Setelah kita belajar membuat controller dan membuat routes, kita akan coba kembali dengan hal yang sama namun menggunakan template.
Pertama, silahkan download templatenya terlebih dahulu di github saya.
Kedua, buat dulu folder bernama assets didalam folder public di project Adonis JS kalian. Setelah itu ekstrak atau clone isi dari github saya. Pindahkan seluruhnya kedalam folder assets yang telah dibuat.
Ketiga, buat folder crud didalam folder views (folder views ada didalam resources), lalu buat tiga file. Pertama base.edge, kedua index.edge, ketiga page2.edge.
Keempat, masukkan code dari base.edge
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- For Google -->
<link rel="author" href="https://plus.google.com/+Scoopthemes">
<link rel="publisher" href="https://plus.google.com/+Scoopthemes">
<!-- Canonical -->
<link rel="canonical" href="">
<title>Latihan Adonis JS Bareng Kiddy</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- font Awesome CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!-- Main Styles CSS -->
<link href="{{ assetsUrl('assets/css/main.css') }}" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<aside id="sideBar">
<ul class="main-nav">
<!-- Your Logo Or Site Name -->
<li class="nav-brand">
<a href="/">Home</a>
</li>
<li>
<a href="#">- Create Todo</a>
</li>
<li>
<a href="#">- List Todo</a>
</li>
</ul>
</aside>
@!section('content')
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- Custom JavaScript -->
<script src="{{ assetsUrl('assets/js/custom.js') }}"></script>
</body>
</html>Seperti yang kita lihat, cara memanggil assets disini hampir mirip dengan Laravel, bedanya laravel cukup memanggil dengan asset(‘tempat file public’) sedangkan Adonis JS cukup dengan assetsUrl(‘tempat file di public’).
Selain itu cara memanggil yield disini bisa dibilang terbaik dengan Laravel. Pada Laravel, kita menuliskan penanda konten dengan yield, sedangkan dengan AdonisJS kita menuliskan penanda konten dengan section.
Selanjutnya, copy paste dua file dibawah.
index.edge
@layout('crud.base')
@yield('content')
<!-- Main Section -->
<section class="main-section">
<!-- Add Your Content Inside -->
<div class="content">
<!-- Remove This Before You Start -->
<h1>Belajar Bareng Kiddy - Tutorial Adonis JS</h1>
<p>Apa saja yang akan kamu pelajari ?</p>
<h2>* Templating Adonis JS</h2>
<h2>* CRUD dengan Adonis JS</h2>
<h2>* Upload Image dengan Adonis JS</h2>
<h2>* Login & Register dengan Auth & Session built in Adonis JS</h2>
<h2>* Kirim E-mail dengan Adonis JS</h2>
<h2>Klik <a href="{{ route('Todo.page2') }}">Disini</a></h2>
</div>
<!-- /.content -->
</section>
<!-- /.main-section -->
@endyieldpage2.edge
@layout('crud.base')
@yield('content')
<!-- Main Section -->
<section class="main-section">
<!-- Add Your Content Inside -->
<div class="content">
<!-- Remove This Before You Start -->
<h2>Halaman Kedua</h2>
<a href="{{ route('Todo.index') }}">Kembali</a>
</div>
<!-- /.content -->
</section>
<!-- /.main-section -->
@endyieldKita dapat melihatnya kembali, disini terdapat perbedaan yang signifikan antara Laravel dengan AdonisJS. Apabila di Laravel kita menggunakan extends untuk fungsi memanggil template, maka di AdonisJS kita menggunakan fungsi layout. Pada Laravel kita menggunakan section untuk mengisi konten dari base template, sedangkan di Adonis JS kita malah menggunakan yield. Cukup unik ya? 🤣
Setelah kita buat viewnya, maka jalankan fungsi
adonis make:controller TodoLalu silahkan buka app/Controllers/TodoController.js dan copy paste code dibawah ini.
'use strict'
class TodoController {
index({request, response, view}){
return view.render('crud.index')
}
page2({request, response, view}){
return view.render('crud.page2')
}
}
module.exports = TodoControllerSekarang buka folder start/routes.js dan masukkan routes dibawah ini.
Route.get('/', 'TodoController.index').as('Todo.index')
Route.get('/kedua', 'TodoController.page2').as('Todo.page2')Sekarang silahkan di gas projeknya dengan cara
adonis serve
Semoga bermanfaat dan happy coding!
Kalo mau mampir berbagi bacot dengan saya bisa ngobrol disini.
