Back to backend
Single All 27 Januari 2019 5 min

Tutorial AdonisJS — Templating

Tutorial Adonis JS — Templating dalam Bahasa Indonesia

Tutorial AdonisJS — Templating

Tutorial Adonis JS — Templating dalam Bahasa Indonesia

Image 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 artikelsebelumnya. 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 digithub saya. Kedua, buat dulu folder bernamaassetsdidalam folder public di project Adonis JS kalian. Setelah itu ekstrak atau clone isi dari github saya. Pindahkan seluruhnya kedalam folderassetsyang telah dibuat.

Image Ketiga, buat folder crud didalam folderviews(folder views ada didalamresources), lalu buat tiga file. Pertama base.edge, kedua index.edge, ketiga page2.edge.

Image 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 denganyield,sedangkan dengan AdonisJS kita menuliskan penanda konten dengansection. 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 -->@endyield

page2.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 -->@endyield

Kita dapat melihatnya kembali, disini terdapat perbedaan yang signifikan antara Laravel dengan AdonisJS. Apabila di Laravel kita menggunakanextendsuntuk fungsi memanggil template, maka di AdonisJS kita menggunakan fungsilayout. Pada Laravel kita menggunakansectionuntuk mengisi konten dari base template, sedangkan di Adonis JS kita malah menggunakanyield. Cukup unik ya? 🤣 Setelah kita buat viewnya, maka jalankan fungsi

adonis make:controller Todo

Lalu 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 = TodoController

Sekarang 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

Image Semoga bermanfaat dan happy coding! Kalo mau mampir berbagi bacot dengan saya bisa ngobrol disini. Kiddy.xyz (@kiddy_xyz) | TwitterThe latest Tweets from Kiddy.xyz (@kiddy_xyz). Punya mimpi suatu hari ingin terkenal karena punya karya seperti Mark…twitter.com

Artikel ini merupakan konten legacy dari blog Medium (Tahun 2019). Beberapa konsep atau sintaks mungkin sudah mengalami perubahan pada versi terbaru.