Code Studio: Oktober 2025

Kamis, 30 Oktober 2025

Survey Cita Cita

https://smadt.net/linksite/talent7.html

Kolom Spreadsheet

Link Spreadsheet:

https://docs.google.com/spreadsheets/d/1yh7QabRTyTB0eeTLqORDSFzbx7muiWPCovfueD3Dk7k/edit?usp=sharing

Link Apps Script:

https://script.google.com/macros/s/AKfycbx6dQ3TPIQZOHcZCzVLEl-qfgzylAKJOsJoL8mHw2aVvqFtdFTAYQym8hhQ8wXEhGKu/exec

Prompt

“Buatkan halaman web asesmen siswa untuk program ESQ Talent DNA dengan gaya profesional, bersih, dan responsif menggunakan Bootstrap 5 CDN. Halaman ini harus memiliki struktur lengkap yang terdiri atas beberapa bagian utama:

Header responsif di bagian paling atas halaman yang memuat nama situs “ESQ Talent DNA Assessment Portal” serta menu navigasi horizontal berisi dua tautan utama, yaitu Beranda dan Asesmen. Gunakan navbar Bootstrap dengan warna latar belakang biru lembut (bg-primary-subtle) dan teks berwarna kontras; pastikan menu berubah menjadi ikon hamburger pada tampilan mobile, sehingga tetap responsif di berbagai perangkat.

Hero Section ditempatkan tepat di bawah header, menampilkan latar belakang gambar lembut bertema pengembangan diri atau kepribadian, dengan teks utama besar berisi tagline seperti “Temukan Potensi Terbaikmu dengan ESQ Talent DNA” serta subjudul yang menjelaskan bahwa asesmen ini membantu siswa memahami kekuatan, karakter, dan bakat alami mereka; tambahkan tombol CTA bertuliskan “Mulai Asesmen Sekarang” yang menggulir otomatis ke bagian form asesmen di bawahnya.

Bagian Asesmen yang berisi form HTML dengan Bootstrap form components; form harus mencakup kolom input berikut:

Nama lengkap
NISN atau ID siswa
Jenis kelamin (dropdown: Laki-laki / Perempuan)
Kelas atau program studi
Alamat email
Pilihan minat atau kategori bakat (checkbox atau select multiple)
Jawaban singkat tentang cita-cita atau motivasi hidup
Tombol kirim dengan teks “Kirim Asesmen”

Pastikan form tersebut dihubungkan dengan Google Apps Script endpoint berikut:

https://script.google.com/macros/s/AKfycby_g0vjMESWboG3AdBe5YifNPo4OfbztDzSahXnrugc4j4_6aoacAFmYF5AoVObRHZx/exec

dengan metode POST, menggunakan fungsi JavaScript fetch() untuk mengirim data ke spreadsheet, serta tambahkan notifikasi alert yang menampilkan pesan sukses atau gagal pengiriman data.

Footer diletakkan di bagian bawah halaman dengan warna lembut yang senada dengan header; isi footer dengan teks seperti “© 2025 ESQ Talent DNA Program — Powered by Google Apps Script Integration” serta tautan kecil menuju dokumentasi atau kontak pengembang.

Gunakan layout Bootstrap berbasis container dan row agar setiap elemen sejajar dengan baik di berbagai ukuran layar; pastikan seluruh teks menggunakan font modern seperti Poppins atau Roboto, dengan ukuran yang proporsional antara judul, subjudul, dan teks isi; sertakan pula padding dan margin yang cukup untuk menjaga ruang visual yang lega; dan berikan transisi halus pada tombol CTA agar tampil elegan saat di-hover.”

PROMPT

Perbaiki index.html berikut sehingga bisa menyimpan data :

<!doctype html>

<head>

<title>ESQ Talent DNA Assessment Portal</title>

<style>

body { font-family: 'Poppins', sans-serif; background:#f6f8fb; margin:0; padding-top:70px; }

.navbar { box-shadow:0 2px 10px rgba(0,0,0,0.08); }

.hero-section { background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff; padding:80px 0; text-align:center; }

.hero-title { font-weight:700; font-size:2.2rem; }

.form-container { max-width:900px; margin: -40px auto 40px; padding:30px; background:#fff; border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,0.08); }

.submit-button { border-radius:50px; padding:12px 28px; }

.hidden-iframe { display:none; }

.status { text-align:center; margin-top:16px; font-weight:600; }

</style>

</head>

<body>

<a class="navbar-brand fw-bold text-primary" href="#">ESQ Talent DNA</a>

</button>

<li class="nav-item"><a class="nav-link" href="#hero">Beranda</a></li>

<li class="nav-item"><a class="nav-link" href="#assessment">Asesmen</a></li>

</ul>

</div>

</nav>

<h1 class="hero-title">Temukan Potensi Terbaikmu dengan ESQ Talent DNA</h1>

<p class="lead mt-3">Asesmen singkat untuk mengenali bakat, karakter, dan kecerdasan emosional/spiritual.</p>

<a class="btn btn-light btn-lg mt-3" href="#assessment">Mulai Asesmen</a>

</div>

</section>

<h2 class="text-center text-primary mb-4">Form Asesmen Siswa</h2>

<label class="form-label">Nama Lengkap *</label>

</div>

<label class="form-label">NISN / ID Siswa *</label>

</div>

<label class="form-label">Jenis Kelamin *</label>

<option value="">Pilih...</option>

<option value="Perempuan">Perempuan</option>

</select>

</div>

<label class="form-label">Kelas / Program Studi *</label>

</div>

<label class="form-label">Alamat Email *</label>

</div>

<label class="form-label">Pilihan Minat / Kategori Bakat *</label>

<label class="form-check-label" for="minat1">Seni & Kreativitas</label>

</div>

<label class="form-check-label" for="minat2">Sains & Teknologi</label>

</div>

<label class="form-check-label" for="minat3">Olahraga & Kesehatan</label>

</div>

<label class="form-check-label" for="minat4">Bisnis & Kewirausahaan</label>

</div>

<label class="form-check-label" for="minat5">Sosial & Kemanusiaan</label>

</div>

<label class="form-check-label" for="minat6">Bahasa & Komunikasi</label>

</div>

<label class="form-label">Cita-cita / Motivasi Hidup *</label>

</div>

</div>

<button type="submit" id="submitButton" class="btn btn-primary submit-button">Kirim Asesmen</button>

</div>

</form>

</div>

</section>

</footer>

// Ganti dengan URL Apps Script .exec Anda

const scriptURL = 'https://script.google.com/macros/s/AKfycby_g0vjMESWboG3AdBe5YifNPo4OfbztDzSahXnrugc4j4_6aoacAFmYF5AoVObRHZx/exec';

// Set form action ke scriptURL

document.getElementById('assessmentForm').action = scriptURL;

const form = document.getElementById('assessmentForm');

const statusEl = document.getElementById('status');

const iframe = document.getElementById('hidden_iframe');

const submitButton = document.getElementById('submitButton');

// Sebelum submit, gabungkan checkbox minat menjadi string dan simpan ke hidden input

form.addEventListener('submit', function(e) {

// kumpulkan nilai checkbox

const checked = Array.from(document.querySelectorAll('input[name="minat"]:checked')).map(cb => cb.value);

document.getElementById('minat_joined').value = checked.join(', ');

// show loading state

submitButton.disabled = true;

submitButton.textContent = 'Mengirim...';

statusEl.textContent = 'Mengirim data ke server...';

statusEl.style.color = '#6c757d';

});

// Ketika iframe selesai load -> anggap pengiriman selesai

iframe.addEventListener('load', function() {

// Jika form belum pernah dikirim, ignore

// tampilkan pesan sukses (Apps Script bisa mengarahkan ke halaman 'thanks' tetapi di sini kita asumsikan sukses)

submitButton.disabled = false;

submitButton.textContent = 'Kirim Asesmen';

statusEl.textContent = '✅ Data asesmen berhasil dikirim. Terima kasih.';

statusEl.style.color = 'green';

// reset form

try { form.reset(); } catch (err) {}

// kosongkan hidden minat

document.getElementById('minat_joined').value = '';

// optional: hide status message after 6s

setTimeout(() => { statusEl.textContent = ''; }, 6000);

});

// Jika pengguna menutup atau terjadi error, status tetap di UI — browser tidak memberikan error detail untuk iframe POST

// Untuk debugging, cek executions pada Apps Script dashboard.

</script>

</body>

</html>

Kolom Spreadsheet

Link Spreadsheet:

https://docs.google.com/spreadsheets/d/1yh7QabRTyTB0eeTLqORDSFzbx7muiWPCovfueD3Dk7k/edit?usp=sharing

Link Apps Script:

https://script.google.com/macros/s/AKfycbx6dQ3TPIQZOHcZCzVLEl-qfgzylAKJOsJoL8mHw2aVvqFtdFTAYQym8hhQ8wXEhGKu/exec

Isi Apps Script:

/**

* Handler untuk POST dari form (form-encoded) atau JSON (fetch).

* Menyimpan ke Sheet1.

function doPost(e) {

try {

// Ambil data: jika dikirim JSON lewat fetch -> e.postData.contents ada

var data = {};

if (e.postData && e.postData.contents) {

try {

data = JSON.parse(e.postData.contents);

} catch (err) {

// fallback: mungkin postData.contents berformat x-www-form-urlencoded

data = parseQueryString_(e.postData.contents);

}

} else if (e.parameter) {

// form-encoded biasa -> e.parameter

data = e.parameter;

}

// Buka spreadsheet aktif atau spesifik

var ss = SpreadsheetApp.getActiveSpreadsheet(); // pastikan di-open dari spreadsheet tujuan

var sheet = ss.getSheetByName('Sheet1');

if (!sheet) {

// buat sheet jika tidak ada

sheet = ss.insertSheet('Sheet1');

// buat header

sheet.appendRow([

'Timestamp', 'Nama Lengkap', 'NISN/ID', 'Jenis Kelamin', 'Kelas', 'Email',

'Minat (joined)', 'CitaCita / Motivasi'

]);

}

var timestamp = new Date();

var row = [

timestamp,

data.namaLengkap || data.nama_lengkap || '',

data.nisn || '',

data.jenisKelamin || data.jenis_kelamin || '',

data.kelas || '',

data.email || '',

data.minat_joined || data.minat || '',

data.citaCita || data.cita_cita || ''

];

sheet.appendRow(row);

// Kembalikan HTML kecil agar iframe load -> menandakan selesai

var htmlOutput = HtmlService.createHtmlOutput("<p>Terima kasih — data tersimpan.</p>");

return htmlOutput;

} catch (err) {

var msg = 'Error: ' + err.message;

var htmlOutput = HtmlService.createHtmlOutput('<p>' + msg + '</p>');

return htmlOutput;

}

/**

* Utility: parse query-string style body menjadi object

function parseQueryString_(qs) {

var obj = {};

var parts = qs.split('&');

parts.forEach(function(part) {

if (!part) return;

var pair = part.split('=');

var key = decodeURIComponent(pair[0].replace(/\+/g,' '));

var value = pair[1] ? decodeURIComponent(pair[1].replace(/\+/g,' ')) : '';

obj[key] = value;

});

return obj;

}

Asesment talent

https://smadt.net/linksite/talent6.html

https://docs.google.com/spreadsheets/d/1-kkhD-bz7fuL1C-_BWp2LWS64VdrJ_hawJGDHEosO38/edit?gid=0#gid=0

https://script.google.com/macros/s/AKfycby_g0vjMESWboG3AdBe5YifNPo4OfbztDzSahXnrugc4j4_6aoacAFmYF5AoVObRHZx/exec

function doPost(e) {
  try {
    const data = JSON.parse(e.postData.contents);
    const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Sheet1');

    sheet.appendRow([
      new Date(),
      data.nama_lengkap || '',
      data.kelas || '',
      data.minat_utama || '',
      data.hobi || '',
      data.preferensi_kerja || '',
      data.cara_pemecahan_masalah || '',
      data.skor_eq || '',
      data.skor_sq || '',
      data.catatan_tambahan || ''
    ]);

    return ContentService
      .createTextOutput(JSON.stringify({ status: 'success', message: 'Data tersimpan' }))
      .setMimeType(ContentService.MimeType.JSON);
  } catch (err) {
    return ContentService
      .createTextOutput(JSON.stringify({ status: 'error', message: err.message }))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

Header responsif di bagian paling atas halaman yang memuat nama situs “ESQ Talent DNA Assessment Portal” serta menu navigasi horizontal berisi dua tautan utama, yaitu Beranda dan Asesmen. Gunakan navbar Bootstrap dengan warna latar belakang biru lembut (bg-primary-subtle) dan teks berwarna kontras; pastikan menu berubah menjadi ikon hamburger pada tampilan mobile, sehingga tetap responsif di berbagai perangkat.
Hero Section ditempatkan tepat di bawah header, menampilkan latar belakang gambar lembut bertema pengembangan diri atau kepribadian, dengan teks utama besar berisi tagline seperti “Temukan Potensi Terbaikmu dengan ESQ Talent DNA” serta subjudul yang menjelaskan bahwa asesmen ini membantu siswa memahami kekuatan, karakter, dan bakat alami mereka; tambahkan tombol CTA bertuliskan “Mulai Asesmen Sekarang” yang menggulir otomatis ke bagian form asesmen di bawahnya.
Bagian Asesmen yang berisi form HTML dengan Bootstrap form components; form harus mencakup kolom input berikut:
- Nama lengkap
- NISN atau ID siswa
- Jenis kelamin (dropdown: Laki-laki / Perempuan)
- Kelas atau program studi
- Alamat email
- Pilihan minat atau kategori bakat (checkbox atau select multiple)
- Jawaban singkat tentang cita-cita atau motivasi hidup
- Tombol kirim dengan teks “Kirim Asesmen”
Pastikan form tersebut dihubungkan dengan Google Apps Script endpoint berikut:
https://script.google.com/macros/s/AKfycby_g0vjMESWboG3AdBe5YifNPo4OfbztDzSahXnrugc4j4_6aoacAFmYF5AoVObRHZx/exec
dengan metode POST, menggunakan fungsi JavaScript fetch() untuk mengirim data ke spreadsheet, serta tambahkan notifikasi alert yang menampilkan pesan sukses atau gagal pengiriman data.
Footer diletakkan di bagian bawah halaman dengan warna lembut yang senada dengan header; isi footer dengan teks seperti “© 2025 ESQ Talent DNA Program — Powered by Google Apps Script Integration” serta tautan kecil menuju dokumentasi atau kontak pengembang.

Gunakan layout Bootstrap berbasis container dan row agar setiap elemen sejajar dengan baik di berbagai ukuran layar; pastikan seluruh teks menggunakan font modern seperti Poppins atau Roboto, dengan ukuran yang proporsional antara judul, subjudul, dan teks isi; sertakan pula padding dan margin yang cukup untuk menjaga ruang visual yang lega; dan berikan transisi halus pada tombol CTA agar tampil elegan saat di-hover.”

Rabu, 29 Oktober 2025

Talent Mapping

https://smadt.net/linksite/asesmen2.html

https://docs.google.com/spreadsheets/d/1TxU1WjvI-HJlhEaw6fbtOXr0f5sMvrMvxn2-bf_gqXs/edit?gid=0#gid=0

Google Apps Script

function doPost(e) {
  const ss = SpreadsheetApp.openById('1TxU1WjvI-HJlhEaw6fbtOXr0f5sMvrMvxn2-bf_gqXs');
  const sheet = ss.getSheetByName('Formulir');

  const data = JSON.parse(e.postData.contents);
  sheet.appendRow([
    new Date(),
    data.nama,
    data.kelas,
    data.minat,
    data.hobi,
    data.kerja,
    data.masalah,
    data.eq,
    data.sq,
    data.catatan
  ]);

  return ContentService.createTextOutput(JSON.stringify({status: 'success'}))
    .setMimeType(ContentService.MimeType.JSON);
}

Asesmen2.html

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formulir ESQ Talent DNA</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 700px; margin: 40px auto; }
    h2 { text-align: center; color: #2d4a9d; }
    label { display: block; margin-top: 15px; font-weight: bold; }
    input, select, textarea { width: 100%; padding: 10px; margin-top: 5px; border-radius: 5px; border: 1px solid #ccc; }
    button { margin-top: 20px; padding: 12px 20px; background: #2d4a9d; color: white; border: none; border-radius: 5px; cursor: pointer; }
    button:hover { background: #1f3372; }
  </style>
</head>
<body>
  <h2>Formulir ESQ Talent DNA</h2>
  <form id="esqForm">
    <label>Nama Lengkap</label>
    <input type="text" name="nama" required>

    <label>Kelas</label>
    <input type="text" name="kelas" required>

    <label>Minat Utama</label>
    <input type="text" name="minat" required>

    <label>Hobi atau Aktivitas Favorit</label>
    <input type="text" name="hobi" required>

    <label>Apakah kamu lebih suka bekerja dalam tim atau mandiri?</label>
    <select name="kerja">
      <option value="Tim">Dalam Tim</option>
      <option value="Mandiri">Mandiri</option>
    </select>

    <label>Bagaimana cara kamu memecahkan masalah?</label>
    <select name="masalah">
      <option value="Logika dan Analisis">Logika dan Analisis</option>
      <option value="Kreativitas dan Inovasi">Kreativitas dan Inovasi</option>
      <option value="Empati dan Komunikasi">Empati dan Komunikasi</option>
    </select>

    <label>Skor EQ (1–10)</label>
    <input type="number" name="eq" min="1" max="10" required>

    <label>Skor SQ (1–10)</label>
    <input type="number" name="sq" min="1" max="10" required>

    <label>Catatan Tambahan</label>
    <textarea name="catatan"></textarea>

    <button type="submit">Kirim</button>
  </form>

  <script>
    document.getElementById('esqForm').addEventListener('submit', e => {
      e.preventDefault();
      const formData = new FormData(e.target);
      const data = Object.fromEntries(formData.entries());
      fetch('https://script.google.com/macros/s/AKfycbwkb0bdpHwIa3CnPUDZuzDHfTbBBydkfdTU8xPG8ShoBL5SsuQY9weGU9lavxzzDpUmbA/exec', {
        method: 'POST',
        body: JSON.stringify(data)
      })
      .then(res => res.json())
      .then(response => {
        alert('Data berhasil dikirim! Terima kasih.');
        e.target.reset();
      })
      .catch(err => alert('Terjadi kesalahan: ' + err));
    });
  </script>
</body>
</html>

Coding With Canva

https://www.youtube.com/watch?v=0KwBFf8Ib00

https://www.youtube.com/watch?v=nCqQA2LZdoo

https://www.youtube.com/watch?v=sGy_is-Z58k

https://www.youtube.com/watch?v=3xv7v2fhXwc

Pictoblox

https://www.youtube.com/watch?v=JP9Q4QTOMbE&list=PLx-4n0XGJycxlRN1vfXCn32AsLvTWgWAl

https://www.youtube.com/watch?v=LaBZuji3foY&list=PLx-4n0XGJycxlRN1vfXCn32AsLvTWgWAl&index=2

Sabtu, 25 Oktober 2025

Portal Guru

https://www.youtube.com/watch?v=fycDasa-WwU&list=PLHKoRSDzENWsj2m0beO1H0KWFaHMA4lFh&index=3

https://www.youtube.com/watch?v=HcEIIBmWL78&list=PLHKoRSDzENWsj2m0beO1H0KWFaHMA4lFh&index=2

https://www.youtube.com/watch?v=h1f4iJIKmUs&list=PLHKoRSDzENWsj2m0beO1H0KWFaHMA4lFh&index=1

Prompt Pembuatan Portal Guru

1. Prompt Dasar - Layout & Struktur

Buatkan halaman web portal guru untuk tingkat SMA di dalamnya berisi navigasi menu : Profil Guru, Jadwal Mengajar, Sillabus, Bahan Ajar dengan beda format (Modul PDF, Vide, Lembar Kerja, Soal Latihan) tampilan card beda warna, Absen Siswa. Header dengan judul "Portal Guru" dan informasi guru "Fajar Baskoro, S.Kom - Guru TIK". Gunakan Tailwind CSS dengan tema warna biru dan buat tampilan user friendly tersusun rapi baik teks maupun tombolnya. Jangan masukkan data sample!

2. Prompt Abesen Siswa - Filter & Daftar

Perbaarui halaman absen siswa dengan filter kelas (X, XI, XII) dan tanggal. Saat kelas dipilih, tampilkan nama siswa di kelas tersebut. Tambahkan tombol "Hadir Semua" di bagian atas, jika diklik maka semua status berubah jadi "Hadir" namun tetap bisa diedit dan disebelahnya diklik maka semua status berubah jadi "Hadir" namun tetap bisa diedit dan disebelahnya "Simpan Absen " untuk menyimpan data absen siswa yang nantinya dapat terhubung ke spreadsheet mengirimkan data berikut No, Nama Siswa, Kelas, Status, Tanggal. Ketika di klik muncul notifikasi pop-up "Absensi berhasil disimpan!" jika sukses. Jika gagal, tampilkan pesan error "Gagal menyimpan data, coba lagi!"

Buatkan tampilan daftar siswa dalam bentuk grid di Bawah area tombol filter. Setiap baris mahasiswa berisi : -Nama siswa dan kela -Empat tombol kecil dengan label: Hadir, Sakit, Izin, Alpa -Hanya satu tombol status yang bisa aktif untuk tiap siswa.

3. Absen Data siswa

Perbaharui data siswanya:

Kelas X

1. Aditya Prama

2. Rafiansyah Putra

3. Dwi Nugroho

4. Kevin Alvaro

5. M. Rizky Ramadhan

6. Siti Rahmawati

7. Alifah Nur Aini

8. Nabila Zahra

9. Ayu Kartika

10. Intan Permata Sari

Kelas XI

1. Reza Maulana

2. Fadli Akbar

3. Dimas Prasetyo

4. Andi Saputra

5. Yoga Ramdani

6. Melati Safira

7. Rina Anggraini

8. Citra Maharani

9. Tania Wulandari

10. Laila Nurul Azizah

Kelas XII

1. Arkan Fauzi

2. Fahri Akbar

3. Didik Prasetyo

4. Anton Saputra

5. Yoyok Ramdani

6. Shinta Amalia

7. Desi Oktavian

8. Putri Nirmala

9. Amanda Fitriani

10. Dela Puspitasari

Perbaharui Data siswa sudah diperbarui sesuai permintaan Anda. Sekarang setiap kelas memiliki 10 siswa dengan nama-nama yang baru:

Kelas X : Aditya Prama, Rafiansyah Putra, Dwi Nugroho, Kevin Alvaro, M. Rizky Ramadhan, Siti Rahmawati, Alifah Nur Aini, Nabila Zahra, Ayu Kartika, Intan Permata Sari

Kelas XI: Reza Maulana, Fadli Akbar, Dimas Prasetyo, Andi Saputra, Yoga Ramdani, Melati Safira, Rina Anggraini, Citra Maharani, Tania Wulandari, Laila Nurul Azizah

Kelas XII: Arkan Fauzi, Fahri Akbar, Didik Prasetyo, Anton Saputra, Yoyok Ramdani, Shinta Amalia, Desi Oktavian, Putri Nirmala, Amanda Fitriani, Dela Puspitasari

5. Pembuatan Script

Buatkan saya Script apps script yang di dalamnya terdapat No, Nama Siswa, Kelas, Status, Tanggal. Data dimasukkan sesuai sheet, di dalamnya terdapat 3 sheet yaitu Kelas X, Kelas XI, Kelas XII. Setting otomatis untuk penomoran ulang dan tambahkan garis pemisa antar tanggal. Buatkan script yang bisa otomatis membuatkan header dan mengirimkan data sesuai sheet.

6. Integrasi data dari canva Spreadsheet

Ketika klik Button Kirim Absensi, data terkirim otomatis ke link berikut :

https://script.google.com

7. Tambahkan Halaman Rekap Absensi pada menu absen siswa

Tambahkan rekap absensi siswa, data diambil dari link CSV spreadsheet :

Sheet1(Kelas X) https://docs.google.com

Sheet2(Kelas XI) https://docs.google.com

Sheet3(Kelas XII) https://docs.google.com

8. Prompt Profil Guru - Informasi Personal

Buat halaman profil guru dengan informasi: Nama "Fajar Baskoro, S.Kom", NIP kosong, mata pelajaran "TIK". pengalaman "5 Tahun", Pendidikan "S1 Institut Teknologi Sepuluh Nopember". Tambahkan section "Tentang Saya"

dengan deskripsi guru.

Tambahkan ke profil guru section informasi kontak: email "fajarbaskoro@gmail.com", telepon "08123456789" dengan icon.

9 Prompt Jadwal Mengajar - Tabel

Perbaharui menu jadwal mengajar dengan table berisi 5 jadwal: kolom Hari, Waktu, Mata Pelajaran, Kelas, Ruangan, terdapat tombol Aksi (Edit dan Hapus).

Tambahkan fungsi edit inline untuk tabel jadwal: tombol Edit mengubah text menjadi dropdown/input, tombol Simpan/Batal muncul saat edit mode, tombol Hapus dengan konfirmasi. Semua perubahan harus berfungsi dengan JavaScript.

10. Prompt Silabus - Grid Cards

Perbaharui menu silabus dengan tampilan grid untuk mata pelajaran TIK Kelas X,XI,XII, di dalam tampilan card terdapat deskripsi mata pelajaran, dan tombol download file silabus dari google drive

Jurnal Mengajar Chat GPT

https://smadt.net/linksite/indexjurnal.html

https://docs.google.com/spreadsheets/d/1GC5Dx1nStJj-NgTsrS_eF7hig0pTzqQ-4D1QRGcJ7ug/edit?gid=0#gid=0

Saya ingin membuat website jurnal mengajar dengan data di simpan pada google spreadsheet. Link google spreadsheet https://docs.google.com/spreadsheets/d/1GC5Dx1nStJj-NgTsrS_eF7hig0pTzqQ-4D1QRGcJ7ug/edit?gid=0#gid=0

Kolom Spreadsheet :

- Hari

- Tanggal

- Jam Ke

- Kelas

- Tujuan Pembelajaran

- Teknik Pembelajaran

- Asesmen

- Keterangan

Buatkan kode html dan google apps scriptnya. Jelaskan caranya

Indexjurnal.html

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Jurnal Mengajar</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 40px;
      background: #f8fafc;
    }
    h1 {
      text-align: center;
      color: #333;
    }
    form {
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      margin-bottom: 30px;
    }
    input, textarea, select {
      width: 100%;
      padding: 8px;
      margin: 5px 0 15px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
    button {
      background: #2563eb;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
    }
    button:hover {
      background: #1d4ed8;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      background: #fff;
    }
    th, td {
      border: 1px solid #ccc;
      padding: 8px;
      text-align: left;
    }
    th {
      background: #f1f5f9;
    }
  </style>
</head>
<body>
  <h1>📘 Jurnal Mengajar</h1>

  <form id="jurnalForm">
    <label>Hari:</label>
    <input type="text" name="Hari" required>

    <label>Tanggal:</label>
    <input type="date" name="Tanggal" required>

    <label>Jam Ke:</label>
    <input type="text" name="Jam Ke" required>

    <label>Kelas:</label>
    <input type="text" name="Kelas" required>

    <label>Tujuan Pembelajaran:</label>
    <textarea name="Tujuan Pembelajaran" required></textarea>

    <label>Teknik Pembelajaran:</label>
    <textarea name="Teknik Pembelajaran" required></textarea>

    <label>Asesmen:</label>
    <textarea name="Asesmen" required></textarea>

    <label>Keterangan:</label>
    <textarea name="Keterangan"></textarea>

    <button type="submit">Simpan</button>
  </form>

  <h2>📋 Data Jurnal</h2>
  <table id="dataTable">
    <thead>
      <tr>
        <th>Hari</th>
        <th>Tanggal</th>
        <th>Jam Ke</th>
        <th>Kelas</th>
        <th>Tujuan Pembelajaran</th>
        <th>Teknik Pembelajaran</th>
        <th>Asesmen</th>
        <th>Keterangan</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <script>
    const scriptURL = "https://script.google.com/macros/s/AKfycbxCMJ_LFzjCCFWjXGEOPVuzFzqD4vJV5ULrn_M7JOyRHW10iGQ_S0DQ18nFDWG56NHCPQ/exec"; // Ganti dengan URL Web App dari Apps Script

    // Simpan Data
    document.getElementById("jurnalForm").addEventListener("submit", async (e) => {
      e.preventDefault();

      const formData = new FormData(e.target);
      const data = Object.fromEntries(formData.entries());

      const response = await fetch(scriptURL, {
        method: "POST",
        body: JSON.stringify(data)
      });
      const result = await response.json();
      alert(result.message);
      e.target.reset();
      loadData();
    });

    // Ambil Data
    async function loadData() {
      const res = await fetch(scriptURL);
      const data = await res.json();

      const tbody = document.querySelector("#dataTable tbody");
      tbody.innerHTML = "";
      data.forEach(row => {
        const tr = document.createElement("tr");
        tr.innerHTML = `
          <td>${row.Hari}</td>
          <td>${row.Tanggal}</td>
          <td>${row["Jam Ke"]}</td>
          <td>${row.Kelas}</td>
          <td>${row["Tujuan Pembelajaran"]}</td>
          <td>${row["Teknik Pembelajaran"]}</td>
          <td>${row.Asesmen}</td>
          <td>${row.Keterangan}</td>
        `;
        tbody.appendChild(tr);
      });
    }

    loadData();
  </script>
</body>
</html>

Jurnal Apps Script

// === Google Apps Script ===

// Ganti dengan ID spreadsheet Anda

const SHEET_ID = '1GC5Dx1nStJj-NgTsrS_eF7hig0pTzqQ-4D1QRGcJ7ug';

const SHEET_NAME = 'Sheet1'; // ganti sesuai nama sheet

// Fungsi untuk menerima request (API)

function doGet(e) {

const sheet = SpreadsheetApp.openById(SHEET_ID).getSheetByName(SHEET_NAME);

const data = sheet.getDataRange().getValues();

const headers = data.shift();

const rows = data.map(r => {

let obj = {};

headers.forEach((h, i) => obj[h] = r[i]);

return obj;

});

return ContentService.createTextOutput(JSON.stringify(rows))

.setMimeType(ContentService.MimeType.JSON);

}

// Fungsi untuk menulis data baru (POST)

function doPost(e) {

const sheet = SpreadsheetApp.openById(SHEET_ID).getSheetByName(SHEET_NAME);

const body = JSON.parse(e.postData.contents);

// Urutan kolom sesuai header

sheet.appendRow([

body.Hari,

body.Tanggal,

body['Jam Ke'],

body.Kelas,

body['Tujuan Pembelajaran'],

body['Teknik Pembelajaran'],

body.Asesmen,

body.Keterangan

]);

return ContentService.createTextOutput(

JSON.stringify({ status: 'success', message: 'Data berhasil disimpan!' })

).setMimeType(ContentService.MimeType.JSON);

}

LINK Appscript

https://script.google.com/macros/s/AKfycbxCMJ_LFzjCCFWjXGEOPVuzFzqD4vJV5ULrn_M7JOyRHW10iGQ_S0DQ18nFDWG56NHCPQ/exec

Code Studio

Kamis, 30 Oktober 2025

Survey Cita Cita

Prompt

PROMPT

Asesment talent

Rabu, 29 Oktober 2025

Talent Mapping

Coding With Canva

Pictoblox

Sabtu, 25 Oktober 2025

Portal Guru

Prompt Pembuatan Portal Guru

Jurnal Mengajar Chat GPT

Looker - Kelas Visualisasi Data

Laporkan Penyalahgunaan