Source Code Library
Koleksi project Web & Mobile Apps siap pakai untuk skripsi, tugas akhir, atau project komersial Anda.
Sistem Pembayaran RT/RW NET dengan PHP Native + MySQL
Sistem Pembayaran RT/RW NET - Web Aplikasi PHP Native untuk Manajemen Internet RT/RWPendahuluanHalo teman-teman developer! Kali ini saya akan share project web aplikasi yang saya buat untuk mengelola pembayaran internet RT/RW atau layanan internet komunitas. Aplikasi ini dibuat menggunakan PHP Native (tanpa framework) dengan design modern menggunakan Tailwind CSS dan icon Font Awesome.Sistem ini sangat cocok untuk:RT/RW NET (Internet komunitas perumahan)Kost-kostan dengan WiFiWarnetISP kecil-menengahLayanan internet komunitas lainnyaYang paling menarik, aplikasi ini sudah production-ready dan lengkap dengan fitur-fitur essential yang dibutuhkan untuk operasional sehari-hari.Fitur-Fitur UtamaUntuk Admin:Dashboard AdminStatistik real-time (total pelanggan, pelanggan aktif, tagihan pending, pendapatan)Grafik dan chart informatifQuick access ke fitur pentingNotifikasi pembayaran baruManagement PelangganCRUD (Create, Read, Update, Delete) pelangganGenerate akun user otomatisSet tanggal tagih custom per pelanggan (1-31)Status aktif/nonaktifFilter dan search pelangganValidasi: pelanggan tidak bisa dihapus jika masih punya tagihanManagement Paket InternetCRUD paket internetSet kecepatan (Mbps) dan hargaLihat jumlah pelanggan per paketCard layout yang elegantAuto calculate harga per MbpsKelola TagihanGenerate tagihan otomatis untuk semua pelanggan (fitur unggulan!)Filter: Semua, Belum Bayar, Menunggu Approval, Lunas, Jatuh TempoSearch berdasarkan nama pelangganAuto detect jatuh tempo dengan highlight merahDelete tagihan (kecuali yang sudah lunas)Approval PembayaranVerifikasi bukti pembayaran dari pelangganApprove atau Reject dengan alasanLihat bukti pembayaran (klik untuk buka tab baru)Auto update status tagihan saat approveNotifikasi otomatis ke pelangganSetting Metode PembayaranKelola rekening bankKelola nomor e-wallet (GoPay, OVO, DANA, dll)Upload QR Code untuk pembayaranToggle aktif/nonaktif per metodeLayout 3 kolom per tipe (Bank, E-Wallet, QR)Laporan PendapatanFilter periode: Bulan Ini, Bulan Lalu, Tahun Ini, Custom RangeTotal pendapatan & jumlah transaksiRata-rata per transaksiPendapatan per paketTrend 6 bulan terakhir (grafik)Top 5 pelangganTransaksi terbaruUntuk Pelanggan:Dashboard PelangganInfo paket internet (kecepatan, harga, tanggal tagih)Status koneksi (aktif/nonaktif)Total tagihan belum dibayarDaftar tagihan aktifRiwayat pembayaran terakhirTagihan SayaList semua tagihan (lunas & belum lunas)2 Tombol terpisah:Cara Bayar → Lihat info rekening/e-wallet/QRUpload Bukti → Upload bukti pembayaranStatus visual: Belum Bayar, Jatuh Tempo, Menunggu Approval, LunasRe-upload jika ditolak adminInfo Pembayaran (Modal)3 Kolom metode pembayaran:Transfer Bank (BCA, Mandiri, dll)E-Wallet (GoPay, OVO, DANA, dll)QR Code (scan langsung)Copy nomor rekening/e-wallet dengan 1 klikTampil QR Code dalam ukuran besarWarning box untuk nominal yang harus dibayarRiwayat PembayaranTabel semua transaksi pembayaranInfo detail: tanggal, periode, metode, jumlah, statusLink untuk lihat bukti pembayaranTampil alasan jika pembayaran ditolakStatistik: Total Transaksi, Disetujui, PendingProfil & SettingEdit data pribadi (nama, email, telepon, alamat)Ubah password dengan validasiInfo paket & biaya bulananStatus akunFitur Tambahan:Light & Dark Mode - Toggle theme sesuai preferensiResponsive Design - Sempurna di mobile, tablet, desktopNotifikasi Real-time - Icon lonceng dengan badge counterActive State Sidebar - Menu aktif otomatis highlightFont Awesome Icons - Semua icon menggunakan Font Awesome 6.5.1Elegant UI - Design modern dengan gradient dan shadowSecurity - Password hashing, SQL injection prevention, XSS preventionTeknologi yang DigunakanTeknologiVersiKeteranganPHP8.3+Bahasa pemrograman backendMySQL8.0+Database management systemTailwind CSS3.xFramework CSS (via CDN)Font Awesome6.5.1Icon library (via CDN)JavaScriptES6+Client-side scriptingCatatan: Aplikasi ini menggunakan PHP Native (no framework) sehingga lebih ringan dan mudah dipahami untuk pemula.System RequirementsSebelum install, pastikan server Anda memenuhi requirements berikut:Minimum Requirements:PHP: 8.3 atau lebih tinggiMySQL: 8.0 atau lebih tinggi (atau MariaDB 10.5+)Web Server: Apache 2.4+ atau Nginx 1.18+PHP Extensions:mysqlipdo_mysqlgd (untuk upload gambar)fileinfombstringDisk Space: Minimal 50 MBRAM: Minimal 512 MBRecommended Requirements:PHP: 8.3MySQL: 8.0+Web Server: Apache dengan mod_rewrite enabledRAM: 1 GB atau lebihSSL Certificate: Untuk production (HTTPS)Development Environment:Untuk testing lokal, Anda bisa menggunakan:XAMPP 8.2+ (Windows/Linux/Mac)WAMP (Windows)MAMP (Mac)Laragon (Windows)Docker dengan PHP 8.3 + MySQL 8.0Mobile ResponsiveAplikasi ini sudah fully responsive dan akan tampil sempurna di:Desktop (1920px+)Laptop (1366px - 1920px)Tablet (768px - 1366px)Mobile (320px - 768px)Test di berbagai device menggunakan:Chrome DevTools (F12 → Toggle Device Toolbar)BrowserStackReal devicesFitur yang Bisa Ditambahkan (Future)Jika ingin develop lebih lanjut, berikut ide fitur tambahan:Export LaporanExport ke Excel (PHPSpreadsheet)Export ke PDF (TCPDF/FPDF)Email NotificationPHPMailer untuk kirim emailNotifikasi tagihan baruNotifikasi pembayaran approvedWhatsApp IntegrationWhatsApp API/GatewayNotifikasi via WAAuto SuspendAuto nonaktifkan pelanggan yang nunggakReminder sebelum suspendMulti-User AdminRole: Super Admin, Admin, OperatorPermission managementStatistik & ChartChart.js untuk grafik interaktifDashboard analytics lebih detailAPI IntegrationPayment Gateway (Midtrans, Xendit)QRIS paymentMobile AppReact NativeFlutterPWA (Progressive Web App)CreditsTerima kasih kepada:Tailwind CSS - Framework CSS yang amazingFont Awesome - Icon library terbaikPHP Community - Untuk dokumentasi lengkapStack Overflow - Solusi berbagai problemKesimpulanRT/RW NET - Sistem Pembayaran Internet adalah aplikasi web yang:✅ Lengkap - Semua fitur essential sudah tersedia ✅ Mudah Install - Hanya 10 step, bisa jalan dalam 15 menit ✅ Ringan - PHP Native tanpa framework ✅ Modern - UI elegant dengan Tailwind CSS ✅ Responsive - Sempurna di mobile, tablet, desktop ✅ Secure - Password hashing, SQL injection prevention ✅ Production Ready - Siap digunakan untuk bisnis realCocok untuk:RT/RW NET operator yang ingin digitalisasi pembayaranISP kecil yang butuh sistem management sederhanaKost-kostan dengan WiFiWarnetDeveloper yang ingin belajar CRUD PHP nativeDownload sekarang dan mulai kelola pembayaran internet Anda dengan lebih efisien! Selamat mencoba! Jika ada pertanyaan, jangan ragu untuk bertanya di kolom komentar. Happy Coding! 🚀
Integrasi CoinGecko API & Chart.js dalam Dashboard Trading Crypto (Portfolio)
Membangun Platform Trading Kripto Futuristik sebagai Portfolio Web DeveloperProyek ini merupakan antarmuka platform trading kripto berbasis web yang dirancang sebagai portfolio UI/UX dan demonstrasi integrasi API real-time. Website ini bukan platform trading nyata, melainkan showcase desain modern, interaktivitas, animasi, serta visualisasi data yang profesional.Tujuan utama proyek ini adalah menunjukkan kemampuan dalam:Mendesain UI modern berbasis Tailwind CSSMengelola tema Dark/Light secara dinamisMengintegrasikan API publik (CoinGecko)Menampilkan data dalam bentuk grafik interaktif (Chart.js)Membangun pengalaman pengguna yang imersif dengan animasi dan efek visualKonsep Desain: Futuristik, Glassmorphism, dan Neon UITampilan website mengusung konsep visual yang kuat dan modern, meliputi:Glassmorphism:Efek transparansi dengan blur menggunakan backdrop-filter, memberikan kesan “kaca buram” yang elegan pada kartu, panel, dan navigasi.Neon Glow UI:Teks dan elemen utama memiliki efek cahaya (glow) untuk menonjolkan brand dan kesan futuristik.Animated Background & Grid System:Latar belakang memiliki animasi lembut serta pola grid yang menambah kedalaman visual.Responsive Design:Layout dioptimalkan untuk desktop, tablet, dan mobile menggunakan Tailwind CSS.Semua styling utama dibangun dengan Tailwind CSS (CDN), dikombinasikan dengan CSS custom untuk efek visual lanjutan seperti:gradient bordershover lift effectcustom scrollbarshimmer loading animationanimated floating iconsSistem Tema: Dark Mode sebagai DefaultWebsite menggunakan sistem Dark/Light Mode berbasis atribut data-theme pada tag <html>.Default tema diatur oleh baris berikut di JavaScript:const currentTheme = localStorage.getItem('theme') || 'dark';Artinya:Jika pengguna belum pernah mengganti tema, website otomatis memakai dark modeJika sudah pernah mengganti tema, preferensi disimpan di localStorage dan dipakai kembali saat halaman dimuat ulangPerubahan tema dilakukan dengan event listener:themeToggle.addEventListener('click', function() { const newTheme = htmlElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'; htmlElement.setAttribute('data-theme', newTheme); localStorage.setItem('theme', newTheme); });Di sisi CSS, warna dikelola menggunakan CSS variables::root { --bg-primary: #050810; --text-primary: #e0e6ed; } [data-theme="light"] { --bg-primary: #f0f4f8; --text-primary: #1a1f2e; }Pendekatan ini membuat seluruh tampilan bisa berubah hanya dengan mengganti nilai data-theme.Visualisasi Data dengan Chart.jsWebsite menampilkan beberapa jenis grafik untuk mensimulasikan dashboard trading profesional.1. Assets Distribution (Doughnut Chart)Menampilkan distribusi portfolio dalam bentuk grafik donat (doughnut chart). Data bersifat dummy (statis) sebagai ilustrasi:const portfolioChart = new Chart(portfolioCtx, { type: 'doughnut', data: { labels: ['Bitcoin', 'Ethereum', 'Binance Coin'], datasets: [{ data: [35, 25, 15] }] } });Fungsi utama grafik ini adalah menunjukkan bagaimana tampilan portfolio bisa divisualisasikan secara profesional.2. Trading Chart (Line Chart) — Data Real-TimeBagian ini adalah inti dari integrasi API. Data harga diambil dari CoinGecko API:const chartUrl = `${COINGECKO_API}/coins/${coinId}/market_chart?vs_currency=usd&days=7`;Data kemudian dipetakan ke grafik garis interaktif dengan:tooltip customanimasi smoothefek hover pada titik datatampilan responsifIni menunjukkan kemampuan mengolah data eksternal dan memvisualisasikannya dengan Chart.js.3. Trend & Volume Chart (Analytics Section)Terdapat dua grafik tambahan di bagian Analytics:Market Trend (Line Chart)Trading Volume (Bar Chart)Keduanya menggunakan data simulasi untuk meniru dashboard analitik tingkat profesional.Live Crypto Prices (Integrasi API Real-Time)Bagian “Live Trading” menampilkan harga kripto secara real-time dari CoinGecko API:const url = `${COINGECKO_API}/coins/markets?vs_currency=usd&ids=bitcoin,ethereum`;Informasi yang ditampilkan meliputi:Harga saat iniPersentase perubahan 24 jamVolume perdaganganMini sparkline chart untuk setiap koinSetiap kartu koin bisa diklik untuk memperbarui grafik utama di bagian Trading Chart.CORS Handling (Bagian Penting dalam Pengembangan)Awalnya proyek ini menggunakan proxy:const CORS_PROXY = 'https://cors-anywhere.herokuapp.com/';Namun layanan tersebut sudah dibatasi, sehingga diperbarui menjadi:const CORS_PROXY = 'https://cors-anywhere.com/';Solusi ini cukup untuk development/portfolio, tetapi tidak direkomendasikan untuk production.Solusi yang lebih profesional (disarankan):Buat proxy sendiri di server, misalnya proxy.php:<?php header("Access-Control-Allow-Origin: *"); echo file_get_contents($_GET['url']);Lalu di JavaScript:const CORS_PROXY = 'https://domainkamu.com/proxy.php?url=';Pendekatan ini lebih stabil, aman, dan tidak bergantung pada layanan pihak ketiga.Teknologi yang DigunakanHTML5Tailwind CSS (CDN)Vanilla JavaScriptChart.jsFont AwesomeCoinGecko APIFitur UtamaDark/Light Mode dengan penyimpanan preferensi di localStorageGlassmorphism & Neon UIAnimated Background & Smooth ScrollLive Crypto Prices (Real-Time)Interactive Trading ChartPortfolio Distribution (Doughnut Chart)Market Trend & Volume AnalysisIntersection Observer Animations (animasi saat scroll)Cara Menjalankan ProyekDownload atau clone repositoryBuka file index.html di browserPastikan koneksi internet aktif (untuk API CoinGecko)Status Proyek✅ UI/UX: Selesai✅ Integrasi API: Selesai⚠️ Backend: Tidak ada (hanya frontend + proxy)⚠️ Trading Engine: Tidak ada (hanya simulasi tampilan)KesimpulanWebsite ini sangat cocok sebagai:Portfolio frontend developerShowcase UI/UX modernStudi kasus integrasi API publikDemonstrasi penggunaan Chart.jsContoh implementasi Dark/Light Mode profesionalDisclaimer:Website ini dibuat hanya untuk keperluan portfolio dan demonstrasi, bukan platform trading resmi atau produk komersial.