Tutorial PayloadCMS Bagian 1 Payload Config Dan Bagaimana PayloadCMS bekerja.

Bismillah.

Pada project payloadcms ada satu file yang sangat penting yang menjadi fondasi dasar dari aplikasi. File itu adalah payload-config.ts . Payload config ini berisi semua konfigurasi dari aplikasi payloadCMS kita. Coba perhatikan contoh kode payload-config.ts yang ada di bawah ini :

// storage-adapter-import-placeholder
import { payloadCloudPlugin } from '@payloadcms/payload-cloud'
import { lexicalEditor } from '@payloadcms/richtext-lexical'
import path from 'path'
import { buildConfig } from 'payload'
import { fileURLToPath } from 'url'
import sharp from 'sharp'
import { postgresAdapter } from '@payloadcms/db-postgres'

import { Users } from './collections/Users/config'
import { Posts } from './collections/Posts/config'
import { Categories } from './collections/Categories/config'
import { Media } from './collections/Media'
import { defaultLexical } from './fields/editor/lexical-editor'
import { s3Storage } from '@payloadcms/storage-s3'
import getCloudStoragePlugin from './plugins/cloud-storage-plugin'

const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)

export default buildConfig({
  admin: {
    user: Users.slug,
    importMap: {
      baseDir: path.resolve(dirname),
    },
    meta: {
      icons: [
        {
          url: '/favicon.svg',
          rel: 'icon',
          type: 'image/svg+xml',
        },
      ],
    },
  },
  collections: [Users, Posts, Categories, Media], // -> kita tambahkan pada bagian ini
  editor: defaultLexical,
  secret: process.env.PAYLOAD_SECRET || '',
  typescript: {
    outputFile: path.resolve(dirname, 'payload-types.ts'),
  },
  db: postgresAdapter({
    // Postgres-specific arguments go here.
    // `pool` is required.
    pool: {
      connectionString: process.env.DATABASE_URL,
    },
  }),

  localization: {
    locales: ['en', 'id'],
    defaultLocale: 'id',
  },
  sharp,
  plugins: [
    payloadCloudPlugin(),

    getCloudStoragePlugin(),
    // storage-adapter-placeholder
  ],
})

Kita bisa lihat pada kode diatas ada beberapa konfigurasi dasar, yang mana sudah disediakan oleh payloadCMS ketika kita membuat project pertama kali.

Attribute Admin Untuk Mengatur Admin Control Panel.

Pada attribute admin kita bisa mengubah-ubah bagaimana tampilan admin payloadcms, bagaimana komponen kustom kita dirender di sana, table apa dari database kita yang kita gunakan untuk mengakses admin panel, icon apa yang nantinya akan ditampilkan pada aplikasi kita dan banyak konfigurasi yang lainnya. PayloadCMS memberikan kesempatan kepada developer untuk mengkustom komponen admin panelnya pada attribute admin ini.

Ada juga yang tidak kalah penting di attibute admin ini adalah importmap. Fitur ini memungkinkan Payload untuk mengimpor atau menyuntikkan komponen React dari luar sistemnya. Dengan ada nya fitur import map ini, maka developer akan mudah melakukan modifikasi tampilan admin control panel tanpa mengubah kode sumber PayloadCMS. Karena payload akan melakukan injeksi react component kepada sistemnya, maka payload harus tahu dari file mana dia harus melakukan injeksi kepada sistemnya. Sehingga jika kalian melihat pada direktori di bawah ini, maka akan ada file importMap.js

Kita tidak akan menulis kode di importmap ini, akan tetapi payload yang akan men-generatenya untuk kita. File importMap.js ini bisa digenerate oleh payload dengan menggunakan command :
pnpm run generate:importmap . Command ini sebenarnya sudah didefinisikan di dalam script section di file package.json kita. Seperti ini deklarasinya :
"generate:importmap": "cross-env NODE_OPTIONS=--no-deprecation payload generate:importmap",

Saya akan bahas import map ini dipembahasan lebih lanjut.

Attribute Collection untuk Mendefinisikan Table dalam aplikasi kita

Di dalam payloadcms, Collection itu adalah representasi dari table yang ada di sistem kita. Kita bisa mendefinisikan berbagai table dan relasinya disini. Semua Collection yang ada disini akan otomatis dibuatkan model nya oleh payloadcms. Sehingga sedikit saja terjadi perubahan maka payload akan melakukan migrasi pada database kita. Berhati-hatilah dalam mengubah-ubah isi dari collections.

Attribute db — Konfigurasi Database

Attribute db digunakan untuk mengatur koneksi ke database yang digunakan aplikasi kita.
PayloadCMS saat ini mendukung tiga jenis database, yaitu:

1. MongoDB – database pertama yang didukung oleh Payload sejak versi awal.
2. PostgreSQL – pilihan populer untuk performa dan relasi yang kompleks.
3. SQLite – cocok untuk pengembangan lokal atau proyek kecil karena sifatnya yang ringan dan tanpa server.

Konfigurasi db biasanya berisi URI, opsi koneksi, dan parameter tambahan seperti pool size atau SSL.

Attribute editor — Pengaturan Editor di Admin Panel

Attribute editor digunakan untuk mengatur perilaku Rich Text Editor (RTE) di dalam admin panel PayloadCMS.
Dengan editor, kita bisa menentukan:

• Plugin atau fitur yang diaktifkan (seperti bold, italic, link, image, code block, dll)
• Toolbar yang muncul di editor
• Komponen React custom untuk memperluas kemampuan editor

Contohnya, kamu bisa menambahkan plugin custom untuk menambahkan syntax highlighting, embed video, atau custom formatting yang sesuai kebutuhan bisnis.

Attribute localization — Dukungan Multi Bahasa

Attribute localization digunakan jika aplikasi kita perlu mendukung multi-bahasa (multilingual).
Dengan mengaktifkan fitur ini, Payload akan membuat setiap field di dalam koleksi memiliki versi per bahasa yang didukung.

Contohnya, jika kamu mendukung bahasa en dan ar, maka setiap field title akan memiliki title_en dan title_ar.
Selain itu, admin UI juga akan memiliki opsi untuk mengganti bahasa saat mengedit data.

Contoh konfigurasi: