Tutorial Membuat CRUD di Adonis JS #1 : Installasi & Persiapan


Fika Ridaul Maulayya
Software Engineer | Content Creator | Founder & Author di SantriKoding.com

Tutorial Membuat CRUD di Adonis JS #1 : Installasi & Persiapan - Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara membuat sebuah CRUD di Adonis JS.

Apa itu Adonis JS ? Adonis JS merupakan salah satu Web Framework dari Node JS, Adonis JS sendiri menggunakan konsep / pola MVC yaitu memisahkan beberapa kode berdasarkan fungsinya masing-masing.

Adonis JS meruapkan Web Framework yang dikembangkan dengan bahasa pemrogramman JavaScript dan memiliki struktur, gaya dan juga bahasa yang mirip dengan Framework Laravel.

Cara Install Adonis JS

Sebelum menginstall atau memulai project dengan Adonis JS, kita diharuskan sudah menginstall Node JS di laptop atau komputer.

Untuk teman-teman yang belum menginstall Node JS bisa menginstallnya. Silahkan bisa melalui https://nodejs.org/en/ dan sesuaikan dengan operating system komputer teman-teman.

Untuk mengetahui apakah Node JS sudah terinstall dikomputer kita, kita bisa jalankan perintah dibawah ini di terminal atai CMD.

node -v

Dan jika kita lihat dari situs resmi Adonis JS, ada beberapa persyaratn yang harus kita penuhi sebelum membuat project baru, diantaranya :

  • Node.js >= 8.0.0
  • npm >= 3.0.0
  • git

Setelah semua persyaratan terpenuhi, sekarang kita akan menginstall yang namanya Adonis CLI.

Install Adonis CLI

Apa itu Adonis JS CLI ? Adonis JS CLI merupakan command line tools yang akan membantu kita dalam pengembangan aplikasi dengan Adonis JS. Seperti halnya membuat project baru, membuat migrasi, controllers, models, views dan yang lainnya.

Silahkan jalankan perintah dibawah ini untuk menginstall Adonis JS CLI secara global di komputer kita :

npm i -g @adonisjs/cli

Setelah installasi berhasil dan selesai, sekarang kita sudah bisa membuat project baru dengan menggunakan bantuan Adonis JS CLI. Silahkan jalankan perintah dibawah ini untuk membuat project baru

adonis new MyApp

MyApp adalah nama project yang akan kita gunakan

Silahkan tunggu proses installasi sampai selesai. Sekarang kita menjalankan aplikasi kita dengan cara menjalankan perintah dibawah ini :

adonis serve --dev

Secara otomatis, Adonis JS akan menjalankan project menggunakan Port 3333, teman-teman bisa membukanya melalui web browser dengan mengetikkan :

http://localhost:3333

Jika berhasil, kurang lebih tampilannya seperti berikut ini :


Membuat Database

Setelah kita berhasil menginstall Adonis JS dan menjalankannya, sekarang saatnya kita membuat sebuah database baru, yang mana database ini akan kita gunakan untuk menyiimpan data nanti.

Silahkan buka http://loclahost/phpmyadmin dan silahkan buat database baru dengan nama "db_adonis_crud".

Setelah berhasil membuat database baru, sekarang kita atur koneksi database yang ada di Adonis JS. silahkan teman-teman buka file .env dan cari kode dibawah ini :

DB_CONNECTION=sqlite
DB_HOST=127.0.0.1
DB_PORT=3306
DB_USER=root
DB_PASSWORD=
DB_DATABASE=adonis

Sekarang kita ubah kode diatas, menjadi kurang lebih seperti berikut ini :

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_USER=root
DB_PASSWORD=
DB_DATABASE=db_adonis_crud

Silahkan teman-teman sesuaikan dengan koneksi databasenya. Dan perlu temaan-teman perhatikan, secara default Adonis JS menggunakan driver database SQLITE dan kita akan merubahnya menggunakan MYSQL.

Jika kita jalankan aplikasi kita tentu saja nanti kita akan mendapatkan sebuah error, karena MySQL belum terinstall di project Adonis JS kita.

Untuk menginstall MySQL di project Adonis JS kita, silahkan jalankan perintah dibawah ini :

npm install mysql --save

Setelah proses installasi MySQL selesai, kita akan lanjutkaan dengan membuat sebuaah Models dan Migration baru. Silahkan jalankaan perintah dibawah ini :

adonis make:model Post --migration

Maka dari perintah di atas, kita akan dibuatkan 2 file baru yaitu

  • app/Models/Post.js
  • database/migrations/1580816802795_post_schema.js
✔ create  app/Models/Post.js
✔ create  database/migrations/1580816802795_post_schema.js

Sekarang silahkan buka file migration kita database/migrations/1580816802795_post_schema.js dan silahkan cari kode dibawah ini :

up () {
  this.create('posts', (table) => {
    table.increments()
    table.timestamps()
  })
}

Dan kita ubah menjadi seperti berikut ini :

up () {
  this.create('posts', (table) => {
    table.increments()
    table.string('title')
    table.text('content')
    table.timestamps()
  })
}

Bisa teman-teman perhatikan, kita akan menambahkan 2 kolom baru di dalam tabel posts, yaitu title dan content.

Setelah itu silahkan teman-teman jalankan perintah dibawah ini untuk melakukan migration ke database :

adonis migration:run

Jika berhasil, teman-teman akan melihat output kurng lebih seperti berikut ini :

migrate: 1503248427885_user.js
migrate: 1503248427886_token.js
migrate: 1580816802795_post_schema.js
Database migrated successfully in 275 ms

Dan teman-teman juga bisa melihatnya melalui http://localhost/phpmyadmin pada database "db_adonis_crud", maka kurang lebih akan seperti berikut ini :


Sampai disini pembahasan tutorial tentang membuat CRUD di Adonis JS pertama, yaitu installasi dan persiapan.

Di artikel selanjutnya kita akan belajar menampilkan data dari database dengan Adonis JS. Terima Kasih


Fika Ridaul Maulayya
Software Engineer | Content Creator | Founder & Author di SantriKoding.com

Jika Anda menyukai konten kami, silakan pertimbangkan untuk membeli kopi untuk kami.
Terima kasih atas dukungan Anda!

Buy me a coffeeBuy me a coffee
KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR