Created with to build something
Version: 5.0.5
cover-adonis-js-melakukan-validasi-masukkan-dengan-validator

Codding

Adonis JS: Melakukan Validasi Masukkan Dengan Validator

Materi ini membahas mengenai validator yang biasa digunakan untuk melakukan validasi input dari client sehingga pesan kesalahan teknis tidak tampil.

Apr 18, 2020

Sistem pada umumnya digunakan untuk memproses sebuah masukkan (input) dari client atau pengguna untuk diolah menjadi data yang baru atau diolah menjadi sebuah informasi, terkadang hal seperti ini bisa kandas atau gagal karena sebuah kesalahan dari pengguna saat memasukkan sebuah data ke dalam sebuah form yang disediakan. Sehingga jika terjadi kesalahan pada saat memasukkan data secara otomatis sistem akan menampilkan pesan error yang mungkin tidak semua orang tahu mengenai arti pesan kesalahan tersebut, terlebih lagi pesan kesalahan yang ditampilkan secara default menampilkan informasi teknis sehingga ini mungkin menjadi sesuatu yang rentan dalam hal keamanan.

Ada beberapa cara termudah yang bisa dilakukan seperti menambahkan sebuah properti required pada tag html <input> atau bisa juga dengan menyesuaikan properti type pada tag html input, ini mungkin adalah cara yang mudah dan lumayan meringankan pekerjaan backend dalam melakukan validasi. Akan tetapi dalam kondisi tertentu kita membutuhkan validasi yang lebih banyak sehingga hal - hal yang bersifat sederhana akan mulai ditinggalkan, dalam kasus ini adonis telah menyediakan sebuah validator yang digunakan untuk melakukan validasi masukkan yang diterima.

Pemasangan Validator

Secara default modul validator tidak dipasangkan pada adonis saat pertama kali melakukan instalasi, baik itu jika anda menggunakan boilerplate fullstack maupun api-only, validator pada adonis bersifat opsional dan tidak semua sistem membutuhkan modul validator ini. Jadi sebelum melakukan percobaan pastikan packages @adonisjs/validator telah terdaftar pada file packages.json, jika tidak anda perlu menambahkan ini menggunakan adonis cli.

adonis install @adonisjs/validator

Jenis Penggunaan Validator

Pada adonis pemasangan validator dapat di lakukan dengan dua cara yaitu dengan menyematkan validator pada route yang terdaftar atau dipasangkan langsung pada file controller.

Pemasangan Validator Pada Controller

Jenis penggunaan validator ini biasanya hanya digunakan pada satu controller atau hanya dipakai pada satu method dari file controller, karena seluruh kondisi validator terdapat pada controller saya sendiri tidak menyarankan menggunakan cara ini terkecuali jika validator tersebut tidak digunakan pada method lain atau controller lain. Adapun contoh penggunaannya adalah sebagai berikut :

const { validate } = use('Validator')

class UserController {

  async store ({ request, session, response }) {
    const rules = {
      email: 'required|email|unique:users,email',
      password: 'required'
    }

    const validation = await validate(request.all(), rules)

    if (validation.fails()) {
      session
        .withErrors(validation.messages())
        .flashExcept(['password'])

      return response.redirect('back')
    }

    return 'Validation passed'
  }
}

module.exports = UserController

Pemasangan Validator Pada Route

Jenis penggunaan validator ini biasa digunakan di lebih dari satu route sehingga kamu tidak perlu menulis ulang aturan validator disetiap route, cukup dengan menggunakan method validator() pada route yang ingin dipasangkan validator. Cara ini lebih dianjurkan karena sebelum controller dieksekusi, validator akan bekerja terlebih dahulu untuk memeriksa apakah masukkan yang diterima telah sesuai dengan aturan atau tidak. Untuk membuat validator kamu hanya perlu menjalankan adonis cli untuk membuat file validator pada App\Validators

adonis make:validator [nama_validator]

Setelah perintah pada adonis cli di lakukan dan berhasil di eksekusi maka kurang lebih kamu akan membuat sebuah validator dengan menggunakan format berikut :

"use strict";

class AuthSignUp {
  get rules() {
    return {
      // Untuk mendefinisikan aturan
    };
  }

  get messages() {
    return {
      // Untuk mendefinisikan pesan jika masukkan tidak sesuai aturan
      // method ini hanya digunakan untuk mengubah pesan kesalahan dari adonis
    };
  }

  get validateAll() {
    // Untuk mendefinisikan apakah semua aturan di validasi dengan mereturn tipe data boolean
  }
}

module.exports = AuthSignUp;

Setelah file validator telah siap digunakan anda hanya perlu menambahkan method validator pada route yang di inginkan.

  Route.post("signup", "AuthController.createUser")
    .as("auth.createUser")
    .middleware(["guest"])
    .validator("Auth/SignUp");

Kondisi Yang Divalidasi

Poin utama validator dalam bekerja terletak pada rules masukkan yang divalidasi dengan beberapa daftar kondisi pada modul validator, pada adonis ada banyak kondisi yang divalidasi diantaranya yang sering digunakan seperti :

  1. Required (Masukkan yang wajib di isi)
  2. Min (Jumlah minimum karakter yang di isi)
  3. Max (Jumlah minimum karakter yang di isi)

Ada juga kondisi seperti tipe masukkan yang divalidasi seperti :

  1. number (Hanya masukkan angka)
  2. string (Hanya memasukkan tipe data string)
  3. email (Hanya memasukkan tulisan yang memiliki format email seperti @)
  4. unique (Hanya dapat memasukkan data yang unik atau tidak sama dengan yang lain)

Untuk melihat daftar - daftar kondisi yang divalidasi, anda perlu mengunjungi halaman ini.

Contoh Penggunaan

Dalam beberapa kasus seperti pendaftaran akun sebuah aplikasi, tentunya validator sangat berfungsi untuk mencegah terjadinya munculnya pesan kesalahan sistem, meskipun pada tujuan pembuatannya sama - sama untuk menampilkan pesan kesalahan ketika ada yang salah namun lebih baik jika validator digunakan untuk mengurangi penyalahgunaan.

Saya akan membuat sebuah method pada controller untuk membuat form pendaftaran akun pada aplikasi Question and Answer yang terdapat pada repositori saya, untuk prosesnya atau kode yang ditulis bisa kamu lihat dibawah ini :

  // Menampilkan Form Pendaftaran
  async signUp({ view }) {
    return view.render("auth.signup");
  }

  // Mengeksekusi Perintah Pembuatan Akun
  async createUser({ request, response, session }) {
    const { username, password, email } = request.all();
    const user = new User();
    user.username = username;
    user.password = password;
    user.email = email;

    // const created = null;
    const created = await user.save();

    if (created) {
      session.flash({ notification: "Akun telah berhasil terdaftar !" });
      return response.route("auth.loginForm");
    }

    session.flash({ notification: "Terjadi Kesalahan !" });
    return response.route("auth.signup");
  }

Karena saya menggunakan validator pada route, maka saya perlu membuat validator dengan menggunakan adonis cli dan mendefinisikan aturan yang divalidasi, pesan kesalahan yang muncul dan apakah semua aturan divalidasi.

"use strict";

class AuthSignUp {
  get rules() {
    return {
      // Username harus di isi dan harus unik
      username: "required|unique:users",
      // Email harus di isi, sesuai dengan format email dan harus unik
      email: "required|email|unique:users",
      // Password harus di isi
      password: "required",
    };
  }

  get messages() {
    return {
      // Ketika username tidak disi
      "username.required": "Username wajib di isi !",
      // Ketika username telah digunakan oleh orang lain
      "username.unique": "Username ini sudah digunakan !",
      // Ketika email tidak di isi
      "email.required": "Email wajib di isi !",
      // Ketika format penulisan email tidak benar
      "email.email": "Format penulisan email tidak benar !",
      // Ketika email telah digunakan orang lain
      "email.unique": "Email ini sudah digunakan !",
      // Ketika password tidak di isi
      "password.required": "Password wajib di isi !",
    };
  }

  get validateAll() {
    return true;
  }
}

module.exports = AuthSignUp;

File validator telah siap, saatnya saya untuk memilih route mana yang ingin di pasangkan validator. pada file start\routes.js

  Route.post("signup", "AuthController.createUser")
    .as("auth.createUser")
    .middleware(["guest"])
    .validator("Auth/SignUp");

Supaya kamu tidak bingung, saya akan melampirkan file view yang digunakan untuk menampilkan halaman pendaftaran.

@layout('layouts.default')
@section('title')
  <title>Pendaftaran Akun</title>
@endsection

@section('hero')
<section class="hero is-medium is-primary is-bold">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Pendaftaran Akun
      </h1>
      <h2 class="subtitle">
        Anda dapat melakukan diskusi setelah bergabung
      </h2>
    </div>
  </div>
</section>
@endsection

@section('content')
<div class="box">
  @if(flashMessage('notification'))
    <div class="notification is-info">
      {{ flashMessage('notification') }}
    </div>
  @endif
  <form action="{{ route('auth.createUser') }}" method="POST">
    {{ csrfField() }}
    <div class="field">
      <label for="username" class="label">Username</label>
      <div class="control">
        <input type="text" name="username" placeholder="Masukkan Username" class="input" required />
      </div>
      @if(hasErrorFor('username'))
        <p class="has-text-danger">{{ getErrorFor('username') }}</p>
      @endif
    </div>
    <div class="field">
      <label for="email" class="label">Email</label>
      <div class="control">
        <input type="email" name="email" placeholder="Masukkan Email" class="input" required />
      </div>
      @if(hasErrorFor('email'))
        <p class="has-text-danger">{{ getErrorFor('email') }}</p>
      @endif
    </div>
    <div class="field">
      <label for="password" class="label">Password</label>
      <div class="control">
        <input type="password" name="password" placeholder="Masukkan Password" class="input" required />
      </div>
      @if(hasErrorFor('password'))
        <p class="has-text-danger">{{ getErrorFor('password') }}</p>
      @endif
    </div>
    <button type="submit" class="button">Daftar Sekarang</button>
  </form>
</div>
@endsection

Hasil Contoh Penggunaan

Saat saya menyelesaikan validator, controller dan route saya mencoba untuk memasukkan data yang dapat menampilkan pesan kesalahan tersebut. Contoh tersebut hanya dilakukan saat kondisi setiap field memiliki data yang sama dengan data yang lain pada basis data, sehingga pesan kesalahan unique akan ditampilkan.

alt images

Source Code

Jika anda menginginkan source code sebagai bahan referensi dari tutorial ini, anda bisa melihat file commit Validator Request dan Authentication Lanjutan.

Cover Images By : Business vector created by rawpixel.com - www.freepik.com

Ingin Berkomentar ?

Gunakan fitur komentar dengan bijak demi keamanan dan kenyamanan anda saat berselancar di dunia maya ini, mungkin undang - undang atau peraturan dari sebagian wilayah akan menjerat aktivitas yang ada pada kolom komentar.