Minggu, 31 Agustus 2025
Selasa, 26 Agustus 2025
Canva Google Site
Buatkan sebuah website sekolah modern, elegan, dan informatif untuk "SMAN 2 Depok", sebuah Sekolah Menengah Atas Negeri di Indonesia. Halaman utama harus memiliki tampilan pembuka (hero section) dengan gambar berkualitas tinggi gedung sekolah, logo sekolah, dan slogan: "Unggul dalam Prestasi, Berkarakter dalam Budaya".
Tampilkan bagian-bagian berikut di halaman utama:
1. Tentang Sekolah – Berisi sejarah singkat, visi, dan misi SMAN 2 Depok.
2. Berita Terbaru – Ruang untuk 3 berita atau kegiatan terbaru sekolah.
3. Sambutan Kepala Sekolah – Ucapan selamat datang dari Kepala Sekolah.
4. Program Akademik – Deskripsi singkat jurusan IPA, IPS, dan Bahasa.
5. Fasilitas – Tampilkan gambar dan keterangan laboratorium, perpustakaan, masjid, aula, dan ruang multimedia.
6. Ekstrakurikuler – Sorot kegiatan Pramuka, OSIS, PMR, Paskibra, dan klub seni.
7. Prestasi Sekolah – Galeri atau slideshow penghargaan di bidang akademik, olahraga, dan seni.
8. Testimoni – Kutipan dari siswa dan alumni tentang pengalaman di SMAN 2 Depok.
9. Hubungi Kami – Alamat sekolah, peta lokasi, nomor telepon, email, dan formulir kontak sederhana.
Gaya desain: bersih, minimalis, dan berjiwa muda. Gunakan palet warna khas SMAN 2 Depok (biru dan putih) dengan animasi halus. Sertakan tombol-tombol ajakan bertindak (CTA) seperti “Daftar Sekarang”, “Lihat Prestasi”, dan “Hubungi Kami”
buat image slider di bagian home page bagian header dengan image berikut : https://sman2depok.sch.id/wp-content/uploads/2022/08/FOTO-UNTUK-WEB-SMADA-2.png https://sman2depok.sch.id/wp-content/uploads/2022/08/FOTO-UNTUK-WEB-SMADA.png https://sman2depok.sch.id/wp-content/uploads/2022/08/FOTO-UNTUK-WEB-SMADA-1.png
tampilkan foto kepala sekolah https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGqsyUYUiR51MHBmRJbcshLQtyt2tfkFtEolb5Cx0hJvR1Fw8r4w-7ZdNVTQYQ6Ab8tw3ClYdfrZnHk0h9osFSkXcKD0BPsGpnS6QsZOWOHnVNxNQ7G_7wKf6ERGVRQvqDZ0X8OBGj91BNbYVFex2Kju9BZfD_YASD2mV6YFzEVmyx_dEiBTQmfvSWGWg/s320/wawan%20ridwan.png pada bagian sambutan kepala sekolah
ganti peta lokasi dengan embed google maps berikut : https://maps.app.goo.gl/KPwJYyD9qsaW5Zyu8, untuk foto perpustakaan bisa menggunakan image : https://lh6.googleusercontent.com/zvD36ids1pXoSJ-93G4gRfByualT2OhKIG2rAuF508dY27_OjcsuLBUjHvxG6bUEVFeC20HG84Kbm5Wr5oqtGxaiOG3u4jiF641NwXwZwsojTR_fZigipMQZuHaNmqZlKYXApKg_, Labolatorium : https://lh6.googleusercontent.com/yMJ3zOxhoaZP6FBmQA7jqXZERbBAKPZvhyupPUA2KFubeDOvEVzXF44YczHXHjQWQFP5tOoV8uIbxhHVnflnZOwkWrSJ2O_VCgtVzWQmIYydkA74YNWkWzshgBnsyHv5IeHvneY, masjid : https://lh6.googleusercontent.com/tHHd40JkRfLdeIjgQs5ZWWLvNgzXdeD35qIUrZQTn7tfMP_yoPLCeaAyl_6PABzeP5XX7xxkKTO3z49aZwU7vUfx6QSJPQE7XSX3uc7H8XdOPRiZeNUe74mjhYKwTWlbtgGhGh7O, multiguna : https://sman2depok.sch.id/wp-content/uploads/2022/03/image.png, lapangan : https://lh4.googleusercontent.com/s_BPj-TaCI6f-ix3Xc8nAXSdBH2f9imcleoft8GqAuLJqI6teJf1V-ahb4Ytmkx1JpVeXQEanqCFaBHtItF3YPEEWGKRxAlKtiLXp27gx-83Bud3kbqCV9Wqx9tPUG7cf3bMiKF7, multimedia : https://lh3.googleusercontent.com/h3tdm2Gsm2Wg2UC_yHcxm7ZTFjWCeBF5_HFCi6SaFaSBYIUzvAlE7tWTvTZtU6xzHVz8ZA2wVu3v3bAo1z-RLbS1CybZWXL92JSPjmqR5QpbIy_6VI1Fw7R8B5927e1Bc5Bc1crf
Form HTML SpreadSheet
- https://github.com/faizbyp/kotak-saran
- https://github.com/levinunnink/html-form-to-google-sheet
- https://medium.com/@dmccoy/how-to-submit-an-html-form-to-google-sheets-without-google-forms-b833952cc175
- https://github.com/levinunnink/html-form-to-notion
- https://github.com/jamiewilson/form-to-google-sheets
- https://railsrescue.com/blog/2015-05-28-step-by-step-setup-to-send-form-data-to-google-sheets/
- Google Spreadsheets as a Database – INSERT with Apps Script form POST/GET submit method
- Step by step setup to send form data to Google Sheets
- Google Sheet Form Post
- How to Submit an HTML Form to Google Sheets…without Google Forms
- Send Email from a Static HTML Form using Google Apps Mail!
- Google Apps Script
- Fetch API
- FormData
- HTML
<form>element - Document.forms
- Sending forms through JavaScript
Latihan - Jurnal Mengajar
admin, admin1
Tahapan
Kode APPS Script
===========================
function doPost(e) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("JurnalMengajar");
if (!sheet) {
return ContentService.createTextOutput("Sheet tidak ditemukan!");
}
sheet.appendRow([
e.parameter.tanggal,
e.parameter.jam,
e.parameter.namaasn,
e.parameter.kelas,
e.parameter.matapelajaran,
e.parameter.materi,
e.parameter.statuskeaktifan,
e.parameter.hadir,
e.parameter.tidakhadir,
e.parameter.refleksi
]);
return ContentService.createTextOutput("✅ Data berhasil disimpan!");
}
ID : AKfycbyW5gTmYXM1w-hWQ3tu3PGRFygeXHJ3ABtpCBJP3kcYRo-cQ1AYRnsSNfd7iFFmScpQ
URL : https://script.google.com/macros/s/AKfycbyW5gTmYXM1w-hWQ3tu3PGRFygeXHJ3ABtpCBJP3kcYRo-cQ1AYRnsSNfd7iFFmScpQ/exec
Kode HTML
==================
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Form Jurnal Mengajar</title>
<style>
body {
font-family: sans-serif;
max-width: 600px;
margin: 30px auto;
background: #f9f9f9;
padding: 20px;
border-radius: 10px;
}
input, select, textarea, button {
width: 100%;
padding: 10px;
margin-top: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
background-color: #0077cc;
color: white;
font-weight: bold;
margin-top: 20px;
}
</style>
</head>
<body>
<h2>📘 Jurnal Mengajar</h2>
<form action="https://script.google.com/macros/s/AKfycbyW5gTmYXM1w-hWQ3tu3PGRFygeXHJ3ABtpCBJP3kcYRo-cQ1AYRnsSNfd7iFFmScpQ/exec" method="post">
<label>Tanggal:</label>
<input type="date" name="tanggal" required>
<label>Jam Mengajar:</label>
<input type="text" name="jam" required placeholder="Contoh: 07.30–09.00">
<label>Nama ASN:</label>
<select name="namaasn" required>
<option value="Yolanda Antoneta Aponno, S.Th">Yolanda Antoneta Aponno, S.Th</option>
<option value="Sarah Fransina Adelina Lesnussa, S.Pd">Sarah Fransina Adelina Lesnussa, S.Pd</option>
<option value="Filomina Labobar, S.Pd">Filomina Labobar, S.Pd</option>
<option value="Grace Huwae, S.Pd">Grace Huwae, S.Pd</option>
<option value="Khristine Yudith Manuputty, S.Pd">Khristine Yudith Manuputty, S.Pd</option>
<option value="Rika Sahetapy, SE">Rika Sahetapy, SE</option>
<option value="Jacoba Pattiwaellapia, S.Pd">Jacoba Pattiwaellapia, S.Pd</option>
<option value="Sandrien Paulianty Lekahena, S.Pd">Sandrien Paulianty Lekahena, S.Pd</option>
<option value="Maria Ariance Warella">Maria Ariance Warella</option>
<option value="Wilhelem Maoke">Wilhelem Maoke</option>
<option value="Santya Alfons, S.Pd">Santya Alfons, S.Pd</option>
</select>
<label>Kelas:</label>
<select name="kelas" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<label>Mata Pelajaran:</label>
<select name="matapelajaran" required>
<option value="Pendidikan Agama dan Budi Pekerti">Pendidikan Agama dan Budi Pekerti</option>
<option value="Pendidikan Pancasila">Pendidikan Pancasila</option>
<option value="Bahasa Indonesia">Bahasa Indonesia</option>
<option value="Matematika">Matematika</option>
<option value="Ilmu Pengetahuan Alam dan Sosial">Ilmu Pengetahuan Alam dan Sosial</option>
<option value="Seni dan Budaya">Seni dan Budaya</option>
<option value="Pendidikan Jasmani Olahraga dan Kesehatan">Pendidikan Jasmani Olahraga dan Kesehatan</option>
<option value="Bahasa Inggris">Bahasa Inggris</option>
<option value="Pendidikan Lingkungan Hidup">Pendidikan Lingkungan Hidup</option>
</select>
<label>Materi:</label>
<textarea name="materi" required></textarea>
<label>Status Keaktifan:</label>
<select name="statuskeaktifan" required>
<option value="Sangat Aktif">Sangat Aktif</option>
<option value="Aktif">Aktif</option>
<option value="Cukup Aktif">Cukup Aktif</option>
<option value="Tidak Aktif">Tidak Aktif</option>
<label>Absensi:</label>
<textarea name="hadir" required></textarea>
<label>Absensi:</label>
<textarea name="tidakhadir" required></textarea>
<label>Refleksi:</label>
<textarea name="refleksi"></textarea>
<button type="submit">Simpan Jurnal</button>
</form>
</body>
</html>
Image Pendukung
===================
logo sekolah
latar belakang halaman
Sebuh ilustrasi digital halaman sekolah dasar yang ramai. Terlihat siswa-siswi SD mengenakan seragam putih merah khas SD Indonesia. Beberapa siswa sedang berbicara dengan guru perempuan.
PROMPT
1. Paste html ke Canva
2. Revisi bagian di bawah ini
- tambahkan nama sekolah "SMK Percontohan Pervekt" dan letaknya berada di bawah kata Jurnal Mengajar pada bagian tajuk
- nama sekolah diganti : SMK Percontohan Pervekt
- logo diganti : https://freeimghost.net/images/2025/08/19/Logo-pervekt1.png
- latar belakang halaman : https://freeimghost.net/images/2025/08/19/sekolah1.jpg
Tambahkan bagian di bawah ini :
1. running text di bagian atas tajuk : "Jurnal Pembelajaran - SMK Percontohan Pervekt"
2. Jam digital, hari, dan tanggal di bagian bawah tajuk
3. Foto profil kepala sekolah di bagian bawah tajuk : https://freeimghost.net/images/2025/08/26/fotofb.png
Tambahkan bagian di bawah ini :
1. Footer : @2025 SMK Percontohan Pervekt - Hak Cipta Dilindungi
2. Gunakan padanan warna gradient : #ff0066, #ffff99, #000066
Tambahkan bagian di bawah ini :
1. upload foto pembelajaran minimal 2 foto dengan ukuran masing-masing foto sebesar 1 MB
2. batasi karakter pada kolom refleksi minimal 200 karaker dan maksimal 1000 karakter
Tambahkan halaman login
usernama : admin
kata sandi: admin1
Gunakan padanan warna gradient : #ff0066, #ffff99, #000066
Source Code
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - Jurnal Mengajar SMK Percontohan Pervekt</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.form-group {
transition: all 0.3s ease;
}
.form-group:focus-within {
transform: translateY(-2px);
}
.submit-btn {
background: linear-gradient(135deg, #ff0066 0%, #ffff99 50%, #000066 100%);
transition: all 0.3s ease;
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(255, 0, 102, 0.3);
}
.form-input {
transition: all 0.3s ease;
}
.form-input:focus {
transform: translateY(-1px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.login-container {
display: block;
}
.journal-container {
display: none;
}
.gradient-text {
background: linear-gradient(45deg, #ff0066, #000066);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
</style>
</head>
<body class="min-h-screen py-8" style="background-image: url('https://freeimghost.net/images/2025/08/19/sekolah1.jpg'); background-size: cover; background-position: center; background-attachment: fixed;">
<!-- Login Page -->
<div id="loginPage" class="login-container">
<!-- Running Text -->
<div class="py-2 overflow-hidden" style="background: linear-gradient(90deg, #ff0066 0%, #ffff99 50%, #000066 100%);">
<div class="whitespace-nowrap animate-pulse">
<div class="inline-block px-4 animate-bounce">
<span class="text-sm font-medium text-white">🔐 Login Sistem Jurnal Pembelajaran - SMK Percontohan Pervekt 🔐</span>
</div>
</div>
</div>
<div class="max-w-md mx-auto px-6 mt-16">
<!-- Login Header -->
<div class="text-center mb-8">
<div class="inline-flex items-center justify-center w-20 h-20 bg-white rounded-full shadow-lg mb-4 p-2">
<img src="https://freeimghost.net/images/2025/08/19/Logo-pervekt1.png" alt="Logo SMK Percontohan Pervekt" class="w-full h-full object-contain" onerror="this.src=''; this.alt='Logo failed to load'; this.style.display='none';">
</div>
<h1 class="text-3xl font-bold text-gray-800 mb-2">Login Sistem</h1>
<h2 class="text-xl font-semibold mb-2 gradient-text">SMK Percontohan Pervekt</h2>
<p class="text-gray-600">Masuk ke Sistem Jurnal Mengajar</p>
</div>
<!-- Login Form -->
<div class="bg-white rounded-2xl shadow-xl p-8">
<form id="loginForm" class="space-y-6">
<div class="form-group">
<label class="block text-sm font-semibold text-gray-700 mb-2">👤 Username</label>
<input type="text" id="username" required placeholder="Masukkan username"
class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-pink-500 focus:border-transparent outline-none">
</div>
<div class="form-group">
<label class="block text-sm font-semibold text-gray-700 mb-2">🔒 Kata Sandi</label>
<input type="password" id="password" required placeholder="Masukkan kata sandi"
class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-pink-500 focus:border-transparent outline-none">
</div>
<div id="loginError" class="text-red-500 text-sm text-center hidden">
Username atau kata sandi salah!
</div>
<div class="pt-4">
<button type="submit"
class="submit-btn w-full py-4 px-6 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform transition-all duration-300 flex items-center justify-center space-x-2">
<span>🔑</span>
<span>Masuk</span>
</button>
</div>
</form>
</div>
<!-- Login Footer -->
<div class="text-center mt-8 bg-gradient-to-r from-pink-600 via-yellow-200 to-blue-900 text-white py-4 rounded-lg shadow-lg">
<p class="text-sm font-medium">©2025 SMK Percontohan Pervekt - Hak Cipta Dilindungi</p>
<p class="text-xs mt-1 opacity-90">Sistem Jurnal Mengajar Digital</p>
</div>
</div>
</div>
<!-- Journal Page -->
<div id="journalPage" class="journal-container">
<!-- Running Text -->
<div class="py-2 overflow-hidden" style="background: linear-gradient(90deg, #ff0066 0%, #ffff99 50%, #000066 100%);">
<div class="whitespace-nowrap animate-pulse">
<div class="inline-block px-4 animate-bounce">
<span class="text-sm font-medium text-white">📚 Jurnal Pembelajaran - SMK Percontohan Pervekt 📚</span>
</div>
</div>
</div>
<div class="max-w-2xl mx-auto px-6">
<!-- Header -->
<div class="text-center mb-8 mt-8">
<div class="inline-flex items-center justify-center w-20 h-20 bg-white rounded-full shadow-lg mb-4 p-2">
<img src="https://freeimghost.net/images/2025/08/19/Logo-pervekt1.png" alt="Logo SMK Percontohan Pervekt" class="w-full h-full object-contain" onerror="this.src=''; this.alt='Logo failed to load'; this.style.display='none';">
</div>
<h1 class="text-3xl font-bold text-gray-800 mb-2">Jurnal Mengajar</h1>
<h2 class="text-xl font-semibold mb-2 gradient-text">SMK Percontohan Pervekt</h2>
<p class="text-gray-600">Dokumentasi kegiatan pembelajaran harian</p>
<!-- Logout Button -->
<button onclick="logout()" class="mt-2 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors">
🚪 Logout
</button>
<!-- Digital Clock and Date -->
<div class="bg-white rounded-lg shadow-md p-4 mt-4 mb-4 inline-block border-2" style="border-image: linear-gradient(45deg, #ff0066, #ffff99, #000066) 1;">
<div id="digitalClock" class="text-2xl font-bold mb-1 gradient-text"></div>
<div id="currentDate" class="text-sm text-gray-600"></div>
</div>
<!-- Principal Photo -->
<div class="mt-4">
<div class="inline-block">
<img src="https://freeimghost.net/images/2025/08/26/fotofb.png"
alt="Foto Kepala Sekolah"
class="w-24 h-24 rounded-full object-cover border-4 border-white shadow-lg"
onerror="this.src=''; this.alt='Foto tidak dapat dimuat'; this.style.display='none';">
<p class="text-sm text-gray-600 mt-2 font-medium">Kepala Sekolah</p>
</div>
</div>
</div>
<!-- Form Container -->
<div class="bg-white rounded-2xl shadow-xl p-8">
<form id="journalForm" action="https://script.google.com/macros/s/AKfycbyW5gTmYXM1w-hWQ3tu3PGRFygeXHJ3ABtpCBJP3kcYRo-cQ1AYRnsSNfd7iFFmScpQ/exec" method="POST" class="space-y-6">
<!-- Date and Time Row -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="form-group">
<label class="block text-sm font-semibold text-gray-700 mb-2">📅 Tanggal</label>
<input type="date" name="tanggal" required
class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none">
</div>
<div class="form-group">
<label class="block text-sm font-semibold text-gray-700 mb-2">🕐 Jam Mengajar</label>
<input type="text" name="jam" required placeholder="Contoh: 07.30–09.00"
class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none">
</div>
</div>
<!-- Teacher Name -->
<div class="form-group">
<label class="block text-sm font-semibold text-gray-700 mb-2">👩🏫 Nama ASN</label>
<select name="namaasn" required
class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none bg-white">
<option value="">Pilih Nama ASN</option>
<option value="Yolanda Antoneta Aponno, S.Th">Yolanda Antoneta Aponno, S.Th</option>
<option value="Sarah Fransina Adelina Lesnussa, S.Pd">Sarah Fransina Adelina Lesnussa, S.Pd</option>
<option value="Filomina Labobar, S.Pd">Filomina Labobar, S.Pd</option>
<option value="Grace Huwae, S.Pd">Grace Huwae, S.Pd</option>
<option value="Khristine Yudith Manuputty, S.Pd">Khristine Yudith Manuputty, S.Pd</option>
<option value="Rika Sahetapy, SE">Rika Sahetapy, SE</option>
<option value="Jacoba Pattiwaellapia, S.Pd">Jacoba Pattiwaellapia, S.Pd</option>
<option value="Sandrien Paulianty Lekahena, S.Pd">Sandrien Paulianty Lekahena, S.Pd</option>
<option value="Maria Ariance Warella">Maria Ariance Warella</option>
<option value="Wilhelem Maoke">Wilhelem Maoke</option>
<option value="Santya Alfons, S.Pd">Santya Alfons, S.Pd</option>
</select>
</div>
<!-- Class and Subject Row -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="form-group">
<label class="block text-sm font-semibold text-gray-700 mb-2">🎓 Kelas</label>
<select name="kelas" required
class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none bg-white">
<option value="">Pilih Kelas</option>
<option value="1">Kelas 1</option>
<option value="2">Kelas 2</option>
<option value="3">Kelas 3</option>
<option value="4">Kelas 4</option>
<option value="5">Kelas 5</option>
<option value="6">Kelas 6</option>
</select>
</div>
<div class="form-group">
<label class="block text-sm font-semibold text-gray-700 mb-2">📚 Mata Pelajaran</label>
<select name="matapelajaran" required
class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none bg-white">
<option value="">Pilih Mata Pelajaran</option>
<option value="Pendidikan Agama dan Budi Pekerti">Pendidikan Agama dan Budi Pekerti</option>
<option value="Pendidikan Pancasila">Pendidikan Pancasila</option>
<option value="Bahasa Indonesia">Bahasa Indonesia</option>
<option value="Matematika">Matematika</option>
<option value="Ilmu Pengetahuan Alam dan Sosial">Ilmu Pengetahuan Alam dan Sosial</option>
<option value="Seni dan Budaya">Seni dan Budaya</option>
<option value="Pendidikan Jasmani Olahraga dan Kesehatan">Pendidikan Jasmani Olahraga dan Kesehatan</option>
<option value="Bahasa Inggris">Bahasa Inggris</option>
<option value="Pendidikan Lingkungan Hidup">Pendidikan Lingkungan Hidup</option>
</select>
</div>
</div>
<!-- Material -->
<div class="form-group">
<label class="block text-sm font-semibold text-gray-700 mb-2">📖 Materi</label>
<textarea name="materi" required rows="3" placeholder="Jelaskan materi yang diajarkan..."
class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none resize-none"></textarea>
</div>
<!-- Activity Status -->
<div class="form-group">
<label class="block text-sm font-semibold text-gray-700 mb-2">⚡ Status Keaktifan</label>
<select name="statuskeaktifan" required
class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none bg-white">
<option value="">Pilih Status Keaktifan</option>
<option value="Sangat Aktif">Sangat Aktif</option>
<option value="Aktif">Aktif</option>
<option value="Cukup Aktif">Cukup Aktif</option>
<option value="Tidak Aktif">Tidak Aktif</option>
</select>
</div>
<!-- Attendance Section -->
<div class="bg-gray-50 rounded-xl p-6 space-y-4">
<h3 class="text-lg font-semibold text-gray-800 flex items-center">
<span class="mr-2">✅</span>
Absensi Siswa
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="form-group">
<label class="block text-sm font-semibold text-gray-700 mb-2">Siswa Hadir</label>
<textarea name="hadir" required rows="3" placeholder="Nama siswa yang hadir..."
class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none resize-none"></textarea>
</div>
<div class="form-group">
<label class="block text-sm font-semibold text-gray-700 mb-2">Siswa Tidak Hadir</label>
<textarea name="tidakhadir" required rows="3" placeholder="Nama siswa yang tidak hadir..."
class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none resize-none"></textarea>
</div>
</div>
</div>
<!-- Reflection -->
<div class="form-group">
<label class="block text-sm font-semibold text-gray-700 mb-2">💭 Refleksi</label>
<textarea name="refleksi" rows="4" placeholder="Refleksi pembelajaran hari ini (opsional)..."
class="form-input w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none resize-none"></textarea>
</div>
<!-- Submit Button -->
<div class="pt-4">
<button type="submit"
class="submit-btn w-full py-4 px-6 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform transition-all duration-300 flex items-center justify-center space-x-2">
<span>💾</span>
<span>Simpan Jurnal</span>
</button>
</div>
</form>
</div>
<!-- Footer -->
<div class="text-center mt-8 bg-gradient-to-r from-pink-600 via-yellow-200 to-blue-900 text-white py-4 rounded-lg shadow-lg">
<p class="text-sm font-medium">©2025 SMK Percontohan Pervekt - Hak Cipta Dilindungi</p>
<p class="text-xs mt-1 opacity-90">Sistem Jurnal Mengajar Digital</p>
</div>
</div>
</div>
<script>
// Check if user is already logged in
document.addEventListener('DOMContentLoaded', function() {
if (sessionStorage.getItem('isLoggedIn') === 'true') {
showJournalPage();
}
});
// Login form handling
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const errorDiv = document.getElementById('loginError');
if (username === 'admin' && password === 'admin1') {
sessionStorage.setItem('isLoggedIn', 'true');
showJournalPage();
} else {
errorDiv.classList.remove('hidden');
setTimeout(() => {
errorDiv.classList.add('hidden');
}, 3000);
}
});
// Show journal page
function showJournalPage() {
document.getElementById('loginPage').style.display = 'none';
document.getElementById('journalPage').style.display = 'block';
// Initialize journal page
const dateInput = document.querySelector('input[name="tanggal"]');
const today = new Date().toISOString().split('T')[0];
dateInput.value = today;
// Start clock
updateClock();
setInterval(updateClock, 1000);
}
// Logout function
function logout() {
sessionStorage.removeItem('isLoggedIn');
document.getElementById('journalPage').style.display = 'none';
document.getElementById('loginPage').style.display = 'block';
// Clear login form
document.getElementById('username').value = '';
document.getElementById('password').value = '';
}
// Digital Clock and Date
function updateClock() {
const now = new Date();
// Format time
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
const timeString = `${hours}:${minutes}:${seconds}`;
// Format date
const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
const months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
const dayName = days[now.getDay()];
const day = now.getDate();
const month = months[now.getMonth()];
const year = now.getFullYear();
const dateString = `${dayName}, ${day} ${month} ${year}`;
// Update display
const clockElement = document.getElementById('digitalClock');
const dateElement = document.getElementById('currentDate');
if (clockElement && dateElement) {
clockElement.textContent = timeString;
dateElement.textContent = dateString;
}
}
// Form submission handling
document.getElementById('journalForm').addEventListener('submit', function(e) {
e.preventDefault();
const submitBtn = document.querySelector('#journalForm button[type="submit"]');
const originalContent = submitBtn.innerHTML;
// Show loading state
submitBtn.innerHTML = '<span>⏳</span><span>Menyimpan...</span>';
submitBtn.disabled = true;
// Get form data
const formData = new FormData(this);
// Submit to Google Apps Script
fetch(this.action, {
method: 'POST',
body: formData,
mode: 'no-cors'
})
.then(() => {
// Success feedback
submitBtn.innerHTML = '<span>✅</span><span>Berhasil Disimpan!</span>';
submitBtn.style.background = 'linear-gradient(135deg, #10b981 0%, #059669 100%)';
// Reset form after 2 seconds
setTimeout(() => {
this.reset();
const dateInput = document.querySelector('input[name="tanggal"]');
const today = new Date().toISOString().split('T')[0];
dateInput.value = today;
submitBtn.innerHTML = originalContent;
submitBtn.style.background = 'linear-gradient(135deg, #ff0066 0%, #ffff99 50%, #000066 100%)';
submitBtn.disabled = false;
}, 2000);
})
.catch((error) => {
// Error feedback
submitBtn.innerHTML = '<span>❌</span><span>Gagal Menyimpan</span>';
submitBtn.style.background = 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)';
setTimeout(() => {
submitBtn.innerHTML = originalContent;
submitBtn.style.background = 'linear-gradient(135deg, #ff0066 0%, #ffff99 50%, #000066 100%)';
submitBtn.disabled = false;
}, 3000);
});
});
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9757073c4149a553',t:'MTc1NjI1MDA5Ni4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>
Link referensi : https://www.youtube.com/watch?v=2DZ8Z3DaJF8
Senin, 25 Agustus 2025
Kurikulum Pemrograman Berbasis Obyek
RENCANA PEMBELAJARAN SEMESTER (RPS)
PEMROGRAMAN BERBASIS OBYEK
A. Capaian Pembelajaran Lulusan (CPL) Program Studi
-
CPL Pengetahuan: Menguasai konsep dasar ilmu komputer, algoritma, dan pemrograman.
-
CPL Keterampilan Umum: Mampu berpikir kritis, memecahkan masalah, dan bekerja dalam tim.
-
CPL Keterampilan Khusus: Mampu merancang, mengimplementasikan, dan menguji program berbasis objek.
B. Capaian Pembelajaran Mata Kuliah (CPMK)
Setelah mengikuti mata kuliah ini, mahasiswa mampu:
-
Menjelaskan prinsip dasar Pemrograman Berbasis Objek.
-
Mengimplementasikan konsep class, object, enkapsulasi, inheritance, polymorphism, dan abstraction.
-
Menggunakan OOP untuk membangun aplikasi sederhana dengan modularisasi, exception handling, collection, dan file I/O.
-
Mendesain dan mengembangkan mini project aplikasi berbasis OOP.
C. Deskripsi Mata Kuliah
Mata kuliah ini membahas prinsip dan penerapan Pemrograman Berbasis Objek (PBO) dengan menggunakan bahasa pemrograman berorientasi objek (Java/Python/C#). Materi meliputi konsep dasar class dan object, enkapsulasi, inheritance, polymorphism, abstraction, modularisasi program, collection, exception handling, file I/O, hingga implementasi dalam bentuk mini project.
D. Bahan Kajian (Pokok Bahasan)
-
Konsep dasar OOP: class, object, atribut, method.
-
Enkapsulasi, constructor, overloading.
-
Inheritance & hierarki class.
-
Polymorphism & overriding.
-
Abstraction: abstract class, interface.
-
Modularisasi dengan package.
-
Exception handling.
-
Collection & Generic.
-
File I/O & serialisasi objek.
-
GUI sederhana.
-
Mini project berbasis OOP.
E. Strategi Pembelajaran
-
Metode: Ceramah interaktif, diskusi, demonstrasi coding, praktikum, project-based learning, presentasi.
-
Media: Laptop, IDE (NetBeans/Eclipse/IntelliJ atau VS Code), projector, LMS.
-
Evaluasi: Quiz, tugas individu, project kelompok, UTS, UAS.
F. Rencana Pembelajaran Semester (RPS Detail)
| Minggu | CPMK/Sub-CPMK | Materi/Pokok Bahasan | Bentuk & Metode Pembelajaran | Penilaian & Bobot |
|---|---|---|---|---|
| 1 | Memahami perbedaan prosedural & OOP | Pengantar PBO, class & object | Ceramah, diskusi, studi kasus | Tugas individu (2%) |
| 2 | Membuat class & object | Struktur class, constructor | Demo coding, praktikum | Quiz (2%) |
| 3 | Menerapkan enkapsulasi | Modifier, getter & setter | Praktikum | Tugas coding (3%) |
| 4 | Menggunakan overloading | Method & constructor overloading | Praktikum | Quiz (2%) |
| 5 | Membuat hierarki class | Inheritance | Diskusi, praktikum | Tugas coding (3%) |
| 6 | Menggunakan polymorphism | Overriding, up/downcasting | Praktikum | Quiz (2%) |
| 7 | Menggunakan abstraction | Abstract class & interface | Praktikum | Tugas coding (3%) |
| 8 | Integrasi konsep dasar OOP | UTS (teori & praktik) | Ujian | UTS (20%) |
| 9 | Modularisasi program | Package & import | Praktikum | Tugas coding (3%) |
| 10 | Menangani error | Exception handling | Demo, praktikum | Quiz (2%) |
| 11 | Menggunakan collection | List, Map, Set, Generic | Praktikum | Tugas coding (3%) |
| 12 | Membaca/menyimpan data | File I/O, serialisasi objek | Demo, praktikum | Tugas coding (3%) |
| 13 | Membuat GUI sederhana | GUI, event handling | Praktikum | Tugas coding (3%) |
| 14 | Mendesain aplikasi OOP | Mini project design, UML | Diskusi, bimbingan | Draft project (5%) |
| 15 | Mempresentasikan project | Presentasi mini project | Presentasi kelompok | Presentasi (10%) |
| 16 | Membangun aplikasi OOP mini | UAS (teori & praktik) | Ujian | UAS (30%) |
G. Penilaian
-
Kehadiran & Partisipasi: 5%
-
Tugas & Quiz: 25%
-
UTS: 20%
-
Mini Project (Desain + Presentasi): 20%
-
UAS: 30%
H. Referensi
-
Barnes, D. J., & Kölling, M. (2017). Objects First with Java. Pearson.
-
Horstmann, C. (2018). Object-Oriented Design & Patterns. Wiley.
-
Schildt, H. (2021). Java: The Complete Reference. McGraw Hill.
-
Freeman, E., & Robson, E. (2004). Head First Design Patterns. O’Reilly.
-
Oracle Java Documentation (https://docs.oracle.com/javase/tutorial/java/concepts/).
https://agussuratna.net/2023/01/tutorial-java-pengenalan-bahasa-pemrograman-java/
IntelliJ IDEA (Community Edition) → Link
Eclipse IDE for Java Developers → Link
NetBeans IDE (sering dipakai di kampus untuk Java) → Link
VS Code (multibahasa, ringan, dengan extension Java/Python) → Link
Langganan:
Komentar (Atom)
Looker - Kelas Visualisasi Data
https://www.youtube.com/watch?v=NR0T0vNthZs&list=PLDMiUlv2m2BO681UA7rCUwJg6cuoJtWjs https://www.youtube.com/watch?v=R_MbWn5wBis&li...
-
Versi 1 Versi 2 Versi 3 Versi 4 Aplikasi ini versi GUI dengan Swing mempunyai form input catatan... -
https://www.youtube.com/watch?v=wUw8eLeJH0A&list=PLz_5rPRIvGECVDOGY8fMs3-8uZVlyJ-gr https://webdesignmastery.github.io/Royal_Hotel_31-...
-
https://www.youtube.com/watch?v=ronKK1MqcqE https://drive.google.com/file/d/1XG6bPRxZdLmujypKBONwBhlvhbLN0r1g/view https://drive.google.co...
.png){kind=link}
