ETS - Pemrograman Web
ETS
Sasmita Wiropati - 5053231016 - RPL - PWeb (M)
Soal:
- Apa itu responsive web design dan sebutkan dua teknik yang sering digunakan untuk mencapainya?
- Apa fungsi elemen <meta> dalam HTML dan sebutkan salah satu atribut penting yang dimilikinya? Berikan contoh penggunaan dalam bentuk kode kemudian beri penjelasan.
- Buatlah halaman landing page sederhana untuk sebuah toko online yang menjual produk elektronik. Halaman ini harus mencakup:
- Header dengan logo dan navigasi (Home, Produk, Tentang Kami, Hubungi Kami).
- Bagian utama dengan gambar produk unggulan dan tombol "Beli Sekarang".
- Footer dengan alamat toko dan link media sosial.
Buatlah desain webnya kemudian implementasikan dalam kode. - Seorang klien membutuhkan data member dalam halaman web produk. Buatlah sebuah form dan pengecekannya dengan javascript untuk memastikan isian datanya benar.
- Responsive web desain adalah sebuah bentuk desain web yang memperhatikan kemampuan web untuk merubah tampilan menyesuaikan spesifikasi pengguna web. Teknik yang sering digunakan adalah: Media Queries dan Pengecilan Menu Navigasi.
- Elemen <meta> berfungsi untuk menetapkan deskripsi terkait informasi web, dimana hal ini akan dimanfaatkan oleh browser, search engine, dan lainnya seperti ketika query dalam search engine sebagai salah satu contoh.
- Hasil website landing page yang bersifat responsive: deploy & source code
- Saya menentukan proses validasi pada input form nama dan no hp. Sehingga pada input nama hanya diperbolehkan huruf/spasi dan pada input no hp hanya angka. Dimana apabila fungsi validasi menyatakan ada yang salah, maka akan memberikan pesan alert.<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Form Data</title><style>body{display: block;margin: 0;padding: 20px;}form{padding: 20px;width: min-content;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);}form > input{margin-bottom: 10px;}table{display: block;border-collapse: collapse;margin-top: 20px;}table *{border: 1px solid;}table td{padding: 10px;}@media (min-width: 1024px) {body{display: flex;}table{margin-left: 20px;margin-top: 0;}}</style></head><body><form name="form-data" onsubmit="return validasi()"><label>Nama</label><br><input type="text" id="nama" required><br><label>Alamat</label><br><input type="text" id="alamat" required><br><label>Email</label><br><input type="email" id="email" required><br><label>No HP</label><br><input type="text" id="nohp" required><br><label>Jenis Kelamin:</label><br><input type="radio" id="kelamin-pria" required><label for="kelamin-pria">Pria</label><input type="radio" id="kelamin-perempuan" required><label for="kelamin-perempuan">Perempuan</label><br><br><input type="submit"></form><table><thead><tr><td>No</td><td>Nama</td><td>Alamat</td><td>Email</td><td>No HP</td><td>Kelamin</td></tr></thead><tbody><tr><td>1</td><td>Lorem</td><td>Lorem ipsum</td><td>Lorem@Ipsum</td><td>0123456789</td><td>Pria</td></tr><tr><td>1</td><td>Lorem</td><td>Lorem ipsum</td><td>Lorem@Ipsum</td><td>0123456789</td><td>Pria</td></tr><tr><td>1</td><td>Lorem</td><td>Lorem ipsum</td><td>Lorem@Ipsum</td><td>0123456789</td><td>Pria</td></tr></tbody></table><script>function validasi(){let nama = document.getElementById("nama").value;let nohp = document.getElementById("nohp").value;const namaReq = /[^a-zA-Z\s]+/;const nohpReq = /^\d+$/;console.log(nohpReq.test(nohp));if (namaReq.test(nama)){alert("Nama hanya diperbolehkan huruf dan spasi!");return false;}if (!nohpReq.test(nohp)){alert("No HP hanya memperbolehkan angka saja!");return false;}return true;}</script></body></html>
Comments
Post a Comment