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 :   E-Commerce Sistem Informasi Penjualan Sepatu Online

<!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 :   Bingung Membuat Logo? Coba Website Desain Logo Gratis Ini

<!– 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 :   SPK Penentuan Jurusan di Perguruan Tinggi Metode Fuzzy Mamdani PHP& MySQL

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.

Terima jasa pembuatan website dan aplikasi dengan harga terjangkau wa ke kami 082300007704 ( menerima jasa pembuatan skripsi juga )Baca Juga :   Sistem Informasi Keuangan Saham Berbasis Website

link download : bit.ly/3ey8R6F

Avatar
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

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *