Apakah ini kita???
Menempel kode tanpa ikut menempel masalahnya
Muhammad
Rafi Heryadi
Kalau ngga di kantor ya di rumah, terus nganter anak sekolah
“Alhamdulillah sudah okeh mas, ini bukti tf nya yah”
“Proyeknya simpel kok, pasti cepet buatnya”
Ada 6 huruf samar tersembunyi di latar slide. Kumpulkan, susun jadi satu kata. Jawab di akhir sesi.
Saya programmer
copy-paste.
Dari dokumentasi, Stack Overflow, project lama. Sekarang setiap hari saya juga minta AI menuliskan kode.
Bedanya hanya satu kebiasaan sebelum menekan Ctrl+V.
// sebelum Ctrl+V if (! $saya->paham($kode)) { return; }
1 Agustus 2012,
pukul 09.30 pagi.
Knight Capital, salah satu perusahaan trading terbesar di bursa saham Amerika, baru saja memasang software versi baru di server mereka. Bursa dibuka.
Sistem mereka mengirim jutaan order saham yang tidak pernah diminta siapa pun.
Kerugian: lebih dari US$460 juta, di atas Rp7 triliun.
Durasinya kira-kira sama dengan sesi kita pagi ini.
Bukan hacker. Bukan server mati.
// server ke-8, kode 2003 while (! $order->terpenuhi()) { kirimOrderAnak($order); } // terpenuhi() rusak sejak 2005: // jawabannya selalu "belum"
transaksi, 397 juta lembar saham, dalam 45 menit
berisi “Power Peg disabled” masuk sebelum bursa buka. Tidak ada yang membacanya.
Kali ini, yang menulis kode adalah AI.
Manusia lupa membersihkan kode lama. Kerugian ratusan juta dolar dalam 45 menit.
Founder SaaStr membangun aplikasi dengan AI agent di Replit. Saat code freeze, agent itu menghapus database production berisi data lebih dari 1.200 eksekutif, lalu keliru menyatakan data tidak bisa dipulihkan.
Bagaimana web bisa kita akses?
Setiap bug tinggal di salah satu tahap:
HTTPS mengenkripsi percakapan browser dan server, jadi isi form tidak bisa diintip di jalan.
Biasanya per tahun. Lewat pengaturan DNS, domain diarahkan ke alamat IP server Anda.
Tiga bahan sebuah website
Kode
Instruksi yang kita tulis supaya komputer bekerja.
Framework
Kerangka siap pakai, jadi tidak mulai dari nol.
Database
Tempat menyimpan data secara rapi dalam tabel.
Contoh: MySQL, PostgreSQL
Server: rumah untuk website
Komputer yang menyala 24 jam dan terhubung ke internet, supaya website bisa dibuka siapa saja.
Static hosting
Portfolio, landing page, web HTML tanpa database
Shared hosting
Tugas kuliah, company profile, blog, toko kecil
VPS / Cloud
Aplikasi dengan banyak pengguna, butuh kontrol penuh
Managed / PaaS
Fokus ke kode, server diurus penyedia
Macam-macam cara deploy
Deploy = memindahkan kode dari laptop ke server, supaya bisa dibuka pengguna.
Upload manual
Paling mudah untuk belajar.
Rawan ada file terlewat, tidak ada riwayat.
Git di server
Ada riwayat, bisa kembali ke versi sebelumnya.
Masih diketik manual setiap kali.
Otomatis (CI/CD)
Push → dites → deploy sendiri.
Standar di software house.
Platform sekali hubung
Hubungkan repo, setiap push langsung online.
Paling praktis.
CHECKLIST-DEPLOY.md di Clean Code KitHari pertama magang di software house
Proyek Anda: sistem pendaftaran peserta SIGNITE, dibangun dengan Laravel. Developer sebelumnya sudah resign. Di meja Anda ada lima tiket masalah.
Variabel misterius
PenamaanStatus 3 itu apa?
Magic numberController 80 baris
StrukturPeserta jadi admin
KeamananLemot H-1 acara
PerformaVariabel misterius
Klien minta revisi besok pagi. Anda membuka kode warisan developer lama, dan menemukan ini:
$d = Participant::where('s', 1)->get(); foreach ($d as $x) { if ($x->t > 0) { kirim($x); } } // d itu apa? s itu apa? t itu apa?
$confirmed = Participant::query() ->where('status', 'confirmed') ->get(); foreach ($confirmed as $participant) { if ($participant->hasPaid()) { sendTicket($participant); } }
Status 3 itu apa?
Peserta yang sudah bayar tidak dapat sertifikat. Ternyata 3 artinya batal, bukan lunas.
if ($participant->status == 3) { sendCertificate($participant); } // 1 = pending? // 2 = lunas? atau batal? // 3 = ... tanya siapa?
enum RegistrationStatus: string { case Pending = 'pending'; case Paid = 'paid'; case Cancelled = 'cancelled'; } if ($participant->status === RegistrationStatus::Paid) {
PANDUAN-CODING.md · coba kodenya di 3v4l.orgController 80 baris: satu fungsi, lima tugas
Ibarat satu orang jadi kasir, koki, dan kurir sekaligus.
Mau ganti cara kirim email? Harus membongkar fungsi pendaftaran.
Admin mau input peserta juga? Terpaksa copy-paste 80 baris yang sama.
Ubah satu tugas, tugas lain bisa ikut error.
Pisahkan tugasnya, tinggal panggil
StoreParticipantRequestParticipantServiceTicketNotificationpublic function store(StoreParticipantRequest $request) { $participant = $this->service->register( $request->validated() ); return redirect()->route('participants.show', $participant); }
Semua memanggil $service->register() yang sama, tanpa copy-paste.
Peserta jadi admin
Seorang peserta iseng membuka Inspect Element, menambah satu input, lalu menekan Daftar.
<input name="name"> <input name="email"> <input name="is_admin" value="1"> // baris ini ditambah // sendiri oleh peserta
// Model, "biar praktis" protected $guarded = []; // Controller Participant::create( $request->all() );
// Controller Participant::create( $request->validated() ); // Model protected $fillable = [ 'name', 'email', 'phone', ];
$guarded = [] dan $request->all() · cek dengan CHECKLIST-REVIEW.mdLemot H-1 acara
Saat uji coba dengan 10 peserta, semua lancar. H-1 acara, sudah 1.000 peserta, halaman daftar peserta lambat sekali.
query ke database: 1 untuk peserta, 1 lagi untuk setiap peserta
query saja, dengan with()
$participants = Participant::all(); @foreach ($participants as $participant) {{ $participant->session->title }} @endforeach
$participants = Participant::with('session')->get();
Jujur saja, tidak ada yang menilai.
Siapa yang ngga pernah ngoding dibantu ChatGPT, Claude, atau Copilot?
Siapa yang pernah dapat kode dari AI, jalan, tapi tidak paham isinya?
Kalau AI yang menulis, siapa yang menjaga kualitas kodenya?
Masih wajar ngoding tanpa AI?
“Menolak AI hari ini sama seperti menolak Google di tahun 2005.”
“Kalau internet mati, berapa baris kode yang masih bisa Anda tulis?”
Yang tergantikan bukan programmer, tapi programmer yang tidak paham kodenya sendiri, pakai AI atau tidak
“Kalkulator tidak membuat matematika usang. Yang usang adalah orang yang tidak tahu kapan hasilnya salah.”
developer memakai atau berencana memakai AI
justru tidak percaya pada akurasi hasilnya
Idealis soal pemahaman.
Tiga cara memakai AI untuk ngoding
AI chat di browser
Salin error ke chat, salin jawabannya balik ke editor.
protected $guarded = [];
AI tidak melihat project Anda, jadi jawabannya menebak.
Agent di code editor
Agent membaca project, mengedit banyak file, menjalankan perintah.
Terima semua
Puluhan file berubah sekaligus, bahkan perintah yang menghapus data.
Agent di cloud, 24 jam
Tugas dikirim lewat issue, agent bekerja semalaman, lalu menyerahkan pull request.
Pull request datang lebih cepat dari kemampuan Anda mereview.
Supaya copy-paste Anda naik kelas
Cara web bekerja
Dari browser, kode, database, sampai server.
Fundamental backend
Lima tiket masalah nyata di project Laravel.
Menilai kode AI
Uji PASTE sebelum menekan Ctrl+V.
Prompting yang baik
Rumus K-T-A-F, lahir dari pemahaman.
Desain tanpa AI slop
Frontend yang punya identitas.
Sebelum paste, cek PASTE
Lima pertanyaan untuk setiap kode yang mau di-paste, dari AI, Stack Overflow, atau teman.
Bisakah saya menjelaskan setiap barisnya?
Bisa disalahgunakan user iseng?
Setiap tugas sudah di tempatnya?
Orang lain paham tanpa bertanya?
Tetap cepat kalau datanya 1.000?
Sekarang, AI yang
menulis kodenya.
Menjelaskan keinginan dengan bahasa sehari-hari, lalu AI yang menulis kodenya. Istilah ini dipopulerkan Andrej Karpathy pada Februari 2025.
Prompt satu kalimat, kodenya jalan.
“buatkan fitur pendaftaran dan daftar peserta seminar di laravel”
// Model: Participant.php protected $guarded = []; // Controller: index() public function index() { $d = Participant::all(); return view('peserta', compact('d')); } // View: peserta.blade.php @foreach ($d as $x) {{ $x->name }} · {{ $x->session->title }} @endforeach
// Controller: store() public function store(Request $request) { $request->validate(['email' => 'required']); $p = Participant::create($request->all()); $p->status = 1; $p->code = 'SGN-' . rand(1000, 9999); $p->save(); Mail::to($p->email)->send(new TicketMail($p)); Http::post(env('WA_URL'), ['to' => $p->phone]); return back()->with('success', 'Berhasil daftar!'); }
$guarded = [] + all(): bisa jadi admin
store() mengerjakan 5 tugas
status = 1 itu apa?
$d, $x, $p tidak jelas
relasi di loop tanpa with()
Fitur yang sama, setelah lolos PASTE
// Model: Participant.php protected $fillable = ['name', 'email', 'phone']; A protected function casts(): array { return ['status' => RegistrationStatus::class]; T } // Controller: index() $participants = Participant::with('session') E ->paginate(50); // View @foreach ($participants as $participant) T {{ $participant->session->title }} @endforeach
// Controller: store() public function store(StoreParticipantRequest $request) S { $participant = $this->service->register( S $request->validated() A ); return redirect()->route('participants.show', $participant); } // ParticipantService::register() $participant = Participant::create([ ...$data, 'status' => RegistrationStatus::Pending, T ]); $participant->notify(new TicketIssued($participant)); S
K-T-A-F: empat unsur prompt yang baik
Konteks
Pakai teknologi apa? Kondisi project seperti apa?
Tugas
Apa yang ingin dibuat, sejelas mungkin?
Aturan
Standar apa yang wajib diikuti?
Format
Jawabannya ingin berbentuk apa?
Fitur yang sama, prompt yang berbeda
Saya menggunakan Laravel 13, PHP 8.3, dan MySQL. Sudah ada model Participant (name, email, phone, status).
Buatkan fitur pendaftaran peserta seminar.
· Validasi di Form Request: nama wajib, email wajib dan unik, nomor HP format Indonesia
· Logika di Action class RegisterParticipant, controller cukup memanggilnya
· Gunakan $request->validated() dan $fillable, jangan $request->all()
· Status memakai Enum RegistrationStatus (pending, paid, cancelled), ikuti PSR-12
Tampilkan kode per file beserta path-nya, lalu jelaskan singkat alasan strukturnya.
Bisakah orang yang tidak tahu Form Request, Enum, dan mass assignment menulis prompt seperti tadi?
Prompt yang baik lahir dari pemahaman.
Backend sudah rapi.
Tampilannya masih AI slop?
Hasil AI yang dibuat asal jadi: kelihatan rapi, tapi generik, mirip satu sama lain, dan tidak punya identitas.
Landing page SIGNITE, versi prompt satu kalimat
with SIGNITE
Mulai dari konten, bukan dari hiasan
Tanggal, tempat, dan agenda dari rundown, bukan lorem ipsum.
Judul acara paling besar. Yang lain mengalah.
Agenda memang berurutan, jadi ditampilkan sebagai jadwal.
“Daftar seminar”, bukan “Get Started”.
Enam hal yang tetap kita putuskan sendiri
Tulis info aslinya dulu: tanggal, tempat, pembicara. Jangan mulai dari teks contoh.
Pilih satu hal yang harus dilihat duluan, buat paling besar. Sisanya kecil saja.
Satu untuk judul, satu untuk isi. Lebih dari itu, tampilan jadi ramai.
Satu warna utama, satu warna aksen. Pastikan tulisan tetap terbaca.
Yang satu kelompok, taruh berdekatan. Yang beda bagian, beri jarak lebih lebar.
Bagaimana kalau data kosong, loading lama, atau error? AI biasanya cuma membuat tampilan saat semuanya lancar.
Tulis aturannya sekali, AI patuh setiap hari
Simpan satu file aturan di root project. AI coding assistant akan membacanya otomatis sebelum menulis kode.
Semua file ini sudah tersedia di Clean Code Kit.
## Keamanan (wajib) - Selalu $request->validated(). - Setiap Model wajib punya $fillable. - JANGAN jalankan migrate:fresh, db:wipe, DROP tanpa izin. ## Cara menjawab - Kode per file lengkap path-nya. - Jelaskan keputusan desain dalam Bahasa Indonesia.
AGENTS.md, CLAUDE.md, .github/copilot-instructions.md, .cursor/rules/Semua yang Anda bawa pulang
CHEATSHEET.md(1 halaman)PANDUAN-CODING.mdCHECKLIST-REVIEW.mdTEMPLATE-PROMPT.mdDESIGN.mdCHECKLIST-DEPLOY.mdRESOURCES.md(link tools)AGENTS.md·CLAUDE.mdcontoh-kode/+ 5 tes
Salin ke project Laravel Anda sendiri.
- Laravel Debugbar
composer audit- Pint · Larastan
- Laravel Boost
- Lighthouse
- WebAIM Contrast Checker
- GitHub Student Pack
- 3v4l.org · Hoppscotch
- Learn Git Branching
- Panduan Vibe Coding
- satu halaman, buka dari HP
- Master prompt builder
- Cek PASTE interaktif
- Pemindai tanda bahaya
- Checklist deploy
- Rumus K-T-A-F · PASTE
Yang tidak bisa diunduh cuma satu:
kebiasaan cek PASTE.
Sudah ketemu katanya?
Kode apa yang terakhir kali Anda paste tanpa benar-benar Anda PAHAMI?
Copy-paste itu boleh.
Paste tanpa paham, jangan.
AI mempercepat tangan.
Fundamental melatih mata.
AI boleh menulis kodenya.
Nama kita yang tertulis di commit-nya.
Kecepatan tanpa pemahaman
hanya mempercepat kesalahan.
// sebelum Ctrl+V, mulai hari ini if ($kita->paham($kode)) { paste($kode); }
Jadilah programmer yang memimpin AI,
bukan yang digantikan olehnya.