Tutorial Svelte Todo List Aplikasi Sederhana

Membuat aplikasi Todo List sederhana adalah salah satu cara terbaik untuk memahami konsep dasar pengembangan web menggunakan Svelte. Dalam artikel ini, kita akan membahas langkah demi langkah dalam Tutorial Svelte Todo List yang akan membantu Anda membangun aplikasi Todo List yang fungsional dan menarik. Svelte adalah framework JavaScript yang memungkinkan pengembang untuk membuat antarmuka pengguna yang cepat dan responsif dengan sintaks yang sederhana. Mari kita mulai!

Baca Juga: Tutorial Svelte dan SQLite3 untuk Aplikasi Fullstack

Pendahuluan Svelte dan Todo List

Svelte adalah framework JavaScript yang berbeda dari framework lainnya seperti React atau Vue. Alih-alih melakukan rendering di browser, Svelte melakukan kompilasi kode pada saat build, menghasilkan kode JavaScript yang efisien. Dengan Svelte, Anda dapat membuat aplikasi yang lebih cepat dan lebih ringan. Dalam tutorial ini, kita akan membuat aplikasi Todo List sederhana yang memungkinkan pengguna untuk menambahkan, menghapus, dan menandai tugas sebagai selesai.

Baca Juga: Panduan Microservice dengan Go untuk Pemula

Persiapan Lingkungan Pengembangan

Sebelum kita mulai, pastikan Anda memiliki Node.js dan npm (Node Package Manager) terinstal di komputer Anda. Anda dapat mengunduhnya dari situs resmi Node.js. Setelah itu, kita akan membuat proyek Svelte baru dengan menggunakan template yang disediakan oleh Svelte.

1. Buka terminal dan jalankan perintah berikut untuk membuat proyek baru:

   npx degit sveltejs/template svelte-todo
   cd svelte-todo
   npm install

2. Setelah instalasi selesai, jalankan aplikasi dengan perintah:

   npm run dev

3. Buka browser dan akses http://localhost:8080 untuk melihat aplikasi Svelte yang baru saja Anda buat.

Baca Juga: Otomatisasi Pengumpulan Data dengan Puppeteer

Membuat Struktur Proyek Svelte

Setelah proyek siap, kita perlu membuat struktur dasar untuk aplikasi Todo List kita. Di dalam folder src, Anda akan menemukan file App.svelte. Kita akan memodifikasi file ini untuk menambahkan fungsionalitas Todo List.

Contoh Kode: Struktur Dasar

Berikut adalah contoh kode untuk memulai aplikasi Todo List:

<script>
  let todos = [];
  let newTodo = '';

function addTodo() {
    if (newTodo.trim()) {
      todos.push({ text: newTodo, completed: false });
      newTodo = '';
    }
  }

function toggleTodo(index) {
    todos[index].completed = !todos[index].completed;
  }

function deleteTodo(index) {
    todos.splice(index, 1);
  }
</script>

<main>
  <h1>Aplikasi Todo List Sederhana</h1>
  <input type="text" bind:value={newTodo} placeholder="Tambah Todo" />
  <button on:click={addTodo}>Tambah</button>

<ul>
    {#each todos as todo, index}
      <li class:completed={todo.completed}>
        <span on:click={() => toggleTodo(index)}>{todo.text}</span>
        <button on:click={() => deleteTodo(index)}>Hapus</button>
      </li>
    {/each}
  </ul>
</main>

<style>
  main {
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
  }
  .completed {
    text-decoration: line-through;
    color: gray;
  }
</style>

Penjelasan kode di atas:

• Kita mendeklarasikan dua variabel: todos untuk menyimpan daftar tugas dan newTodo untuk menyimpan input pengguna.
• Fungsi addTodo menambahkan tugas baru ke dalam array todos jika input tidak kosong.
• Fungsi toggleTodo mengubah status penyelesaian tugas.
• Fungsi deleteTodo menghapus tugas dari daftar.

Baca Juga: Menguasai Menghapus Elemen Array di JavaScript

Menambahkan Fitur Tambah Todo

Setelah kita memiliki struktur dasar, kita perlu memastikan bahwa pengguna dapat menambahkan tugas baru. Kita sudah menambahkan input dan tombol untuk menambah tugas di kode sebelumnya. Mari kita lihat lebih dalam tentang bagaimana fungsi addTodo bekerja.

Penjelasan Fungsi addTodo

Fungsi addTodo memeriksa apakah input newTodo tidak kosong. Jika tidak kosong, tugas baru ditambahkan ke dalam array todos dengan status completed diatur ke false. Setelah menambahkan tugas, kita mengosongkan input dengan mengatur newTodo ke string kosong.

Baca Juga: Panduan Fullstack Nodejs dengan Integrasi Alpinejs

Mengelola Daftar Todo

Setelah menambahkan fitur untuk menambah tugas, kita perlu mengelola daftar tugas. Kita sudah menggunakan #each untuk menampilkan daftar tugas. Mari kita tambahkan beberapa fitur tambahan untuk mengelola tugas.

Menandai Todo sebagai Selesai

Kita dapat menandai tugas sebagai selesai dengan mengklik teks tugas. Kita sudah menambahkan fungsi toggleTodo yang mengubah status penyelesaian tugas. Mari kita lihat bagaimana kita dapat menambahkan gaya untuk tugas yang telah selesai.

Contoh Kode: Gaya untuk Tugas Selesai

Kita sudah menambahkan kelas completed dalam kode sebelumnya. Kelas ini akan memberikan efek garis coret pada teks tugas yang telah selesai. Anda dapat menyesuaikan gaya ini sesuai dengan preferensi Anda.

Baca Juga: Memulai Pemrograman Python Untuk Pemula

Fitur penghapusan tugas juga sudah kita tambahkan dengan fungsi deleteTodo. Ketika pengguna mengklik tombol “Hapus”, tugas akan dihapus dari daftar. Ini adalah bagian penting dari aplikasi Todo List, karena pengguna perlu dapat mengelola tugas mereka dengan mudah.

Baca Juga: Meningkatkan Produktivitas dengan Manajemen Waktu

Untuk membuat aplikasi kita lebih fungsional, kita dapat menyimpan daftar tugas di Local Storage. Dengan cara ini, ketika pengguna memuat ulang halaman, daftar tugas mereka tetap ada.

Contoh Kode: Menyimpan dan Memuat Todo

Kita dapat menggunakan localStorage untuk menyimpan dan memuat daftar tugas. Berikut adalah cara melakukannya:

<script>
  let todos = JSON.parse(localStorage.getItem('todos')) || [];
  let newTodo = '';

function addTodo() {
    if (newTodo.trim()) {
      todos.push({ text: newTodo, completed: false });
      newTodo = '';
      saveTodos();
    }
  }

function toggleTodo(index) {
    todos[index].completed = !todos[index].completed;
    saveTodos();
  }

function deleteTodo(index) {
    todos.splice(index, 1);
    saveTodos();
  }

function saveTodos() {
    localStorage.setItem('todos', JSON.stringify(todos));
  }
</script>

Dengan menambahkan fungsi saveTodos, kita dapat menyimpan daftar tugas ke Local Storage setiap kali ada perubahan. Kita juga memuat daftar tugas dari Local Storage saat aplikasi dimulai.

Gaya adalah bagian penting dari aplikasi. Kita dapat menambahkan CSS untuk membuat aplikasi Todo List kita lebih menarik. Anda dapat menyesuaikan gaya sesuai dengan preferensi Anda.

Contoh Kode: Gaya Dasar

Berikut adalah contoh gaya dasar yang dapat Anda gunakan:

<style>
  main {
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
  }
  input {
    padding: 10px;
    width: 70%;
    margin-right: 10px;
  }
  button {
    padding: 10px;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }
  .completed {
    text-decoration: line-through;
    color: gray;
  }
</style>

Gaya ini memberikan tampilan yang bersih dan sederhana untuk aplikasi Todo List Anda.

Dengan mengikuti langkah-langkah di atas, Anda telah berhasil membuat aplikasi Todo List sederhana menggunakan Svelte. Anda telah belajar cara menambahkan, menghapus, dan menandai tugas sebagai selesai, serta menyimpan data menggunakan Local Storage. Aplikasi Todo Svelte ini adalah langkah awal yang baik untuk memahami pengembangan aplikasi web dengan Svelte. Anda dapat melanjutkan untuk menambahkan fitur tambahan seperti pengeditan tugas, filter tugas, atau bahkan integrasi dengan API untuk menyimpan data secara permanen. Selamat mencoba!