Single All 18 April 2019 5 min

Tutorial Adonis JS — CRUD

Tutorial sederhana CRUD dengan Adonis JS

Tutorial Adonis JS — CRUD

Tutorial sederhana CRUD dengan Adonis JS

Hello Fellas! Pada kali ini saya ingin berbagi insight mengenai CRUD di Adonis JS. Ohiya, tutorial ini berlanjut dari Tutorial Templating Adonis JSberikut ini, jadi pastikan kamu mengikuti tutorial sebelumnya ya! Kalo agan ngotot lanjut baca kebawah, saya asumsikan agan udah ikutin tutorial tersebut ya. Sebelum kita mulai pastikan agan mengisi data pada .env ya, agan bisa ganti datanya sesuai kebutuhan server agan, kalo pake XAMPP sih pasti DB_USER nya root dan DB_PASSWORDnya kosongin aja.

DB_CONNECTION=mysqlDB_HOST=127.0.0.1DB_PORT=3306DB_USER=homesteadDB_PASSWORD=secretDB_DATABASE=ci3

Sekarang kita akan membuat satu migration baru bernama Todo yang akan menghasilkan table bernama todos. Jadi di Adonis JS ini tiap migration yang dibuat akan menggunakan plural, apaan tuh artinya? artinya adalah setiap kata yang dibuat akan otomatis ditambahkan huruf“s”dibelakang migration tersebut. (bukan es ya, dingin itumah). Coba aja sekarang kita buat model sekaligus migration dari Todo.

adonis make:model Todo --migration

Sekarang kita cek folder database -> migrations dan akan terdapat filetimestamp_todo_schema.jstimestamp adalah timestamp yang terbuat pada saat kita membuat migration.

Sekarang buka file js untuk migration todo dan kita copy paste kode berikut.

'use strict'/**@type{import('@adonisjs/lucid/src/Schema')} */const Schema = use('Schema')class TodoSchema extends Schema {up () {this.create('todos', (table) => {table.increments()table.string('title', 200)table.text('description')table.timestamps()})}down () {this.drop('todos')}}module.exports = TodoSchema

Seperti yang dapat kita lihat, kita hanya menambahkan dua kolom yaitu title dengan tipe varchar dan description dengan tipe text. Nah sekarang jalankan migration kita.

adonis migration:run

Nah pasti error, katanya sih kita belom install library MySQL sekarang kita install dulu librarynya. Apabila agan ganti driver databasenya maka apabila belum di install, adonis akan ngasitau bahkan hingga ke command cara installnya, cek aja error lognya. Baik bet ya adonis, herman saya (heran).

npm install mysql --save

Ulangi lagi

adonis migration:run

Viola berhasil! Sekarang kita akan memanfaatkan fitur seeding dari Adonis. Kita buat dulu seedernya terlebih dahulu.

adonis make:seed Todo

Setelah itu buka file database -> factory.js, saat kita buka kita akan melihat default value di factory.js, agan dapat meng-uncomment code tersebut dari code dibawah ini.

'use strict'/*|--------------------------------------------------------------------------| Factory|--------------------------------------------------------------------------|| Factories are used to define blueprints for database tables or Lucid| models. Later you can use these blueprints to seed your database| with dummy data.|*//**@type{import('@adonisjs/lucid/src/Factory')} */// const Factory = use('Factory')// Factory.blueprint('App/Models/User', (faker) => {//   return {//     username: faker.username()//   }// })

Menjadi code dibawah ini:

const Factory = use('Factory')Factory.blueprint('App/Models/Todo', (faker) => {return {title: faker.sentence(),description: faker.paragraph()}})

Sekarang kita buka TodoSeeder.js dan masukkan code dibawah ini

class TodoSeeder {async run () {await Factory.model('App/Models/Todo').createMany(3)}}

Seperti yang kita lihat diatas, kita akan memanggil model Todo yang telah kita buat, dan melalui Factory kita akan mengisi kolom title dengansentence fakerdan description denganparagraph fakerdengan jumlah 3, agan dapat ganti dengan angka sesuka hati agan, saya sih 3 aja buat contoh. Setelah itu kuy jalankan seeding

adonis seed

Sekarang cek hasil seeding kita.

Halamanindex.edgepada folder resources/views udah ada kan pada tutorial sebelumnya? Maka kita akan pake halaman tersebut, kalo ngga ada ya sok dibuat dulu.

@layout('base')@yield('content')<!-- Main Section --><section class="main-section"><!-- Add Your Content Inside --><div class="container"><!-- Remove This Before You Start --><div class="row"><div class="col-md-12"  style="margin-top:30px;"><a href="{{ route('Todo.create') }}" class="btn btn-md btn-success">Create ToDo</a>@if(flashMessage('notification'))<div class="alert alert-success">{{ flashMessage('notification') }}</div>@endif</div><div class="col-md-12"  style="margin-top:20px;"><table class="table table-hovered"><thead><tr><td>No</td><td>Title</td><td>Description</td><td>Action</td></tr></thead><tbody>@each(todo in todos)<tr><td> {{todo.id }} </td><td> {{todo.title }} </td><td> {{todo.description }} </td><td><a href="{{ route('Todo.edit', { id : todo.id }) }}" class="btn btn-sm btn-primary">Edit</a><a href="{{ route('Todo.delete', { id : todo.id }) }}" class="btn btn-sm btn-danger">Delete</a></td></tr>@endeach</tbody></table></div></div></div><!-- /.content --></section><!-- /.main-section -->@endyield

Selanjutnya kita buatcreate.edge

@layout('base')@yield('content')<!-- Main Section --><section class="main-section"><!-- Add Your Content Inside --><div class="content"><!-- Remove This Before You Start --><div class="row"><div class="col-md-6"><h2>CreateToDo</h2><form action="{{ route('Todo.store') }}" method="post">{{ csrfField() }}<div class="form-group"><label for="title">Title</label><input class="form-control" type="text" name="title" placeholder="Title ofTodo"></div><div class="form-group"><label for="description">Description</label><textarea class="form-control" name="description" cols="30" rows="10"></textarea></div><div class="form-group"><button type="submit" class="btn btn-sm btn-success">Submit</button></div></form><a href="{{ route('Todo.index') }}">Kembali</a></div></div></div><!-- /.content --></section><!-- /.main-section -->@endyield

Lalu buat file untuk halaman edit, beri namaedit.edge

@layout('base')@yield('content')<!-- Main Section --><section class="main-section"><!-- Add Your Content Inside --><div class="content"><!-- Remove This Before You Start --><div class="row"><div class="col-md-6"><h2>CreateToDo</h2><form action="{{ route('Todo.update', { id : todo.id} ) }}" method="post">{{ csrfField() }}<div class="form-group"><label for="title">Title</label><input class="form-control" type="text" name="title" placeholder="Title ofTodo"value="{{todo.title }}"></div><div class="form-group"><label for="description">Description</label><textarea class="form-control" name="description" cols="30" rows="10">{{todo.description }}</textarea></div><div class="form-group"><button type="submit" class="btn btn-sm btn-success">Submit</button></div></form><a href="{{ route('Todo.index') }}">Kembali</a></div></div></div><!-- /.content --></section><!-- /.main-section -->@endyield

Lalu kita buat dulu controller kita bernama Todo

adonis make:controller Todo --type http

Import dulu di paling atas modelnya.

const Todo = use('App/Models/Todo');

Setelah terbuat maka masukkan method dibawah ini didalam class TodoController.

async index({request, response, view}){const todos = await Todo.all();return view.render('index', { todos: todos.rows })}create({request, response, view}){return view.render('create')}async store({request, response, view, session}){const todo = new Todo();todo.title = request.input('title');todo.description = request.input('description');await todo.save();session.flash({ notification: 'Successfully create!' });return response.route('Todo.index')}async edit({request, response, view, params}){const id = params.id;const todo = await Todo.find(id);return view.render('edit', { todo : todo})}async update({request, response, view, params, session}){const id = params.id;const todo = await Todo.find(id);todo.title = request.input('title');todo.description = request.input('description');await todo.save();session.flash({ notification: 'Successfully update!' });response.redirect('/')}async delete({request, response, view, params, session}){const id = params.id;const todo = await Todo.find(id);await todo.delete();session.flash({ notification: 'Successfully delete!' });response.redirect('/')}

Kita menggunakan fungsi asynchronous yaituasyncsehingga kita dapat menggunakanawaitpada saat memanggil select pada Todo. Fungsi dasarawaitini adalah satu hal yang biasa di Node JS karena umumnya Node JS menggunakan asynchronous dan kita harus menggunakan await agar fungsi asynchronous menunggu satu sama lain dan tidak berjalan bersamaan. di Adonis JS, kita menggunakan ORM seperti Laravel. Maka memanggil semua Query ke database menjadi lebih cepat. Sekarang buka folder start ->routes.jsdan tambahkan dua code berikut.

Route.get('/', 'TodoController.index').as('Todo.index')Route.get('/create', 'TodoController.create').as('Todo.create')Route.get('/edit/:id', 'TodoController.edit').as('Todo.edit')Route.get('/delete/:id', 'TodoController.delete').as('Todo.delete')Route.post('/store', 'TodoController.store').as('Todo.store')Route.post('/update/:id', 'TodoController.update').as('Todo.update')

Sekarang kita coba.

adonis serve --dev

Sekarang klik tombol Create ToDo

Sekarang klik submit dan kita dapat melihat hasilnya.

Sekarang geser dikit kekanan dan klik tombol edit (maaf templatenya jelek bikinnya) :(

Klik submit lagi untuk mengubah data.

Sekarang hapus salah satu data. Saya mau hapus dua data aja sih wkwkw.

Berhasil, berhasil, berhasil hore lolisimo, berhasil! teng teng teng teng teng teng~ Oke sekian dulu ya tutorial ngoding Adonis JS bersama Kiddy, semoga makin betah ngeliatin foto ane yang ganteng, ngga deng semoga makin betah main di blog ane, jangan lupa bagikan blog ini ke temen sepermainan, musuh, ncang ncing nyak babe sampe gebetan agan yang lagi belajar coding ya!

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