Programming Fundamental 18

Membuat To-Do List Interaktif Menggunakan JavaScript

Tujuan Praktikum : Peserta mampu membuat aplikasi To-Do List yang interaktif menggunakan JavaScript, termasuk manipulasi DOM, event handling, filtering data, pengelolaan state dengan localStorage, dan menampilkan statistik secara dinamis.

Deskripsi Singkat Aktivitas : Peserta akan membuat aplikasi web yang memungkinkan pengguna menambah, menandai selesai, menghapus, dan memfilter tugas sehari-hari. Praktikum ini melatih peserta memahami manipulasi DOM, interaktivitas, penyimpanan data lokal, dan pembuatan antarmuka yang responsif.

Langkah-Langkah Praktikum

1. Setup HTML Struktur
• Buat file index.html dan struktur HTML dasar, termasuk form input, tombol filter, daftar todo, dan area statistik.
2. Styling dengan CSS
• Buat file styles.css untuk menata tampilan form, daftar todo, filter, dan statistik agar menarik dan responsif.
3. Implementasi JavaScript Logic
• Buat file script.js dan hubungkan ke HTML.
• Buat array todos untuk menyimpan data tugas.
• Ambil elemen DOM (form, input, list, tombol filter, statistik).
• Tambahkan event listener untuk menambah todo (addTodo) dan filter todos (filterTodos).
• Buat fungsi renderTodos() untuk menampilkan daftar tugas.
• Buat fungsi toggleTodo() untuk menandai status selesai/belum.
• Buat fungsi deleteTodo() untuk menghapus todo.
• Buat fungsi updateStats() untuk menampilkan jumlah total, aktif, dan selesai.
• Integrasikan localStorage untuk menyimpan dan memuat data tugas.
4. Testing dan Debugging
• Cek semua fitur: tambah, hapus, toggle status, filter, dan statistik.
• Pastikan data tersimpan dan dimuat dari localStorage.
• Periksa tampilan di berbagai ukuran layar.

Tools & Resource yang Dibutuhkan:

• Browser modern (Chrome, Firefox, Edge, Safari)
• Code editor (VS Code, Sublime Text, atau sejenisnya)
• GitHub

Contoh Output atau Hasil Akhir:

Fitur yang harus diimplementasikan:

• Menambah Todo: Form input untuk menambah tugas baru
• Menampilkan Todo: List semua tugas dengan status
• Toggle Status: Mengubah status tugas (selesai/belum)
• Menghapus Todo: Hapus tugas yang tidak diperlukan
• Filter Todos: Filter berdasarkan status (semua, aktif, selesai)
• Statistik: Menampilkan jumlah total, aktif, dan selesai
• Local Storage: Data tersimpan di browser
• Responsive Design: Tampilan yang baik di berbagai ukuran layar

Kriteria Keberhasilan / Penilaian Mandiri:

• HTML structure yang semantik dan valid
• JavaScript logic yang benar dan efisien
• Event handling yang tepat
• Form validation yang memadai
• Local storage integration
• CSS styling yang menarik dan responsive
• Code yang clean dan mudah dipahami
• Aplikasi berfungsi tanpa error

Petunjuk Troubleshooting:

• Pastikan file script.js terhubung dengan index.html.
• Gunakan console.log() untuk men-debug nilai todos dan event listener.
• Periksa localStorage di developer tools untuk memastikan data tersimpan.
• Referensi modul: Modul 5 DOM Manipulation & Interactivity, bagian Event Handling, DOM Manipulation, dan LocalStorage.
• Selalu gunakan event.preventDefault() untuk form submission.
• Validasi input sebelum memproses data.
• Gunakan localStorage untuk data persistence.
• Organize code dalam fungsi-fungsi yang jelas dan handle errors dengan graceful.
• Test di berbagai browser untuk kompatibilitas.
• Use semantic HTML untuk accessibility.
• Optimize performance dengan efficient DOM manipulation.
• Document your code dengan comments.
• Use modern JavaScript features seperti arrow functions.

Durasi Praktik Disarankan:

30-45 menit.

• Materi Github: https://github.com/Modul-FSD/Komdigi-FSD-Beginner-Complete-Curriculum
• Materi Github: https://github.com/Modul-FSD/Komdigi-FSD-Beginner-Final-Project-Starter
• Materi Github: https://github.com/Modul-FSD/Komdigi-FSD-Beginner-Final-Project-Finished

Soal Ujian

1. Atribut href pada tag berfungsi untuk...

a. Menentukan URL tujuan tautan

b. Mengatur ukuran font

c. Menampilkan gambar di halaman

d. Menyimpan teks paragraf

2. Metode yang digunakan untuk menghapus event listener dari elemen HTML adalah...

a. deleteEvent()

b. stopPropagation()

c. removeEventListener()

d. clearEvent()

3. MySQL termasuk dalam kategori...

a. Sistem Operasi

b. Non-relational Data Format

c. Relational Database Management System

d. NoSQL Database

4. Mengapa event listener dengan anonymous function tidak dapat dihapus menggunakan removeEventListener()?

a. Karena anonymous function tidak memiliki parameter

b. Karena JavaScript tidak mendukung penghapusan fungsi anonim

c. Karena tidak ada referensi fungsi yang bisa diakses kembali

d. Karena event listener tidak menyimpan data fungsi

5. Mengapa indentasi penting dalam HTML?

a. Untuk mempercepat eksekusi kode

b. Mengubah warna tampilan halaman

c. Agar browser memproses data lebih cepat

d. Membantu membaca struktur parent–child

6. Mengapa heading penting dalam dokumen HTML?

a. Supaya browser lebih cepat memuat halaman

b. Hanya untuk memperbesar font

c. Agar teks lebih berwarna

d. Untuk membantu SEO dan hierarki konten

7. Apa perbedaan utama antara tag pembuka dan penutup?

a. Tag penutup tidak bisa digunakan ulang

b. Tag pembuka hanya untuk CSS

c. Tag pembuka ditulis dengan huruf besar

d. Tag penutup memiliki tanda garis miring (/)

8. Jika Anda ingin menambah elemen baru di awal array, metode yang digunakan adalah…

a. unshift()

b. shift()

c. push()

d. pop()

9. Dalam aplikasi web modern, mengapa custom event handling dianggap lebih unggul dibandingkan penggunaan alert(), confirm(), atau prompt()?

a. Karena memberikan fleksibilitas dalam desain dan pengalaman pengguna

b. Karena otomatis memvalidasi input pengguna

c. Karena hanya memerlukan satu baris kode

d. Karena lebih cepat dijalankan oleh browser

10. Dalam proyek “MyLibrary+”, Aiman ingin menambahkan fitur login dan pencarian buku. Langkah logis yang harus ia lakukan setelah menguasai frontend dan backend dasar adalah...

a. Menghapus database lama

b. Berhenti di tahap backend

c. Menggunakan spreadsheet untuk menyimpan data

d. Mempelajari Next.js atau framework fullstack

11. Simbol apa yang digunakan untuk selector ID di CSS?

a. #

b. /

c. .

d. :

12. Apa kelebihan menggunakan PostgreSQL dibanding MySQL?

a. Skalabilitas lebih rendah

b. Tidak open-source

c. Tidak mendukung JSON

d. Mendukung fitur advanced dan tipe data non-relasional

13. Seorang peserta ingin memperbaiki tampilan halaman menggunakan browser tanpa mengubah file asli. Fitur apa yang paling tepat digunakan?

a. Add-ons browser

b. Text Editor offline

c. DevTools untuk mengedit HTML sementara

d. HTML Validator

14. Dalam sebuah proyek tim, website di GitHub Pages sering mengalami error 404 setelah beberapa anggota menambahkan file. Sebagai pengembang utama, apa langkah strategis yang paling tepat?

a. Memastikan semua anggota menggunakan struktur folder dan penamaan file yang konsisten

b. Menonaktifkan GitHub Pages sementara

c. Mengubah branch default ke gh-pages

d. Menghapus semua file CSS

15. Seorang mahasiswa membuat sebuah aplikasi untuk menampilkan daftar tugas dan statusnya secara real-time, kombinasi teknologi apa yang paling tepat?

a. PHP, MySQL, dan jQuery

b. Java, PostgreSQL, dan Bootstrap

c. HTML, CSS, Node.js, dan MongoDB

d. Python, Flask, dan SQLite

Ringkasan Materi

Pengantar

Hai Digiers! Coba bayangkan, setiap kali Anda membuka aplikasi belanja, memesan makanan online, atau sekadar login ke media sosial favoritmu ada banyak proses kompleks yang bekerja di balik layar untuk memastikan semuanya berjalan mulus. Mulai dari tampilan antarmuka yang menarik hingga sistem server yang mampu menangani ribuan pengguna sekaligus semua itu adalah hasil kerja seorang Full Stack Developer.

Dalam materi Beginner Full Stack Developer ini, Anda akan diajak memahami bagaimana sebuah aplikasi dibangun dari dua sisi: frontend (bagian yang terlihat oleh pengguna) dan backend (bagian logika dan data yang tersembunyi di balik layar). Anda akan mengenal dasar-dasar HTML, CSS, dan JavaScript untuk membuat tampilan website interaktif, sekaligus belajar bagaimana server, database, dan API bekerja untuk mendukungnya.

Materi ini disusun secara bertahap dan praktis, agar Anda bisa langsung memahaminya tanpa harus punya latar belakang teknis yang rumit. Setiap konsep dikaitkan dengan contoh nyata dari dunia digital yang Anda gunakan setiap hari.

Era digital saat ini menuntut developer yang multiskill mampu memahami keseluruhan proses pembuatan aplikasi, dari rancangan tampilan hingga logika data. Dengan memahami dasar Full Stack Development, Anda tidak hanya belajar membuat aplikasi, tapi juga membangun fondasi karier yang solid di dunia teknologi yang terus berkembang pesat.

Siap menjelajahi dunia pengembangan aplikasi dari ujung ke ujung? Yuk, mulai perjalananmu sebagai calon Full Stack Developer!

Topik 1.1 Introduction - Full stack developers & Dasar Pemrograman

Menjadi Full Stack Developer adalah perjalanan yang menantang namun penuh hasil berharga. Profesi ini menuntut penguasaan tiga aspek utama pengembangan web; frontend, backend, dan database. Semuanya bekerja bersama menciptakan pengalaman digital yang utuh. Dengan pertumbuhan kebutuhan web developer hingga 16% pada 2022–2032 (Bureau of Labor Statistics, AS), bidang ini menawarkan prospek karier yang cerah dan tingkat kepuasan kerja tinggi, mencapai 4,2 dari 5 (Glassdoor, 2024), dengan rata-rata gaji sekitar 112.000 dolar AS per tahun (Indeed, 2024).

Untuk mencapainya, dibutuhkan komitmen latihan konsisten selama 12–18 bulan dan keberanian untuk membangun portofolio nyata, karena 73% manajer perekrutan menilai proyek lebih penting daripada gelar akademis. Ingatlah pepatah Helen Hayes, “Every expert was once a beginner. Don’t be afraid to start.” Sebuah pengingat sederhana bahwa setiap langkah kecil hari ini adalah fondasi menuju keahlian besar di masa depan.

Topik 1.2 HTML Fundamentals

HTML adalah fondasi dari setiap halaman web, bahasa yang membentuk struktur, isi, dan makna dari sebuah situs. Dalam modul ini, Anda akan belajar bagaimana menyusun halaman web dari awal: mulai dari struktur dokumen HTML5, penggunaan elemen teks seperti heading dan paragraf, hingga membuat daftar, tautan, gambar, dan form untuk menerima input dari pengguna.

Anda juga akan mengenal konsep Semantic HTML, cara menggunakan tag yang memiliki makna semantik agar struktur halaman menjadi lebih jelas, mudah dibaca, dan ramah mesin pencari. Melalui mini project “Profil Pribadi”, Anda akan menggabungkan seluruh elemen tersebut untuk membangun halaman yang rapi, terorganisir, dan bermakna.

HTML mungkin terlihat sederhana, tapi justru di sanalah kekuatannya. Setiap tag memiliki peran penting dalam membentuk pengalaman pengguna yang baik dan memudahkan proses pengembangan di tahap berikutnya. Coba renungkan: seberapa besar pengaruh struktur HTML yang baik terhadap kemudahan membaca, navigasi, dan pengembangan web secara keseluruhan?

Topik 1.3 CSS Fundamentals

CSS (Cascading Style Sheets) berfungsi mengatur tampilan visual dari elemen HTML; mulai dari warna, ukuran teks, jarak, hingga tata letak halaman. Jika HTML ibarat kerangka bangunan, maka CSS adalah sentuhan desain yang membuatnya menarik dan hidup. Dalam modul ini, Anda akan belajar cara menggunakan selector, class, dan ID untuk menargetkan elemen tertentu, memahami box model (margin, border, padding, content), serta mengenal sistem layout modern seperti Flexbox dan Grid.

Coba pikirkan: apa yang membuat sebuah halaman web terlihat profesional dan nyaman dibaca? Jawabannya bukan hanya pada kontennya, tapi pada bagaimana setiap elemen tertata dengan seimbang dan konsisten. Melalui latihan di modul ini, Anda akan belajar menata tipografi, warna, dan jarak dengan prinsip desain yang rapi dan responsif, hingga akhirnya Anda mampu menciptakan halaman profil pribadi yang bukan hanya berfungsi, tapi juga enak dipandang di berbagai ukuran layar.

Topik 1.4 JavaScript Fundamentals

JavaScript adalah “otak” dari website modern, bahasa pemrograman yang membuat halaman web menjadi hidup, interaktif, dan responsif. Dalam modul ini, Anda akan belajar dari dasar: memahami bagaimana JavaScript bekerja di browser dan bagaimana ia terhubung dengan HTML untuk memanipulasi tampilan secara dinamis.

Anda akan mengenal cara menggunakan variabel, operator, dan tipe data untuk mengelola informasi, memanfaatkan fungsi bawaan seperti Math, String, dan Array untuk memproses data, hingga memahami event dasar seperti alert, prompt, dan confirm untuk menciptakan interaksi sederhana dengan pengguna. Semua konsep ini kemudian dipraktikkan melalui mini project “Aplikasi Penghitung Umur”, latihan nyata untuk menerapkan logika pemrograman dalam konteks web.

Coba renungkan: bagaimana satu baris kode bisa membuat halaman merespons klik, menghitung angka, atau menampilkan pesan ke pengguna? Di sinilah Anda mulai melihat bahwa logika bukan hanya teori, tapi kekuatan utama di balik setiap website yang Anda gunakan setiap hari.

Topik 1.5 DOM Manipulation & Interactivity

Bayangkan sebuah halaman web yang tidak hanya menampilkan informasi, tetapi juga bisa merespons setiap klik, input, dan aksi pengguna, di situlah DOM Manipulation dan interaktivitas JavaScript berperan. Dalam bagian ini, Anda akan belajar bagaimana JavaScript menghubungkan logika program dengan tampilan visual di browser, membuat setiap elemen di halaman dapat diubah, digerakkan, dan berinteraksi secara dinamis.

Anda sudah mempelajari cara mengakses dan memodifikasi elemen HTML, menambahkan event listeners untuk menangani interaksi seperti klik atau pengisian form, menerapkan form validation agar data sesuai aturan, hingga menggunakan browser developer tools untuk menelusuri dan memperbaiki kesalahan. Tidak hanya itu, Anda juga akan belajar menyimpan data secara lokal menggunakan local storage agar aplikasi dapat mempertahankan informasi pengguna. Semua konsep ini akan Anda terapkan langsung dalam mini project “To-Do List Interaktif”, tempat Anda merangkai seluruh kemampuan DOM dan event handling menjadi aplikasi web yang nyata dan fungsional.

Coba pikirkan: bagaimana satu baris kode bisa membuat daftar tugas muncul, tersimpan, atau hilang dari layar hanya dengan satu klik? Dari sini Anda akan memahami bahwa JavaScript bukan sekadar alat bantu tampilan, melainkan penggerak utama interaktivitas yang membuat web terasa hidup dan cerdas.

Penutup

Melalui pembelajaran ini, Anda telah memahami bahwa menjadi Full Stack Developer bukan sekadar menulis kode, tetapi juga memahami keseluruhan proses pembuatan aplikasi; dari antarmuka pengguna hingga logika server dan pengelolaan data. Dengan keterampilan dasar frontend, backend, dan pemahaman arsitektur aplikasi, seorang Full Stack Developer dapat membangun aplikasi yang fungsional, interaktif, dan siap digunakan oleh banyak orang. Pemahaman ini menjadi bekal penting untuk meniti karier di dunia teknologi, membuka peluang untuk terus belajar, bereksperimen, dan berkembang sebagai developer yang mampu menangani tantangan pengembangan aplikasi modern secara menyeluruh.