Tentu, ini saya buatkan kode lengkapnya. Sistemnya bekerja terbalik dari sebelumnya: pengguna mengetik kata Bahasa Indonesia → sistem menampilkan padanan/artinya dalam Bahasa Kawi.
Kode ini sudah disesuaikan agar mudah dipasang di Blogger, lengkap dengan tampilan yang rapi dan algoritma pencarian yang jelas.
📄 KODE LENGKAP UNTUK BLOGGER
html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kamus Indonesia - Bahasa Kawi</title>
<style>
/* === GAYA TAMPILAN (Bisa diubah sesuai tema blog) === */
body {
font-family: 'Arial', sans-serif;
max-width: 750px;
margin: 30px auto;
padding: 0 20px;
background-color: #fdfdfd;
}
h2 {
text-align: center;
color: #5d4037;
border-bottom: 2px solid #8d6e63;
padding-bottom: 10px;
}
.kotak-cari {
width: 100%;
padding: 12px 15px;
font-size: 16px;
border: 2px solid #bcaaa4;
border-radius: 8px;
margin-bottom: 20px;
box-sizing: border-box;
}
.kotak-cari:focus {
outline: none;
border-color: #8d6e63;
box-shadow: 0 0 5px rgba(141, 110, 99, 0.5);
}
.hasil {
background-color: #fff;
border-radius: 8px;
padding: 15px;
min-height: 80px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.entri-kata {
padding: 12px;
margin: 8px 0;
border-left: 4px solid #8d6e63;
background-color: #f9f5f2;
border-radius: 4px;
}
.kata-indo {
font-weight: bold;
color: #5d4037;
font-size: 17px;
}
.kata-kawi {
color: #4e342e;
font-size: 16px;
margin: 5px 0;
}
.keterangan {
font-size: 14px;
color: #6d4c41;
font-style: italic;
}
.info-kosong {
text-align: center;
color: #8d6e63;
padding: 20px;
}
</style>
</head>
<body>
<h2>📖 Kamus Indonesia ↔ Bahasa Kawi</h2>
<p style="text-align:center; color:#6d4c41;">Ketik kata dalam Bahasa Indonesia di bawah ini:</p>
<!-- Kolom Input Pengguna -->
<input type="text"
id="inputPengguna"
class="kotak-cari"
placeholder="Contoh: asal, hidup, akal...">
<!-- Tempat Menampilkan Hasil -->
<div id="tampilanHasil" class="hasil"></div>
<script>
// ==================================================
// 1. DATA KAMUS: INDONESIA → BAHASA KAWI
// Tambahkan kata-kata baru di bagian ini
// ==================================================
const dataKamus = [
{
indonesia: "asal",
kawi: "Sangkan",
keterangan: "Sering digunakan dalam ungkapan filsafat Jawa"
},
{
indonesia: "permulaan",
kawi: "Sangkan",
keterangan: "Awal dari sesuatu"
},
{
indonesia: "hidup",
kawi: "Urip",
keterangan: "Nyawa, kehidupan"
},
{
indonesia: "kehidupan",
kawi: "Urip",
keterangan: "Proses hidup"
},
{
indonesia: "tercipta",
kawi: "Dumadi",
keterangan: "Menjadi wujud, ada"
},
{
indonesia: "tujuan",
kawi: "Paraning",
keterangan: "Akhir yang dituju"
},
{
indonesia: "akal",
kawi: "Budi",
keterangan: "Pikiran, kebijaksanaan"
},
{
indonesia: "baik",
kawi: "Luhur",
keterangan: "Mulia, tinggi nilainya"
},
{
indonesia: "cahaya",
kawi: "Teja",
keterangan: "Sinar, keagungan"
},
{
indonesia: "tanah",
kawi: "Bumi",
keterangan: "Bumi, tempat berpijak"
}
// SILAHKAN TAMBAH KATA LAIN DI SINI
// Contoh format:
// { indonesia: "kata_indo", kawi: "kata_kawi", keterangan: "keterangan opsional" },
];
// ==================================================
// 2. ALGORITMA / LOGIKA PENCARIAN
// ==================================================
const input = document.getElementById('inputPengguna');
const areaHasil = document.getElementById('tampilanHasil');
// Fungsi utama pencarian
function cariKata() {
// Ambil teks yang diketik pengguna, ubah jadi huruf kecil
const teksDicari = input.value.trim().toLowerCase();
// Kosongkan hasil sebelumnya
areaHasil.innerHTML = "";
// Jika kolom kosong, tampilkan pesan petunjuk
if (teksDicari === "") {
areaHasil.innerHTML = `<div class="info-kosong">Silakan ketik kata yang ingin dicari...</div>`;
return;
}
// Proses pencarian: periksa setiap data dalam kamus
let ditemukan = false;
dataKamus.forEach(entri => {
// Cocokkan kata yang diketik dengan kata Indonesia di database
if (entri.indonesia.toLowerCase().includes(teksDicari)) {
ditemukan = true;
// Buat tampilan hasilnya
const elemen = document.createElement('div');
elemen.className = 'entri-kata';
elemen.innerHTML = `
<span class="kata-indo">${entri.indonesia}</span><br>
<span class="kata-kawi">→ Bahasa Kawi: <strong>${entri.kawi}</strong></span><br>
<span class="keterangan">${entri.keterangan}</span>
`;
areaHasil.appendChild(elemen);
}
});
// Jika kata tidak ada di dalam daftar
if (!ditemukan) {
areaHasil.innerHTML = `<div class="info-kosong">Kata tersebut belum ada dalam daftar. <br>Anda bisa menambahkannya ke data kamus.</div>`;
}
}
// Jalankan fungsi setiap kali pengguna mengetik
input.addEventListener('input', cariKata);
</script>
</body>
</html>
🔍 PENJELASAN ALGORITMA DAN CARA KERJA
Supaya kamu paham cara kerjanya, berikut uraian logikanya:
1. Penyimpanan Data
javascript
const dataKamus = [ ... ]
- Ini adalah "database" sederhana berupa daftar objek.
- Setiap entri berisi: indonesia (kata pencarian), kawi (hasil terjemahan), dan keterangan .
- Cara menambah kata: Cukup salin format baris yang ada, ubah isinya, dan letakkan di dalam tanda kurung siku [ ] .
2. Cara Kerja Pencarian
javascript
if (entri.indonesia.toLowerCase().includes(teksDicari))
Algoritma ini bekerja seperti ini:
1. Ambil masukan: Membaca apa yang diketik pengguna.
2. Normalisasi teks: Mengubah semua huruf menjadi kecil ( toLowerCase() ) agar pencarian tidak peka huruf besar/kecil. Misal: mengetik "Asal" atau "ASAL" tetap ketemu.
3. Pencocokan: Memeriksa apakah kata yang diketik ada di dalam daftar. Fungsi includes() membuatnya fleksibel — jika pengguna mengetik sebagian kata saja (misal: "hidu"), kata "hidup" tetap akan muncul.
4. Tampilkan hasil: Jika ketemu, tampilkan artinya. Jika tidak, beri tahu pengguna bahwa kata tersebut belum terdaftar.
📝 CARA MEMASANG DI BLOGGER
1. Masuk ke akun Blogger kamu.
2. Pilih menu Laman → Buat Laman Baru.
3. Di bagian atas editor, klik ikon HTML (bukan mode tulis biasa).
4. Salin semua kode di atas lalu tempelkan di sana.
5. Beri judul halaman misalnya: Kamus Indonesia - Bahasa Kawi.
6. Klik Publikasikan.
Apakah penjelasan algoritmanya sudah cukup jelas? Atau kamu ingin saya buatkan daftar kata dasar Bahasa Kawi yang lebih banyak untuk ditambahkan ke dalam kode tersebut?
0 komentar:
Posting Komentar