Showing posts with label PUBLIK. Show all posts

Membuat Backend dari Aplikasi web React+Typescript

by BUDI SETIAJI PUBLIK

Saya memiliki sebuah aplikasi Pengajuan Dana Cash (PDC) untuk keperluan manajemen proyek di perusahaan. Aplikasi ini dibangun menggunakan antarmuka modern yang cepat dengan React, TypeScript, Vite, dan dipercantik dengan Tailwind CSS.

Namun, agar aplikasi ini bisa digunakan oleh tim secara nyata, saya harus memindahkannya ke server (cPanel) dan menghubungkannya dengan pangkalan data (database) sungguhan. Artikel ini adalah catatan perjalanan dan dokumentasi bagaimana saya mengubah aplikasi frontend statis menjadi aplikasi Full-Stack yang utuh.

Mengembangkan aplikasi React sekaligus backend PHP berarti harus sering berpindah antar file, komponen, API, dan struktur database.

Saya memilih membuat struktur folder yang benar-benar jelas agar frontend dan backend memiliki tanggung jawab masing-masing.

frontend/
backend/
database/
assets/

Pendekatan sederhana seperti ini ternyata sangat membantu ketika jumlah file mulai bertambah.

Selain itu, saya juga menyesuaikan tampilan editor kode dengan tema berwarna terang yang telah dimodifikasi agar tidak terlalu menyilaukan. Perubahan kecil tersebut ternyata cukup berpengaruh terhadap kenyamanan bekerja berjam-jam di depan monitor.

Produktivitas sering kali bukan hanya soal kemampuan menulis kode, tetapi juga bagaimana kita menciptakan lingkungan kerja yang membuat proses berpikir tetap nyaman.

Tahap 1 — Membangun Fondasi Database

Setelah frontend selesai, langkah berikutnya adalah menyiapkan "rumah" bagi seluruh data.

Saya menggunakan MySQL melalui phpMyAdmin di cPanel.

Alih-alih membuat satu tabel besar yang berisi semuanya, saya memilih pendekatan relasional.

Tabel `pengajuan_dana`

Berisi informasi utama dokumen seperti:

Nomor pengajuan
Tanggal
Departemen
Pemohon
Status pengajuan

Satu baris mewakili satu dokumen pengajuan.

Tabel `pengajuan_items`

Setiap dokumen tentu memiliki banyak rincian biaya.

Karena itu saya memisahkan seluruh detail pengeluaran ke tabel tersendiri.

Dengan desain ini, satu dokumen dapat memiliki puluhan bahkan ratusan item tanpa membuat struktur database menjadi berantakan.

Agar tidak terjadi konflik data, saya menggunakan Primary Key gabungan (Composite Primary Key) sehingga setiap rincian benar-benar unik.

Tabel `users`

Karena aplikasi nantinya digunakan oleh beberapa orang, saya juga menyiapkan tabel pengguna yang berisi:

Username
Password yang telah di-hash
Hak akses pengguna

Langkah ini menjadi fondasi bagi sistem autentikasi di tahap berikutnya.

Tahap 2 — Membangun Jembatan Antara React dan MySQL

Banyak pemula mengira React dapat langsung berbicara dengan MySQL.
Padahal kenyataannya tidak demikian.
React berjalan di browser, sedangkan MySQL berada di server.
Keduanya membutuhkan "penerjemah".
Di sinilah PHP Native berperan sebagai Backend API.
Saya sengaja memilih PHP murni karena:

ringan,
mudah dipindahkan ke shared hosting,
tidak memerlukan konfigurasi yang kompleks,
sangat cocok untuk aplikasi internal berskala kecil hingga menengah.

Backend yang saya bangun terdiri dari beberapa endpoint sederhana.

`api_tampil.php`

Mengambil data dari database, menyusunnya kembali menjadi JSON, lalu mengirimkannya ke React.

`api_simpan.php`

Menerima data dari formulir React kemudian menyimpannya ke MySQL.

Untuk menjaga konsistensi data, proses penyimpanan dilakukan menggunakan Database Transaction. Dengan cara ini, apabila salah satu proses gagal, seluruh transaksi akan dibatalkan sehingga tidak ada data yang tersimpan setengah jalan.

`api_update_status.php`

Endpoint khusus yang bertugas mengubah status pengajuan hanya dengan satu klik.

Masing-masing API memiliki tanggung jawab yang jelas sehingga proses pemeliharaan kode menjadi jauh lebih mudah.

Tahap 3 — Mengubah React Agar Berbicara dengan Server

Inilah bagian yang paling menarik.

Awalnya seluruh data diambil menggunakan:

localStorage.getItem(...)

Seluruh logika tersebut kemudian saya ubah menjadi komunikasi HTTP menggunakan fungsi fetch() bawaan JavaScript.

Alurnya menjadi seperti ini:

Pengguna membuka dashboard.
React mengirim permintaan ke server.
PHP membaca database.
MySQL mengembalikan data.
PHP mengubahnya menjadi JSON.
React merender seluruh data ke layar.

Begitu pula ketika pengguna menekan tombol Simpan, data langsung dikirim menuju API dan tersimpan permanen di server.

Dari sudut pandang pengguna, perubahan ini hampir tidak terlihat.

Namun dari sisi arsitektur aplikasi, perubahannya sangat besar.

Kini data dapat diakses oleh seluruh pengguna yang memiliki hak akses, bukan lagi hanya tersimpan di satu browser.

Tahap 4 — Menambahkan Lapisan Keamanan

Karena aplikasi ini berkaitan dengan pengajuan dana perusahaan, aspek keamanan menjadi prioritas utama. Saya membangun halaman login sederhana namun cukup kuat.
Alurnya adalah sebagai berikut:

pengguna memasukkan username dan password,
PHP melakukan verifikasi ke database,
password diperiksa menggunakan password_verify(),
password di database disimpan menggunakan password_hash(),
setelah berhasil login, server memberikan sesi autentikasi yang digunakan untuk mengakses dashboard.

Dengan pendekatan ini, password tidak pernah disimpan dalam bentuk teks biasa.

Struktur autentikasi tersebut juga cukup fleksibel apabila suatu saat ingin ditingkatkan menggunakan algoritma yang lebih modern seperti Argon2.

Selain keamanan fungsional, saya juga menggunakan identitas visual perusahaan pada halaman login agar aplikasi terlihat lebih profesional dan meningkatkan kepercayaan pengguna.

Tahap 5 — Deployment ke cPanel

Salah satu kelebihan React dengan Vite adalah proses build yang sangat sederhana.

Cukup menjalankan:

npm run build

Perintah tersebut akan:

mengompresi JavaScript,
menggabungkan aset,
mengoptimalkan CSS,
memperkecil ukuran file,
menghasilkan folder dist yang siap dipublikasikan.

Folder inilah yang kemudian saya unggah ke cPanel bersama seluruh file API PHP.

Dengan demikian:

React menangani antarmuka pengguna.
PHP menangani logika backend.
MySQL menangani penyimpanan data.

Ketiganya berjalan berdampingan di shared hosting tanpa memerlukan server Node.js yang terus aktif.

Bagi banyak developer, pendekatan seperti ini menjadi solusi yang ekonomis sekaligus praktis.

Tantangan yang Muncul di Tengah Jalan

Tidak ada proses pengembangan yang benar-benar mulus.
Beberapa masalah yang saya temui justru memberikan pelajaran yang sangat berharga.

Duplicate Entry

Awalnya database menolak penyimpanan beberapa rincian pengajuan.
Penyebabnya ternyata sederhana.
ID rincian item memiliki nilai yang sama.
Solusinya adalah mengubah desain Primary Key menjadi kombinasi antara ID Pengajuan dan ID Item sehingga setiap data memiliki identitas yang benar-benar unik.

Status "Gaib" Setelah Refresh

Pernah terjadi kondisi di mana status yang seharusnya masih Proses tiba-tiba berubah menjadi Closed ketika halaman dimuat ulang.
Setelah ditelusuri, masalahnya bukan pada database, melainkan pada perbedaan penanganan nilai antara JavaScript dan PHP.
JavaScript dapat menghasilkan nilai undefined, sedangkan PHP lebih mengenal null.
Perbedaan kecil ini ternyata cukup untuk membuat logika aplikasi menghasilkan perilaku yang tidak diharapkan.

Dashboard Tidak Sinkron

Masalah lain muncul ketika jumlah kartu statistik berbeda dengan jumlah data pada tabel.
Penyebabnya adalah logika lama masih menggunakan skema status sebelumnya.
Setelah seluruh perhitungan disesuaikan dengan struktur database terbaru, dashboard kembali konsisten.

Pelajaran yang Saya Dapatkan

Proyek ini mengajarkan satu hal yang cukup menarik.
Menulis kode hanyalah sebagian kecil dari pekerjaan seorang developer.
Yang jauh lebih penting adalah bagaimana merancang komunikasi antar komponen.
Frontend harus mampu berbicara dengan backend.
Backend harus memahami database.
Database harus mampu menjaga integritas data.
Ketika ketiga bagian tersebut dirancang dengan baik, aplikasi menjadi jauh lebih stabil, mudah dikembangkan, dan siap menghadapi kebutuhan yang lebih besar di masa depan.

Penutup

Perjalanan memindahkan aplikasi dari Local Storage menuju server sungguhan ternyata bukan sekadar proses teknis. Ini adalah proses memahami bagaimana sebuah aplikasi modern bekerja secara utuh.

Menggabungkan React, TypeScript, Vite, Tailwind CSS, PHP Native, dan MySQL memberikan keseimbangan yang menarik antara pengalaman pengguna yang cepat dengan backend yang ringan dan mudah dipelihara.

Yang paling memuaskan bukanlah ketika aplikasi berhasil diunggah ke server, melainkan ketika seluruh bagian—frontend, backend, database, autentikasi, hingga deployment—akhirnya dapat bekerja sebagai satu kesatuan yang utuh.

Jika Anda saat ini sedang membangun aplikasi React yang masih mengandalkan Local Storage, mungkin inilah saat yang tepat untuk mulai melangkah ke tahap berikutnya.

Karena di situlah proses belajar yang sesungguhnya dimulai.

Selamat bereksperimen, selamat membangun, dan semoga setiap bug yang Anda temui selalu membawa pemahaman baru.

Continue Reading →

Tips Mengelola Project di ChatGPT Project

by BUDI SETIAJI PUBLIK

Untuk proyek PHP yang cukup besar (banyak file, banyak modul, dan pengembangan bertahap), tantangan terbesar biasanya bukan coding, melainkan menjaga struktur dan konsistensi proyek agar tidak berantakan setelah beberapa minggu.

Berikut pendekatan yang saya lakukan ketika menggunakan Projects di ChatGPT.

1. Buat Dokumen Master Terlebih Dahulu

Sebelum menulis satu baris kode pun, buat dokumen seperti:


Nama Proyek:
Sistem Inventory Gudang

Tujuan:
Mengelola stok barang, supplier, dan transaksi keluar masuk.

Teknologi:
- PHP 8.3
- MariaDB
- Bootstrap 5
- Vanilla Javascript

User:
- Admin
- Operator

Modul:
1. Login
2. Dashboard
3. Master Barang
4. Supplier
5. Barang Masuk
6. Barang Keluar
7. Laporan

Ini menjadi "sumber kebenaran" proyek.

2. Minta AI Membuat Arsitektur Folder

Sebelum coding:


Buatkan struktur folder proyek PHP inventory
menggunakan pendekatan modular.

Contoh:


project/
│
├── config/
│   └── database.php
│
├── modules/
│   ├── login/
│   ├── barang/
│   ├── supplier/
│   └── laporan/
│
├── assets/
│   ├── css/
│   ├── js/
│   └── images/
│
├── templates/
│   ├── header.php
│   ├── sidebar.php
│   └── footer.php
│
└── index.php

Ini sangat penting agar file tidak tersebar sembarangan.

3. Simpan "Aturan Coding"

Misalnya:


Aturan proyek:

- PHP procedural
- Tidak menggunakan framework
- Semua query memakai prepared statement
- Bootstrap 5
- Bahasa Indonesia
- Semua halaman menggunakan template header/footer

Setiap kali meminta kode:


Ikuti aturan coding proyek yang sudah ditentukan.

AI akan lebih konsisten.

4. Bangun Per Modul

Jangan meminta:


Buat sistem inventory lengkap.

Karena hasilnya biasanya kacau.

Lebih baik:


Buat modul login dahulu.

Setelah selesai:


Buat modul master barang.

Lalu:


Buat modul supplier.

Dan seterusnya.

5. Selalu Minta File Lengkap

Jangan:


Buat fitur tambah barang.

Lebih baik:


Buat file:

barang_list.php
barang_add.php
barang_edit.php
barang_delete.php

lengkap dan siap jalan.

Dengan begitu Anda tahu file apa saja yang harus dibuat.

6. Minta Database Dulu

Biasanya saya menyarankan urutan:

Tahap 1

Database


tbl_users
tbl_barang
tbl_supplier
tbl_barang_masuk
tbl_barang_keluar

Tahap 2

ERD sederhana.

Tahap 3

CRUD.

Jangan mulai dari UI.

Database adalah fondasi.

7. Gunakan Project ChatGPT Sebagai Dokumentasi

Dalam satu Project, buat chat seperti:


00 - Spesifikasi
01 - Database
02 - Login
03 - Dashboard
04 - Barang
05 - Supplier
06 - Laporan

Jangan campur semua pembahasan dalam satu chat panjang.

Ini membuat pencarian jauh lebih mudah.

8. Simpan "Project Brief"

Saya sering menyarankan membuat file seperti:


PROJECT_RULES.md

Isinya:


Nama proyek:
Inventory System

Bahasa:
Indonesia

Database:
MariaDB

Coding style:
Procedural

UI:
Bootstrap 5

Autentikasi:
Session PHP

Struktur folder:
modules/
assets/
templates/
config/

Setiap kali memulai chat baru:


Gunakan PROJECT_RULES berikut...

AI langsung paham konteks.

9. Minta AI Membuat TODO List

Contoh:


Buat roadmap pengerjaan inventory system.

Hasil:


[✓] Database
[✓] Login
[ ] Dashboard
[ ] Barang
[ ] Supplier
[ ] Barang Masuk
[ ] Barang Keluar
[ ] Laporan
[ ] Backup Database

Ini membantu mengontrol proyek yang panjang.

Continue Reading →

Tweaking Windows 10 di Virtual Machine

by BUDI SETIAJI PUBLIK

Artikel ini dibuat berdasarkan pengalaman saya menggunakan Windows 10 pro di Virtualbox yang terinstal di Ubuntu

Jika kamu butuh Windows 10—entah untuk testing, software tertentu, atau sekadar eksperimen. Tapi di sisi lain, kamu tidak ingin “mengorbankan” sistem utama. Maka Virtual Machine jadi pilihan.

Masalahnya… resource terbatas.

RAM hanya 4GB. CPU cuma 2 thread. Dan tiba-tiba Windows 10 terasa seperti “makhluk besar” yang dipaksa hidup di ruangan sempit.

Lemot, delay, kadang freeze.

Di titik ini, pertanyaannya bukan lagi “apakah bisa dijalankan?”, tapi:
bagaimana membuatnya tetap layak digunakan?

Di sinilah tweaking mulai berperan.

1. Mematikan Service yang Diam-Diam Menguras Resource

Di balik tampilan Windows yang terlihat “idle”, sebenarnya ada banyak service yang terus bekerja.

Beberapa di antaranya:

SysMain (Superfetch)
Windows Search (Indexing)
Connected User Experiences and Telemetry

Sekilas terlihat tidak berbahaya. Tapi dalam lingkungan VM, ini adalah pemborosan resource.

Hubungannya dengan performa:

SysMain bekerja dengan cara memprediksi aplikasi yang sering digunakan lalu melakukan preload ke RAM.
→ Masalahnya: di RAM 4GB, ini justru membuat RAM cepat penuh dan memicu swapping ke disk (yang jauh lebih lambat).
Windows Search (Indexing) terus melakukan scanning file di background.
→ Di VM, disk I/O sudah lebih lambat dibanding fisik, jadi aktivitas ini bisa menyebabkan disk bottleneck (100% usage tiba-tiba).
Telemetry terus mengirim data ke server Microsoft.
→ Walaupun kecil, ini tetap menggunakan CPU cycle dan network.

Hasil akhirnya:
Dengan menonaktifkan service ini, kamu mengurangi background noise pada CPU dan disk. Sistem jadi lebih fokus ke task utama.

2. Debloat: Menghapus “Beban Tak Terlihat”

Windows 10 datang dengan banyak aplikasi bawaan yang sebenarnya tidak kamu gunakan:

Xbox
Bing
Zune (Groove Music)
Skype
Game seperti Solitaire

Kelihatannya sepele. Tapi sebenarnya tidak.

Hubungannya dengan performa:

Banyak aplikasi ini tetap berjalan sebagai background process walaupun tidak dibuka.
Mereka bisa:
- Menggunakan RAM (walau sedikit, tapi akumulatif)
- Menambahkan service tambahan
- Menambah waktu startup

Di sistem normal mungkin tidak terasa. Tapi di VM:

Setiap 100MB RAM itu berharga.

Hasil akhirnya:
Dengan debloat, kamu mengurangi jumlah proses aktif → RAM lebih lega → CPU scheduler lebih ringan → sistem terasa lebih responsif.

3. Optimasi RAM: Kunci Utama di Lingkungan Terbatas

Di VM dengan 4GB RAM, ini bukan sekadar optimasi—ini survival strategy.

a. Mematikan Startup Apps

Startup apps sering jadi “silent killer”.

Hubungannya dengan performa:

Saat booting, semua aplikasi startup berjalan bersamaan
Ini menyebabkan:
- Lonjakan CPU
- RAM langsung penuh di awal
- Waktu boot lebih lama

Dengan mematikan startup yang tidak perlu:

Boot lebih cepat
Sistem idle lebih ringan

b. Virtual Memory (Pagefile)

Mengatur:

Initial: 1024 MB
Maximum: 4096 MB

Hubungannya dengan performa:

Ketika RAM penuh:

Tanpa pagefile → aplikasi bisa crash / freeze
Dengan pagefile → data dipindahkan ke disk

Memang disk jauh lebih lambat dari RAM, tapi:

Lebih baik lambat daripada hang total.

Catatan penting:
Di VM, pagefile sangat bergantung pada kecepatan storage host. Kalau host pakai SSD → efeknya masih cukup oke.

4. Efek Visual: Indah Tapi Mahal

Windows punya banyak efek visual:

Animasi
Transparansi
Shadow
Fade effect

Semua ini diproses oleh GPU (atau CPU jika GPU virtual terbatas).

Hubungannya dengan performa:

VM biasanya punya GPU virtual yang sangat terbatas
Efek visual akan:
- Menggunakan CPU tambahan
- Membebani rendering pipeline
- Menambah latency saat membuka window

Dengan memilih Adjust for best performance:

Animasi dihilangkan
Rendering jadi lebih sederhana

Hasilnya:
UI terasa lebih “kasar”, tapi jauh lebih responsif.

5. Power Plan: Membuka “Rem” pada CPU

Secara default, Windows menggunakan mode Balanced.

Di mode ini:

CPU bisa menurunkan clock untuk hemat energi

Masalah di VM:

CPU host sudah dibagi ke VM
Jika di dalam VM CPU masih dibatasi → performa makin turun

Dengan memilih High Performance:

Hubungannya dengan performa:

CPU tidak ditahan
Respons aplikasi lebih cepat
Latency berkurang

6. Windows Update: Aktivitas Background yang Berat

Windows Update sering berjalan tanpa terasa.

Hubungannya dengan performa:

Download update → makan bandwidth
Install update → CPU spike
Background service → disk usage tinggi

Di VM, ini bisa terasa seperti:

“Lagi kerja tiba-tiba laptop jadi berat tanpa alasan”

Dengan menonaktifkan sementara:

Kamu menghindari spike mendadak

Tapi tetap penting:
Aktifkan kembali saat memang ingin update keamanan.

7. Optimasi Virtual Machine: Fondasi yang Sering Diremehkan

Banyak orang fokus di dalam OS, tapi lupa bahwa VM itu “dunia buatan”.

Beberapa pengaturan krusial:

CPU: 2 core
RAM: 4GB
Video Memory: maksimal
VT-x / AMD-V: aktif
3D Acceleration: uji coba
Host I/O Cache: aktif

Hubungannya dengan performa:

VT-x / AMD-V → memungkinkan CPU menjalankan VM lebih “native-like”
Video Memory besar → mengurangi bottleneck rendering
Host I/O Cache → mempercepat akses disk dengan memanfaatkan cache host

Ini seperti:

Mengatur “mesin” sebelum mengutak-atik “penumpangnya”.

8. Guest Additions: Driver yang Mengubah Segalanya

Tanpa Guest Additions, VM itu seperti:

Menggunakan hardware tanpa driver.

Hubungannya dengan performa:

Driver grafis lebih optimal → UI lebih smooth
Integrasi input lebih baik → tidak lag
Manajemen resource lebih efisien

Efeknya langsung terasa:

Scroll lebih halus
Window tidak patah-patah
CPU usage lebih stabil

9. Service Tambahan: Kecil Tapi Tetap Berpengaruh

Beberapa service seperti:

Print Spooler
Fax
Remote Registry

Jika tidak digunakan, hanya jadi “penumpang gelap”.

Hubungannya dengan performa:

Setiap service = konsumsi RAM + CPU idle
Mengurangi jumlah service → mengurangi context switching CPU

10. Aplikasi Ringan: Faktor yang Sering Diabaikan

Kadang bukan Windows-nya yang berat, tapi aplikasinya.

Contoh:

Chrome dengan 10 tab vs 2 tab → perbedaan besar
Aplikasi berat → RAM langsung habis

Hubungannya dengan performa:

Aplikasi berat → memicu swapping (RAM → disk)
Disk di VM lebih lambat → sistem terasa “ngelag”

Solusinya:

Gunakan aplikasi yang efisien
Kontrol jumlah tab

11. Host Juga Punya Peran Besar

Ini yang sering dilupakan:

VM tidak berdiri sendiri.

Jika host sedang berat:

VM ikut “kelaparan resource”

Hubungannya dengan performa:

RAM host penuh → VM ikut lambat
CPU host sibuk → VM kekurangan jatah
Disk host sibuk → VM delay

Menjalankan Windows 10 di VM spek rendah bukan tentang membuatnya “ngebut”. Tapi tentang Menghilangkan semua hal yang tidak perlu agar yang penting bisa berjalan. Dan menariknya, dari sini kita belajar satu hal Performa bukan hanya soal hardware, tapi soal seberapa efisien kita menggunakan resource yang ada.

Continue Reading →

Pengamanan dasar website PHP native

by BUDI SETIAJI PUBLIK

Secara default, PHP Native memberikan kebebasan penuh, namun itu berarti kita harus membangun "benteng" pertahanan sendiri secara manual. Berikut adalah langkah-langkah krusial untuk memperketat keamanan websitemu:

1. Mencegah SQL Injection (SQLi)

Ini adalah ancaman paling umum. Jangan pernah memasukkan variabel langsung ke dalam query SQL.

Solusi: Gunakan Prepared Statements dengan PDO (PHP Data Objects).

Contoh Kode:

// Cara LAMA yang Berbahaya (Jangan ditiru!)
// $sql = "SELECT * FROM users WHERE email = '" . $email . "'";

// Cara AMAN dengan PDO
$stmt = $pdo->prepare('SELECT * FROM users WHERE email = :email');
$stmt->execute(['email' => $email]);
$user = $stmt->fetch();

Dokumentasi: Dengan prepare, database memisahkan antara instruksi SQL dan data user, sehingga input berbahaya tidak akan dieksekusi sebagai perintah.

2. Mengamankan Input dari XSS (Cross-Site Scripting)

XSS terjadi ketika user memasukkan script (seperti <script>alert('hack')</script>) ke form dan script itu muncul di halaman lain.

Solusi: Selalu gunakan htmlspecialchars() saat menampilkan data ke browser.

Contoh Kode:

// Saat menampilkan data user
echo htmlspecialchars($user_input, ENT_QUOTES, 'UTF-8');

3. Hashing Password yang Kuat

Jangan pernah menyimpan password dalam bentuk teks biasa atau MD5.

Solusi: Gunakan fungsi bawaan PHP password_hash() dan password_verify().

Contoh Kode:

// Saat pendaftaran (Hashing)
$hashedPassword = password_hash($password, PASSWORD_BCRYPT);

// Saat login (Verifikasi)
if (password_verify($inputPassword, $hashedPassword)) {
    // Login sukses
}

4. Proteksi CSRF (Cross-Site Request Forgery)

Seperti Laravel, kamu harus membuat Token CSRF manual agar form hanya bisa dikirim dari website milikmu sendiri.

Langkah-langkah:

Buat token acak dan simpan di $_SESSION.
Masukkan token ke dalam input tersembunyi (hidden field) di form.
Validasi token saat form diterima.

5. Konfigurasi Folder dan File

Struktur folder yang buruk bisa mengekspos file sensitif seperti .env atau log.

Saran: Pisahkan folder publik dan folder sistem. Hanya folder public yang bisa diakses dari browser.

File .htaccess: Gunakan untuk membatasi akses ke folder tertentu.

# Isi file .htaccess di folder include/ atau config/
Deny from all

Struktur folder yang baik adalah garis pertahanan pertama dalam PHP Native. Prinsip utamanya adalah "Separation of Concerns": memisahkan kode logika aplikasi dari file yang bisa diakses langsung oleh publik (browser).

Berikut adalah rekomendasi struktur folder yang aman dan terorganisir:

Struktur Folder yang Disarankan

project-root/
│
├── core/                 # Logika utama (Tidak boleh diakses publik)
│   ├── config.php        # Koneksi database & API keys
│   ├── functions.php     # Helper functions
│   ├── init.php          # Inisialisasi session & autoload
│   └── .htaccess         # Keamanan: Deny from all
│
├── includes/             # Komponen UI (Partial)
│   ├── header.php
│   ├── footer.php
│   └── navbar.php
│
├── public/               # SATU-SATUNYA folder yang diakses browser
│   ├── css/
│   ├── js/
│   ├── uploads/          # Tempat file yang diunggah user
│   ├── index.php         # Front Controller
│   └── login.php
│
├── storage/              # Log, session manual, atau file privat
│   └── logs/
│
├── .env                  # Data sensitif (Gunakan library phpdotenv)
└── .htaccess             # Redirect semua request ke folder public/

Mengapa Struktur Ini Lebih Aman?

1. Membatasi "Document Root"

Pada hosting (seperti Apache atau Nginx), arahkan Document Root ke folder public/, bukan ke project-root/.

Efeknya: Jika hacker mencoba mengakses domain.com/core/config.php, server akan memberikan error 404 atau 403 karena folder tersebut berada "di luar" jangkauan publik.

2. Penggunaan file `.htaccess` di Folder Sensitif

Jika kamu tidak bisa mengubah Document Root di hosting (misal pada Shared Hosting biasa), letakkan file .htaccess di dalam folder core/ dan storage/ dengan isi:

# Mencegah siapapun mengakses file di folder ini via browser
Deny from all

3. File Konfigurasi di Luar Public

File config.php yang berisi username dan password database harus berada di folder core/. Di dalam file public/index.php, kamu cukup memanggilnya menggunakan:

require_once '../core/config.php';

Dengan begini, meskipun ada kesalahan konfigurasi server yang membuat file PHP terbaca sebagai teks biasa, file database-mu tetap tidak bisa ditebak lokasinya.

Langkah Implementasi

Pindahkan semua file logic (database, class, functions) ke dalam folder core/.
Buat folder public/ dan masukkan file .css, .js, serta file PHP yang bertugas menampilkan halaman (seperti index.php).
Update Path: Pastikan semua perintah include atau require disesuaikan jalurnya (misal: ../core/functions.php).

Dokumentasi Keamanan Tambahan:

Folder Uploads: Di dalam public/uploads/, pastikan kamu menaruh .htaccess yang mematikan eksekusi script agar user tidak bisa mengunggah file .php dan menjalankannya.
# public/uploads/.htaccess php_flag engine off

Ringkasan Tips Tambahan

Komponen	Saran Keamanan
Sesi	Gunakan `session_regenerate_id(true)` setelah login untuk mencegah session hijacking.
Error	Matikan `display_errors` di produksi (melalui `php.ini`) agar struktur kode tidak terlihat hacker.
Upload	Validasi tipe file secara ketat. Jangan izinkan file `.php` diunggah ke folder gambar.

Continue Reading →

Membedah Sistem Keamanan Login Modern

by BUDI SETIAJI PUBLIK

Dari Google Account hingga Implementasi Aman di PHP

Keamanan sistem login sering kali direduksi hanya menjadi satu hal: password hashing. Padahal, di dunia nyata—terutama pada skala besar—keamanan login adalah hasil dari ekosistem berlapis yang saling melengkapi. Dalam artikel ini, kita akan membedahnya secara bertahap: mulai dari bagaimana Google Account mengamankan miliaran penggunanya, lalu bagaimana developer aplikasi skala kecil–menengah bisa meniru prinsip tersebut menggunakan Argon2id di PHP, hingga bagaimana struktur folder proyek ikut berperan penting dalam menjaga keamanan.

Bagian 1 — Sistem Keamanan Google Account: Lebih dari Sekadar Hashing

Google Account adalah salah satu sistem autentikasi paling kompleks di dunia. Dengan miliaran akun aktif, Google tidak bisa hanya mengandalkan algoritma hashing yang kuat, tetapi harus membangun arsitektur keamanan berlapis.

1. Password Hashing & Salting

Password tidak pernah disimpan dalam bentuk asli. Google menggunakan algoritma hashing yang kuat dan slow untuk menahan brute force attack.

Setiap password diberi salt unik, sehingga hash tidak bisa ditebak menggunakan rainbow table. Detail algoritma tidak dipublikasikan, namun laporan teknis mengindikasikan penggunaan PBKDF2 atau algoritma internal dengan tingkat keamanan setara atau lebih tinggi.

2. Multi-Factor Authentication (MFA)

Google mendorong penggunaan 2FA/MFA melalui SMS, aplikasi autentikator, hingga hardware security key berbasis FIDO. Dengan MFA, kebocoran password saja tidak cukup untuk mengambil alih akun.

3. Proteksi Berbasis AI

Machine learning digunakan untuk mendeteksi anomali login, seperti:

Lokasi geografis tidak biasa
Perangkat baru
Pola perilaku login yang mencurigakan

Jika terdeteksi, sistem akan meminta verifikasi tambahan atau memblokir percobaan login.

4. Rate Limiting & Throttling

Percobaan login berulang akan dibatasi atau diperlambat. Ini membuat brute force attack menjadi tidak efektif.

5. Hardware Security Module (HSM)

Google menyimpan kunci kriptografi di HSM, sehingga data sensitif tetap aman bahkan dari akses internal tanpa otorisasi khusus.

6. Compliance & Regulasi

Sistem Google mematuhi standar internasional seperti FIPS dan ISO/IEC 27001, memastikan keamanan sekaligus kepatuhan regulasi global.

7. Ekosistem Keamanan Terintegrasi

Mulai dari sistem recovery akun, proteksi phishing, hingga password manager terintegrasi di Chrome dan Android—semuanya saling mendukung keamanan login.

Intinya: Google tidak mengandalkan satu teknologi, melainkan kombinasi hashing, MFA, AI, rate limiting, HSM, dan compliance.

Bagian 2 — Implementasi Argon2id di Proyek PHP: Belajar dari Pendekatan Enterprise

Developer aplikasi skala kecil memang tidak memiliki AI atau HSM seperti Google. Namun, prinsip dasarnya tetap bisa diterapkan. Salah satu fondasi terkuat adalah pemilihan algoritma hashing yang tepat.

Mengapa Argon2id?

Tahan GPU attack karena bersifat memory-hard
Kombinasi Argon2i dan Argon2d
Parameter fleksibel sesuai kapasitas server

PHP (≥ 7.2) sudah mendukung Argon2id secara native.

Contoh Implementasi Sederhana di PHP

<?php
$options = [
    'memory_cost' => 1 << 17, // 128 MB
    'time_cost'   => 4,
    'threads'     => 2
];

$password = "rahasiaUser123";
$hash = password_hash($password, PASSWORD_ARGON2ID, $options);

$input = "rahasiaUser123";
if (password_verify($input, $hash)) {
    echo "Login berhasil!";
} else {
    echo "Password salah!";
}
?>

Best Practices Tambahan

Gunakan rate limiting pada login
Tambahkan MFA sederhana (OTP email atau authenticator)
Regenerasi session ID setelah login

Kesimpulan Bagian Ini: Argon2id adalah “senjata utama” developer independen, sementara Google memiliki “arsenal lengkap”. Namun, fondasinya tetap sama.

Bagian 3 — Folder Structure Aman untuk Proyek Login Berbasis PHP

Keamanan tidak berhenti di algoritma. Struktur folder yang salah bisa membuat sistem login yang kuat menjadi rapuh.

Prinsip Dasar

Pisahkan file publik dan file sensitif
Jangan biarkan logic PHP inti bisa diakses langsung via URL

Contoh Struktur Folder Aman

project-root/
│
├── public/            # file yang bisa diakses browser
│   ├── index.php
│   ├── login.php
│   ├── assets/
│   └── .htaccess
│
├── app/               # logika aplikasi
│   ├── config/
│   ├── controllers/
│   ├── models/
│   └── helpers/
│
├── storage/           # log, cache, upload sementara
│   └── logs/
│
└── vendor/

Best Practices Keamanan Tambahan

Blokir akses ke app/ dan storage/
Simpan kredensial di .env
Jangan tampilkan error detail ke user
Gunakan CSRF token pada form

Struktur ini terinspirasi dari framework seperti Laravel yang sudah terbukti secara industri.

Penutup

Keamanan login modern adalah kombinasi dari:

Algoritma hashing yang kuat
Proteksi berlapis (MFA, rate limiting, session security)
Arsitektur dan struktur proyek yang benar

Google menunjukkan bagaimana semua lapisan ini bekerja pada skala global. Sementara itu, developer PHP bisa mengadaptasi prinsip yang sama dalam skala lebih kecil—namun tetap aman dan profesional. Dengan pendekatan ini, sistem login sederhana pun bisa mendekati standar enterprise.

Continue Reading →

Prinsip Prompt Agar LLM Tidak "Halu"

by BUDI SETIAJI PUBLIK

Pertama-tama, pahami dulu 5 prinsip ini:

Jelaskan peran model
Misalnya: “Bertindak sebagai senior web developer”

Spesifik soal output
Mau kode saja, tanpa penjelasan, atau kode + komentar?

Tentukan teknologi & versi
PHP 8.1, vanilla JS, tanpa framework, dsb.

Batasi scope
Apa yang boleh dan tidak boleh dilakukan.

Kasih konteks data & skenario
Input, output, alur, contoh kasus.

Struktur Prompt Ideal (Template Umum)

Gunakan urutan ini 👇


1. Peran model
2. Tujuan kode
3. Teknologi yang digunakan
4. Spesifikasi detail
5. Batasan / larangan
6. Format output yang diinginkan

Template Prompt (Siap Pakai)


Bertindak sebagai [peran].

Saya ingin membuat [tujuan spesifik].

Teknologi:
- Bahasa: [PHP / HTML / JavaScript]
- Versi / environment: [jika ada]
- Framework: [jika ada / tidak ada]

Spesifikasi:
- Input:
- Proses:
- Output:
- Aturan khusus:

Batasan:
- Jangan gunakan [library / framework tertentu]
- Jangan menambahkan fitur di luar spesifikasi
- Fokus hanya pada [scope]

Format jawaban:
- Berikan hanya kode
- Gunakan komentar seperlunya
- Jangan sertakan penjelasan panjang

Contoh Prompt BURUK (Penyebab "Halu")


Buatkan saya kode login pakai PHP

Kenapa gagal?

Tidak jelas versi PHP
Tidak jelas pakai database apa
Tidak jelas mau aman atau sekadar contoh
Tidak ada batasan output

Contoh Prompt BAIK (PHP)


Bertindak sebagai senior PHP developer.

Saya ingin membuat sistem login sederhana.

Teknologi:
- PHP 8.1
- MySQL
- Tanpa framework

Spesifikasi:
- Input: email dan password (POST)
- Proses:
  - Validasi input
  - Password disimpan menggunakan password_hash
  - Verifikasi menggunakan password_verify
- Output:
  - Redirect ke dashboard jika sukses
  - Pesan error jika gagal

Batasan:
- Jangan gunakan library eksternal
- Jangan buat fitur register
- Jangan buat HTML, hanya PHP logic

Format jawaban:
- Berikan hanya kode PHP
- Sertakan komentar singkat

💡 Dengan prompt ini, model hampir tidak mungkin “ngaco”.

Contoh Prompt BAIK (JavaScript)


Bertindak sebagai frontend developer.

Buatkan fungsi JavaScript untuk validasi form.

Teknologi:
- Vanilla JavaScript
- Berjalan di browser modern

Spesifikasi:
- Validasi:
  - Email tidak boleh kosong
  - Password minimal 8 karakter
- Jika invalid:
  - Tampilkan alert
- Jika valid:
  - Return true

Batasan:
- Jangan gunakan framework
- Jangan manipulasi DOM selain alert

Format jawaban:
- Kode JavaScript saja

Tips Tambahan Anti-Halu

1. Pakai kata “HANYA”
“HANYA berikan kode, tanpa penjelasan.”

2. Sebutkan “jangan menambahkan asumsi”
LLM suka mengisi kekosongan.

3. Kalau proyek besar → pecah per modul
Jangan minta: “Buatkan sistem e-commerce lengkap”
Tapi:

Modul login
Modul produk
Modul checkout

Bonus: Prompt Debugging (Super Efektif)


Analisa kode berikut.
Jangan tulis ulang seluruh kode.
Hanya jelaskan bug dan solusinya.

Continue Reading →

Membuat Backend dari Aplikasi web React+Typescript

Tahap 1 — Membangun Fondasi Database

Tabel pengajuan_dana

Tabel pengajuan_items

Tabel users

Tahap 2 — Membangun Jembatan Antara React dan MySQL

api_tampil.php

api_simpan.php

api_update_status.php

Tahap 3 — Mengubah React Agar Berbicara dengan Server

Tahap 4 — Menambahkan Lapisan Keamanan

Tahap 5 — Deployment ke cPanel

Tantangan yang Muncul di Tengah Jalan

Duplicate Entry

Status "Gaib" Setelah Refresh

Dashboard Tidak Sinkron

Pelajaran yang Saya Dapatkan

Penutup

Tips Mengelola Project di ChatGPT Project

1. Buat Dokumen Master Terlebih Dahulu

2. Minta AI Membuat Arsitektur Folder

3. Simpan "Aturan Coding"

4. Bangun Per Modul

5. Selalu Minta File Lengkap

6. Minta Database Dulu

Tahap 1

Tahap 2

Tahap 3

7. Gunakan Project ChatGPT Sebagai Dokumentasi

8. Simpan "Project Brief"

9. Minta AI Membuat TODO List

Tweaking Windows 10 di Virtual Machine

1. Mematikan Service yang Diam-Diam Menguras Resource

2. Debloat: Menghapus “Beban Tak Terlihat”

3. Optimasi RAM: Kunci Utama di Lingkungan Terbatas

a. Mematikan Startup Apps

b. Virtual Memory (Pagefile)

4. Efek Visual: Indah Tapi Mahal

5. Power Plan: Membuka “Rem” pada CPU

6. Windows Update: Aktivitas Background yang Berat

7. Optimasi Virtual Machine: Fondasi yang Sering Diremehkan

8. Guest Additions: Driver yang Mengubah Segalanya

9. Service Tambahan: Kecil Tapi Tetap Berpengaruh

10. Aplikasi Ringan: Faktor yang Sering Diabaikan

11. Host Juga Punya Peran Besar

Pengamanan dasar website PHP native

1. Mencegah SQL Injection (SQLi)

2. Mengamankan Input dari XSS (Cross-Site Scripting)

3. Hashing Password yang Kuat

4. Proteksi CSRF (Cross-Site Request Forgery)

5. Konfigurasi Folder dan File

Struktur Folder yang Disarankan

Mengapa Struktur Ini Lebih Aman?

1. Membatasi "Document Root"

2. Penggunaan file .htaccess di Folder Sensitif

3. File Konfigurasi di Luar Public

Langkah Implementasi

Dokumentasi Keamanan Tambahan:

Ringkasan Tips Tambahan

Membedah Sistem Keamanan Login Modern

Dari Google Account hingga Implementasi Aman di PHP

Bagian 1 — Sistem Keamanan Google Account: Lebih dari Sekadar Hashing

1. Password Hashing & Salting

2. Multi-Factor Authentication (MFA)

3. Proteksi Berbasis AI

4. Rate Limiting & Throttling

5. Hardware Security Module (HSM)

6. Compliance & Regulasi

7. Ekosistem Keamanan Terintegrasi

Bagian 2 — Implementasi Argon2id di Proyek PHP: Belajar dari Pendekatan Enterprise

Mengapa Argon2id?

Contoh Implementasi Sederhana di PHP

Best Practices Tambahan

Bagian 3 — Folder Structure Aman untuk Proyek Login Berbasis PHP

Prinsip Dasar

Contoh Struktur Folder Aman

Best Practices Keamanan Tambahan

Penutup

Prinsip Prompt Agar LLM Tidak "Halu"

Pertama-tama, pahami dulu 5 prinsip ini:

Tabel `pengajuan_dana`

Tabel `pengajuan_items`

Tabel `users`

`api_tampil.php`

`api_simpan.php`

`api_update_status.php`

2. Penggunaan file `.htaccess` di Folder Sensitif