Di panduan kali ini, gue bakal buka rahasia bikin Kalkulator Ahli Gizi Super Komplit (bisa ngitung BMI, Kalori BMR, TDEE, sampai Makro Nutrisi) yang bisa langsung ditanam di web lu.
LIVE DEMO KALKULATOR GIZI
Standar Clinical Nutrition Guidelines
⏳ Estimasi Progress Timeline
🛌 Kualitas Tidur & Pemulihan
💊 Panduan Suplemen (Clinical Grade)
*Konsultasikan dengan dokter sebelum konsumsi suplemen.
📏 Antropometri & Komposisi
🔥 Kebutuhan Energi & Makro
🏋️ Rekomendasi Fitness & Olahraga
📅 Rencana Jadwal Makan (Dynamic)
⚠️ Panduan Klinis & Larangan
🏥 Target Klinis & Mikronutrien
Rahasianya? Kita bakal bikin ini murni pakai kombinasi sakti: HTML, CSS, dan Vanilla JavaScript.
Tanpa perlu database ribet. Tanpa library jQuery yang berat. Murni, bersih, dan dieksekusi secepat kilat langsung di browser pembaca.
Ini adalah versi aplikasi yang udah mateng. Fiturnya mencakup perhitungan BMI (Indeks Massa Tubuh), BMR (Kalori Dasar), TDEE (Total Kalori Harian dengan aktivitas), dan anjuran Makro (Karbo, Protein, Lemak).
STEP 1: Bikin Kerangka "Dashboard Medis" (HTML)
Pertama, kita bikin rangkanya dulu. Di versi God Mode ini, input-nya jauh lebih komplit (ada tujuan diet, lingkar perut, sampai level aktivitas) dan area hasilnya dibagi jadi 3 seksi klinis (Antropometri, Makro, Mikro).
Ketik ini di dalam tag <body> lu:
<!-- ==========================================
KALKULATOR AHLI GIZI V.4 GOD MODE
=========================================== -->
<div class="gizi-wrapper">
<h3>Clinical Assess.</h3>
<span class="gizi-badge">V.4 GOD MODE</span>
<div class="gizi-grid">
<!-- Dropdown Tujuan Diet -->
<div class="gizi-group full">
<label>🎯 Tujuan Utama (Goals)</label>
<select id="gz-goal">
<option value="cut">Fat Loss (Defisit Kalori)</option>
<option value="maintain">Maintain (Jaga Berat)</option>
<option value="bulk">Muscle Gain (Surplus Kalori)</option>
</select>
</div>
<!-- Pilihan Kelamin -->
<div class="gizi-group">
<label>🚻 Kelamin</label>
<select id="gz-gender">
<option value="male">Pria</option>
<option value="female">Wanita</option>
</select>
</div>
<!-- Input Angka Dasar -->
<div class="gizi-group">
<label>🎂 Umur (Thn)</label>
<input type="number" id="gz-age" placeholder="Cth: 25">
</div>
<div class="gizi-group">
<label>⚖️ Berat (Kg)</label>
<input type="number" id="gz-weight" placeholder="Cth: 70">
</div>
<div class="gizi-group">
<label>📏 Tinggi (Cm)</label>
<input type="number" id="gz-height" placeholder="Cth: 170">
</div>
<!-- FITUR BARU: Lingkar Perut buat cek risiko jantung -->
<div class="gizi-group full">
<label>🪢 Lingkar Perut / Pinggang (Cm) - Opsional tapi Penting</label>
<input type="number" id="gz-waist" placeholder="Cth: 85 (Ukur pas di pusar)">
</div>
<!-- Dropdown Aktivitas -->
<div class="gizi-group full">
<label>🏃 Level Aktivitas Harian</label>
<select id="gz-activity">
<option value="1.2">Sangat Santai (Rebahan / Kantoran)</option>
<option value="1.375">Ringan (Olahraga 1-3x/minggu)</option>
<option value="1.55">Sedang (Olahraga 3-5x/minggu)</option>
<option value="1.725">Berat (Olahraga 6-7x/minggu)</option>
</select>
</div>
</div>
<button class="gizi-btn" onclick="kalkulasiGodMode()">Generate Medical Report</button>
<!-- AREA HASIL (Disembunyikan dlu pake CSS) -->
<div id="gz-result" class="gizi-result">
<!-- Bagian 1: Analisis Tubuh -->
<div class="gizi-section">
<h4>🧬 Analisis Komposisi Tubuh</h4>
<div class="gizi-item"><span>Indeks Massa Tubuh (BMI):</span> <span id="res-bmi">-</span></div>
<div class="gizi-item"><span>Berat Badan Ideal Klinis:</span> <span id="res-bbi">-</span></div>
<div class="gizi-item"><span>Estimasi Lemak Tubuh (Body Fat %):</span> <span id="res-bf">-</span></div>
<div class="gizi-item"><span>Risiko Kardiometabolik (WHtR):</span> <span id="res-whtr">-</span></div>
</div>
<!-- Bagian 2: Kebutuhan Makro -->
<div class="gizi-section">
<h4>🥩 Target Makro Nutrisi & Cairan</h4>
<div class="gizi-item"><span>Target Kalori Harian (TDEE):</span> <span id="res-tdee" style="color: #3b82f6; font-size: 18px;">-</span></div>
<div class="gizi-item"><span>🍚 Karbohidrat:</span> <span id="res-carbs">-</span></div>
<div class="gizi-item"><span>🍗 Total Protein:</span> <span id="res-protein">-</span></div>
<div class="gizi-item"><span>🥑 Lemak Sehat:</span> <span id="res-fat">-</span></div>
<div class="gizi-item"><span>💧 Kebutuhan Air (Hidrasi):</span> <span id="res-water">-</span></div>
</div>
<!-- Bagian 3: Kebutuhan Mikro -->
<div class="gizi-section">
<h4>💊 Estimasi Kebutuhan Mikro Nutrisi (AKG)</h4>
<div class="gizi-item"><span>Kalsium (Tulang):</span> <span id="res-calcium">-</span></div>
<div class="gizi-item"><span>Zat Besi (Darah):</span> <span id="res-iron">-</span></div>
<div class="gizi-item"><span>Vitamin C (Imun):</span> <span id="res-vitc">-</span></div>
</div>
</div>
</div>STEP 2: Makeover Jadi UI Premium (CSS)
Biar tampilannya nggak kayak form pendaftaran CPNS tahun 2010, kita masukin CSS lu yang super cakep ini. Taruh kode ini di dalam tag <style> di bagian atas HTML.
Perhatiin ada kelas .alert-red dan .alert-green di bawah, ini nanti dipakai sama JavaScript buat ngasih warna peringatan medis!
<style>
/* CSS Super Clean ala Dashboard Medis */
.gizi-wrapper { max-width: 600px; margin: 20px auto; padding: 25px; background: #ffffff; border: 2px solid #e2e8f0; border-radius: 12px; font-family: 'Segoe UI', sans-serif; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.gizi-wrapper h3 { text-align: center; color: #0f172a; margin-top: 0; font-size: 26px; font-weight: 900; letter-spacing: -0.5px; text-transform: uppercase;}
.gizi-badge { display: block; text-align: center; background: #ef4444; color: white; font-size: 12px; font-weight: bold; padding: 4px 10px; border-radius: 20px; width: max-content; margin: -10px auto 20px auto; }
.gizi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
@media (max-width: 480px) { .gizi-grid { grid-template-columns: 1fr; } }
.gizi-group { margin-bottom: 15px; }
.gizi-group.full { grid-column: 1 / -1; }
.gizi-group label { display: block; margin-bottom: 5px; font-weight: 700; color: #334155; font-size: 13px; text-transform: uppercase; }
.gizi-group input, .gizi-group select { width: 100%; padding: 12px; border: 2px solid #cbd5e0; border-radius: 8px; font-size: 15px; transition: all 0.3s; background: #f8fafc; }
.gizi-group input:focus, .gizi-group select:focus { border-color: #3b82f6; outline: none; background: #fff; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }
.gizi-btn { width: 100%; padding: 15px; background: #0f172a; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 800; text-transform: uppercase; cursor: pointer; transition: 0.3s; margin-top: 10px; }
.gizi-btn:hover { background: #334155; transform: translateY(-2px); }
.gizi-result { margin-top: 25px; display: none; }
.gizi-section { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 15px; margin-bottom: 15px; }
.gizi-section h4 { margin: 0 0 12px 0; color: #1e293b; border-bottom: 2px solid #cbd5e0; padding-bottom: 5px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.gizi-item { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; color: #475569; align-items: center; }
.gizi-item span:last-child { font-weight: 800; color: #0f172a; font-size: 15px; text-align: right; }
/* Pewarnaan Alert Medis */
.alert-red { color: #ef4444 !important; }
.alert-green { color: #10b981 !important; }
.alert-orange { color: #f59e0b !important; }
</style>STEP 3: Suntik Otak Aplikasinya (JavaScript)
Nah, ini dia jantung dari God Mode. Skrip ini nggak cuma ngitung yang simpel-simpel, tapi bawa rumus Deurenberg (Body Fat), WHtR (Jantung), dan pembagian makro nutrisi lengkap. Taruh di bawah HTML, dibungkus tag <script>.
<script>
function kalkulasiGodMode() {
// Ambil semua data dari inputan user
const goal = document.getElementById('gz-goal').value;
const gender = document.getElementById('gz-gender').value;
const age = parseFloat(document.getElementById('gz-age').value);
const weight = parseFloat(document.getElementById('gz-weight').value);
const height = parseFloat(document.getElementById('gz-height').value);
const waist = parseFloat(document.getElementById('gz-waist').value); // Bisa kosong
const activity = parseFloat(document.getElementById('gz-activity').value);
// Validasi kalo datanya bolong
if (!age || !weight || !height) {
alert('Bro, isi Umur, Berat, dan Tinggi minimal dong!');
return;
}
// 1. BMI & BBI (Berat Badan Ideal)
const heightM = height / 100;
const bmi = (weight / (heightM * heightM)).toFixed(1);
let statusBmi = bmi < 18.5 ? "Kurus" : bmi < 24.9 ? "Normal" : bmi < 29.9 ? "Overweight" : "Obesitas";
let bbi = gender === 'male' ? (height - 100) * 0.9 : (height - 100) * 0.85;
// 2. Estimasi Body Fat % (Rumus Deurenberg)
const sexValue = gender === 'male' ? 1 : 0;
const bodyFat = (1.20 * bmi) + (0.23 * age) - (10.8 * sexValue) - 5.4;
let bfStatus = "";
if (gender === 'male') {
bfStatus = bodyFat < 14 ? "Atletis" : bodyFat < 21 ? "Fit" : bodyFat < 25 ? "Biasa" : "Berlebih";
} else {
bfStatus = bodyFat < 21 ? "Atletis" : bodyFat < 28 ? "Fit" : bodyFat < 32 ? "Biasa" : "Berlebih";
}
// 3. WHtR (Waist to Height Ratio) - Deteksi Risiko Jantung
let whtrText = "<span style='font-size:12px; font-weight:normal;'>Isi lingkar perut dulu bro</span>";
if (waist > 0) {
const whtr = (waist / height).toFixed(2);
if (whtr < 0.5) {
whtrText = `<span class="alert-green">${whtr} (Aman / Sehat)</span>`;
} else {
whtrText = `<span class="alert-red">${whtr} (Awas Risiko Sindrom Metabolik!)</span>`;
}
}
// 4. Hitung TDEE Dasar & Modifikasi Goal
let bmr = gender === 'male' ? (10 * weight) + (6.25 * height) - (5 * age) + 5 : (10 * weight) + (6.25 * height) - (5 * age) - 161;
let tdee = bmr * activity;
let finalKalori = goal === 'cut' ? Math.round(tdee - 500) : goal === 'bulk' ? Math.round(tdee + 400) : Math.round(tdee);
// 5. Makro Nutrisi & Air
const carbs = Math.round((finalKalori * 0.45) / 4);
const protein = Math.round((finalKalori * 0.30) / 4);
const fat = Math.round((finalKalori * 0.25) / 9);
const waterLiter = ((weight * 35) / 1000).toFixed(1);
// 6. Mikro Nutrisi (AKG Sederhana)
let calcium = age <= 18 ? "1200 mg" : "1000 mg";
let iron = gender === 'male' ? "9 mg" : (age > 50 ? "8 mg" : "18 mg");
let vitC = gender === 'male' ? "90 mg" : "75 mg";
// --- OUTPUT KE HTML ---
document.getElementById('res-bmi').innerHTML = `${bmi} <span style="color:#64748b; font-size:12px;">(${statusBmi})</span>`;
document.getElementById('res-bbi').innerText = `${Math.round(bbi)} kg`;
document.getElementById('res-bf').innerHTML = `${bodyFat.toFixed(1)}% <span style="color:#64748b; font-size:12px;">(${bfStatus})</span>`;
document.getElementById('res-whtr').innerHTML = whtrText;
document.getElementById('res-tdee').innerText = `${finalKalori} Kkal`;
document.getElementById('res-carbs').innerText = `${carbs} gram`;
document.getElementById('res-protein').innerText = `${protein} gram`;
document.getElementById('res-fat').innerText = `${fat} gram`;
document.getElementById('res-water').innerText = `${waterLiter} Liter / Hari`;
document.getElementById('res-calcium').innerText = calcium;
document.getElementById('res-iron').innerText = iron;
document.getElementById('res-vitc').innerText = vitC;
// Efek memunculkan & Scroll
const resultDiv = document.getElementById('gz-result');
resultDiv.style.display = 'block';
resultDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
</script>BOOM! Selesai bro!
Kalau lu gabungin STEP 1, 2, dan 3 ini jadi satu file utuh persis kayak urutan di atas, ini bakal jalan sempurna 100% tanpa error. Lu bisa langsung colok script ini ke halaman Website lu buat optimasi interaksi user!
📑 Tanya Jawab Seputar Kalkulator Gizi
1. Kenapa gue harus ngisi lingkar perut?
Jawab: BMI (Berat vs Tinggi) itu kadang nipu, Bro. Orang berotot bisa dibilang "Obesitas" padahal itu otot semua. Nah, WHtR (Waist-to-Height Ratio) itu lebih akurat buat deteksi lemak jahat di perut yang bisa memicu risiko penyakit jantung. Jadi, ukur lingkar perut lu di sejajar pusar ya!
2. Rumus apa sih yang dipake di kalkulator ini?
Jawab: Kita pake standar klinis internasional: Mifflin-St Jeor buat ngitung TDEE (Kalori harian), Deurenberg Formula buat estimasi Body Fat %, dan WHtR Standard buat deteksi risiko sindrom metabolik.
3. Hasilnya 100% akurat nggak?
Jawab: Ini adalah estimasi klinis. Buat dapet hasil 100% presisi, lu tetep butuh alat medis pro kayak DEXA Scan atau BIA. Tapi buat panduan diet harian, kalkulator ini udah lebih dari cukup!
4. Kenapa target kalori gue beda sama temen, padahal beratnya sama?
Jawab: Karena ada faktor Level Aktivitas. Orang yang kerja kantoran (rebahan terus) sama orang yang tiap hari angkat beban bakal punya kebutuhan kalori yang beda jauh meskipun berat badannya sama.
5. Apa itu AKG (Kebutuhan Mikro Nutrisi)?
Jawab: Lu nggak cuma butuh Makro (Karbo/Protein/Lemak), tapi juga butuh Mikro (Vitamin & Mineral). Kalkulator ini ngasih tau estimasi Kalsium, Zat Besi, dan Vitamin C biar lu nggak cuma "kurus" tapi juga sehat.
🛠️ FAQ Teknis & Panduan Optimasi (Edisi Pro)
Catatan: FAQ ini dirancang khusus buat lu yang mau pasang alat ini di CMS (Blogger/WordPress) dengan performa maksimal ala Raja Digital ID.
1. Gimana Kalau Pake WordPress?
WordPress kadang suka "rewel" sama kode custom. Biar kodenya nggak dibersihin otomatis sama editor:
- Buka Editor Postingan (Gutenberg).
- Klik ikon (+) dan cari blok bernama "Custom HTML".
- Paste kodenya di situ.
- Klik Preview buat pastiin CSS-nya nggak tabrakan sama theme WordPress yang lu pake.
2. Gimana Cara Pasang di Blogger (Blogspot)?
Blogger itu habitat paling pas buat kode lightweight kayak gini. Biar skor PageSpeed Insights lu tetep 100/100, ikutin cara ini:
- Masuk ke Dashboard Blogger > Pilih Postingan atau Halaman.
- Ubah mode penulisan dari Tampilan Menulis (Compose) ke Tampilan HTML.
- Paste seluruh kode (CSS, HTML, dan JS) tadi di bagian paling bawah artikel atau di posisi yang lu mau.
- Update/Publikasikan.
Tips SEO: Jangan lupa tambahin teks penjelasan (LSI Keywords) di atas kalkulatornya biar Google makin sayang sama artikel lu dan paham kalau ini konten interaktif.
Ini bukan cuma soal gaya-gayaan, tapi soal strategi digital marketing:
- Dwell Time Meningkat: User bakal butuh waktu minimal 1-2 menit buat masukin data dan baca hasil laporan medisnya. Google nangkep ini sebagai sinyal kalau konten lu "berkualitas".
- Shareability: Kalkulator kesehatan itu tipe konten yang gampang banget di-share ke grup WhatsApp atau sosmed. Hasilnya? Backlink gratis, Bro!
- User Experience (UX): Daripada cuma baca teks teori gizi yang ngebosenin, user langsung dapet solusi konkret buat badannya sendiri secara instan.
Biar makin perfect sesuai standar optimasi tinggi:
- Lazy Load Script: Kalau halaman lu udah berat, lu bisa bungkus fungsi JavaScript-nya biar cuma jalan pas user nge-scroll ke area kalkulator.
- WebP Icons: Kalau nanti lu mau nambahin ikon-ikon kecil di samping teks "Protein" atau "Karbo", pastiin pakai format WebP biar loading tetep secepat kilat.
- Custom Color: Sesuaikan kode HEX di bagian CSS (kayak #0f172a) sama warna dominan brand website lu biar UI-nya keliatan menyatu dan profesional.
5. Gimana Logika Kerja Aplikasi Ini di Browser?
Pas halaman di-load, browser bakal baca dengan urutan super efisien:
- CSS dibaca duluan: Biar pas halaman muncul, bentuk kalkulatornya udah rapi (nggak melompat-lompat layoutnya atau Layout Shift).
- HTML nampilin form-nya: Struktur siap nerima input.
- JavaScript Standby: JS cuma nungguin instruksi. Dia nggak bakal makan CPU user sebelum tombol "Generate Medical Report" diklik. Jadi, performa web lu dijamin tetep enteng banget!