Sabtu, 27 Desember 2025

Variabel dan Tipe Data dalam Python

Dalam pemrograman Python, variabel digunakan untuk menyimpan data. Setiap data yang disimpan memiliki tipe data tertentu, seperti angka, teks, atau nilai benar/salah.

Pengertian Variabel

Variabel adalah tempat untuk menyimpan nilai/data dalam program.

Contoh:


nama = "Andi"
umur = 16

📌 nama dan umur adalah variabel
📌 "Andi" dan 16 adalah nilai

Aturan Penulisan Variabel

Penulisan variabel dalam Python harus mengikuti aturan berikut:

Tidak boleh diawali angka
Tidak boleh mengandung spasi
Tidak boleh menggunakan simbol khusus (@, #, $, dll)
Gunakan huruf kecil dan underscore (_) untuk keterbacaan

Contoh variabel yang benar:


nama_siswa
nilai_ujian
total_harga

Contoh variabel yang salah:


2nilai
nama siswa
total-harga

Tipe Data dalam Python

Berikut tipe data dasar yang sering digunakan:

1️⃣ Integer (int)

Digunakan untuk bilangan bulat.


umur = 17
jumlah_siswa = 30

2️⃣ Float

Digunakan untuk bilangan desimal.


tinggi = 165.5
berat = 50.2

3️⃣ String (str)

Digunakan untuk teks atau tulisan.


nama = "Budi"
kelas = "X IPA 1"

4️⃣ Boolean

Digunakan untuk nilai benar atau salah.


lulus = True
aktif = False

Menampilkan Variabel

Gunakan fungsi print() untuk menampilkan nilai variabel.


nama = "Siti"
umur = 16

print(nama)
print(umur)

Mengetahui Tipe Data

Gunakan fungsi type() untuk mengetahui tipe data suatu variabel.


nilai = 80
print(type(nilai))

Kesimpulan

Variabel digunakan untuk menyimpan data, sedangkan tipe data menentukan jenis data tersebut. Memahami variabel dan tipe data sangat penting sebagai dasar dalam belajar pemrograman Python.

Latihan Mandiri

Buat variabel untuk menyimpan:
- Nama siswa
- Umur
- Nilai rata-rata
- Status kelulusan
Tampilkan semua variabel tersebut menggunakan print()

Pengenalan Python Dasar untuk Pemula: Mudah, Seru, dan Powerful

Python adalah bahasa pemrograman yang sangat populer dan banyak digunakan di dunia pendidikan maupun industri. Python terkenal karena sintaksnya sederhana, mudah dipahami, dan cocok untuk pemula.

Apa Itu Python?

Python adalah bahasa pemrograman tingkat tinggi yang digunakan untuk berbagai keperluan seperti:

Pemrograman dasar
Data science
Kecerdasan buatan (AI)
Pengembangan web
Otomatisasi tugas

Python banyak digunakan di sekolah karena mudah dipelajari dan langsung bisa dipraktikkan.

Kelebihan Bahasa Python

Beberapa kelebihan Python antara lain:

Sintaks sederhana dan mudah dibaca
Cocok untuk pemula
Banyak library (pustaka) siap pakai
Digunakan secara luas di dunia kerja

Contoh Program Python Sederhana

Berikut contoh program Python pertama:


print("Halo Dunia!")
print("Selamat datang di pembelajaran Python")

📌 Program di atas akan menampilkan teks ke layar.

Contoh Program Input dan Output


nama = input("Masukkan nama Anda: ")
print("Halo", nama)

📌 Program ini meminta input dari pengguna lalu menampilkannya kembali.

Contoh Percabangan (If)


nilai = int(input("Masukkan nilai: "))

if nilai >= 75:
    print("Lulus")
else:
    print("Tidak Lulus")

📌 Percabangan digunakan untuk pengambilan keputusan.

Contoh Perulangan (Looping)


for i in range(1, 6):
    print("Belajar Python ke-", i)

📌 Perulangan digunakan untuk menjalankan perintah berulang kali.

Kesimpulan

Python adalah bahasa pemrograman yang sangat cocok untuk pemula. Dengan Python, siswa dapat belajar logika, algoritma, dan pemrograman secara bertahap dan menyenangkan.

Referensi Belajar Python

Pengenalan JavaScript Dasar: Membuat Website Lebih Interaktif

JavaScript adalah salah satu bahasa pemrograman paling populer yang digunakan untuk membuat website menjadi interaktif dan dinamis. Jika HTML berfungsi sebagai struktur dan CSS sebagai tampilan, maka JavaScript berperan sebagai otak yang mengatur perilaku website.

Apa Itu JavaScript?

JavaScript adalah bahasa pemrograman berbasis teks yang dijalankan di browser. JavaScript memungkinkan website merespons aksi pengguna seperti klik tombol, mengisi formulir, atau menampilkan pesan tertentu.

Contoh penggunaan JavaScript dalam kehidupan sehari-hari:

Validasi form login
Popup notifikasi
Kalkulator online
Game berbasis web sederhana

Fungsi JavaScript dalam Website

Beberapa fungsi utama JavaScript antara lain:

Membuat website lebih interaktif
Mengolah data dari pengguna
Mengontrol elemen HTML dan CSS
Membuat aplikasi web sederhana

Contoh JavaScript Sederhana

Berikut contoh program JavaScript untuk menampilkan pesan:


<!DOCTYPE html>
<html>
<head>
  <title>Contoh JavaScript</title>
</head>
<body>

<h2>Belajar JavaScript</h2>
<button onclick="tampilPesan()">Klik Saya</button>

<script>
  function tampilPesan() {
    alert("Halo! Selamat belajar JavaScript 🚀");
  }
</script>

</body>
</html>

📌 Saat tombol diklik, akan muncul pesan popup.

Kelebihan JavaScript

Mudah dipelajari oleh pemula
Didukung semua browser
Bisa dikombinasikan dengan HTML & CSS
Banyak digunakan di dunia kerja

Kesimpulan

JavaScript adalah bahasa pemrograman penting yang wajib dipelajari dalam pengembangan web. Dengan JavaScript, website menjadi lebih hidup dan interaktif. Bagi pemula, JavaScript sangat cocok dipelajari setelah HTML dan CSS.

Referensi Belajar

https://www.w3schools.com/js/
https://developer.mozilla.org/id/docs/Web/JavaScript

Kamis, 25 Desember 2025

MODUL AJAR / RPP INFORMATIKA SMA Materi: Algoritma & Pemrograman (Python Dasar)

MODUL AJAR / RPP INFORMATIKA SMA

Materi: Algoritma & Pemrograman (Python Dasar)

1. Informasi Umum

Nama Sekolah: [Isi Nama Sekolah]
Kelas / Semester: X (Sepuluh) / Genap
Mata Pelajaran: Informatika
Alokasi Waktu: 2 x 45 Menit (1 Pertemuan)
Materi Pokok: Mengenal Variabel, Tipe Data, dan Input/Output di Python.

2. Tujuan Pembelajaran

Melalui kegiatan praktik dan diskusi, peserta didik diharapkan mampu:

Menjelaskan konsep variabel dan tipe data dalam pemrograman Python.
Menggunakan instruksi print() untuk menampilkan output.
Menggunakan instruksi input() untuk mengambil data dari pengguna.
Membuat program perhitungan sederhana untuk menyelesaikan masalah sehari-hari.

3. Materi Pembelajaran

Pengenalan sintaks Python.
Variabel sebagai penyimpan data.
Tipe data dasar: String (teks), Integer (bilangan bulat), Float (bilangan desimal).
Fungsi Input dan Output Dasar.

4. Metode Pembelajaran

Pendekatan: Student Centered Learning.
Model: Problem Based Learning (PBL) atau Discovery Learning.
Metode: Demonstrasi, Praktik Mandiri (Hands-on), dan Diskusi.

5. Langkah-Langkah Pembelajaran

Kegiatan	Deskripsi Kegiatan	Waktu
Pendahuluan	1. Guru memberi salam dan memotivasi siswa tentang pentingnya coding di masa depan. 2. Apersepsi: Mengingatkan kembali materi "Algoritma" di Semester 1. 3. Menyampaikan tujuan pembelajaran hari ini.	10 Menit
Kegiatan Inti	1. Orientasi: Guru mendemonstrasikan cara menulis kode sederhana `print("Halo Dunia")` di depan kelas. 2. Eksplorasi: Siswa diminta membuka LKPD yang ada di blog/lembar kerja. 3. Praktik: Siswa mencoba membuat program input nama dan perhitungan luas (sesuai LKPD). 4. Pembimbingan: Guru berkeliling untuk membantu siswa yang mengalami error (bug) pada kodenya.	65 Menit
Penutup	1. Guru dan siswa melakukan refleksi tentang kesulitan yang dihadapi. 2. Menyimpulkan perbedaan tipe data string dan integer. 3. Menginfokan materi minggu depan: "Percabangan IF-ELSE". 4. Menutup dengan doa/salam.	15 Menit

6. Penilaian (Asesmen)

Asesmen Diagnostik: Tanya jawab lisan di awal pertemuan tentang variabel.
Asesmen Formatif: Observasi saat siswa melakukan praktik menggunakan LKPD.
Asesmen Sumatif: Hasil akhir program Python yang dibuat siswa (apakah berjalan tanpa error?).

7. Media & Sumber Belajar

Laptop/Komputer Laboratorium.
Editor Kode (VS Code / Pydroid 3 / Google Colab).
Blog: Informatika untuk Semua (sebagai materi referensi).

LKPD (Lembar Kerja Peserta Didik) untuk materi Algoritma dan Pemrograman (Python) kelas X Semester 2.

LEMBAR KERJA PESERTA DIDIK (LKPD)

Mata Pelajaran: Informatika

Materi: Pemrograman Dasar dengan Python

Kelas/Semester: X / Genap

Topik: Variabel, Tipe Data, dan Input/Output Dasar

A. Tujuan Pembelajaran

Siswa dapat memahami cara kerja bahasa pemrograman Python.
Siswa dapat menggunakan fungsi input dan output (print dan input).
Siswa dapat mengolah data sederhana menggunakan variabel dan tipe data.

B. Alat dan Bahan

Komputer/Laptop (dengan VS Code atau IDLE Python) ATAU
Smartphone (dengan aplikasi Pydroid 3 atau melalui website programiz.com/python-programming/online-compiler/ atau https://colab.research.google.com/)

C. Ringkasan Materi

print(): Digunakan untuk menampilkan teks/hasil ke layar.
input(): Digunakan untuk mengambil data dari user.
Variabel: Tempat menyimpan data. Contoh: nama = "Budi"
Tipe Data:
- str (String): Teks.
- int (Integer): Angka bulat.
- float: Angka desimal.

D. Langkah Kerja (Tugas Praktik)

Tugas 1: Program "Halo Dunia"

Buatlah kode program untuk menampilkan perkenalan diri kalian.

Buka aplikasi Python kalian.

Ketikkan kode berikut:

print("Selamat Datang di Dunia Pemrograman!")
print("Nama saya adalah [Isi Nama Kalian]")
print("Saya siap belajar Python!")

Jalankan (Run) dan amati hasilnya.

Tugas 2: Menggunakan Input User

Buatlah program interaktif sederhana yang bisa menyapa penggunanya.

Ketikkan kode berikut:

Python
nama = input("Siapa nama kamu? ")
hobi = input("Apa hobi kamu? ")

print("Halo " + nama + ", wah seru sekali ya hobi " + hobi + " itu!")

Jalankan program tersebut, lalu masukkan nama dan hobi kalian saat diminta.

Tugas 3: Perhitungan Sederhana (Luas Persegi Panjang)

Kita akan mencoba menghitung luas bangun datar menggunakan logika matematika.

Ketikkan kode berikut:

Python
panjang = int(input("Masukkan Panjang: "))
lebar = int(input("Masukkan Lebar: "))

luas = panjang * lebar

print("Luas persegi panjang tersebut adalah:", luas)

Amati mengapa kita menggunakan int(...) sebelum input. (Petunjuk: input secara otomatis dianggap sebagai teks/string).

E. Lembar Observasi & Diskusi

Apa fungsi dari tanda petik (" ") pada perintah print?
Jawaban: ....................................................................................
Apa yang terjadi jika pada Tugas 3 kamu memasukkan huruf saat program meminta angka? Jelaskan!
Jawaban: ....................................................................................
Tuliskan kesimpulanmu tentang bagaimana cara kerja variabel di Python!
Jawaban: ....................................................................................

Tulis Jawaban di Buku Tulis Informatika

Materi Informatika Kelas X Semester 2: Belajar Coding Seru dengan Python!

Halo teman-teman kelas X! Selamat datang di Semester 2!

Jika di semester 1 kita sudah belajar tentang teori sistem komputer dan jaringan, di semester 2 ini kita akan mulai "beraksi". Kita akan belajar salah satu materi yang paling ditunggu-tunggu (dan mungkin bikin deg-degan), yaitu Algoritma dan Pemrograman.

Di kurikulum Informatika SMA saat ini, bahasa pemrograman yang dipelajari adalah Python. Kenapa Python? Karena bahasanya sangat mirip dengan bahasa Inggris manusia, sehingga mudah dipelajari pemula.

Apa yang Akan Kita Pelajari di Semester 2?

Secara garis besar, untuk materi pemrograman, kita akan mempelajari beberapa konsep dasar berikut:

1. Variabel dan Tipe Data

Ibarat sebuah kotak, Variabel adalah nama kotaknya, dan Isinya adalah data.

Contoh: nama = "Budi" (Variabelnya adalah nama, datanya adalah teks "Budi").
Tipe data bisa berupa angka (Integer), teks (String), atau bilangan desimal (Float).

2. Struktur Kontrol Perulangan (Looping)

Komputer itu hebat karena tidak pernah lelah melakukan hal yang sama berulang kali. Di Python, kita akan belajar cara membuat perintah agar komputer melakukan sesuatu berkali-kali secara otomatis menggunakan for atau while.

3. Struktur Kontrol Percabangan (Kondisi IF-ELSE)

Ini adalah cara kita membuat program agar bisa "berpikir" dan mengambil keputusan.

Contoh: JIKA nilai di atas 75, MAKA tampilkan "Lulus". JIKA TIDAK, tampilkan "Remedial".

Mengapa Harus Belajar Coding di SMA?

Bukan sekadar untuk jadi programmer, belajar coding membantu kita melatih Logika dan Problem Solving. Kamu akan belajar bagaimana caranya memecah masalah besar menjadi langkah-langkah kecil yang bisa dimengerti oleh mesin.

Persiapan Memulai

Untuk kalian yang ingin mencoba di rumah, kalian tidak harus punya komputer spek tinggi, lho! Kalian bisa mulai latihan coding Python lewat:

Komputer/Laptop: Install Python IDLE atau pakai VS Code.
Smartphone: Download aplikasi Pydroid 3 di Playstore.
Online: Gunakan Google Colab (langsung lewat browser tanpa install apapun).

Kesimpulan

Jangan takut duluan melihat kode-kode yang terlihat rumit. Pemrograman itu seperti bermain puzzle; setelah kamu paham polanya, kamu akan ketagihan!

Di postingan selanjutnya, kita akan langsung praktik membuat program pertama kita: "Program Kalkulator Sederhana". Jadi, pastikan kamu ikuti terus update di blog ini ya!

Siapa yang sudah pernah coba coding sebelumnya? Atau masih bingung cara install-nya? Tanya-tanya di kolom komentar ya!

Mengenal CSS: Rahasia Membuat Tampilan Website Jadi Keren dan Menarik

Halo semuanya! Setelah sebelumnya kita belajar tentang HTML sebagai kerangka dasar sebuah halaman web, kali ini kita akan membahas "pasangan sejatinya", yaitu CSS.

Pernahkah kalian melihat website yang tampilannya sangat rapi, warnanya indah, dan tata letaknya nyaman dipandang? Itu semua adalah hasil kerja dari CSS. Yuk, kita kupas tuntas apa itu CSS dan mengapa kita membutuhkannya!

Apa Itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. Jika kita mengibaratkan sebuah website sebagai sebuah bangunan, maka:

HTML adalah struktur bangunannya (dinding, lantai, atap).
CSS adalah cat tembok, hiasan lampu, model jendela, dan furniturnya agar rumah tersebut terlihat cantik.

Tanpa CSS, semua website di internet akan terlihat sangat polos, hanya berisi teks hitam di atas latar belakang putih, persis seperti dokumen skripsi.

Mengapa CSS Sangat Penting?

Mengatur Tampilan: Kamu bisa mengubah warna teks, jenis font, ukuran gambar, hingga warna latar belakang.
Mengatur Tata Letak (Layout): CSS memungkinkan kita membagi halaman menjadi kolom-kolom, mengatur posisi tombol, atau membuat menu navigasi yang keren.
Responsif: Dengan CSS, kita bisa membuat website agar tampilannya tetap rapi saat dibuka di HP (Smartphone) maupun di komputer.
Efisien: Kamu bisa mengatur gaya untuk seluruh halaman web hanya dengan satu file CSS saja.

3 Cara Memasang CSS pada HTML

Ada tiga cara umum untuk menyisipkan CSS ke dalam kode HTML kita:

Inline CSS: Menuliskan kode CSS langsung di dalam tag HTML. Contoh: <h1 style="color: blue;">Halo Dunia</h1>
Internal CSS: Menuliskan kode CSS di bagian atas file HTML, tepatnya di dalam tag <style>.
External CSS: Cara yang paling direkomendasikan. Kita membuat file terpisah dengan ekstensi .css (misalnya: style.css) lalu memanggilnya ke dalam file HTML.

Contoh Sederhana Kode CSS

Mari kita coba lihat bagaimana CSS mengubah tampilan teks. Misalnya kita ingin membuat judul tulisan berwarna merah dan berada di tengah halaman:

CSS
h1 {
  color: red;
  text-align: center;
  font-family: Arial, sans-serif;
}

Dengan kode di atas, semua tag <h1> di website kamu otomatis akan berubah menjadi merah, rata tengah, dan menggunakan font Arial. Mudah, bukan?

Kesimpulan

CSS adalah keterampilan wajib bagi siapa saja yang ingin belajar membuat website. Dengan menguasai CSS, kamu punya kekuatan penuh untuk mengubah tampilan website yang biasa saja menjadi luar biasa.

Di postingan selanjutnya, kita akan coba praktik langsung "Menghias Formulir HTML" yang sudah kita buat sebelumnya menggunakan CSS. Jadi, jangan sampai ketinggalan ya!

Punya pertanyaan tentang CSS? Tulis di kolom komentar di bawah ya!

Jumat, 19 Desember 2025

Latihan Praktik HTML: Membuat Formulir Kontak Modern & Responsif

Halo Semuanya!

Karena kalian sudah memahami dasar-dasar HTML seperti apa itu tag, atribut, dan struktur dasar halaman, kali ini kita tidak akan membahas teori panjang lebar. Kita akan langsung praktik.

Hari ini kita akan membuat sebuah Halaman Kontak (Contact Form). Tapi bukan sekadar kotak isian biasa, kita akan menggunakan fitur HTML5 agar formulir ini memiliki validasi otomatis (misalnya: menolak jika email tidak valid) tanpa perlu coding JavaScript.

Apa yang Akan Kita Buat?

Sebuah formulir yang berisi:

Input Nama Lengkap.
Input Email (dengan validasi format).
Dropdown untuk memilih Subjek pesan.
Area teks untuk pesan.
Tombol kirim yang interaktif.

Kode Sumber (Source Code)

Salin kode di bawah ini, simpan sebagai file .html (misalnya: latihan_form.html), lalu buka di browser kalian.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Latihan Praktik HTML - Contact Form</title>
    <style>
        /* Sedikit CSS agar tampilan tidak kaku */
        body { font-family: sans-serif; background-color: #f4f4f4; padding: 20px; }
        .container { max-width: 500px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
        h2 { text-align: center; color: #333; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input, select, textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
        button { width: 100%; padding: 10px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
        button:hover { background-color: #218838; }
    </style>
</head>
<body>

    <div class="container">
        <h2>Hubungi Kami</h2>
        <p>Silakan isi formulir di bawah ini untuk pertanyaan atau kerjasama.</p>
        
        <form action="#" method="POST">
            
            <div class="form-group">
                <label for="nama">Nama Lengkap:</label>
                <input type="text" id="nama" name="nama" placeholder="Masukkan nama Anda" required>
            </div>

            <div class="form-group">
                <label for="email">Alamat Email:</label>
                <input type="email" id="email" name="email" placeholder="contoh@email.com" required>
            </div>

            <div class="form-group">
                <label for="subjek">Subjek Pesan:</label>
                <select id="subjek" name="subjek">
                    <option value="tanya">Pertanyaan Umum</option>
                    <option value="kerjasama">Penawaran Kerjasama</option>
                    <option value="lapor">Lapor Bug/Masalah</option>
                </select>
            </div>

            <div class="form-group">
                <label for="pesan">Pesan Anda:</label>
                <textarea id="pesan" name="pesan" rows="5" placeholder="Tuliskan pesan Anda di sini..." required></textarea>
            </div>

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

</body>
</html>

Bedah Fitur (Apa yang Baru?)

Jika kalian perhatikan kode di atas, ada beberapa atribut HTML yang sangat berguna dalam praktik dunia nyata:

type="email": Cobalah mengisi kolom email dengan teks asal (tanpa simbol @). Browser akan otomatis memunculkan peringatan "Please include an '@' in the email address". Ini fitur bawaan HTML5, jadi kita tidak perlu pusing membuat validasi manual.
required: Atribut ini memaksa pengguna untuk mengisi kolom tersebut. Jika dikosongkan dan tombol "Kirim" ditekan, browser akan menolak pengiriman data.
placeholder: Teks samar di dalam kotak input yang memberikan petunjuk kepada pengguna tentang apa yang harus ditulis (contoh: "contoh@email.com").
select & option: Elemen ini membuat menu dropdown. Sangat penting dipahami karena menghemat ruang layar dibandingkan menampilkan semua pilihan sekaligus.

Tantangan Untukmu!

Kode di atas sudah jadi, tapi masih bisa dikembangkan. Coba lakukan modifikasi berikut untuk melatih skill kalian:

Tambahkan Input Tanggal: Gunakan <input type="date"> agar pengguna bisa memilih tanggal janji temu.
Tambahkan Input Nomor HP: Gunakan <input type="tel">.
Ubah Warna: Coba ubah warna tombol dari hijau menjadi biru dengan mengedit bagian <style>.

Selamat mencoba dan happy coding! Jangan lupa bagikan hasil oprekan kalian di kolom komentar.

Tips Cara Posting di Blogger:

Masuk ke dashboard Blogger.
Klik Postingan Baru.
Pilih mode Tampilan HTML (ikon pensil/kurung siku di kiri atas editor), bukan Tampilan Menulis.
Paste kode di atas jika ingin menampilkan demonya langsung, atau gunakan fitur Blockquote / Code snippet jika ingin menampilkan kodenya sebagai teks bacaan.
Untuk kode yang ditampilkan agar bisa dicopy pembaca, pastikan kamu menggunakan syntax highlighter atau masukkan ke dalam tag <pre><code> ... </code></pre> agar rapi.

Apakah kamu ingin saya buatkan versi lanjutannya yang menghubungkan formulir ini ke Google Sheets (sebagai database sederhana)?

Selasa, 16 Desember 2025

Source Code Gratis: Sistem Presensi Siswa Berbasis NIS & GPS (Tanpa MySQL, Support Import Excel)

Halo Sobat Pendidikan! Kali ini saya akan membagikan sebuah aplikasi Sistem Presensi Siswa V23 yang sangat ringan. Aplikasi ini tidak menggunakan database MySQL yang rumit, melainkan menggunakan format JSON, sehingga sangat mudah dipindahkan antar laptop atau di-online-kan ke hosting.

🌟 Fitur Utama:

Panel Admin: Kelola data siswa, guru, dan jadwal pelajaran.
Import Excel: Input ratusan data siswa dalam sekali klik (tidak perlu ketik manual).
Panel Siswa: Absensi menggunakan NIS dan deteksi lokasi GPS otomatis.
Cetak Surat: Otomatis cetak surat izin keluar/terlambat dengan QR Code.
Tanpa MySQL: Cukup pakai PHP standar, data tersimpan aman di file JSON.

🛠️ Panduan Instalasi di Laptop (Localhost)

Untuk menjalankan aplikasi ini di laptop, kita membutuhkan bantuan software XAMPP. Berikut langkah-langkahnya:

1. Instalasi XAMPP

Download XAMPP di situs resminya (Apache Friends).
Instal seperti biasa. Setelah selesai, buka XAMPP Control Panel.
Klik tombol Start pada bagian Apache. (Kita tidak butuh MySQL, jadi cukup Apache saja yang aktif).

2. Memasang Source Code

Download file project (Link di bawah).
Ekstrak file ZIP-nya.
Buka folder C:\xampp\htdocs.
Buat folder baru bernama presensi, lalu pindahkan semua isi source code ke dalam folder tersebut.

3. Menjalankan Aplikasi

Buka browser (Chrome/Edge), ketik alamat:

Untuk Siswa (Absen): localhost/presensi/index.html

Untuk Admin (Kelola Data): localhost/presensi/admin.html

👨‍🏫 Cara Cepat Input Data dari Excel

Sesuai pedoman, kamu tidak perlu mengedit file kodingan. Cukup gunakan fitur Import:

Buka halaman Admin (admin.html).
Login dengan user: admin dan password: admin123.
Masuk ke menu Data Master > Siswa.
Klik tombol Import Excel.
Siapkan Excel dengan urutan kolom: Nama, NIS, NISN, Kelas.
Upload, dan data siswa akan langsung sinkron dengan halaman absen siswa.

🌐 Cara Online-kan Aplikasi (Hosting)

Jika ingin diakses siswa dari HP masing-masing di rumah atau sekolah:

Upload semua file ke folder public_html di hosting kamu.
Penting: Pastikan folder uploads dan semua file .json memiliki permission 777 (Read/Write) agar server bisa menyimpan data absen.

📥 Download Source Code

Silakan ambil source code lengkapnya melalui link di bawah ini:

[ TOMBOL DOWNLOAD GOOGLE DRIVE : https://drive.google.com/drive/folders/1NSOfZGGMsqWEK8YioruWl6VYWhtGZfF4?usp=sharing ]

Catatan: Jika ada kendala saat menjalankan GPS, pastikan kamu mengaksesnya melalui protokol HTTPS (jika online) atau klik "Allow" pada browser saat meminta izin lokasi.

Penutup: Semoga aplikasi sederhana ini bermanfaat untuk digitalisasi di sekolah teman-teman. Jika ada pertanyaan mengenai cara modifikasi kodingannya, silakan tulis di kolom komentar ya!