Uma Coding logo
August 7, 2026

Cara Membuat Pencatatan Keuangan Menggunakan HTML dan CSS (Panduan ...

Author

Uma Coding

Author

Cara Membuat Pencatatan Keuangan Menggunakan HTML dan CSS (Panduan Pemula)

Melatih Fondasi Frontend Lewat Proyek Riil

Belajar HTML dan CSS akan terasa jauh lebih cepat dan menyenangkan jika langsung diterapkan pada proyek nyata. Salah satu proyek terbaik untuk mengasah kemampuan membuat tata letak (layouting) dan antarmuka pengguna (UI design) adalah membuat Aplikasi Pencatatan Keuangan (Expense Tracker).

Melalui proyek ini, Anda tidak hanya belajar membuat elemen teks biasa, tetapi juga merancang komponen web modern seperti:

  1. Kartu Ringkasan Saldo (Summary Cards)

  2. Formulir Transaksi Interaktif (Input Form)

  3. Tabel Riwayat Transaksi (Transaction History)

Mari kita breakdown 3 langkah taktis merancang antarmuka pencatatan keuangan yang rapi dan responsif!

1. Merancang Struktur Dasar dengan HTML5 (index.html)

Langkah pertama adalah membangun "tulang punggung" halaman menggunakan HTML5 yang semantik. Kita membagi halaman menjadi tiga bagian utama: Header, Summary Cards, Form Input, dan Table History.

  • Elemen Penting HTML:

    • <header>: Menampung judul utama aplikasi.

    • <section class="summary-cards">: Menampilkan elemen ringkasan Total Saldo, Pemasukan, dan Pengeluaran.

    • <form>: Menyediakan input teks untuk keterangan, input angka untuk jumlah, serta <select> untuk kategori transaksi.

    • <table>: Menampilkan daftar riwayat transaksi secara terstruktur.

2. Memoles Tampilan Visual Menggunakan CSS Grid & Flexbox (style.css)

Agar halaman web tidak terlihat kaku, kita menggunakan CSS Grid untuk menyusun kartu saldo dan Flexbox untuk merapikan formulir transaksi.

  • Penerapan CSS Grid pada Kartu Saldo:

    Gunakan grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));. Teknik ini membuat 3 kartu ringkasan otomatis sejajar di layar laptop dan otomatis menumpuk rapi di layar ponsel (responsive).

  • Pemberian Warna Indikator Visual:

    Membedakan warna border/teks untuk Pemasukan (Hijau #2ecc71) dan Pengeluaran (Merah #e74c3c) agar pengguna dapat membaca status keuangan secara intuitif.

3. Menyusun Kode Lengkap HTML & CSS

Kode HTML (index.html)

HTML
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pencatatan Keuangan Pribadi</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <header class="app-header">
      <h1>Pencatatan Keuangan</h1>
      <p>Kelola pemasukan dan pengeluaran harianmu</p>
    </header>
    <!-- Ringkasan Saldo -->
    <section class="summary-cards">
      <div class="card total">
        <h3>Total Saldo</h3>
        <p class="amount">Rp 4.500.000</p>
      </div>
      <div class="card income">
        <h3>Pemasukan</h3>
        <p class="amount">+ Rp 6.000.000</p>
      </div>
      <div class="card expense">
        <h3>Pengeluaran</h3>
        <p class="amount">- Rp 1.500.000</p>
      </div>
    </section>
    <!-- Form Transaksi -->
    <section class="form-section">
      <h2>Tambah Transaksi Baru</h2>
      <form class="transaction-form">
        <div class="form-group">
          <label>Keterangan</label>
          <input type="text" placeholder="Contoh: Gaji / Makan Siang" required>
        </div>
        <div class="form-group">
          <label>Jumlah (Rp)</label>
          <input type="number" placeholder="100000" required>
        </div>
        <div class="form-group">
          <label>Jenis Transaksi</label>
          <select>
            <option value="income">Pemasukan</option>
            <option value="expense">Pengeluaran</option>
          </select>
        </div>
        <button type="submit" class="btn-submit">Simpan Transaksi</button>
      </form>
    </section>
    <!-- Tabel Riwayat -->
    <section class="history-section">
      <h2>Riwayat Transaksi</h2>
      <div class="table-responsive">
        <table>
          <thead>
            <tr>
              <th>Tanggal</th>
              <th>Keterangan</th>
              <th>Kategori</th>
              <th>Jumlah</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>07 Agu 2026</td>
              <td>Gaji Bulanan</td>
              <td><span class="badge badge-income">Pemasukan</span></td>
              <td class="text-income">+ Rp 6.000.000</td>
            </tr>
            <tr>
              <td>07 Agu 2026</td>
              <td>Belanja Bulanan</td>
              <td><span class="badge badge-expense">Pengeluaran</span></td>
              <td class="text-expense">- Rp 1.500.000</td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>
  </div>
</body>
</html>

Kode CSS (style.css)

CSS
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; }
body { background-color: #f4f7f6; color: #333; padding: 20px; }
.container { max-width: 900px; margin: 0 auto; }
.app-header { text-align: center; margin-bottom: 30px; }
.app-header h1 { color: #2c3e50; }
.summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; }
.card { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border-left: 5px solid #ccc; }
.card.total { border-left-color: #3498db; }
.card.income { border-left-color: #2ecc71; }
.card.expense { border-left-color: #e74c3c; }
.card h3 { font-size: 0.9rem; color: #7f8c8d; margin-bottom: 8px; }
.card .amount { font-size: 1.5rem; font-weight: bold; }
.card.total .amount { color: #2c3e50; }
.card.income .amount { color: #2ecc71; }
.card.expense .amount { color: #e74c3c; }
.form-section, .history-section { background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); margin-bottom: 30px; }
.transaction-form { display: flex; flex-wrap: wrap; gap: 15px; }
.form-group { flex: 1 1 200px; display: flex; flex-direction: column; }
.form-group label { font-size: 0.85rem; margin-bottom: 6px; font-weight: 600; }
.form-group input, .form-group select { padding: 10px; border: 1px solid #ddd; border-radius: 6px; }
.btn-submit { flex: 1 1 100%; background: #2ecc71; color: white; border: none; padding: 12px; font-weight: bold; border-radius: 6px; cursor: pointer; margin-top: 10px; }
.btn-submit:hover { background: #27ae60; }
.table-responsive { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 12px 15px; border-bottom: 1px solid #eee; }
th { background: #f8f9fa; color: #666; }
.badge { padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; }
.badge-income { background: #e8f8f5; color: #2ecc71; }
.badge-expense { background: #fdeaea; color: #e74c3c; }
.text-income { color: #2ecc71; font-weight: bold; }
.text-expense { color: #e74c3c; font-weight: bold; }
Plaintext
┌────────────────────────────────────────────────────────┐
│ 1. STUKTUR (HTML)                                      │
│    Membuat Header, Card Saldo, Form Input, & Tabel     │
└───────────────────┬────────────────────────────────────┘
                    │
                    ▼
┌────────────────────────────────────────────────────────┐
│ 2. TAMPILAN (CSS)                                      │
│    Gunakan CSS Grid untuk Card & Flexbox untuk Form    │
└───────────────────┬────────────────────────────────────┘
                    │
                    ▼
┌────────────────────────────────────────────────────────┐
│ 3. HASIL AKHIR                                         │
│    Dashboard Keuangan Rapi, Responsif, & Siap Pakai    │
└───────────────────┴────────────────────────────────────┘

Tabel Komparasi: HTML/CSS Statis vs Web App Dinamis (dengan JavaScript)

Berikut adalah ringkasan perbedaan antara halaman pencatatan keuangan yang dibuat dengan HTML & CSS saja vs yang sudah dilengkapi JavaScript:

Fitur / KemampuanHTML + CSS Saja (Statis)HTML + CSS + JavaScript (Dinamis)
Fungsi UtamaMembentuk struktur dan tampilan visual (UI/UX).Menambahkan logika interaktif & perhitungan angka.
Penyimpanan DataData hanya angka hardcode dalam kodingan.Data tersimpan otomatis di LocalStorage browser.
Tombol "Simpan"Hanya memuat ulang (refresh) halaman form.Menambahkan baris tabel baru & meng-update saldo.
Kebutuhan BelajarCukup paham tag HTML & properti CSS dasar.Membutuhkan pemahaman DOM Manipulation & Event Listener.

Kesimpulan: Langkah Awal Menjadi Frontend Developer!

Merancang tampilan antarmuka pencatatan keuangan menggunakan HTML dan CSS adalah latihan layouting yang sangat efektif. Anda belajar bagaimana menggabungkan CSS Grid dan Flexbox untuk menghasilkan dashboard web yang bersih, rapi, dan mudah dibaca di berbagai ukuran layar.

Langkah berikutnya setelah menguasai antarmukanya adalah mempelajari JavaScript dasar agar tombol simpan bisa benar-benar menghitung saldo dan menambah data ke tabel secara real-time!

FAQ (Frequently Asked Questions)

Q: Apakah tampilan HTML & CSS ini bisa langsung menyimpan data transaksi?

A: Belum bisa secara permanen. HTML dan CSS hanya bertugas menangani tampilan (User Interface). Agar data yang diinput di form bisa dihitung dan disimpan otomatis, Anda perlu menambahkan bahasa pemrograman JavaScript atau terhubung ke database.

Q: Bagaimana cara membuat tabel riwayat transaksi tidak berantakan di HP?

A: Bungkus tag <table> di dalam sebuah <div> dengan kelas khusus (misal .table-responsive) lalu beri properti CSS overflow-x: auto;. Hal ini memungkinkan tabel bisa digeser ke samping (scroll horizontal) secara halus saat dibuka dari layar ponsel yang sempit.

Q: Font apa yang bagus digunakan untuk dashboard keuangan web?

A: Gunakan font tipe sans-serif yang bersih dan mudah dibaca untuk angka, seperti 'Segoe UI', 'Inter', 'Roboto', atau system-ui. Font sans-serif memberikan kesan modern, rapi, dan profesional pada data numerik.

← Back to Articles