Laporan Tentang Pembuatan Aplikasi Catatan

Perjalanan Berbasis Web

MUHAMMAD FIKRAN HAKIM

XII RPL 2
Laporan ini dibuat untuk menyelesaikan tugas PWPB semester ganjil.
1. Tools yang digunakan :
• Laragon
• Visual Studio Code
• Chrome
2. Database dengan nama db_perjalanan dan tabel beserta atributnya
sesuai desain database berikut:

3. Struktur Folder
Keterangan untuk folder dan file:
Folder = Folder
File = File
Catatan_Perjalanan
• assets
• controller
• crud.php
• logout.php
• panggil.php
• model
• koneksi.php
• prosescrud.php
• template
• navbar.php
• sidebar.php
 • footer.php
• views
• signup.php
• dashboard.php
• perjalanan.php
• harian.php
• mingguan.php
• bulanan.php
• index.php
Untuk assets bisa mendownload di link berikut :
https://github.com/indrijunanda/RuangAdmin.git

4. controller
1. Kode program crud.php :
<?php

require 'panggil.php';

// proses tambah

if (!empty($_GET['aksi'] == 'daftar')) {
$tabel = 'users';
# proses insert
$data = array(

'username' => $_POST['username'],

'password' => md5($_POST['password']),

'nama' => $_POST['nama']

);

$proses->daftar($tabel, $data);

echo '<script>alert("Daftar
Berhasil");window.location="../index.php"</script>';
}

//login
if (!empty($_GET['aksi'] == 'login')) {
 // validasi text untuk filter karakter khusus dengan fungsi strip_tags()
$user = strip_tags($_POST['username']);
$pass = strip_tags($_POST['password']);

// panggil fungsi proses_login() yang ada di class prosesCrud()

$hasil = $proses->proses_login($user, $pass);
if ($hasil == 'gagal') {
echo "<script> alert('Login gagal. Nama Pengguna Atau Kata Sandi
Salah!'); window.location='../index.php?get=gagal';</script>";
} else {

// status yang diberikan

session_start();
$_SESSION['ADMIN'] = $hasil;
// status yang diberikan
echo "<script>window.location='../views/dashboard.php';</script>";
}
}

//koding menambah/input data catatan perjalanan

if (!empty($_GET['aksi'] == 'tambah')) {

$tabel = 'perjalanan';
# proses insert
$data = array(
'iduser' => $_POST['iduser'],
'tanggal' => $_POST['tanggal'],
'jam' => $_POST['jam'],
'lokasi' => $_POST['lokasi'],
'acarakegiatan' => $_POST['acarakegiatan'],
'lama' => $_POST['lama'],
'suhu' => $_POST['suhu']
);
$proses->tambah_data($tabel, $data);
echo '<script>alert("Data Berhasil
Disimpan");window.location="../views/perjalanan.php";</script>';
}

//hapus data
if (!empty($_GET['aksi'] == 'hapus')) {
$tabel = 'perjalanan';
$where = 'idperjalanan';
$id = strip_tags($_GET['hapusid']);
$proses->hapus_riwayat($tabel, $where, $id);
echo '<script>alert("Hapus data
berhasil");window.location="../views/harian.php"</script>';
}

//edit data harian

if (!empty($_GET['aksi']) && $_GET['aksi'] == 'edit') {
$tabel = 'perjalanan';

// Validasi dan pembersihan input

$idperjalanan = strip_tags($_POST['edit_id']);
$tanggal = strip_tags($_POST['edit_tanggal']);
$jam = strip_tags($_POST['edit_jam']);
$lokasi = strip_tags($_POST['edit_lokasi']);
$acarakegiatan = strip_tags($_POST['edit_acara']);
$lama = strip_tags($_POST['edit_lama']);
$suhu = strip_tags($_POST['edit_suhu']);

// Data yang akan diubah

$data = array(
'tanggal' => $tanggal,
'jam' => $jam,
'lokasi' => $lokasi,
'acarakegiatan' => $acarakegiatan,
'lama' => $lama,
'suhu' => $suhu

);

// Spesifikasikan kondisi WHERE untuk mengidentifikasi data yang akan

diubah
$where = 'idperjalanan';

// Panggil fungsi untuk melakukan pembaruan data

$proses->edit_riwayat($tabel, $data, $where, $idperjalanan);
echo '<script>alert("Data Berhasil
Diubah");window.location="../views/harian.php";</script>';
}

//edit data mingguan

if (!empty($_GET['aksi']) && $_GET['aksi'] == 'editmingguan') {
$tabel = 'perjalanan';

// Validasi dan pembersihan input

$idperjalanan = strip_tags($_POST['edit_id']);
$tanggal = strip_tags($_POST['edit_tanggal']);
$jam = strip_tags($_POST['edit_jam']);
$lokasi = strip_tags($_POST['edit_lokasi']);
$acarakegiatan = strip_tags($_POST['edit_acara']);
$lama = strip_tags($_POST['edit_lama']);
 $suhu = strip_tags($_POST['edit_suhu']);

// Data yang akan diubah

$data = array(
'tanggal' => $tanggal,
'jam' => $jam,
'lokasi' => $lokasi,
'acarakegiatan' => $acarakegiatan,
'lama' => $lama,
'suhu' => $suhu
);

// Spesifikasikan kondisi WHERE untuk mengidentifikasi data yang akan

diubah
$where = 'idperjalanan';

// Panggil fungsi untuk melakukan pembaruan data

$proses->edit_riwayat($tabel, $data, $where, $idperjalanan);

echo '<script>alert("Data Berhasil

Diubah");window.location="../views/mingguan.php";</script>';
}

//edit data bulanan

if (!empty($_GET['aksi']) && $_GET['aksi'] == 'editbulanan') {
$tabel = 'perjalanan';

// Validasi dan pembersihan input

$idperjalanan = strip_tags($_POST['edit_id']);
$tanggal = strip_tags($_POST['edit_tanggal']);
$jam = strip_tags($_POST['edit_jam']);
$lokasi = strip_tags($_POST['edit_lokasi']);
$acarakegiatan = strip_tags($_POST['edit_acara']);
$lama = strip_tags($_POST['edit_lama']);
$suhu = strip_tags($_POST['edit_suhu']);

// Data yang akan diubah

$data = array(
'tanggal' => $tanggal,
'jam' => $jam,
'lokasi' => $lokasi,
'acarakegiatan' => $acarakegiatan,
'lama' => $lama,
'suhu' => $suhu
);
 // Spesifikasikan kondisi WHERE untuk mengidentifikasi data yang akan
diubah
$where = 'idperjalanan';

// Panggil fungsi untuk melakukan pembaruan data

$proses->edit_riwayat($tabel, $data, $where, $idperjalanan);

echo '<script>alert("Data Berhasil

Diubah");window.location="../views/bulanan.php";</script>';
}
?>

2. Kode program logout.php :

<?php

//logout
if (!empty($_GET['aksi'] == 'logout')) {
session_start();
session_destroy();
echo '<script>alert("Logout
Berhasil");window.location="../index.php"</script>';
}

3. Kode program panggil.php :

<?php

// panggil file

include '../model/koneksi.php';

include '../model/prosescrud.php';

// cara panggil class di koneksi php

$db = new Koneksi();

// cara panggil koneksi di fungsi DBConnect()

$koneksi = $db->dbkonek();

// panggil class prosesCrud di file prosescrud.php

$proses = new prosesCrud($koneksi);

//menghilangkan pesan error

//error_reporting(0);

5. model
1. Kode program koneksi.php :
<?php
class Koneksi
{
public function dbkonek()
{

$dbhost = 'localhost';
$dbname = 'db_perjalanan';
$dbuser = 'root';
$dbpass = '';

try {
$dbConnection = new PDO("mysql:host=$dbhost;dbname=$dbname",
$dbuser, $dbpass);
$dbConnection->exec("set names utf8");
$dbConnection->setAttribute(PDO::ATTR_ERRMODE,
PDO::ERRMODE_EXCEPTION);
return $dbConnection;

} catch (PDOException $e) {

return 'Connection failed: ' . $e->getMessage();

2. Kode program prosescrud.php :

<?php
class prosesCrud
{
protected $db;
function __construct($db)
 {
$this->db = $db;
}
public function daftar($tabel, $data)
{

$username = $data['username'];
$password = $data['password'];
$namauser = $data['nama'];
$sql = "INSERT INTO $tabel (username, password, nama) VALUES
('$username', '$password', '$namauser')";
$save = $this->db->prepare($sql);

return $save->execute();
}

public function proses_login($user, $pass)

// untuk password kita enkrip dengan md5

$row = $this->db->prepare('SELECT * FROM users WHERE username=? AND
password=md5(?)');
$row->execute(array($user, $pass));
$count = $row->rowCount();
if ($count > 0) {

return $count = $row->fetch();

} else {

return 'gagal';
}
}

//koding menambah/input data riwayat kunjungan

public function tambah_data($tabel, $data)
{

$iduser = $data['iduser'];
$tanggal = $data['tanggal'];
$jam = $data['jam'];
$lokasi = $data['lokasi'];
$acarakegiatan = $data['acarakegiatan'];
$lama = $data['lama'];
$suhu = $data['suhu'];
$sql = "INSERT INTO $tabel (iduser, tanggal, jam, lokasi,
acarakegiatan, lama, suhu) VALUES ('$iduser', '$tanggal', '$jam', '$lokasi',
'$acarakegiatan','$lama','$suhu')";
 $save = $this->db->prepare($sql);
return $save->execute();
}

function tampil_data($tabel, $where, $id)

{
$row = $this->db->prepare("SELECT * FROM $tabel WHERE $where =?");
$row->execute(array($id));
return $hasil = $row->fetch();
}

function tampil_data_harianku($tabel, $sesi)

{
$row = $this->db->prepare("SELECT * FROM $tabel WHERE tanggal =
DATE(NOW()) AND iduser='$sesi'");
$row->execute();
return $hasil = $row->fetchAll();
}

function hapus_riwayat($tabel, $where, $id)

{
$sql = "DELETE FROM $tabel WHERE $where=?";
$row = $this->db->prepare($sql);
return $row->execute(array($id));
}

//mingguan
function tampil_data_mingguanku($tabel, $iduser)
{

$nows = strtotime(date('Y-m-d'));
$start = date('Y-m-d', strtotime('-7 day', $nows));
$end = date('Y-m-d');
//echo 'daftar transaksi 7 hari terakhir periode '.$start. ' hingga
'.$end;

$row = $this->db->prepare("SELECT * FROM $tabel WHERE tanggal between

'$start' AND '$end' ORDER BY tanggal DESC");
$row->execute();
return $hasil = $row->fetchAll();
}

//data bulanan
function tampil_data_bulananku($tabel, $iduser)
{
$tgl = date("m");
$nows = strtotime(date('Y-m-d'));
 $start = date('Y-m-d', strtotime('-30 day', $nows));
$end = date('Y-m-d');
$row = $this->db->prepare("SELECT * FROM $tabel WHERE id_user=
'$iduser' AND month(tanggal)='$tgl' ORDER BY tanggal DESC");
$row = $this->db->prepare("SELECT * FROM $tabel WHERE tanggal between
'$start' AND '$end' ORDER BY tanggal DESC");
$row->execute();
return $hasil = $row->fetchAll();
}

function edit_riwayat($tabel, $data, $where, $id)

{
// Buat string SQL untuk mengupdate data
$sql = "UPDATE $tabel SET ";
$values = [];

foreach ($data as $key => $value) {

$values[] = "$key = ?";
}

$sql .= implode(', ', $values);

$sql .= " WHERE $where = ?";

// Siapkan statement SQL

$stmt = $this->db->prepare($sql);

// Lakukan binding data

$bindValues = array_values($data);
$bindValues[] = $id;

// Eksekusi perintah SQL

return $stmt->execute($bindValues);
}
}

6. template
1. Kode program navbar.php :
<?php

if (session_status() == PHP_SESSION_NONE) {
session_start();
}
if (empty($_SESSION['ADMIN'])) {
header('location:../index.php');
 exit();
}

$user = $_SESSION['ADMIN']['username'];
?>

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="../assets/img/logo.jpg" rel="icon">
<title>Catatan Perjalanan</title>
<link href="../assets/vendor/fontawesome-free/css/all.min.css"
rel="stylesheet" type="text/css">
<link href="../assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet" type="text/css">
<link href="../assets/css/ruang-admin.min.css" rel="stylesheet">
</head>

<body>

<nav class="navbar navbar-expand navbar-light bg-primary topbar mb-4 static-

top">
<button id="sidebarToggleTop" class="btn btn-link rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">
<img class="img-profile rounded-circle" src="../assets/img/boy.png"
style="max-width: 60px">
<span class="ml-2 d-none d-lg-inline text-white small"><strong><?php
echo $user ?></strong></span>
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-
in" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#" data-toggle="modal" data-
target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
 Keluar
</a>
</div>
</li>
</ul>
</nav>

<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-

labelledby="exampleModalLabelLogout" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabelLogout">Konfirmasi
Logout</h5>
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Apakah Anda yakin ingin logout?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-
dismiss="modal">Batal</button>
<a href="../controller/logout.php?aksi=logout" class="btn btn-
primary">Keluar</a>
</div>
</div>
</div>
</div>

</body>

</html>

2. Kode program sidebar.php :

<ul class="navbar-nav sidebar sidebar-light accordion" id="accordionSidebar">
<a class="sidebar-brand d-flex align-items-center justify-content-center"
href="#">
<div class="sidebar-brand-icon">
<img src="../assets/img/letter-c.png">
</div>
<div class="sidebar-brand-text mx-3">Catatan Perjalanan</div>
</a>
<hr class="sidebar-divider my-0">
 <li class="nav-item">
<a class="nav-link" href="../views/dashboard.php">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span>
</a>
</li>

<li class="nav-item">
<a class="nav-link" href="../views/perjalanan.php">
<i class="fas fa-fw fa-calendar"></i>
<span>Catatan Perjalanan</span>
</a>
</li>

<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-
target="#collapseBootstrap" aria-expanded="true" aria-
controls="collapseBootstrap">
<i class="far fa-fw fa-window-maximize"></i>
<span>Laporan</span>
</a>
<div id="collapseBootstrap" class="collapse" aria-
labelledby="headingBootstrap" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="../views/harian.php">Harian</a>
<a class="collapse-item" href="../views/mingguan.php">Mingguan</a>
<a class="collapse-item" href="../views/bulanan.php">Bulanan</a>
</div>
</div>
</li>

</ul>

3. Kode program footer.php :

<footer class="sticky-footer bg-white">
<div class="container">
<div class="text-center my-auto">
<span> &copy; <?= Date('Y') ?> Muhammad_Fikran_Hakim</span>
</div>
</div>
</footer>

7. views
1. Kode program signup.php :
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="../assets/img/letter-c.png" rel="icon">
<title>Catatan Perjalanan</title>
<link href="../assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet" type="text/css">
<link href="../assets/vendor/fontawesome-free/css/all.min.css"
rel="stylesheet" type="text/css">
<link href="../assets/css/ruang-admin.min.css" rel="stylesheet">
<style>
body {
font-family: 'Montserrat', sans-serif;
background: url('../assets/img/bg.svg') center center fixed;
background-size: cover;

.card-body {
background-color: #fff;
padding: 20px;
border-radius: 10px;
}

.btn-donate {
--clr-font-main: hsla(0 0% 20% / 100);
--btn-bg-1: hsla(194 100% 69% / 1);
--btn-bg-2: hsla(217 100% 56% / 1);
--btn-bg-color: hsla(360 100% 100% / 1);
--radii: 0.5em;
cursor: pointer;
padding: 0.9em 1.4em;
min-width: 120px;
min-height: 44px;
font-size: var(--size, 1rem);
font-family: "Segoe UI", system-ui, sans-serif;
font-weight: 500;
transition: 0.8s;
background-size: 280% auto;
background-image: linear-gradient(325deg, var(--btn-bg-2) 0%,
var(--btn-bg-1) 55%, var(--btn-bg-2) 90%);
border: none;
 border-radius: var(--radii);
color: var(--btn-bg-color);
box-shadow: 0px 0px 20px rgba(71, 184, 255, 0.5), 0px 5px 5px -1px
rgba(58, 125, 233, 0.25), inset 4px 4px 8px rgba(175, 230, 255, 0.5), inset -
4px -4px 8px rgba(19, 95, 216, 0.35);
}

.btn-donate:hover {
background-position: right top;
}

.btn-donate:is(:focus, :focus-visible, :active) {

outline: none;
box-shadow: 0 0 0 3px var(--btn-bg-color), 0 0 0 6px var(--btn-bg-
2);
}

@media (prefers-reduced-motion: reduce) {

.btn-donate {
transition: linear;
}
}
</style>
</head>

<body>
<div class="container">
<div class="row justify-content-center mt-3">
<div class="col-md-5">
<div class="card-body mt-3 rounded-start shadow">
<div class="text-center mb-4">
<img src="../assets/img/buat_akun.png" class="img-
fluid" width="100" alt="">
<h3>Buat Akun</h3>
</div>
<form action="../controller/crud.php?aksi=daftar"
method="post">
<div class="mb-3">
<div class="input-group">
<span class="input-group-text"><img
src="../assets/img/adduser.png" width="27" class="img-fluid" alt=""></span>
<input type="text" name="nama" class="form-
control" placeholder="Nama lengkap" required>
</div>
<label for="" class="form-label mt-2">Silahkan
masukan nama lengkap</label>
</div>
<div class="mb-3">
 <div class="input-group">
<span class="input-group-text"><img
src="../assets/img/adduser.png" width="27" class="img-fluid" alt=""></span>
<input type="text" name="username"
class="form-control" placeholder="Nama pengguna" required>
</div>
<label for="" class="form-label mt-2">Silahkan
masukan nama pengguna</label>
</div>
<div class="mb-1">
<div class="input-group">
<span class="input-group-text"><img
src="../assets/img/padlock.png" width="27" class="img-fluid" alt=""></span>
<input type="password" name="password"
class="form-control" placeholder="Kata sandi" required>
</div>
<label for="" class="form-label mt-2">Silahkan
masukan kata sandi</label>
</div>
<button class="btn-donate w-100 mb-2"
type="submit">DAFTAR</button>
</form>
<label for="">Sudah punya akun? <a
href="../index.php">Masuk</a></label>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/jquery/jquery.min.js"></script>
<script
src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../assets/vendor/jquery-
easing/jquery.easing.min.js"></script>
<script src="../assets/js/ruang-admin.min.js"></script>
<script src="../assets/vendor/chart.js/Chart.min.js"></script>
<script src="../assets/js/demo/chart-area-demo.js"></script>
</body>

</html>

2. Kode program dashboard.php :

<?php
session_start();

$sesi = $_SESSION['ADMIN'];

if (empty($_SESSION['ADMIN'])) {
 header('location: ../index.php');
}

include '../controller/panggil.php';
?>

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="../assets/img/letter-c.png" rel="icon">
<title>Catatan Perjalanan</title>
<link href="../assets/vendor/fontawesome-free/css/all.min.css"
rel="stylesheet" type="text/css">
<link href="../assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet" type="text/css">
<link href="../assets/css/ruang-admin.min.css" rel="stylesheet">
</head>

<body id="page-top">
<div id="wrapper">
<?php include '../template/sidebar.php'; ?>
<div id="content-wrapper" class="d-flex flex-column">
<?php include '../template/navbar.php'; ?>
<div class="container-fluid" id="container-wrapper">
<h3>Dashboard</h3>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-
uppercase mb-1">Jumlah User</div>
<div class="h5 mb-0 font-weight-bold text-
gray-800">4</div>
<div class="mt-2 mb-0 text-muted text-xs">
</div>
</div>
<div class="col-auto">
<i class="fas fa-user fa-2x text-
primary"></i>
</div>
 </div>
</div>
</div>
</div>
</div>
</div>
</div>

<a class="scroll-to-top rounded" href="#page-top">

<i class="fas fa-angle-up"></i>
</a>

<script src="../assets/vendor/jquery/jquery.min.js"></script>
<script
src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../assets/vendor/jquery-
easing/jquery.easing.min.js"></script>
<script src="../assets/js/ruang-admin.min.js"></script>

</body>

</html>

3. Kode program perjalanan.php :

<?php
session_start();

if (isset($_SESSION['ADMIN']) && isset($_SESSION['ADMIN']['iduser'])) {

$iduser = $_SESSION['ADMIN']['iduser'];
}

?>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="../assets/img/letter-c.png" rel="icon">
<title>Catatan Perjalanan</title>
<link href="../assets/vendor/fontawesome-free/css/all.min.css"
rel="stylesheet" type="text/css">
 <link href="../assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet" type="text/css">
<link href="../assets/css/ruang-admin.min.css" rel="stylesheet">
</head>

<body id="page-top">
<div id="wrapper">
<?php include '../template/sidebar.php'; ?>

<div id="content-wrapper" class="d-flex flex-column">

<?php include '../template/navbar.php'; ?>
<div class="container-fluid" id="container-wrapper">
<div class="row">
<div class="col-lg-8">
<div class="card mb-4">
<div class="card-header">
<i class="fas fa-calendar-alt mr-1"></i>
Catatan Perjalanan
</div>
<div class="card-body">
<form
action="../controller/crud.php?aksi=tambah" method="post">
<div class="form-group">
<input type="hidden" id="iduser"
name="iduser" class="form-control" value="<?php echo $iduser; ?>">
<label for="tanggal">Tanggal:</label>
<input type="date" class="form-control
col-lg-7" id="tanggal" name="tanggal" required>
</div>
<div class="form-group">
<label for="jam">Jam:</label>
<input type="time" id="jam" name="jam"
class="form-control col-lg-7">
</div>
<div class="form-group">
<label for="lokasi">Lokasi:</label>
<input type="text" id="lokasi"
name="lokasi" class="form-control col-lg-7" required>
</div>
<div class="form-group">
<label for="lokasi">Acara
Kegiatan:</label>
<input type="text" id="acarakegiatan"
name="acarakegiatan" class="form-control col-lg-7" required>
</div>
<div class="form-group">
<label for="lama">Lama (dalam
jam):</label>
 <input type="number" id="lama"
name="lama" class="form-control col-lg-7" required min="1">
</div>
<div class="form-group">
<label for="suhu">Suhu:</label>
<input type="number" class="form-
control col-lg-7" id="suhu" name="suhu" required>
</div>
<button type="submit" class="btn btn-
primary text-center">Simpan</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<a class="scroll-to-top rounded" href="#page-top">

<i class="fas fa-angle-up"></i>
</a>

<script src="../assets/vendor/jquery/jquery.min.js"></script>
<script
src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../assets/vendor/jquery-
easing/jquery.easing.min.js"></script>
<script src="../assets/js/ruang-admin.min.js"></script>

</body>

</html>

4. Kode program harian.php :

<?php
session_start();

$sesi = $_SESSION['ADMIN'];

if (empty($_SESSION['ADMIN'])) {
header('location: ../index.php');
}

include '../controller/panggil.php';
?>
 <!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="../assets/img/letter-c.png" rel="icon">
<title>Catatan Perjalanan</title>
<link href="../assets/vendor/fontawesome-free/css/all.min.css"
rel="stylesheet" type="text/css">
<link href="../assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet" type="text/css">
<link href="../assets/css/ruang-admin.min.css" rel="stylesheet">
</head>

<body id="page-top">
<div id="wrapper">
<?php include '../template/sidebar.php'; ?>
<div id="content-wrapper" class="d-flex flex-column">
<?php include '../template/navbar.php'; ?>
<div class="container-fluid" id="container-wrapper">
<div class="row">
<div class="col-lg-12 mb-4">
<div class="card">
<div class="card-header py-3 d-flex flex-row
align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-
primary">Laporan Harian</h6>
</div>
<div class="table-responsive">
<table class="table align-items-center
table-flush">
<thead class="thead-light">
<tr>
<th>No</th>
<th>Tanggal</th>
<th>Jam</th>
<th>Lokasi</th>
<th>Acara Kegiatan</th>
<th>Lama</th>
<th>Suhu</th>
<th>Aksi</th>
</tr>
</thead>
 <tbody>
<?php
$no = 1;
$dataHarian = $proses-
>tampil_data_harianku('perjalanan', $sesi['iduser']);
foreach ($dataHarian as $data) {
?>
<tr>
<td><?php echo $no ?></td>
<td><?php echo
$data['tanggal']; ?></td>
<td><?php echo
$data['jam']; ?></td>
<td><?php echo
$data['lokasi']; ?></td>
<td><?php echo
$data['acarakegiatan']; ?></td>
<td><?php echo
$data['lama']; ?></td>
<td><?php echo
$data['suhu']; ?></td>
<td style="text-
align:left;">
<a href="#" class="btn
btn-primary btn-md edit-button" data-toggle="modal" data-target="#editModal"
data-editid="<?php echo $data['idperjalanan']; ?>">
<span class="fa
fa-edit"></span>
</a>&nbsp;
<a href="#" class="btn
btn-danger btn-md delete-button" data-toggle="modal" data-
target="#deleteModal" data-deleteid="<?php echo $data['idperjalanan']; ?>">
&nbsp;<span class="fa fa-trash"></span></a>
</td>
</tr>
<?php
$no++;
}
?>
</tbody>
</table>
<?php include '../template/footer.php'; ?>
</div>

</div>
</div>
</div>
</div>
 </div>
</div>

<div class="modal fade" id="editModal" tabindex="-1" aria-

labelledby="editModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editModalLabel">Edit Data
Harian</h5>
<button type="button" class="close" data-
dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form action="../controller/crud.php?aksi=edit"
method="POST">
<input type="hidden" name="edit_id" id="edit_id">
<div class="form-group">
<label for="edit_tanggal">Tanggal</label>
<input type="date" class="form-control"
id="edit_tanggal" name="edit_tanggal" required readonly>
</div>
<div class="form-group">
<label for="edit_jam">Jam</label>
<input type="time" class="form-control"
id="edit_jam" name="edit_jam" required>
</div>
<div class="form-group">
<label for="edit_lokasi">Lokasi</label>
<input type="text" class="form-control"
id="edit_lokasi" name="edit_lokasi" required>
</div>
<div class="form-group">
<label for="edit_tujuan">Acara
Kegiatan</label>
<input type="text" class="form-control"
id="edit_acara" name="edit_acara" required>
</div>
<div class="form-group">
<label for="edit_lama">Lama</label>
<input type="number" class="form-control"
id="edit_lama" name="edit_lama" required min="1" max="20">
</div>
<div class="form-group">
<label for="edit_suhu">Suhu</label>
 <input type="number" class="form-control"
id="edit_suhu" name="edit_suhu" required min="1">
</div>
<button type="submit" class="btn btn-
primary">Simpan</button>
<button type="reset" class="btn btn-danger
cancel">Reset</button>
</form>
</div>
</div>
</div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1" aria-

labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="deleteModalLabel">Konfirmasi Hapus</h5>
<button type="button" class="close" data-
dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Apakah Anda yakin ingin menghapus data ini?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Batal</button>
<a id="deleteLink" href="#" class="btn btn-
danger">Hapus</a>
</div>
</div>
</div>
</div>

<a class="scroll-to-top rounded" href="#page-top">

<i class="fas fa-angle-up"></i>
</a>

<script src="../assets/vendor/jquery/jquery.min.js"></script>
<script
src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../assets/vendor/jquery-
easing/jquery.easing.min.js"></script>
<script src="../assets/js/ruang-admin.min.js"></script>
 <script>
$(document).on("click", ".edit-button", function() {
var editId = $(this).data('editid');
$('#edit_id').val(editId);

var editTanggal =
$(this).closest('tr').find('td:eq(1)').text();
var editJam = $(this).closest('tr').find('td:eq(2)').text();
var editLokasi =
$(this).closest('tr').find('td:eq(3)').text();
var editAcara = $(this).closest('tr').find('td:eq(4)').text();
var editLama = $(this).closest('tr').find('td:eq(5)').text();
var editSuhu = $(this).closest('tr').find('td:eq(6)').text();

$('#edit_tanggal').val(editTanggal);
$('#edit_jam').val(editJam);
$('#edit_lokasi').val(editLokasi);
$('#edit_acara').val(editAcara);
$('#edit_lama').val(editLama);
$('#edit_suhu').val(editSuhu);
});

$(document).on("click", ".delete-button", function() {

var deleteId = $(this).data('deleteid');
var deleteUrl = "../controller/crud.php?aksi=hapus&hapusid=" +
deleteId;
$("#deleteLink").attr("href", deleteUrl);
});
</script>

</body>

</html>

5. Kode program mingguan.php :

<?php
session_start();

$sesi = $_SESSION['ADMIN'];

if (empty($_SESSION['ADMIN'])) {
header('location: ../index.php');
}

include '../controller/panggil.php';
?>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="../assets/img/letter-c.png" rel="icon">
<title>Catatan Perjalanan</title>
<link href="../assets/vendor/fontawesome-free/css/all.min.css"
rel="stylesheet" type="text/css">
<link href="../assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet" type="text/css">
<link href="../assets/css/ruang-admin.min.css" rel="stylesheet">
</head>

<body id="page-top">
<div id="wrapper">
<?php include '../template/sidebar.php'; ?>
<div id="content-wrapper" class="d-flex flex-column">
<?php include '../template/navbar.php'; ?>
<div class="container-fluid" id="container-wrapper">
<div class="row">
<div class="col-lg-12 mb-4">
<div class="card">
<div class="card-header py-3 d-flex flex-row
align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-
primary">Laporan Mingguan</h6>
</div>
<div class="table-responsive">
<table class="table align-items-center table-
flush">
<thead class="thead-light">
<tr>
<th>No</th>
<th>Tanggal</th>
<th>Jam</th>
<th>Lokasi</th>
<th>Acara Kegiatan</th>
<th>Lama</th>
<th>Suhu</th>
<th>Aksi</th>
</tr>
</thead>
 <tbody>
<?php
$no = 1;
$dataMingguan = $proses-
>tampil_data_mingguanku('perjalanan', $sesi['iduser']);
foreach ($dataMingguan as $data) {
?>
<tr>
<td><?php echo $no ?></td>
<td><?php echo
$data['tanggal']; ?></td>
<td><?php echo $data['jam'];
?></td>
<td><?php echo
$data['lokasi']; ?></td>
<td><?php echo
$data['acarakegiatan']; ?></td>
<td><?php echo $data['lama'];
?></td>
<td><?php echo $data['suhu'];
?></td>
<td style="text-align:left;">
<a href="#" class="btn
btn-primary btn-md edit-button" data-toggle="modal" data-target="#editModal"
data-editid="<?php echo $data['idperjalanan']; ?>">
<span class="fa fa-
edit"></span>
</a>&nbsp;
<a href="#" class="btn
btn-danger btn-md delete-button" data-toggle="modal" data-
target="#deleteModal" data-deleteid="<?php echo $data['idperjalanan']; ?>">
&nbsp;<span class="fa fa-trash"></span></a>
</td>
</tr>
<?php
$no++;
}
?>
</tbody>
</table>
<?php include '../template/footer.php'; ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
 </div>

<div class="modal fade" id="editModal" tabindex="-1" aria-

labelledby="editModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editModalLabel">Edit Data
Mingguan</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form action="../controller/crud.php?aksi=editmingguan"
method="POST">
<input type="hidden" name="edit_id" id="edit_id">
<div class="form-group">
<label for="edit_tanggal">Tanggal</label>
<input type="date" class="form-control"
id="edit_tanggal" name="edit_tanggal" required readonly>
</div>
<div class="form-group">
<label for="edit_jam">Jam</label>
<input type="time" class="form-control"
id="edit_jam" name="edit_jam" required>
</div>
<div class="form-group">
<label for="edit_lokasi">Lokasi</label>
<input type="text" class="form-control"
id="edit_lokasi" name="edit_lokasi" required>
</div>
<div class="form-group">
<label for="edit_tujuan">Acara Kegiatan</label>
<input type="text" class="form-control"
id="edit_acara" name="edit_acara" required>
</div>
<div class="form-group">
<label for="edit_lama">Lama</label>
<input type="number" class="form-control"
id="edit_lama" name="edit_lama" required min="1" max="20">
</div>
<div class="form-group">
<label for="edit_suhu">Suhu</label>
<input type="number" class="form-control"
id="edit_suhu" name="edit_suhu" required min="1">
 </div>
<button type="submit" class="btn btn-
primary">Simpan</button>
<button type="reset" class="btn btn-danger
cancel">Reset</button>
</form>
</div>
</div>
</div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1" aria-

labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">Konfirmasi
Hapus</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Apakah Anda yakin ingin menghapus data ini?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Batal</button>
<a id="deleteLink" href="#" class="btn btn-
danger">Hapus</a>
</div>
</div>
</div>
</div>

<a class="scroll-to-top rounded" href="#page-top">

<i class="fas fa-angle-up"></i>
</a>

<script src="../assets/vendor/jquery/jquery.min.js"></script>
<script
src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../assets/vendor/jquery-
easing/jquery.easing.min.js"></script>
<script src="../assets/js/ruang-admin.min.js"></script>
<script>
$(document).on("click", ".edit-button", function() {
 var editId = $(this).data('editid');
$('#edit_id').val(editId);

var editTanggal = $(this).closest('tr').find('td:eq(1)').text();

var editJam = $(this).closest('tr').find('td:eq(2)').text();
var editLokasi = $(this).closest('tr').find('td:eq(3)').text();
var editAcara = $(this).closest('tr').find('td:eq(4)').text();
var editLama = $(this).closest('tr').find('td:eq(5)').text();
var editSuhu = $(this).closest('tr').find('td:eq(6)').text();

$('#edit_tanggal').val(editTanggal);
$('#edit_jam').val(editJam);
$('#edit_lokasi').val(editLokasi);
$('#edit_acara').val(editAcara);
$('#edit_lama').val(editLama);
$('#edit_suhu').val(editSuhu);
});

$(document).on("click", ".delete-button", function() {

var deleteId = $(this).data('deleteid');
var deleteUrl = "../controller/crud.php?aksi=hapus&hapusid=" +
deleteId;
$("#deleteLink").attr("href", deleteUrl);
});
</script>

</body>

</html>

6. Kode program bulanan.php :

<?php
session_start();

$sesi = $_SESSION['ADMIN'];

if (empty($_SESSION['ADMIN'])) {
header('location: ../index.php');
}

include '../controller/panggil.php';
?>

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="../assets/img/letter-c.png" rel="icon">
<title>Catatan Perjalanan</title>
<link href="../assets/vendor/fontawesome-free/css/all.min.css"
rel="stylesheet" type="text/css">
<link href="../assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet" type="text/css">
<link href="../assets/css/ruang-admin.min.css" rel="stylesheet">
</head>

<body id="page-top">
<div id="wrapper">
<?php include '../template/sidebar.php'; ?>
<div id="content-wrapper" class="d-flex flex-column">
<?php include '../template/navbar.php'; ?>
<div class="container-fluid" id="container-wrapper">
<div class="row">
<div class="col-lg-12 mb-4">
<div class="card">
<div class="card-header py-3 d-flex flex-row
align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-
primary">Laporan Bulanan</h6>
</div>
<div class="table-responsive">
<table class="table align-items-center table-
flush">
<thead class="thead-light">
<tr>
<th>No</th>
<th>Tanggal</th>
<th>Jam</th>
<th>Lokasi</th>
<th>Acara Kegiatan</th>
<th>Lama</th>
<th>Suhu</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php
$no = 1;
 $dataBulanan = $proses-
>tampil_data_bulananku('perjalanan', $sesi['iduser']);
foreach ($dataBulanan as $data) {
?>
<tr>
<td><?php echo $no ?></td>
<td><?php echo
$data['tanggal']; ?></td>
<td><?php echo $data['jam'];
?></td>
<td><?php echo
$data['lokasi']; ?></td>
<td><?php echo
$data['acarakegiatan']; ?></td>
<td><?php echo $data['lama'];
?></td>
<td><?php echo $data['suhu'];
?></td>
<td style="text-align:left;">
<a href="#" class="btn
btn-primary btn-md edit-button" data-toggle="modal" data-target="#editModal"
data-editid="<?php echo $data['idperjalanan']; ?>">
<span class="fa fa-
edit"></span>
</a>&nbsp;
<a href="#" class="btn
btn-danger btn-md delete-button" data-toggle="modal" data-
target="#deleteModal" data-deleteid="<?php echo $data['idperjalanan']; ?>">
&nbsp;<span class="fa fa-trash"></span></a>
</td>
</tr>
<?php
$no++;
}
?>
</tbody>
</table>
<?php include '../template/footer.php'; ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="modal fade" id="editModal" tabindex="-1" aria-

labelledby="editModalLabel" aria-hidden="true">
 <div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editModalLabel">Edit Data
Bulanan</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form action="../controller/crud.php?aksi=editmingguan"
method="POST">
<input type="hidden" name="edit_id" id="edit_id">
<div class="form-group">
<label for="edit_tanggal">Tanggal</label>
<input type="date" class="form-control"
id="edit_tanggal" name="edit_tanggal" required readonly>
</div>
<div class="form-group">
<label for="edit_jam">Jam</label>
<input type="time" class="form-control"
id="edit_jam" name="edit_jam" required>
</div>
<div class="form-group">
<label for="edit_lokasi">Lokasi</label>
<input type="text" class="form-control"
id="edit_lokasi" name="edit_lokasi" required>
</div>
<div class="form-group">
<label for="edit_tujuan">Acara Kegiatan</label>
<input type="text" class="form-control"
id="edit_acara" name="edit_acara" required>
</div>
<div class="form-group">
<label for="edit_lama">Lama</label>
<input type="number" class="form-control"
id="edit_lama" name="edit_lama" required min="1" max="20">
</div>
<div class="form-group">
<label for="edit_suhu">Suhu</label>
<input type="number" class="form-control"
id="edit_suhu" name="edit_suhu" required min="1">
</div>
<button type="submit" class="btn btn-
primary">Simpan</button>
<button type="reset" class="btn btn-danger
cancel">Reset</button>
 </form>
</div>
</div>
</div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1" aria-

labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">Konfirmasi
Hapus</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Apakah Anda yakin ingin menghapus data ini?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Batal</button>
<a id="deleteLink" href="#" class="btn btn-
danger">Hapus</a>
</div>
</div>
</div>
</div>

<a class="scroll-to-top rounded" href="#page-top">

<i class="fas fa-angle-up"></i>
</a>

<script src="../assets/vendor/jquery/jquery.min.js"></script>
<script
src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../assets/vendor/jquery-
easing/jquery.easing.min.js"></script>
<script src="../assets/js/ruang-admin.min.js"></script>
<script>
$(document).on("click", ".edit-button", function() {
var editId = $(this).data('editid');
$('#edit_id').val(editId);

var editTanggal = $(this).closest('tr').find('td:eq(1)').text();

var editJam = $(this).closest('tr').find('td:eq(2)').text();
 var editLokasi = $(this).closest('tr').find('td:eq(3)').text();
var editAcara = $(this).closest('tr').find('td:eq(4)').text();
var editLama = $(this).closest('tr').find('td:eq(5)').text();
var editSuhu = $(this).closest('tr').find('td:eq(6)').text();

$('#edit_tanggal').val(editTanggal);
$('#edit_jam').val(editJam);
$('#edit_lokasi').val(editLokasi);
$('#edit_acara').val(editAcara);
$('#edit_lama').val(editLama);
$('#edit_suhu').val(editSuhu);
});

$(document).on("click", ".delete-button", function() {

var deleteId = $(this).data('deleteid');
var deleteUrl = "../controller/crud.php?aksi=hapus&hapusid=" +
deleteId;
$("#deleteLink").attr("href", deleteUrl);
});
</script>

</body>

</html>

8. index.php
Kode program:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="assets/img/letter-c.png" rel="icon">
<title>Catatan Perjalanan</title>
<link href="assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet" type="text/css">
<link href="assets/vendor/fontawesome-free/css/all.min.css"
rel="stylesheet" type="text/css">
<link href="assets/css/ruang-admin.min.css" rel="stylesheet">
<style>
body {
 font-family: 'Montserrat', sans-serif;
background: url('assets/img/bg.svg') center center fixed;
background-size: cover;

.card-body {
background-color: #fff;
padding: 20px;
border-radius: 10px;
}

.btn-donate {
--clr-font-main: hsla(0 0% 20% / 100);
--btn-bg-1: hsla(194 100% 69% / 1);
--btn-bg-2: hsla(217 100% 56% / 1);
--btn-bg-color: hsla(360 100% 100% / 1);
--radii: 0.5em;
cursor: pointer;
padding: 0.9em 1.4em;
min-width: 120px;
min-height: 44px;
font-size: var(--size, 1rem);
font-family: "Segoe UI", system-ui, sans-serif;
font-weight: 500;
transition: 0.8s;
background-size: 280% auto;
background-image: linear-gradient(325deg, var(--btn-bg-2) 0%,
var(--btn-bg-1) 55%, var(--btn-bg-2) 90%);
border: none;
border-radius: var(--radii);
color: var(--btn-bg-color);
box-shadow: 0px 0px 20px rgba(71, 184, 255, 0.5), 0px 5px 5px -1px
rgba(58, 125, 233, 0.25), inset 4px 4px 8px rgba(175, 230, 255, 0.5), inset -
4px -4px 8px rgba(19, 95, 216, 0.35);
}

.btn-donate:hover {
background-position: right top;
}

.btn-donate:is(:focus, :focus-visible, :active) {

outline: none;
box-shadow: 0 0 0 3px var(--btn-bg-color), 0 0 0 6px var(--btn-bg-
2);
}

@media (prefers-reduced-motion: reduce) {

 .btn-donate {
transition: linear;
}
}
</style>
</head>

<body>
<div class="container">
<div class="row justify-content-center mt-3">
<div class="col-md-5">
<div class="card-body mt-5 rounded-start shadow">
<div class="text-center mb-4">
<img src="assets/img/login.png" class="img-fluid"
width="100" alt="">
<h3>MASUK</h3>
</div>
<form action="controller/crud.php?aksi=login"
method="post">
<div class="mb-3">
<div class="input-group">
<span class="input-group-text"><img
src="assets/img/user.png" width="27" class="img-fluid" alt=""></span>
<input type="text" name="username"
class="form-control" placeholder="Nama pengguna" required>
</div>
<label for="username" class="form-label mt-
2">Silakan masukkan nama pengguna</label>
</div>
<div class="mb-1">
<div class="input-group">
<span class="input-group-text"><img
src="assets/img/padlock.png" width="27" class="img-fluid" alt=""></span>
<input type="password" name="password"
class="form-control" placeholder="Kata sandi" required>
</div>
<label for="password" class="form-label mt-
2">Silakan masukkan kata sandi</label>
</div>
<button class="btn-donate w-100 mb-2"
type="submit">MASUK</button>
</form>
<label for="">Belum punya akun? <a
href="views/signup.php">Buat akun</a></label>
</div>
</div>
</div>
</div>
 <script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="assets/js/ruang-admin.min.js"></script>
<script src="assets/vendor/chart.js/Chart.min.js"></script>
<script src="assets/js/demo/chart-area-demo.js"></script>
</body>

</html>

9. Tampilan
• Tampilan dari dari file index.php :

• Tampilan dari dari file signup.php :

• Tampilan dari dari file dashboard.php :

• Tampilan dari dari file perjalanan.php :

• Tampilan dari dari file harian.php :

• Tampilan dari dari file mingguan.php :

• Tampilan dari dari file bulanan.php :