penambahan readme

parent bf8ae4f2
Pipeline #2127 failed with stages
# KHANSIA Enterprise Demo Portal 🚀
[![Django](https://img.shields.io/badge/Django-4.2%20LTS-092E20?style=for-the-badge&logo=django&logoColor=white)](https://www.djangoproject.com/)
[![Python](https://img.shields.io/badge/Python-3.9+-3776AB?style=for-the-badge&logo=python&logoColor=white)](https://www.python.org/)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)
[![PostgreSQL](https://img.shields.io/badge/PostgreSQL-14+-316192?style=for-the-badge&logo=postgresql&logoColor=white)](https://www.postgresql.org/)
[![Status](https://img.shields.io/badge/Production-Ready-brightgreen?style=for-the-badge)](#)
> **Enterprise Showcase & Sandbox Hub** untuk **PT Khatulistiwa Nusantara Indonesia** (`demo.khansia.co.id`).
> Dibangun dengan arsitektur modern Django & Tailwind CSS (*Luminous Enterprise Kinetic*), dilengkapi sistem Content Management System (CMS) mandiri tanpa menggunakan Django ORM admin standar, utilitas migrasi otomatis SQLite ke PostgreSQL, serta standar kepatuhan UU Pelindungan Data Pribadi (UU PDP No. 27 Tahun 2022).
---
## 📑 Daftar Isi
- [1. Gambaran Umum Proyek](#1-gambaran-umum-proyek)
- [2. Fitur Utama](#2-fitur-utama)
- [3. Arsitektur & Struktur Direktori](#3-arsitektur--struktur-direktori)
- [4. Prasyarat Sistem](#4-prasyarat-sistem)
- [5. Panduan Instalasi & Menjalankan Lokal](#5-panduan-instalasi--menjalankan-lokal)
- [6. Akses & Penggunaan CMS Admin](#6-akses--penggunaan-cms-admin)
- [7. Migrasi Database (SQLite ke PostgreSQL)](#7-migrasi-database-sqlite-ke-postgresql)
- [8. Pengujian & Quality Assurance](#8-pengujian--quality-assurance)
- [9. Panduan Deployment Production](#9-panduan-deployment-production)
- [10. Kontak & Dukungan Korporat](#10-kontak--dukungan-korporat)
---
## 1. Gambaran Umum Proyek
**KHANSIA Enterprise Demo Portal** adalah portal gerbang terpusat bagi klien korporat, instansi kementerian, BUMN, dan evaluator teknis untuk mengeksplorasi, menguji, dan memvalidasi solusi perangkat lunak enterprise kelas industri yang dikembangkan oleh PT Khatulistiwa Nusantara Indonesia.
Portal ini menyajikan katalog portofolio interaktif seperti:
- **KIERA ERP Ecosystem** (`kiera-demo.khansia.co.id`) — ERP terintegrasi multi-entitas untuk korporasi & manufaktur.
- **Yakes Mobile SuperApp** (`yakes-demo.khansia.co.id`) — Ekosistem kesehatan digital end-to-end dengan integrasi BPJS & rekam medis elektronik.
- **Digimall B2B Supply Chain** (`digimall-demo.khansia.co.id`) — Platform pengadaan B2B closed-loop terintegrasi payment gateway BUMN.
- **CyberGuard SOC Platform** (`cyberguard-demo.khansia.co.id`) — Sistem SIEM & automated threat hunting bersertifikasi ISO 27001.
Setiap solusi ditautkan langsung ke lingkungan **sandbox demo terisolasi** yang aman dan menggunakan data sintetis (*dummy dataset*).
---
## 2. Fitur Utama
### 🎨 2.1 Antarmuka Publik (High-Fidelity UI)
- **Desain Presisi (*Pixel-Perfect*):** Mengacu pada desain acuan `screen.png` dengan tipografi premium (*Plus Jakarta Sans*, *JetBrains Mono*), palet warna oranye amber enterprise, dan efek pencahayaan dinamis.
- **Katalog Berbasis Kartu Kaca (*Glass Cards*):** Kartu solusi interaktif dengan label klien terverifikasi, badge status sandbox langsung (*Live Sandbox Online*), badge versi LTS, rincian tech stack, dan aksi cepat (*Buka Dedicated Sandbox* & *Detail Arsitektur*).
- **Filter Kategori Instan:** Navigasi kategori dinamis (*Semua Kategori*, *ERP & Keuangan*, *Kesehatan Digital*, *B2B Commerce*, *Keamanan Siber*) tanpa reload halaman penuh.
- **Pencarian Cepat Berkecepatan Tinggi (Fitur ⌘K):** Bilah pencarian global interaktif dengan shortcut keyboard `⌘ + K` (Mac) atau `Ctrl + K` (Windows/Linux) serta pencarian real-time pada judul, kata kunci, deskripsi, dan teknologi.
- **Alur Pengujian 4 Langkah (*Testing Flow*):** Panduan terstruktur mulai dari pemilihan modul, permintaan kredensial instan, pengujian data sintetis, hingga *one-click environment reset*.
- **Client Trust Band & CTA Melayang:** Menampilkan daftar mitra korporat dan kementerian yang telah mempercayai solusi KHANSIA, disertai bilah kontak sticky (WhatsApp & Email briefing modal) yang siap diakses kapan saja.
- **Halaman Kebijakan Privasi Lengkap:** Standar kepatuhan hukum **UU PDP No. 27/2022** dan **ISO/IEC 27001** dengan deklarasi isolasi sandbox di rute `/kebijakan-privasi/`.
- **Tahun Hak Cipta Dinamis:** Footer otomatis menampilkan tahun berjalan (`{% now "Y" %}`) tanpa hardcode manual.
### ⚙️ 2.2 Sistem CMS Mandiri (*Custom Tailwind Admin*)
- **Tanpa Django ORM Admin:** Tidak menggunakan antarmuka `/admin/` bawaan Django sesuai arahan arsitektur (*Decoupled Repository Pattern*).
- **Autentikasi Aman:** Dilengkapi halaman login (`/login/`) dan proteksi sesi berbasis `@login_required` dengan visual Tailwind modern.
- **Manajemen Portofolio Penuh (CRUD):**
- **Tambah Portofolio:** Menambahkan aplikasi baru dengan kategori, tech stack, badge versi, arsitektur, dan fitur utama.
- **Edit Portofolio:** Memperbarui data portofolio secara real-time.
- **Hapus Portofolio:** Konfirmasi penghapusan aman dengan modal verifikasi.
- **Manajemen Banner & Thumbnail:**
- Unggah file gambar langsung (disimpan di `media/thumbnails/`).
- Input URL gambar eksternal (Unsplash/CDN).
- Pratinjau interaktif langsung (*Live Browser Frame Preview*) sebelum disimpan.
- **Sinkronisasi Atomik:** Data portofolio disimpan secara persisten dan thread-safe pada `portal/data/catalog.json`.
### 🔄 2.3 Utilitas Migrasi Database & Kesiapan Production
- **1-Command Runner SQLite ke PostgreSQL:** Skrip `./migrate_to_postgres.sh` siap pakai yang secara otomatis mengekspor skema dan data bersih (tanpa konflik permission key) lalu mengimpornya ke PostgreSQL.
- **Dukungan Multi-Database Dinamis:** Mendukung PostgreSQL dengan *connection pooling* (`CONN_MAX_AGE=600`) pada production dan fallback otomatis ke SQLite lokal pada development.
- **Panduan Deployment Server Lengkap:** Dokumentasi resmi `docs/DEPLOYMENT.md` mencakup Nginx Reverse Proxy, Gunicorn Systemd, SSL Certbot gratis, dan skrip deploy 1-klik (`deploy.sh`).
---
## 3. Arsitektur & Struktur Direktori
```text
portal_khansia/
├── docs/ # Dokumentasi spesifikasi proyek
│ ├── DEPLOYMENT.md # Panduan deployment production (Nginx, Gunicorn, SSL)
│ ├── DESIGN.md # Spesifikasi sistem desain & UI/UX tokens
│ ├── adr.md # Architecture Decision Records
│ ├── prd.md # Product Requirements Document
│ ├── code.html # Referensi prototipe HTML/Tailwind
│ └── screen.png # Desain visual target
├── media/ # Direktori unggahan media dinamis
│ └── thumbnails/ # Berkas thumbnail banner yang diunggah
├── portal/ # Django Application Core
│ ├── data/
│ │ └── catalog.json # Penyimpanan data persisten JSON portofolio
│ ├── management/
│ │ └── commands/
│ │ ├── migrate_to_postgres.py # Management command migrasi ke Postgres
│ │ └── setup_admin.py # Otomasi inisialisasi akun administrator
│ ├── templates/portal/ # Template Django terstruktur
│ │ ├── admin/ # Tampilan CMS Admin kustom
│ │ │ ├── base_admin.html
│ │ │ ├── confirm_delete.html
│ │ │ ├── dashboard.html
│ │ │ ├── form.html
│ │ │ └── login.html
│ │ ├── components/ # Komponen antarmuka modular
│ │ │ ├── app_card.html
│ │ │ ├── catalog_grid.html
│ │ │ ├── clients_band.html
│ │ │ ├── footer.html
│ │ │ ├── header.html
│ │ │ ├── modal_briefing.html
│ │ │ ├── sticky_cta.html
│ │ │ └── test_flow.html
│ │ ├── base.html # Base layout publik
│ │ ├── index.html # Halaman beranda katalog demo
│ │ └── privacy_policy.html # Halaman kebijakan privasi resmi
│ ├── data.py # Data katalog default & metadata korporat
│ ├── repository.py # Layer repository atomik untuk catalog.json
│ ├── tests.py # Suite pengujian unit komprehensif (17 tests)
│ ├── urls.py # Routing modul portal
│ └── views.py # View controller publik & CMS
├── portal_project/ # Konfigurasi Django Project
│ ├── asgi.py
│ ├── settings.py # Pengaturan Django (Environment, DB, Static)
│ ├── urls.py # Master routing & static/media fallback
│ └── wsgi.py
├── static/ # Berkas aset statis primer
│ ├── css/
│ │ └── portal.css # Custom styling & font faces
│ ├── images/
│ │ ├── favicon.png # Icon brand PNG
│ │ └── logo.png # Emblem logo resmi KHANSIA
│ ├── js/
│ │ └── portal.js # Logika filter, modal, & shortcut ⌘K
│ └── favicon.ico # Favicon ICO resmi
├── staticfiles/ # Koleksi statis terkompilasi (collectstatic)
├── .env.example # Template variabel environment
├── db.sqlite3 # Database lokal default
├── deploy.sh # Skrip update server production 1-klik
├── manage.py # Django CLI executable
├── migrate_to_postgres.sh # Runner migrasi SQLite ke PostgreSQL
├── requirements.txt # Dependensi Python pip
└── run.sh # Skrip inisialisasi & startup server lokal
```
---
## 4. Prasyarat Sistem
- **Sistem Operasi:** macOS, Linux (Ubuntu/Debian didukung penuh), atau Windows via WSL2.
- **Python:** Versi `3.9` atau lebih baru (`python3 --version`).
- **PostgreSQL (Opsional untuk development, Direkomendasikan untuk production):** Versi `14+`.
---
## 5. Panduan Instalasi & Menjalankan Lokal
### 🚀 Cara Cepat (Satu Perintah)
Jalankan skrip pembuka otomatis yang telah disediakan:
```bash
chmod +x run.sh
./run.sh
```
Skrip di atas akan:
1. Membuat virtual environment `.venv` jika belum ada.
2. Menginstal seluruh dependensi dari `requirements.txt`.
3. Menjalankan migrasi skema database.
4. Membuat akun administrator default (`admin` / `admin123`).
5. Menjalankan server lokal pada port **`8008`**.
Akses portal di peramban: **[http://127.0.0.1:8008/](http://127.0.0.1:8008/)**
---
### 🛠️ Langkah Manual (Step-by-Step)
1. **Clone repositori dan masuk ke direktori:**
```bash
cd portal_khansia
```
2. **Buat & aktifkan virtual environment:**
```bash
python3 -m venv .venv
source .venv/bin/activate
```
3. **Pasang seluruh dependensi:**
```bash
pip install -r requirements.txt
```
4. **Konfigurasi Environment (Opsional untuk lokal):**
```bash
cp .env.example .env
```
5. **Jalankan migrasi skema database:**
```bash
python manage.py migrate
```
6. **Inisialisasi akun admin awal:**
```bash
python manage.py setup_admin
```
7. **Kumpulkan file statis:**
```bash
python manage.py collectstatic --no-input
```
8. **Nyalakan server development:**
```bash
python manage.py runserver 127.0.0.1:8008
```
---
## 6. Akses & Penggunaan CMS Admin
Untuk mengelola katalog portofolio (menambah, mengubah, menghapus, atau mengganti banner gambar), ikuti langkah berikut:
1. Buka halaman login admin di peramban:
**[http://127.0.0.1:8008/login/](http://127.0.0.1:8008/login/)**
2. Masukkan kredensial default:
- **Username:** `admin`
- **Password:** `admin123`
3. Setelah berhasil login, Anda akan diarahkan ke **Dashboard Manajemen Portofolio** (`/manage/`).
4. **Operasi yang Tersedia:**
- **Tambah Baru:** Klik tombol `+ Tambah Portofolio` (`/manage/create/`). Anda dapat mengunggah gambar file banner lokal atau memasukkan URL gambar langsung.
- **Edit Portofolio:** Klik tombol `Edit` pada kartu aplikasi yang ingin diubah (`/manage/edit/<key>/`).
- **Hapus Portofolio:** Klik tombol `Hapus` pada kartu aplikasi, periksa dialog konfirmasi, dan setujui (`/manage/delete/<key>/`).
- **Lihat Langsung di Frontend:** Perubahan yang disimpan langsung terlihat seketika pada halaman utama publik (`/`).
---
## 7. Migrasi Database (SQLite ke PostgreSQL)
Jika Anda ingin beralih dari database lokal SQLite (`db.sqlite3`) ke server basis data **PostgreSQL**, gunakan utilitas otomatis berikut:
```bash
chmod +x migrate_to_postgres.sh
./migrate_to_postgres.sh
```
Utilitas ini akan:
1. Meminta parameter PostgreSQL (DB Name, User, Password, Host, Port) atau membaca otomatis dari `.env`.
2. Menguji koneksi dan membuat database target bila belum tersedia.
3. Menjalankan migrasi skema Django ke PostgreSQL.
4. Mengekspor data pengguna & log dari SQLite secara bersih (mengecualikan *contenttypes* dan *permissions* untuk mencegah bentrokan primary key).
5. Memuat data ke PostgreSQL dan memverifikasi integritas akun admin.
6. Menanyakan apakah Anda ingin mengaktifkan konfigurasi PostgreSQL ke dalam berkas `.env` secara otomatis.
---
## 8. Pengujian & Quality Assurance
Proyek ini dilengkapi dengan rangkaian unit testing komprehensif sebanyak **17 pengujian** yang memvalidasi seluruh fungsionalitas kritis:
```bash
.venv/bin/python manage.py test
```
### Ruang Lingkup Pengujian:
- **Katalog Publik:** HTTP 200, resolusi template, render metrik, dan validasi data aplikasi.
- **Pencarian & Filter:** Respons filter kategori, kata kunci, dan penanganan query kosong.
- **Autentikasi:** Form login, pengalihan login, pembatasan akses tanpa autentikasi, dan logout.
- **Operasi CRUD CMS:** Penambahan portofolio baru, pembaruan banner/thumbnail, dan penghapusan item.
- **Kebijakan Privasi:** Validasi rute `/kebijakan-privasi/` dan kepatuhan klausul UU PDP 2022.
- **Pengiriman Aset Statis:** Validasi bahwa `logo.png`, `favicon.ico`, `portal.css`, dan `portal.js` selalu mengembalikan status HTTP 200 OK dengan MIME type yang tepat.
- **CLI Migration Command:** Validasi registrasi Django management command `migrate_to_postgres`.
---
## 9. Panduan Deployment Production
Untuk panduan lengkap deployment ke server VPS / Cloud berbasis **Ubuntu Linux** dengan Nginx, Gunicorn, PostgreSQL, dan sertifikat SSL Let's Encrypt, silakan baca dokumentasi terpisah di:
👉 **[`docs/DEPLOYMENT.md`](docs/DEPLOYMENT.md)**
### Ringkasan Alur Pembaruan di Production:
Cukup jalankan satu perintah berikut di server produksi:
```bash
./deploy.sh
```
Skrip ini secara otomatis menarik kode terbaru dari git, memperbarui dependensi, menjalankan migrasi database, mengumpulkan file statis, dan me-restart service systemd.
---
## 10. Kontak & Dukungan Korporat
**PT Khatulistiwa Nusantara Indonesia (KHANSIA)**
*Excellence In Every Byte*
- **Kantor:** Kota Cimahi, Jawa Barat, Indonesia
- **Telepon:** (022) 20686548
- **WhatsApp Bisnis:** [+62 877-6383-8845](https://wa.me/6287763838845)
- **Email Resmi:** [admin@khansia.co.id](mailto:admin@khansia.co.id) | [legal@khansia.co.id](mailto:legal@khansia.co.id)
- **Jam Operasional:** Senin – Jumat | 08.30 – 17.30 WIB
- **Portal URL:** [https://demo.khansia.co.id](https://demo.khansia.co.id)
---
© 2026 PT Khatulistiwa Nusantara Indonesia. All rights reserved.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment