Cara Membuat Chatbot AI Sederhana menggunakan logika if dan else untuk jadwal pelajaran (HTML + JavaScript)
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
- Copy kode di atas
- Simpan sebagai chatbot.html
- 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
Komentar
Posting Komentar