Membangun Aplikasi PPDB Berbasis Web #2

Aplikasi PPDB - Pada part sebelumnya kita sudah buat navbar pada halaman index, dan sekarang kita akan lanjutkan membuat konten untuk submenu cara daftar dan form pendaftaran.

File yang akan dibuat yaitu:

• daftar.php
• .htaccess (ada tanda "." diawal penulisan)

Pertama - tama, buka kembali file index.php, tambahkan beberapa baris kode untuk membuat pengkondisian.

index.php

Untuk mengatur konten yang ditampilkan, kode sebelumnya:

<?php

include_once('templates/header.php');

// kode untuk kondisi disini

include_once('templates/footer.php');

Setelah ditambahkan kode untuk pengkondisian:

<?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 digunakan untuk merubah beberapa bentuk konfigurasi, sebagai contoh, link pada submenu form pendaftaran, url yang semula ppdb-demo/form-daftar.php?p=daftar&act=form-daftar dipendekan menjadi ppdb-demo/form-daftar.html.

File ini akan sering kita ubah seiring bertambahnya halaman.

<ifmodule mod_rewrite.c>
RewriteEngine on

RewriteRule ^index$ # [L]
RewriteRule ^cara-daftar\.html$ ?p=daftar [L]
RewriteRule ^cara-daftar\.html$ ?p=daftar&act=step-daftar [L]
RewriteRule ^form-daftar\.html$ ?p=daftar&act=form-daftar [L]

Options All -Indexes
</ifmodule>

daftar.php

Pada file ini terdapat dua konten, yaitu cara daftar dan form pendaftaran, dan juga ada kondisi yang mengatur konten apa yang ditampilkan berdasarkan action yang diambil dari url. Jika ?act=cara-daftar maka akan menampilkan konten cara daftar, dan jika ?act=form-daftar maka akan menampilkan form pendaftaran.

<div class="container mt-4">

 <?php
 if(!isset($_GET['act'])) { ?>
  
  <div class="card">
   <div class="card-header">
    <strong>Langkah Pendaftaran</strong>
   </div>
   <div class="card-body">
    <ol>
     <li>Pergi ke halaman form pendaftaran atau klik tombol biru dibawah</li>
     <li>Lengkapi semua data pada form pendaftaran</li>
     <li>Setelah pendaftaran berhasil silahkan gunakan nomor pendaftaran dan password kalian untuk login dengan klik link <b>Masuk</b> pada menu diatas</li>
    </ol><br/>
    <a href="form-daftar.html" class="btn btn-primary">Daftar</a>
   </div>
  </div>

 <?php } elseif($_GET['act'] == 'form-daftar') { ?>  

  <div class="card">
   <div class="card-header">
    <strong>Form Pendaftaran</strong>
   </div>
   <div class="card-body">

    <?php
    session_start();
    if (isset($_SESSION['pesan'])) { 
    ?>

    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      
      <?= $_SESSION['pesan']; ?> 
      
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
    </div>

    <?php session_unset(); } ?>

    <div class="row">
     <div class="col-md-6 mb-2">
      <h5>Beberapa hal yang harus diperhatikan:</h5><br/>
      <ul>
       <li>Isi formulir pendaftaran dengan benar</li>
       <li>Setelah mengirim formulir, calon peserta didik akan mendapatkan <strong>kode aktivasi</strong> dan <strong>password</strong> untuk digunakan pada proses masuk aplikasi ini</li>
       <li>Jika calon peserta didik mengalami kendala dalam proses pendaftaran atau proses masuk aplikasi, dimohon segera hubungi contact person sekolah</li>
      </ul>
     </div>
     <div class="col-md-6 mb-2">
      <div class="alert alert-info">Lengkapi formulir pendaftaran siswa dibawah ini.</div>
      <form method="POST" action="aksi-daftar.php">
       <label for="nisn">NISN</label>
       <input type="text" name="nisn" id="nisn" class="form-control mb-2" required>
       <label for="nama">Nama Lengkap Siswa</label>
       <input type="text" name="nama_lengkap" id="nama" class="form-control mb-2" required> 
       <label for="asal_sekolah">Asal Sekolah</label>
       <input type="text" name="asal_sekolah" id="asal_sekolah" class="form-control mb-2" required>
       <div class="mt-3">
        <button class="btn btn-success float-right" name="submit" type="submit">Submit</button>
       </div>
      </div>
     </div>
    </form>
   </div>
  </div>

 <?php } ?>

</div>

Output:

Konten Langkah Pendaftaran

Konten Form Pendaftaran

Artikel selanjutnya: Aplikasi PPDB Berbasis Web #3