Tutorial PayloadCMS Bagian 2 - Collection Config Sebagai Fondasi Sistem

Bismillah.

CollectionConfig, di dalama payload akan merepresentasikan table database dalam sistem yang kita buat. Dia memiliki attribute yang berguna untuk sistem kita. Ada 2 attribute yang wajib diisi oleh kita, slug dan fields. Slug ini secara sederhana bisa dibilang adalah nama table dalam sistem yang akan kita buat, sedangkan fields adalah nama kolom di dalam table yang kita buat.

Selain kedua attribute tersebut, payload juga memiliki beberapa attribute yang berguna untuk bisa kita gunakan dalam aplikasi kita. Contohnya ada attribute trash untuk mengaktifkan soft delete pada aplikasi kita, ada attribute admin, untuk mengatur sebagian besar tampilan di Admin Kontrol Panel. Ada juga attribute hooks yang digunakan untuk 'mendegarkan' event yang terjadi di dalam aplikasi kita, saya akan jelaskan ini nanti.

Contoh Implementasi Collection dalam sebuah aplikasi.

Agar bisa memahami lebih mendalam dan bisa mendapatkan gambaran untuh tentang Collection Config, mari kita coba praktikkan bagaimana membuat CollectionConfig pada aplikasi kita. Contoh kita akan membuat sebuah aplikasi yang bisa menyimpan kontak. Di dalam kontak memiliki attribute : nama, email, telepon dan alamat. Maka kita bisa definisikan Collection Config kita menjadi seperti ini :

import { CollectionConfig } from 'payload'

export const Contact: CollectionConfig = {
  slug: 'contact',
  fields: [
    {
      name: 'name',
      type: 'text',
      required: true,
    },
    {
      name: 'email',
      type: 'email',
      required: true,
    },
    {
      name: 'phone',
      type: 'number',
    },
    {
      name: 'address',
      type: 'textarea',
    },
  ],
}

Jika kita cermati maka fields ini adalah array yang memiliki kumpulan object field yang setiap object memiliki, attribute, name untuk mendefinisikan nama kolom kita, type untuk mendefinisikan tipe dari kolumn kita kita, dan disini ada fields yang saya konfigurasi dengan menambahkan attribute required dengan nilai true ini menandakan bahwasannya field ini harus diisi.

Setelah kita membuat collection config di atas, maka kita harus menambahkannya kedalam aplikasi kita yaitu dengan menambahkannya pada file payload.config.ts, agar nantinya payload bisa membuat tablenya untuk kita. File tersebut berada pada root project kita. Sekarang perhatikan kode dibawah ini, tambahkan collection config, Contacts ,yang sudah kita buat di itu maka coba cek pada collections attribute seperti ini :

 collections: [Users, Posts, Categories, Media, Contacts], // -> kita tambahkan pada bagian ini

Kemudian setelah kita jalankan aplikasi kita dengan menggunakan pnpm run dev pada terminal kita, maka aplikasi kita akan otomatis melakukan pengecekan perubahan. Jika aplikasi kita menggunakan mongoDB maka tidak akan ada konfirmasi perubahan database, jika menggunakan postgresSql atau sqlite maka payload akan meminta konfirmasi migrasi.

Setelah itu maka otomatis payload akan membuatkan menu sebelah bagian kiri pada admin panel kita, data Contact, seperti gambar dibawah ini.

Ketika mengklik menu Contact, maka akan terlihat table seperti dibawah ini.

Operasi dasar CRUD sudah bisa kita lakukan disini.

Ada beberapa attribute dari field yang bermanfaat yang bisa kita gunakan untuk apliaksi kita. Saya tidak akan menjelaskan semua, akan tetapi saya akan jelaskan yang sering saya gunakan.

1. Label, ini digunakan untuk tampilan text label pada form. Contohnya jika kita mengganti label name pada form kita dengan Nama Kontak maka yang tampil di bagian form, di field name, maka menjadi Nama Kontak.
2. Localized, ini digunakan jika aplikasi kita mendukung multi bahasa.
3. maxLength, ini digunkan untuk membatasi panjang karakter suatu field.
4. minLength , ini digunakan untuk membatasi minimal karakter suatu field.
5. unique, dari namanya sudah jelas bahasaannya field ini adalah unik.
6. hidden, digunkan untuk menghide suatu field ini dari form. Field ini biasanya saya gunakan untuk flag yang hanya bisa diganti nilainya jika kondisi tertentu terjadi pada data kita.