Latihan UKK RPL - Persiapan Project Aplikasi Absensi - Wahyup

Persiapan Ujian Kompetensi Keahlian (UKK) menjadi momen penting bagi siswa RPL untuk menguji kemampuan mereka dalam mengembangkan aplikasi yang inovatif dan fungsional. Salah satu project yang populer adalah aplikasi absensi, yang tidak hanya menantang secara teknis, tetapi juga mengasah kemampuan perancangan sistem.

Dalam artikel ini, kita akan membahas langkah-langkah strategis untuk mempersiapkan project aplikasi absensi, mulai dari konsep hingga tahap implementasi, agar siap menghadapi UKK dengan percaya diri.

Persiapan Project Aplikasi Absensi - UKK RPL

Daftar Isi :

Persiapan Software
Struktur Folder
Membuat file Index.php
Membuat file nav.php
Membuat file home.php, kontak.php dan data.php
Membuat file footer.php
Membuat file koneksi.php
HASIL

Project Web Absensi yang akan dibuat adalah project sederhana yang bertujuan untuk perkenalan tentang pemrograman web menggunakan bahasa PHP. Project ini akan dilakukan secara bertahap sesuai dengan kegiatan belajar mengajar di kelas. Mungkin untuk saat ini masih belum fix mengenai fitur apa saja yang akan di kembangkan. Tapi pastinya CRUD wkwk.

1. Persiapan Software

Pada tahap pertama yang harus kita persiapkan adalah software atau aplikasi yang akan digunakan untuk proses pengembangan web. Berikut beberapa aplikasi yang akan digunakan :

Aplikasi Web Server / Database Server : XAMPP atau Laragon. Silahkan di klik link nya untuk mengunduh. Setelah itu install sendiri next next aja sii.
Aplikasi Text Editor : Bisa menggunakan Sublime Text atau Visual Studio Code yang mudah. Terus install sendiri ya.

Setelah selesai menginstall XAMPP nanti akan ada folder XAMPP di dalam Local Disk C:, silahkan anda masuk ke dalam folder XAMPP, kemudian cek terdapat folder htdocs. Nah disitu kita akan melakukan proses membuat folder project.

2. Persiapan Folder Project

Disini kita akan membuat sebuah folder baru di dalam folder htdocs dengan nama folder absen.

Untuk membuat folder dengan mudah bisa menekan tombol pada keyboard seperti : CTRL+SHIFT+N, kemudian ubah nama folder tersebut menjadi absen.

Untuk memasukkan nya ke dalam sublime text. Anda bisa mengikuti tahap berikut :

klik file -> open folder -> cari folder nya (di dalam htdocs, masuk ke absen)

3. Membuat file Index.php

Setelah berhasil membuat folder absen, kita akan membuat file baru dengan nama index.php sebagai tampilan awal yang akan ditampilkan ketika kita membuka web kita.

Untuk membuat file index.php anda bisa membuat dengan sublime text atau VsCode atau teks editor lainnya.

klik file -> new file -> pastikan di dalam folder absen di dalam htdocs. Atau bisa juga menggunakan CTRL + N.

Kemudian di dalam file index.php anda bisa isi sebagai berikut :

<?php
session_start();
include 'koneksi.php'; 
?>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>APLIKASI DATA DIRI</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  </head>
  <body>


    <?php include "nav.php"; ?>
    <div class="container p-3">
      <?php 
      if(isset($_GET['page'])) {
        $page = $_GET['page'];
        switch ($page) {
          case 'home':
            include "page/home.php";
            break;
          case 'data':
            include 'page/data.php';
            break;
          case 'kontak':
            include 'page/kontak.php';
            break;
          default:
            echo "<center> <h3> Halaman tidak ditemukan! </h3> </center>";
            break;
        }
      } else {
        include "page/home.php";
      }
    ?>
    </div>

    <?php include "footer.php"; ?>

    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  </body>
</html>

Penjelasan Kode Diatas:

<?php - Menandai awal blok kode PHP.
session_start(); - Memulai sesi (session) di server. Sesi digunakan untuk menyimpan informasi pengguna di antara halaman web yang berbeda (jika diperlukan).
include 'koneksi.php'; - Menyertakan file eksternal bernama koneksi.php. File ini kemungkinan berisi informasi untuk menghubungkan ke database (misalnya, nama host, nama pengguna, kata sandi database).
<?php include "nav.php"; ?> - Menyertakan file eksternal bernama nav.php. File ini kemungkinan berisi kode untuk menu navigasi di halaman web.
<?php if(isset($_GET['page'])) { ... } else { ... } ?> - Blok kondisi untuk menentukan konten yang akan ditampilkan berdasarkan parameter page yang dikirimkan melalui URL (metode GET).
if(isset($_GET['page'])) - Memeriksa apakah parameter page ada di URL.
$page = $_GET['page']; - Jika parameter page ada, menyimpan nilainya ke variabel $page.
switch ($page) { ... } - Pernyataan switch untuk memeriksa nilai variabel $page dan menampilkan konten yang sesuai:
case 'home': - Jika nilai $page adalah 'home', maka konten dari file page/home.php akan disertakan. File ini kemungkinan berisi konten untuk halaman utama aplikasi.
case 'data':, case 'kontak': - Kasus serupa untuk halaman data, kontak, dan formulir, masing-masinng menyertakan file page/data.php, page/kontak.php.
default: - Jika nilai $page tidak sesuai dengan kasus yang ada, pesan "Halaman tidak ditemukan!" akan ditampilkan.
else - Jika parameter page tidak ada di URL, maka konten dari file page/home.php (halaman utama) akan disertakan secara default.
<?php include "footer.php"; ?> - Menyertakan file eksternal bernama footer.php. File ini kemungkinan berisi kode untuk bagian footer

4. Membuat file nav.php

File nav.php akan digunakan untuk proses navigasi pada aplikasi absensi yang akan digunakan. Berikut merupakan isi dari file tersebut.

<nav class="navbar navbar-expand-lg bg-success">
  <div class="container-fluid">
    <a class="navbar-brand text-white" href="./">APLIKASI ABSENSI</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active text-white" aria-current="page" href="absen">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active text-white" aria-current="page" href="/absen/mapel">Mapel</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active text-white" aria-current="page" href="/absen/?page=data">Data</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active text-white" aria-current="page" href="/absen/?page=kontak">Kontak</a>
        </li>
        <?php 
          if (isset($_SESSION['username'])) { ?>

              <li class="nav-item">
                <a class="nav-link active text-white" aria-current="page" href="/absen/absen">Absen</a>
              </li>

              <li class="nav-item">
               <a class="nav-link active text-white" aria-current="page" href="/absen/siswa">Profil<a>
              </li>
          
          <?php 
            } 
          ?>
      </ul>
      <div class="d-flex">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <?php 
          if (isset($_SESSION['username'])) {
            echo " 
          <li class='nav-item'>
            <a class='btn btn-md btn-danger' aria-current='page' href='/absen/auth/logout.php'>Logout</a>
          </li>

             ";
          } else {
            echo " 
          <li class='nav-item'>
            <a class='btn btn-md btn-light' aria-current='page' href='/absen/auth/login'>Login</a>
          </li>
             ";
          }
          ?>
        </ul>
      </div>
    </div>
  </div>
</nav>

Penjelasan Kode Diatas:

Terdapat kondisi if else dengan parameter sessions, jadi ketika user login maka akan menampilkan navigasi yang berbeda.

5. Membuat file home.php, kontak.php dan data.php

Untuk membuat file diatas, silahkan buat dulu folder page di dalam folder absen. Baru anda bisa membuat file-file berikut :

home.php

<?php

// Cek apakah session username sudah ada
if (isset($_SESSION['username'])) {?>
<div class='d-flex justify-content-center'>
	<h1 class='text-uppercase'>selamat datang <span class='text-danger'> <?= $_SESSION['username'] ?> </span> di aplikasi absensi!</h1>
</div>
<?php } else { ?>
<div class='d-flex justify-content-center'>
	<h1 class='text-uppercase'>selamat datang di aplikasi absensi!</h1>
</div>
<p class='text-center'>Untuk dapat mengakses aplikasi ini, silahkan registrasi jika belum memiliki akun. Dan silahkan login untuk masuk kedalam aplikasi.</p>
<div class='d-flex justify-content-center gap-3'>
	<a href='auth/register' class='btn btn-md btn-danger'>Register</a>
	<a href='auth/login' class='btn btn-md btn-primary'>Login</a>
</div>

<?php }
?>

data.php

<h3>Ini adalah halaman data</h3>

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

kontak.php

<form>
	<h3>Masukan email atau pesan anda</h3>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

6. Membuat file footer.php

Kita akan membuat sebuah footer dengan nama footer.php di dalam folder absen ya, jadi tidak di dalam folder page.

<footer class="fixed-bottom">
	<div align="center" class="p-2 bg-success text-white">
		<span>Copyright @wahyup</span>
	</div>
</footer>

7. Membuat file koneksi.php

Karena pada file index.php kita sudah memasukan atau include file koneksi.php maka disini kita akan membuat sebuah file baru dengan nama koneksi.php di dalam folder absen.

Tapi sebelum membuat koneksi.php yang menghubungkan ke database, disini anda harus membuat database yang sesuai dahulu. Jika tidak maka akan muncul error. Alternatif lain yang bisa anda gunakan adalah tidak melakukan include koneksi.php pada file index.php

<?php

     $koneksi = mysqli_connect("localhost","root","","db_12_rpl");
     if(!$koneksi){
     	 die("koreksi gagal" . mysqli_connect_error());
     }

?>

Penjelasan Kode

$koneksi = mysqli_connect("localhost","root","","db_12_rpl");

mysqli_connect(): Fungsi bawaan PHP untuk membuat koneksi ke database MySQL.

Argumen:

localhost: Nama host database (dalam hal ini, server lokal).
root: Username untuk login ke database.
"": Password untuk login ke database (kosong dalam contoh ini).
db_12_rpl: Nama database yang akan digunakan.
Hasil dari fungsi ini akan disimpan dalam variabel $koneksi.

if(!$koneksi){

Memeriksa apakah koneksi berhasil atau tidak. Jika $koneksi bernilai false (koneksi gagal), maka kode di dalam blok if akan dijalankan.

die("koreksi gagal" . mysqli_connect_error());

die(): Fungsi PHP untuk menghentikan eksekusi script.
mysqli_connect_error(): Fungsi untuk mendapatkan pesan kesalahan koneksi.
Jika koneksi gagal, pesan kesalahan akan ditampilkan dan script akan berhenti.

8. Hasil

Dari kode yang sudah di kerjakan diatas, anda bisa melihat hasil dengan cara membuka browser pada url http://localhost/absen. Seperti berikut adalah hasilnya :

KESIMPULAN

Dengan mengikuti langkah-langkah di atas, Anda telah berhasil mempersiapkan dasar-dasar project aplikasi absensi yang terstruktur dan rapi. Mulai dari instalasi software yang diperlukan hingga pembuatan file inti seperti index.php, nav.php, home.php, kontak.php, data.php, footer.php, dan koneksi.php, Anda kini memiliki fondasi aplikasi absensi yang dapat dikembangkan lebih lanjut sesuai kebutuhan. Struktur folder yang rapi dan penggunaan file terpisah untuk berbagai komponen tidak hanya membuat kode lebih mudah dikelola, tetapi juga memudahkan pengembangan di masa depan. Semoga panduan ini membantu Anda dalam mempersiapkan latihan UKK RPL dengan baik dan meningkatkan pemahaman Anda dalam pengembangan aplikasi berbasis PHP

Wahyup - Software House Lampung

Latihan UKK RPL - Persiapan Project Aplikasi Absensi

Persiapan Project Aplikasi Absensi - UKK RPL

Daftar Isi :

1. Persiapan Software

2. Persiapan Folder Project

3. Membuat file Index.php

Penjelasan Kode Diatas:

4. Membuat file nav.php

Penjelasan Kode Diatas:

5. Membuat file home.php, kontak.php dan data.php

home.php

data.php

kontak.php

6. Membuat file footer.php

7. Membuat file koneksi.php

Penjelasan Kode

8. Hasil

KESIMPULAN

Post a Comment for "Latihan UKK RPL - Persiapan Project Aplikasi Absensi"

Menu Halaman Statis