KOMBIT, atau Komunitas Belajar IT, adalah sebuah organisasi ekstrakurikuler yang berdiri di SMAN 1 Ciampel dengan misi besar untuk membekali siswa-siswi dengan kemampuan teknologi informasi yang relevan di era digital. Kami menyadari bahwa sekolah bukan hanya tempat untuk belajar teori, tetapi juga tempat untuk mengasah keterampilan teknis yang bisa langsung diterapkan di dunia nyata.
Komunitas ini dirancang sebagai tempat bagi siapa saja yang memiliki rasa ingin tahu tinggi terhadap teknologi, tanpa memandang latar belakang jurusan. Di sini, setiap anggota didorong untuk bereksplorasi, mulai dari hal yang paling dasar hingga tingkat lanjut melalui kolaborasi antar siswa dan bimbingan guru pembimbing yang ahli di bidangnya.
Kami menerapkan metode belajar yang santai namun tetap terarah, di mana setiap anggota dibebaskan untuk fokus pada bidang IT yang paling mereka sukai. Dengan suasana belajar yang kekeluargaan, KOMBIT menjadi rumah kedua bagi para siswa untuk berbagi ide kreatif dan memecahkan berbagai tantangan teknologi bersama-sama.
Lebih dari sekadar belajar komputer, KOMBIT bertujuan menciptakan generasi kreator, bukan sekadar pengguna. Kami ingin siswa SMAN 1 Ciampel mampu berinovasi dan bersaing dalam perkembangan teknologi yang sangat cepat, sehingga siap menghadapi masa depan dengan kepercayaan diri yang tinggi.
Terwujudnya komunitas belajar yang inovatif, kreatif, and unggul di bidang teknologi informasi guna mencetak generasi digital yang kompeten dan berintegritas.
"Jangan takut untuk memulai. Setiap ahli berawal dari seorang pemula yang tidak pernah berhenti mencoba. Di KOMBIT, kita tumbuh bersama teknologi!"
— Salam KOMBIT TeamHalaman ini hanya bisa diakses oleh anggota terdaftar. Silahkan login untuk melihat tugas.
Halaman ini hanya bisa diakses oleh anggota terdaftar. Silahkan login untuk mengirimkan tugas Anda.
Pilih jenis tugas di bawah ini untuk menuju ke formulir pengiriman berkas.
Kirimkan berkas atau hasil pengerjaan dokumen Surat Lamaran Pekerjaan Anda di sini.
Buka FormulirKirimkan tabel pengerjaan spreadsheet data Excel Pemesanan Barang di sini.
Buka FormulirKirimkan dokumen format teks atau hasil administrasi Surat Dinas Anda di sini.
Buka FormulirSalin template Firebase Realtime Database Login di bawah ini untuk digunakan di project Anda.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Firebase RTDB Login Test</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, sans-serif; }
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #111827; color: white; }
.container { width: 90%; max-width: 400px; background: #1f2937; padding: 30px; border-radius: 16px; box-shadow: 0 15px 40px rgba(0,0,0,.35); }
h1 { text-align: center; margin-bottom: 8px; }
.subtitle { text-align: center; color: #9ca3af; margin-bottom: 25px; font-size: 14px; }
.form-group { margin-bottom: 16px; }
label { display: block; margin-bottom: 7px; font-size: 14px; }
input { width: 100%; padding: 12px; border: 1px solid #374151; border-radius: 8px; background: #111827; color: white; outline: none; }
input:focus { border-color: #60a5fa; }
button { width: 100%; padding: 12px; border: none; border-radius: 8px; background: #2563eb; color: white; font-weight: bold; cursor: pointer; margin-top: 5px; }
button:hover { background: #1d4ed8; }
#status { margin-top: 18px; padding: 12px; border-radius: 8px; display: none; font-size: 14px; line-height: 1.5; }
.success { display: block !important; background: #064e3b; color: #a7f3d0; }
.error { display: block !important; background: #7f1d1d; color: #fecaca; }
.info { display: block !important; background: #1e3a8a; color: #bfdbfe; }
.user-box { margin-top: 20px; padding: 15px; background: #111827; border-radius: 10px; display: none; }
.user-box p { margin: 6px 0; color: #d1d5db; }
.logout { background: #dc2626; margin-top: 15px; }
.logout:hover { background: #b91c1c; }
</style>
</head>
<body>
<div class="container">
<h1>Login Test</h1>
<p class="subtitle">Firebase Realtime Database</p>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Masukkan username" >
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Masukkan password" >
</div>
<button id="loginBtn"> Login </button>
<div id="status"></div>
<div class="user-box" id="userBox">
<p><strong>Login berhasil!</strong></p>
<p>Username: <span id="loggedUsername"></span></p>
<button class="logout" id="logoutBtn"> Logout </button>
</div>
</div>
<!-- Firebase SDK -->
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/12.1.0/firebase-app.js";
import { getDatabase, ref, get, child } from "https://www.gstatic.com/firebasejs/12.1.0/firebase-database.js";
// ==========================================
// FIREBASE CONFIG
// GANTI DENGAN CONFIG FIREBASE MILIK KAMU
// ==========================================
const firebaseConfig = {
apiKey: "MASUKKAN_API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
databaseURL: "https://PROJECT_ID-default-rtdb.asia-southeast1.firebasedatabase.app",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.firebasestorage.app",
messagingSenderId: "MESSAGING_SENDER_ID",
appId: "APP_ID"
};
// ==========================================
// INITIALIZE FIREBASE
// ==========================================
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);
// ==========================================
// ELEMENT
// ==========================================
const usernameInput = document.getElementById("username");
const passwordInput = document.getElementById("password");
const loginBtn = document.getElementById("loginBtn");
const logoutBtn = document.getElementById("logoutBtn");
const status = document.getElementById("status");
const userBox = document.getElementById("userBox");
const loggedUsername = document.getElementById("loggedUsername");
// ==========================================
// STATUS MESSAGE
// ==========================================
function showStatus(message, type) {
status.textContent = message;
status.className = type;
}
// ==========================================
// LOGIN
// ==========================================
loginBtn.addEventListener("click", async () => {
const username = usernameInput.value.trim();
const password = passwordInput.value.trim();
if (!username || !password) {
showStatus("Username dan password wajib diisi.", "error");
return;
}
showStatus("Memeriksa data...", "info");
try {
/* Struktur database yang diharapkan:
users
user001
username: "admin"
password: "12345"
user002
username: "mustofa"
password: "abc123"
*/
const dbRef = ref(database);
const snapshot = await get(child(dbRef, "users"));
if (!snapshot.exists()) {
showStatus("Data users tidak ditemukan di database.", "error");
return;
}
const users = snapshot.val();
let foundUser = null;
for (const id in users) {
const user = users[id];
if (user.username === username && user.password === password) {
foundUser = user;
break;
}
}
if (foundUser) {
showStatus("Login berhasil.", "success");
loggedUsername.textContent = foundUser.username;
userBox.style.display = "block";
loginBtn.style.display = "none";
usernameInput.disabled = true;
passwordInput.disabled = true;
// Simpan status login sementara
sessionStorage.setItem("loggedUser", foundUser.username);
} else {
showStatus("Username atau password salah.", "error");
}
} catch (error) {
console.error(error);
showStatus("Gagal terhubung ke Firebase: " + error.message, "error");
}
});
// ==========================================
// LOGOUT
// ==========================================
logoutBtn.addEventListener("click", () => {
sessionStorage.removeItem("loggedUser");
userBox.style.display = "none";
loginBtn.style.display = "block";
usernameInput.disabled = false;
passwordInput.disabled = false;
usernameInput.value = "";
passwordInput.value = "";
status.style.display = "none";
});
// ==========================================
// CEK SESSION
// ==========================================
const savedUser = sessionStorage.getItem("loggedUser");
if (savedUser) {
loggedUsername.textContent = savedUser;
userBox.style.display = "block";
loginBtn.style.display = "none";
usernameInput.disabled = true;
passwordInput.disabled = true;
}
</script>
</body>
</html>Akses member telah dibuka. Selamat belajar!