Tugas PWEB Pertemuan 8
Nama : Daffa Rafif Hafizhuddin
NRP : 5025231121
Kelas : Pemrograman Web (E)
Pertemuan : 8
1. Buatlah sebuah form registrasi yang terdiri dari nama mahasiswa, nim, mata kuliah, dan dosen. Form registrasi ini memiliki aturan sebagai berikut. Ketika pengguna sistem akan mengisikan data nama dengan memasukkan huruf tertentu maka akan muncul rekomendasi tertentu. Gunakan referensi di internet ataupun yang lainnya untuk memecahkan kasus tersebut.
Code :
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Registrasi Mahasiswa</title>
<style>
/* Mengatur font dan margin umum */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f7fc;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
h2 {
text-align: center;
font-size: 24px;
color: #333;
}
/* Menata form dengan card background */
form {
width: 100%;
max-width: 500px;
padding: 30px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 0;
}
/* Mengatur label dan input */
label {
font-size: 16px;
color: #555;
margin-bottom: 8px;
display: inline-block;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
transition: border-color 0.3s ease;
}
input[type="text"]:focus {
border-color: #4CAF50;
outline: none;
}
/* Tombol submit */
input[type="submit"] {
width: 100%;
padding: 12px;
background-color: #4CAF50;
border: none;
color: #fff;
font-size: 16px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease;
}
input[type="submit"]:hover {
background-color: #45a049;
}
/* Menata rekomendasi nama */
#rekomendasi {
border: 1px solid #ccc;
max-height: 100px;
overflow-y: auto;
position: absolute;
background-color: #fff;
z-index: 1;
width: 100%;
border-radius: 4px;
box-sizing: border-box; /* Agar lebar rekomendasi sesuai dengan input */
}
#rekomendasi div {
padding: 5px;
cursor: pointer;
}
#rekomendasi div:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div>
<h2>Form Registrasi Mahasiswa</h2>
<form action="" method="POST">
<label for="nama">Nama Mahasiswa:</label>
<input type="text" id="nama" name="nama" oninput="rekomendasiNama()" autocomplete="off">
<div id="rekomendasi"></div><br>
<label for="nim">NIM:</label>
<input type="text" id="nim" name="nim"><br>
<label for="mata_kuliah">Mata Kuliah:</label>
<input type="text" id="mata_kuliah" name="mata_kuliah"><br>
<label for="dosen">Dosen:</label>
<input type="text" id="dosen" name="dosen"><br>
<input type="submit" value="Daftar">
</form>
</div>
<script>
const namaDatabase = ["Daffa Rafif", "Dina Wulandari", "Daniel Pratama", "Dwi Oktaviani", "Dina Santosa"];
function rekomendasiNama() {
const namaInput = document.getElementById('nama').value.toLowerCase();
const rekomendasiList = document.getElementById('rekomendasi');
rekomendasiList.innerHTML = '';
if (namaInput) {
const hasil = namaDatabase.filter(nama => nama.toLowerCase().includes(namaInput));
hasil.forEach(nama => {
const div = document.createElement('div');
div.textContent = nama;
div.onclick = function() {
document.getElementById('nama').value = nama;
rekomendasiList.innerHTML = '';
};
rekomendasiList.appendChild(div);
});
}
}
</script>
</body>
</html>
2. Buatlah pencarian kode pos Indonesia dengan inputan Provinsi, Kabupaten/ Kota, Kecamatan, kemudian outputnya kode pos dan informasi daerah.
Code :
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pencarian Kode Pos Indonesia</title>
<style>
/* Mengatur font dan margin umum */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f7fc;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
h2 {
text-align: center;
font-size: 28px;
color: #333;
margin-bottom: 20px;
}
/* Menata form pencarian kode pos dengan card background */
.search-container {
width: 100%;
max-width: 600px;
padding: 30px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
margin: 0;
text-align: center;
}
label {
font-size: 16px;
color: #555;
margin-bottom: 10px;
display: inline-block;
}
select, input[type="text"] {
width: 100%;
padding: 12px;
margin: 10px 0 20px;
border-radius: 6px;
border: 1px solid #ccc;
font-size: 16px;
transition: border-color 0.3s ease;
box-sizing: border-box;
}
select:focus, input[type="text"]:focus {
border-color: #4CAF50;
outline: none;
}
button {
width: 100%;
padding: 12px;
background-color: #4CAF50;
color: #fff;
font-size: 16px;
cursor: pointer;
border-radius: 6px;
border: none;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #45a049;
}
.result-container {
margin-top: 20px;
background-color: #f9f9f9;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
font-size: 16px;
}
.result-container strong {
font-weight: bold;
}
</style>
</head>
<body>
<div class="search-container">
<h2>Pencarian Kode Pos Indonesia</h2>
<form id="kode-pos-form">
<label for="provinsi">Pilih Provinsi:</label>
<select id="provinsi" name="provinsi" onchange="updateKabupatenKota()">
<option value="">Pilih Provinsi</option>
<option value="DKI Jakarta">DKI Jakarta</option>
<option value="Jawa Barat">Jawa Barat</option>
<option value="Bali">Bali</option>
<option value="Yogyakarta">Yogyakarta</option>
<!-- Tambahkan pilihan provinsi lainnya di sini -->
</select>
<label for="kabupaten-kota">Pilih Kabupaten/Kota:</label>
<select id="kabupaten-kota" name="kabupaten_kota" onchange="updateKecamatan()">
<option value="">Pilih Kabupaten/Kota</option>
<!-- Pilihan kabupaten/kota akan di-update sesuai dengan provinsi -->
</select>
<label for="kecamatan">Pilih Kecamatan:</label>
<select id="kecamatan" name="kecamatan" onchange="updateDesaKelurahan()">
<option value="">Pilih Kecamatan</option>
<!-- Pilihan kecamatan akan di-update sesuai dengan kabupaten/kota -->
</select>
<label for="desa-kelurahan">Pilih Desa/Kelurahan:</label>
<select id="desa-kelurahan" name="desa_kelurahan">
<option value="">Pilih Desa/Kelurahan</option>
<!-- Pilihan desa/kelurahan akan di-update sesuai dengan kecamatan -->
</select>
<button type="button" onclick="cariKodePos()">Cari Kode Pos</button>
</form>
<div id="result" class="result-container" style="display: none;">
<p><strong>Nama Daerah:</strong> <span id="nama-daerah"></span></p>
<p><strong>Kode Pos:</strong> <span id="kode-pos"></span></p>
</div>
</div>
<script>
// Data dummy untuk kabupaten/kota, kecamatan, dan desa/kelurahan
const data = {
"DKI Jakarta": {
"Jakarta Pusat": {
"Gambir": ["Kelurahan 1", "Kelurahan 2"],
"Menteng": ["Kelurahan A", "Kelurahan B"]
},
"Jakarta Barat": {
"Cengkareng": ["Kelurahan X", "Kelurahan Y"],
"Kebon Jeruk": ["Kelurahan Z", "Kelurahan W"]
}
},
"Jawa Barat": {
"Bandung": {
"Bandung Wetan": ["Kelurahan I", "Kelurahan II"],
"Cibeunying Kaler": ["Kelurahan III", "Kelurahan IV"]
}
}
};
// Update Kabupaten/Kota berdasarkan Provinsi
function updateKabupatenKota() {
const provinsi = document.getElementById('provinsi').value;
const kabupatenKotaSelect = document.getElementById('kabupaten-kota');
kabupatenKotaSelect.innerHTML = '<option value="">Pilih Kabupaten/Kota</option>';
if (provinsi && data[provinsi]) {
const kabupatenKota = data[provinsi];
for (const kota in kabupatenKota) {
kabupatenKotaSelect.innerHTML += `<option value="${kota}">${kota}</option>`;
}
}
}
// Update Kecamatan berdasarkan Kabupaten/Kota
function updateKecamatan() {
const provinsi = document.getElementById('provinsi').value;
const kabupatenKota = document.getElementById('kabupaten-kota').value;
const kecamatanSelect = document.getElementById('kecamatan');
kecamatanSelect.innerHTML = '<option value="">Pilih Kecamatan</option>';
if (provinsi && kabupatenKota && data[provinsi][kabupatenKota]) {
const kecamatans = data[provinsi][kabupatenKota];
for (const kecamatan in kecamatans) {
kecamatanSelect.innerHTML += `<option value="${kecamatan}">${kecamatan}</option>`;
}
}
}
// Update Desa/Kelurahan berdasarkan Kecamatan
function updateDesaKelurahan() {
const provinsi = document.getElementById('provinsi').value;
const kabupatenKota = document.getElementById('kabupaten-kota').value;
const kecamatan = document.getElementById('kecamatan').value;
const desaKelurahanSelect = document.getElementById('desa-kelurahan');
desaKelurahanSelect.innerHTML = '<option value="">Pilih Desa/Kelurahan</option>';
if (provinsi && kabupatenKota && kecamatan && data[provinsi][kabupatenKota][kecamatan]) {
const desas = data[provinsi][kabupatenKota][kecamatan];
desas.forEach(desa => {
desaKelurahanSelect.innerHTML += `<option value="${desa}">${desa}</option>`;
});
}
}
// Fungsi untuk memulai pencarian kode pos
function cariKodePos() {
const provinsi = document.getElementById('provinsi').value;
const kabupatenKota = document.getElementById('kabupaten-kota').value;
const kecamatan = document.getElementById('kecamatan').value;
const desaKelurahan = document.getElementById('desa-kelurahan').value;
// Menampilkan hasil pencarian (contoh statis untuk saat ini)
if (provinsi && kabupatenKota && kecamatan && desaKelurahan) {
document.getElementById('nama-daerah').textContent = `${desaKelurahan}, ${kecamatan}, ${kabupatenKota}, ${provinsi}`;
document.getElementById('kode-pos').textContent = "12345"; // Ganti dengan kode pos yang sesuai
document.getElementById('result').style.display = 'block';
} else {
alert('Harap lengkapi semua field!');
}
}
</script>
</body>
</html>
3. Membuat List Dropdown dinamis
Dropdown DKI Jakarta :
Dropdown Bandung :
Comments
Post a Comment