BUKA di broser

1.masukan kode berikut secara manual

<!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 ✅

Siap 👍
Saya terjemahkan maksud kode ini ke bahasa sederhana, cocok untuk penjelasan ke siswa SMK.

1️⃣ Bagian Awal HTML

<!DOCTYPE html>
<html>

Artinya:
Memberi tahu browser bahwa ini adalah dokumen HTML dan harus dibaca sebagai halaman web.

2️⃣ Bagian `<head>`

<head>
  <title>Simulasi Portal Login</title>

Artinya:
Judul halaman web. Tulisan ini muncul di tab browser.

🎨 CSS (Tampilan)

<style>
  body {
    font-family: Arial;
    background: #eef2f3;
  }

Artinya:

Huruf menggunakan Arial
Warna latar belakang halaman abu-abu muda

.login-box {
  background: white;
  padding: 20px;
  width: 300px;
  border-radius: 10px;
}

Artinya:

Kotak login berwarna putih
Jarak isi ke tepi 20px
Lebar kotak 300px
Sudut kotak dibuat membulat

3️⃣ Bagian Tampilan Login

<div class="login-box">

Artinya:
Membuat kotak login.

<h3>Portal Login</h3>

Judul tulisan Portal Login.

Input Username & Password

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

Artinya:

Kolom untuk mengetik username
Kolom untuk mengetik password
id dipakai JavaScript untuk membaca isinya

Tombol Login

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

Artinya:

Saat tombol diklik, fungsi cekLogin() dijalankan

Tempat Menampilkan Hasil

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

Artinya:
Tempat menampilkan pesan:

4️⃣ Bagian JavaScript (Otak Program)

Data Login (Database Palsu)

var database = [
  {username: "admin", password: "admin123"},
  {username: "guru", password: "guru2025"},
  {username: "siswa", password: "smkhebat"}
];

Artinya:

Ini data login simulasi
Disimpan di dalam JavaScript
Bukan database asli
Dipakai untuk latihan belajar saja

5️⃣ Fungsi cekLogin()

function cekLogin() {

Artinya:
Fungsi yang dijalankan saat tombol Login diklik.

Ambil Data Input

var u = document.getElementById("user").value;
var p = document.getElementById("pass").value;

Artinya:

Mengambil teks username dan password yang diketik user

Proses Pengecekan

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

Artinya:
Program mengecek satu per satu isi database.

if (u == database[i].username && p == database[i].password)

Artinya:
Jika username dan password cocok, maka login dianggap benar.

Hasil Login

if (ketemu) {
  "✅ Login berhasil!"
} else {
  "❌ Username atau password salah!"
}

Artinya:

Jika data cocok → Login berhasil
Jika tidak cocok → Login gagal

6️⃣ KESIMPULAN MAKSUD PROGRAM

💡 Program ini adalah simulasi sistem login sederhana, bertujuan untuk:

Belajar HTML (tampilan)
Belajar CSS (desain)
Belajar JavaScript (logika & percabangan)
Bukan sistem login sungguhan

⚠️ CATATAN PENTING UNTUK SISWA

Ini TIDAK AMAN untuk login asli karena:

Password terlihat di kode
Tidak ada server
Hanya simulasi pembelajaran

➡️ Cocok untuk materi:

Dasar web
Logika pemrograman
Keamanan digital (kenapa login asli harus pakai backend)

Kalau mau, saya bisa:

📘 Buatkan versi penjelasan per baris untuk modul ajar
📝 Buat soal essay & praktik dari kode ini
🔐 Kembangkan ke login dengan halaman berpindah
🎓 Sesuaikan dengan CP Informatika SMK

Tinggal bilang mau dipakai untuk kelas berapa 👍

=========================================================================

KISI _KISI

Berikut Kisi-Kisi Soal Informatika berdasarkan 35 soal pilihan ganda dan 5 soal essay yang Bapak/Ibu buat untuk kelas X SMK.

📘 KISI-KISI SOAL INFORMATIKA

Mata Pelajaran : Informatika
Kelas : X SMK
Bentuk Soal : Pilihan Ganda & Essay

📝 A. Kisi-Kisi Pilihan Ganda

No	Materi	Indikator Soal	Level Kognitif
1	Pengertian Informatika	Siswa dapat menjelaskan definisi informatika	C1
2	Komponen Sistem Komputer	Siswa dapat mengidentifikasi perangkat keras	C1
3	Perangkat Input	Siswa dapat menentukan contoh perangkat input	C2
4	Perangkat Output	Siswa dapat menentukan perangkat output	C2
5	CPU	Siswa dapat mengidentifikasi fungsi CPU	C2
6	Sistem Operasi	Siswa dapat menyebutkan contoh sistem operasi	C1
7	RAM	Siswa dapat menjelaskan fungsi RAM	C2
8	Media Penyimpanan	Siswa dapat mengidentifikasi penyimpanan permanen	C2
9	Brainware	Siswa dapat menjelaskan pengertian brainware	C1
10	Bahasa Pemrograman	Siswa memahami fungsi bahasa pemrograman	C2
11	Bahasa Pemrograman	Siswa dapat menyebutkan contoh bahasa pemrograman	C1
12	Algoritma	Siswa memahami konsep algoritma	C2
13	Flowchart	Siswa memahami fungsi flowchart	C2
14	Jaringan Komputer	Siswa memahami pengertian jaringan	C1
15	LAN	Siswa memahami cakupan LAN	C2
16	Internet	Siswa memahami pengertian internet	C1
17	Perangkat Jaringan	Siswa dapat mengidentifikasi perangkat jaringan	C2
18	Modem	Siswa memahami fungsi modem	C2
19	Virus Komputer	Siswa memahami dampak virus	C2
20	Antivirus	Siswa memahami fungsi antivirus	C2
21	Ekstensi File	Siswa dapat mengenali ekstensi dokumen	C1
22	Aplikasi Pengolah Angka	Siswa dapat mengidentifikasi software spreadsheet	C2
23	Aplikasi Presentasi	Siswa dapat mengidentifikasi software presentasi	C2
24	Topologi Jaringan	Siswa mengenali topologi ring	C2
25	IP Address	Siswa memahami fungsi IP Address	C2
26	Cloud Computing	Siswa memahami konsep cloud computing	C2
27	Email	Siswa mengenali layanan email	C1
28	Perangkat Output	Siswa mengidentifikasi perangkat output suara	C2
29	Backup Data	Siswa memahami tujuan backup	C2
30	Keamanan Password	Siswa memahami karakteristik password kuat	C3
31	HTML	Siswa memahami fungsi HTML	C2
32	Database	Siswa memahami fungsi database	C2
33	Sistem Bilangan	Siswa memahami bilangan biner	C1
34	Shortcut Keyboard	Siswa mengetahui fungsi shortcut	C1
35	Etika Internet	Siswa memahami konsep netiket	C2

📝 B. Kisi-Kisi Soal Essay

No	Materi	Indikator Soal	Level Kognitif
1	Sistem Komputer	Siswa dapat menjelaskan perbedaan hardware, software, dan brainware serta memberi contoh	C2
2	CPU	Siswa dapat menjelaskan fungsi dan bagian CPU	C2–C3
3	Algoritma	Siswa dapat menjelaskan pengertian algoritma dan membuat contoh langkah-langkah	C3
4	Jaringan	Siswa dapat membandingkan LAN dan Internet	C3
5	Keamanan Data	Siswa dapat menjelaskan pentingnya keamanan data dan cara menjaganya	C3

🎯 C. Distribusi Level Kognitif

C1 (Mengingat) : 12 Soal
C2 (Memahami) : 18 Soal
C3 (Menerapkan/Menganalisis Sederhana) : 5 Soal

INFORMATIKA

1️⃣ Bagian Awal HTML

2️⃣ Bagian `<head>`

🎨 CSS (Tampilan)

3️⃣ Bagian Tampilan Login

Input Username & Password

Tombol Login

Tempat Menampilkan Hasil

4️⃣ Bagian JavaScript (Otak Program)

Data Login (Database Palsu)

5️⃣ Fungsi cekLogin()

Ambil Data Input

Proses Pengecekan

Hasil Login

6️⃣ KESIMPULAN MAKSUD PROGRAM

⚠️ CATATAN PENTING UNTUK SISWA

📘 KISI-KISI SOAL INFORMATIKA

📝 A. Kisi-Kisi Pilihan Ganda

📝 B. Kisi-Kisi Soal Essay

🎯 C. Distribusi Level Kognitif

Posting Komentar

Formulir Kontak

INFORMATIKA

1️⃣ Bagian Awal HTML

2️⃣ Bagian <head>

🎨 CSS (Tampilan)

3️⃣ Bagian Tampilan Login

Input Username & Password

Tombol Login

Tempat Menampilkan Hasil

4️⃣ Bagian JavaScript (Otak Program)

Data Login (Database Palsu)

5️⃣ Fungsi cekLogin()

Ambil Data Input

Proses Pengecekan

Hasil Login

6️⃣ KESIMPULAN MAKSUD PROGRAM

⚠️ CATATAN PENTING UNTUK SISWA

📘 KISI-KISI SOAL INFORMATIKA

📝 A. Kisi-Kisi Pilihan Ganda

📝 B. Kisi-Kisi Soal Essay

🎯 C. Distribusi Level Kognitif

Posting Komentar

Formulir Kontak

2️⃣ Bagian `<head>`