Kebijakan social distancing yang diterapkan pemerintah telah berimbas kepada semua sektor, salah satu yang terdampak dari pembatasan sosial di tengah pandemi ini yaitu berada di lingkungan satuan pendidikan, Sekolah. Pelaksanaan PPDB atau Penerimaan Peserta Didik Baru, yang biasanya dilakukan secara tatap muka beralih ke PPDB online.
Salah satu inovasi yang dilakukan sekolah – sekolah di Indonesia adalah dengan membangun aplikasi PPDB berbasis website yang bisa diakses secara online. Calon peserta didik tidak harus datang secara langsung ke sekolah tujuan, dengan mengakses portal atau laman yang tersedia, calon peserta didik sudah bisa melakukan pendaftaran peserta didik baru di sekolah pilihan.
- Halaman Index
Halaman index menampilkan 2 hal yang berisi mengenai card dan navbar, berikut adalah langkah – langkah untuk melakukan pendaftaran tersebut :
- Buat file dengan nama index.php
- Buat template (sesuai dengan aplikasi), file ini berisi header.php dan footer.php
- Header.php
Di dalam file header.php terdapat beberapa link dari library serta struktur HTML, antara lain JQuery dan Bootstrap. Berikut adalah kode untuk navbar yang bisa disalin.
<!doctype html>
<html lang=”en”>
<head>
<!– Required meta tags –>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<!– Bootstrap CSS –>
<!– <link rel=”stylesheet” href=”css/bootstrap.min.css”> –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” crossorigin=”anonymous”>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<title>Aplikasi PPDB</title>
</head>
<body>
<nav class=”navbar navbar-expand-lg navbar-light bg-light”>
<a class=”navbar-brand” href=”index”>Aplikasi PPDB</a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarNav” aria-controls=”navbarNav” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarNav”>
<ul class=”navbar-nav”>
<li class=”nav-item dropdown”>
<a class=”nav-link dropdown-toggle” href=”#” id=”navbarDropdown” role=”button” data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”>
Daftar
</a>
<div class=”dropdown-menu” aria-labelledby=”navbarDropdown”>
<a class=”dropdown-item” href=”cara-daftar.html”>Cara Daftar</a>
<a class=”dropdown-item” href=”form-daftar.html”>Form Pendaftaran</a>
</div>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”cpd-masuk.html”>Masuk</a>
</li>
</ul>
</div>
</nav>
- Footer.php
File footer.php merupakan file penutup dari file header.php. Dalam file ini juga terdapat code script yang berguna untuk menghubungi library Javascript, seperti bootstrap.min.js dan popper.js
<!– Optional JavaScript –>
<!– jQuery first, then Popper.js, then Bootstrap JS –>
<!– <script type=”text/javascript” src=”js/jquery-3.5.1.min.js”></script>
<script type=”text/javascript” src=”js/bootstrap.min.js”></script> –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js” integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js” integrity=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=”anonymous”></script>
</body>
</html>
- Index.php
File ini dibuat karena fungsinya sebagai pemanggil apabila ada file lain yang dibutuhkan. Code script yang bisa dimasukkan pada file ini yaitu :
<?php
include_once(‘templates/header.php’);
// kode untuk kondisi disini
include_once(‘templates/footer.php’);
- Membuat Halaman Pendaftaran
Pada halaman pendaftaran, ada dua file yang dibuat, file daftar.php dan file “.htaccess”
- Langkah pertama yaitu masuk ke file index.php yang telah dibuat sebelumnya.
- Tambahkan kode pengkodisian berikut :
<?php
include_once(‘templates/header.php’);
// tambahkan kondisi
if(!isset($_GET[‘p’])) {
include_once(‘daftar.php’);
} else {
if($_GET[‘p’] == ‘daftar’) {
include_once(‘daftar.php’);
} elseif($_GET[‘p’] == ‘masuk’) {
header(‘Location: cpd/masuk.php’); // belum dibuat
}
}
include_once(‘templates/footer.php’);
- “.htaccess”
File ini memiliki fungsi untuk merubah beberapa bentuk konfigurasi. Seperti URL yang terdapat pada form submenu pendaftaran, ppdb-demo/form-daftar.php?p=daftar&act=form-daftar diubah menjadi ppdb-demo/form-daftar.html
- daftar.php
File ini berisi dua hal mengenai, form pendaftaran dan tata cara pendaftaran. Serta terdapat beberapa kondisi yang memungkinkan untuk mengatur kembali konten yang di dapat dari URL.
Baca Juga : Sistem Informasi Keuangan Saham Berbasis Website
link download :