Postingan

Programming Fundamental 18

Gambar
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 Setup HTML Struktur Buat file index.html dan struktur HTML dasar, termasuk form input, tombol filter, daftar todo, dan area statistik. Styling dengan CSS Buat file styles.css untuk menata tampilan form, daftar todo, filter, dan statistik agar menarik dan responsif. Implementasi JavaScript Logic Buat file script.js dan hubungkan ke HTML. Buat array todos untuk menyimpan data t...

Programming Fundamental 17 (Pengenalan Git untuk Version Control)

Gambar
 5.6 Pengenalan Git untuk Version Control Dalam pengembangan aplikasi web modern, setiap perubahan kode yang dilakukan oleh pengembang perlu dicatat dan dikelola dengan baik. Tanpa sistem pengelolaan versi yang tepat, risiko kehilangan data, konflik kode, dan kesulitan dalam kolaborasi tim akan meningkat. Git hadir sebagai solusi untuk mengatasi tantangan ini. Dengan Git, setiap perubahan kode dapat dilacak secara sistematis, versi project dapat dikelola dengan aman, dan kolaborasi antar developer menjadi lebih efisien. Memahami Git tidak hanya membantu menjaga kualitas kode, tetapi juga meningkatkan produktivitas tim, meminimalkan risiko kesalahan, dan mempermudah proses deployment. Materi ini akan membahas konsep dasar Git, pentingnya penggunaan Git dalam pengembangan web, serta manfaat yang diperoleh dari penerapan sistem version control secara efektif. Dengan pemahaman ini, peserta dapat melihat relevansi Git dalam membangun project yang terstruktur, aman, dan mudah dikelola. 5...

Programming Fundamental 16

Gambar
 5.4 Debugging dan Performance Monitoring Dalam pengembangan aplikasi web, kode yang ditulis terkadang tidak berjalan sesuai harapan akibat kesalahan atau bug. Agar aplikasi tetap berfungsi dengan baik dan pengalaman pengguna tidak terganggu, diperlukan proses yang sistematis untuk menemukan dan memperbaiki kesalahan tersebut. Proses ini dikenal sebagai debugging. Debugging memungkinkan pengembang untuk menganalisis perilaku kode, mengidentifikasi sumber masalah, dan melakukan perbaikan secara tepat. Browser modern menyediakan Developer Tools yang dilengkapi berbagai fitur, seperti console, breakpoints, dan inspector, yang mempermudah proses debugging JavaScript. Dengan pemahaman dan penerapan teknik debugging yang efektif, Anda dapat memastikan aplikasi web berjalan lancar, efisien, dan bebas dari kesalahan yang tidak diinginkan. 5.4.1 Apa itu Debugging? Debugging adalah proses sistematis untuk menemukan, menganalisis, dan memperbaiki bug atau kesalahan yang muncul dalam kode prog...

Programming Fundamental 15

Gambar
5.2 Event Listeners 5.2.1 Apa itu Event Listeners Agar halaman web tidak hanya menampilkan informasi secara statis tetapi juga mampu bereaksi terhadap tindakan pengguna, JavaScript menggunakan mekanisme yang disebut Event Listeners. Event listeners memungkinkan kode JavaScript “mendengarkan” berbagai aksi pengguna, seperti klik pada tombol, mengetik pada form, menggerakkan kursor (hover), atau mengirimkan form (submit). Dengan memahami dan mengimplementasikan event listeners, Anda dapat membuat halaman web yang dinamis dan responsif, di mana setiap interaksi pengguna menghasilkan perubahan visual, pemrosesan data, atau aksi tertentu yang meningkatkan pengalaman pengguna. Event listeners juga menjadi fondasi penting sebelum mempelajari manipulasi elemen lanjutan, validasi form, atau pengembangan aplikasi web interaktif, karena hampir semua interaksi pengguna bergantung pada kemampuan halaman web untuk merespons event secara tepat dan efisien. 5.2.2 Tipe Data dalam Javascript Agar halama...