[0:00]Assalamualaikum warahmatullahi wabarakatuh. Perkenalkan nama saya Johana Arya Saputra dengan NIM 053210891 dari Prodi Sistem Informasi.
[0:10]Di sini saya akan menjelaskan tugas 1 dari mata kuliah pemrograman berbasis web. Di sini tugasnya disuruh membuat aplikasi Sitta UT untuk mentraking informasi dan transaksi bahan ajar.
[0:30]Proyek ini bertujuan untuk mendemonstrasikan kemampuan dalam merancang struktur, konsep data, dan interaksi pengguna menggunakan teknologi dasar web seperti HTML, CSS, dan JavaScript.
[0:43]Tujuan utamanya adalah agar kita mampu menerapkan konsep-konsep dasar ini untuk membangun sebuah antarmuka yang fungsional dan interaktif.
[0:52]masuk ke kode. Mari kita lihat struktur file-nya.
[0:56]Saya menerapkan prinsip modularitas file untuk memisahkan logika, data, dan tampilan agar kode lebih rapi dan mudah di-maintenance.
[1:08]Struktur file saya terdiri dari beberapa berkas HTML seperti Index HTML, halaman depan, Dashboard HTML, Stock HTML, dan Tracking HTML.
[1:24]Pemisahan ini memungkinkan setiap fitur memiliki tampilan sendiri. Selain itu, terdapat berkas JavaScript terpisah seperti data js yang menyimpan data dan berkas js lainnya.
[1:38]Untuk logika tampilan dan fungsionalitas seperti pengelolaan tema, pemisahan ini sangat membantu dalam pengembangan skala kecil.
[1:48]Pada aspek HTML, saya berfokus pada struktur HTML yang semantik dan lengkap.
[1:57]HTML berfungsi sebagai kerangka hypertext aplikasi kita. Meskipun ini adalah proyek sederhana, saya memastikan penggunaan tag yang valid dan lengkap.
[2:04]Misalnya elemen-elemen untuk menampilkan data di halaman depan atau input font pada halaman stok semua diatur posisinya oleh HTML.
[2:12]Kemudian dikendalikan ukurannya dan dikaitkan dengan CSS untuk penataan lebih lanjut.
[2:20]Setiap halaman seperti dashboard, stok memiliki struktur body HTML yang terpisah, memastikan konten tersaji dengan benar.
[2:31]Masuk ke desain CSS dan poin kreativitas tambahan. Ini adalah aspek yang memberikan identitas visual pada aplikasi.
[2:41]Untuk desain CSS dasar, saya mengatur seperti posisi ukuran PX-nya, shadow atau transition.
[2:51]Hingga ada tiga elemen kreatif utama yang saya tambahkan. Seperti penggantian tema dinamis, watermark branding, sapaan dinamis,
[3:00]Seperti selamat pagi, siang, sore admin Sitta yang menyesuaikan berdasarkan waktu untuk meningkatkan user experience dan personalisasi.
[3:11]Ini adalah inti dari interaktivitas. JavaScript digunakan untuk memanipulasi DOM, dokumen objek model dan manajemen data.
[3:22]Menyimpan data in memory untuk kesederhanaan data stok dan tracking disimpan dalam variabel di berkas data Js.
[3:30]Ini adalah cara tercepat untuk memproses data tanpa database sesungguhnya. Lalu fungsi tambahan data. Saat pengguna mengisi formulir di halaman stok,
[3:43]JavaScript mengambil input tersebut memanipulasi DOM untuk menambahkan baris ke tabel stok dan memperbarui data di data.js secara in-memory.
[3:54]Fungsi hapus data. Tombol hapus menggunakan JavaScript untuk menghilangkan elemen dari tabel DOM. Meskipun penghapusan pada demo ini hanya bersifat sementara in-memory, ini mendemonstrasikan interaksi DOM.
[4:08]Dan fungsi tracking, halaman tracking menunjukkan manipulasi data dengan logika pencarian. JavaScript memfilter data pengiriman berdasarkan nomor resi yang dimasukkan dan hanya menampillah hasil yang relevan di tabel.
[4:21]Validasi form dan alert sangat krusial untuk menjaga integritas data dan memberikan feedback kepada pengguna.
[4:27]Meskipun video lebih banyak menampilkan skenario sukses pengisian data, dalam penerapannya validasi harus dilakukan sebelum data baru ditambahkan. Seperti pengecekan field wajib, pengecekan format data,
[4:44]misalnya memastikan kode barang sesuai format tertentu. Saat terjadi error, alert atau mekanisme feedback berupa akan memberikan notifikasi kepada pengguna. Misalnya kode barang tidak boleh kosong.
[4:56]Sebaliknya, setelah berhasil, alert juga akan digunakan untuk mengkonfirmasi keberhasilan seperti data berhasil ditambahkan.
[5:03]Hal ini menciptakan pengalaman pengguna yang jelas dan meminimalkan kesalahan input. Lalu kita coba loginnya.
[5:14]Karena di sini saya karena di sini saya membuat email login dan password-nya adalah admin@sitta.ut.ac.id dengan password 123. Kita coba ketikan seperti itu.
[6:05]Nah, ini adalah halaman tampilannya. Di sini untuk tracking informasi bahan ajar,
[6:11]tracking pengiriman, laporan, dan histori transaksi.
[6:24]Dan di sini untuk tombol logout.
[6:30]Terakhir saya akan menjelaskan alur berpikir, sistematika, dan argumentasi dalam perancangan aplikasi ini.
[6:37]Sistematika pengerjaan: satu, perancangan struktur HTML membuat kerangka dasar, navigasi antar halaman terlebih dahulu.
[6:49]Lalu, yang kedua, penataan gaya atau menggunakan CSS, menerapkan dasar desain, kemudian menambahkan satuan kreatif seperti watermark dan tema.
[7:00]Lalu implementasi logika dengan JavaScript dapat untuk menghidupkan interaktivitas mulai dari manajemen stok, tracking sederhana, hingga fitur tema yang lebih kompleks.
[7:18]Lalu argumentasi kunci. Ada beberapa poin. Keputusan untuk menggunakan data.js sebagai sumber data adalah argumen utama untuk memenuhi kriteria aplikasi sederhana.
[7:34]Dan fokus pada client side programming yaitu HTML, CSS dan JS. Penggunaan local storage untuk tema adalah argumen untuk meningkatkan user experience atau UX.
[7:45]Memastikan tema tetap konsisten di setiap kunjungan. Lalu pemecahan fitur menjadi file-file terpisah mendukung prinsip modularitas.
[7:53]Secara keseluruhan, proyek Sitta yang saya buat ini berhasil mengimplementasikan struktur website yang terdiri dari tampilan interaksi DOM, tambah, hapus, cari, dan fitur UI UX tambahan atau tema dinamis.
[8:10]Sesuai dengan tujuan praktikum. Sekian dari saya. Wassalamualaikum warahmatullahi wabarakatuh.
