Membangun Aplikasi PPDB Berbasis Web #1

ullprasetio Mei 16, 2020
Aplikasi PPDB Berbasis Web Part 1
Aplikasi PPDB - Dimulai dari artikel ini kita akan membangun Aplikasi Penerimaan Peserta Didik Baru (PPDB) Berbasis Web.

Dalam artikel ini kita memulai dengan membuat halaman index yang menampilkan navbar dan card yang berisi langkah - langkah pendaftaran.

File yang akan dibuat antara lain:
  • index.php
  • templates (folder)
    • header.php
    • footer.php


header.php

Buat folder dengan nama templates lalu buat file ini didalamnya. File header.php berisi struktur HTML dan link dari beberapa library, diantaranya Bootstrap dan jQuery. Dan kode untuk navbar juga terletak file ini.
<!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

Masih didalam folder templates, sekarang buat juga file footer.php, file ini sebagai penutup dari kode yang ada di file header.php dan juga berisi script untuk memanggil library javascript yang dibutuhkan seperti popper.js dan bootstrap.min.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 digunakan sebagai pengatur, yang akan memanggil file yang dibutuhkan sesuai dengan kondisi.
<?php

include_once('templates/header.php');

// kode untuk kondisi disini

include_once('templates/footer.php');

Coba jalankan, maka akan tampil navbar dihalaman index, tapi apabila tampilan masih seperti kode HTML tanpa CSS silahkan cek koneksi internet kalian.

Artikel selanjutnya: Membangun Aplikasi PPDB Berbasis Web #2

Referensi: https://github.com/fajar7xx/psb

Tags:

Posting Komentar

0 Komentar