Twibbon IAK SETIH SETIO

Platform berbasis web modern yang dirancang untuk memudahkan pengguna dalam mengekspresikan dukungan, merayakan momen penting, atau mempromosikan kampanye melalui bingkai foto digital (Twibbon).

Aplikasi ini berfokus pada kecepatan (performa) dan pengalaman pengguna (UX), di mana proses penggabungan foto pengguna ke dalam bingkai dilakukan secara real-time langsung di browser tanpa perlu mengunggah foto ke server (menjaga privasi).

Fitur Utama:

1. Smart Canvas Editor: Editor interaktif menggunakan HTML5 Canvas yang memungkinkan pengguna untuk drag, zoom, dan rotate foto mereka di dalam bingkai dengan sangat halus.

2. Popularity-Based Gallery: Halaman beranda yang dinamis menampilkan frame berdasarkan jumlah penggunaan terbanyak menggunakan fitur Infinite Scroll (Auto Load).

3. Advanced Auth System: Sistem pendaftaran dan login yang aman, dilengkapi fitur verifikasi email otomatis dan fitur lupa password menggunakan token berbasis waktu.

4. Quick Share & High Quality Download: Memungkinkan pengguna untuk mengunduh hasil dalam resolusi HD dan membagikannya ke WhatsApp, Facebook, atau Twitter dengan satu klik.

5. Admin Management: Panel kontrol lengkap untuk mengelola pengguna, memantau statistik penggunaan frame, dan konfigurasi SMTP Email secara dinamis.

Stack Teknologi (Tech Stack)

Aplikasi ini menggunakan kombinasi teknologi terbaru untuk memastikan stabilitas dan skalabilitas:

Backend (Sisi Server)

• Framework: CodeIgniter 4 (PHP 7.4+ / 8.0+) - Dipilih karena performanya yang ringan dan arsitektur MVC yang solid.

• Database: MariaDB / MySQL - Digunakan untuk menyimpan data pengguna, manajemen frame, dan log aktivitas.

• Email Engine: SMTP Protocol (via CI4 Email Library) - Untuk pengiriman email verifikasi dan reset password.

Frontend (Antarmuka Pengguna)

• Styling: Tailwind CSS 3 - Memberikan desain yang modern, responsif (Mobile First), dan dukungan Dark Mode asli.

• JavaScript: Vanilla JS (ES6+) - Digunakan untuk logika editor twibbon, manipulasi DOM, dan integrasi AJAX (Fetch API) untuk fitur pencarian serta infinite scroll.

• UI Components: * SweetAlert2: Untuk notifikasi pop-up yang elegan.

  • Font Awesome 6: Untuk ikonografi yang kaya dan tajam.

Keamanan & Optimasi

• Password Hashing: BCRYPT - Standar industri untuk melindungi data sensitif pengguna.

• Cross-Origin Resource Sharing (CORS) & CSRF: Perlindungan bawaan CI4 untuk mencegah serangan web umum.

• Local Processing: Pemrosesan gambar dilakukan di sisi klien (Client-side) untuk menghemat bandwidth server dan menjaga privasi foto pengguna.