Langsung ke konten utama

Cara Membuat Chatbot AI Sederhana menggunakan logika if dan else untuk jadwal pelajaran (HTML + JavaScript)

Oleh

Cara Membuat Chatbot AI Sederhana untuk Jadwal Pelajaran Siswa (HTML + JavaScript)

Meta Deskripsi: Belajar membuat chatbot AI sederhana untuk siswa SMA menggunakan HTML, CSS, dan JavaScript. Cocok untuk pemula dan project informatika.

🤖 Apa Itu Chatbot AI?

Chatbot adalah program komputer yang mampu menerima pesan dari pengguna dan memberikan respon otomatis. Teknologi ini banyak digunakan pada website, aplikasi belajar, dan layanan pelanggan.

🎯 Tujuan Pembelajaran

  • Memahami algoritma dan logika pemrograman
  • Belajar dasar kecerdasan buatan (AI)
  • Membuat project berbasis web

💡 Konsep AI yang Digunakan

Chatbot ini menggunakan metode sederhana:

  • Keyword Matching → mendeteksi kata penting
  • Rule-Based System → memberikan respon sesuai aturan

Contoh: Jika user mengetik “jadwal senin”, maka chatbot akan menampilkan jadwal hari Senin.

🌐 Kode Chatbot AI Sekolah

Salin kode berikut dan simpan sebagai chatbot.html

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Chatbot AI Sekolah</title>

<style>
body {
  font-family: Arial, sans-serif;
  background: #f4f6f9;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.chat-container {
  width: 360px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  padding: 15px;
}

h2 { text-align: center; }

#chatbox {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
}

.bot { color: blue; }
.user { color: green; text-align: right; }

input { width: 70%; padding: 8px; }

button {
  width: 25%;
  padding: 8px;
  background: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}
</style>
</head>

<body>

<div class="chat-container">
<h2>🤖 AI Sekolah</h2>

<div id="chatbox">
<div class="bot">Bot: Halo! Ketik hari (senin-sabtu)</div>
</div>

<input type="text" id="input" placeholder="Tulis pesan...">
<button onclick="chat()">Kirim</button>
</div>

<script>
function chat() {
  let input = document.getElementById("input");
  let pesan = input.value.toLowerCase();
  let chatbox = document.getElementById("chatbox");

  if (pesan === "") return;

  chatbox.innerHTML += "<div class='user'>Kamu: " + pesan + "</div>";

  let response = "";

  const jadwal = {
    senin: [
      "07.00-08.30 Matematika (Bu Iren)",
      "08.30-10.00 Bahasa Indonesia (Pak Fauzan)",
      "10.15-11.45 Informatika (Bu Rahel)"
    ],
    selasa: [
      "07.00-08.30 Bahasa Inggris (Bu Irma)",
      "08.30-10.00 Fisika (Pak Ridwan)",
      "10.15-11.45 Kimia (Bu Cia)"
    ],
    rabu: [
      "07.00-08.30 Biologi (Bu Misel)",
      "08.30-10.00 Matematika (Bu Aurel)",
      "10.15-11.45 Sejarah (Pak Rasya)"
    ],
    kamis: [
      "07.00-08.30 Geografi (Pak Arif)",
      "08.30-10.00 Ekonomi (Bu Maura)",
      "10.15-11.45 Informatika (Bu Aulia )"
    ],
    jumat: [
      "07.00-08.30 Agama (Pak Petrik)",
      "08.30-10.00 Bahasa Indonesia (Pak Steward)",
      "10.15-11.00 Olahraga (Pak Alif)"
    ],
    sabtu: [
      "07.00-08.30 Seni Budaya (Bu Anin)",
      "08.30-10.00 Prakarya (Pak Andre)"
    ]
  };

  if (pesan.includes("halo")) {
    response = "Halo juga 😊";
  } 
  else if (jadwal[pesan]) {
    response = "Jadwal hari " + pesan + ":
" + jadwal[pesan].join("
");
  } 
  else if (pesan.includes("jadwal")) {
    response = "Ketik nama hari (senin-sabtu)";
  } 
  else if (pesan.includes("guru")) {
    response = "Guru Informatika adalah Bu Faisy 😊";
  } 
  else {
    response = "Maaf, saya belum mengerti 😅";
  }

  chatbox.innerHTML += "<div class='bot'>Bot: " + response + "</div>";
  input.value = "";
}
</script>

</body>
</html>

🚀 Cara Menjalankan

  1. Copy kode di atas
  2. Simpan sebagai chatbot.html
  3. Buka di browser

🎓 Tugas Siswa

  • Ubah jadwal sesuai jadwal pelajaranmu di kelas

🔥 Kesimpulan

Membuat chatbot AI sederhana membantu siswa memahami dasar pemrograman dan kecerdasan buatan dengan cara yang menyenangkan dan praktis. Semoga bermanfaat

Label:

Komentar

Posting Komentar