Pindah ke laptop

Sampai Bab 7, kamu ngoding di “kertas coretan” yang ada di halaman web ini. Praktis, bisa dari HP, tapi ada batasnya: kodenya hidup di sini, bukan di komputermu.

Hari ini kita pindahkan aplikasi uang jajanmu jadi file sungguhan di laptop. Mulai bab ini kamu butuh laptop (Windows atau Mac). Belum punya? Nggak apa-apa, baca saja dulu sebagai gambaran. Bab 11 dan 12 nanti tetap nyaman dibaca dari HP.

Langkah 1: pasang VS Code

Ingat Bab 0: code editorCode editorAplikasi khusus untuk menulis kode — seperti Notepad, tapi pintar (ada warna, nomor baris, dan saran otomatis).Penjelasan lengkap → itu “kertas pintar” yang kodenya berwarna-warni dan punya nomor baris. Yang kita pakai namanya VS Code (Visual Studio Code), gratis dan paling banyak dipakai.

1. Buka situs resminya di code.visualstudio.com. Ketik alamatnya dengan teliti, ya. Situs tiruan yang menyelipkan program nakal itu ada.
2. Klik tombol unduh. Situs biasanya otomatis menawarkan versi yang cocok dengan komputermu.
3. Windows: buka file .exe hasil unduhan, lalu ikuti wizard-nya dengan klik Next sampai selesai. Dokumentasi resminya menyarankan versi “User” (User Installer) untuk kebanyakan orang, karena nggak butuh hak administrator. Kalau di wizard ada pilihan tambahan seperti “Open with Code” di menu klik kanan, boleh dicentang, nanti memudahkan.
4. Mac: buka file .dmg hasil unduhan, lalu seret ikon Visual Studio Code ke folder Applications. Buka dari sana.

Menurut halaman unduhannya, VS Code butuh Windows 10 atau 11 (64-bit), atau macOS 12 atau lebih baru. (Terakhir dicek: Oktober 2026.) Kalau laptopmu lebih tua dari itu, mungkin perlu versi lama atau bantuan orang yang lebih paham, tapi sebagian besar laptop zaman sekarang aman.

Saat pertama dibuka, VS Code menampilkan halaman Welcome dengan tulisan Inggris. Abaikan saja, kita langsung kerja.

Langkah 2: tampilkan ekstensi file

Bab 0 sudah janji, kan? Di Windows dan Mac, ekstensiEkstensiHuruf di belakang titik pada nama file (misalnya .html atau .jpg) yang menunjukkan jenis file itu.Penjelasan lengkap → file sering disembunyikan, sehingga index.html kelihatan cuma index. Kita nyalakan dulu supaya nggak ketuker.

• Windows 11: buka File Explorer (tekan tombol Windows + E), klik menu View di bagian atas, arahkan ke Show, lalu centang File name extensions.
• Mac: di Finder, buka menu Finder di pojok kiri atas, pilih Settings, klik tab Advanced, lalu centang Show all filename extensions. Kalau Mac-mu berbahasa Indonesia, tulisannya mirip.

Sekarang catatan.txt benar-benar kelihatan catatan.txt. (Menu terakhir dicek: Oktober 2026. Kalau tampilannya beda, cari kata “extension” atau “ekstensi”.)

Langkah 3: bikin folder dan file

Satu aplikasi, satu folderFolderMap untuk menyimpan file supaya rapi. Folder bisa berisi file dan folder lain.Penjelasan lengkap →. Buat folder baru bernama uang-jajan di tempat yang gampang kamu ingat, misalnya di Documents atau Dokumen. Pakai huruf kecil dan tanda strip, tanpa spasi. Ini kebiasaan programmer, karena spasi dan huruf besar sering bikin masalah kecil yang menyebalkan di kemudian hari.

Lalu buka folder itu di VS Code: klik menu File, pilih Open Folder, dan pilih folder uang-jajan. Kalau muncul pertanyaan soal apakah kamu percaya dengan isi folder ini, pilih opsi percaya. Folder ini buatanmu sendiri, jadi aman. Itu fitur keamanan VS Code supaya kamu hati-hati membuka folder milik orang lain.

Di panel Explorer (sisi kiri), arahkan mouse ke nama folder uang-jajan. Akan muncul beberapa ikon kecil. Klik ikon kertas dengan tanda plus (New File), ketik index.html, lalu tekan Enter. Pastikan ekstensi .html-nya ikut terketik.

Langkah 4: salin kode aplikasimu

Di Bab 3 sampai 6, kamu menyusun aplikasi uang jajan sepotong-sepotong: kerangka HTML, baju CSS, otak JavaScript, dan penyimpanan data. Di bawah ini versi finalnya, sudah digabung dalam satu file utuh. Persis seperti yang kamu pakai di kotak latihan.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Uang Jajanku</title>
  <style>
    body {
      font-family: sans-serif;
      background: #fff8e7;
      color: #222;
      margin: 0;
      padding: 16px;
    }

    .kartu {
      max-width: 400px;
      margin: 0 auto;
      background: white;
      padding: 20px;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    h1 {
      margin-top: 0;
      color: #e8590c;
    }

    label {
      display: block;
      margin-top: 12px;
      font-weight: bold;
    }

    input {
      width: 100%;
      box-sizing: border-box;
      margin-top: 4px;
      padding: 10px;
      border: 2px solid #ddd;
      border-radius: 8px;
      font-size: 16px;
    }

    button {
      width: 100%;
      margin-top: 16px;
      padding: 12px;
      background: #e8590c;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
    }

    .total {
      margin-top: 20px;
      padding: 12px;
      background: #fff3bf;
      border-radius: 8px;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
    }

    ul {
      padding: 0;
      list-style: none;
    }

    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      padding: 8px 0;
      border-bottom: 1px dashed #ddd;
    }

    .hapus {
      width: auto;
      margin: 0;
      padding: 4px 10px;
      background: #eee;
      color: #c00;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div class="kartu">
    <h1>Uang Jajanku</h1>
    <p>Catat setiap kali kamu jajan.</p>

    <label for="nama">Jajan apa?</label>
    <input id="nama" type="text" placeholder="contoh: Bakso">

    <label for="harga">Harganya berapa?</label>
    <input id="harga" type="number" placeholder="contoh: 15000">

    <button id="tombol-tambah">Tambah</button>

    <ul id="daftar"></ul>

    <p id="total" class="total">Total: Rp 0</p>
  </div>

  <script>
    const inputNama = document.getElementById('nama');
    const inputHarga = document.getElementById('harga');
    const tombol = document.getElementById('tombol-tambah');
    const daftar = document.getElementById('daftar');
    const teksTotal = document.getElementById('total');

    // Ambil daftar lama dari penyimpanan browser. Kalau belum ada, mulai dari daftar kosong.
    let jajanan = JSON.parse(localStorage.getItem('jajanan')) || [];

    function simpan() {
      localStorage.setItem('jajanan', JSON.stringify(jajanan));
    }

    function rupiah(angka) {
      return 'Rp ' + angka.toLocaleString('id-ID');
    }

    function tampilkan() {
      daftar.innerHTML = '';
      let total = 0;
      jajanan.forEach(function (jajan, urutan) {
        const baris = document.createElement('li');
        baris.textContent = jajan.nama + ' — ' + rupiah(jajan.harga);

        const tombolHapus = document.createElement('button');
        tombolHapus.textContent = 'Hapus';
        tombolHapus.className = 'hapus';
        tombolHapus.addEventListener('click', function () {
          jajanan.splice(urutan, 1);
          simpan();
          tampilkan();
        });

        baris.appendChild(tombolHapus);
        daftar.appendChild(baris);
        total = total + jajan.harga;
      });
      teksTotal.textContent = 'Total: ' + rupiah(total);
    }

    tombol.addEventListener('click', function () {
      const nama = inputNama.value.trim();
      const harga = Number(inputHarga.value);
      if (nama === '' || harga <= 0) {
        alert('Isi dulu nama jajan dan harganya, ya!');
        return;
      }
      jajanan.push({ nama: nama, harga: harga });
      simpan();
      tampilkan();
      inputNama.value = '';
      inputHarga.value = '';
    });

    tampilkan();
  </script>
</body>
</html>

Caranya:

1. Klik Salin kode di kotak atas. Kalau tombolnya gagal, buka “Lihat isi kodenya” lalu seleksi dan salin manual.
2. Di VS Code, klik file index.html di panel Explorer supaya terbuka.
3. Tempel isinya dengan Ctrl + V (Windows) atau Cmd + V (Mac).
4. Simpan dengan Ctrl + S (Windows) atau Cmd + S (Mac).

Sekarang lihat layarmu. Kodenya berwarna-warni, ada nomor baris di kiri, dan kalau kamu ketik kurung buka, VS Code menutupnya sendiri. Persis kertas pintar yang dijanjikan Bab 0.

Langkah 5: buka di browser

File index.html itu sekarang siap dibaca browserBrowserAplikasi untuk membuka halaman web, seperti Chrome, Firefox, Safari, atau Edge.Penjelasan lengkap →. Ada dua cara membukanya:

• Klik dua kali file index.html di File Explorer atau Finder. Kalau malah terbuka di aplikasi lain, klik kanan file itu, pilih Open with, lalu pilih browsermu.
• Seret file index.html ke jendela browser yang sedang terbuka.

Perhatikan kolom alamat di atas. Isinya bukan https://..., melainkan sesuatu seperti file:///C:/Users/.../uang-jajan/index.html. Artinya browser membaca langsung dari laptopmu, tanpa lewat internet.

Coba aplikasinya: tambahkan “Bakso” Rp 15.000, lalu tutup tab-nya dan buka lagi. Datanya masih ada, kan? Itu kerja localStoragelocalStoragePenyimpanan kecil milik browser yang menyimpan data di perangkatmu dan tetap ada walau halaman ditutup.Penjelasan lengkap → dari Bab 6.

Sekarang kamu punya siklus kerja yang dipakai programmer di mana-mana: ubah kode di VS Code, simpan, refresh browser, lihat hasilnya. Coba: ganti tulisan Uang Jajanku di dalam <h1> jadi namamu, simpan, lalu tekan F5 di browser (atau Cmd + R di Mac). Judulnya ikut berubah.

Data di web ini beda dengan data di laptopmu

Ada hal yang mungkin bikin kamu bingung. Catatan jajan yang pernah kamu isi di kotak latihan web ini, tidak muncul di aplikasi yang barusan kamu buka di laptop. Lho, kok hilang?

Bukan hilang. Memang beda tempat.

Ini sebenarnya kabar bagus: catatanmu pribadi, nggak bisa diintip alamat lain. Di Bab 9 kamu akan melihat sisi lainnya: saat temanmu membuka aplikasimu dari HP-nya, dia melihat aplikasi yang kosong dan mulai dari nol. Catatanmu tetap di browsermu sendiri.

Bonus: Live Server

VS Code bisa ditambah kemampuannya lewat ekstensi VS CodeEkstensi VS CodeProgram tambahan mini yang dipasang di VS Code untuk menambah kemampuannya.Penjelasan lengkap →, semacam aplikasi tambahan mini. Hati-hati jangan ketuker: ini bukan ekstensi file seperti .html, hanya namanya mirip.

Satu ekstensi yang sering dipakai pemula bernama Live Server. Fungsinya, halaman di browser otomatis ter-refresh setiap kali kamu menyimpan, jadi nggak perlu menekan F5 lagi. Per Oktober 2026, ekstensi buatan Ritwick Dey ini masih tersedia di Visual Studio Marketplace.

Cara pasang: klik ikon kotak-kotak di sisi kiri VS Code (atau tekan Ctrl + Shift + X, di Mac Cmd + Shift + X), cari “Live Server”, lalu klik Install. Setelah terpasang, akan muncul tombol Go Live di pojok kanan bawah VS Code. Klik, dan aplikasimu terbuka di browser lewat alamat seperti http://127.0.0.1:5500/... (angka di belakangnya bisa berbeda).

Satu pesan keamanan: ekstensi itu program yang jalan di laptopmu. Pasang hanya ekstensi yang populer dan dari pembuat yang jelas, dan jangan pasang yang asal muncul di rekomendasi.