Memahami Konsep MVC pada AdonisJS: Panduan Lengkap

Published by Fazry on

I. Pengenalan ke AdonisJS

AdonisJS adalah sebuah framework Node.js yang kuat dan lengkap untuk membangun aplikasi web dan API. Dibangun di atas Node.js dan menggunakan bahasa pemrograman JavaScript, AdonisJS menawarkan pendekatan yang jelas dan terstruktur dalam pengembangan web dengan menyediakan seperangkat alat yang kuat dan terintegrasi.

Daftar Isi

A. Apa itu AdonisJS?

AdonisJS adalah framework Node.js yang memungkinkan pengembang untuk membangun aplikasi web dengan lebih cepat dan mudah. Dengan desain yang terinspirasi oleh framework Laravel untuk PHP, AdonisJS menyediakan pola pengembangan yang kuat dan terstruktur, termasuk dukungan untuk MVC (Model-View-Controller), ORM (Object-Relational Mapping), routing yang jelas, validasi data, dan banyak lagi.

B. Mengapa menggunakan AdonisJS?

Ada beberapa alasan mengapa pengembang memilih AdonisJS untuk membangun aplikasi web mereka:

  1. Struktur yang jelas: AdonisJS mengadopsi pola MVC yang terkenal, membuat kode menjadi lebih terstruktur dan mudah diatur.
  2. Produktivitas: Dengan fitur-fitur bawaan seperti ORM, validasi, dan middleware, AdonisJS membantu pengembang untuk fokus pada logika bisnis daripada boilerplate code.
  3. Kinerja yang baik: AdonisJS dirancang dengan kinerja yang kuat dan skala, membuatnya cocok untuk membangun aplikasi web yang besar dan tangguh.
  4. Komunitas yang aktif: AdonisJS memiliki komunitas yang aktif, yang berarti Anda dapat dengan mudah menemukan dukungan, tutorial, dan sumber daya lainnya.

C. Fitur Utama AdonisJS

Beberapa fitur utama yang ditawarkan oleh AdonisJS antara lain:

  • MVC: AdonisJS mengadopsi pola Model-View-Controller yang terkenal untuk memisahkan logika aplikasi menjadi komponen yang terpisah.
  • ORM Lucid: AdonisJS dilengkapi dengan ORM Lucid yang kuat, memungkinkan pengembang untuk berinteraksi dengan database menggunakan model JavaScript yang familiar.
  • Routing yang jelas: AdonisJS menyediakan sistem routing yang jelas dan mudah digunakan untuk menangani permintaan HTTP.
  • Middleware: AdonisJS mendukung middleware, yang memungkinkan pengembang untuk menambahkan logika sebelum atau sesudah permintaan HTTP diproses.
  • Validasi: AdonisJS menyediakan alat bawaan untuk validasi data, sehingga memastikan data yang masuk ke aplikasi Anda adalah valid.
  • Pengujian yang mudah: AdonisJS dilengkapi dengan dukungan pengujian bawaan, memungkinkan pengembang untuk menguji kode aplikasi mereka dengan mudah dan efisien.

D. Instalasi dan Persiapan Awal

Sebelum memulai pengembangan dengan AdonisJS, Anda perlu menginstal Adonis CLI (Command Line Interface) dan membuat proyek baru. Anda dapat menginstal Adonis CLI dengan menjalankan perintah berikut di terminal:

npm install -g @adonisjs/cliCode language: CSS (css)

Setelah CLI terinstal, Anda dapat membuat proyek baru dengan menjalankan perintah:

adonis new nama-proyekCode language: JavaScript (javascript)

Dengan langkah-langkah ini, Anda akan siap untuk memulai pengembangan aplikasi web dengan AdonisJS.

II. Konsep Dasar MVC

Model-View-Controller (MVC) adalah sebuah pola arsitektur perangkat lunak yang digunakan untuk memisahkan logika aplikasi menjadi tiga komponen utama: Model, View, dan Controller. Konsep ini membantu dalam pengorganisasian dan pemisahan tugas dalam pengembangan perangkat lunak, termasuk dalam pengembangan aplikasi web. Di AdonisJS, MVC adalah salah satu konsep utama yang digunakan untuk membangun aplikasi web yang terstruktur dan mudah diatur.

A. Apa itu MVC (Model-View-Controller)?

MVC adalah sebuah pola arsitektur perangkat lunak yang membagi aplikasi menjadi tiga komponen utama:

  1. Model: Komponen yang bertanggung jawab untuk mengatur data dan logika bisnis aplikasi. Model mewakili struktur data dan menyediakan metode untuk berinteraksi dengan database.
  2. View: Komponen yang bertanggung jawab untuk menampilkan data kepada pengguna. View biasanya berupa template atau halaman HTML yang menampilkan informasi dari model kepada pengguna.
  3. Controller: Komponen yang bertanggung jawab untuk menerima permintaan dari pengguna, memprosesnya, dan menentukan respons yang tepat. Controller berinteraksi dengan model untuk mengambil data yang diperlukan, kemudian memutuskan tampilan mana yang harus ditampilkan kepada pengguna.

B. Mengapa MVC penting dalam pengembangan web?

MVC adalah penting dalam pengembangan web karena:

  • Pemisahan tanggung jawab: Dengan memisahkan aplikasi menjadi model, view, dan controller, kode menjadi lebih terstruktur dan mudah diatur. Setiap komponen memiliki tanggung jawab yang terbatas, membuatnya lebih mudah untuk memahami dan mengelola aplikasi.
  • Pengembangan bersama: Dengan MVC, pengembang dapat bekerja secara terpisah pada setiap komponen tanpa terlalu bergantung satu sama lain. Misalnya, pengembang front-end dapat bekerja pada tampilan tanpa harus menunggu pengembang back-end menyelesaikan logika bisnis.
  • Kode yang reusable: Karena model, view, dan controller terpisah, komponen-komponen ini dapat digunakan kembali di berbagai bagian aplikasi atau bahkan dalam aplikasi lain.

C. Peran masing-masing komponen dalam MVC:

  1. Model: Model bertanggung jawab untuk mengatur data aplikasi dan logika bisnis. Ini berkomunikasi dengan database untuk mengambil, memperbarui, atau menghapus data, serta menerapkan logika bisnis yang diperlukan.
  2. View: View bertanggung jawab untuk menampilkan informasi kepada pengguna. Ini biasanya berupa halaman HTML atau template yang berisi markup dan logika tampilan.
  3. Controller: Controller bertanggung jawab untuk menangani permintaan pengguna, memprosesnya, dan menentukan tindakan yang tepat. Ini berinteraksi dengan model untuk mengambil atau menyimpan data, kemudian memutuskan view mana yang harus ditampilkan kepada pengguna.

Dengan memahami konsep dasar MVC, pengembang dapat membangun aplikasi web yang terstruktur, mudah diatur, dan mudah dikelola menggunakan AdonisJS. Dengan memisahkan tanggung jawab antara model, view, dan controller, pengembang dapat bekerja secara efisien dan memastikan kualitas kode yang lebih tinggi.

III. Struktur Proyek AdonisJS

Struktur proyek dalam AdonisJS dirancang untuk memudahkan pengembangan aplikasi web dengan menerapkan pola MVC (Model-View-Controller) yang terkenal. Dalam bagian ini, kita akan membahas secara detail struktur direktori bawaan dalam proyek AdonisJS dan peran masing-masing direktori dalam implementasi pola MVC.

A. Struktur Direktori Bawaan

Struktur direktori bawaan dalam proyek AdonisJS terdiri dari beberapa direktori utama, termasuk:

  1. app: Direktori ini berisi kode aplikasi utama, termasuk model, view, controller, dan layanan.
  2. database: Direktori ini berisi semua file yang terkait dengan database, termasuk migrasi, biji (seed), dan file konfigurasi.
  3. public: Direktori ini berisi semua file statis seperti gambar, file CSS, dan file JavaScript yang akan disajikan langsung kepada pengguna.
  4. resources: Direktori ini berisi sumber daya tambahan yang diperlukan oleh aplikasi, seperti file template view, file konfigurasi, dan file bahasa.
  5. start: Direktori ini berisi file yang dieksekusi saat aplikasi dimulai, termasuk konfigurasi server dan middleware.

B. Peran Masing-masing Direktori dalam MVC:

  1. Models (app/Models): Direktori ini digunakan untuk menyimpan definisi model aplikasi. Model adalah representasi objek dari data dalam database, dan direpresentasikan sebagai kelas JavaScript di AdonisJS. Setiap model biasanya berhubungan dengan tabel tertentu dalam database.
  2. Views (resources/views): Direktori ini digunakan untuk menyimpan template tampilan aplikasi. Views adalah file-template HTML yang digunakan untuk menampilkan informasi kepada pengguna. AdonisJS menggunakan mesin template Edge secara bawaan, tetapi Anda dapat menggunakan mesin template lain jika diinginkan.
  3. Controllers (app/Controllers): Direktori ini digunakan untuk menyimpan definisi kontroler aplikasi. Controller adalah kelas JavaScript yang berisi logika aplikasi dan bertanggung jawab untuk menangani permintaan HTTP dari pengguna. Controller biasanya berinteraksi dengan model untuk mengambil atau menyimpan data, dan kemudian memilih tampilan yang tepat untuk ditampilkan kepada pengguna.
  4. Routes (start/routes.ts): File ini berisi definisi rute aplikasi. Rute digunakan untuk menentukan bagaimana aplikasi merespons permintaan HTTP dari pengguna. Setiap rute berhubungan dengan fungsi tertentu dalam kontroler aplikasi.

C. Penyesuaian Struktur Proyek

Meskipun AdonisJS menyediakan struktur direktori bawaan yang cukup baik untuk memulai, Anda dapat menyesuaikan struktur proyek sesuai dengan kebutuhan aplikasi Anda. Anda dapat menambahkan direktori tambahan, mengubah nama direktori yang ada, atau menyusun ulang struktur proyek sesuai dengan preferensi Anda.

Dengan memahami struktur proyek AdonisJS, Anda dapat mengatur kode aplikasi Anda dengan baik dan memastikan bahwa setiap komponen aplikasi terletak di tempat yang tepat. Ini membantu dalam pemeliharaan dan pengembangan aplikasi yang lebih mudah di masa mendatang.

IV. Menggunakan Model dalam AdonisJS

Model adalah komponen penting dalam AdonisJS yang digunakan untuk berinteraksi dengan database. Dalam bagian ini, kita akan membahas secara rinci cara menggunakan model dalam AdonisJS, termasuk pembuatan model baru, koneksi ke database, dan berbagai operasi CRUD (Create, Read, Update, Delete).

A. Membuat Model Baru

Untuk membuat model baru dalam AdonisJS, Anda dapat menggunakan perintah make:model. Misalnya, jika Anda ingin membuat model User, Anda dapat menjalankan perintah berikut:

node ace make:model UserCode language: CSS (css)

Perintah ini akan membuat file model baru di dalam direktori app/Models dengan nama User.ts.

B. Koneksi ke Database

AdonisJS menggunakan konfigurasi database yang didefinisikan di dalam file config/database.ts untuk berkomunikasi dengan database. Pastikan konfigurasi database telah diatur dengan benar sebelum menggunakan model.

Untuk membuat tabel di database yang sesuai dengan model Anda, Anda dapat menggunakan fitur migrasi AdonisJS. Anda dapat membuat migrasi baru dengan perintah:

node ace make:migration nama_migrasiCode language: CSS (css)

Setelah membuat migrasi, Anda dapat menjalankan migrasi untuk menerapkan perubahan ke database:

node ace migration:runCode language: CSS (css)

C. Mendefinisikan Model

Dalam model baru yang telah dibuat, Anda dapat mendefinisikan skema tabel dan hubungannya dengan model lain menggunakan AdonisJS Lucid ORM. Berikut adalah contoh definisi model User:

import { BaseModel, column } from '@ioc:Adonis/Lucid/Orm';

export default class User extends BaseModel {
  @column({ isPrimary: true })
  public id: number;

  @column()
  public username: string;

  @column()
  public email: string;

  @column()
  public password: string;
}Code language: PHP (php)

Dalam contoh di atas, kita mendefinisikan model User dengan kolom id, username, email, dan password.

D. Menggunakan Model dalam Controller

Setelah Anda mendefinisikan model, Anda dapat menggunakannya dalam controller untuk berinteraksi dengan data. Berikut adalah contoh penggunaan model User dalam sebuah controller:

import User from 'App/Models/User';
import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext';

export default class UserController {
  public async index() {
    // Mengambil semua data pengguna
    const users = await User.all();
    return users;
  }

  public async show({ params }: HttpContextContract) {
    // Mengambil data pengguna berdasarkan ID
    const user = await User.findOrFail(params.id);
    return user;
  }

  public async store({ request }: HttpContextContract) {
    // Membuat pengguna baru
    const userData = request.only(['username', 'email', 'password']);
    const user = await User.create(userData);
    return user;
  }

  public async update({ params, request }: HttpContextContract) {
    // Mengambil data pengguna yang akan diperbarui
    const user = await User.findOrFail(params.id);

    // Mengambil data yang akan diperbarui dari request
    const userData = request.only(['username', 'email', 'password']);

    // Memperbarui data pengguna
    user.merge(userData);
    await user.save();

    return user;
  }

  public async destroy({ params }: HttpContextContract) {
    // Menghapus data pengguna berdasarkan ID
    const user = await User.findOrFail(params.id);
    await user.delete();

    return { message: 'Pengguna berhasil dihapus' };
  }
}Code language: JavaScript (javascript)

Dengan menggunakan model dalam AdonisJS, Anda dapat dengan mudah membuat, membaca, memperbarui, dan menghapus data dari database. Ini memungkinkan Anda untuk berinteraksi dengan data dalam aplikasi Anda dengan cara yang kuat dan terstruktur.

V. Menggunakan View dalam AdonisJS

View adalah komponen penting dalam AdonisJS yang digunakan untuk menampilkan data kepada pengguna. Dalam bagian ini, kita akan membahas cara menggunakan view dalam AdonisJS, termasuk penggunaan mesin template Edge, pembuatan tampilan baru, dan cara menampilkan data dinamis dalam tampilan.

A. Penggunaan Mesin Template Edge

AdonisJS menggunakan mesin template Edge secara bawaan untuk menghasilkan tampilan HTML dinamis. Mesin template Edge memungkinkan Anda untuk menulis kode HTML dengan tambahan sintaksis yang memungkinkan Anda untuk menyisipkan variabel, struktur kontrol, dan lainnya ke dalam tampilan.

B. Membuat Tampilan Baru

Anda dapat membuat tampilan baru dalam AdonisJS dengan membuat file dengan ekstensi .edge di dalam direktori resources/views. Misalnya, jika Anda ingin membuat tampilan untuk menampilkan daftar pengguna, Anda dapat membuat file users.edge:

<!-- resources/views/users.edge -->

<!DOCTYPE html>
<html>
<head>
  <title>Daftar Pengguna</title>
</head>
<body>
  <h1>Daftar Pengguna</h1>
  <ul>
    @foreach (const user of users)
      <li>{{ user.username }}</li>
    @endforeach
  </ul>
</body>
</html>Code language: HTML, XML (xml)

Dalam contoh di atas, kita menggunakan sintaksis Edge untuk melakukan iterasi melalui array users dan menampilkan nama pengguna.

C. Menggunakan Layout dan Partials

AdonisJS memungkinkan Anda untuk menggunakan layout dan partials untuk mengatur tampilan Anda dengan lebih efisien. Layout adalah template induk yang digunakan untuk menyatukan struktur umum dari beberapa tampilan. Partials adalah bagian dari tampilan yang dapat digunakan kembali di berbagai tampilan.

Berikut adalah contoh layout default.edge:

<!-- resources/views/layouts/default.edge -->

<!DOCTYPE html>
<html>
<head>
  <title>{{ title }}</title>
</head>
<body>
  <header>
    <!-- Header -->
  </header>

  <main>
    {{ content }}
  </main>

  <footer>
    <!-- Footer -->
  </footer>
</body>
</html>Code language: HTML, XML (xml)

Dalam contoh di atas, kita menggunakan variabel title dan content yang akan diisi oleh tampilan yang menggunakan layout ini.

D. Menampilkan Data Dinamis dalam Tampilan

Untuk menampilkan data dinamis dalam tampilan, Anda dapat menyediakan data dari controller menggunakan variabel dan kemudian menggunakan sintaksis Edge untuk menampilkan data tersebut dalam tampilan. Berikut adalah contoh cara mengirim data dari controller ke tampilan dan menampilkan data tersebut:

import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext';
import User from 'App/Models/User';

export default class UserController {
  public async index({ view }: HttpContextContract) {
    // Mengambil semua data pengguna
    const users = await User.all();

    // Menampilkan tampilan users.edge dengan data users
    return view.render('users', { users });
  }
}Code language: JavaScript (javascript)

Dengan menggunakan tampilan dalam AdonisJS, Anda dapat dengan mudah membuat tampilan dinamis untuk aplikasi web Anda dan menampilkan data kepada pengguna dengan cara yang terstruktur dan efisien.

VI. Menggunakan Controller dalam AdonisJS

Controller adalah komponen penting dalam AdonisJS yang bertanggung jawab untuk menangani permintaan HTTP dari pengguna. Dalam bagian ini, kita akan membahas cara menggunakan controller dalam AdonisJS, termasuk pembuatan controller baru, menangani permintaan HTTP, dan berbagai operasi yang dapat dilakukan oleh controller.

A. Membuat Controller Baru

Anda dapat membuat controller baru dalam AdonisJS dengan menggunakan perintah make:controller. Misalnya, jika Anda ingin membuat controller untuk pengguna, Anda dapat menjalankan perintah berikut:

node ace make:controller UserControllerCode language: CSS (css)

Perintah ini akan membuat file controller baru dengan nama UserController.ts di dalam direktori app/Controllers.

B. Menangani Permintaan HTTP

Setelah Anda membuat controller, Anda dapat menangani permintaan HTTP dari pengguna dengan menambahkan metode ke dalam controller tersebut. Misalnya, berikut adalah contoh metode index() dalam controller UserController yang digunakan untuk menampilkan semua pengguna:

import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext';
import User from 'App/Models/User';

export default class UserController {
  public async index({ view }: HttpContextContract) {
    // Mengambil semua data pengguna
    const users = await User.all();

    // Menampilkan tampilan users.edge dengan data users
    return view.render('users', { users });
  }
}Code language: JavaScript (javascript)

C. Menggunakan Layanan (Service)

Dalam beberapa kasus, Anda mungkin perlu menggunakan layanan (service) di dalam controller untuk menangani logika bisnis yang kompleks. Anda dapat membuat layanan baru dalam AdonisJS dengan menggunakan perintah make:service:

node ace make:service AuthServiceCode language: CSS (css)

Setelah membuat layanan, Anda dapat menggunakannya dalam controller seperti ini:

import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext';
import AuthService from 'App/Services/AuthService';

export default class AuthController {
  private authService = new AuthService();

  public async register({ request, response }: HttpContextContract) {
    // Menangani permintaan registrasi pengguna menggunakan layanan AuthService
    const userData = request.only(['username', 'email', 'password']);
    const user = await this.authService.register(userData);

    // Mengembalikan respons kepada pengguna
    return response.status(201).json(user);
  }
}Code language: JavaScript (javascript)

D. Pengujian Controller

AdonisJS menyediakan dukungan bawaan untuk pengujian controller dengan menggunakan fungsionalitas pengujian yang disediakan oleh framework japa. Anda dapat membuat pengujian untuk controller Anda dengan membuat file pengujian baru di dalam direktori test/unit/controllers.

import test from 'japa';
import supertest from 'supertest';
import User from 'App/Models/User';
import { createServer } from 'App/Services/Server';

const BASE_URL = `http://${process.env.HOST}:${process.env.PORT}`;

test.group('UserController', () => {
  test('it should return list of users', async (assert) => {
    const user = await User.create({
      username: 'testuser',
      email: '[email protected]',
      password: 'password'
    });

    const { body } = await supertest(BASE_URL).get('/users').expect(200);

    assert.isArray(body);
    assert.deepEqual(body[0].username, user.username);
  });
});Code language: JavaScript (javascript)

Dengan menggunakan controller dalam AdonisJS, Anda dapat dengan mudah menangani permintaan HTTP dari pengguna, menerapkan logika bisnis yang kompleks, dan menguji kode Anda dengan efisien. Controller membantu Anda untuk mengorganisir dan memisahkan logika aplikasi Anda dengan baik, sehingga memudahkan pengembangan dan pemeliharaan aplikasi.

VII. Routing dalam AdonisJS

Routing adalah komponen penting dalam setiap aplikasi web yang menentukan bagaimana aplikasi merespons permintaan HTTP dari pengguna. Dalam AdonisJS, Anda dapat mendefinisikan rute menggunakan file routes.ts untuk menentukan bagaimana permintaan HTTP ditangani oleh aplikasi Anda.

A. Pengenalan ke Rute dalam AdonisJS

Rute dalam AdonisJS berfungsi untuk mencocokkan permintaan HTTP dengan fungsi-fungsi dalam controller yang sesuai. Setiap rute terdiri dari sebuah metode HTTP (GET, POST, PUT, DELETE, dll.), sebuah URL yang sesuai, dan fungsi yang akan dijalankan ketika rute dipicu.

B. Definisi Rute dalam File Routes

File routes.ts adalah tempat di mana Anda mendefinisikan semua rute aplikasi Anda. File ini terletak di dalam direktori start pada proyek AdonisJS Anda. Anda dapat menentukan rute baru menggunakan metode Route, yang disediakan oleh AdonisJS.

Contoh sederhana definisi rute di dalam file routes.ts:

import Route from '@ioc:Adonis/Core/Route';

Route.get('/', async ({ response }) => {
  return response.send('Hello, world!');
});

Route.post('/users', 'UserController.store');
Route.get('/users', 'UserController.index');
Route.get('/users/:id', 'UserController.show');
Route.put('/users/:id', 'UserController.update');
Route.delete('/users/:id', 'UserController.destroy');Code language: JavaScript (javascript)

Dalam contoh di atas, kita mendefinisikan beberapa rute yang masing-masing cocok dengan metode HTTP tertentu dan URL tertentu. Misalnya, GET /users akan memicu metode index() dalam controller UserController.

C. Penggunaan Rute Dinamis

AdonisJS mendukung penggunaan rute dinamis yang memungkinkan Anda untuk menangkap nilai tertentu dari URL dan menggunakan nilainya dalam logika rute Anda. Anda dapat menentukan rute dinamis dengan menambahkan parameter dengan tanda : pada rute.

Contoh penggunaan rute dinamis:

import Route from '@ioc:Adonis/Core/Route';

Route.get('/users/:id', async ({ params, response }) => {
  const userId = params.id;
  // Lakukan sesuatu dengan ID pengguna yang diberikan
  return response.send(`Menampilkan informasi untuk pengguna dengan ID ${userId}`);
});Code language: JavaScript (javascript)

Dalam contoh di atas, kita menggunakan rute dinamis untuk menangkap ID pengguna dari URL dan menggunakan ID tersebut dalam logika rute kita.

Dengan menggunakan rute dalam AdonisJS, Anda dapat dengan mudah menangani permintaan HTTP dari pengguna dan menentukan bagaimana permintaan tersebut ditangani oleh aplikasi Anda. Rute membantu Anda untuk mengatur alur kontrol aplikasi Anda dengan baik, memisahkan logika aplikasi dari logika rute, dan membuat aplikasi Anda lebih terstruktur dan mudah diatur.

VIII. Membangun Aplikasi Mini

Dalam bagian ini, kita akan membahas langkah-langkah untuk membangun aplikasi mini sederhana menggunakan AdonisJS. Aplikasi mini ini akan memiliki fitur dasar seperti membuat, membaca, memperbarui, dan menghapus (CRUD) entitas.

A. Persiapan Proyek

Langkah pertama adalah membuat proyek baru AdonisJS menggunakan Adonis CLI:

npm install -g @adonisjs/cli
adonis new nama-proyek
cd nama-proyekCode language: JavaScript (javascript)

B. Membuat Model

Model dalam AdonisJS adalah representasi dari tabel dalam basis data. Model ini digunakan untuk berinteraksi dengan data dalam tabel tersebut. Langkah-langkahnya sebagai berikut:

  1. Membuat Model Baru: Gunakan perintah make:model untuk membuat model baru. Misalnya, jika kita ingin membuat model untuk entitas Task, kita dapat menjalankan perintah berikut: node ace make:model Task Ini akan membuat file model baru di dalam direktori app/Models.
  2. Definisikan Skema Tabel: Di dalam model yang baru dibuat, Anda dapat mendefinisikan skema tabel dengan menggunakan decorator @column. Misalnya:
import { BaseModel, column } from '@ioc:Adonis/Lucid/Orm';

export default class Task extends BaseModel {
  @column({ isPrimary: true })
  public id: number;

  @column()
  public title: string;

  @column()
  public description: string;
}Code language: JavaScript (javascript)

Di sini, kita mendefinisikan bahwa model Task memiliki kolom id (kunci utama), title, dan description.

Dengan membuat model dalam AdonisJS, Anda dapat dengan mudah berinteraksi dengan data dalam basis data Anda menggunakan model yang terstruktur dan kuat. Model membantu Anda dalam mengatur logika akses data dalam aplikasi Anda dengan cara yang terorganisir dan terstruktur.

C. Membuat Controller

Kemudian, kita akan membuat controller untuk menangani operasi CRUD pada entitas Task:

node ace make:controller TaskControllerCode language: CSS (css)

D. Mendefinisikan Rute

Selanjutnya, kita akan mendefinisikan rute untuk aplikasi kita dalam file routes.ts. Kita akan menentukan rute untuk membuat, membaca, memperbarui, dan menghapus task:

import Route from '@ioc:Adonis/Core/Route';

Route.get('/tasks', 'TaskController.index');
Route.post('/tasks', 'TaskController.store');
Route.get('/tasks/:id', 'TaskController.show');
Route.put('/tasks/:id', 'TaskController.update');
Route.delete('/tasks/:id', 'TaskController.destroy');Code language: JavaScript (javascript)

E. Mengimplementasikan Logika Bisnis

Setelah membuat model, langkah berikutnya adalah mengimplementasikan logika bisnis untuk setiap operasi CRUD di dalam controller yang terkait. Dalam contoh ini, kita akan menggunakan model Task yang sudah kita buat sebelumnya dan mengimplementasikan logika bisnis untuk operasi CRUD dalam controller TaskController.

  1. Membuat Task Baru: Untuk membuat task baru, kita dapat menggunakan metode store() dalam controller TaskController. Dalam metode ini, kita akan mengambil data dari permintaan HTTP dan membuat task baru menggunakan model Task. 
import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext';
import Task from 'App/Models/Task';

export default class TaskController {
  public async store({ request }: HttpContextContract) {
    const taskData = request.only(['title', 'description']);
    const task = await Task.create(taskData);
    return task;
  }
}Code language: JavaScript (javascript)
  1. Membaca Task: Untuk membaca task, kita dapat menggunakan metode index() dalam controller TaskController. Dalam metode ini, kita akan mengambil semua task dari basis data menggunakan model Task dan mengembalikan daftar task tersebut.
import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext';
import Task from 'App/Models/Task';

export default class TaskController {
  public async index({}: HttpContextContract) {
    const tasks = await Task.all();
    return tasks;
  }
}Code language: JavaScript (javascript)
  1. Memperbarui Task: Untuk memperbarui task, kita dapat menggunakan metode update() dalam controller TaskController. Dalam metode ini, kita akan mengambil task berdasarkan ID yang diberikan dari permintaan HTTP, memperbarui atribut-atribut yang diperlukan, dan menyimpan perubahan tersebut.
import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext';
import Task from 'App/Models/Task';

export default class TaskController {
  public async update({ params, request }: HttpContextContract) {
    const task = await Task.findOrFail(params.id);
    const taskData = request.only(['title', 'description']);
    task.merge(taskData);
    await task.save();
    return task;
  }
}Code language: JavaScript (javascript)
  1. Menghapus Task: Untuk menghapus task, kita dapat menggunakan metode destroy() dalam controller TaskController. Dalam metode ini, kita akan menghapus task berdasarkan ID yang diberikan dari permintaan HTTP.
import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext';
import Task from 'App/Models/Task';

export default class TaskController {
  public async destroy({ params }: HttpContextContract) {
    const task = await Task.findOrFail(params.id);
    await task.delete();
    return { message: 'Task berhasil dihapus' };
  }
}Code language: JavaScript (javascript)

Dengan mengimplementasikan logika bisnis ini dalam controller, kita dapat melakukan operasi CRUD pada entitas Task dengan mudah dan terstruktur menggunakan AdonisJS.

F. Membuat Tampilan

Dalam AdonisJS, tampilan umumnya dibuat menggunakan mesin template Edge. Anda dapat membuat tampilan dengan membuat file dengan ekstensi .edge di dalam direktori resources/views.

  1. Daftar Task (Index): Untuk membuat tampilan yang menampilkan daftar task, Anda dapat membuat file index.edge:
<!-- resources/views/index.edge -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daftar Task</title>
</head>
<body>
    <h1>Daftar Task</h1>
    <ul>
        @each(task in tasks)
            <li>{{ task.title }}</li>
        @endeach
    </ul>
</body>
</html>Code language: HTML, XML (xml)

Dalam tampilan ini, kita menggunakan sintaksis Edge untuk melakukan iterasi melalui daftar task yang diberikan dan menampilkan judul setiap task.

  1. Formulir untuk Membuat Task Baru: Anda juga mungkin ingin membuat formulir untuk membuat task baru. Anda dapat membuat file create.edge:
<!-- resources/views/create.edge -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulir Membuat Task Baru</title>
</head>
<body>
    <h1>Formulir Membuat Task Baru</h1>
    <form action="/tasks" method="POST">
        <input type="text" name="title" placeholder="Judul Task">
        <textarea name="description" placeholder="Deskripsi Task"></textarea>
        <button type="submit">Buat Task</button>
    </form>
</body>
</html>Code language: HTML, XML (xml)

Dalam tampilan ini, kita membuat formulir dengan field judul dan deskripsi untuk membuat task baru.

  1. Tampilan Detail Task: Jika Anda ingin menampilkan detail dari sebuah task, Anda dapat membuat file show.edge:
<!-- resources/views/show.edge -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detail Task</title>
</head>
<body>
    <h1>{{ task.title }}</h1>
    <p>{{ task.description }}</p>
</body>
</html>Code language: HTML, XML (xml)

Dalam tampilan ini, kita menampilkan judul dan deskripsi dari sebuah task.

Dengan membuat tampilan ini, Anda dapat menyajikan data dengan lebih menarik dan interaktif kepada pengguna Anda. Tampilan membantu dalam meningkatkan pengalaman pengguna dan membuat aplikasi Anda lebih profesional.

G. Mengujicoba Aplikasi

Terakhir, Anda dapat mengujicoba aplikasi Anda dengan menjalankan server AdonisJS dan mengaksesnya melalui browser atau menggunakan alat pengujian API seperti Postman.

npm run dev

Dengan langkah-langkah di atas, Anda telah berhasil membangun aplikasi mini sederhana menggunakan AdonisJS. Anda dapat melanjutkan dengan menambahkan fitur tambahan, meningkatkan tampilan, atau memperluas fungsionalitas aplikasi sesuai kebutuhan Anda.

Categories: AdonisJSJavascript
Tags:

0 Comments

Leave a Reply

Avatar placeholder

Related Posts

Pengenalan AdonisJS Membangun Aplikasi Web dengan Framework Node.js yang Powerful
AdonisJS

Pengenalan AdonisJS: Membangun Aplikasi Web dengan Framework Node.js yang Powerful

I. Pendahuluan Pada bagian ini, kita akan memperkenalkan pembaca dengan AdonisJS sebagai framework pengembangan aplikasi web yang powerful berbasis Node.js. Kami akan menjelaskan mengapa AdonisJS menjadi pilihan yang menarik bagi para pengembang, serta memberikan gambaran Read more…