Tutorial Membuat CRUD di Adonis JS #4 : Edit dan Update Data ke Database - Halo teman-teman semuanya, di artikel sebelumnya kita sudah membahas bagaimana cara memasukkan data atau input data ke database dengan Adonis JS.
Di artikel kali ini kita semua akan belajar bagaimana cara membuat edit dan update data 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 :
async edit({ request, response, view, params }) {
const id = params.id
const post = await Post.find(id)
return view.render('posts.edit', { post: post })
}
async update({ request, response, view, params, session }) {
const id = params.id
const post = await Post.find(id)
post.title = request.input('title')
post.content = request.input('content')
await post.save()
session.flash({ notification: 'Data Berhasil Diupdate!' })
return response.route('posts.index')
}
Jika kita perhatikan, kita sudah menambahkan 2 fungsi baru dengan nama edit dan update, fungsi edit kita gunakan untuk merender sebuah view dengan membawa sebuah data. Dan fungsi update kita gunakan untuk mengupdate data ke dalam database.
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')
}
async edit({ request, response, view, params }) {
const id = params.id
const post = await Post.find(id)
return view.render('posts.edit', { post: post })
}
async update({ request, response, view, params, session }) {
const id = params.id
const post = await Post.find(id)
post.title = request.input('title')
post.content = request.input('content')
await post.save()
session.flash({ notification: 'Data Berhasil Diupdate!' })
return response.route('posts.index')
}
}
module.exports = PostController
Setelah kita berhasil membuat 2 fungsi baru di controller, sekarang kita lanjutkan membuat sebuah view baru untuk menampilkan formn editnya.
Silahkan jalankan perintah dibawah ini untuk membuat view baru :
adonis make:view posts/edit
Perintah diatas, akan membuat sebuah file view baru dengan nama edit.edge di dalam folder resources/views/posts.
Silahkan buka file edit.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">
EDIT POSTS
</div>
<div class="card-body">
<form action="{{ route('posts.update', { id: post.id }) }}" method="POST">
{{ csrfField() }}
<div class="form-group">
<label>TITLE</label>
<input class="form-control" type="text" name="title" value="{{ post.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">{{ post.content }}</textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-md btn-success">UPDATE</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/edit/:id', 'PostController.edit').as(‘posts.edit')
Route.post('/posts/update/:id', 'PostController.update').as('posts.update')
Dan sekarang teman-teman bisa membuka project dan silahkan edit salah satu data, jika berhasil kurang lebih tampilannya seperti berikut ini :
Dan silahkan teman-teman mencoba mengupdate data, jika berhasil teman-teman akan melihat kurang lebih tampilannya seperti berikut ini :
Sampai disini pembahasan tentang edit dan update data ke dalam database dengan Adonis JS, di artikel selanjutnya kita semua akan belajar bagaimana cara delete data ke dalam database dengan Adonis JS.
Terima Kasih