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 JS berikut 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=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_USER=homestead
DB_PASSWORD=secret
DB_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 file timestamp_todo_schema.js timestamp 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 dengan sentence faker dan description dengan paragraph faker dengan 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.

Hasil seeding adonis js.

Halaman index.edge pada 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 buat create.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>Create ToDo</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 of Todo">
                    </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 nama edit.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>Create ToDo</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 of Todo"
                        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 yaitu async sehingga kita dapat menggunakan await pada saat memanggil select pada Todo. Fungsi dasar await ini 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.js dan 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

Index page Adonis JS.

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!