Formulir SvelteKit: Menguasai Peningkatan Progresif

Formulir adalah tulang punggung interaksi pengguna di web. Dari formulir kontak sederhana hingga alur kerja aplikasi yang kompleks, formulir sangat penting untuk mengumpulkan informasi dan memungkinkan tindakan pengguna. SvelteKit, dengan fokusnya pada kinerja dan pengalaman pengembang, menyediakan alat yang ampuh untuk membangun formulir yang kuat dan mudah diakses. Panduan ini membahas cara memanfaatkan peningkatan progresif untuk membuat formulir yang berfungsi untuk semua orang, terlepas dari kemampuan browser atau kondisi jaringan mereka.

Apa itu Peningkatan Progresif?

Peningkatan progresif adalah strategi pengembangan web yang memprioritaskan pembangunan pengalaman dasar yang fungsional dan mudah diakses untuk semua pengguna, kemudian secara progresif menambahkan fitur dan peningkatan lanjutan untuk pengguna dengan browser atau perangkat yang lebih mumpuni. Ini adalah pendekatan yang mengutamakan ketahanan yang memastikan situs web atau aplikasi Anda tetap dapat digunakan bahkan dalam menghadapi keterbatasan teknis.

Dalam konteks formulir, ini berarti:

• Fungsi Dasar: Formulir harus dapat digunakan dengan HTML dan CSS dasar, bahkan tanpa JavaScript.
• Aksesibilitas: Elemen formulir harus diberi label dengan benar dan dapat diakses oleh teknologi bantu.
• Pengalaman yang Ditingkatkan: JavaScript dapat digunakan untuk menambahkan fitur seperti validasi waktu nyata, bidang formulir dinamis, dan elemen antarmuka pengguna yang ditingkatkan.

Mengapa ini penting? Pertimbangkan skenario berikut:

• Pengguna dengan JavaScript yang dinonaktifkan: Beberapa pengguna sengaja menonaktifkan JavaScript karena alasan keamanan atau privasi.
• Pengguna dengan browser lama: Browser lama mungkin tidak mendukung fitur JavaScript terbaru.
• Pengguna dengan koneksi internet yang lambat atau tidak andal: File JavaScript mungkin membutuhkan waktu lama untuk dimuat, atau mungkin tidak dimuat sama sekali.
• Pengguna yang menggunakan teknologi bantu: Pembaca layar mengandalkan HTML semantik untuk memberikan pengalaman yang dapat digunakan.

Dengan menerapkan peningkatan progresif, Anda memastikan bahwa formulir Anda dapat digunakan oleh audiens seluas mungkin.

SvelteKit dan Formulir: Pasangan yang Sempurna

Arsitektur SvelteKit membuatnya sangat cocok untuk membangun formulir yang ditingkatkan secara progresif. Ini memungkinkan Anda untuk menentukan tindakan formulir yang dapat ditangani baik di server maupun di klien, memberi Anda fleksibilitas untuk memberikan pengalaman yang lancar terlepas dari apakah JavaScript diaktifkan atau tidak.

Rendering Sisi Server (SSR)

Kemampuan rendering sisi server SvelteKit sangat penting untuk peningkatan progresif. Ketika pengguna mengirimkan formulir tanpa JavaScript, data formulir dikirim ke server, di mana data tersebut dapat diproses dan divalidasi. Server kemudian dapat merender halaman baru dengan hasil pengiriman formulir, memberikan pengalaman dasar tetapi fungsional.

Hidrasi Sisi Klien

Ketika JavaScript diaktifkan, fitur hidrasi sisi klien SvelteKit mengambil alih. HTML yang dirender server "dihidrasi" dengan JavaScript, memungkinkan Anda untuk menambahkan fitur interaktif dan meningkatkan pengalaman pengguna. Ini termasuk:

• Validasi waktu nyata: Berikan umpan balik instan kepada pengguna saat mereka mengisi formulir.
• Bidang formulir dinamis: Tambahkan atau hapus bidang formulir berdasarkan input pengguna.
• Elemen UI yang ditingkatkan: Gunakan JavaScript untuk meningkatkan tampilan dan fungsionalitas elemen formulir.

Membangun Formulir yang Ditingkatkan Secara Progresif di SvelteKit

Mari kita telusuri contoh membangun formulir kontak sederhana di SvelteKit, yang menunjukkan prinsip-prinsip peningkatan progresif.

1. Formulir HTML Dasar

Pertama, buat formulir HTML dasar di rute SvelteKit (misalnya, `src/routes/contact/+page.svelte`):

            <form method="POST" action="?/submit">
  <label for="name">Nama:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Pesan:</label>
  <textarea id="message" name="message" required></textarea>

  <button type="submit">Kirim Pesan</button>
</form>
            

              
                Copy
              
            
          

Poin-poin penting:

• `method="POST"`: Menentukan bahwa data formulir harus dikirim menggunakan metode POST.
• `action="?/submit"`: Menentukan tindakan yang akan dilakukan saat formulir dikirimkan. Di SvelteKit, `?/submit` adalah konvensi untuk menentukan tindakan formulir dalam rute yang sama.
• Atribut `required`: Memastikan bahwa bidang-bidang tersebut wajib diisi sebelum pengiriman (ditangani oleh browser jika JavaScript dinonaktifkan).
• Label: Setiap input diberi label dengan benar untuk aksesibilitas.

2. Mendefinisikan Tindakan Formulir Sisi Server

Selanjutnya, buat file `+page.server.js` di direktori yang sama untuk menentukan tindakan formulir sisi server:

            import { fail } from '@sveltejs/kit';

/** @type {import('./$types').Actions} */
export const actions = {
  submit: async ({ request }) => {
    const data = await request.formData();
    const name = data.get('name');
    const email = data.get('email');
    const message = data.get('message');

    if (!name) {
      return fail(400, { name: { missing: true } });
    }

    if (!email) {
      return fail(400, { email: { missing: true } });
    }

    if (!message) {
      return fail(400, { message: { missing: true } });
    }

    // Validasi email dasar
    if (!/^\w+[\.-]?\w+)*@(\w+[\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
      return fail(400, { email: { invalid: true } });
    }

    // Simulasikan pengiriman email
    console.log('Nama:', name);
    console.log('Email:', email);
    console.log('Pesan:', message);

    return { success: true };
  }
};

            

              
                Copy
              
            
          

Poin-poin penting:

• Objek `actions`: Objek ini berisi tindakan formulir untuk rute tersebut.
• Tindakan `submit`: Fungsi ini dipanggil saat formulir dikirimkan.
• `request.formData()`: Mengambil data formulir dari permintaan.
• Validasi: Kode ini memvalidasi data formulir di server. Jika ada kesalahan, kode ini mengembalikan respons `fail` dengan pesan kesalahan.
• Fungsi `fail`: Fungsi ini disediakan oleh `@sveltejs/kit` dan digunakan untuk mengembalikan respons kesalahan dengan kode status dan data kesalahan.
• Respons keberhasilan: Jika data formulir valid, kode ini mensimulasikan pengiriman email dan mengembalikan respons `success`.

3. Menampilkan Kesalahan Validasi

Untuk menampilkan kesalahan validasi di komponen Svelte, Anda dapat menggunakan properti `form` yang secara otomatis diteruskan ke komponen saat tindakan formulir mengembalikan respons `fail`. Tambahkan kode berikut ke `src/routes/contact/+page.svelte`:

            <script>
  /** @type {import('./$types').PageData} */
  export let data;
</script>

<form method="POST" action="?/submit">
  <label for="name">Nama:</label>
  <input type="text" id="name" name="name" required>
  {#if data?.form?.name?.missing}
    <p class="error">Nama wajib diisi.</p>
  {/if}

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  {#if data?.form?.email?.missing}
    <p class="error">Email wajib diisi.</p>
  {/if}
  {#if data?.form?.email?.invalid}
    <p class="error">Email tidak valid.</p>
  {/if}

  <label for="message">Pesan:</label>
  <textarea id="message" name="message" required></textarea>
  {#if data?.form?.message?.missing}
    <p class="error">Pesan wajib diisi.</p>
  {/if}

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

  {#if data?.success}
    <p class="success">Pesan berhasil dikirim!</p>
  {/if}
</form>

<style>
  .error {
    color: red;
  }
  .success {
    color: green;
  }
</style>
            

              
                Copy
              
            
          

Poin-poin penting:

• `export let data`: Ini mendeklarasikan properti bernama `data` yang akan menerima data yang diteruskan dari server.
• `data?.form`: Ini mengakses properti `form` dari objek `data` dengan aman. Operator `?` digunakan untuk perantaian opsional untuk mencegah kesalahan jika `data` atau `form` tidak terdefinisi.
• Rendering bersyarat: Blok `{#if}` secara bersyarat merender pesan kesalahan berdasarkan data yang diterima dari server.
• Pesan keberhasilan: Pesan keberhasilan ditampilkan jika properti `success` diatur ke `true`.

Pada titik ini, formulir berfungsi bahkan tanpa JavaScript. Jika Anda menonaktifkan JavaScript di browser Anda dan mengirimkan formulir, Anda akan melihat kesalahan validasi ditampilkan dengan benar.

4. Menambahkan Peningkatan Sisi Klien

Sekarang, mari tambahkan beberapa peningkatan sisi klien untuk meningkatkan pengalaman pengguna. Kita dapat menambahkan validasi waktu nyata dan mencegah formulir dikirimkan jika ada kesalahan. Ini akan membutuhkan beberapa JavaScript di komponen Svelte.

            <script>
  /** @type {import('./$types').PageData} */
  export let data;

  let nameError = null;
  let emailError = null;
  let messageError = null;

  function validateForm() {
    nameError = null;
    emailError = null;
    messageError = null;

    let isValid = true;

    if (!$name) {
      nameError = 'Nama wajib diisi.';
      isValid = false;
    }

    if (!$email) {
      emailError = 'Email wajib diisi.';
      isValid = false;
    } else if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test($email)) {
      emailError = 'Email tidak valid.';
      isValid = false;
    }

    if (!$message) {
      messageError = 'Pesan wajib diisi.';
      isValid = false;
    }

    return isValid;
  }

  /** @type {import('svelte/store').Writable<string>} */
  import { writable } from 'svelte/store';
  const name = writable('');
  const email = writable('');
  const message = writable('');

  async function handleSubmit(event) {
    if (!validateForm()) {
      event.preventDefault(); // Mencegah formulir dari pengiriman
      return;
    }

    // Jika formulir valid, biarkan SvelteKit menangani pengiriman
  }

  $: $name, $email, $message // Memicu rendering ulang saat nama, email, atau pesan berubah

</script>

<form method="POST" action="?/submit" on:submit={handleSubmit}>
  <label for="name">Nama:</label>
  <input type="text" id="name" name="name" bind:value={$name} required>
  {#if nameError || data?.form?.name?.missing}
    <p class="error">{nameError || 'Nama wajib diisi.'}</p>
  {/if}

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" bind:value={$email} required>
  {#if emailError || data?.form?.email?.missing || data?.form?.email?.invalid}
    <p class="error">{emailError || data?.form?.email?.missing ? 'Email wajib diisi.' : 'Email tidak valid.'}</p>
  {/if}

  <label for="message">Pesan:</label>
  <textarea id="message" name="message" bind:value={$message} required></textarea>
  {#if messageError || data?.form?.message?.missing}
    <p class="error">{messageError || 'Pesan wajib diisi.'}</p>
  {/if}

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

  {#if data?.success}
    <p class="success">Pesan berhasil dikirim!</p>
  {/if}
</form>

<style>
  .error {
    color: red;
  }
  .success {
    color: green;
  }
</style>
            

              
                Copy
              
            
          

Poin-poin penting:

• Svelte Stores: Menggunakan writable stores (`name`, `email`, `message`) untuk mengelola nilai input formulir.
• `bind:value`: Arahan ini mengikat nilai bidang input ke toko Svelte yang sesuai. Setiap perubahan di bidang input secara otomatis memperbarui nilai toko, dan sebaliknya.
• `on:submit={handleSubmit}`: Penangan peristiwa ini dipanggil saat formulir dikirimkan.
• `validateForm()`: Fungsi ini melakukan validasi sisi klien dan mengatur pesan kesalahan.
• `event.preventDefault()`: Ini mencegah formulir dikirimkan jika ada kesalahan.
• Tampilan pesan kesalahan: Pesan kesalahan ditampilkan berdasarkan validasi sisi klien dan sisi server. Ini memastikan bahwa pengguna melihat kesalahan bahkan jika JavaScript dinonaktifkan atau gagal dimuat.

5. Menangani Kesalahan JavaScript dengan Baik

Bahkan dengan validasi sisi klien, penting untuk menangani potensi kesalahan JavaScript dengan baik. Jika JavaScript gagal dimuat atau dieksekusi dengan benar, Anda masih ingin formulir dapat digunakan. Formulir sudah berfungsi tanpa JavaScript karena tindakan sisi server. Pertimbangkan untuk menambahkan pencatatan kesalahan ke kode sisi klien Anda untuk memantau kesalahan JavaScript yang mungkin terjadi di produksi. Alat seperti Sentry atau Bugsnag dapat membantu Anda melacak dan menyelesaikan kesalahan JavaScript secara real-time.

Praktik Terbaik untuk Formulir SvelteKit dengan Peningkatan Progresif

• Mulai dengan HTML: Selalu mulai dengan membangun formulir HTML fungsional dengan markup semantik yang tepat dan pertimbangan aksesibilitas.
• Validasi Sisi Server: Selalu validasi data formulir di server, bahkan jika Anda juga memvalidasinya di klien. Ini sangat penting untuk keamanan dan integritas data.
• Peningkatan Sisi Klien: Gunakan JavaScript untuk meningkatkan pengalaman pengguna, tetapi pastikan bahwa formulir tetap dapat digunakan tanpanya.
• Aksesibilitas: Berikan perhatian khusus pada aksesibilitas. Gunakan label yang tepat, atribut ARIA, dan navigasi keyboard untuk memastikan bahwa formulir Anda dapat digunakan oleh semua orang. Alat seperti Axe DevTools dapat membantu mengidentifikasi masalah aksesibilitas.
• Penanganan Kesalahan: Tangani kesalahan JavaScript dengan baik dan berikan pesan kesalahan yang informatif kepada pengguna.
• Kinerja: Optimalkan kode JavaScript Anda untuk memastikan kode tersebut dimuat dan dieksekusi dengan cepat. Gunakan pemisahan kode dan pemuatan malas untuk mengurangi waktu muat awal aplikasi Anda.
• Pengujian: Uji formulir Anda secara menyeluruh dengan dan tanpa JavaScript yang diaktifkan untuk memastikan formulir tersebut berfungsi seperti yang diharapkan dalam semua skenario. Gunakan alat pengujian otomatis untuk menangkap regresi.
• Internasionalisasi (i18n): Jika aplikasi Anda menargetkan audiens global, pertimbangkan untuk melakukan internasionalisasi formulir Anda. Gunakan pustaka seperti `svelte-i18n` untuk menangani terjemahan. Perhatikan format tanggal dan angka yang berbeda di lokal yang berbeda.
• Keamanan: Waspadai kerentanan keamanan web umum, seperti cross-site scripting (XSS) dan cross-site request forgery (CSRF). Bersihkan input pengguna dan gunakan header keamanan yang sesuai untuk melindungi aplikasi Anda.
• Pengalaman Pengguna (UX): Rancang formulir Anda dengan mempertimbangkan pengguna. Buat mereka mudah dipahami dan digunakan. Berikan instruksi yang jelas dan umpan balik yang bermanfaat. Pertimbangkan untuk menggunakan pengungkapan progresif untuk hanya menampilkan informasi yang relevan bagi pengguna pada waktu tertentu.

Teknik Tingkat Lanjut

Menggunakan JavaScript untuk Meningkatkan Pengiriman Formulir

Alih-alih mengandalkan perilaku pengiriman formulir default, Anda dapat menggunakan JavaScript untuk mencegat pengiriman formulir dan mengirim data ke server menggunakan `fetch`. Ini memungkinkan Anda untuk memberikan pengalaman pengguna yang lebih lancar, seperti menampilkan indikator pemuatan saat formulir dikirimkan dan memperbarui halaman tanpa pemuatan ulang halaman penuh.

            async function handleSubmit(event) {
  event.preventDefault(); // Mencegah pengiriman formulir default

  if (!validateForm()) {
    return;
  }

  try {
    const formData = new FormData(event.target);
    const response = await fetch(event.target.action, {
      method: 'POST',
      body: formData,
      headers: {
        'X-Requested-With': 'XMLHttpRequest' // Menunjukkan bahwa ini adalah permintaan AJAX
      }
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const data = await response.json();

    if (data.success) {
      // Tangani keberhasilan
      console.log('Formulir berhasil dikirim!');
    } else {
      // Tangani kesalahan
      console.error('Pengiriman formulir gagal:', data);
    }
  } catch (error) {
    console.error('Ada kesalahan saat mengirimkan formulir:', error);
  }
}

            

              
                Copy
              
            
          

Poin-poin penting:

• `event.preventDefault()`: Mencegah perilaku pengiriman formulir default.
• `FormData`: Membuat objek `FormData` dari data formulir.
• `fetch`: Mengirim data formulir ke server menggunakan `fetch`.
• Header `X-Requested-With`: Header ini digunakan untuk menunjukkan bahwa permintaan tersebut adalah permintaan AJAX.
• Penanganan kesalahan: Kode ini menangani potensi kesalahan selama proses pengiriman formulir.

Bidang Formulir Dinamis

Anda dapat menggunakan JavaScript untuk menambahkan atau menghapus bidang formulir secara dinamis berdasarkan input pengguna. Ini dapat berguna untuk membuat formulir yang beradaptasi dengan kebutuhan pengguna.

Contoh: Menambahkan sejumlah alamat email yang dinamis:

            <script>
  import { writable } from 'svelte/store';

  const emailAddresses = writable(['']);

  function addEmailAddress() {
    emailAddresses.update(emails => [...emails, '']);
  }

  function removeEmailAddress(index) {
    emailAddresses.update(emails => emails.filter((_, i) => i !== index));
  }
</script>

<div>
  {#each $emailAddresses as email, index}
    <div>
      <label for="email-{index}">Email {index + 1}:</label>
      <input type="email" id="email-{index}" bind:value={$emailAddresses[index]}>
      <button type="button" on:click={() => removeEmailAddress(index)}>Hapus</button>
    </div>
  {/each}

  <button type="button" on:click={addEmailAddress}>Tambahkan Alamat Email</button>
</div>
            

              
                Copy
              
            
          

Poin-poin penting:

• Toko `emailAddresses`: Toko ini menyimpan array alamat email.
• `addEmailAddress()`: Fungsi ini menambahkan alamat email baru ke array.
• `removeEmailAddress()`: Fungsi ini menghapus alamat email dari array.
• Blok `{#each}`: Blok ini melakukan iterasi di atas alamat email dan merender bidang input untuk masing-masing alamat.
• `bind:value`: Arahan ini mengikat nilai bidang input ke alamat email yang sesuai di array. *Catatan: Mengikat langsung ke elemen array dalam toko memerlukan kehati-hatian. Pertimbangkan untuk menggunakan solusi manajemen status yang lebih kuat untuk formulir dinamis yang kompleks.*

Mengintegrasikan dengan Layanan Pihak Ketiga

Anda dapat mengintegrasikan formulir SvelteKit Anda dengan layanan pihak ketiga, seperti platform pemasaran email, sistem CRM, atau gateway pembayaran. Ini dapat dilakukan menggunakan tindakan formulir sisi server.

Contoh: Mengirim data formulir ke platform pemasaran email:

            // +page.server.js
import { fail } from '@sveltejs/kit';

/** @type {import('./$types').Actions} */
export const actions = {
  submit: async ({ request }) => {
    const data = await request.formData();
    const name = data.get('name');
    const email = data.get('email');

    // Validasi data formulir

    try {
      // Kirim data ke platform pemasaran email
      const response = await fetch('https://api.example.com/subscribe', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer YOUR_API_KEY'
        },
        body: JSON.stringify({
          name,
          email
        })
      });

      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }

      // Tangani keberhasilan
      return { success: true };
    } catch (error) {
      // Tangani kesalahan
      console.error('Kesalahan berlangganan ke daftar email:', error);
      return fail(500, { message: 'Gagal berlangganan. Silakan coba lagi nanti.' });
    }
  }
};

            

              
                Copy
              
            
          

Poin-poin penting:

• `fetch`: Mengirim data formulir ke platform pemasaran email menggunakan `fetch`.
• Kunci API: Kode menyertakan kunci API untuk mengautentikasi dengan platform pemasaran email. *Penting: Jangan pernah mengekspos kunci API Anda secara langsung dalam kode sisi klien. Gunakan variabel lingkungan atau sistem manajemen rahasia yang aman.*
• Penanganan kesalahan: Kode menangani potensi kesalahan selama permintaan API.

Kesimpulan

Membangun formulir yang mudah diakses dan kuat sangat penting untuk menciptakan pengalaman pengguna yang positif. SvelteKit, dengan fokusnya pada kinerja dan pengalaman pengembang, menyediakan alat yang Anda butuhkan untuk membangun formulir yang berfungsi untuk semua orang, terlepas dari kemampuan browser atau kondisi jaringan mereka. Dengan menerapkan peningkatan progresif, Anda dapat memastikan bahwa formulir Anda dapat digunakan oleh audiens seluas mungkin dan bahwa aplikasi Anda tetap tangguh dalam menghadapi tantangan teknis. Panduan ini telah memberikan ikhtisar komprehensif tentang cara membangun formulir yang ditingkatkan secara progresif di SvelteKit, yang mencakup segala hal mulai dari formulir HTML dasar hingga teknik tingkat lanjut seperti bidang formulir dinamis dan integrasi pihak ketiga. Dengan mengikuti praktik terbaik ini, Anda dapat membuat formulir yang tidak hanya fungsional dan mudah diakses tetapi juga memberikan pengalaman pengguna yang lancar dan menyenangkan.

Sumber Daya Lebih Lanjut

• Dokumentasi SvelteKit
• MDN Web Docs: Formulir HTML
• Proyek A11y
• Inisiatif Aksesibilitas Web (WAI)