Tutorial Membuat CRUD di Adonis JS #2 : Menampilkan Data Dari Database - Halo teman-teman semuanya, diartikel sebelumnya kita sudah membahas cara installasi dan konfigurasi database di Adonis JS.
Di artikel kali ini kita semua akan belajar bagaimana cara menampilkan data dari database dengan Adonis JS.
Langsung saja kita mulai, pertama kita akan membuat sebuah controller baru terlebih dahulu, silahkan jalankan perintah dibawah ini :
adonis make:controller Post --type http
Perintah diatas kita gunakan untuk membuat sebuah controllers baru dengan menggunakan type http, yang berada di dalam folder app/controllers/Http/
Sekarang silahkan teman-teman buka file PostController.js dan tambahkan 1 fungsi berikut ini di dalam class PostController :
async index({ request, response, view }) {
const posts = await Post.all()
return view.render('posts.index', { posts: posts.rows })
}
Jika kita perhatikan, kita sudah menambahkan 1 fungsi baru dengan nama index , fungsi index ini kita gunakan untuk merender sebuah view dan sekaligus membawa sebuah data posts.
Silahkan tambahkan juga kode dibawah ini ke dalam file PostController.jst dan letakkan sebelum Class PostController
const Post = use('App/Models/Post')
kode diatas kita gunakan untuk mengimport Model Post kita biar bisa kita gunakan di dalam PostController. Jika file PostsController.js ditulis dengan lengkap, kurang lebih seperti berikut ini :
'use strict'
const Post = use('App/Models/Post')
class PostController {
async index({ request, response, view }) {
const posts = await Post.all()
return view.render('posts.index', { posts: posts.rows })
}
}
module.exports = PostController
Selanjutnya kita akan membuat sebuah view baru dengan menjalankan perintah dibawah ini :
adonis make:view posts/index
Perintah diatas, akan membuat sebuah file view baru dengan nama index.edge beserta folder baru bernama posts di dalam folder resources/views.
Silahkan buka file index.edge dan masukkan kode dibawah ini :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<title>Data Posts</title>
</head>
<body>
<div class="container" style="margin-top: 80px">
<div class="row">
<div class="col-md-12">
@if(flashMessage('notification'))
<div class="alert alert-success">{{ flashMessage('notification') }}</div>
@endif
<div class="card">
<div class="card-header">
DATA POSTS
</div>
<div class="card-body">
<a href="{{ route('posts.create') }}" class="btn btn-success btn-md" style="margin-bottom: 10px">TAMBAH POST</a>
<table class="table table-hovered table-striped table-bordered" id="myTable">
<thead>
<tr>
<td>TITLE</td>
<td>CONTENT</td>
<td>AKSI</td>
</tr>
</thead>
<tbody>
@each(post in posts)
<tr>
<td> {{ post.title }} </td>
<td> {{ post.content }} </td>
<td class="text-center">
<a href="{{ route('posts.edit', { id : post.id }) }}" class="btn btn-sm btn-primary">EDIT</a>
<a href="{{ route('posts.delete', { id : post.id }) }}" class="btn btn-sm btn-danger">HAPUS</a>
</td>
</tr>
@endeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
</body>
</html>
Terakhir, sekarang kita akan menambahkan route baru, silahkan buka file routes.js di dalam folder start dan tambahkan kode berikut ini :
Route.get('/posts', 'PostController.index').as('posts.index')
Sekarang teman-teman bisa mencoba menjalankan projectnya, jika belum menjalankan server silahkan jalankan perintah dibawah ini :
adonis serve --dev
Dan teman-teman bisa membukanya dengan mengetikkan di browser http://localhost:3333/posts jika berhasil, kurang lebih tampilannya seperti berikut ini :
Sampai disini pembahasan tentang menampilkan data dari database dengan Adonis JS, di artikel selanjutnya kita semua akan belajar bagaimana cara memasukkan data atau input data dengan Adonis JS.
Terima Kasih