Reusable Input: Dari Yang Sederhana Dulu (Bagian 1)

Input adalah jantung dari interaksi pengguna dalam aplikasi web. Setiap kali pengguna mengisi formulir, mencari sesuatu, atau berinteraksi dengan antarmuka, input hadir di sana. Membuat input yang reusable dan mudah dipertahankan adalah kunci untuk membangun aplikasi yang scalable dan efisien. Artikel ini, bagian pertama dari seri ini, akan memandu Anda melalui dasar-dasar pembuatan komponen input reusable, dimulai dari yang paling sederhana hingga kompleksitas yang lebih tinggi.

Daftar Isi

1. Mengapa Reusable Input Penting?
2. Dasar-Dasar: Input HTML Sederhana
3. Membuat Komponen Input Sederhana dengan HTML, CSS, dan JavaScript
   1. Struktur HTML Dasar
   2. Styling dengan CSS
   3. Menambahkan Fungsionalitas dengan JavaScript
4. Props: Menyesuaikan Komponen Input Anda
   1. Menerima Props untuk Tipe Input
   2. Menangani Label dan Placeholder
   3. Menangani Validasi Dasar
5. Event Handling: Mengelola Interaksi Pengguna
   1. Menangani Perubahan Nilai Input
   2. Menangani Fokus dan Blur
   3. Menangani Submit Formulir
6. Best Practices untuk Komponen Input Reusable
   1. Separation of Concerns
   2. Single Responsibility Principle
   3. DRY (Don’t Repeat Yourself)
7. Kesimpulan: Fondasi untuk Input yang Lebih Kompleks

1. Mengapa Reusable Input Penting?

Sebelum kita menyelami kode, mari kita pahami mengapa komponen input reusable adalah investasi yang berharga:

• Konsistensi Visual dan Perilaku: Dengan menggunakan komponen input yang sama di seluruh aplikasi Anda, Anda memastikan bahwa tampilan dan perilaku input konsisten. Ini meningkatkan pengalaman pengguna dan mengurangi kebingungan.
• Mengurangi Duplikasi Kode: Alih-alih menulis kode input yang sama berulang kali, Anda dapat menggunakan kembali komponen yang sudah ada. Ini mengurangi duplikasi kode, membuatnya lebih mudah untuk dipertahankan dan diubah.
• Mempermudah Pembaruan dan Pemeliharaan: Ketika Anda perlu memperbarui tampilan atau perilaku input, Anda hanya perlu mengubah satu komponen, bukan setiap instance input di seluruh aplikasi Anda. Ini menghemat waktu dan mengurangi risiko kesalahan.
• Meningkatkan Produktivitas: Dengan komponen input yang siap pakai, Anda dapat membangun formulir dan antarmuka pengguna lebih cepat. Ini memungkinkan Anda untuk fokus pada fitur-fitur yang lebih penting dari aplikasi Anda.
• Memfasilitasi Pengujian: Lebih mudah untuk menguji komponen input yang reusable karena Anda hanya perlu menguji satu komponen, bukan setiap instance input.

2. Dasar-Dasar: Input HTML Sederhana

Mari kita mulai dengan dasar-dasar. Input HTML standar adalah blok bangunan dasar untuk semua jenis input. Berikut adalah beberapa contoh:

• Text Input: <input type="text"> – Untuk menerima input teks satu baris.
• Password Input: <input type="password"> – Untuk menerima kata sandi (input disamarkan).
• Email Input: <input type="email"> – Untuk menerima alamat email (dengan validasi dasar).
• Number Input: <input type="number"> – Untuk menerima angka (dengan validasi numerik).
• Checkbox Input: <input type="checkbox"> – Untuk opsi pilihan ganda.
• Radio Button Input: <input type="radio"> – Untuk opsi pilihan tunggal.
• Textarea Input: <textarea></textarea> – Untuk menerima input teks multi-baris.

Meskipun input HTML standar mudah digunakan, mereka memiliki keterbatasan. Mereka tidak mudah disesuaikan, dan mereka seringkali membutuhkan lebih banyak kode untuk menangani validasi dan interaksi pengguna yang kompleks. Di sinilah komponen input reusable masuk.

3. Membuat Komponen Input Sederhana dengan HTML, CSS, dan JavaScript

Mari kita buat komponen input sederhana menggunakan HTML, CSS, dan JavaScript:

3.1. Struktur HTML Dasar

Pertama, kita akan membuat struktur HTML dasar untuk komponen input kita:

<div class="input-container">
  <label for="my-input">Label:</label>
  <input type="text" id="my-input" name="my-input">
</div>

Dalam contoh ini:

• <div class="input-container"> adalah wadah untuk input dan labelnya.
• <label for="my-input">Label:</label> adalah label untuk input. Atribut for menghubungkan label ke input dengan ID yang sesuai.
• <input type="text" id="my-input" name="my-input"> adalah input teks. Atribut id dan name penting untuk formulir dan akses JavaScript.

3.2. Styling dengan CSS

Selanjutnya, kita akan menambahkan beberapa styling CSS untuk membuat input kita terlihat lebih baik:

.input-container {
  margin-bottom: 10px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* Penting untuk memastikan padding dan border tidak mempengaruhi lebar */
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

CSS ini:

• Menambahkan margin di bawah wadah input.
• Menampilkan label sebagai blok dan membuatnya tebal.
• Menata gaya input teks, kata sandi, email, dan angka dengan lebar penuh, padding, border, dan border radius.
• Menambahkan fokus styling untuk memberikan umpan balik visual saat input difokuskan.

3.3. Menambahkan Fungsionalitas dengan JavaScript

Terakhir, kita akan menambahkan beberapa fungsionalitas JavaScript untuk menangani interaksi pengguna:

const inputElement = document.getElementById("my-input");

inputElement.addEventListener("input", function(event) {
  console.log("Nilai input berubah:", event.target.value);
});

inputElement.addEventListener("focus", function() {
  console.log("Input difokuskan");
});

inputElement.addEventListener("blur", function() {
  console.log("Input kehilangan fokus");
});

JavaScript ini:

• Mendapatkan elemen input menggunakan ID-nya.
• Menambahkan event listener untuk input, focus, dan blur events.
• Mencatat nilai input saat berubah, dan mencatat saat input difokuskan dan kehilangan fokus.

Ini adalah komponen input sederhana, tetapi ini adalah dasar yang baik untuk membangun komponen input yang lebih kompleks dan reusable. Kita dapat membungkus HTML, CSS, dan JavaScript ini ke dalam fungsi atau kelas untuk membuat komponen yang benar-benar reusable.

4. Props: Menyesuaikan Komponen Input Anda

Untuk membuat komponen input kita benar-benar reusable, kita perlu membuatnya dapat disesuaikan. Kita dapat melakukan ini dengan menggunakan “props”. Props adalah cara untuk meneruskan data ke komponen kita, memungkinkannya untuk merender secara berbeda tergantung pada data yang diteruskan.

4.1. Menerima Props untuk Tipe Input

Mari kita mulai dengan membuat komponen kita menerima prop untuk tipe input. Ini memungkinkan kita untuk menggunakan komponen yang sama untuk input teks, email, kata sandi, dan angka.

Untuk mensimulasikan perilaku props dalam HTML/CSS/JS sederhana, kita bisa menggunakan atribut data pada elemen HTML:

<div class="input-container" data-input-type="email">
  <label for="my-email">Email:</label>
  <input type="email" id="my-email" name="my-email">
</div>

<div class="input-container" data-input-type="password">
  <label for="my-password">Password:</label>
  <input type="password" id="my-password" name="my-password">
</div>

Dan JavaScript:

const inputContainers = document.querySelectorAll(".input-container");

inputContainers.forEach(container => {
  const inputType = container.dataset.inputType;
  const inputElement = container.querySelector("input");

  if (inputType) {
    inputElement.type = inputType;
  }
});

Dalam contoh ini:

• Kita menambahkan atribut data-input-type ke wadah input, yang menentukan tipe input.
• JavaScript kita mengulangi setiap wadah input, membaca atribut data-input-type, dan mengatur atribut type pada elemen input yang sesuai.

Meskipun pendekatan ini tidak seperti props dalam framework seperti React atau Vue, ini mensimulasikan konsep dan memungkinkan kita untuk menyesuaikan komponen kita berdasarkan data yang kita berikan.

4.2. Menangani Label dan Placeholder

Selanjutnya, mari kita tambahkan dukungan untuk label dan placeholder:

<div class="input-container" data-label="Nama Lengkap" data-placeholder="Masukkan nama lengkap Anda">
  <label for="my-name">Nama Lengkap:</label>
  <input type="text" id="my-name" name="my-name" placeholder="Masukkan nama lengkap Anda">
</div>

Dan JavaScript:

inputContainers.forEach(container => {
  const labelText = container.dataset.label;
  const placeholderText = container.dataset.placeholder;
  const inputElement = container.querySelector("input");
  const labelElement = container.querySelector("label");

  if (labelText) {
    labelElement.textContent = labelText;
  }

  if (placeholderText) {
    inputElement.placeholder = placeholderText;
  }

  // ... (Kode sebelumnya) ...
});

Sekarang kita dapat menyesuaikan label dan placeholder untuk setiap instance komponen input kita.

4.3. Menangani Validasi Dasar

Akhirnya, mari kita tambahkan validasi dasar. Kita dapat menggunakan atribut HTML5 seperti required dan pattern untuk validasi sisi klien:

<div class="input-container" data-required="true" data-pattern="[A-Za-z]+">
  <label for="my-username">Username:</label>
  <input type="text" id="my-username" name="my-username" required pattern="[A-Za-z]+">
</div>

Dan JavaScript (menambahkan validasi visual):

inputContainers.forEach(container => {
  // ... (Kode sebelumnya) ...

  const isRequired = container.dataset.required === "true";
  const pattern = container.dataset.pattern;

  if (isRequired) {
    inputElement.required = true;
  }

  if (pattern) {
    inputElement.pattern = pattern;
  }

  inputElement.addEventListener("invalid", function(event) {
    event.preventDefault(); // Mencegah pesan validasi default browser
    container.classList.add("invalid"); // Tambahkan kelas CSS untuk menandai input sebagai tidak valid
  });

  inputElement.addEventListener("input", function() {
    container.classList.remove("invalid"); // Hapus kelas CSS saat input valid
  });
});

Dan CSS (untuk styling input yang tidak valid):

.input-container.invalid input {
  border-color: red;
}

.input-container.invalid label {
  color: red;
}

Sekarang, jika input diperlukan dan tidak diisi, atau jika tidak sesuai dengan pola, input akan ditandai sebagai tidak valid dengan border merah.

5. Event Handling: Mengelola Interaksi Pengguna

Event handling sangat penting untuk membuat komponen input yang interaktif. Mari kita lihat bagaimana kita dapat menangani berbagai event:

5.1. Menangani Perubahan Nilai Input

Kita sudah melihat cara menangani perubahan nilai input menggunakan event input. Namun, kita dapat membuatnya lebih umum dan reusable dengan meneruskan callback function sebagai prop:

HTML:

<div class="input-container" data-on-change="handleNameChange">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</div>

JavaScript:

function handleNameChange(value) {
  console.log("Nama berubah menjadi:", value);
}

inputContainers.forEach(container => {
  // ... (Kode sebelumnya) ...

  const onChangeFunctionName = container.dataset.onChange;
  const inputElement = container.querySelector("input");

  if (onChangeFunctionName && typeof window[onChangeFunctionName] === "function") {
    inputElement.addEventListener("input", function(event) {
      window[onChangeFunctionName](event.target.value);
    });
  }
});

Sekarang, kita dapat menentukan fungsi callback yang berbeda untuk setiap instance komponen input kita.

5.2. Menangani Fokus dan Blur

Kita juga dapat menangani event fokus dan blur. Ini berguna untuk menambahkan styling kustom atau melakukan validasi saat input difokuskan atau kehilangan fokus:

inputContainers.forEach(container => {
  // ... (Kode sebelumnya) ...

  inputElement.addEventListener("focus", function() {
    container.classList.add("focused");
  });

  inputElement.addEventListener("blur", function() {
    container.classList.remove("focused");
  });
});

Dan CSS:

.input-container.focused input {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

Sekarang, input akan mendapatkan border biru saat difokuskan.

5.3. Menangani Submit Formulir

Biasanya, input digunakan dalam formulir. Untuk menangani submit formulir, kita dapat menambahkan event listener ke elemen formulir:

HTML:

<form id="my-form">
  <div class="input-container" data-label="Email" data-input-type="email" data-required="true">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </div>
  <button type="submit">Submit</button>
</form>

JavaScript:

const form = document.getElementById("my-form");

form.addEventListener("submit", function(event) {
  event.preventDefault(); // Mencegah submit formulir default
  console.log("Formulir disubmit!");

  // Ambil nilai input
  const email = document.getElementById("email").value;
  console.log("Email:", email);

  // Lakukan validasi tambahan di sini (misalnya, validasi sisi server)
  // Kirim data ke server
});

Dalam contoh ini, kita mencegah submit formulir default dan mencatat pesan ke konsol. Kita juga dapat mengambil nilai input dan melakukan validasi tambahan, atau mengirim data ke server.

6. Best Practices untuk Komponen Input Reusable

Berikut adalah beberapa praktik terbaik untuk membangun komponen input reusable:

6.1. Separation of Concerns

Pastikan bahwa komponen input Anda hanya bertanggung jawab untuk satu hal. Ini membuatnya lebih mudah untuk diuji dan dipertahankan. Misalnya, validasi harus dipisahkan dari tampilan dan logika inti input.

6.2. Single Responsibility Principle

Setiap komponen harus memiliki satu tanggung jawab. Jangan mencoba melakukan terlalu banyak dengan satu komponen. Jika komponen Anda terlalu kompleks, pecah menjadi komponen yang lebih kecil dan lebih fokus.

6.3. DRY (Don’t Repeat Yourself)

Hindari duplikasi kode. Jika Anda menemukan diri Anda menulis kode yang sama berulang kali, buat fungsi atau komponen yang reusable.

7. Kesimpulan: Fondasi untuk Input yang Lebih Kompleks

Dalam artikel ini, kita telah membahas dasar-dasar pembuatan komponen input reusable menggunakan HTML, CSS, dan JavaScript. Kita telah belajar cara membuat input sederhana, menyesuaikannya dengan props, dan menangani event. Kita juga telah membahas beberapa praktik terbaik untuk membangun komponen input yang reusable. Ini adalah fondasi yang baik untuk membangun komponen input yang lebih kompleks dan reusable, seperti input tanggal, input file, dan editor teks kaya. Di bagian selanjutnya dari seri ini, kita akan membahas topik-topik lanjutan dan mengeksplorasi cara menggunakan framework JavaScript untuk membuat komponen input yang lebih canggih.