Tutorial Membuat CRUD di Adonis JS #3 : Input Data ke Database - Halo teman-teman semuanya, diartikel sebelumnya kita sudah membahas cara menampilkan data dari database di Adonis JS.
Di artikel kali ini kita semua akan belajar bagaimana cara memasukkan data atau input data ke dalam database dengan Adonis JS.
Langsung saja kita mulai, sekarang silahkan teman-teman buka file PostController.js dan tambahkan 2 fungsi berikut ini di dalam class PostController :
create({ request, response, view }) {
return view.render('posts.create')
}
async store({ request, response, view, session }) {
const post = new Post()
post.title = request.input('title')
post.content = request.input('content')
await post.save()
session.flash({ notification: 'Data Berhasil Disimpan!' })
return response.route('posts.index')
}
Jika kita perhatikan, kita sudah menambahkan 2 fungsi baru dengan nama create dan store, fungsi create kita gunakan untuk merender sebuah view. Dan fungsi store kita gunakan untuk mentimpan data hasil request dari form.
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 })
}
create({ request, response, view }) {
return view.render('posts.create')
}
async store({ request, response, view, session }) {
const post = new Post()
post.title = request.input('title')
post.content = request.input('content')
await post.save()
session.flash({ notification: 'Data Berhasil Disimpan!' })
return response.route('posts.index')
}
}
module.exports = PostController
Setelah kita berhasil membuat controller, sekarang kita lanjutkan membuat sebuah view baru untuk menampilkan formnya.
Silahkan jalankan perintah dibawah ini untuk membuat view baru :
adonis make:view posts/create
Perintah diatas, akan membuat sebuah file view baru dengan nama create.edge di dalam folder resources/views/posts.
Silahkan buka file create.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">
<title>Data Posts</title>
</head>
<body>
<div class="container" style="margin-top: 80px">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
TAMBAH POSTS
</div>
<div class="card-body">
<form action="{{ route('posts.store') }}" method="POST">
{{ csrfField() }}
<div class="form-group">
<label>TITLE</label>
<input class="form-control" type="text" name="title" placeholder="Masukkan Judul Post">
</div>
<div class="form-group">
<label>CONTENT</label>
<textarea class="form-control" name="content"rows="5" placeholder="Masukkan Content Post"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-md btn-success">SIMPAN</button>
</div>
</form>
</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>
</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/create', 'PostController.create').as('posts.create’)
Route.post('/posts/store', 'PostController.store').as('posts.store')
Dan sekarang teman-teman bisa membukanya dengan mengetikkan di browser http://localhost:3333/posts/create jika berhasil, kurang lebih tampilannya seperti berikut ini :
Dan silahkan teman-teman mencoba menyimpan data, jika berhasil teman-teman akan melihat kurang lebih tampilannya seperti berikut ini :
Sampai disini pembahasan tentang memasukkan data atau input data ke dalam database dengan Adonis JS, di artikel selanjutnya kita semua akan belajar bagaimana cara edit dan update data ke dalam database dengan Adonis JS.
Terima Kasih