admin Halo.. saya adalah admin di sini, saya bertugas menulis dan memposting artikel di blog ini, semua source code smua ini dapat di download di php.id/code

Membangun Aplikasi PPDB Berbasis Website di Tengah Pandemi Covid-19

3 min read

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.

  1. 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.

Baca Juga :   Sistem Informasi Wisata Halal Berbasis Android

<!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

Baca Juga :   Media Pembelajaran Berbasis Mobile

<!– 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
Baca Juga :   Source Code Sosial Media Berbasis Web

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 : bit.ly/3ey8R6F

admin Halo.. saya adalah admin di sini, saya bertugas menulis dan memposting artikel di blog ini, semua source code smua ini dapat di download di php.id/code