Strapi adalah Content Management Framework (CMS) *open source* yang dikembangkan untuk membantu developer membangun API dengan jauh lebih mudah. Strapi dikembangkan di atas lingkungan Node.js yang sudah terbukti kehandalannya. Berikut beberapa fitur Strapi:

* Admin panel bawaan yang bisa di kostumisasi sesuai kebutuhan. Artinya kita bisa mengubah gaya maupun logika admin panel tersebut.  
* Sistem plugin yang memungkinkan developer menambah fitur server API dengan sesuai keinginan. 
* Front-end agnostic yang artinya bagiian frontend Strapi bisa dipasangkan dengan framework apapun (React, Vue, Angular, dsb.). 
* Sistem keamanan standar (CSRF, CORS, P3P, Xframe, XSS, dsb.) yang sudah dibungkus langsung ke dalam Strapi. 
* Berbasis komunitas sehingga memungkinkan Strapi untuk terus berkembang sebagai *free and open source software*. 

## Membuat API Blog Sederhana

Di tutorial ini kita akan belajar bagaimana membuat API blog sederhana yang mendemonstrasikan kemampuan Strapi. 

### Pemasangan Strapi

Untuk menggunakan Strapi pastikan untuk memasang aplikasi-aplikasi berikut terlebih dahulu. 

* Node.js >= 10.x
* NPM >= 6.x
* Salah satu database berikut: MongoDB >= 3.x, MySQL >= 5.6, MariaDB >= 10.1, PostgreSQL >= 10

Strapi bisa pasang menggunakan NPM. Jalankan perintah berikut di terminal:

```
$ npm install strapi@alpha -g
```

Jika muncul pesan yang mengatakan masalah *permission*, tambahan perintah sudo sebelum npm. 

Berikutnya periksa versi Strapi yang terpasanga:

```
$ strapi -v
```

Saat tulisan ini dibuat versi Strapi yang penulis miliki adalah 3.0.0-alpha.17. 

### Membuat project baru

Sekarang mari kita buat project baru dengan aplikasi `strapi` yang telah terpasang. Buka aplikasi terminal lalu jalankan perintah berikut:

```
$ strapi new blog
```

Kita akan diminta memilih produk database yang ingin dipakai. Di sini penulis akan menggunakan MySQL saja. 

```
Lets configurate the connection to your database:
? Choose your main database: MySQL
? Database name: blog
? Host: 127.0.0.1
? Port: 3306
? Username: root
? Password: 
```

Pastikan bahwa database bernama `blog` sudah dibuat sebelum melakukan konfigurasi database. 

### Run the Server

Sekarang mari kita jalankan server ini. 

```
$ cd blog
$ strapi start
```

Server Strapi bisa diakses melalui alamat `http://localhost:1337` dan saat pertama kali di jalankan akann membawa kita ke `http://localhost:1337/admin/plugins/users-permissions/auth/register` untuk melakukan registrasi admin. 

![](https://i.ibb.co/9HLXfJQ/Screenshot-from-2019-01-02-10-49-15.png)

Jika sudah mengisi seluruh data yang diminta klik **Ready to start**. *Checckbox di atas tombol Ready to start bersifat opsional. Hanya centang jika kamu ingin menerima informasi terbru lewat email dari pengembang Strapi.*

Berikut tampilan dashboard Strapi saat pertama kali dimuat. 

![](https://i.ibb.co/tzGYM2P/Screenshot-from-2019-01-02-10-53-48.png)

### Membuat Content Type

Content Type adalah istilah yang digunakan oleh Strapi untuk mendefinisikan objek data yang ia miliki. Kita bisa mengatur setiap Content Type untuk memiliki nama, jenis data dan jenis media yang bisa disimpan ke dalam Content Type tersebut. 

Strapi memiliki sebuah fitur bernama **Content Type Builder**, sebuah antarmuka yang membantu mendefinisikan struktur Content Type dengan beberapa klik saja.  Karena kita akan membuat API untuk sebuah blog, maka mari kita buat sebuah Content Type untuk artikel. 

Pertama, buka halaman Content Type Builder melalui menu yang ada di bagian sebelah kiri. Berikutnya klik tombol **Add Content Type** di tombol yang ada di sebelah kanan (perhatikan panah merah pada gambar di bawah):

![](https://i.ibb.co/ZN6Dd99/Selection-001.png)

Sebuah form dalam bentuk modal akan muncul.isikan kolom **name** dengan nama Content Type yang akan dibuat. Untuk pilihan **connection** biarkan saja *default*. Kolom **description** boleh di isi boleh juga  tidak. Klik tombol **save** setelah selesai. 

![](https://i.ibb.co/VtWg8WP/Selection-002.png)

Setelah membuat Content Type, kita akan diminta menentukan jenis field/kolom yang kita ingin ada di dalam Content Type tersebut. Agar tetap sederhana, mari kita tambahkan tiga kolom bernama `judul`, `isi`,  dan `sampul` yang masing-masing berjenis `string`, `text`, dan `media`. Gunakan tombol **Add new field** untuk menambahkannya. 

![](https://i.ibb.co/6BFB7RC/Selection-003.png)

#### Jenis data untuk field Content Type

Ada sebelas jenis data yang bisa kita pilih untuk setiap field/kolom Content Type diantaranya:

1. String - Untuk data teks. 
2. Text - Untuk data  teks seperti String, tapi umumnya untuk teks yang lebih panjang seperti deskripsi, paragraf, artikel, dokumen, komentar, dsb. 
3. Number - Untuk data berupa angka baik itu bilangan bulat maupun riil. 
4. Boolean - Untuk data benar-salah. 
5. Date - Untuk jenis data yang menyatakan tanggal/waktu.
6. JSON - Untuk data jenis teks seperti String, tapi harus memiliki struktur JSON yang valid. 
7. Email - Untuk data email.
8. Password - Dipakai untuk menyimpan password.
9. Media - Untuk menyimpan data berupa file gambar, video, PDF, dsb. 
10. Enumeration - Untuk data berupa pilihan jawaban. 
11. Relation - Untuk menentukan hubungan antar Content Type

![](https://i.ibb.co/HP0M3f5/Selection-004.png)

Berikut gambar Content Type `artikel` setelah diberikan field-field. 

![](https://i.ibb.co/8jFcRTX/Selection-005.png)

Klik tombol **save** untuk  menyimpan. 

### Operasi CRUD di Strapi

Sebagian besar waktu kita dalam melakukan manajemen konten tentu saja melakuakn operasi create, read, update, dan delete atau yang sering dikenal dengan akronim CRUD. Operasi-operasi ini sudah disediakan secara langsung oleh Strapi. 

Setiap kali kita membuat Content Type dan menyimpannya, akan muncul sebuah menu baru di sebelah kiri atas (lihat gambar). 

![](https://i.ibb.co/ZxfJm6v/Selection-006.png)

Tambahkan beberapa data baru. Salin saja beberapa artikel yang ada di  Codepolitan untuk mengisinya. 

Seperti yang bisa kalian lihat juga, halaman ini sudah memiliki fitur untuk melakukan pencarian atau penyaringan berdasarkan masing-masing field yang ada di Content Type. Kita bisa mengatur untuk  menampilkan berapa data untuk setiap halaman. Pagination pun sudah langsung aktif dari sananya. Field yang ditampilkan dalam tabel juga bisa ditentukan apa saja. 

#### Mengaktifkan WWYSIWYG Untuk Field Isi

Saat menambahkan artikel baru, kamu pasti menyadari bahwa kolom isi merupakan sebuah `textarea`. Pada umumnya kita ingin menggunakan editor WYSIWYG untuk sebuah konten yang banyak isinya. Strapi pun sudah memiliki fitur ini. 

Kembali ke Content Type Builder, pilih Artikel, kemudian klik gambar ikon edit pada kolom `isi`.  Pindah ke tab **advanced setting**, lalu centang **Display as a WYSIWYG**. 

![img](https://i.ibb.co/SvmK9sT/Selection-007.png)

Klik **Continue** lalu klik tombol **Save**. Perhatikan perbedaan form sebelum dan sesudah mengaktifkan opsi **display as a wysiwyg**.

![img](https://i.ibb.co/XJqG44z/sebelumsesudah.png)

### Konsumsi API Blog

Sekarang kita sudah memiliki data yang siap untuk dikonsumsi. Data ini mungkin ingin dikonsumsi  oleh aplikasi mobile, mungkin juga untuk dikonsumsi oleh bagian frontend aplikasi web. Agar sebuah Content Type bisa dikonsumsi oleh dunia luar, kita perlu mengatur agar Content Type tersebut memiliki permission **Public**. 

Klik menu **Roles & Permission** di menu yang ada di sebelah kiri. 

![img](https://i.ibb.co/Fb7Cy9x/Selection-010.png)

Ada tiga role yang tersedia langsung yaitu Administrator, Authenticated, dan Public. Kita akan mengatur agar Artikel memliiki akses Public. Klik pada menu **Public** di halaman Roles & Permission yang telah di buka. 

Atur permission yang ingin diberikan pada public terhadap artikel. Seluruh opsi di centang hanya untuk contoh, pada umumnya *public* tidak memiliki akses untuk membuat (create), menghapus (destroy), atau mengubah (update) tanpa melakukan autentikasi terlebih dahulu. 

![img](https://i.ibb.co/S5kSM2f/Selection-012.png)

Jika terdapat field upload, dan ingin bisa mengunggah file melalui POST atau UPDATE, kita juga perlu mengaktifkan permission upload. 

![img](https://i.ibb.co/PwFtTgz/Selection-018.png)

Jangan lupa untuk menakan tombol **Save** setelah selesai. 

#### Mengambil Seluruh Data (GET)

Kita bisa mengakses seluruh data menggunakan endpoint `http://localhost:1337/artikels 	` dimana artikels merupakan nama Content Type yang tadi kita buat. 

![img](https://i.ibb.co/pn2QxT0/Selection-013.png)

Kita juga bisa melakukan filter atau pengurutan. Misalnya, untuk melakukan pencarian artikel dengan judul yang mengandung CSS adalah `http://localhost:1337/artikels?judul_contains=CSS` Untuk semua opsi filter silahkan kunjungi dokumentasi [resminya di sini](https://strapi.io/documentation/3.x.x/guides/filters.html). 

#### Mengambil salah satu data (GET)

Untuk mengambil salah satu data caranya sangat mudah, cukup tambahkan nomor id data yang ingin diambil di ujung endpoint sebelumnya`http://localhost:1337/artikels/{id}`. 

![img](https://i.ibb.co/pzt5j2b/Selection-016.png)

#### Menambah Data Baru (POST)

 Untuk mengirimkan pesan POST kita bisa memanfaatkan aplikasi Postman atau Curl. Di sini penulis menggunakan Postman supaya lebih mudah. Endpoint untuk membuat data baru sama dengan endpoint untuk mengambil seluruh data, hanya saja operasi yang dipilih mesti berjenis POST seperti gambar di bawah. 

![img](https://i.ibb.co/ckTVzBZ/Postman-019.png)

Hmm, bukankah tadi ada field sampul untuk menyimpan gambar thumbnail artikel? Strapi tidak menyimpan informasi gambar di satu tabel yang menyebabkan kita tidak bisa mengunggah gambar sampul atau file jenis apapun di satu request. Untuk mengunggah sebuah file kita harus melakukan operasi terpisah dengan melakukan request ke `http://localhost:1337/upload` seperti pada gambar berikut. 

![img](https://i.ibb.co/g46FWJb/Postman-020.png)

Key untuk sebuah file adalah **files**. Key **ref** dipakai untuk menentukan file yang kita upload ini dimiliki oleh model (Content Type) apa. Karena sebuah artikel memiliki sebuah gambar, maka kita nyatakan isi **ref** sebagai artikel. Artikel ada banyak, maka kita tentukan artikel dengan id apa yang memiliki gambar ini melalui key **refId**. Di model artikel tadi kita sudah menentukan bahwa atribut yang menyimpan gambar merupakan **sampul**, maka kita isikan nama atribut ini sebagai isi key **field**.

Kirimkan request POST ini dan perhatikan di panel admin Strapi bahwa data yang tadi kita buat sudah memiliki gambar sampul meskipun kita upload dengan dua request yang berbeda.

#### Mengubah Data (PUT)

Mengubah data salah satu artikel bisa kita lakukan dengan melakukan request PUT ke `http://localhost:1337/artikels/{id}`. Contoh berikut ini kita ingin mengubah judul artikel ber-id 4. 

![img](https://i.ibb.co/tbgb9SR/Postman-021.png)

#### Menghapus Data (DELETE)

Menghapus salah satu data caranya sangat mudah. Cukup buat sebuah request DELETE ke endpoint `http://localhost:1337/artikels dengan id data yang ingin dihapus.` 

![img](https://i.ibb.co/VpNbfg6/Postman-022.png)

## Penutup

Tutorial ini hanya memberikan gambaran singkat akan fitur standar yang dimiliki oleh Strapi. Masih ada banyak lagi fitur yang dimilikinya. Selain itu kita juga bisa menambah fungsi yang tidak tersedia langsung oleh Strapi dengan memodifikasi source code-nya secara manual jika memang diperlukan. 

Akhir kata, semoga bermanfaat dan jangan lupa bahagia.

Mudah Membuat API Tanpa Koding dengan Strapi

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Mudah Membuat API Tanpa Koding dengan Strapi

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Hour of Code, Belajar Coding Satu Jam

Jangan Lewatkan, Jogja Geek Job Fair #2 Digelar Lagi Minggu Ini

Wawancara Bersama Luri Darmawan Pembuat AKSI IDE

io.js, Framework JavaScript yang Kompatibel dengan Node.js dan npm

CodeCombat, Belajar Coding Sambil Bermain Game

Mengenal Meteor, Framework JavaScript yang Sedang Naik Daun