Multi-language 0/3 di HTML Catatan Instal Python

Multi Bahasa di HTML

Cara Menambahkan Fitur Multi Bahasa di HTML

Gunakan data-i18n untuk Menandai Elemen di html

Tandai elemen teks dengan atribut data-i18n agar JavaScript bisa mengganti teks berdasarkan bahasa yang dipilih.

Alternatif untuk Proyek Lebih Kompleks:

  • i18next (library JavaScript)
  • react-i18next, Vue-i18n (untuk React/Vue)
  • Rendering dari backend (PHP, Node.js, Python, dll.)
⚠️ HTML hanya menyimpan struktur, bukan logika pemilihan bahasa otomatis.

JavaScript dibutuhkan untuk mengganti bahasa saat runtime.

SEO & Aksesibilitas

Gunakan atribut lang di tag HTML:

<html lang="id"> atau <html lang="en">
Jumlah bahasa yang didukung tidak terbatas selama menggunakan JavaScript dan struktur yang sesuai.

📌 Penjelasan:

  • HTML mendukung semua bahasa jika menggunakan <meta charset="UTF-8">
  • Namun, tidak bisa mengganti bahasa otomatis tanpa JavaScript.

📊 Jumlah Bahasa Umum yang Digunakan

Jenis Proyek Jumlah Bahasa Umum
Website lokal1–2 (contoh: Indonesia + Inggris)
Website regional (Asia Tenggara)3–5 (ID, EN, MY, TH, VN)
Website internasional5+ (EN, ES, FR, ZH, AR, RU, dll.)
Proyek edukasi/globalHingga 50–100 bahasa

✅ 10 Bahasa Populer dan Kode ISO 639-1:

    • Inggris: en (nama file: en.json)
    • Indonesia: id (nama file: id.json)
    • Mandarin (Cina): zh (nama file: zh.json)
    • Arab: ar (nama file: ar.json)
    • Spanyol: es (nama file: es.json)
    • Prancis: fr (nama file: fr.json)
    • Jepang: ja (nama file: ja.json)
    • Jerman: de (nama file: de.json)
    • Hindi: hi (nama file: hi.json)
    • Rusia: ru (nama file: ru.json)

🔥 Fitur Tambahan yang Bisa Ditambahkan:

  • Auto-deteksi bahasa browser
  • Fallback jika file JSON tidak ditemukan
  • Mendukung banyak konten terjemahan

❗ Masalah Umum: fetch() Gagal di File Lokal

Alasan: CORS & keamanan di browser modern (Edge, Chrome, dll).

✅ Solusi:

1. Jalankan dengan Web Server Lokal

A. Pakai VS Code + Live Server

  1. Install VS Code & ekstensi Live Server
  2. Buka folder proyek
  3. Klik kanan index.html → Open with Live Server

URL: http://127.0.0.1:5500/index.html

B. Pakai Python

📦 Menjalankan HTML + fetch() JSON di Browser (Edge/Chrome) dengan Python

Untuk menjalankan file HTML yang menggunakan fetch("lang/en.json"), kamu perlu menjalankan web server lokal. Cukup gunakan Python versi standar, tanpa modul tambahan, dan tidak perlu koneksi internet.

🧾 Langkah Instalasi Python (Windows)

  1. Buka halaman resmi: https://www.python.org/downloads/
  2. ✅ Pilih: Latest Python 3 Release – Python 3.13.4
  3. ❌ Jangan pilih: Python install manager (masih beta, bukan Python utama)
  4. Jalankan installer dan centang dua opsi ini sebelum klik Install:
    • ☑ Use admin privileges when installing py.exe (opsional tapi aman)
    • ☑ Add python.exe to PATH ✅ WAJIB!
  5. Klik "Install Now"

💻 Menjalankan Web Server Lokal

  1. Buka Command Prompt:
    • Tekan Windows + R
    • Ketik cmd, lalu tekan Enter
  2. Pindah ke drive D: (jika file proyek kamu ada di drive D): 
    D:
  3. Masuk ke folder proyek bernama 10Bahasa yang berisi file index.html script.js dan subfolder lang/ berisi file .json: 
    cd D:\10Bahasa
  4. Sekarang prompt kamu seharusnya tampil seperti ini: 
    D:\10Bahasa>
  5. Jalankan web server Python: 
    python -m http.server 8000
  6. Jika muncul popup dari Windows untuk izin akses jaringan, klik “Allow” ✅
  7. Jika berhasil, akan muncul pesan seperti ini: 
    Serving HTTP on :: port 8000 (http://[::]:8000/) ...
  8. Buka browser (Chrome, Edge, dll), lalu masukkan salah satu URL berikut: 
    http://localhost:8000

    Jika kamu pakai port berbeda, misalnya 8080, gunakan:

    http://localhost:8080
  9. Enter, maka akan tampil nama file .html & .js
  10. Terakhir, klik file index.html di daftar file browser untuk membuka halaman. Sekarang fetch() JSON akan berfungsi normal!

📁 Struktur Folder

        
        10Bahasa/
        ├── index.html        ← file utama HTML kamu
        ├── script.js         ← file JavaScript untuk ganti bahasa
        └── lang/             ← folder berisi semua file bahasa
            ├── en.json       ← bahasa Inggris
            └── id.json       ← bahasa Indonesia

✅ Kenapa Ini Penting?

  • fetch() tidak diizinkan memuat file lokal di browser seperti Chrome/Edge karena alasan keamanan (CORS)
  • Dengan http.server, kamu membuat lingkungan web lokal yang sah
  • Lebih cepat daripada deploy ke internet, cocok untuk uji coba atau pengembangan offline

2. Hosting Online (GitHub Pages, Vercel, Netlify)

Unggah proyek kamu agar fetch() berjalan lancar di semua browser.

🚫 Yang Tidak Bisa Dilakukan

  • Buka langsung file file:///C:/Users/.../index.html → ❌ fetch() gagal
  • Gunakan XMLHttpRequest → tetap gagal di mode file://

🔐 Kenapa Dibatasi?

Untuk mencegah akses sembarangan ke file lokal via JavaScript.

✅ Ringkasan

Cara Buka fetch() JSON Berfungsi?
file:/// (klik langsung)❌ Tidak
localhost dengan server✅ Ya
Hosting online (GitHub Pages, dll)✅ Ya

✅ Keunggulan Fitur Multi Bahasa

  • 1 dropdown = 1 tombol pilih bahasa: Antarmuka lebih rapi dan sederhana untuk pengguna.
  • Preferensi bahasa disimpan di localStorage: Bahasa akan otomatis dimuat ulang saat pengguna kembali membuka halaman.
  • Skalabilitas tinggi: Mudah dikembangkan menjadi 10, 20, atau bahkan lebih banyak bahasa tanpa ubah struktur utama.
Mau saya bantu setup server lokal atau deploy ke GitHub Pages langsung dari folder kamu? Tinggal bilang saja!

Comments

Post a Comment

Popular posts from this blog

1 Seo Postingan Tabel

Image
Tips Tabel SEO-friendly dan Aksesibel Teknik Terbaik untuk Performa Tabel yang Optimal, Beberapa Cara Membuat Tabel Lebih SEO-Friendly: A. Pendahuluan Beberapa teknik agar tabel di situsmu bisa lebih SEO-friendly, lebih mudah dipahami mesin pencari, dan meningkatkan pengalaman pengguna. B. Gunakan <thead> dan <tbody> dalam Tabel Memisahkan bagian header tabel dengan <thead> dan isi tabel dengan <tbody> membuat struktur tabel lebih jelas, memudahkan mesin pencari mengenali judul kolom dan isi data. Penggunaan ini juga meningkatkan aksesibilitas untuk pembaca layar (screen reader). Kelebihan: ✅ Struktur lebih jelas. ✔ Mendukung fixed header. ✅ Aksesibilitas lebih baik. ✔ SEO lebih optimal. ✅ Memudahkan styling dan scripting. Kekurangan: ✘ Kura...
Read more

Terkunci Login, Batas Salah Password, & Reset Manual

Login dengan Penguncian & Reset Manual Login Masukkan Password: Login 🔓 Reset Manual (Admin) 📌 Cara Reset Jika Akun Terkunci Jika kamu terkunci dan tidak bisa login, ada dua cara untuk membukanya kembali: Tambahkan Tombol “Reset Kunci Manual” di Halaman HTML (Opsi Admin di atas) Ini akan menghapus status terkunci tanpa perlu buka Developer Tools. Cocok jika kamu ingin fitur reset internal langsung di halaman: Tambahkan tombol ini di bawah elemen <div id="loginForm"> : <button onclick="resetLock()">🔓 Reset Manual (Admin)</button> Tambahkan juga fungsi berikut ke dalam bagian <script> : function resetLock() { localStorage.removeItem("loginAttempts"); localStorage.removeItem("isLocked"); alert("Status kunci dihapus. Silakan refresh halaman."); } ...
Read more