Bagian paling bikin pusing di MSIM4309 Pemrograman Berbasis Web itu pas harus ngebedain data binding di Modul 5 sama watcher di Modul 6. Dua konsep Vue.js ini kelihatan mirip, padahal fungsinya beda. Kadang bikin keder sendiri. referensi soal UT di halaman ini sengaja kami susun biar kamu bisa liat langsung perbedaan mendasarnya lewat contoh nyata.
Modul 8 tentang components dan canvas untuk animasi itu dua topik yang sering bikin mahasiswa UT grogi, soalnya menggabungkan logika dengan tampilan sekaligus. Bukan karena materinya aneh, tapi karena harus latihan koding langsung biar paham. Coba deh kerjakan soal di bagian itu dulu. kumpulan soal UT Sistem Informasi ini dirancang per kegiatan belajar, jadi kamu bisa fokus ke KB yang masih rawan salah.
Soal UAS UT di bawah ini menyentuh inti tiap KB, dari struktur HTML dasar di Modul 1 sampai praktikum integrasi database di Modul 9. Setiap soal sudah kami lengkapi dengan kunci jawaban dan pembahasan, bukan sekadar pilihan benar-salah doang. Soal UAS UT ini jadi temen belajar kamu yang pas sambil ngulang materi di modul.
Soal UT MSIM4309 Pemrograman Berbasis Web
Apa yang dimaksud dengan website?
Website adalah kumpulan halaman yang saling terhubung melalui hyperlink dan dapat diakses menggunakan browser melalui internet.
Protokol yang digunakan untuk mengakses website adalah?
HTTP (Hypertext Transfer Protocol) adalah protokol utama yang digunakan untuk mengirim data antara server web dan browser.
Fungsi utama dari web browser adalah?
Web browser berfungsi untuk menampilkan konten halaman web yang diambil dari server ke layar pengguna.
Contoh dari web server adalah?
Apache HTTP Server adalah perangkat lunak web server yang melayani permintaan dari browser. Chrome, Firefox, dan Safari adalah browser.
HTML adalah singkatan dari?
HTML adalah singkatan dari HyperText Markup Language, bahasa yang digunakan untuk membuat struktur halaman web.
Fungsi utama dari HTML adalah?
HTML berfungsi untuk mendefinisikan struktur konten seperti judul, paragraf, dan gambar pada halaman web.
Dibawah ini yang merupakan elemen HTML untuk membuat paragraf adalah?
Elemen <p> digunakan untuk membuat paragraf dalam dokumen HTML.
Ini adalah contoh dari? <a href='https://contoh.com'>Klik di sini</a>
Kode tersebut adalah contoh elemen anchor (<a>) yang digunakan untuk membuat hyperlink.
Apa yang dimaksud dengan tag <img> dalam HTML?
Tag <img> digunakan untuk menyisipkan gambar ke dalam halaman web.
Apakah fungsi dari atribut 'alt' pada tag <img>?
Atribut 'alt' pada tag <img> digunakan untuk memberikan teks alternatif yang ditampilkan ketika gambar gagal dimuat.
Atribut 'href' pada tag <a> digunakan untuk?
Atribut 'href' pada tag <a> digunakan untuk menentukan URL tujuan hyperlink.
Apa kegunaan dari tag <br> dalam HTML?
Tag <br> digunakan untuk membuat baris baru atau jeda baris dalam paragraf.
Apa kepanjangan dari CSS?
CSS adalah singkatan dari Cascading Style Sheets, bahasa yang digunakan untuk mengatur tampilan halaman web.
Di bawah ini yang merupakan cara menambahkan CSS inline adalah?
CSS inline diterapkan langsung pada elemen HTML menggunakan atribut 'style'.
Dalam CSS, properti 'color' digunakan untuk mengubah?
Properti 'color' dalam CSS digunakan untuk mengatur warna teks suatu elemen.
CSS selector '.nama-kelas' digunakan untuk menyeleksi elemen berdasarkan?
Selector '.nama-kelas' menyeleksi elemen yang memiliki atribut class dengan nilai 'nama-kelas'.
Apa fungsi dari JavaScript dalam pengembangan web?
JavaScript digunakan untuk menambahkan interaktivitas seperti validasi form, animasi, dan manipulasi konten secara dinamis.
Dalam Javascript, method yang digunakan untuk menampilkan pesan dialog kepada pengguna adalah…
alert() digunakan untuk menampilkan kotak dialog pesan kepada pengguna di browser.
Perhatikan kode Javascript berikut: let x = 10; let y = "10"; console.log(x == y); Output dari kode tersebut adalah…
Operator == membandingkan nilai setelah konversi tipe, sehingga 10 (number) dan "10" (string) dianggap sama.
Fungsi dalam Javascript yang digunakan untuk mengubah string menjadi huruf besar adalah…
toUpperCase() berfungsi mengubah semua karakter string menjadi huruf kapital.
Alat yang digunakan untuk menulis kode HTML dan file teks lainnya dalam praktikum adalah…
Code editor digunakan sebagai alat untuk menulis dan mengedit kode HTML, CSS, dan Javascript.
Ekstensi file yang benar untuk dokumen HTML adalah…
File HTML memiliki ekstensi .html atau .htm sesuai standar untuk halaman web.
Untuk memulai praktikum, alat yang diperlukan untuk melihat hasil HTML adalah…
Web browser digunakan untuk merender dan menampilkan halaman HTML yang telah dibuat.
Salah satu persiapan penting sebelum mengimplementasikan HTML adalah menyiapkan…
Struktur folder proyek membantu mengorganisir file HTML, CSS, dan Javascript agar rapi.
Tag HTML yang digunakan untuk menampilkan paragraf adalah…
Tag <p> digunakan untuk mendefinisikan paragraf dalam dokumen HTML.
Atribut pada tag <img> yang digunakan untuk menentukan sumber gambar adalah…
Atribut src pada tag <img> berisi URL atau path file gambar yang akan ditampilkan.
Tag HTML untuk membuat daftar tidak berurutan adalah…
Tag <ul> digunakan untuk membuat unordered list atau daftar dengan bullet.
Struktur dasar HTML yang benar dimulai dengan tag…
<!DOCTYPE html> adalah deklarasi yang harus ditulis di awal sebelum tag <html>.
Properti CSS yang digunakan untuk mengubah warna teks adalah…
Properti color pada CSS digunakan untuk mengatur warna teks suatu elemen.
Cara menambahkan CSS eksternal ke dalam HTML adalah dengan menggunakan tag…
Tag <link> digunakan untuk menghubungkan file CSS eksternal ke dokumen HTML.
Properti CSS yang digunakan untuk memberikan jarak antara teks dengan tepi elemen di dalam adalah…
Padding adalah ruang antara konten elemen dan batas tepi dalam elemen tersebut.
Nilai properti display yang membuat elemen ditampilkan dalam satu baris dan tidak memulai baris baru adalah…
Nilai inline pada display membuat elemen tampil sejajar dalam baris yang sama.
Dalam Javascript untuk implementasi web, method yang digunakan untuk mengambil elemen berdasarkan id adalah…
getElementById() mengembalikan elemen dengan atribut id yang spesifik.
Untuk mengubah konten teks dari suatu elemen HTML menggunakan Javascript, properti yang digunakan adalah…
textContent digunakan untuk mengatur atau mengambil teks dalam elemen tanpa markup HTML.
Dalam konteks implementasi Javascript pada halaman web, apa fungsi utama dari method document.getElementById()?
Method document.getElementById() digunakan untuk mengambil elemen HTML berdasarkan id yang diberikan sehingga dapat dimanipulasi lebih lanjut.
Jika sebuah halaman web memiliki elemen dengan id 'demo', dan kita ingin menampilkan teks 'Halo Dunia' di dalamnya menggunakan Javascript, kode yang tepat adalah?
Properti innerHTML digunakan untuk mengatur atau mendapatkan konten HTML dalam elemen, dan kode tersebut akan menampilkan teks 'Halo Dunia' di elemen dengan id demo.
Dalam Vue.js, apa fungsi utama dari direktif v-bind?
Direktif v-bind digunakan untuk mengikat data Vue ke atribut elemen HTML, sehingga nilai atribut akan diperbarui secara reaktif saat data berubah.
Bagaimana cara mendeklarasikan sebuah instance Vue yang akan mengelola elemen dengan id 'app'?
Instance Vue dibuat dengan sintaks new Vue dan properti el untuk menunjuk elemen target, seperti '#app'.
Dalam Vue.js, properti apa yang digunakan untuk menyimpan data reaktif dalam sebuah instance?
Properti data digunakan untuk mendefinisikan data reaktif yang akan dimonitor oleh Vue dan dapat diakses dalam template.
Apa yang dimaksud dengan 'interpolation' dalam Vue.js?
Interpolation adalah cara Vue menyisipkan nilai data ke dalam HTML menggunakan sintaks {{ }}, sehingga nilai data akan ditampilkan secara reaktif.
Bagaimana cara menampilkan daftar item dari array 'buah' berupa elemen <li> dalam Vue.js?
Direktif v-for digunakan untuk mengulang elemen berdasarkan array, dengan sintaks v-for='item in buah'.
Jika data Vue memiliki properti 'pesan' dengan nilai 'Selamat Belajar', maka kode template {{ pesan.toUpperCase() }} akan menghasilkan?
Method toUpperCase() mengubah string menjadi huruf kapital semua, sehingga 'Selamat Belajar' menjadi 'SELAMAT BELAJAR'.
Dalam Vue.js, direktif apa yang digunakan untuk menampilkan elemen hanya jika suatu kondisi bernilai true?
Direktif v-if digunakan untuk menampilkan atau menyembunyikan elemen berdasarkan kondisi boolean; jika true, elemen akan di-render.
Jika kita memiliki kode Vue: <p v-show='isActive'>Teks</p> dan isActive bernilai false, apa yang terjadi?
v-show menyembunyikan elemen dengan memberikan style display: none, namun elemen tetap ada di DOM.
Bagaimana cara menuliskan kondisi v-if yang memeriksa apakah variabel 'nilai' lebih besar dari 70?
Sintaks yang benar adalah menggunakan operator perbandingan seperti > langsung dalam ekspresi v-if.
Dalam Vue.js, direktif apa yang digunakan untuk menampilkan teks alternatif jika kondisi v-if tidak terpenuhi?
Direktif v-else digunakan setelah v-if untuk menampilkan konten ketika kondisi v-if bernilai false.
Apa yang dimaksud dengan data binding dalam konteks framework seperti Vue.js?
Data binding adalah mekanisme yang menghubungkan data dengan UI, sehingga setiap perubahan data akan secara otomatis merefleksikan perubahan pada tampilan.
Dalam Vue.js, bagaimana cara melakukan data binding dua arah (two-way binding) pada elemen input?
Directive v-model menyediakan two-way binding, yaitu perubahan pada input akan memperbarui data dan sebaliknya.
Jika kita memiliki properti data 'nama' dan ingin menampilkannya dalam sebuah input teks yang dapat diubah, kode mana yang tepat?
Dengan v-model, nilai input akan terikat dengan data 'nama' sehingga perubahan input akan mengubah data dan sebaliknya.
Saat menggunakan v-model pada elemen <input type='checkbox'>, tipe data apa yang biasanya terikat?
Pada checkbox, nilai yang terikat dengan v-model adalah boolean, yaitu true jika dicentang dan false jika tidak.
Apa fungsi dari properti 'methods' dalam Vue.js?
Properti methods digunakan untuk mendeklarasikan fungsi-fungsi yang dapat dipanggil dalam template atau dari kode instance Vue, misalnya saat event terjadi.
Dalam Vue.js, direktif yang digunakan untuk melakukan data binding secara dua arah (two-way data binding) adalah…
Direktif v-model pada Vue.js digunakan untuk two-way data binding yang menghubungkan data di model dengan elemen input sehingga perubahan di salah satu sisi otomatis diupdate di sisi lain.
Computed properties dalam Vue.js memiliki karakteristik utama yaitu…
Computed properties bersifat reaktif dan hasilnya di-cache; nilai akan dihitung ulang hanya jika dependensinya berubah, sehingga efisien untuk perhitungan kompleks.
Ketika menggunakan computed properties di Vue.js, jika tidak ada perubahan pada data dependensi, maka nilai yang dikembalikan akan…
Computed properties menggunakan cache; jika dependensi tidak berubah, nilai yang di-cache akan langsung dikembalikan, menghindari perhitungan ulang.
Manakah dari berikut ini yang merupakan contoh penggunaan computed property yang benar dalam Vue.js?
Sintaks yang benar adalah computed sebagai objek dengan fungsi yang mengembalikan nilai, seperti contoh A yang menggunakan return.
Perbedaan utama antara computed properties dan methods di Vue.js adalah…
Computed properties tidak menerima parameter karena bersifat deklaratif, sedangkan methods dapat menerima parameter dan dipanggil dengan argumen.
Methods dalam Vue.js ditulis pada properti methods dan biasanya digunakan untuk…
Methods berisi fungsi-fungsi yang dapat dipanggil sebagai event handler atau secara manual untuk menjalankan logika tertentu.
Jika Anda ingin mencegah refresh halaman saat tombol submit diklik, Anda bisa menggunakan methods dengan event…
Metode preventDefault() pada event objek digunakan untuk mencegah aksi default browser, seperti reload halaman pada submit.
Dalam Vue.js, untuk memanggil method saat tombol diklik, direktif yang digunakan adalah…
Direktif v-on:click atau @click digunakan untuk menangani event klik dan memanggil method yang ditentukan.
Method di Vue.js yang didefinisikan dalam objek methods dapat mengakses data komponen melalui…
Keyword this dalam methods merujuk pada instance Vue, sehingga data dan properti lain dapat diakses menggunakan this.namaData.
Watcher di Vue.js digunakan untuk…
Watcher adalah fungsi yang dipicu ketika properti tertentu berubah, berguna untuk menjalankan logika seperti request API atau validasi.
Sebuah watcher di Vue.js dapat mendeteksi perubahan pada properti bertipe objek dengan menggunakan opsi…
Opsi deep: true pada watcher memungkinkan pengawasan perubahan pada nested property di dalam objek.
Jika ingin watcher dijalankan segera saat komponen dibuat tanpa menunggu perubahan, opsi yang digunakan adalah…
Opsi immediate: true menyebabkan watcher dijalankan segera saat komponen diinisialisasi, sebelum perubahan terjadi.
Dalam Vue.js, watcher biasanya didefinisikan di dalam properti…
Watcher didefinisikan dalam properti watch pada objek opsi komponen Vue.
Pada praktikum Unit-2 Vue -1, langkah pertama yang biasanya dilakukan adalah…
Langkah awal dalam praktikum Vue adalah menginstal atau menyertakan Vue.js melalui CDN atau npm agar dapat digunakan.
Dalam praktikum Unit-2 Vue -1, untuk menampilkan data dari Vue ke halaman HTML, digunakan teknik…
Interpolasi dengan {{ }} adalah cara standar di Vue untuk menampilkan data dalam template HTML.
Salah satu contoh penggunaan watcher dalam praktikum Unit-2 Vue -1 adalah untuk…
Watcher dapat digunakan untuk merespon perubahan data input dan memperbarui elemen lain seperti judul halaman secara dinamis.
Pada praktikum Unit-2 Vue -1, untuk menghubungkan data Vue dengan elemen HTML, digunakan direktif…
Direktif v-bind digunakan untuk mengikat atribut HTML seperti src, href, atau class dengan data Vue.
Dalam praktikum unit 2 Vue bagian 2, langkah pertama yang harus dilakukan untuk membuat aplikasi Vue adalah…
Langkah awal dalam praktikum adalah membuat file HTML dan menghubungkan dengan Vue dari CDN agar dapat mulai menggunakan Vue.
Pada praktikum unit 2 Vue bagian 2, sebuah elemen div dengan id 'app' digunakan untuk…
Elemen div dengan id 'app' berfungsi sebagai kontainer untuk template yang akan dikelola oleh Vue instance.
Dalam praktikum, data properti dalam Vue instance digunakan untuk menyimpan…
Data properti pada Vue instance berisi variabel yang nilainya dapat ditampilkan langsung di template melalui data binding.
Saat membuat daftar dinamis di Vue pada praktikum unit 2 bagian 2, direktif yang digunakan untuk perulangan adalah…
Direktif v-for digunakan untuk melakukan perulangan data array atau objek dalam template Vue.
Array dalam Javascript bersifat…
Array di Javascript bersifat mutable sehingga elemennya dapat ditambah, dihapus, atau diubah setelah array dibuat.
Metode untuk menambahkan satu elemen di akhir array adalah…
Metode push() digunakan untuk menambahkan satu atau lebih elemen ke akhir array dan mengembalikan panjang array yang baru.
Untuk mengakses elemen pertama dari array arr, kode yang benar adalah…
Indeks array dimulai dari 0 sehingga elemen pertama diakses dengan arr[0].
Property pada array yang menyatakan jumlah elemen adalah…
Property length pada array mengembalikan jumlah elemen yang ada di dalam array tersebut.
Fungsi filter pada array digunakan untuk…
Metode filter() membuat array baru berisi semua elemen yang lolos dari pengujian fungsi yang disediakan.
Jika diberikan array [1, 2, 3, 4, 5], maka hasil dari filter bilangan genap adalah…
Bilangan genap dalam array adalah 2 dan 4, sehingga hasil filter adalah [2, 4].
Metode filter() mengembalikan…
Metode filter() mengembalikan array baru yang berisi elemen-elemen yang memenuhi kondisi yang diberikan.
Fungsi callback pada filter harus mengembalikan nilai…
Fungsi callback pada filter() harus mengembalikan boolean true untuk menyertakan elemen atau false untuk mengecualikannya.
Event handling di Vue.js menggunakan direktif…
Direktif v-on digunakan untuk menangani event seperti klik, submit, mouseover, dll. di Vue.js.
Untuk menjalankan fungsi handleClick saat tombol diklik, kode yang tepat adalah…
Event click ditangani dengan v-on:click yang memanggil fungsi handleClick saat tombol diklik.
Untuk mendapatkan objek event asli dari DOM pada event handler di Vue, parameter yang dapat digunakan adalah…
Vue menyediakan variabel khusus $event untuk mengakses objek event asli dari DOM dalam event handler.
Event modifier .prevent pada v-on digunakan untuk…
Modifier .prevent memanggil event.preventDefault() sehingga aksi default seperti submit form atau navigasi link tidak terjadi.
Dalam Vue.js, apa fungsi utama dari komponen (component)?
Komponen di Vue.js adalah blok bangunan yang dapat digunakan kembali untuk membungkus antarmuka pengguna, memungkinkan modularitas dan kemudahan pemeliharaan.
Bagaimana cara mendefinisikan komponen global di Vue.js?
Vue.component() digunakan untuk mendaftarkan komponen secara global agar dapat digunakan di seluruh aplikasi tanpa perlu impor ulang.
Properti apa yang digunakan dalam komponen Vue untuk menerima data dari komponen induk?
Props adalah properti khusus yang memungkinkan komponen anak menerima data dari komponen induk secara eksplisit.
Dalam komponen Vue, bagaimana cara mendefinisikan data lokal yang reaktif?
Data dalam komponen harus berupa fungsi yang mengembalikan objek agar setiap instance komponen memiliki data independen yang reaktif.
Elemen HTML apa yang digunakan untuk menggambar grafik kanvas di halaman web?
Elemen <canvas> adalah elemen HTML yang menyediakan area gambar untuk skrip, biasanya digunakan dengan JavaScript untuk rendering grafik.
Metode apa yang digunakan untuk memulai jalur gambar baru di kanvas?
beginPath() adalah metode untuk memulai jalur (path) baru, yang diperlukan sebelum menggambar bentuk di kanvas.
Untuk menggambar lingkaran di kanvas, parameter apa yang digunakan dalam metode arc()?
Metode arc() memerlukan koordinat pusat (x,y), radius, sudut awal, sudut akhir, dan arah putaran untuk menggambar busur atau lingkaran.
Fungsi CSS apa yang dapat digunakan untuk membuat animasi pada elemen HTML tanpa JavaScript?
Aturan @keyframes digunakan untuk mendefinisikan animasi, yang kemudian dipanggil dengan properti animation pada elemen.
Properti CSS apa yang digunakan untuk mengontrol kecepatan dan durasi animasi?
animation-duration menentukan berapa lama animasi berlangsung, misalnya 2s untuk dua detik.
Bentuk siklus animasi apa yang membuat gerakan bolak-balik?
Nilai alternate pada animation-direction membuat animasi bergerak maju lalu mundur secara bergantian.
Sistem manajemen basis data apa yang umum digunakan untuk menyimpan data aplikasi web?
MySQL adalah sistem manajemen basis data relasional yang populer untuk aplikasi web karena handal dan mudah diintegrasikan.
Perintah SQL apa yang digunakan untuk mengambil data dari tabel?
Perintah SELECT digunakan untuk memilih atau mengambil data dari satu atau lebih tabel dalam basis data.
Apa fungsi utama dari perintah WHERE dalam query SQL?
Klausa WHERE digunakan untuk memfilter baris yang akan diambil atau diproses berdasarkan kondisi tertentu.
Dalam praktikum unit-3, apa tujuan utama menghubungkan Vue.js dengan basis data?
Menghubungkan Vue.js dengan basis data memungkinkan aplikasi menampilkan data secara dinamis dan interaktif dari server.
Metode apa yang digunakan dalam Vue.js untuk mengambil data dari server saat aplikasi dimulai?
Hook siklus hidup mounted() di Vue.js dipanggil setelah komponen terpasang, cocok untuk mengambil data dari server.
Dalam praktikum unit-3, bagaimana cara mengirim data dari form ke basis data?
Metode POST digunakan untuk mengirim data form ke server, yang kemudian diproses untuk disimpan di basis data.
Soal Vue.js dengan data binding dan computed properties sering jadi jebakan karena konsepnya mirip tapi beda konteks pemakaian. Kalau kamu masih bingung bedain kapan pake watcher dan kapan pake methods, itu wajar banget. Banyak yang hafal sintaks HTML dan CSS di Modul 1, tapi pas implementasi Vue langsung keder. Coba ulang skenario praktikum Modul 6, terutama soal watcher yang ngawasin perubahan data.
Di MSIM4309 Pemrograman Berbasis Web, soal UAS UT biasanya nyampurin antara teori framework dari Modul 4 dan logika event handling di Modul 7. Kamu bakal nemu soal UTM yang ngetes pengetahuan deklarasi variabel Vue, dan soal UO yang minta bikin komponen animasi di canvas. Daripada pusing ngehafal semua fungsi, fokus aja ke pola soal dari UTM dan UO yang ada di latihan UAS UT ini. Kalau sudah paham beda computed dan methods, sisanya tinggal latihan ngulik kode.
