NgFlask Versi 3.1
NgFlask V3.1 merupakan pengembangan lanjutan dari NgFlask V3 yang berfokus pada peningkatan kemandirian aplikasi, keamanan, pemeliharaan, serta konsistensi antarmuka pengguna.
Pengembangan V3.1 membawa sejumlah perubahan penting, terutama pada pemindahan berbagai aset statis dari layanan CDN eksternal menjadi aset lokal. Selain itu, dilakukan penyesuaian Content Security Policy (CSP), perbaikan halaman instalasi, peningkatan penanganan JavaScript, serta penambahan beberapa fitur baru seperti dokumen, galeri, dan arsip.
Tujuan utama pengembangan ini adalah menjadikan aplikasi dapat berjalan secara lebih mandiri di lingkungan lokal dengan mengurangi ketergantungan terhadap sumber daya eksternal, sekaligus mempertahankan fungsi utama yang telah tersedia pada NgFlask V3.
1. Integrasi CKEditor 4 Secara Lokal
Salah satu perubahan utama pada NgFlask V3.1 adalah penggunaan ekstensi flask_ckeditor untuk mengintegrasikan CKEditor.
Build CKEditor kini disimpan secara lokal pada:
cms/static/ckeditor/ckeditor.js
Build lokal yang digunakan adalah CKEditor 4.14.0 dan dimuat langsung oleh aplikasi tanpa menggunakan CDN eksternal.
Konfigurasi CKEditor dipusatkan pada cms/konfigurasi.py, sehingga pengaturan editor dapat dikelola dari satu lokasi.
Beberapa konfigurasi yang digunakan antara lain:
- CKEDITOR_SERVE_LOCAL = True
- Tinggi editor sebesar 400 piksel.
- Plugin YouTube diaktifkan.
- Proses unggah gambar menggunakan route admin.upload.
- Perlindungan CSRF diaktifkan melalui flask_ckeditor.
Editor digunakan pada halaman pembuatan artikel dan halaman, dengan konfigurasi yang disesuaikan pada masing-masing template.
Pendekatan ini membuat CKEditor dapat digunakan tanpa membutuhkan koneksi ke CDN eksternal dan mendukung tujuan pengembangan aplikasi yang lebih mandiri secara lokal.
2. Select2 Menggunakan Aset Lokal
NgFlask V3.1 juga melakukan perubahan pada integrasi flask_select2.
Library tersebut kini disertakan langsung di dalam proyek atau menggunakan pendekatan vendoring, yaitu:
- cms/lib/flask_select2/
Beberapa komponen yang disertakan antara lain:
- contrib/sqla/ajax.py
- form/fields.py
- model/widgets.py
Aset JavaScript dan CSS Select2 juga disimpan secara lokal pada:
- cms/static/vendor/
Dengan pendekatan tersebut, aplikasi tidak lagi bergantung pada CDN eksternal untuk menyediakan aset Select2.
3. Penggunaan Font Secara Offline
Perubahan berikutnya dilakukan pada sistem font.
Pada versi sebelumnya, penggunaan font masih dapat bergantung pada layanan eksternal seperti Google Fonts. Pada NgFlask V3.1, font yang digunakan aplikasi disimpan secara lokal.
Sebanyak 56 file WOFF2 ditempatkan pada direktori:
- cms/static/vendor/s/<font>/vXX/
Font yang digunakan meliputi:
- Poppins
- Fira Sans Extra Condensed
- Kurale
- Plus Jakarta Sans
CSS font lokal kemudian menggunakan referensi relatif terhadap file WOFF2 tersebut dan tidak lagi memanggil fonts.googleapis.com.
Pemeriksaan terhadap template juga dilakukan untuk memastikan tidak terdapat lagi referensi terhadap berbagai CDN eksternal seperti:
- CDN
- AJAX CDN
- UNPKG
- jsDelivr
- Google Fonts
Dengan perubahan ini, aset statis yang digunakan oleh template dapat dilayani sepenuhnya dari aplikasi sendiri.
4. Sistem Tema dan Perbaikan Halaman Instalasi
NgFlask V3.1 memperkenalkan file tema baru:
cms/static/css/themes.css
File tersebut menyediakan sistem variabel warna melalui [data-theme] dan :root.
Beberapa palet tema yang tersedia meliputi:
- Biru
- Tosca
- Maroon
- Ungu
Variabel tema tersebut kemudian digunakan oleh sistem styling aplikasi.
Perbaikan juga dilakukan pada halaman instalasi yang terdapat pada:
cms/templates/main/install.html
Sebelumnya, halaman instalasi tidak memuat themes.css, sedangkan tombol .btn-primary membutuhkan variabel seperti --brand-600.
Akibatnya, warna latar tombol tidak dapat ditampilkan dengan benar sehingga tombol terlihat transparan dengan teks berwarna putih pada kartu berwarna putih.
Setelah themes.css dimuat, variabel tema tersedia dengan benar sehingga tombol instalasi dapat ditampilkan sebagaimana mestinya.
5. Peningkatan Keamanan dengan Content Security Policy
Aspek keamanan juga menjadi salah satu bagian penting dalam pengembangan V3.1.
Konfigurasi CONTENT_SECURITY_POLICY_ADMIN pada cms/konfigurasi.py disesuaikan untuk mendukung kebutuhan CKEditor 4 dan flask_ckeditor.
Penyesuaian tersebut meliputi:
- script-src-elem 'self' 'unsafe-inline'
- style-src-elem 'self' 'unsafe-inline'
- script-src-attr 'unsafe-inline'
Penyesuaian ini diperlukan karena CKEditor 4 menggunakan beberapa script, style, serta event handler inline pada antarmuka administrator.
Sementara itu, konfigurasi:
- style-src 'self' ‘nonce-{nonce}’ tetap dipertahankan.
Halaman publik tetap menggunakan kebijakan CSP yang lebih ketat dan tidak menggunakan unsafe-inline.
Dengan demikian, kebutuhan CKEditor pada area administrator dapat dipenuhi tanpa menerapkan kelonggaran yang sama pada halaman publik.
6. Perbaikan JavaScript
Perbaikan kecil namun penting dilakukan pada JavaScript, khususnya pada elemen:
generate-ai-btn
Sebelum memasang addEventListener, aplikasi sekarang melakukan pengecekan terhadap keberadaan elemen tersebut.
Perubahan ini mencegah terjadinya error JavaScript ketika elemen tidak tersedia, misalnya pada kondisi tertentu ketika Gemini API key belum dikonfigurasi.
Dengan adanya pengecekan tersebut, JavaScript menjadi lebih aman terhadap kondisi ketika elemen yang dituju tidak ditemukan.
7. Penambahan Fitur Dokumen
NgFlask V3.1 menambahkan sejumlah template untuk mendukung pengelolaan dokumen.
Komponen yang ditambahkan antara lain:
- admin/dokumen.html
- admin/tambah_dokumen.html
- main/dokumen.html
- main/detaildokumen.html
Penambahan ini menjadi bagian dari pengembangan fungsi aplikasi untuk mengelola dan menampilkan dokumen melalui area administrator maupun halaman publik.
8. Penambahan Fitur Galeri
Selain dokumen, NgFlask V3.1 juga menyediakan struktur halaman untuk fitur galeri.
Template yang ditambahkan meliputi:
- admin/galeri.html
- admin/tambah_galeri.html
- main/galeri.html
- main/detailgaleri.html
Fitur ini menyediakan struktur pengelolaan galeri pada sisi administrator sekaligus tampilan galeri dan detailnya pada sisi publik.
9. Penambahan Fitur Arsip
NgFlask V3.1 juga menambahkan halaman arsip:
- main/arsip.html
Penambahan ini melengkapi struktur fitur baru yang dikembangkan pada versi 3.1 bersama dengan dokumen dan galeri.
10. Kepatuhan Lisensi Pustaka Pihak Ketiga
Untuk meningkatkan dokumentasi dan kepatuhan terhadap lisensi perangkat lunak yang digunakan, NgFlask V3.1 menambahkan beberapa file pada direktori utama proyek:
- LICENSE
- NOTICE
- THIRD-PARTY-LICENSES
File tersebut digunakan untuk mendokumentasikan lisensi serta pemberitahuan terkait pustaka pihak ketiga yang disertakan dalam aplikasi, termasuk CKEditor, Select2, jQuery, dan pustaka lainnya.
11. Perubahan pada Kode Aplikasi
Pengembangan V3.1 mencakup perubahan pada berbagai komponen Python, aset statis, dan template.
Beberapa file Python yang mengalami perubahan antara lain:
- app.py
- cms/__init__.py
- cms/admin/__init__.py
- cms/admin/util.py
- cms/admin/view.py
- cms/database.py
- cms/form.py
- cms/main/__init__.py
- cms/main/util.py
- cms/main/view.py
- cms/waktu.py
- cms/konfigurasi.py
- cms/lib/flask_select2/*
- requirements.txt
Pada sisi aset statis, perubahan dilakukan terhadap:
- cms/static/css/mystyles.css
- cms/static/css/tailwind.css
- cms/static/js/cardsData.js
- cms/static/robots.txt
Selain itu, template pada bagian admin/* dan main/* juga mengalami penyesuaian, terutama dalam hal branding, struktur halaman, integrasi CKEditor, Select2, serta sistem tema.
12. Catatan Pengembangan Selanjutnya
Masih terdapat beberapa hal yang perlu menjadi perhatian untuk pengembangan berikutnya.
Pertama, konfigurasi CKEDITOR_VERSION belum di-override pada konfigurasi.py. Sementara build CKEditor yang tersedia secara lokal adalah versi 4.14.0. Pada pengembangan berikutnya, versi konfigurasi dapat diselaraskan dengan build lokal agar informasi versi lebih konsisten.
Kedua, setelah perubahan terhadap aset statis, browser mungkin masih menyimpan cache dari aset sebelumnya. Oleh karena itu, dapat dilakukan hard refresh menggunakan:
Ctrl + Shift + R
Masalah 404 pada sisi server untuk font telah terselesaikan, sedangkan beberapa 404 yang masih terlihat pada console dapat berasal dari cache lama pada browser.
Terakhir, CKEditor 4 telah mencapai status End of Life (EOL). Untuk pengembangan jangka panjang, migrasi menuju CKEditor 5 LTS dapat dipertimbangkan pada versi NgFlask berikutnya. Migrasi tersebut tentunya membutuhkan penyesuaian kembali terhadap konfigurasi CSP dan mekanisme upload.
Pengembangan NgFlask V3 menjadi V3.1 merupakan langkah untuk meningkatkan kemandirian, keamanan, dan struktur aplikasi.
Salah satu fokus utama pengembangan adalah mengurangi ketergantungan terhadap sumber daya eksternal. CKEditor, Select2, font, dan berbagai aset statis kini dapat disediakan secara lokal oleh aplikasi.
Selain itu, sistem Content Security Policy pada area administrator disesuaikan agar dapat mendukung CKEditor, sementara halaman publik tetap mempertahankan kebijakan keamanan yang lebih ketat.
Dari sisi antarmuka, sistem tema baru dan perbaikan halaman instalasi meningkatkan konsistensi tampilan serta memperbaiki masalah tombol instalasi yang sebelumnya tidak terlihat.
NgFlask V3.1 juga memperluas kemampuan aplikasi melalui penambahan fitur dokumen, galeri, dan arsip. Dokumentasi lisensi pihak ketiga turut diperjelas melalui penambahan LICENSE, NOTICE, dan THIRD-PARTY-LICENSES.
Secara keseluruhan, V3.1 menjadi penyempurnaan penting dari NgFlask V3 dengan arah pengembangan menuju aplikasi yang lebih mandiri, terstruktur, mudah dipelihara, dan lebih siap untuk dikembangkan pada versi-versi berikutnya.
