Kunci jawaban lebih detail, hubungi +62 895-0183-4070
Halo rekan-rekan mahasiswa, bagaimana kabar kalian? Semoga rekan-rekan mahasiswa dalam
keadaan baik. Nah, kali ini ada Tugas Praktik1 untuk mengimplementasikan apa saja yang
sudah rekan-rekan mahasiswa pelajari mengenai HTML, CSS dan DOM.
Secara garis besar, tujuan dari tugas praktikum ini adalah:
Mahasiswa mampu mengimplementasikan konsep fundamental HTML, CSS, dan JavaScript
DOM untuk membangun antarmuka dan alur interaktif dari aplikasi pemesanan bahan
ajar SITTA untuk sistem kebutuhan proses pemesanan dan distribusi bahan ajar di UT.
Pertama, Tugas Praktik 1 ini memiliki tiga Indikator untuk menilai Hasil Belajar Mahasiswa,
yaitu:
1. Mahasiswa dapat merancang struktur HTML yang semantik dan valid.
2. Mahasiswa dapat mengelola gaya antarmuka menggunakan CSS
(inline, internal, external).
3. Mahasiswa dapat menggunakan JavaScript untuk manipulasi DOM, validasi form,
manipulasi data tabel, dan interaksi UI sesuai dengan kreativitas masing-masing seperti
pop-up, modal box, dan alert box.
Soal Tugas
Anda diminta untuk membuat sebuah aplikasi website sederhana untuk pemesanan Bahan Ajar
di Universitas Terbuka yang dilakukan oleh UT-Daerah. Pada tugas ini, mahasiswa berfokus
pada proses pada Front-End tanpa menggunakan Back-End terlebih dahulu. Sehingga, data-
data yang dibutuhkan tidak dibaca melalui database, tapi melalui js file yang akan dilampirkan
Kunci jawaban lebih detail, hubungi +62 895-0183-4070
bersamaan dengan Tugas Praktik ini.
Buatlah Empat Halaman Website sebagai berikut:
1. Halaman Login (login.html)
• Input: email dan password.
• Tombol “Login”
• Jika salah atau tidak sesuai, munculkan pop-up/alert yang berisi bahwa
“email/password yang anda masukkan salah”
• Terdapat tombol “Lupa Password” dan “Daftar” yang dimunculkan dalam
bentuk modal box/pop up
Berikut adalah contoh gambaran dari halaman login, tetapi ini hanya sebagai contoh karena
aplikasi asli menggunakan versi mobile. Kita sesuaikan dengan versi website dan sesuai
dengan kemampuan kreativitas teman-teman mahasiswa masing-masing
2. Dashboard Menu (dashboard.html)
• Menu utama yang terdiri atas tombol navigasi ke:
• Informasi Bahan Ajar
• Tracking Pengiriman
• Laporan
o Monitoring Progress DO Bahan Ajar
o Rekap Bahan Ajar
• Histori Transaksi Bahan Ajar
• Tampilkan “greeting” berdasarkan waktu local time (pagi/siang/sore).
Berikut adalah contoh gambaran dari halaman dashboard dengan navigasi menu di atas,
tetapi ini hanya sebagai contoh. Navigasi menu dapat dirancang berada di kiri ataupun kanan.
Teman-teman mahasiswa dapat membuat sesuai dengan kemampuan kreativitas masing-
masing.
3. Dashboard Menu (dashboard.html)
• Input: Nomor Delivery Order
• Ketika tombol “Cari” ditekan, tampilkan:
• Nama Mahasiswa
• Status Pengiriman (dapat disimulasikan dengan progress bar, warna, tabel, atau list
sesuai dengan kemampuan dan kreativitas teman-teman)
• Detail ekspedisi, tanggal kirim, jenis paket, total pembayaran.
Berikut adalah contoh gambaran dari halaman tracking pengiriman, tetapi ini hanya sebagai
contoh karena aplikasi asli menggunakan versi mobile. Kita sesuaikan dengan versi website
dan sesuai dengan kemampuan
Kunci jawaban lebih detail, hubungi +62 895-0183-4070