Demo Interaktif — Panduan Lengkap Clean Code

Perbandingan Kode

✕ BURUK Rentan SQL Injection + MD5

def login(u, p): c = db.cursor() # MD5 tidak aman untuk password! h = hashlib.md5(p.encode()).hexdigest() # SQL Injection — berbahaya! c.execute(f"SELECT * FROM users WHERE username='{u}' AND password='{h}'") r = c.fetchone() if r != None: token = u + h # token mudah ditebak return {'success': True, 'token': token} return False

✓ BERSIH bcrypt + Parameterized Query

def login(username: str, password: str) -> AuthResult: user = repo.find_by_username(username) # parameterized — aman dari SQLi if not user: # dummy hash — cegah timing attack bcrypt.checkpw(b"x", DUMMY_HASH) return AuthResult( success=False, error="Kredensial tidak valid") if not bcrypt.checkpw( password, user.hash): return AuthResult(success=False) token = secrets.token_urlsafe(32) repo.update_session(user.id, token) return AuthResult(success=True, token=token, user_id=user.id)

▶ Jalankan Skenario Login

Pilih skenario serangan atau login normal:

✅ Login Valid ❌ Password Salah 💀 SQL Injection 👻 User Tidak Ada ⚠️ Input Kosong

Username

Password

OUTPUT — Kode Buruk

— pilih skenario & klik jalankan —

OUTPUT — Clean Code

— pilih skenario & klik jalankan —

MD5 Hash (Kode Buruk)

bcrypt Hash (Clean Code)

Rentan SQL Injection Buruk

Aman SQL Injection Clean

Perbandingan Kode

✕ BURUK Magic Numbers, tidak transparan

✓ BERSIH Named constants + return transparan

▶ Kalkulator Diskon Langsung

Harga Satuan (Rp)

Jumlah Item

Status Member

Hari Pembelian

OUTPUT — Kode Buruk (return angka mentah)

Nilai return —

Diskon diterapkan Tidak diketahui

Testable? Sulit

OUTPUT — Clean Code (return objek transparan)

Subtotal —

Harga Akhir —

Total Hemat —

Perbandingan Kode

✕ BURUK Error ditelan, return null

async function getData(id) { try { const res = await fetch( `/api/products/${id}`); const data = await res.json(); return data; } catch(e) { console.log(e); return null; // error hilang! // pemanggil tidak tahu kenapa null // 404? timeout? network error? // semua tampak sama: null } } // Di komponen UI: const product = await getData(42); if (!product) { showError("Terjadi kesalahan"); // pesan generic — tidak helpful }

✓ BERSIH Typed result, error informatif

async function getProduct( id: number): Promise<ApiResult<Product>> { if(!Number.isInteger(id) || id <= 0) return {success:false, error: 'ID harus integer positif'}; try { const res = await fetchWithTimeout(url, 5000); if(res.status === 404) return {success: false, error: `Produk ${id} tidak ada`, statusCode: 404}; if(!res.ok) throw new ApiError( res.status, endpoint); return {success: true, data: await res.json()}; } catch(e) { if(e.name === 'AbortError') return {success: false, error: 'Request timeout 5 detik'}; return {success: false, error: 'Gagal terhubung ke server'}; } }

▶ Simulasi Request API

Pilih kondisi untuk disimulasikan. Lihat bagaimana setiap kode merespons situasi berbeda.

✅ Sukses (200) 🔍 404 Not Found 💥 500 Server Error ⏱️ Request Timeout 📡 Network Error ⚠️ ID Tidak Valid (-1)

Product ID

CONSOLE — Kode Buruk

— pilih skenario & klik jalankan —

CONSOLE — Clean Code

— pilih skenario & klik jalankan —