Mengelola Konten dalam Strapi Headless CMS – Bag. 2
Setelah berhasil menginstal Strapi sesuai dengan panduan yang telah dijelaskan dalam tutorial sebelumnya, kita siap melangkah ke tahap berikutnya: membuat konten dalam platform ini. Tutorial ini akan membahas langkah-langkah yang perlu diambil untuk mulai menciptakan berbagai jenis konten di dalam Strapi serta bagaimana mengaksesnya melalui platform pengujian API, yaitu Postman.
Membuat Kerangka Konten
Pertama-tama kita membuat kerangka kontennya terlebih dahulu pada Content-Type Builder.
Kita bisa mengibaratkan Content-type(jenis konten) seperti kerangka untuk suatu konten. Di dalam kerangka konten, kita mendefinisikan berbagai bidang yang harus ada dalam konten dan dengan jenis data yang sesuai.
Misalnya, dalam tutorial ini kita ingin membuat kerangka konten “Website Artikel“, maka setidaknya kita harus menentukan bidang seperti “judul artikel”, dan “isi artikel” dengan jenis data masing-masing, misalnya text field. Setelah kerangka ini dibuat, kita dapat dengan mudah mengisi konten sesungguhnya ke dalam kerangka tersebut.
Dalam menu Content-Type Builder, Strapi menyediakan tiga contoh jenis kerangka konten berdasarkan fungsionalitasnya:
Collection Types (Jenis Koleksi)
Jenis ini cocok digunakan untuk mengelola konten dengan karakteristik serupa yang memiliki lebih dari satu jenis. Contohnya, pada sebuah situs web artikel, akan terdapat banyak artikel dengan judul dan isi yang berbeda-beda. Pada kasus ini, Collection Types digunakan untuk membuat jenis konten “Artikel” yang mencakup banyak artikel.Single Types (Jenis Tunggal)
Jenis ini cocok untuk mengelola konten unik yang hanya memiliki satu jenis dalam situs. Sebagai contoh, halaman beranda situs yang hanya ada satu dan memiliki “Judul” serta bagian “About Us”. Single Types digunakan untuk membuat jenis konten “Halaman Beranda.”Components (Komponen)
Komponen adalah kumpulan field yang dapat digunakan berulang kali di berbagai jenis kerangka konten. Misalnya, jika beberapa jenis kerangka konten memiliki field yang sama, Anda dapat membuat “komponen” untuk mengelompokkan field tersebut.
Untuk memperdalam pemahaman tentang ketiga jenis kerangka konten ini, silakan akses halaman berikut.
Membuat Kerangka Konten dengan jenis Collection Type
Untuk membuat konten Artikel, kita akan menggunakan “Collection Type.”
Klik ‘Create new collection type’ dan beri “Display Name” untuknya. Pastikan menamai singular, tidak plural, karena Strapi secara otomatis akan membuat plural untuk kita. Sebagai contoh, kita akan menamainya ‘article‘, dan kemudian klik ‘Continue‘.
Selanjutnya, kita perlu mendefinisikan berbagai field yang berbeda di dalamnya.
Pertama, kita ingin memiliki field judul dengan jenis teks pendek, maka klik ‘Text‘.
title‘ pada field ini.
Jika perlu, kita juga dapat mengatur nilai default, membuatnya menjadi field wajib, atau field unik agar tidak ada dua judul artikel yang sama.
Jika sudah, klik ‘+ Add another field‘.
Selanjutnya, tambahkan field ‘body‘ sebagai isi artikel, dan pilih jenis “Rich Text” agar kita dapat menambahkan format seperti teks tebal, teks bergaris bawah, multimedia dan beberapa lainnya.
Setelah mengatur semua field yang diperlukan, klik ‘Finish‘.
Dan simpan perubahan dengan klik ‘Save‘.
Mengisi Konten
Sekarang kita sudah memiliki kerangka konten untuk menampilkan Artikel-artikel kita.
Untuk mulai mengisi konten artikelnya, buka ‘Content Manager’, kemudian klik ‘Add new entry‘ pada kerangka konten ‘article” yang baru saja kita buat.
Isilah konten artikel dengan data yang sesuai, seperti judul, dan isi artikel. Jika sudah, klik ‘Save‘ dan pastikan untuk ‘Publish‘ konten agar dapat ditampilkan pada output.
Konfigurasi Pengguna & Izin Akses Data Konten
Setelah kita memiliki konten artikel yang ingin ditampilkan, langkah selanjutnya adalah mengatur izin akses data sebelum dapat diakses oleh publik. Dengan mengikuti langkah-langkah berikut, kita dapat memastikan bahwa data konten hanya dapat diakses oleh pengguna yang memiliki izin yang sesuai.
Untuk mengatur konfigurasi ini, kembali ke panel Strapi, lalu pergi ke ‘Settings’ -> ‘Users & Permissions Plugin’ -> ‘Roles.’
Perlu diingat bahwa di sini ada dua menu “Roles”, yaitu roles di Administration Panel dan roles di Users & Permissions Plugin.
Roles di Administration Panel
- Digunakan untuk mengelola izin terkait administrasi Strapi.
- Pengguna ini memiliki akses ke panel administrasi Strapi.
- Terdapat tiga tipe: Author, Editor, dan Super Admin, dengan hak akses yang berbeda.
Roles di Users & Permissions Plugin
- Pengguna ini dapat login ke aplikasi tetapi tidak memiliki akses ke panel administrasi Strapi.
- Mereka dibatasi oleh apa yang ditampilkan di bagian frontend aplikasi saja.
- Terdapat dua tipe: Authenticated, dan Public
Perbedaan antara kedua jenis pengguna ini terletak pada peran dan akses yang mereka miliki. “Roles di Administration Panel” digunakan untuk mengelola izin terkait administrasi Strapi itu sendiri, sedangkan “Users & Permissions Plugin” digunakan untuk mengelola izin terkait akses dan manipulasi data oleh pengguna eksternal melalui frontend aplikasi saja.
Untuk kasus ini, kita akan menggunakan roles di “Users & Permissions Plugin.”
Klik pada ‘Public‘, yang merupakan peran untuk semua pengunjung yang browsing ke situs kita tanpa melakukan login.
Anda akan melihat daftar semua jenis konten di sini, termasuk yang baru saja kita buat yaitu ‘Article.’ Pilihan tersebut akan secara otomatis bertambah jika Anda membuat jenis konten baru.
Yang perlu kita lakukan sekarang adalah mencentang kotak yang memungkinkan akses publik. Dalam hal ini, kita hanya akan mencentang “Find” dan “FindOne.” Dengan demikian, orang publik hanya dapat melihat data yang ada di dalam konten “Article.”
Berinteraksi dengan Konten Menggunakan Postman
Oke, setelah memiliki konten dan mengatur izin publiknya, tujuan akhir kita adalah ingin memanggil dan berinteraksi dengan data artikel ini melalui frontend website agar dapat diakses oleh pengunjung publik.
Namun, untuk memulai, saya ingin kita melakukan uji coba pada endpoint menggunakan Postman. Postman adalah alat gratis yang luar biasa yang berguna untuk menguji endpoint REST API kita dan melakukan berbagai jenis permintaan CRUD (Create, Read, Update, Delete).
Buka Postman dan buat “Collection” baru dengan nama semisal ‘Strapi.’
Lanjutkan dengan membuat permintaan API baru di dalamnya.
Pastikan permintaan API tersebut sesuai dengan kebutuhan pengujian yang ingin kita lakukan. Misalnya, jika ingin menguji fungsi pembuatan data baru, kita dapat membuat permintaan POST. Atau jika ingin mengambil data yang sudah ada, kita dapat membuat permintaan GET.
Menampilkan Data
▶ Banyak Data
Sebagai contoh pertama, kita akan mencoba “Get Articles” dengan menggunakan metode GET.
URL permintaan (Request URL) terdiri dari endpoint dari server Strapi yang kita gunakan, ditambah dengan URL dari jenis konten yang ingin kita akses, seperti ini:
GET http://163.53.195.233:1337/api/articles
Kemudian klik ‘Send‘.
Maka output dari respons API tersebut akan ditampilkan.
▶ Single Data
Sekarang, untuk memanggil data tunggal, kita dapat menggunakan endpoint berikut:
GET http://163.53.195.233:1337/api/articles/1
Dengan menggunakan URL endpoint di atas, kita akan mendapatkan data artikel dengan ID “1”. Pastikan ID yang Anda masukkan sesuai dengan ID yang benar untuk artikel yang ingin Anda akses.
▶ Field Tertentu
Untuk mengambil data dengan hanya memilih beberapa field tertentu, kita bisa mengganti URL endpoint dengan menambahkan parameter ‘fields.’ Misalnya, untuk menampilkan hanya field “title“, “body“, dan “publishedAt“, gunakan endpoint seperti berikut:
GET http://163.53.195.233:1337/api/articles?fields=title&fields=body&fields=publishedAt
▶ Relasi Antar Konten
Dalam konsep situs artikel, baiknya setiap artikel dapat memiliki banyak kategori di dalamnya. Untuk mencapai ini, kita perlu membuat relasi antara ‘Content-Type Article’ dengan ‘Content-Type Category.’
Kita perlu membuat content-type baru yaitu ‘Category‘ dengan kerangka konten yang sesuai.
Dan mengisi kontennya melalui ‘Content Manager.’
Setelah itu, kita masuk kembali ke ‘Content-Type Builder’, pada Article, kita klik ‘Add another field‘, kemudian pilih ‘Relation.’
Kita akan menggunakan tipe relasi ‘Many to Many,’ karena setiap artikel dapat terhubung dengan banyak kategori, dan sebaliknya. Jika Anda sudah mengenal relasi di dalam sistem pengelolaan database, maka tipe relasi ini akan terasa familiar.
Setelah selesai, klik ‘Finish‘ dan simpan perubahan.
Sekarang, kita bisa mencoba mengedit konten artikel yang telah kita buat sebelumnya.
Pada bagian bawah halaman, akan muncul field untuk memilih kategori yang akan dihubungkan dengan artikel tersebut sesuai kebutuhan.
Jika kita ingin melakukan pengembangan relasi lainnya, kita dapat menambahkan relasi sesuai dengan kebutuhan kita.
▶ Pengunaan Populate
Dalam operasi dasar REST API Strapi, secara default tidak akan melakukan populate pada relasi, media fields, komponen, atau zona dinamis untuk alasan performa.
Pertama-tama, pastikan sudah membuka Public permissions untuk jenis konten ‘Category’ seperti di section sebelumnya.
Untuk melakukan populate, kita perlu memodifikasi URL endpoint-nya.
- Untuk menampilkan data category yang terhubung di dalam tiap artikel, gunakan URL ini:
GET http://163.53.195.233:1337/api/articles?populate=categories
- Jika memiliki banyak relasi dalam konten artikel dan ingin mempopulate one level deep(satu level kedalam) semua relasi tersebut, gunakan wildcard (*) seperti ini:
GET http://163.53.195.233:1337/api/articles?populate=*
Strapi juga mendukung populate hingga beberapa level yang lebih dalam. Dokumentasinya dapat dilihat di link berikut.
Dengan menggunakan populate, Anda dapat mengambil data yang lebih lengkap dan terhubung dari berbagai relasi dengan lebih efisien.
▶ Kombinasi Population dengan Operator Lain
Dalam Strapi, kita dapat menggabungkan operasi populate dengan beberapa operator lainnya untuk mendapatkan hasil data yang lebih spesifik. Hal ini memungkinkan kita untuk memfilter data yang akan ditampilkan sesuai dengan kebutuhan kita.
Misalnya, jika kita ingin menampilkan artikel dengan kolom “judul”, “isi artikel”, dan “tanggal dipublikasi”, serta menggabungkannya dengan data kategori hanya dengan kolom “nama kategori”, kita dapat menggunakan endpoint berikut:
GET http://163.53.195.233:1337/api/articles?fields=title&fields=body&fields=publishedAt&populate[categories][fields]=name
Dengan menggunakan endpoint ini, kita akan mendapatkan hasil data artikel yang telah difilter sesuai dengan field yang diinginkan, dan data kategori yang hanya akan menampilkan kolom “nama kategori.”
Selain itu, kita juga dapat menggunakan beberapa level populate dengan menambahkan parameter tambahan. Misalnya, jika kita ingin menggabungkan lebih dalam dengan level populate kedua, kita dapat menggunakan endpoint berikut:
GET http://163.53.195.233:1337/api/articles?fields=title&fields=body&fields=publishedAt&populate[categories][populate][0]=subcategories
Kita bisa memanfaatkan tool “✨Interactive Query Builder” dari Strapi untuk menghasilkan URL query yang lebih kompleks, daripada kita menulisnya secara manual.
Mengelola Data
Untuk memasukkan data ke dalam aplikasi Strapi, sebaiknya hanya pengguna yang sudah terautentikasi yang diizinkan, sesuai dengan pembahasan pada bagian ‘Role’ seperti yang telah kita ketahui di atas.
Sebagai contoh, di sini saya telah membuat Content-Type “Comment“, di mana saya telah mengatur role “Authenticated” menjadi seperti ini. Hal ini dilakukan karena saya ingin hanya pengguna yang sudah terotentikasi yang dapat menulis komentar untuk artikel.
Tabel “User” adalah tabel yang digunakan untuk menyimpan data pengguna yang sudah terautentikasi di aplikasi kita. Di dalam tabel ini, informasi pengguna seperti username, email, dan password akan disimpan dan dapat diakses untuk proses otentikasi.
▶ Mendaftarkan Pengguna
Untuk mendaftarkan pengguna terotentikasi, kita akan menggunakan endpoint berikut.
POST http://163.53.195.233:1337/api/auth/local/register
Dan gunakan format data berikut dalam Request Body Postman:
{
"username" : "Commenter 1",
"email" : "commenter1@comment.com",
"password" : "password123"
}
Dalam permintaan POST ini, kita harus menyertakan kredensial pengguna seperti username, email, dan password sebagai data input.
Setelah permintaan berhasil, Strapi akan mengenkripsi password dan menyimpan data pengguna baru di tabel “User.”
Setelah berhasil mendaftar dan data disimpan di tabel “User,” pada respons API juga akan dihasilkan JSON Web Token (JWT) untuk pengguna tersebut.
JWT harus disimpan dengan aman karena akan digunakan untuk mengidentifikasi dan mengautentikasi pengguna pada permintaan API selanjutnya. JWT akan dijadikan bagian dari header permintaan API sebagai Bearer Token untuk melakukan tindakan yang membutuhkan otentikasi di aplikasi.
▶ Menambahkan Data
Coba kita sekarang menambahkan komentar di Artikel dengan endpoint berikut:
POST http://163.53.195.233:1337/api/comments
Kemudian gunakan format data berikut pada Request Body:
{
"data": {
"comment" : "bagus, keep up the good work",
"article" : 1
}
}
Tuju ke tab ‘Auth’, kemudian pilih “Bearer Token” pada opsi “Type”, dan isikan JWT pada isian yang tersedia. Setelah itu, klik ‘Send‘ jika sudah selesai.
Terpantau data komentar berhasil tertambahkan.
Tak ada salahnya bagi Anda yang tertarik dengan konsep kerja Strapi untuk membaca dokumentasi lebih lengkapnya. Anda dapat menemukan informasi intro di sini:
Untuk informasi lebih spesifik tentang aktivitas CRUD yang dapat dilakukan dengan REST API Strapi, Anda bisa melihat pada dokumentasi berikut:
- CRUD dengan REST API Strapi: https://docs.strapi.io/dev-docs/api/rest/
Kesimpulan
Dalam tutorial ini, kita telah memahami langkah-langkah untuk membuat dan mengelola berbagai jenis konten menggunakan Strapi.
Selain itu, kita juga mengenal Postman sebagai alat uji untuk berinteraksi dengan endpoint REST API Strapi.
Kita akan melanjutkan seri tutorial Strapi ini dengan fokus selanjutnya pada mengimplementasikan data dari backend Strapi ke frontend menggunakan React.
Jika Anda belum mengenal atau belum familiar dengan Strapi, jangan khawatir, ada tutorial sebelumnya yang membahas dasar-dasarnya.
Untuk tutorial lain seputar pemanfaatan Cloud Raya, Anda dapat mengeksplorasi halaman Knowledge Base kami.