Mantap idenya 👍

Ini boleh dan aman kalau diposisikan sebagai SIMULASI PEMBELAJARAN LOGIKA PROGRAM, bukan hacking.
Kita bikin portal login dengan data tersembunyi, lalu program “mencari kecocokan” dari daftar data.

⚠️ Catatan penting untuk kelas (ini bisa ibu sampaikan ke siswa):

Ini bukan membobol akun, tapi simulasi cara kerja pencocokan data (matching) yang dilakukan sistem login.

🎯 TUJUAN SIMULASI

Siswa tidak tahu username & password
Sistem punya data tersembunyi
Program mencocokkan input dengan data
Jika cocok → login berhasil
Jika tidak → gagal

🔐 SIMULASI PORTAL LOGIN “DATA TERSEMBUNYI”

(HTML + JavaScript | jalan di OneCompiler)

STEP 1 – Buka OneCompiler

Pilih HTML / CSS / JS
Gunakan satu file index.html

STEP 2 – KODE SIMULASI LOGIN (DATA DISIMPAN DI PROGRAM)

Salin UTUH kode ini:

<!DOCTYPE html>
<html>
<head>
  <title>Simulasi Portal Login</title>
  <style>
    body {
      font-family: Arial;
      background: #eef2f3;
    }
    .login-box {
      background: white;
      padding: 20px;
      width: 300px;
      border-radius: 10px;
    }
  </style>
</head>
<body>

  <div class="login-box">
    <h3>Portal Login</h3>

    <input type="text" id="user" placeholder="Username"><br><br>
    <input type="password" id="pass" placeholder="Password"><br><br>

    <button onclick="cekLogin()">Login</button>

    <p id="hasil"></p>
  </div>

  <script>
    // DATA TERSEMBUNYI (siswa tidak tahu)
    var database = [
      {username: "admin", password: "admin123"},
      {username: "guru", password: "guru2025"},
      {username: "siswa", password: "smkhebat"}
    ];

    function cekLogin() {
      var u = document.getElementById("user").value;
      var p = document.getElementById("pass").value;
      var ketemu = false;

      for (var i = 0; i < database.length; i++) {
        if (u == database[i].username && p == database[i].password) {
          ketemu = true;
          break;
        }
      }

      if (ketemu) {
        document.getElementById("hasil").innerHTML =
          "✅ Login berhasil!";
      } else {
        document.getElementById("hasil").innerHTML =
          "❌ Username atau password salah!";
      }
    }
  </script>

</body>
</html>

Klik Run ✅

STEP 3 – CARA DEMONSTRASI DI DEPAN KELAS

🎤 Narasi guru (contoh):

“Ibu juga tidak tahu username dan password.
Sistem akan mencari kecocokan di dalam program,
bukan kita yang menebak datanya.”

🔍 Yang bisa ditunjukkan:

Login salah → gagal
Login benar → berhasil
Data disimpan dalam array
Program memakai perulangan (for)

STEP 4 – KONSEP YANG DIPLAJARI SISWA

✔ Variabel
✔ Array / list data
✔ Percabangan if
✔ Perulangan for
✔ Logika pencocokan data
✔ Cara kerja sistem login

STEP 5 – SIMULASI “PENCARIAN DATA” (MODE DEBUG)

Untuk edukasi, ibu bisa tampilkan proses pencarian (opsional):

Ganti bagian dalam for jadi:

console.log("Mengecek data ke-" + i);

Lalu buka Console (Inspect → Console)

➡️ Siswa paham:

Sistem mengecek satu per satu data, bukan langsung tahu

🚫 YANG PERLU DITEKANKAN (PENTING)

❌ Ini bukan cracking
❌ Tidak mengajarkan pembobolan akun
✅ Ini simulasi internal sistem

🚀 PENGEMBANGAN TUGAS SISWA

Tambah 5 akun sendiri
Tambah batas gagal login (3x)
Buat login admin & siswa
Tambah halaman dashboard

Kalau ibu mau, saya bisa:

📘 Buatkan RPP Informatika berbasis simulasi login
📄 Buat LKPD langkah + pertanyaan HOTS
🧠 Naik level ke Python (Flask) versi backend

Tinggal bilang mau naik ke level mana 🔥

Tenang bu 😊 ini bingung yang wajar banget, justru pas buat bahan ngajarnya 👍
Saya jelaskan pelan + sangat teknis + step by step, tanpa lompat.

🎯 TUJUAN `console.log`

Baris ini hanya untuk melihat proses pencarian data,
tidak memengaruhi login.

Ibaratnya: guru mengintip “mesin sedang mikir apa”.

✅ POSISI YANG BENAR `console.log(...)`

console.log HARUS berada di dalam perulangan for
karena kita mau melihat setiap data yang dicek.

✅ KODE YANG BENAR (PERHATIKAN BLOK `for`)

Cari bagian ini di kode ibu:

for (var i = 0; i < database.length; i++) {
  if (u == database[i].username && p == database[i].password) {
    ketemu = true;
    break;
  }
}

✨ GANTI MENJADI SEPERTI INI:

for (var i = 0; i < database.length; i++) {

  console.log("Mengecek data ke-" + i);

  if (u == database[i].username && p == database[i].password) {
    ketemu = true;
    break;
  }
}

👉 Cuma nambah 1 baris, tidak ada yang dihapus.

🧪 CARA MELIHAT HASILNYA DI ONECOMPILER

Klik Run
Klik kanan halaman → Inspect
Pilih tab Console

📌 Saat login dicoba, akan muncul:

Mengecek data ke-0
Mengecek data ke-1
Mengecek data ke-2

➡️ Artinya:

Sistem mengecek data ke-0
Lalu ke-1
Lalu ke-2
Sampai ketemu / habis

🎓 CARA MENJELASKAN KE SISWA (PAKAI ANALOGI)

“Komputer itu seperti petugas keamanan.
Dia membuka kartu satu per satu,
sampai menemukan yang cocok.”

console.log = kamera CCTV sistem

❌ KESALAHAN YANG SERING TERJADI

🚫 Ditulis di luar for → tidak kelihatan proses
🚫 Ditulis di HTML → error
🚫 Ditulis tanpa tanda kutip

🔥 BONUS (LEBIH JELAS LAGI)

Kalau mau tampilkan username yang sedang dicek:

console.log(
  "Cek data ke-" + i + 
  " | username: " + database[i].username
);

🧩 KONSEP INFORMATIKA YANG DIDAPAT

✔ Perulangan
✔ Indeks array
✔ Proses pencarian data
✔ Debugging
✔ Cara berpikir komputasional

Kalau ibu mau, saya bisa:

📄 Buat LKPD khusus debugging & console
🎯 Buat soal HOTS dari kasus login ini
🧑‍💻 Naik level ke simulasi brute force (versi AMAN & EDUKATIF)

Tinggal bilang ya bu 😉

Siap 😊 saya tangkap maksudnya OneCompiler ya, bu 👍
(ketikannya sering kebalik, wajar 😄)

🌐 OneCompiler bisa dipakai untuk PROJEK APA SAJA di HTML?

Jawaban singkatnya: BANYAK dan sangat cocok untuk pembelajaran.
Di bawah ini saya susun bertingkat dari mudah → menantang, pas untuk projek siswa SMK.

🟢 LEVEL PEMULA (HTML SAJA)

Cocok untuk pengenalan & percaya diri siswa

Profil Diri / Profil Siswa
- Nama, foto, hobi, cita-cita
- Belajar <h1>, <p>, <img>
Halaman Biodata Kelas
- Daftar siswa satu kelas
- Tabel sederhana
Artikel / Blog Mini
- Artikel bebas (otomotif, hobi, islami)
- Struktur HTML rapi
Pengumuman Sekolah
- Info ujian, MPLS, PKL

🟡 LEVEL MENENGAH (HTML + CSS)

Mulai kelihatan “wah” tampilannya

Portal Login (Simulasi)
- Yang sudah ibu buat 👍
- Username & password simulasi
Website Bengkel Motor
- Profil bengkel
- Daftar layanan
- Kontak
Landing Page Produk
- Produk digital / sparepart motor
- Cocok dengan jurusan TBSM
Form Pendaftaran
- Pendaftaran lomba / ekskul
- Input teks, radio, checkbox

🟠 LEVEL LANJUT (HTML + CSS + JavaScript)

Ini favorit siswa 🚀

Kalkulator
- Tambah, kurang, kali, bagi
Absensi Siswa

Input nama
Tampil daftar hadir

Kuis Online

Soal pilihan ganda
Skor otomatis

To-Do List

Tambah & hapus tugas

Simulasi Sistem Informasi

Login
Dashboard
Data sederhana

🔵 LEVEL PROJEK SMK (RELEVAN DUNIA KERJA)

Simulasi Kasir

Pilih barang
Hitung total

Simulasi Servis Motor

Input keluhan
Output estimasi servis

Portal Informasi PKL

Data DU/DI
Jadwal & pengumuman

Dashboard Nilai (Offline)

Input nilai
Rata-rata otomatis

🧠 PROJEK BERBASIS P5 (KEKINIAN)

Cocok Kurikulum Merdeka

Website Edukasi Keamanan Digital
Website Literasi Lingkungan
Website Anti Bullying
Website Profil UMKM Lokal

✅ KENAPA ONECOMPILER COCOK?

✔ Tidak perlu install
✔ Bisa langsung Run
✔ Aman untuk sekolah
✔ Cocok Chromebook
✔ Fokus ke logika, bukan setup ribet

🎓 SARAN UNTUK IBU GURU

Untuk satu semester:

Minggu 1–2 → HTML dasar
Minggu 3–4 → CSS
Minggu 5–8 → Projek
Akhir → Presentasi projek

Kalau ibu mau, saya bisa:

📘 Rekomendasikan 1 projek terbaik sesuai kelas
📄 Buatkan RPP + LKPD projek HTML
🎯 Buat rubrik penilaian
🧑‍💻 Susun projek bertahap 4 pertemuan

Tinggal bilang:
👉 “Saya mau projek HTML untuk kelas …”

projek 18 ok

<!DOCTYPE html>

<html>

<head>

<title>Edukasi Keamanan Digital</title>

<style>

body {

font-family: Arial, sans-serif;

background: #f2f6f8;

padding: 20px;

}

.box {

background: white;

padding: 20px;

border-radius: 10px;

max-width: 500px;

}

h2 {

color: #2c3e50;

}

button {

padding: 10px;

margin-top: 10px;

}

label {

display: block;

margin: 5px 0;

}

</style>

</head>

<body>

<div class="box">

<h2>🔐 Edukasi Keamanan Digital</h2>

<p>

Keamanan digital adalah cara kita melindungi data pribadi

seperti password, nomor HP, dan akun media sosial.

</p>

<h3>🧪 Cek Kekuatan Password</h3>

<input type="password" id="password" placeholder="Masukkan password">

<br>

<button onclick="cekPassword()">Cek Password</button>

<p id="hasil"></p>

<hr>

<h3>☑️ Kebiasaan Aman Digital</h3>

<label>

<input type="checkbox" id="c1"> Tidak membagikan password

</label>

<label>

<input type="checkbox" id="c2"> Menggunakan password kuat

</label>

<label>

<input type="checkbox" id="c3"> Tidak klik link sembarangan

</label>

<button onclick="cekChecklist()">Cek Kebiasaan</button>

<p id="hasilChecklist"></p>

</div>

<script>

function cekPassword() {

var pass = document.getElementById("password").value;

var hasil = document.getElementById("hasil");

if (pass.length < 6) {

hasil.innerHTML = "❌ Password terlalu pendek";

} else {

hasil.innerHTML = "✅ Password cukup baik";

}

function cekChecklist() {

var aman = 0;

if (document.getElementById("c1").checked) aman++;

if (document.getElementById("c2").checked) aman++;

if (document.getElementById("c3").checked) aman++;

if (aman === 3) {

document.getElementById("hasilChecklist").innerHTML =

"✅ Kebiasaan digital kamu SUDAH AMAN";

} else {

document.getElementById("hasilChecklist").innerHTML =

"⚠️ Masih ada kebiasaan yang perlu diperbaiki";

}

</script>

</body>

</html>

Siap bu 👍
Saya sudah paham masalahnya: “tidak bisa di-ceklist” itu karena checkbox-nya memang belum ada / salah struktur (dan kodenya juga terpotong).

Kita bereskan pelan dan rapi, saya kasih versi KODE LENGKAP + BENAR yang:

✔ Bisa di-ceklist
✔ Ada interaksi (ada respon saat dicentang)
✔ Aman untuk edukasi keamanan digital

❗ PENYEBAB UTAMA TIDAK BISA DICENTANG

Belum ada <input type="checkbox">
Checklist harus berupa input, bukan hanya <li>
Kode JS untuk membaca checkbox belum ada
Kode ibu terpotong di <button onclick="cek

✅ VERSI KODE YANG SUDAH DIPERBAIKI (LENGKAP)

👉 Salin UTUH ke OneCompiler (index.html)

<!DOCTYPE html>
<html>
<head>
  <title>Edukasi Keamanan Digital</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f2f6f8;
      padding: 20px;
    }
    .box {
      background: white;
      padding: 20px;
      border-radius: 10px;
      max-width: 500px;
    }
    h2 {
      color: #2c3e50;
    }
    button {
      padding: 10px;
      margin-top: 10px;
    }
    label {
      display: block;
      margin: 5px 0;
    }
  </style>
</head>
<body>

<div class="box">
  <h2>🔐 Edukasi Keamanan Digital</h2>

  <p>
    Keamanan digital adalah cara kita melindungi data pribadi
    seperti password, nomor HP, dan akun media sosial.
  </p>

  <h3>🧪 Cek Kekuatan Password</h3>

  <input type="password" id="password" placeholder="Masukkan password">
  <br>
  <button onclick="cekPassword()">Cek Password</button>

  <p id="hasil"></p>

  <hr>

  <h3>☑️ Kebiasaan Aman Digital</h3>

  <label>
    <input type="checkbox" id="c1"> Tidak membagikan password
  </label>

  <label>
    <input type="checkbox" id="c2"> Menggunakan password kuat
  </label>

  <label>
    <input type="checkbox" id="c3"> Tidak klik link sembarangan
  </label>

  <button onclick="cekChecklist()">Cek Kebiasaan</button>

  <p id="hasilChecklist"></p>
</div>

<script>
function cekPassword() {
  var pass = document.getElementById("password").value;
  var hasil = document.getElementById("hasil");

  if (pass.length < 6) {
    hasil.innerHTML = "❌ Password terlalu pendek";
  } else {
    hasil.innerHTML = "✅ Password cukup baik";
  }
}

function cekChecklist() {
  var aman = 0;

  if (document.getElementById("c1").checked) aman++;
  if (document.getElementById("c2").checked) aman++;
  if (document.getElementById("c3").checked) aman++;

  if (aman === 3) {
    document.getElementById("hasilChecklist").innerHTML =
      "✅ Kebiasaan digital kamu SUDAH AMAN";
  } else {
    document.getElementById("hasilChecklist").innerHTML =
      "⚠️ Masih ada kebiasaan yang perlu diperbaiki";
  }
}
</script>

</body>
</html>

🧪 HASIL YANG AKAN IBU LIHAT

Checkbox bisa dicentang
Tombol Cek Kebiasaan bekerja
Muncul pesan edukatif

🎓 CARA MENJELASKAN KE SISWA (1 KALIMAT)

“Komputer membaca apakah kotak dicentang atau tidak,
bukan menilai dari perasaan.”

🧠 KONSEP INFORMATIKA YANG DIDAPAT

✔ Input checkbox
✔ Logika kondisi (checked)
✔ Literasi keamanan digital
✔ UI interaktif
✔ Computational thinking

🌱 PENGEMBANGAN LANJUT (OPSIONAL)

Tambah skor (0–100)
Tambah warna hijau/merah
Tambah pertanyaan phishing
Jadikan projek P5

Kalau ibu mau, saya bisa:

📄 Buat LKPD dari kode ini
📘 Buat RPP projek keamanan digital
🎯 Buat rubrik penilaian

Tinggal bilang ya bu, kita lanjutkan pelan-pelan 👌

Siap bu 👍
Ini PROJEK WEBSITE ANTI BULLYING yang aman, edukatif, cocok P5, dan langsung bisa dijalankan di OneCompiler (HTML + CSS + JS).

Saya buat 1 halaman interaktif + simulasi edukasi, bukan curhat atau hal sensitif.

🌐 PROJEK: WEBSITE ANTI BULLYING

Tema: Sekolah Aman & Beretika Digital
Target: SMP / SMK
Platform: OneCompiler (Chromebook friendly)

🎯 TUJUAN PROJEK

Siswa mampu:

Memahami apa itu bullying
Mengenali contoh bullying
Menentukan sikap yang benar
Membuat website edukatif sederhana

🧩 FITUR WEBSITE

✅ Informasi anti bullying
✅ Checklist sikap (interaktif)
✅ Pesan edukatif otomatis
✅ Cocok demo & tugas projek

✅ LANGKAH 1 — Buka OneCompiler

Pilih HTML / CSS / JS
Gunakan satu file: index.html

✅ LANGKAH 2 — SALIN KODE DI BAWAH (UTUH)

<!DOCTYPE html>
<html>
<head>
  <title>Website Anti Bullying</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f6f8;
      padding: 20px;
    }
    .box {
      background: white;
      padding: 20px;
      border-radius: 12px;
      max-width: 600px;
    }
    h2 {
      color: #2c3e50;
    }
    h3 {
      color: #2980b9;
    }
    label {
      display: block;
      margin: 6px 0;
    }
    button {
      margin-top: 10px;
      padding: 10px;
    }
  </style>
</head>
<body>

<div class="box">
  <h2>🛑 Website Anti Bullying</h2>

  <p>
    Bullying adalah tindakan menyakiti orang lain secara sengaja,
    baik secara fisik, verbal, maupun digital.
  </p>

  <h3>🚫 Contoh Bullying</h3>
  <ul>
    <li>Mengejek teman</li>
    <li>Menyebarkan rumor</li>
    <li>Mengucilkan teman</li>
    <li>Bullying di media sosial</li>
  </ul>

  <h3>☑️ Sikap Anti Bullying</h3>

  <label>
    <input type="checkbox" id="s1"> Tidak mengejek teman
  </label>
  <label>
    <input type="checkbox" id="s2"> Menolong teman yang dibully
  </label>
  <label>
    <input type="checkbox" id="s3"> Melapor ke guru
  </label>
  <label>
    <input type="checkbox" id="s4"> Menghargai perbedaan
  </label>

  <button onclick="cekSikap()">Cek Sikap</button>

  <p id="hasil"></p>
</div>

<script>
function cekSikap() {
  var skor = 0;

  if (document.getElementById("s1").checked) skor++;
  if (document.getElementById("s2").checked) skor++;
  if (document.getElementById("s3").checked) skor++;
  if (document.getElementById("s4").checked) skor++;

  if (skor >= 3) {
    document.getElementById("hasil").innerHTML =
      "✅ Kamu sudah memiliki sikap ANTI BULLYING";
  } else {
    document.getElementById("hasil").innerHTML =
      "⚠️ Ayo tingkatkan sikap anti bullying kamu";
  }
}
</script>

</body>
</html>

➡️ Klik Run
➡️ Checklist bisa dicentang
➡️ Tombol berfungsi

🎓 CARA DEMO DI KELAS (5–10 MENIT)

Jelaskan apa itu bullying
Centang beberapa sikap
Klik Cek Sikap
Diskusikan hasilnya

🧠 KONSEP INFORMATIKA YANG DIDAPAT

✔ HTML struktur
✔ CSS tampilan
✔ JavaScript logika
✔ Input checkbox
✔ Literasi karakter & etika digital

🏫 COCOK UNTUK

Informatika
BK
P5 (Suara Demokrasi / Bhinneka Tunggal Ika)
MPLS

🌱 PENGEMBANGAN TUGAS SISWA

Siswa bisa diminta:

Menambah contoh bullying
Mengganti desain
Menambah halaman “Laporkan”
Menambah skor & grafik

❗ CATATAN KEAMANAN

✅ Tidak ada konten sensitif
✅ Tidak mengandung curhat pribadi
✅ Edukatif & preventif

Kalau ibu mau, saya bisa lanjutkan:

📄 RPP Projek Website Anti Bullying
📘 LKPD langkah siswa
🎯 Rubrik penilaian
🌐 Versi 2–3 halaman website

Tinggal bilang:
👉 “Lanjutkan ke …”

rakit rc https://www.youtube.com/watch?v=-lz_7jHbyJU

https://onecompiler.com/html/44bsvq322

🎯 TUJUAN SIMULASI

🔐 SIMULASI PORTAL LOGIN “DATA TERSEMBUNYI”

STEP 1 – Buka OneCompiler

STEP 2 – KODE SIMULASI LOGIN (DATA DISIMPAN DI PROGRAM)

STEP 3 – CARA DEMONSTRASI DI DEPAN KELAS

🎤 Narasi guru (contoh):

🔍 Yang bisa ditunjukkan:

STEP 4 – KONSEP YANG DIPLAJARI SISWA

STEP 5 – SIMULASI “PENCARIAN DATA” (MODE DEBUG)

🚫 YANG PERLU DITEKANKAN (PENTING)

🚀 PENGEMBANGAN TUGAS SISWA

🎯 TUJUAN console.log

✅ POSISI YANG BENAR console.log(...)

✅ KODE YANG BENAR (PERHATIKAN BLOK for)

✨ GANTI MENJADI SEPERTI INI:

🧪 CARA MELIHAT HASILNYA DI ONECOMPILER

🎓 CARA MENJELASKAN KE SISWA (PAKAI ANALOGI)

❌ KESALAHAN YANG SERING TERJADI

🔥 BONUS (LEBIH JELAS LAGI)

🧩 KONSEP INFORMATIKA YANG DIDAPAT

🌐 OneCompiler bisa dipakai untuk PROJEK APA SAJA di HTML?

🟢 LEVEL PEMULA (HTML SAJA)

🟡 LEVEL MENENGAH (HTML + CSS)

🟠 LEVEL LANJUT (HTML + CSS + JavaScript)

🔵 LEVEL PROJEK SMK (RELEVAN DUNIA KERJA)

🧠 PROJEK BERBASIS P5 (KEKINIAN)

✅ KENAPA ONECOMPILER COCOK?

🎓 SARAN UNTUK IBU GURU

❗ PENYEBAB UTAMA TIDAK BISA DICENTANG

✅ VERSI KODE YANG SUDAH DIPERBAIKI (LENGKAP)

🧪 HASIL YANG AKAN IBU LIHAT

🎓 CARA MENJELASKAN KE SISWA (1 KALIMAT)

🧠 KONSEP INFORMATIKA YANG DIDAPAT

🌱 PENGEMBANGAN LANJUT (OPSIONAL)

🌐 PROJEK: WEBSITE ANTI BULLYING

🎯 TUJUAN PROJEK

🧩 FITUR WEBSITE

✅ LANGKAH 1 — Buka OneCompiler

✅ LANGKAH 2 — SALIN KODE DI BAWAH (UTUH)

🎓 CARA DEMO DI KELAS (5–10 MENIT)

🧠 KONSEP INFORMATIKA YANG DIDAPAT

🏫 COCOK UNTUK

🌱 PENGEMBANGAN TUGAS SISWA

❗ CATATAN KEAMANAN

Posting Komentar

Formulir Kontak

🎯 TUJUAN `console.log`

✅ POSISI YANG BENAR `console.log(...)`

✅ KODE YANG BENAR (PERHATIKAN BLOK `for`)