2839 kata
14 menit

Mini Project JavaScript: Membuat Halaman Profil Interaktif

2026-10-09ProgrammingJavaScriptWeb Development

Halo, Gabuters!

Akhirnya kita sampai di artikel terakhir dalam seri belajar JavaScript dasar.

Pada artikel sebelumnya, kita sudah belajar DOM dan event JavaScript. Kita mencoba mengubah teks HTML, menangani klik tombol, membaca input pengguna, dan membuat elemen baru menggunakan JavaScript.

Sekarang saatnya menggabungkan semua yang sudah kita pelajari.

Kita akan membuat halaman profil interaktif menggunakan HTML, CSS, dan JavaScript.

Proyek ini merupakan pengembangan dari konsep halaman profil yang sudah kita gunakan pada mini project HTML dan mini project CSS. Bedanya, sekarang halaman tersebut tidak hanya menampilkan informasi, tetapi juga dapat merespons interaksi pengunjung.

Fitur yang akan kita buat:

  1. Tombol untuk mengganti tema terang dan gelap.
  2. Tombol untuk menampilkan pesan sambutan.
  3. Penghitung karakter pada kolom pesan.
  4. Formulir kontak dengan validasi sederhana.
  5. Pesan konfirmasi setelah formulir berhasil divalidasi.

Tenang, kita belum membutuhkan framework, backend, atau database.

Semua fitur akan berjalan langsung di browser menggunakan JavaScript biasa.

1. Hasil Akhir yang Akan Kita Buat#

Bayangkan sebuah halaman profil sederhana.

Di bagian atas terdapat nama website dan tombol untuk mengganti tema.

Di bagian tengah terdapat informasi singkat tentang pemilik halaman, daftar minat, dan tombol salam.

Di bagian bawah terdapat formulir yang memungkinkan pengunjung menulis nama, email, dan pesan.

Ketika pengguna berinteraksi dengan halaman, JavaScript akan memberikan respons.

Contohnya:

  • Ketika tombol tema diklik, tampilan berubah dari terang menjadi gelap.
  • Ketika tombol salam diklik, muncul pesan sambutan.
  • Ketika pengguna mengetik pesan, jumlah karakter diperbarui.
  • Ketika formulir dikirim dengan data yang tidak lengkap, muncul pesan kesalahan.
  • Ketika data valid, muncul konfirmasi bahwa formulir berhasil diperiksa.

Perlu diperhatikan bahwa formulir ini belum benar-benar mengirim pesan ke email atau server.

Kita hanya membuat simulasi interaksi dan validasi di browser.

Pengiriman data sungguhan akan dipelajari ketika masuk ke materi Backend/API.

2. Menyiapkan Struktur Folder#

Buat folder baru bernama profil-interaktif.

Di dalamnya, buat tiga file:

profil-interaktif/
├── index.html
├── style.css
└── script.js

Fungsi masing-masing file:

FileFungsi
index.htmlMenyusun struktur halaman
style.cssMengatur tampilan dan tema
script.jsMenambahkan interaksi

Pemisahan seperti ini membantu kita mengelola kode dengan lebih rapi.

Jika ingin mengubah desain, kita bisa fokus pada CSS.

Jika ingin menambah interaksi, kita bisa fokus pada JavaScript.

3. Membuat Struktur HTML#

Kita mulai dari file index.html.

Masukkan kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Profil Interaktif - BapakGabut</title>


  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <div class="container">
    <header class="header">
      <div>
        <p class="label">Mini Project JavaScript</p>
        <h1>Halo, saya BapakGabut!</h1>
        <p class="tagline">
          Ngoding, main game, dan ngulik apa saja.
        </p>
      </div>


      <button
        id="tombolTema"
        class="tombol tombol-sekunder"
        type="button"
        aria-pressed="false"
      >
        Aktifkan Tema Gelap
      </button>
    </header>


    <main>
      <section class="kartu" aria-labelledby="judulTentang">
        <h2 id="judulTentang">Tentang Saya</h2>


        <p>
          Saya suka belajar teknologi, mencoba hal baru,
          bermain game, dan berbagi pengalaman melalui tulisan.
        </p>


        <h3>Hal yang Saya Suka</h3>


        <ul class="daftar-minat">
          <li>Web Development</li>
          <li>JavaScript</li>
          <li>Gaming</li>
          <li>Eksperimen Teknologi</li>
        </ul>


        <button
          id="tombolSalam"
          class="tombol"
          type="button"
        >
          Sapa Saya
        </button>


        <p id="pesanSalam" class="pesan-info" aria-live="polite"></p>
      </section>


      <section class="kartu" aria-labelledby="judulKontak">
        <h2 id="judulKontak">Kirim Pesan</h2>


        <p>
          Isi formulir berikut untuk mencoba validasi
          menggunakan JavaScript.
        </p>


        <form id="formKontak" novalidate>
          <div class="form-group">
            <label for="nama">Nama</label>


            <input
              id="nama"
              name="nama"
              type="text"
              autocomplete="name"
              placeholder="Masukkan nama"
              required
            >
          </div>


          <div class="form-group">
            <label for="email">Email</label>


            <input
              id="email"
              name="email"
              type="email"
              autocomplete="email"
              placeholder="contoh@email.com"
              required
            >
          </div>


          <div class="form-group">
            <label for="pesan">Pesan</label>


            <textarea
              id="pesan"
              name="pesan"
              rows="5"
              maxlength="200"
              placeholder="Tulis pesan di sini"
              aria-describedby="jumlahKarakter"
              required
            ></textarea>


            <p id="jumlahKarakter" class="teks-bantu">
              0 / 200 karakter
            </p>
          </div>


          <button class="tombol" type="submit">
            Kirim Pesan
          </button>


          <p
            id="hasilForm"
            class="pesan-info"
            role="status"
            aria-live="polite"
          ></p>
        </form>
      </section>
    </main>


    <footer class="footer">
      <p>
        Dibuat dengan HTML, CSS, dan JavaScript.
      </p>
    </footer>
  </div>
</body>
</html>

Mari kita perhatikan beberapa bagian penting.

Menghubungkan CSS dan JavaScript#

Pada bagian <head>, kita menggunakan:

<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>

Baris pertama menghubungkan file CSS.

Baris kedua menghubungkan file JavaScript.

Atribut defer memastikan script klasik dijalankan setelah dokumen HTML selesai diparsing.

Dengan begitu, elemen-elemen HTML yang ingin kita akses sudah tersedia.

Menggunakan id untuk interaksi#

Perhatikan beberapa elemen berikut:

<button id="tombolTema">Aktifkan Tema Gelap</button>
<button id="tombolSalam">Sapa Saya</button>
<form id="formKontak">

Masing-masing mempunyai id.

Nantinya, JavaScript akan menggunakan id tersebut untuk memilih elemen dan menambahkan interaksi.

Menggunakan novalidate pada form#

Pada elemen form, kita menambahkan:

<form id="formKontak" novalidate>

Atribut novalidate menonaktifkan validasi otomatis browser saat pengiriman formulir.

Tujuannya agar dalam latihan ini kita dapat membuat dan menampilkan pesan validasi sendiri menggunakan JavaScript.

Namun, kita tetap menggunakan atribut HTML seperti type="email", required, dan maxlength karena atribut tersebut tetap berguna untuk semantik, pengalaman pengguna, dan pemeriksaan yang kita lakukan melalui JavaScript.

4. Membuat Tampilan dengan CSS#

Sekarang buka file style.css.

Masukkan kode berikut:

:root {
  font-family: Arial, sans-serif;
  line-height: 1.6;


  color: #1f2937;
  background-color: #f3f4f6;
}


* {
  box-sizing: border-box;
}


body {
  margin: 0;
}


button,
input,
textarea {
  font: inherit;
}


.container {
  width: min(100% - 32px, 900px);
  margin: 0 auto;
}


.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 48px 0 32px;
}


.header h1 {
  margin: 0 0 8px;
  line-height: 1.2;
}


.label {
  margin: 0 0 8px;
  color: #2563eb;
  font-weight: bold;
}


.tagline {
  margin: 0;
  color: #4b5563;
}


.kartu {
  margin-bottom: 24px;
  padding: 28px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
}


.kartu h2 {
  margin-top: 0;
}


.daftar-minat {
  padding-left: 20px;
}


.daftar-minat li {
  margin-bottom: 6px;
}


.tombol {
  display: inline-block;
  padding: 10px 16px;
  color: #ffffff;
  background-color: #2563eb;
  border: 1px solid #2563eb;
  border-radius: 8px;
  cursor: pointer;
}


.tombol:hover {
  background-color: #1d4ed8;
}


.tombol-sekunder {
  color: #1f2937;
  background-color: #ffffff;
  border-color: #d1d5db;
}


.tombol-sekunder:hover {
  background-color: #f9fafb;
}


.form-group {
  margin-bottom: 20px;
}


.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
}


.form-group input,
.form-group textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  color: #1f2937;
  background-color: #ffffff;
  border: 1px solid #9ca3af;
  border-radius: 8px;
}


.form-group input:focus,
.form-group textarea:focus,
.tombol:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}


.teks-bantu {
  margin: 6px 0 0;
  color: #4b5563;
  font-size: 14px;
}


.pesan-info {
  min-height: 24px;
  margin-bottom: 0;
}


.pesan-info.sukses {
  color: #166534;
}


.pesan-info.error {
  color: #b91c1c;
}


.footer {
  padding: 12px 0 36px;
  color: #4b5563;
  text-align: center;
}


/* Tema gelap */


body.tema-gelap {
  color: #f9fafb;
  background-color: #111827;
}


.tema-gelap .kartu {
  background-color: #1f2937;
  border-color: #374151;
}


.tema-gelap .tagline,
.tema-gelap .teks-bantu,
.tema-gelap .footer {
  color: #d1d5db;
}


.tema-gelap .label {
  color: #93c5fd;
}


.tema-gelap .tombol-sekunder {
  color: #f9fafb;
  background-color: #374151;
  border-color: #6b7280;
}


.tema-gelap .tombol-sekunder:hover {
  background-color: #4b5563;
}


.tema-gelap .form-group input,
.tema-gelap .form-group textarea {
  color: #f9fafb;
  background-color: #111827;
  border-color: #6b7280;
}


.tema-gelap .pesan-info.sukses {
  color: #86efac;
}


.tema-gelap .pesan-info.error {
  color: #fca5a5;
}


@media (max-width: 600px) {
  .header {
    flex-direction: column;
    padding-top: 32px;
  }


  .kartu {
    padding: 20px;
  }
}

CSS tersebut mengatur beberapa bagian penting.

Pertama, kita menggunakan Flexbox pada bagian header.

.header {
  display: flex;
  justify-content: space-between;
}

Kedua, kita menggunakan media query agar tampilan lebih nyaman pada layar kecil.

@media (max-width: 600px) {
  .header {
    flex-direction: column;
  }
}

Ketiga, kita menyiapkan class untuk tema gelap.

body.tema-gelap {
  color: #f9fafb;
  background-color: #111827;
}

Class tema-gelap belum dipasang pada HTML.

Nantinya, JavaScript akan menambahkan atau menghapus class tersebut ketika tombol tema diklik.

Dengan pendekatan ini, JavaScript mengatur interaksi, sedangkan CSS tetap bertanggung jawab terhadap tampilan.

5. Menghubungkan JavaScript dengan Elemen HTML#

Sekarang kita mulai mengisi script.js.

Langkah pertama adalah memilih elemen-elemen yang akan digunakan.

const tombolTema = document.getElementById("tombolTema");
const tombolSalam = document.getElementById("tombolSalam");
const pesanSalam = document.getElementById("pesanSalam");


const formKontak = document.getElementById("formKontak");
const inputNama = document.getElementById("nama");
const inputEmail = document.getElementById("email");
const inputPesan = document.getElementById("pesan");


const jumlahKarakter = document.getElementById("jumlahKarakter");
const hasilForm = document.getElementById("hasilForm");

Kita menggunakan getElementById() karena setiap elemen sudah memiliki id yang jelas.

Seluruh variabel tersebut akan digunakan pada fitur berikutnya.

Jika ada elemen yang tidak ditemukan, nilainya menjadi null.

Karena itu, pastikan penulisan id di HTML sesuai dengan yang digunakan dalam JavaScript.

6. Fitur Pertama: Mengubah Tema Gelap dan Terang#

Kita mulai dengan fitur tema.

Tujuannya sederhana.

Ketika tombol diklik, class tema-gelap ditambahkan ke elemen body.

Ketika tombol diklik lagi, class tersebut dihapus.

Tambahkan kode berikut di bawah deklarasi elemen:

tombolTema.addEventListener("click", () => {
  document.body.classList.toggle("tema-gelap");


  const temaGelapAktif =
    document.body.classList.contains("tema-gelap");


  if (temaGelapAktif) {
    tombolTema.textContent = "Aktifkan Tema Terang";
  } else {
    tombolTema.textContent = "Aktifkan Tema Gelap";
  }


  tombolTema.setAttribute(
    "aria-pressed",
    String(temaGelapAktif)
  );
});

Sekarang buka halaman dan klik tombol tema.

Tampilan akan berubah menjadi gelap.

Klik sekali lagi, tampilannya kembali terang.

Cara kerja classList.toggle()#

Bagian ini:

document.body.classList.toggle("tema-gelap");

Menambahkan class tema-gelap jika class tersebut belum ada.

Jika sudah ada, class tersebut dihapus.

Memeriksa tema aktif#

Kemudian kita menggunakan:

document.body.classList.contains("tema-gelap");

Method tersebut menghasilkan true jika class tersedia dan false jika tidak.

Nilainya digunakan untuk menentukan teks tombol.

Mengapa menggunakan aria-pressed?#

Atribut aria-pressed membantu menyampaikan status tombol toggle kepada teknologi bantu.

Ketika tema gelap aktif, nilainya menjadi "true".

Ketika tema gelap tidak aktif, nilainya menjadi "false".

Perlu diingat bahwa pada proyek ini pilihan tema belum disimpan.

Jika halaman dimuat ulang, tema akan kembali ke kondisi awal.

Penyimpanan preferensi tema menggunakan localStorage bisa menjadi pengembangan berikutnya.

7. Fitur Kedua: Tombol Salam Interaktif#

Sekarang kita buat tombol salam.

Ketika tombol diklik, kita ingin menampilkan pesan yang ramah kepada pengunjung.

Tambahkan kode berikut:

tombolSalam.addEventListener("click", () => {
  pesanSalam.textContent =
    "Halo, Gabuters! Terima kasih sudah mampir ke halaman ini.";


  pesanSalam.classList.add("sukses");
});

Sekarang klik tombol Sapa Saya.

Pesan akan muncul di bawah tombol.

Kenapa menggunakan textContent?#

Karena kita hanya ingin menampilkan teks.

textContent merupakan pilihan yang tepat untuk memasukkan teks biasa ke halaman.

Kita tidak perlu menggunakan innerHTML.

Kenapa menggunakan classList.add()?#

Class sukses sudah kita siapkan dalam CSS.

.pesan-info.sukses {
  color: #166534;
}

Jadi, JavaScript cukup menambahkan class untuk mengubah tampilannya.

Sekali lagi, kita memisahkan logika interaksi dari pengaturan desain.

8. Fitur Ketiga: Menghitung Jumlah Karakter#

Sekarang kita masuk ke formulir.

Pada kolom pesan, kita sudah menambahkan:

<textarea
  id="pesan"
  maxlength="200"
></textarea>

Atribut maxlength="200" membatasi panjang input sesuai aturan elemen textarea.

Kita juga menyiapkan:

<p id="jumlahKarakter">0 / 200 karakter</p>

Sekarang kita ingin jumlah karakter berubah ketika pengguna mengetik.

Tambahkan kode berikut:

inputPesan.addEventListener("input", () => {
  const panjangPesan = inputPesan.value.length;


  jumlahKarakter.textContent =
    `${panjangPesan} / 200 karakter`;
});

Coba ketik pesan.

Jika pengguna mengetik:

Halo

Penghitung akan menampilkan:

4 / 200 karakter

Jika mengetik lebih banyak karakter, angkanya ikut berubah.

Mengapa menggunakan event input?#

Event input dijalankan ketika nilai elemen berubah akibat interaksi pengguna.

Dengan demikian, kita tidak perlu menunggu pengguna menekan tombol.

Catatan tentang panjang string#

Properti .length pada string JavaScript menghitung jumlah unit kode UTF-16, bukan selalu jumlah karakter yang dilihat manusia.

Untuk teks biasa seperti contoh latihan ini, hasilnya umumnya sesuai dengan perkiraan kita.

Namun, emoji dan beberapa karakter Unicode tertentu dapat dihitung lebih dari satu unit.

Karena itu, penghitung ini cukup untuk mini project dasar, tetapi belum merupakan penghitung karakter visual yang sempurna untuk semua bahasa dan simbol.

9. Fitur Keempat: Validasi Formulir#

Sekarang kita akan menangani pengiriman formulir.

Kita ingin memeriksa tiga hal:

  1. Nama tidak boleh kosong.
  2. Email harus memiliki format yang valid menurut pemeriksaan browser.
  3. Pesan tidak boleh kosong.

Tambahkan kode berikut:

formKontak.addEventListener("submit", (event) => {
  event.preventDefault();


  const nama = inputNama.value.trim();
  const email = inputEmail.value.trim();
  const pesan = inputPesan.value.trim();


  hasilForm.classList.remove("sukses", "error");


  if (nama === "") {
    tampilkanHasilForm("Nama tidak boleh kosong.", false);
    return;
  }


  if (email === "" || !inputEmail.validity.valid) {
    tampilkanHasilForm(
      "Masukkan alamat email yang valid.",
      false
    );
    return;
  }


  if (pesan === "") {
    tampilkanHasilForm("Pesan tidak boleh kosong.", false);
    return;
  }


  tampilkanHasilForm(
    `Terima kasih, ${nama}! Formulir berhasil divalidasi. ` +
    "Pesan belum dikirim ke server.",
    true
  );
});

Perhatikan bahwa kode tersebut memanggil function bernama tampilkanHasilForm().

Function itu belum kita buat.

Kita akan menambahkannya pada langkah berikutnya.

Mengapa menggunakan preventDefault()?#

Secara default, event submit pada formulir dapat memicu tindakan pengiriman dan navigasi.

Dalam latihan ini, kita ingin menangani formulir menggunakan JavaScript tanpa berpindah halaman.

Karena itu, kita menggunakan:

event.preventDefault();

Mengapa menggunakan trim()?#

Method trim() menghapus whitespace di awal dan akhir string.

Dengan demikian, input nama yang hanya berisi spasi tidak dianggap valid.

Mengapa memeriksa validity.valid?#

Karena input email menggunakan:

<input type="email">

Browser menyediakan mekanisme pemeriksaan validitas sesuai tipe input tersebut.

Kita dapat memeriksanya melalui:

inputEmail.validity.valid

Pemeriksaan ini membantu mendeteksi format email yang tidak sesuai dengan aturan browser.

Namun, email yang lolos pemeriksaan format belum tentu benar-benar ada atau dapat menerima pesan.

10. Membuat Function untuk Menampilkan Hasil Validasi#

Agar kode tidak berulang, kita buat function khusus untuk menampilkan pesan.

Tambahkan function berikut:

function tampilkanHasilForm(pesan, berhasil) {
  hasilForm.textContent = pesan;


  if (berhasil) {
    hasilForm.classList.add("sukses");
  } else {
    hasilForm.classList.add("error");
  }
}

Function tersebut menerima dua parameter:

  • pesan: teks yang ingin ditampilkan.
  • berhasil: boolean untuk menentukan status berhasil atau gagal.

Contoh pemanggilan:

tampilkanHasilForm("Nama tidak boleh kosong.", false);

Akan menampilkan pesan dengan class error.

Sedangkan:

tampilkanHasilForm("Formulir berhasil divalidasi.", true);

Akan menampilkan pesan dengan class sukses.

Ini contoh nyata penggunaan function untuk menghindari penulisan kode yang sama berkali-kali.

11. Menyatukan Seluruh Kode JavaScript#

Sekarang kita gabungkan semua fitur ke dalam satu file script.js.

Ganti isi file tersebut dengan kode lengkap berikut:

// Mengambil elemen HTML


const tombolTema = document.getElementById("tombolTema");
const tombolSalam = document.getElementById("tombolSalam");
const pesanSalam = document.getElementById("pesanSalam");


const formKontak = document.getElementById("formKontak");
const inputNama = document.getElementById("nama");
const inputEmail = document.getElementById("email");
const inputPesan = document.getElementById("pesan");


const jumlahKarakter = document.getElementById("jumlahKarakter");
const hasilForm = document.getElementById("hasilForm");


// Mengubah tema halaman


tombolTema.addEventListener("click", () => {
  document.body.classList.toggle("tema-gelap");


  const temaGelapAktif =
    document.body.classList.contains("tema-gelap");


  if (temaGelapAktif) {
    tombolTema.textContent = "Aktifkan Tema Terang";
  } else {
    tombolTema.textContent = "Aktifkan Tema Gelap";
  }


  tombolTema.setAttribute(
    "aria-pressed",
    String(temaGelapAktif)
  );
});


// Menampilkan pesan salam


tombolSalam.addEventListener("click", () => {
  pesanSalam.textContent =
    "Halo, Gabuters! Terima kasih sudah mampir ke halaman ini.";


  pesanSalam.classList.add("sukses");
});


// Menghitung jumlah karakter


inputPesan.addEventListener("input", () => {
  const panjangPesan = inputPesan.value.length;


  jumlahKarakter.textContent =
    `${panjangPesan} / 200 karakter`;
});


// Function untuk menampilkan hasil formulir


function tampilkanHasilForm(pesan, berhasil) {
  hasilForm.textContent = pesan;


  hasilForm.classList.remove("sukses", "error");


  if (berhasil) {
    hasilForm.classList.add("sukses");
  } else {
    hasilForm.classList.add("error");
  }
}


// Validasi formulir


formKontak.addEventListener("submit", (event) => {
  event.preventDefault();


  const nama = inputNama.value.trim();
  const email = inputEmail.value.trim();
  const pesan = inputPesan.value.trim();


  if (nama === "") {
    tampilkanHasilForm("Nama tidak boleh kosong.", false);
    return;
  }


  if (email === "" || !inputEmail.validity.valid) {
    tampilkanHasilForm(
      "Masukkan alamat email yang valid.",
      false
    );
    return;
  }


  if (pesan === "") {
    tampilkanHasilForm("Pesan tidak boleh kosong.", false);
    return;
  }


  tampilkanHasilForm(
    `Terima kasih, ${nama}! Formulir berhasil divalidasi. ` +
    "Pesan belum dikirim ke server.",
    true
  );
});

Sekarang kita mempunyai halaman profil dengan empat fitur interaktif.

Coba buka index.html di browser.

Kemudian uji seluruh fiturnya satu per satu.

12. Menguji Fitur Halaman#

Sebelum menganggap mini project selesai, kita perlu memastikan perilakunya sesuai harapan.

Uji tema#

Klik tombol Aktifkan Tema Gelap.

Pastikan:

  • Latar belakang berubah menjadi gelap.
  • Teks tetap mudah dibaca.
  • Tombol berubah menjadi Aktifkan Tema Terang.
  • Klik berikutnya mengembalikan tema terang.

Uji tombol salam#

Klik tombol Sapa Saya.

Pastikan pesan sambutan muncul.

Uji penghitung karakter#

Ketik beberapa huruf di kolom pesan.

Pastikan angka penghitung berubah.

Hapus seluruh isi pesan dan periksa apakah penghitung kembali menjadi nol.

Uji validasi nama#

Kosongkan kolom nama, lalu isi email dan pesan dengan data yang valid.

Klik tombol kirim.

Pastikan muncul pesan:

Nama tidak boleh kosong.

Uji validasi email#

Isi nama dan pesan, tetapi gunakan email dengan format tidak valid.

Contohnya:

bukan-email

Pastikan muncul pesan:

Masukkan alamat email yang valid.

Uji validasi pesan#

Isi nama dan email dengan benar, tetapi kosongkan pesan.

Pastikan muncul pesan:

Pesan tidak boleh kosong.

Uji formulir valid#

Isi seluruh kolom dengan data yang sesuai.

Klik tombol kirim.

Pastikan muncul konfirmasi:

Terima kasih, Gabuters! Formulir berhasil divalidasi. Pesan belum dikirim ke server.

Gunakan nama Gabuters pada kolom nama untuk mendapatkan contoh pesan tersebut.

Perlu diingat, tidak ada email yang benar-benar dikirim.

Tidak ada pula data yang disimpan ke database.

13. Memahami Alur Program#

Sekarang kita lihat bagaimana ketiga teknologi bekerja sama.

HTML menyiapkan elemen#

Contohnya:

<button id="tombolTema">Aktifkan Tema Gelap</button>

HTML menyediakan tombol yang bisa digunakan pengunjung.

CSS menyiapkan tampilan#

Contohnya:

body.tema-gelap {
  background-color: #111827;
}

CSS menentukan bagaimana halaman terlihat ketika class tertentu tersedia.

JavaScript menangani interaksi#

Contohnya:

tombolTema.addEventListener("click", () => {
  document.body.classList.toggle("tema-gelap");
});

JavaScript mendeteksi klik dan mengubah class.

Jadi, alurnya adalah:

Pengunjung menekan tombol
          |
          v
Browser menghasilkan event click
          |
          v
JavaScript menjalankan callback
          |
          v
Class pada body berubah
          |
          v
CSS menyesuaikan tampilan

Konsep yang sama dapat digunakan untuk membuat menu interaktif, modal, tab, notifikasi, dan berbagai komponen website lainnya.

14. Kesalahan yang Sering Terjadi#

File JavaScript tidak terhubung#

Jika tombol tidak memberikan respons, periksa bagian:

<script src="script.js" defer></script>

Pastikan nama file dan lokasinya benar.

ID HTML tidak sesuai#

Misalnya, HTML menggunakan:

<button id="tombolTema">

Tetapi JavaScript mencari:

document.getElementById("tema");

Hasilnya null.

Ketika kode mencoba menggunakan addEventListener() pada null, akan muncul error.

Lupa menambahkan class CSS#

JavaScript mungkin berhasil menambahkan class tema-gelap.

Tetapi jika CSS untuk class tersebut tidak tersedia, perubahan tampilan tidak akan terlihat.

Salah menggunakan tanda kurung pada event listener#

Perhatikan:

tombolSalam.addEventListener("click", tampilkanSalam());

Penulisan tersebut langsung memanggil function.

Jika ingin memberikan function sebagai callback, gunakan:

tombolSalam.addEventListener("click", tampilkanSalam);

Atau gunakan arrow function.

Menganggap formulir sudah mengirim pesan#

Pada mini project ini, formulir hanya melakukan validasi di browser.

Walaupun muncul pesan berhasil, data belum dikirim ke email, API, atau database.

Untuk membuat fitur kontak sungguhan, kita membutuhkan backend atau layanan pengiriman formulir.

Menganggap validasi frontend sebagai pengaman utama#

Validasi di browser bisa dilewati atau dimodifikasi.

Karena itu, aplikasi nyata tetap harus memvalidasi data di server sebelum menyimpan atau memprosesnya.

15. Ide Pengembangan Mini Project#

Kalau semua fitur sudah berjalan, kita bisa mencoba beberapa pengembangan tambahan.

Menyimpan pilihan tema#

Gunakan localStorage agar pilihan tema tetap tersimpan ketika halaman dimuat ulang.

Pastikan nilai yang disimpan hanya preferensi tampilan, bukan informasi sensitif.

Menambahkan tombol reset#

Buat tombol untuk mengosongkan formulir.

Jangan lupa memperbarui penghitung karakter dan pesan hasil validasi.

Menambahkan penghitung klik#

Buat variabel yang menyimpan jumlah klik tombol salam.

Tampilkan jumlahnya di halaman.

Menambahkan daftar proyek#

Buat array berisi beberapa proyek.

Kemudian gunakan forEach() dan createElement() untuk menampilkan daftar proyek tersebut secara otomatis.

Membuat pesan kesalahan per kolom#

Alih-alih menampilkan satu pesan validasi umum, kita bisa menampilkan pesan di bawah input yang bermasalah.

Ini dapat membantu pengguna mengetahui bagian mana yang perlu diperbaiki.

16. Latihan Mandiri#

Sebagai tantangan akhir seri JavaScript, coba kembangkan mini project ini tanpa langsung melihat contoh kode sebelumnya.

Buat fitur berikut:

  1. Tombol tema gelap dan terang.
  2. Tombol yang menampilkan salam berdasarkan nama pengunjung.
  3. Penghitung karakter untuk textarea.
  4. Validasi nama, email, dan pesan.
  5. Daftar minat yang dibuat secara dinamis dari array.

Untuk tantangan tambahan, buat fitur pencarian sederhana pada daftar minat.

Misalnya, ketika pengguna mengetik "JavaScript", hanya minat yang sesuai yang ditampilkan.

Kita bisa menggunakan:

filter()

Untuk menyaring data, kemudian menggunakan:

createElement()

Untuk menampilkan hasilnya.

Tidak masalah jika hasil akhirnya belum sempurna.

Tujuan mini project adalah melatih kita menggabungkan konsep yang sebelumnya dipelajari secara terpisah.

17. Penutup: Kita Sudah Menyelesaikan Dasar JavaScript!#

Selamat, Gabuters!

Kita sudah sampai di akhir seri belajar JavaScript dasar.

Sepanjang seri ini, kita telah mempelajari:

  1. Pengenalan JavaScript dan cara menjalankannya.
  2. Tipe data dan konversi nilai.
  3. Percabangan menggunakan if, else, dan switch.
  4. Perulangan menggunakan for, while, dan do...while.
  5. Function, parameter, return, dan scope.
  6. Array dan object untuk mengelola data.
  7. DOM dan event untuk membuat halaman interaktif.
  8. Mini project halaman profil yang menggabungkan semuanya.

Dengan bekal tersebut, kita sudah bisa membuat berbagai interaksi sederhana di browser.

Namun, masih ada satu pertanyaan penting.

Bagaimana jika data yang kita tampilkan tidak lagi berasal dari array yang ditulis langsung di JavaScript?

Bagaimana jika data artikel harus diambil dari server?

Atau bagaimana jika formulir kontak harus benar-benar mengirim dan menyimpan pesan?

Untuk menjawabnya, kita perlu mulai mempelajari Backend dan API.

Pada seri berikutnya, kita akan mengenal bagaimana browser berkomunikasi dengan server, memahami HTTP dan API, lalu mencoba membangun backend sederhana menggunakan Node.js.

Perjalanan kita masih panjang, tetapi fondasinya sudah mulai terbentuk.

Sampai jumpa di seri Backend dan API berikutnya, Gabuters!

JavaScript

Selesai

Bagian 8 dari 8Tulisan ini bagian dari seri

Bagikan Artikel

Buat poster berbagi atau salin tautan artikel ini.

Lanjut membaca

Bacaan terkait

Berdasarkan tag dan kategori yang sama

Coba jalur lain

Pilihan konsisten dari artikel lain

Function JavaScript: Membuat Kode Lebih Rapi dan Bisa Digunakan Ulang
Belajar Percabangan JavaScript: if, else, dan switch