Modul Praktis: Membangun & Merilis Website Sekolah dari Nol
Modul ini dirancang bertahap agar Anda dapat langsung mempraktikkan pembuatan website sekolah berbasis WordPress (CMS paling stabil dan mudah dikelola untuk instansi pendidikan).
Phase 1: Persiapan & Perencanaan
Sebelum menyentuh teknis, siapkan fondasi data dan identitas web.
Identitas Domain: Pilih nama domain resmi (disarankan .sch.id untuk sekolah di Indonesia agar terpercaya).
Struktur Menu Utama:
Beranda (Highlight, Sambutan Kepsek, Pengumuman)
Profil (Sejarah, Visi-Misi, Struktur Organisasi, Fasilitas)
Akademik (Kurikulum, Ekstrakurikuler, Kalender Akademik)
Berita/Galeri (Kegiatan Sekolah, Prestasi)
Kontak/PPDB (Lokasi, Formulir Pendaftaran)
Phase 2: Domain, Hosting & Instalasi
Sewa Hosting & Domain:
Siapkan dokumen verifikasi domain .sch.id (KTP Penanggung Jawab, Surat Permohonan Kepala Sekolah, SK Operasional Sekolah).
Pilih penyedia hosting lokal yang mendukung instalasi otomatis (Cpanel/DirectAdmin).
Instalasi WordPress:
Masuk ke Control Panel Hosting (cPanel).
Buka menu Softaculous / App Installer $\rightarrow$ Pilih WordPress $\rightarrow$ Klik Install.
Isi Site Name (contoh: SMA Negeri 1 Jakarta), atur Username dan Password admin.
Phase 3: Desain & Tampilan (UI/UX)
Phase 4: Menyusun Konten Utama
Buat Halaman Utama (Homepage):
Hero Section: Foto banner sekolah resolusi tinggi + Slogan.
Sambutan Kepala Sekolah: Foto Kepsek & narasi singkat.
Statistik: Jumlah Siswa, Guru, dan Prestasi.
Buat Menu Navigasi:
Buka Tampilan > Menu.
Buat menu baru bernama "Navigasi Utama", centang lokasi ke Header/Primary Menu, lalu susun urutan halaman.
Phase 5: Pengujian (Quality Assurance) & Peluncuran
Uji Tampilan Mobile: Buka web via ponsel untuk memastikan tampilan tidak berantakan.
Uji Kecepatan & Keamanan: Instal plugin LiteSpeed Cache untuk mempercepat loading dan Wordfence untuk keamanan.
Go Live: Hubungkan domain utama, aktifkan SSL (HTTPS) gratis dari hosting, dan daftarkan ke Google Search Console agar muncul di pencarian Google.
Sesi Interaktif Checkpoint:
Sampai di tahap mana Anda saat ini? Apakah Anda sudah memiliki domain/hosting, atau ingin kita mulai detailnya dari pemeliharaan dokumen domain .sch.id terlebih dahulu?
Berikut adalah source code dasar dan struktur yang bisa Anda gunakan jika ingin membangun website sekolah kustom (menggunakan HTML, CSS/Tailwind, dan JavaScript) tanpa WordPress, atau sebagai struktur tema kustom.
1. File Utama (index.html)
HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SMA Negeri 1 Nusantara</title>
<!-- CSS Framework: Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="style.css">
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
<!-- Header & Navigasi -->
<header class="bg-blue-900 text-white sticky top-0 z-50 shadow-md">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-yellow-400 rounded-full flex items-center justify-center font-bold text-blue-900">SCH</div>
<h1 class="text-xl font-bold">SMAN 1 Nusantara</h1>
</div>
<!-- Menu Utama -->
<nav class="hidden md:flex space-x-6 font-medium">
<a href="#beranda" class="hover:text-yellow-400 transition">Beranda</a>
<a href="#profil" class="hover:text-yellow-400 transition">Profil</a>
<a href="#akademik" class="hover:text-yellow-400 transition">Akademik</a>
<a href="#berita" class="hover:text-yellow-400 transition">Berita</a>
<a href="#kontak" class="hover:text-yellow-400 transition">Kontak</a>
</nav>
<a href="#ppdb" class="hidden md:block bg-yellow-400 text-blue-900 px-4 py-2 rounded-lg font-bold hover:bg-yellow-300 transition">PPDB Online</a>
</div>
</header>
<!-- Hero Section -->
<section id="beranda" class="bg-gradient-to-r from-blue-900 to-blue-700 text-white py-20 px-4 text-center">
<div class="max-w-3xl mx-auto">
<h2 class="text-4xl md:text-5xl font-extrabold mb-4">Mewujudkan Generasi Unggul & Berkarakter</h2>
<p class="text-lg text-blue-100 mb-8">Selamat datang di portal resmi SMA Negeri 1 Nusantara. Tempat tumbuh dan berkembangnya calon pemimpin masa depan.</p>
<div class="flex justify-center gap-4">
<a href="#profil" class="bg-white text-blue-900 px-6 py-3 rounded-lg font-semibold shadow hover:bg-gray-100">Jelajahi Profil</a>
<a href="#ppdb" class="bg-yellow-400 text-blue-900 px-6 py-3 rounded-lg font-semibold shadow hover:bg-yellow-300">Daftar Sekarang</a>
</div>
</div>
</section>
<!-- Sambutan Kepala Sekolah -->
<section id="profil" class="py-16 container mx-auto px-4">
<div class="grid md:grid-cols-2 gap-8 items-center">
<div class="text-center md:text-left">
<img src="https://via.placeholder.com/400x400" alt="Foto Kepala Sekolah" class="rounded-2xl shadow-lg mx-auto md:mx-0 w-3/4 md:w-full">
</div>
<div>
<span class="text-blue-900 font-bold uppercase tracking-wider">Sambutan</span>
<h3 class="text-3xl font-bold mb-4">Kepala Sekolah SMAN 1 Nusantara</h3>
<p class="text-gray-600 mb-4 leading-relaxed">
"Pendidikan bukan sekadar mentransfer ilmu, tetapi membentuk karakter dan mempersiapkan siswa menghadapi tantangan global dengan integritas."
</p>
<p class="font-semibold text-gray-800">Drs. H. Ahmad Dahlan, M.Pd.</p>
</div>
</div>
</section>
<!-- Statistik Sekolah -->
<section class="bg-blue-900 text-white py-12">
<div class="container mx-auto px-4 grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
<div class="p-4">
<div class="text-4xl font-extrabold text-yellow-400">1,200+</div>
<div class="text-sm mt-1">Siswa Aktif</div>
</div>
<div class="p-4">
<div class="text-4xl font-extrabold text-yellow-400">85</div>
<div class="text-sm mt-1">Guru & Staf</div>
</div>
<div class="p-4">
<div class="text-4xl font-extrabold text-yellow-400">24</div>
<div class="text-sm mt-1">Ekstrakurikuler</div>
</div>
<div class="p-4">
<div class="text-4xl font-extrabold text-yellow-400">A</div>
<div class="text-sm mt-1">Akreditasi</div>
</div>
</div>
</section>
<!-- Formulir Interaktif PPDB / Kontak -->
<section id="ppdb" class="py-16 bg-gray-100">
<div class="container mx-auto px-4 max-w-xl">
<div class="bg-white p-8 rounded-2xl shadow-md">
<h3 class="text-2xl font-bold mb-2 text-center">Formulir PPDB / Kontak</h3>
<p class="text-gray-500 text-center mb-6">Isi formulir di bawah ini untuk pendaftaran atau informasi lebih lanjut.</p>
<form id="schoolForm" onsubmit="handleFormSubmit(event)">
<div class="mb-4">
<label class="block text-sm font-semibold mb-2">Nama Lengkap</label>
<input type="text" id="fullname" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-900 outline-none">
</div>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2">Email</label>
<input type="email" id="email" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-900 outline-none">
</div>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2">Pesan / Pertanyaan</label>
<textarea id="message" rows="4" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-900 outline-none"></textarea>
</div>
<button type="submit" class="w-full bg-blue-900 text-white font-bold py-3 rounded-lg hover:bg-blue-800 transition">Kirim Pesan</button>
</form>
<!-- Notifikasi Respons Interaktif -->
<div id="statusAlert" class="hidden mt-4 p-4 rounded-lg text-center font-medium"></div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-8 text-center text-sm">
<p>© 2026 SMAN 1 Nusantara. All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
2. File Logika Interaktif (script.js)
JavaScript
// Logika Penanganan Formulir Interaktif
function handleFormSubmit(event) {
event.preventDefault(); // Mencegah reload halaman
// Ambil nilai dari elemen HTML
const name = document.getElementById('fullname').value;
const email = document.getElementById('email').value;
const alertBox = document.getElementById('statusAlert');
// Tampilkan notifikasi berhasil secara interaktif
alertBox.classList.remove('hidden', 'bg-red-100', 'text-red-700');
alertBox.classList.add('bg-green-100', 'text-green-800');
alertBox.innerHTML = `Terima kasih, <strong>${name}</strong>! Pesan Anda telah terkirim. Kami akan menghubungi Anda via <strong>${email}</strong>.`;
// Reset isi form
document.getElementById('schoolForm').reset();
}
// Smooth scrolling untuk navigasi internal
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
}
});
});
Cara Menggunakan Code Ini:
Buat folder baru di komputer Anda (misal: web-sekolah).
Buat file index.html dan tempelkan kode HTML di atas.
Buat file script.js di folder yang sama dan tempelkan kode JavaScript.
Buka file index.html langsung di browser Anda untuk melihat hasilnya secara lokal.
Apakah Anda ingin menambahkan integrasi database (backend PHP/MySQL) untuk menyimpan data formulir ini secara permanen?
Berikut adalah modul kelanjutan untuk menghubungkan formulir web sekolah ke Database MySQL menggunakan PHP (Backend) agar data pendaftaran/kontak tersimpan secara permanen.
Phase 1: Persiapan Database MySQL
Buka phpMyAdmin di server lokal (XAMPP) atau hosting cPanel Anda.
Buat database baru dengan nama db_sekolah.
Jalankan query SQL berikut di tab SQL untuk membuat tabel penampung data:
SQL
CREATE DATABASE IF NOT EXISTS db_sekolah;
USE db_sekolah;
CREATE TABLE IF NOT EXISTS pendaftaran (
id INT AUTO_INCREMENT PRIMARY KEY,
nama_lengkap VARCHAR(100) NOT NULL,
email VARCHAR(100) NOT NULL,
pesan TEXT NOT NULL,
tanggal_daftar TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
Phase 2: File Koneksi Database (koneksi.php)
Buat file baru bernama koneksi.php di dalam folder project Anda untuk menghubungkan PHP ke MySQL.
PHP
<?php
$host = "localhost";
$user = "root"; // Sesuaikan dengan user database Anda
$password = ""; // Sesuaikan dengan password database Anda
$database = "db_sekolah";
$koneksi = mysqli_connect($host, $user, $password, $database);
if (!$koneksi) {
die("Koneksi ke database gagal: " . mysqli_connect_error());
}
?>
Phase 3: File Pemroses Data (simpan_pendaftaran.php)
Buat file baru bernama simpan_pendaftaran.php untuk menerima, memvalidasi, dan menyimpan data dari formulir ke database.
PHP
<?php
header('Content-Type: application/json');
require_once 'koneksi.php';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Ambil dan bersihkan data masukan pengguna
$nama = mysqli_real_escape_string($koneksi, trim($_POST['fullname'] ?? ''));
$email = mysqli_real_escape_string($koneksi, trim($_POST['email'] ?? ''));
$pesan = mysqli_real_escape_string($koneksi, trim($_POST['message'] ?? ''));
// Validasi sederhana
if (empty($nama) || empty($email) || empty($pesan)) {
echo json_encode([
'status' => 'error',
'message' => 'Semua kolom wajib diisi!'
]);
exit;
}
// Insert ke database menggunakan Prepared Statement untuk keamanan dari SQL Injection
$stmt = mysqli_prepare($koneksi, "INSERT INTO pendaftaran (nama_lengkap, email, pesan) VALUES (?, ?, ?)");
mysqli_stmt_bind_param($stmt, "sss", $nama, $email, $pesan);
if (mysqli_stmt_execute($stmt)) {
echo json_encode([
'status' => 'success',
'message' => "Terima kasih $nama, data pendaftaran Anda berhasil disimpan ke database!"
]);
} else {
echo json_encode([
'status' => 'error',
'message' => 'Gagal menyimpan data ke database.'
]);
}
mysqli_stmt_close($stmt);
mysqli_close($koneksi);
} else {
echo json_encode([
'status' => 'error',
'message' => 'Akses metode tidak diizinkan.'
]);
}
?>
Phase 4: Penghubungan Frontend ke Backend (script.js)
Perbarui logika pada file script.js agar mengirimkan data formulir ke file PHP (simpan_pendaftaran.php) menggunakan metode AJAX (Fetch API) secara realtime tanpa reload halaman.
JavaScript
async function handleFormSubmit(event) {
event.preventDefault(); // Mencegah reload halaman
const alertBox = document.getElementById('statusAlert');
const form = document.getElementById('schoolForm');
// Ambil data dari formulir
const formData = new FormData(form);
try {
// Kirim data ke backend PHP
const response = await fetch('simpan_pendaftaran.php', {
method: 'POST',
body: formData
});
const result = await response.json();
// Tampilkan pesan respons dari server
alertBox.classList.remove('hidden', 'bg-red-100', 'text-red-700', 'bg-green-100', 'text-green-800');
if (result.status === 'success') {
alertBox.classList.add('bg-green-100', 'text-green-800');
alertBox.innerHTML = result.message;
form.reset(); // Reset isi form
} else {
alertBox.classList.add('bg-red-100', 'text-red-700');
alertBox.innerHTML = result.message;
}
} catch (error) {
alertBox.classList.remove('hidden');
alertBox.classList.add('bg-red-100', 'text-red-700');
alertBox.innerHTML = 'Terjadi kesalahan sistem atau server tidak merespons.';
}
}
Phase 5: penyesuaian Atribut HTML (index.html)
Pastikan elemen <input> dan <textarea> pada bagian formulir di file index.html sudah memiliki atribut name yang sesuai dengan yang dibaca oleh file PHP:
HTML
<form id="schoolForm" onsubmit="handleFormSubmit(event)">
<div class="mb-4">
<label class="block text-sm font-semibold mb-2">Nama Lengkap</label>
<input type="text" name="fullname" id="fullname" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-900 outline-none">
</div>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2">Email</label>
<input type="email" name="email" id="email" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-900 outline-none">
</div>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2">Pesan / Pertanyaan</label>
<textarea name="message" id="message" rows="4" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-900 outline-none"></textarea>
</div>
<button type="submit" class="w-full bg-blue-900 text-white font-bold py-3 rounded-lg hover:bg-blue-800 transition">Kirim Pesan</button>
</form>
Sesi Interaktif Checkpoint:
Apakah Anda ingin melanjutkan dengan membuat Halaman Dashboard Admin Admin/Guru sederhana untuk melihat daftar pendaftar yang sudah masuk ke database?
Berikut adalah kelanjutan modul untuk membangun Dashboard Admin Sederhana yang berfungsi untuk melihat, mengelola, dan menghapus data pendaftar yang masuk ke database.
Phase 1: Halaman Admin Dashboard (admin.php)
Buat file baru bernama admin.php. Halaman ini mengambil data pendaftaran dari tabel pendaftaran MySQL dan menampilkannya dalam bentuk tabel yang rapi.
PHP
<?php
require_once 'koneksi.php';
// Ambil semua data pendaftar dari database (diurutkan dari yang terbaru)
$query = "SELECT * FROM pendaftaran ORDER BY tanggal_daftar DESC";
$result = mysqli_query($koneksi, $query);
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Admin - SMAN 1 Nusantara</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen">
<!-- Top Navigation -->
<nav class="bg-blue-900 text-white px-6 py-4 flex justify-between items-center shadow-md">
<h1 class="text-xl font-bold">Panel Admin SMAN 1 Nusantara</h1>
<a href="index.html" class="text-sm bg-yellow-400 text-blue-900 px-3 py-2 rounded-lg font-semibold hover:bg-yellow-300 transition">Lihat Website</a>
</nav>
<div class="container mx-auto px-4 py-8">
<div class="flex justify-between items-center mb-6">
<div>
<h2 class="text-2xl font-bold text-gray-800">Daftar Pendaftar & Pesan</h2>
<p class="text-gray-600 text-sm">Kelola data pendaftaran PPDB dan pesan dari calon siswa.</p>
</div>
</div>
<!-- Tabel Data Pendaftar -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-gray-50 border-b text-gray-600 uppercase text-xs">
<th class="p-4">No</th>
<th class="p-4">Nama Lengkap</th>
<th class="p-4">Email</th>
<th class="p-4">Pesan / Pertanyaan</th>
<th class="p-4">Tanggal Daftar</th>
<th class="p-4 text-center">Aksi</th>
</tr>
</thead>
<tbody class="divide-y text-sm text-gray-700">
<?php
if (mysqli_num_rows($result) > 0) {
$no = 1;
while ($row = mysqli_fetch_assoc($result)) {
?>
<tr class="hover:bg-gray-50 transition">
<td class="p-4 font-medium"><?= $no++; ?></td>
<td class="p-4 font-semibold text-gray-900"><?= htmlspecialchars($row['nama_lengkap']); ?></td>
<td class="p-4 text-blue-600"><?= htmlspecialchars($row['email']); ?></td>
<td class="p-4"><?= nl2br(htmlspecialchars($row['pesan'])); ?></td>
<td class="p-4 text-gray-500"><?= date('d M Y, H:i', strtotime($row['tanggal_daftar'])); ?></td>
<td class="p-4 text-center">
<button onclick="hapusData(<?= $row['id']; ?>)" class="bg-red-500 hover:bg-red-600 text-white px-3 py-1.5 rounded text-xs font-semibold transition">
Hapus
</button>
</td>
</tr>
<?php
}
} else {
?>
<tr>
<td colspan="6" class="p-8 text-center text-gray-500">
Belum ada data pendaftar yang masuk.
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
<!-- Script Hapus Data Interaktif -->
<script>
async function hapusData(id) {
if (confirm('Apakah Anda yakin ingin menghapus data ini?')) {
const formData = new FormData();
formData.append('id', id);
try {
const response = await fetch('hapus_pendaftaran.php', {
method: 'POST',
body: formData
});
const result = await response.json();
if (result.status === 'success') {
alert(result.message);
location.reload(); // Refresh halaman setelah sukses hapus
} else {
alert('Gagal menghapus data: ' + result.message);
}
} catch (error) {
alert('Terjadi kesalahan sistem.');
}
}
}
</script>
</body>
</html>
Phase 2: File Backend Hapus Data (hapus_pendaftaran.php)
Buat file bernama hapus_pendaftaran.php untuk memproses aksi penghapusan data secara aman dari database.
PHP
<?php
header('Content-Type: application/json');
require_once 'koneksi.php';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$id = isset($_POST['id']) ? intval($_POST['id']) : 0;
if ($id > 0) {
$stmt = mysqli_prepare($koneksi, "DELETE FROM pendaftaran WHERE id = ?");
mysqli_stmt_bind_param($stmt, "i", $id);
if (mysqli_stmt_execute($stmt)) {
echo json_encode([
'status' => 'success',
'message' => 'Data pendaftar berhasil dihapus.'
]);
} else {
echo json_encode([
'status' => 'error',
'message' => 'Gagal menghapus data dari database.'
]);
}
mysqli_stmt_close($stmt);
} else {
echo json_encode([
'status' => 'error',
'message' => 'ID data tidak valid.'
]);
}
mysqli_close($koneksi);
} else {
echo json_encode([
'status' => 'error',
'message' => 'Akses metode tidak diizinkan.'
]);
}
?>
Alur Kerja Keseluruhan Web Sekolah:
Calon Siswa/Pengunjung:
Membuka index.html $\rightarrow$ Mengisi formulir PPDB/Kontak $\rightarrow$ Data terkirim secara instan via Fetch API (script.js).
Backend Server:
simpan_pendaftaran.php menerima input $\rightarrow$ Melakukan validasi & Prepared Statement $\rightarrow$ Menyimpan data ke db_sekolah MySQL.
Admin / Panitia PPDB:
Membuka admin.php $\rightarrow$ Melihat seluruh daftar pendaftar yang tersimpan di tabel $\rightarrow$ Dapat menghapus data jika diperlukan melalui hapus_pendaftaran.php.
Sesi Interaktif Checkpoint:
Apakah Anda ingin menambahkan Sistem Login Admin (username & password) untuk mengamankan halaman admin.php agar tidak bisa diakses sembarangan orang?
Berikut adalah kelanjutan modul untuk mengamankan halaman dashboard admin dengan Sistem Login Berbasis Session & Password Hashing agar halaman admin tidak bisa diakses tanpa otentikasi.
Phase 1: Pembaruan Database MySQL (Tabel Admin)
Jalankan perintah SQL berikut di phpMyAdmin untuk membuat tabel admin dan menambahkan satu akun admin default:
SQL
USE db_sekolah;
-- Buat tabel admin
CREATE TABLE IF NOT EXISTS admin (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL,
nama_lengkap VARCHAR(100) NOT NULL
);
-- Tambahkan akun admin default (Username: admin, Password: admin123)
-- Password di-hash menggunakan Password Hash default PHP
INSERT INTO admin (username, password, nama_lengkap)
VALUES (
'admin',
'$2y$10$4B9Yc/S1/P8gR8Oxgw.r9.V3O3PZ32n.0fXj.qXg2n9vB2Z8k6tGi',
'Administrator Utama'
) ON DUPLICATE KEY UPDATE id=id;
Catatan Keamanan: Password default untuk akun di atas adalah admin123.
Phase 2: Halaman Form Login (login.php)
Buat file baru bernama login.php untuk menampilkan form login dan mengolah otentikasi user.
PHP
<?php
session_start();
require_once 'koneksi.php';
// Jika admin sudah login, alihkan langsung ke halaman admin
if (isset($_SESSION['admin_logged_in']) && $_SESSION['admin_logged_in'] === true) {
header('Location: admin.php');
exit;
}
$error = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$username = mysqli_real_escape_string($koneksi, trim($_POST['username']));
$password = trim($_POST['password']);
if (!empty($username) && !empty($password)) {
// Cari user admin berdasarkan username
$stmt = mysqli_prepare($koneksi, "SELECT id, username, password, nama_lengkap FROM admin WHERE username = ?");
mysqli_stmt_bind_param($stmt, "s", $username);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
if ($row = mysqli_fetch_assoc($result)) {
// Verifikasi password hash
if (password_verify($password, $row['password'])) {
// Set session login
$_SESSION['admin_logged_in'] = true;
$_SESSION['admin_id'] = $row['id'];
$_SESSION['admin_name'] = $row['nama_lengkap'];
header('Location: admin.php');
exit;
} else {
$error = 'Password salah!';
}
} else {
$error = 'Username tidak ditemukan!';
}
mysqli_stmt_close($stmt);
} else {
$error = 'Silakan isi username dan password!';
}
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Admin - SMAN 1 Nusantara</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
<div class="bg-white p-8 rounded-2xl shadow-md w-full max-w-md">
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Login Admin</h2>
<p class="text-gray-500 text-sm">Masuk untuk mengelola data sekolah</p>
</div>
<?php if (!empty($error)): ?>
<div class="bg-red-100 text-red-700 p-3 rounded-lg mb-4 text-sm text-center">
<?= $error; ?>
</div>
<?php endif; ?>
<form action="login.php" method="POST">
<div class="mb-4">
<label class="block text-sm font-semibold mb-2 text-gray-700">Username</label>
<input type="text" name="username" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-900 outline-none">
</div>
<div class="mb-6">
<label class="block text-sm font-semibold mb-2 text-gray-700">Password</label>
<input type="password" name="password" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-900 outline-none">
</div>
<button type="submit" class="w-full bg-blue-900 text-white font-bold py-2.5 rounded-lg hover:bg-blue-800 transition">
Masuk
</button>
</form>
</div>
</body>
</html>
Phase 3: Proteksi Halaman Admin (admin.php)
Tambahkan pemeriksaan session di bagian paling atas file admin.php dan tombol Logout di navbar.
Perbarui bagian paling atas file admin.php menjadi seperti ini:
PHP
<?php
session_start();
// Proteksi Halaman: Jika belum login, tendang ke login.php
if (!isset($_SESSION['admin_logged_in']) || $_SESSION['admin_logged_in'] !== true) {
header('Location: login.php');
exit;
}
require_once 'koneksi.php';
// Ambil semua data pendaftar dari database
$query = "SELECT * FROM pendaftaran ORDER BY tanggal_daftar DESC";
$result = mysqli_query($koneksi, $query);
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Admin - SMAN 1 Nusantara</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen">
<!-- Top Navigation dengan Nama Admin & Tombol Logout -->
<nav class="bg-blue-900 text-white px-6 py-4 flex justify-between items-center shadow-md">
<h1 class="text-xl font-bold">Panel Admin SMAN 1 Nusantara</h1>
<div class="flex items-center space-x-4">
<span class="text-sm font-medium">Halo, <?= htmlspecialchars($_SESSION['admin_name']); ?></span>
<a href="logout.php" class="bg-red-500 text-white text-sm px-3 py-1.5 rounded-lg font-semibold hover:bg-red-600 transition">Logout</a>
</div>
</nav>
<!-- Isi konten admin.php sama seperti langkah sebelumnya ... -->
Phase 4: Fitur Logout (logout.php)
Buat file baru bernama logout.php untuk menghapus session saat admin mengklik tombol Logout.
PHP
<?php
session_start();
session_unset();
session_destroy();
header('Location: login.php');
exit;
?>
Ringkasan Alur Lengkap Sistem:
Akses Publik:
Halaman Utama Website: index.html (Bisa diakses siapa saja).
Formulir terhubung langsung ke simpan_pendaftaran.php via AJAX.
Akses Administrator:
Buka admin.php $\rightarrow$ Jika belum login, otomatis dialihkan ke login.php.
Masukkan Username: admin dan Password: admin123.
Berhasil login $\rightarrow$ Masuk ke Dashboard admin.php untuk melihat dan mengelola data pendaftar.
Klik Logout $\rightarrow$ Session dihancurkan dan kembali ke login.php.
Sesi Interaktif Checkpoint:
Seluruh struktur dasar website sekolah (Frontend, Backend, Database, Dashboard Admin, dan Otentikasi) sudah lengkap. Apakah Anda ingin mempelajari cara mempublikasikan seluruh file ini ke Hosting & Domain Resmi (.sch.id) agar online di internet?
Python
import weasyprint
from weasyprint import HTML
html_content = """
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<style>
@page {
size: A4;
margin: 15mm 15mm;
background-color: #f8fafc;
@bottom-right {
content: "Halaman " counter(page) " dari " counter(pages);
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 8pt;
color: #64748b;
}
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
margin: 0;
padding: 0;
color: #1e293b;
line-height: 1.5;
font-size: 10pt;
}
/* Banner Header */
.header-banner {
background-color: #1e3a8a;
color: #ffffff;
margin: -15mm -15mm 20px -15mm;
padding: 25px 20px;
text-align: center;
}
.header-banner h1 {
margin: 0;
font-size: 20pt;
font-weight: bold;
color: #ffffff;
letter-spacing: 0.5px;
}
.header-banner p {
margin: 5px 0 0 0;
font-size: 11pt;
color: #fde047;
font-weight: bold;
}
h2 {
font-size: 13pt;
color: #1e3a8a;
border-left: 4px solid #f59e0b;
padding-left: 10px;
margin-top: 20px;
margin-bottom: 10px;
page-break-after: avoid;
}
h3 {
font-size: 11pt;
color: #0f172a;
margin-top: 15px;
margin-bottom: 8px;
page-break-after: avoid;
}
p {
margin-top: 0;
margin-bottom: 10px;
text-align: justify;
}
/* Card / Callout Box */
.callout {
background-color: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 12px 15px;
margin-bottom: 15px;
}
/* Tables */
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
margin-bottom: 15px;
background-color: #ffffff;
border-radius: 6px;
overflow: hidden;
border: 1px solid #e2e8f0;
}
th {
background-color: #1e3a8a;
color: #ffffff;
font-weight: bold;
text-align: left;
padding: 8px 10px;
font-size: 9.5pt;
}
td {
padding: 8px 10px;
border-bottom: 1px solid #e2e8f0;
font-size: 9pt;
}
tr:nth-child(even) {
background-color: #f1f5f9;
}
/* Code Block Style */
pre, code {
font-family: 'Courier New', Courier, monospace;
background-color: #0f172a;
color: #f8fafc;
border-radius: 6px;
font-size: 8.5pt;
}
pre {
padding: 10px;
overflow-x: auto;
white-space: pre-wrap;
word-wrap: break-word;
margin-top: 5px;
margin-bottom: 12px;
}
ul, ol {
margin-top: 0;
margin-bottom: 10px;
padding-left: 20px;
}
li {
margin-bottom: 4px;
}
.badge {
background-color: #fef3c7;
color: #92400e;
padding: 2px 6px;
border-radius: 4px;
font-weight: bold;
font-size: 8.5pt;
}
</style>
</head>
<body>
<div class="header-banner">
<h1>MODUL PANDUAN PELUNCURAN WEB SEKOLAH</h1>
<p>Panduan Lengkap Merilis Website Sekolah ke Server Hosting & Domain .sch.id</p>
</div>
<p>Selamat! Anda telah berhasil membangun seluruh sistem aplikasi web sekolah dari sisi <i>Frontend</i>, <i>Backend PHP</i>, <i>Database MySQL</i>, hingga <i>Dashboard Admin dengan Keamanan Session</i>. Tahap terakhir adalah melakukan penerbitan (<i>deployment</i>) agar website dapat diakses secara publik di internet.</p>
<h2>Phase 1: Persiapan Dokumen Domain Resmi (.sch.id)</h2>
<p>Domain <code>.sch.id</code> adalah domain resmi untuk lembaga pendidikan di Indonesia yang dikelola oleh PANDI (Pengelola Domain Internet Indonesia). Untuk mendaftarkannya, siapkan dokumen persyaratan berikut dalam bentuk SCAN PDF/JPEG:</p>
<div class="callout">
<ul>
<li><strong>Surat Permohonan Registrasi Domain:</strong> Ditandatangani oleh Kepala Sekolah dan dibubuhi stempel resmi sekolah.</li>
<li><strong>Surat Pendirian / SK Operasional Sekolah:</strong> Diterbitkan oleh Dinas Pendidikan setempat atau Kementerian Agama.</li>
<li><strong>KTP Penanggung Jawab:</strong> KTP Kepala Sekolah atau Staf/Guru yang ditunjuk sebagai pengelola IT.</li>
</ul>
</div>
<h2>Phase 2: Membeli Hosting & Domain di Registrar</h2>
<p>Pilihlah penyedia hosting terpercaya (seperti Niagahoster, Rumahweb, DomaiNesia, dll) yang menyediakan layanan pendaftaran domain <code>.sch.id</code> dan cPanel/DirectAdmin.</p>
<table>
<thead>
<tr>
<th>Langkah</th>
<th>Aksi Utama</th>
<th>Keterangan Detail</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>1</strong></td>
<td>Cek Ketersediaan Domain</td>
<td>Cari nama domain (misal: <code>sman1nusantara.sch.id</code>) di penyedia hosting.</td>
</tr>
<tr>
<td><strong>2</strong></td>
<td>Pilih Paket Hosting</td>
<td>Gunakan paket cPanel Shared Hosting (Disk Minimal 2GB - 5GB sudah memadai).</td>
</tr>
<tr>
<td><strong>3</strong></td>
<td>Upload Dokumen Verifikasi</td>
<td>Unggah persyaratan domain .sch.id pada member area penyedia hosting. Tunggu proses verifikasi (biasanya 1x24 jam).</td>
</tr>
</tbody>
</table>
<h2>Phase 3: Upload Database ke Server (cPanel)</h2>
<p>Sebelum mengunggah file source code, Anda harus menyiapkan database di server hosting:</p>
<ol>
<li>Masuk ke kontrol panel hosting Anda (<strong>cPanel</strong>).</li>
<li>Buka menu <strong>MySQL® Databases</strong>.
<ul>
<li>Buat database baru (misal: <code>u12345_dbsekolah</code>).</li>
<li>Buat pengguna MySQL baru (misal: <code>u12345_usersekolah</code>) beserta password yang kuat.</li>
<li>Hubungkan pengguna tersebut ke database dan berikan izin <span class="badge">ALL PRIVILEGES</span>.</li>
</ul>
</li>
<li>Kembali ke cPanel, buka menu <strong>phpMyAdmin</strong>.</li>
<li>Pilih database yang baru dibuat, lalu klik tab <strong>Import</strong>.</li>
<li>Pilih file cadangan SQL dari komputer lokal Anda, lalu klik <strong>Go / Kirim</strong>.</li>
</ol>
<h2>Phase 4: Upload File Source Code & Konfigurasi Koneksi</h2>
<p>Setelah database siap, unggah seluruh file website sekolah ke direktori server hosting:</p>
<ol>
<li>Buka menu <strong>File Manager</strong> di cPanel.</li>
<li>Masuk ke folder utama server: <span class="badge">public_html</span>.</li>
<li>Unggah file project Anda yang sudah di-ZIP, lalu lakukan <strong>Extract</strong> di dalam folder <code>public_html</code>.</li>
<li>Edit file <code>koneksi.php</code> pada server dan sesuaikan kredensialnya dengan database cPanel:</li>
</ol>
<pre><code><?php
// Sesuaikan dengan kredensial cPanel Anda
$host = "localhost";
$user = "u12345_usersekolah"; // Username MySQL cPanel
$password = "Password_Kuat_Anda123!"; // Password MySQL cPanel
$database = "u12345_dbsekolah"; // Nama Database cPanel
$koneksi = mysqli_connect($host, $user, $password, $database);
if (!$koneksi) {
die("Koneksi ke database server gagal: " . mysqli_connect_error());
}
?></code></pre>
<h2>Phase 5: Mengaktifkan Keamanan SSL (HTTPS) & Pengujian</h2>
<div class="callout">
<h3>1. Aktifkan SSL Gratis (Let's Encrypt)</h3>
<p>Di cPanel, cari menu <strong>Lets Encrypt SSL</strong> atau <strong>SSL/TLS Status</strong>, lalu klik <i>Run AutoSSL</i> / <i>Issue</i> untuk memastikan website Anda diawali dengan <code>https://</code> yang aman dan tepercaya.</p>
<h3>2. Pengujian Akhir (Quality Check)</h3>
<ul>
<li>Akses domain utama: <code>https://sman1nusantara.sch.id</code></li>
<li>Uji Coba Formulir PPDB: Isi pesan di website dan pastikan notifikasi sukses muncul.</li>
<li>Uji Coba Admin: Buka <code>https://sman1nusantara.sch.id/admin.php</code>, login dengan akun admin, dan pastikan data pesan dari formulir terdaftar dengan benar.</li>
</ul>
</div>
<div style="text-align: center; margin-top: 30px; font-weight: bold; color: #1e3a8a; font-size: 11pt;">
Selamat! Website Sekolah Resmi Anda Sekarang Sudah Siap Digunakan dan Beroperasi Secara Penuh!
</div>
</body>
</html>
"""
with open("Modul_Panduan_Merilis_Web_Sekolah.html", "w", encoding="utf-8") as f:
f.write(html_content)
HTML("Modul_Panduan_Merilis_Web_Sekolah.html").write_pdf("Modul_Panduan_Merilis_Web_Sekolah.pdf")
Modul Panduan: Menerbitkan (Deploy) Web Sekolah ke Hosting & Domain .sch.id
Berikut adalah panduan lengkap merilis aplikasi web sekolah dari lingkungan lokal (XAMPP/localhost) ke server live di internet.
Phase 1: Persiapan Dokumen Domain Resmi (.sch.id)
Domain .sch.id dikelola oleh PANDI (Pengelola Domain Internet Indonesia) dan memerlukan verifikasi identitas resmi sekolah. Siapkan dokumen berikut (dalam format Scan PDF/JPEG):
Surat Permohonan Registrasi Domain (Ditandatangani Kepala Sekolah & distempel).
Surat Pendirian / SK Operasional Sekolah (Dari Dinas Pendidikan / Kemenag).
KTP Penanggung Jawab (Kepala Sekolah atau Staf/Guru Pengelola IT).
Phase 2: Membeli Hosting & Mendaftarkan Domain
Pilih penyedia hosting lokal terpercaya yang mendukung penyewaan domain .sch.id dan cPanel (seperti Niagahoster, Rumahweb, DomaiNesia, dll).
Cari ketersediaan domain (contoh: sman1nusantara.sch.id).
Pilih paket cPanel Shared Hosting (Kapasitas 2GB - 5GB sudah sangat cukup untuk tahap awal).
Selesaikan pembayaran dan unggah dokumen verifikasi pada dashboard member area penyedia hosting. Proses verifikasi domain biasanya memakan waktu 1x24 jam.
Phase 3: Menyiapkan Database di Server (cPanel)
Masuk ke cPanel hosting Anda melalui URL yang diberikan penyedia hosting.
Buka menu MySQL® Databases:
Buat database baru (contoh: u12345_dbsekolah).
Buat user MySQL baru (contoh: u12345_usersekolah) dan buat password yang kuat.
Hubungkan user tersebut ke database dengan memberikan opsi ALL PRIVILEGES.
Kembali ke cPanel, buka menu phpMyAdmin.
Pilih database u12345_dbsekolah, klik tab Import, pilih file ekspor .sql dari komputer lokal Anda, lalu klik Go.
Phase 4: Mengunggah Source Code & Konfigurasi File (koneksi.php)
Di cPanel, buka File Manager $\rightarrow$ Masuk ke folder public_html.
Kompres seluruh file project lokal Anda (index.html, script.js, koneksi.php, simpan_pendaftaran.php, admin.php, login.php, logout.php, hapus_pendaftaran.php) menjadi satu file .zip.
Klik tombol Upload di File Manager dan unggah file .zip tersebut ke folder public_html.
Setelah terunggah, lakukan Extract langsung di folder public_html.
Edit file koneksi.php pada server dan sesuaikan dengan informasi database cPanel:
PHP
<?php
// Sesuaikan kredensial dengan yang dibuat di cPanel
$host = "localhost";
$user = "u12345_usersekolah"; // Username MySQL cPanel
$password = "Password_Kuat_Anda123!";// Password MySQL cPanel
$database = "u12345_dbsekolah"; // Nama Database cPanel
$koneksi = mysqli_connect($host, $user, $password, $database);
if (!$koneksi) {
die("Koneksi ke database server gagal: " . mysqli_connect_error());
}
?>
Phase 5: Pengaktifan SSL (HTTPS) & Pengujian Akhir
Aktifkan SSL Gratis: Di cPanel, cari menu SSL/TLS Status atau Let's Encrypt SSL, lalu jalankan AutoSSL agar situs memiliki sertifikat enkripsi aman (https://).
Pengujian Integrasi:
Akses halaman utama: [https://sman1nusantara.sch.id](https://sman1nusantara.sch.id)
Coba isi Formulir PPDB dari sisi pengguna.
Akses halaman admin: [https://sman1nusantara.sch.id/login.php](https://sman1nusantara.sch.id/login.php), login menggunakan akun admin (admin / admin123), lalu pastikan data pendaftar baru masuk ke dashboard.
Seluruh modul panduan teknis dan pengoperasian telah dirangkum secara rapi dalam dokumen PDF yang siap diunduh di atas.
No comments:
Post a Comment
Terima kasih telah mampir ke Blog yang amburadul ini