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 umum tentang apa yang akan dibahas dalam tutorial ini.

Daftar Isi

Pengantar tentang AdonisJS

AdonisJS adalah sebuah framework web Node.js yang kuat, terinspirasi oleh Laravel, sebuah framework populer dalam lingkup pengembangan PHP. Dibangun di atas konsep Model-View-Controller (MVC), AdonisJS menyediakan seperangkat alat yang kuat untuk mempercepat proses pengembangan aplikasi web dengan Node.js. Dengan dukungan untuk otentikasi, basis data relasional, dan berbagai fitur lainnya, AdonisJS memungkinkan pengembang untuk fokus pada logika bisnis aplikasi mereka tanpa harus khawatir tentang mengulang-ulang pekerjaan umum.

Alasan mengapa AdonisJS menjadi pilihan yang powerful

  1. Struktur MVC yang Jelas: AdonisJS menetapkan struktur MVC yang jelas untuk aplikasi Anda, memisahkan logika bisnis dari tampilan dan interaksi dengan basis data.
  2. Pendekatan Konvensional: AdonisJS mengadopsi pendekatan konvensional dalam pengorganisasian kode, membuatnya mudah dipahami bagi pengembang dengan pengalaman menggunakan framework web lainnya seperti Laravel atau Ruby on Rails.
  3. Dukungan untuk Lucid ORM: Dengan Lucid ORM, pengembang dapat dengan mudah berinteraksi dengan berbagai jenis basis data relasional seperti MySQL, PostgreSQL, SQLite, dan lainnya.
  4. Paket Ekosistem yang Kuat: AdonisJS memiliki paket ekosistem yang kuat, termasuk berbagai ekstensi dan plugin yang memperluas fungsionalitasnya, serta dukungan yang solid dari komunitas.

Dengan memahami keunggulan dan kemampuan AdonisJS, Anda akan siap untuk memulai perjalanan pengembangan aplikasi web yang powerful menggunakan framework ini. Mari kita lanjutkan untuk mempelajari lebih lanjut tentang konsep dasar dan praktik terbaik dalam menggunakan AdonisJS.

II. Mengenal AdonisJS

Pada bagian ini, kita akan memperdalam pemahaman tentang AdonisJS, termasuk definisi, sejarah, dan fitur-fitur utamanya. Ini akan memberikan landasan yang kuat sebelum kita mulai menjelajahi praktik pengembangan aplikasi dengan framework ini.

Apa itu AdonisJS?

AdonisJS adalah sebuah framework web Node.js yang kuat dan ekspresif yang dibangun dengan menggunakan bahasa pemrograman JavaScript atau TypeScript. Dibangun di atas konsep Model-View-Controller (MVC), AdonisJS memungkinkan pengembang untuk membangun aplikasi web yang skalabel dan efisien dengan mudah. Sebagai alternatif untuk framework seperti Express.js, AdonisJS menyediakan struktur dan alat yang diperlukan untuk mempercepat proses pengembangan.

Sejarah dan Perkembangan AdonisJS

AdonisJS pertama kali dirilis pada tahun 2016 oleh Ahmad Abdulaziz, seorang pengembang perangkat lunak asal Nigeria. Dari saat itu, AdonisJS telah mengalami pertumbuhan yang signifikan dalam hal popularitas dan fungsionalitas. Dukungan komunitas yang kuat, pembaruan reguler, dan fokus pada kinerja dan keamanan telah membuat AdonisJS menjadi salah satu framework Node.js yang paling diminati.

Fitur-fitur Utama AdonisJS

  1. Model-View-Controller (MVC): AdonisJS mengikuti pola desain MVC yang memisahkan logika aplikasi menjadi tiga komponen utama: Model, View, dan Controller, memudahkan pengembangan dan pemeliharaan kode.
  2. Lucid ORM: Lucid adalah ORM (Object-Relational Mapping) bawaan AdonisJS yang memungkinkan pengembang untuk berinteraksi dengan basis data relasional secara mudah dan intuitif.
  3. Middleware dan Routing: AdonisJS menyediakan sistem routing yang kuat dan middleware yang dapat digunakan untuk memanipulasi permintaan HTTP sebelum atau sesudah diproses oleh handler rute.
  4. Otentikasi dan Otorisasi: AdonisJS menyediakan fitur otentikasi yang terintegrasi dengan mudah, serta kemampuan untuk mengatur izin dan hak akses pengguna dengan fleksibilitas.
  5. Validasi Data: AdonisJS memiliki pustaka validasi bawaan yang memungkinkan pengembang untuk memvalidasi input pengguna dengan mudah dan aman.
  6. Ekosistem yang Kaya: Dukungan yang kuat dari komunitas telah menghasilkan ekosistem yang kaya dengan berbagai ekstensi, plugin, dan modul yang memperluas fungsionalitas AdonisJS.

Dengan memahami definisi, sejarah, dan fitur-fitur utama AdonisJS, Anda telah memperoleh landasan yang kuat untuk memulai perjalanan pengembangan aplikasi web dengan framework ini. Selanjutnya, kita akan mempelajari tentang persiapan lingkungan pengembangan dan konsep dasar dalam AdonisJS.

III. Persiapan Lingkungan Pengembangan

Bagian ini akan membimbing Anda melalui langkah-langkah yang diperlukan untuk menyiapkan lingkungan pengembangan Anda sehingga Anda siap untuk memulai pengembangan aplikasi web dengan AdonisJS. Ini mencakup instalasi Node.js, npm, dan persiapan proyek baru menggunakan Adonis CLI.

Instalasi Node.js dan npm

Node.js adalah runtime lingkungan JavaScript yang memungkinkan Anda menjalankan JavaScript di sisi server. npm (Node Package Manager) adalah manajer paket untuk Node.js yang memungkinkan Anda mengelola dependensi proyek Anda. Untuk memulai, Anda perlu mengunduh dan menginstal Node.js, yang akan secara otomatis menyertakan npm.

Langkah-langkah umum untuk instalasi Node.js adalah sebagai berikut:

  1. Unduh Node.js: Kunjungi situs web resmi Node.js di nodejs.org dan unduh versi terbaru sesuai dengan sistem operasi Anda (Windows, macOS, atau Linux).
  2. Instalasi: Ikuti petunjuk instalasi yang ditampilkan pada layar untuk menyelesaikan proses instalasi Node.js. Setelah instalasi selesai, Anda dapat memverifikasi apakah Node.js dan npm telah berhasil diinstal dengan membuka terminal atau command prompt dan menjalankan perintah berikut: node -v npm -v Jika Anda melihat versi Node.js dan npm yang terinstal, itu berarti instalasi telah berhasil.

Persiapan Proyek Baru dengan Adonis CLI

Adonis CLI adalah alat baris perintah yang memungkinkan Anda membuat, mengelola, dan menjalankan proyek AdonisJS dengan mudah. Dengan Adonis CLI, Anda dapat membuat struktur dasar proyek, menghasilkan kode otomatis untuk model, controller, dan lainnya, serta menjalankan server pengembangan dengan cepat.

Langkah-langkah untuk menginstal Adonis CLI dan membuat proyek baru adalah sebagai berikut:

  1. Instalasi Adonis CLI: Buka terminal atau command prompt dan jalankan perintah berikut untuk menginstal Adonis CLI secara global di sistem Anda: npm install -g @adonisjs/cli
  2. Membuat Proyek Baru: Setelah instalasi selesai, Anda dapat membuat proyek baru dengan menjalankan perintah adonis new di terminal: adonis new nama_proyek Gantilah nama_proyek dengan nama yang Anda inginkan untuk proyek Anda. Adonis CLI akan membuat direktori baru dengan nama proyek yang Anda tentukan dan menginstal semua dependensi yang diperlukan.
  3. Menjalankan Server Pengembangan: Setelah proyek dibuat, navigasikan ke direktori proyek baru dan jalankan server pengembangan dengan perintah: cd nama_proyek adonis serve --dev Anda akan melihat pesan bahwa server telah berhasil dijalankan, dan Anda dapat mengakses aplikasi Anda di http://localhost:3333.

Dengan mengikuti langkah-langkah di atas, Anda telah menyiapkan lingkungan pengembangan Anda untuk memulai pengembangan aplikasi web dengan AdonisJS. Selanjutnya, kita akan mempelajari konsep dasar dalam AdonisJS untuk memahami lebih jauh tentang cara menggunakan framework ini.

IV. Konsep Dasar dalam AdonisJS

Bagian ini akan memperkenalkan Anda pada konsep dasar yang mendasari pengembangan aplikasi web dengan AdonisJS. Ini mencakup pemahaman tentang pola desain Model-View-Controller (MVC), routing, middleware, dan interaksi dengan database menggunakan Lucid ORM.

A. Model-View-Controller (MVC)

AdonisJS mengikuti pola desain Model-View-Controller (MVC) yang terorganisir dengan baik. Berikut adalah penjelasan singkat tentang setiap komponennya:

  1. Model: Model adalah representasi dari struktur data aplikasi Anda. Ini berinteraksi langsung dengan basis data untuk menyimpan dan mengambil informasi. Model mengelola logika bisnis aplikasi dan berfungsi sebagai jembatan antara kontroler dan basis data.
  2. View: View adalah bagian yang bertanggung jawab untuk menampilkan informasi kepada pengguna. Ini menggabungkan markup HTML dengan data yang diberikan oleh kontroler atau model untuk menghasilkan halaman web yang diinginkan.
  3. Controller: Controller adalah otak aplikasi yang mengontrol alur logika bisnis. Ini menerima permintaan dari pengguna, berinteraksi dengan model dan layanan eksternal, dan mengirimkan respons yang sesuai ke pengguna melalui view.
    1. Model

    Dalam AdonisJS, Model adalah komponen yang bertanggung jawab untuk mengakses, memanipulasi, dan mengelola data dalam basis data. Model digunakan untuk merepresentasikan struktur data aplikasi dan berinteraksi dengan tabel dalam basis data relasional. AdonisJS menggunakan Lucid ORM (Object-Relational Mapping) untuk memfasilitasi penggunaan model.

    Pendefinisian Model

    Anda dapat mendefinisikan model dengan menggunakan Adonis CLI atau secara manual dengan membuat file JavaScript di dalam direktori app/Models. Setiap model di AdonisJS biasanya terkait dengan satu tabel dalam basis data.

    Contoh definisi model dalam AdonisJS:

    // app/Models/User.js
    
    const { Model } = require('@adonisjs/lucid');
    
    class User extends Model {
      static table = 'users'; // Nama tabel yang terkait dengan model
    
      static primaryKey = 'id'; // Nama kolom kunci utama
    
      static fillable = ['username', 'email', 'password']; // Kolom yang dapat diisi
    
      // Relasi dengan model lain (jika ada)
      posts() {
        return this.hasMany('App/Models/Post');
      }
    }
    
    module.exports = User;Code language: JavaScript (javascript)

    Interaksi dengan Basis Data

    Model dalam AdonisJS menyediakan berbagai metode untuk berinteraksi dengan basis data, termasuk metode untuk membuat, membaca, memperbarui, dan menghapus entri dalam tabel.

    Contoh operasi CRUD menggunakan model dalam AdonisJS:

    // Membuat entri baru
    const user = new User();
    user.username = 'john_doe';
    user.email = '[email protected]';
    user.password = 'secret';
    await user.save();
    
    // Membaca entri dari basis data
    const user = await User.find(1); // Mencari user dengan ID 1
    console.log(user.toJSON());
    
    // Memperbarui entri dalam basis data
    user.username = 'new_username';
    await user.save();
    
    // Menghapus entri dari basis data
    await user.delete();Code language: JavaScript (javascript)

    Validasi Data

    Model dalam AdonisJS dapat digunakan untuk menerapkan aturan validasi pada data sebelum disimpan ke dalam basis data. Ini memastikan bahwa data yang dimasukkan ke dalam basis data memenuhi persyaratan tertentu, seperti format yang benar atau ketersediaan bidang yang diperlukan.

    Contoh penerapan validasi pada model dalam AdonisJS:

    const { validate } = use('Validator');
    
    const validation = await validate(request.all(), {
      username: 'required|unique:users',
      email: 'required|email|unique:users',
      password: 'required|min:6',
    });
    
    if (validation.fails()) {
      // Handle kesalahan validasi
    }Code language: JavaScript (javascript)

    Relasi Antara Model

    Dalam AdonisJS, Anda dapat mendefinisikan relasi antara model untuk merepresentasikan hubungan antar tabel dalam basis data. Ini memungkinkan Anda untuk dengan mudah mengambil dan memanipulasi data melalui relasi.

    Contoh definisi relasi antara model dalam AdonisJS:

    class User extends Model {
      posts() {
        return this.hasMany('App/Models/Post');
      }
    }Code language: JavaScript (javascript)

    Dengan menggunakan model dalam AdonisJS, Anda dapat dengan mudah mengelola data aplikasi Anda, menerapkan logika bisnis, dan berinteraksi dengan basis data dengan cara yang efisien dan terstruktur. Model adalah salah satu komponen inti dalam pengembangan aplikasi web dengan AdonisJS.

    2. View

    View dalam AdonisJS bertanggung jawab untuk menampilkan informasi kepada pengguna dalam bentuk HTML yang sesuai. Ini adalah bagian dari aplikasi yang berfungsi untuk merender tampilan dan menampilkan data yang diberikan oleh Controller atau Model kepada pengguna. AdonisJS menggunakan mesin template yang kuat yang disebut Edge untuk menghasilkan tampilan aplikasi.

    Template Engine: Edge

    AdonisJS menggunakan mesin template bernama Edge, yang dirancang untuk menyederhanakan pembuatan tampilan dalam aplikasi web. Edge memungkinkan Anda untuk membuat tampilan dengan sintaks yang bersih dan ekspresif, serta menyediakan berbagai fitur bawaan seperti pengulangan, kondisional, dan komponen partial.

    Contoh penggunaan Edge dalam file tampilan AdonisJS:

    <!-- resources/views/welcome.edge -->
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Welcome</title>
    </head>
    <body>
        <h1>Welcome to My Website, {{ username }}</h1>
    </body>
    </html>Code language: HTML, XML (xml)

    Penyisipan Data dalam Tampilan

    Anda dapat menyisipkan data dinamis ke dalam tampilan menggunakan sintaks {{ }} dalam Edge. Data ini biasanya disediakan oleh Controller dan dapat berupa variabel tunggal, array, atau objek.

    Contoh penyisipan data dalam tampilan AdonisJS:

    <!-- resources/views/welcome.edge -->
    
    <h1>Welcome to My Website, {{ username }}</h1>Code language: HTML, XML (xml)

    Layout dan Partials

    Edge mendukung konsep layout dan partials untuk memisahkan tata letak umum dari konten yang spesifik untuk setiap halaman. Layout adalah template induk yang mencakup elemen-elemen umum seperti header, footer, dan navigasi, sedangkan partials adalah fragmen kode yang dapat digunakan kembali di beberapa tampilan.

    Contoh penggunaan layout dan partials dalam AdonisJS:

    <!-- resources/views/layouts/main.edge -->
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{ title }}</title>
    </head>
    <body>
        @include('partials/header')
    
        <div class="content">
            @renderBody()
        </div>
    
        @include('partials/footer')
    </body>
    </html>Code language: HTML, XML (xml)

    Penanganan Data yang Aman

    AdonisJS menyediakan fitur otomatis escape untuk menghindari injeksi HTML yang tidak aman dalam tampilan. Ini membantu mencegah serangan XSS (Cross-Site Scripting) dengan secara otomatis mengubah karakter khusus seperti <, >, dan & menjadi entitas HTML yang aman.

    Contoh penggunaan fitur otomatis escape dalam tampilan AdonisJS:

    <!-- resources/views/welcome.edge -->
    
    <p>{{ safeString }}</p>Code language: HTML, XML (xml)

    Dengan menggunakan View dalam AdonisJS, Anda dapat dengan mudah membuat tampilan yang dinamis dan responsif untuk aplikasi web Anda. Edge menyediakan alat yang kuat untuk memanipulasi tampilan dengan mudah, sementara fitur-fitur keamanan bawaan membantu melindungi aplikasi Anda dari serangan yang berpotensi berbahaya.

    3. Controller

    Controller dalam AdonisJS adalah komponen yang bertindak sebagai perantara antara Model, View, dan permintaan pengguna. Controller mengelola alur logika bisnis aplikasi dan menanggapi tindakan pengguna yang diterima melalui antarmuka pengguna, seperti permintaan HTTP. Dengan menggunakan Controller, Anda dapat mengatur pemrosesan data, memanggil model untuk mengakses atau memanipulasi data, dan mengarahkan respons yang sesuai ke pengguna melalui View.

    Pendefinisian Controller

    Controller dalam AdonisJS dapat didefinisikan dengan membuat file JavaScript di dalam direktori app/Controllers. Setiap metode di dalam Controller biasanya merespons ke suatu rute tertentu dalam aplikasi. AdonisJS menyediakan struktur konvensional untuk mengatur Controller sesuai dengan rute dan tindakan yang diinginkan.

    Contoh definisi Controller dalam AdonisJS:

    // app/Controllers/Http/UserController.js
    
    class UserController {
      async index({ view }) {
        const users = await User.all();
        return view.render('users.index', { users });
      }
    
      async store({ request, response }) {
        const data = request.only(['username', 'email', 'password']);
        const user = await User.create(data);
        return response.status(201).json(user);
      }
    
      async show({ params, view }) {
        const user = await User.find(params.id);
        return view.render('users.show', { user });
      }
    
      async update({ params, request, response }) {
        const data = request.only(['username', 'email', 'password']);
        const user = await User.find(params.id);
        user.merge(data);
        await user.save();
        return response.status(200).json(user);
      }
    
      async destroy({ params, response }) {
        const user = await User.find(params.id);
        await user.delete();
        return response.status(204).send();
      }
    }
    
    module.exports = UserController;Code language: JavaScript (javascript)

    Metode Kontroller

    Metode dalam Controller digunakan untuk menangani tindakan spesifik yang dikirimkan oleh pengguna. Metode ini mungkin berinteraksi dengan Model untuk mengakses atau memanipulasi data, serta mengarahkan respons yang sesuai ke pengguna melalui View atau respons HTTP.

    Contoh penggunaan metode dalam Controller AdonisJS:

    // Menampilkan daftar pengguna
    async index({ view }) {
      const users = await User.all();
      return view.render('users.index', { users });
    }Code language: JavaScript (javascript)

    Penggunaan Kontroller dalam Rute

    Kontroller dapat digunakan dalam definisi rute untuk menentukan tindakan apa yang harus diambil oleh aplikasi ketika sebuah permintaan tertentu diterima. AdonisJS menggunakan sintaks yang jelas dan ekspresif untuk menghubungkan rute dengan metode yang sesuai dalam Controller.

    Contoh penggunaan Controller dalam definisi rute AdonisJS:

    // routes.js
    
    const Route = use('Route');
    
    Route.get('/users', 'UserController.index');
    Route.post('/users', 'UserController.store');
    Route.get('/users/:id', 'UserController.show');
    Route.put('/users/:id', 'UserController.update');
    Route.delete('/users/:id', 'UserController.destroy');Code language: PHP (php)

    Dengan menggunakan Controller dalam AdonisJS, Anda dapat dengan mudah mengelola alur logika aplikasi Anda, memisahkan tanggung jawab antara berbagai komponen, dan membuat aplikasi Anda menjadi lebih terstruktur dan mudah dipelihara. Controller adalah bagian penting dari pengembangan aplikasi web dengan AdonisJS dan membantu memisahkan tugas dan tanggung jawab dalam aplikasi Anda.

    Routing dan Middleware adalah dua konsep penting dalam pengembangan aplikasi web dengan AdonisJS. Routing digunakan untuk menentukan bagaimana aplikasi Anda menanggapi permintaan HTTP dari klien, sementara Middleware adalah serangkaian fungsi yang dipanggil secara berurutan pada setiap permintaan dan memungkinkan Anda untuk memanipulasi permintaan HTTP sebelum atau sesudah diproses oleh handler rute.

    B. Routing dan Penggunaan Middleware

    1. Routing

    Routing dalam AdonisJS digunakan untuk menentukan rute HTTP dan menghubungkannya dengan metode dalam Controller yang sesuai. AdonisJS menyediakan sintaks yang jelas dan ekspresif untuk mendefinisikan rute, termasuk dukungan untuk parameter dinamis dan penanganan grup rute.

    Contoh penggunaan routing dalam AdonisJS:

    // routes.js
    
    const Route = use('Route');
    
    // Definisi rute GET untuk halaman utama
    Route.get('/', 'HomeController.index');
    
    // Definisi rute POST untuk menyimpan data pengguna baru
    Route.post('/users', 'UserController.store');
    
    // Definisi rute GET dengan parameter dinamis
    Route.get('/users/:id', 'UserController.show');
    
    // Definisi grup rute dengan middleware
    Route.group(() => {
      Route.get('/admin', 'AdminController.index');
    }).middleware(['auth']);Code language: JavaScript (javascript)
    2. Middleware

    Middleware adalah serangkaian fungsi yang dipanggil secara berurutan pada setiap permintaan HTTP sebelum atau sesudah diproses oleh handler rute. Middleware dapat digunakan untuk melaksanakan tugas-tugas tertentu, seperti otentikasi, validasi, logging, atau manajemen sesi.

    Contoh penggunaan middleware dalam AdonisJS:

    // Buat middleware untuk otentikasi pengguna
    const auth = async (ctx, next) => {
      // Periksa apakah pengguna sudah terautentikasi
      if (!ctx.auth.user) {
        return ctx.response.unauthorized('You must be logged in');
      }
    
      // Panggil fungsi selanjutnya dalam rantai middleware
      await next();
    };
    
    // Daftarkan middleware di dalam Kernel
    const globalMiddleware = [
      // Middleware untuk mengatur header CORS
      'Adonis/Middleware/Cors',
      // Middleware untuk manajemen sesi
      'Adonis/Middleware/Session',
      // Middleware untuk otentikasi pengguna
      'App/Middleware/Auth',
    ];
    
    module.exports = globalMiddleware;Code language: JavaScript (javascript)

    Dengan menggunakan routing dan middleware dalam AdonisJS, Anda dapat dengan mudah mengatur alur dan logika aplikasi Anda, memastikan keamanan dan validitas data, serta meningkatkan fleksibilitas dan skalabilitas aplikasi Anda. Routing memungkinkan Anda untuk menentukan perilaku aplikasi Anda berdasarkan permintaan yang diterima, sedangkan middleware memberikan fleksibilitas tambahan dalam memanipulasi permintaan HTTP sebelum atau sesudah diproses oleh handler rute.

    C. Interaksi dengan Database menggunakan Lucid ORM

    Interaksi dengan database adalah bagian penting dari pengembangan aplikasi web, dan AdonisJS menyediakan Lucid ORM (Object-Relational Mapping) untuk mempermudah pengelolaan dan interaksi dengan basis data relasional. Lucid ORM memungkinkan Anda untuk bekerja dengan model data dalam format objek JavaScript, yang secara otomatis disalin dan disinkronkan dengan entitas dalam tabel database.

    Berikut adalah penjelasan detail tentang interaksi dengan database menggunakan Lucid ORM dalam AdonisJS:

    1. Pendefinisian Model

    Model dalam AdonisJS adalah representasi dari tabel dalam basis data Anda. Anda dapat membuat model baru dengan membuat file JavaScript di dalam direktori app/Models. Setiap model biasanya terkait dengan satu tabel dalam basis data.

    Contoh definisi model dalam AdonisJS:

    // app/Models/User.js
    
    const { Model } = require('@adonisjs/lucid');
    
    class User extends Model {
      static table = 'users'; // Nama tabel yang terkait dengan model
    
      static primaryKey = 'id'; // Nama kolom kunci utama
    
      static fillable = ['username', 'email', 'password']; // Kolom yang dapat diisi
    
      // Relasi dengan model lain (jika ada)
      posts() {
        return this.hasMany('App/Models/Post');
      }
    }
    
    module.exports = User;Code language: JavaScript (javascript)
    2. Operasi CRUD

    Lucid ORM menyediakan metode bawaan untuk melakukan operasi CRUD (Create, Read, Update, Delete) pada data dalam basis data. Anda dapat menggunakan metode ini untuk membuat, membaca, memperbarui, dan menghapus entri dalam tabel database.

    Contoh operasi CRUD menggunakan Lucid ORM:

    // Membuat entri baru
    const user = new User();
    user.username = 'john_doe';
    user.email = '[email protected]';
    user.password = 'secret';
    await user.save();
    
    // Membaca entri dari basis data
    const user = await User.find(1); // Mencari user dengan ID 1
    console.log(user.toJSON());
    
    // Memperbarui entri dalam basis data
    user.username = 'new_username';
    await user.save();
    
    // Menghapus entri dari basis data
    await user.delete();Code language: JavaScript (javascript)
    3. Relasi Antar Tabel

    Lucid ORM memungkinkan Anda untuk mendefinisikan relasi antara model, yang memungkinkan Anda untuk dengan mudah mengakses data terkait dari tabel yang berbeda.

    Contoh definisi relasi antara model dalam AdonisJS:

    class User extends Model {
      posts() {
        return this.hasMany('App/Models/Post');
      }
    }Code language: JavaScript (javascript)
    4. Penggunaan Query Builder

    Selain operasi CRUD, Lucid ORM juga menyediakan Query Builder yang kuat untuk membangun kueri yang lebih kompleks ke dalam basis data. Anda dapat menggunakan Query Builder untuk mengekstrak, memfilter, dan mengurutkan data sesuai dengan kebutuhan Anda.

    Contoh penggunaan Query Builder dalam AdonisJS:

    const users = await User.query().where('age', '>', 18).fetch(); // Mendapatkan pengguna dengan usia lebih dari 18 tahunCode language: JavaScript (javascript)

    Dengan menggunakan Lucid ORM dalam AdonisJS, Anda dapat dengan mudah mengelola data aplikasi Anda, menerapkan logika bisnis, dan berinteraksi dengan basis data relasional dengan cara yang efisien dan terstruktur. Lucid ORM adalah salah satu fitur inti dalam AdonisJS yang membantu mempercepat pengembangan aplikasi web dan meningkatkan produktivitas pengembang.

    V. Membuat Aplikasi Pertama dengan AdonisJS

    Bagian ini akan membimbing Anda melalui langkah-langkah untuk membuat aplikasi web pertama Anda menggunakan AdonisJS. Anda akan belajar membuat model, mengatur rute, membuat kontroler, dan merender tampilan menggunakan mesin template Edge.

    1. Persiapan Proyek

    Sebelum memulai, pastikan Anda telah menginstal Node.js dan Adonis CLI. Setelah itu, buat proyek baru dengan menjalankan perintah berikut di terminal:

    adonis new myappCode language: JavaScript (javascript)

    Masuk ke direktori proyek yang baru dibuat:

    cd myapp

    2. Menghubungkan Dengan Database

    Untuk menghubungkan aplikasi AdonisJS dengan database, Anda perlu mengonfigurasi koneksi database Anda di dalam file .env dan kemudian menggunakan Lucid ORM untuk berinteraksi dengan database. Berikut langkah-langkahnya:

    Konfigurasi Koneksi Database

    Buka file .env di direktori root proyek Anda dan tentukan detail koneksi database. Sesuaikan dengan informasi koneksi database Anda (seperti host, nama database, pengguna, dan kata sandi).

    DB_CONNECTION=mysql
    DB_HOST=127.0.0.1
    DB_PORT=3306
    DB_USER=root
    DB_PASSWORD=
    DB_DATABASE=my_database
    Instal Driver Database

    Pastikan Anda telah menginstal driver database yang sesuai. Misalnya, jika Anda menggunakan MySQL, pastikan Anda telah menginstal mysql dengan menjalankan:

    npm install mysql

    3. Membuat Model

    Pertama-tama, mari buat model untuk entitas dalam aplikasi kita. Dalam contoh ini, kita akan membuat model Post yang akan mewakili entri di blog.

    Buat model Post dengan menjalankan perintah berikut di terminal:

    adonis make:model PostCode language: CSS (css)

    Ini akan membuat file Post.js di dalam direktori app/Models. Anda dapat menambahkan logika bisnis dan relasi antar model di dalamnya.

    Anda dapat menggunakan fitur migrasi AdonisJS untuk membuat skema database. Buatlah file migrasi baru dengan menjalankan perintah:

    adonis make:migration create_posts_tableCode language: CSS (css)

    Edit file migrasi yang baru dibuat di dalam direktori database/migrations untuk menentukan skema tabel Anda. Setelah itu, jalankan migrasi untuk menerapkan perubahan ke dalam database:

    adonis migration:runCode language: CSS (css)

    4. Mengatur Rute

    Selanjutnya, kita akan menentukan rute untuk aplikasi kita. Buka file start/routes.js dan tentukan rute untuk menangani permintaan HTTP dari klien.

    // start/routes.js
    
    const Route = use('Route');
    
    // Rute untuk halaman utama
    Route.get('/', 'PostController.index');
    
    // Rute untuk menampilkan halaman tambah post
    Route.get('/posts/create', 'PostController.create');
    
    // Rute untuk menyimpan post baru
    Route.post('/posts', 'PostController.store');
    
    // Rute untuk menampilkan detail post
    Route.get('/posts/:id', 'PostController.show');
    
    // Rute untuk mengedit post
    Route.get('/posts/:id/edit', 'PostController.edit');
    
    // Rute untuk memperbarui post
    Route.put('/posts/:id', 'PostController.update');
    
    // Rute untuk menghapus post
    Route.delete('/posts/:id', 'PostController.destroy');Code language: PHP (php)

    5. Membuat Kontroler

    Kontroler dalam AdonisJS adalah komponen yang mengelola alur logika bisnis aplikasi dan menanggapi tindakan pengguna yang diterima melalui antarmuka pengguna. Kontroler bertindak sebagai perantara antara Model, View, dan permintaan pengguna, mengatur pengambilan data dari Model, dan menghasilkan respons yang sesuai ke pengguna melalui View atau respons HTTP.

    Langkah-langkah Membuat Kontroler:

    1. Buat Kontroler Baru: Gunakan Adonis CLI untuk membuat kontroler baru dengan perintah adonis make:controller. Nama kontroler biasanya sesuai dengan fungsi atau entitas yang akan diurusnya.
    adonis make:controller PostControllerCode language: CSS (css)

    Ini akan membuat file PostController.js di dalam direktori app/Controllers/Http.

    1. Definisikan Metode Kontroler: Di dalam file kontroler yang baru dibuat, Anda dapat menentukan metode yang sesuai untuk menangani tindakan pengguna. Metode ini biasanya berkorespondensi dengan tindakan CRUD (Create, Read, Update, Delete) atau fungsi-fungsi khusus lainnya yang diperlukan oleh aplikasi Anda.
    // app/Controllers/Http/PostController.js
    
    class PostController {
      async index({ view }) {
        // Logika untuk menampilkan daftar post
      }
    
      async show({ params, view }) {
        // Logika untuk menampilkan detail post
      }
    
      async create({ view }) {
        // Logika untuk menampilkan halaman tambah post
      }
    
      async store({ request, response }) {
        // Logika untuk menyimpan data post baru
      }
    
      async edit({ params, view }) {
        // Logika untuk menampilkan halaman edit post
      }
    
      async update({ params, request, response }) {
        // Logika untuk memperbarui data post
      }
    
      async destroy({ params, response }) {
        // Logika untuk menghapus data post
      }
    }
    
    module.exports = PostController;
    Code language: JavaScript (javascript)
    1. Hubungkan Kontroler dengan Rute: Setelah Kontroler dibuat dan metode-metodenya ditentukan, Anda perlu menghubungkannya dengan rute yang sesuai dalam aplikasi Anda. Buka file start/routes.js dan tentukan rute yang menunjuk ke metode-metode dalam Kontroler.
    // start/routes.js
    
    const Route = use('Route');
    
    Route.get('/posts', 'PostController.index');
    Route.get('/posts/:id', 'PostController.show');
    Route.get('/posts/create', 'PostController.create');
    Route.post('/posts', 'PostController.store');
    Route.get('/posts/:id/edit', 'PostController.edit');
    Route.put('/posts/:id', 'PostController.update');
    Route.delete('/posts/:id', 'PostController.destroy');
    Code language: PHP (php)

    Tentu! Di bagian “Implementasikan Logika Bisnis” dari pembuatan kontroler, Anda akan menentukan tindakan spesifik yang akan dilakukan oleh kontroler Anda. Berikut adalah detail tentang bagaimana Anda bisa melakukan itu:

    6. Implementasikan Logika Bisnis

    Setiap metode dalam kontroler memiliki tujuan tertentu dalam menangani permintaan pengguna. Di dalam metode-metode ini, Anda akan menentukan logika bisnis yang sesuai untuk menangani tindakan yang diterima oleh aplikasi Anda.

    a. Metode index

    Metode index biasanya digunakan untuk menampilkan daftar entitas tertentu, seperti daftar postingan blog atau daftar pengguna. Di dalam metode ini, Anda akan mengambil data dari Model yang sesuai dan meneruskannya ke tampilan untuk dirender.

    Contoh implementasi:

    async index({ view }) {
      const posts = await Post.all(); // Ambil semua postingan dari Model Post
      return view.render('posts.index', { posts }); // Render tampilan dengan data postingan
    }Code language: JavaScript (javascript)
    b. Metode show

    Metode show digunakan untuk menampilkan detail entitas tunggal, seperti halaman detail untuk sebuah postingan blog. Di dalam metode ini, Anda akan mengambil data entitas berdasarkan ID yang diberikan dan meneruskannya ke tampilan untuk dirender.

    Contoh implementasi:

    async show({ params, view }) {
      const post = await Post.find(params.id); // Ambil postingan berdasarkan ID yang diberikan
      return view.render('posts.show', { post }); // Render tampilan dengan data postingan
    }Code language: JavaScript (javascript)
    c. Metode create

    Metode create biasanya digunakan untuk menampilkan formulir untuk membuat entitas baru. Di dalam metode ini, Anda hanya perlu merender tampilan formulir.

    Contoh implementasi:

    async create({ view }) {
      return view.render('posts.create'); // Render tampilan formulir pembuatan postingan
    }Code language: JavaScript (javascript)
    d. Metode store

    Metode store digunakan untuk menyimpan entitas baru yang dibuat oleh pengguna melalui formulir. Di dalam metode ini, Anda akan menerima data yang dikirim oleh pengguna, memvalidasi data tersebut, menyimpannya ke dalam Model, dan memberikan respons yang sesuai.

    Contoh implementasi:

    async store({ request, response }) {
      const data = request.only(['title', 'content']); // Ambil data dari permintaan pengguna
      const post = await Post.create(data); // Buat postingan baru di dalam Model
      return response.redirect(`/posts/${post.id}`); // Redirect pengguna ke halaman detail postingan
    }Code language: JavaScript (javascript)
    e. Metode lainnya

    Metode-metode lainnya seperti edit, update, dan destroy akan memiliki logika yang serupa, dengan fokus pada tindakan spesifik yang diperlukan untuk mengedit, memperbarui, dan menghapus entitas yang ada.

    // Metode untuk menampilkan formulir edit postingan
    async edit({ params, view }) {
    const post = await Post.find(params.id); // Temukan postingan berdasarkan ID
      return view.render('posts.edit', { post }); // Render tampilan formulir edit dengan data postingan
    }
    
    // Metode untuk memperbarui postingan
    async update({ params, request, response }) {
      const post = await Post.find(params.id); // Temukan postingan berdasarkan ID
      const data = request.only(['title', 'content']); // Ambil data dari permintaan pengguna
      post.merge(data); // Gabungkan data baru ke dalam postingan yang ada
      await post.save(); // Simpan perubahan
      return response.redirect(`/posts/${post.id}`); // Redirect pengguna ke halaman detail postingan yang diperbarui
    }
    
    // Metode untuk menghapus postingan
    async destroy({ params, response }) {
      const post = await Post.find(params.id); // Temukan postingan berdasarkan ID
      await post.delete(); // Hapus postingan dari basis data
      return response.redirect('/posts'); // Redirect pengguna ke halaman daftar postingan
    }Code language: JavaScript (javascript)

    Dengan mengimplementasikan logika bisnis di dalam metode-metode kontroler Anda, Anda akan memiliki kendali penuh atas alur aplikasi Anda dan bagaimana aplikasi merespons tindakan pengguna yang berbeda.

    7. Merender Tampilan

    Terakhir, kita akan merender tampilan menggunakan mesin template Edge. Buat tampilan dalam format Edge di dalam direktori resources/views.

    Berikut adalah contoh kode untuk tampilan CRUD (Create, Read, Update, Delete) postingan:

    Tampilan Menampilkan Daftar Postingan (Index)
    <!-- resources/views/posts/index.edge -->
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>Daftar Postingan</title>
    </head>
    <body>
        <h1>Daftar Postingan</h1>
        <ul>
            @foreach (post in posts)
                <li>
                    <a href="/posts/{{ post.id }}">{{ post.title }}</a>
                </li>
            @endforeach
        </ul>
        <a href="/posts/create">Buat Postingan Baru</a>
    </body>
    </html>Code language: HTML, XML (xml)
    Tampilan Menampilkan Detail Postingan (Show)
    <!-- resources/views/posts/show.edge -->
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>{{ post.title }}</title>
    </head>
    <body>
        <h1>{{ post.title }}</h1>
        <p>{{ post.content }}</p>
        <a href="/posts/{{ post.id }}/edit">Edit</a>
        <form action="/posts/{{ post.id }}" method="post">
            <input type="hidden" name="_method" value="DELETE">
            <button type="submit">Hapus</button>
        </form>
        <a href="/posts">Kembali ke Daftar Postingan</a>
    </body>
    </html>Code language: HTML, XML (xml)
    Tampilan Formulir Pembuatan Postingan Baru (Create)
    <!-- resources/views/posts/create.edge -->
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>Buat Postingan Baru</title>
    </head>
    <body>
        <h1>Buat Postingan Baru</h1>
        <form action="/posts" method="post">
            <label for="title">Judul:</label><br>
            <input type="text" id="title" name="title"><br>
            <label for="content">Konten:</label><br>
            <textarea id="content" name="content"></textarea><br>
            <button type="submit">Buat</button>
        </form>
        <a href="/posts">Kembali ke Daftar Postingan</a>
    </body>
    </html>Code language: HTML, XML (xml)
    Tampilan Formulir Edit Postingan (Edit)
    <!-- resources/views/posts/edit.edge -->
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>Edit Postingan</title>
    </head>
    <body>
        <h1>Edit Postingan</h1>
        <form action="/posts/{{ post.id }}" method="post">
            <input type="hidden" name="_method" value="PUT">
            <label for="title">Judul:</label><br>
            <input type="text" id="title" name="title" value="{{ post.title }}"><br>
            <label for="content">Konten:</label><br>
            <textarea id="content" name="content">{{ post.content }}</textarea><br>
            <button type="submit">Simpan Perubahan</button>
        </form>
        <a href="/posts/{{ post.id }}">Batal</a>
    </body>
    </html>Code language: HTML, XML (xml)

    Dengan menggunakan tampilan CRUD seperti di atas, Anda dapat membuat antarmuka pengguna yang responsif dan intuitif untuk mengelola postingan dalam aplikasi Anda.

    8. Menjalankan Aplikasi

    Setelah semua langkah di atas selesai, Anda dapat menjalankan aplikasi Anda dengan menggunakan perintah:

    adonis serve --dev

    Dengan mengikuti langkah-langkah di atas, Anda telah berhasil membuat aplikasi web pertama Anda menggunakan AdonisJS. Anda telah belajar membuat model, mengatur rute, membuat kontroler, dan merender tampilan menggunakan mesin template Edge. Selanjutnya, Anda dapat terus menjelajahi fitur-fitur AdonisJS yang lebih lanjut untuk memperluas dan meningkatkan aplikasi Anda.

    VI. Autentikasi Pengguna dengan AdonisJS

    Autentikasi pengguna adalah proses yang penting dalam pengembangan aplikasi web yang memungkinkan pengguna untuk login dan mengakses fitur-fitur tertentu yang memerlukan otorisasi. AdonisJS menyediakan fitur autentikasi yang kuat dengan menggunakan modul @adonisjs/auth yang terintegrasi dengan session dan JWT (JSON Web Token) untuk mengelola otentikasi pengguna.

    1. Instalasi Paket Auth

    Pastikan Anda telah menginstal modul @adonisjs/auth dengan menjalankan perintah berikut:

    npm install @adonisjs/authCode language: CSS (css)

    Setelah menginstal, Anda perlu mengonfigurasi modul autentikasi di dalam proyek Anda.

    2. Konfigurasi Modul Autentikasi

    Buka file start/auth.js dan konfigurasikan penggunaan driver, model, dan serializer yang sesuai untuk autentikasi. Misalnya, untuk menggunakan driver session dengan model User dan serializer Lucid, Anda dapat mengatur konfigurasi berikut:

    // start/auth.js
    
    const { Config } = require('@adonisjs/auth/build/src/Config');
    
    Config.get('auth', (auth) => {
      auth.defaultGuard = 'web'; // Guard default
      auth.guards = {
        web: {
          driver: 'session',
          provider: 'lucid',
          model: 'App/Models/User',
          uid: 'email',
          password: 'password',
        },
      };
    });Code language: PHP (php)

    Pastikan juga untuk mengonfigurasi file .env Anda dengan pengaturan sesuai seperti koneksi database dan pengaturan sesi yang diperlukan.

    3. Membuat Middleware Auth

    Anda dapat membuat middleware untuk memastikan bahwa hanya pengguna yang terotentikasi yang dapat mengakses beberapa rute tertentu dalam aplikasi Anda. Middleware ini akan memeriksa apakah pengguna telah login sebelum mengizinkan akses ke rute yang bersangkutan.

    adonis make:middleware AuthCode language: CSS (css)

    Kemudian, tambahkan logika untuk memeriksa autentikasi pengguna di dalam middleware yang baru dibuat.

    // app/Middleware/Auth.js
    
    class Auth {
      async handle({ auth, response }, next) {
        try {
          await auth.check();
          await next();
        } catch (error) {
          return response.redirect('/login');
        }
      }
    }
    
    module.exports = Auth;Code language: JavaScript (javascript)

    4. Rute untuk Autentikasi

    Tentukan rute untuk proses autentikasi seperti login, logout, dan registrasi di dalam file start/routes.js.

    // start/routes.js
    
    const Route = use('Route');
    
    Route.get('/login', 'AuthController.showLogin').middleware('guest');
    Route.post('/login', 'AuthController.login').middleware('guest');
    Route.post('/logout', 'AuthController.logout').middleware('auth');
    Route.get('/register', 'AuthController.showRegister').middleware('guest');
    Route.post('/register', 'AuthController.register').middleware('guest');Code language: PHP (php)

    5. Kontroler Autentikasi

    Buatlah kontroler untuk mengelola proses autentikasi pengguna seperti login, logout, dan registrasi.

    adonis make:controller AuthControllerCode language: CSS (css)

    Kemudian, tambahkan logika untuk proses autentikasi di dalam kontroler.

    // app/Controllers/Http/AuthController.js
    
    class AuthController {
      async showLogin({ view }) {
        return view.render('auth.login');
      }
    
      async login({ auth, request, response }) {
        const { email, password } = request.all();
        await auth.attempt(email, password);
        return response.redirect('/');
      }
    
      async logout({ auth, response }) {
        await auth.logout();
        return response.redirect('/');
      }
    
      async showRegister({ view }) {
        return view.render('auth.register');
      }
    
      async register({ auth, request, response }) {
        const { email, password } = request.all();
        await User.create({ email, password });
        await auth.attempt(email, password);
        return response.redirect('/');
      }
    }
    
    module.exports = AuthController;Code language: JavaScript (javascript)

    6. Tampilan Autentikasi

    Buatlah tampilan untuk halaman login dan registrasi.

    <!-- resources/views/auth/login.edge -->
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>Login</title>
    </head>
    <body>
        <h1>Login</h1>
        <form action="/login" method="post">
            <label for="email">Email:</label><br>
            <input type="email" id="email" name="email"><br>
            <label for="password">Password:</label><br>
            <input type="password" id="password" name="password"><br>
            <button type="submit">Login</button>
        </form>
    </body>
    </html>Code language: HTML, XML (xml)
    <!-- resources/views/auth/register.edge -->
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>Register</title>
    </head>
    <body>
        <h1>Register</h1>
        <form action="/register" method="post">
            <label for="email">Email:</label><br>
            <input type="email" id="email" name="email"><br>
            <label for="password">Password:</label><br>
            <input type="password" id="password" name="password"><br>
            <button type="submit">Register</button>
        </form>
    </body>
    </html>Code language: HTML, XML (xml)

    Dengan mengikuti langkah-langkah di atas, Anda dapat

    mengimplementasikan sistem autentikasi pengguna yang lengkap dalam aplikasi Anda menggunakan AdonisJS. Ini memungkinkan pengguna untuk login, logout, dan mendaftar dengan aman serta memberikan kontrol atas akses ke bagian-bagian tertentu dari aplikasi Anda.

    VII. Validasi Data dan Keamanan

    Validasi data dan keamanan adalah aspek penting dalam pengembangan aplikasi web untuk memastikan bahwa data yang dimasukkan oleh pengguna valid dan aman dari serangan potensial. AdonisJS menyediakan fitur yang kuat untuk melakukan validasi data dan menerapkan langkah-langkah keamanan seperti proteksi CSRF (Cross-Site Request Forgery) dan XSS (Cross-Site Scripting).

    1. Validasi Data

    Validasi data memastikan bahwa data yang dimasukkan oleh pengguna sesuai dengan aturan yang ditentukan sebelum data tersebut disimpan ke dalam database. Anda dapat menggunakan validator AdonisJS untuk melakukan validasi data.

    const { validate } = use('Validator');
    
    const validation = await validate(request.all(), {
      username: 'required|unique:users',
      email: 'required|email|unique:users',
      password: 'required|min:6',
    });
    
    if (validation.fails()) {
      session.withErrors(validation.messages()).flashAll();
      return response.redirect('back');
    }Code language: JavaScript (javascript)

    2. Proteksi CSRF

    Proteksi CSRF adalah langkah keamanan yang memastikan bahwa formulir hanya dapat disubmit dari situs web yang sama. AdonisJS menyediakan proteksi CSRF otomatis dengan menghasilkan token CSRF unik untuk setiap sesi pengguna.

    <form action="/profile" method="post">
      <input type="hidden" name="_csrf" value="{{ csrfField }}">
      <!-- Form fields -->
      <button type="submit">Simpan Perubahan</button>
    </form>Code language: HTML, XML (xml)

    3. Proteksi XSS

    Proteksi XSS memastikan bahwa aplikasi Anda tidak rentan terhadap serangan injeksi skrip lintas-situs. AdonisJS secara otomatis melindungi Anda dari serangan XSS dengan menghindari penyisipan HTML yang tidak aman.

    const sanitized = Antl.escape('Hello <script>alert("XSS")</script>');
    // Output: Hello &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;Code language: HTML, XML (xml)

    4. Keamanan Lainnya

    Selain proteksi CSRF dan XSS, pastikan untuk menerapkan praktik keamanan lainnya seperti:

    • Menggunakan HTTPS untuk mengenkripsi data yang ditransfer antara server dan klien.
    • Menyimpan kata sandi pengguna dalam bentuk hash yang aman.
    • Melakukan otentikasi dan otorisasi pengguna secara ketat.

    Dengan menerapkan langkah-langkah validasi data dan keamanan ini, Anda dapat memastikan bahwa aplikasi Anda aman dari serangan potensial dan data yang dimasukkan oleh pengguna valid dan terpercaya. Ini adalah langkah penting dalam membangun aplikasi web yang aman dan handal menggunakan AdonisJS.


    0 Comments

    Leave a Reply

    Avatar placeholder