Laporan Tentang Pembuatan Aplikasi Riwayat

Perjalanan Berbasis Web

MUHAMAD FAHMI PURNAMA

XII RPL 2
Laporan ini dibuat untuk menyelesaikan tugas PWPB semester ganjil.
1. Tools yang digunakan :
• XAMPP
• Visual Studio Code
• Chrome
2. Database dengan nama riwayat_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
• register.php
• dashboard.php
• riwayat.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 = 'user';

# 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>";

//tambah input data

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/harian.php";</script>';
}

//hapus data harian

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>';

//hapus data mingguan

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/mingguan.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>';

//hapus data bulanan

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/bulanan.php"</script>';
}

//edit data bulanan

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/bulanan.php";</script>';

2. Kode program logout.php :

<?php
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'; // set the hostname

$dbname = 'riwayat_perjalanan'; // set the database name
$dbuser = 'root'; // set the mysql username
$dbpass = ''; // set the mysql password

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 user WHERE username=? AND

password=md5(?)');

$row->execute(array($user, $pass));

$count = $row->rowCount();

if($count>0)

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

}else{

return'gagal';
}
}

//harian
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();
}

//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();
}

//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 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));
}

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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>Riwayat 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>
<!-- TopBar -->
<nav class="navbar navbar-expand navbar-light bg-gray-700 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/avatar.png"
style="max-width: 60px">
<span class="mr-2 d-none d-lg-inline text-white large"><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-700"></i>
Keluar
</a>
</div>
</li>
</ul>
</nav>

<!-- Modal Logout -->

<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">Ohh No!</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>Are you sure you want to logout?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-
dismiss="modal">Cancel</button>
<a href="../controller/logout.php?aksi=logout" class="btn btn-
primary">Logout</a>
</div>
</div>
</div>
</div>

</body>
</html>

2. Kode program sidebar.php :

<!-- Sidebar -->
<ul class="navbar-nav sidebar sidebar-light accordion" id="accordionSidebar">
<a class="sidebar-brand bg-gray-900 d-flex align-items-center justify-
content-center" href="#">
<div class="sidebar-brand-icon">
<img src="../assets/img/data-analysis.png" width="50">
</div>
<div class="sidebar-brand-text mx-3">Travel History</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>

<!-- Add your sidebar menu items here -->

<li class="nav-item">
<a class="nav-link" href="../views/riwayat.php">
<i class="fas fa-fw fa-cog"></i>
<span>Travel Nots</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>Report</span>
</a>
<div id="collapseBootstrap" class="collapse" aria-
labelledby="headingBootstrap" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Report</h6>
<a class="collapse-item" href="../views/harian.php">Daily</a>
<a class="collapse-item" href="../views/mingguan.php">weekly</a>
<a class="collapse-item" href="../views/bulanan.php">Monthly</a>
</div>
</div>
</li>

<!-- ... -->

</ul>
<!-- Sidebar -->

3. Kode program footer.php :

<!-- Footer -->
<footer class="sticky-footer bg-gray-200">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>copyright &copy; <script> document.write(new
Date().getFullYear()); </script> - developed by
<b><a href="https://indrijunanda.gitlab.io/"
target="_blank">MuhamadFahmi</a></b>
 </span>
</div>
</div>
</footer>

7. views
1. Kode program register.php :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - page</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">
<style>
body {
background:url('../assets/img/Cloudy.svg') center center fixed;
background-size:cover;
}
.card-body{
background-color:#fff;
border-radius:10px;
}
.shadow__btn {
padding: 10px 20px;
border: none;
font-size: 17px;
color: #fff;
border-radius: 7px;
letter-spacing: 4px;
font-weight: 700;
text-transform: uppercase;
transition: 0.5s;
transition-property: box-shadow;
}

.shadow__btn {
background: rgb(0,140,255);
box-shadow: 0 0 25px rgb(0,140,255);
}

.shadow__btn:hover {
 box-shadow: 0 0 5px rgb(0,140,255),
0 0 25px rgb(0,140,255),
0 0 50px rgb(0,140,255),
0 0 100px rgb(0,140,255);
}
</style>
</head>
<body>
<div class="container-fluid mt-5" style="width:32rem;">
<div class="row">
<div class="card-body mt-5 rounded-start shadow">
<div class="text-center mb-5">
<strong>
<img src="../assets/img/login.png" alt="" width="70"
class="mb-1">
<h2 class="fw-bold">SIGN UP</h2>
</div>
<form action="../controller/crud.php?aksi=daftar" method="post">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1"><img
src="../assets/img/masculine-user.png" alt="" width="15"></span>
<input type="text" name="nama" class="form-control"
placeholder="Name" required>
</div>
<div class="mb-1">
<label for="" class="form-label form-label-user">Enter
Name</label>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1"><img
src="../assets/img/avatar.png" alt="" width="15"></span>
<input type="text" name="username" class="form-control"
placeholder="Username" required>
</div>
<div class="mb-1">
<label for="" class="form-label form-label-user">Enter
Username</label>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1"><img
src="../assets/img/person.png" alt="" width="15"></span>
<input type="password" name="password" class="form-control"
placeholder="Password" required>
</div>
<div class="mb-1">
<label for="" class="form-label form-label-user">Enter
Password</label>
</div>
 <button type="submit" class="shadow__btn w-100">Sign
Up</button>
<hr>
<td class="small">Already have an account?<a class=""
href="../index.php"> Exit</a></td>
</div>
</form>
</strong>
</div>
</div>
</div>
</body>
</html>

2. Kode program dashboard.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/logo/logo.png" rel="icon">
<title>Riwayat 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">
<!-- Include Sidebar using PHP -->
<?php include '../template/sidebar.php'; ?>

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

<!-- Include Navbar using PHP -->
<?php include '../template/navbar.php'; ?>

<!-- Container Fluid -->

<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>
</div>
<!-- Modal Logout -->

</div>
<!-- Include Sidebar using PHP -->
<?php include '../template/footer.php'; ?>
<!-- Container Fluid -->
</div>
</div>

<!-- Scroll to top -->

<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 riwayat.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/logo/logo.png" rel="icon">
<title>Riwayat 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">
<!-- Include Sidebar using PHP -->
<?php include '../template/sidebar.php'; ?>

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

<!-- Include Navbar using PHP -->
<?php include '../template/navbar.php'; ?>

<!-- Container Fluid -->

<div class="container-fluid" id="container-wrapper">

<h3 class="text-gray-900">Travel Nots</h3>

<div class="card mb-4">
<div class="card-body">
<form action="../controller/crud.php?aksi=tambah"
method="post">
<input type="hidden" id="iduser" name="iduser" class="form-
control" value="<?php echo $iduser; ?>">
<div class="">
<label for="" class="form-label form-label-user text-gray-
700">Travel date</label>
</div>
<div class="input-group mb-1">
<span class="input-group-text" id="basic-addon1"><img
src="../assets/img/calendar.png" alt="" width="20"></span>
<input type="date" name="tanggal" class="form-control"
required>
</div>
<div class="">
 <label for="" class="form-label form-label-user text-gray-
700">Travel hours</label>
</div>
<div class="input-group mb-1">
<span class="input-group-text" id="basic-addon1"><img
src="../assets/img/deadline.png" alt="" width="20"></span>
<input type="time" name="jam" class="form-control"
required>
</div>
<div class="">
<label for="" class="form-label form-label-user text-gray-
700">Travel location</label>
</div>
<div class="input-group mb-1">
<span class="input-group-text" id="basic-addon1"><img
src="../assets/img/place.png" alt="" width="20"></span>
<input type="text" name="lokasi" class="form-control"
required>
</div>
<div class="">
<label for="" class="form-label form-label-user text-gray-
700">Activity events</label>
</div>
<div class="input-group mb-1">
<span class="input-group-text" id="basic-addon1"><img
src="../assets/img/activity.png" alt="" width="20"></span>
<input type="text" name="acarakegiatan" class="form-
control" required>
</div>
<div class="">
<label for="" class="form-label form-label-user text-gray-
700">Long activity</label>
</div>
<div class="input-group mb-1">
<span class="input-group-text" id="basic-addon1"><img
src="../assets/img/llama.png" alt="" width="20"></span>
<input type="number" name="lama" class="form-control"
required>
</div>
<div class="">
<label for="" class="form-label form-label-user text-gray-
700">Temperature</label>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1"><img
src="../assets/img/weather.png" alt="" width="20"></span>
<input type="number" name="suhu" class="form-control"
required>
 </div>
<div class="col-8 mb-3">
<button type="submit" class="btn btn-primary w-
50">Save</button>
</div>
</form>
</div>
</div>

<!-- Modal Logout -->

</div>
<!-- Container Fluid -->
</div>
</div>

<!-- Scroll to top -->

<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:view/login.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/logo/logo.png" rel="icon">
<title>Riwayat 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">
<!-- Include Sidebar using PHP -->
<?php include '../template/sidebar.php'; ?>

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

<!-- Include Navbar using PHP -->
<?php include '../template/navbar.php'; ?>

<!-- Container Fluid -->

<div class="container-fluid" id="container-wrapper">

<div class="row">
<div class="col-lg-12 mb-4">
<!-- Simple Tables -->
<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-gray-900">Daily
Report</h6>
</div>
<div class="table-responsive">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th>No</th>
<th>Travel date</th>
<th>Travel hours</th>
<th>Travel location</th>
<th>Activity events</th>
 <th>Long activity</th>
<th>Temperature</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$no = 1;
$hasil = $proses-
>tampil_data_harianku('perjalanan', $sesi['iduser']);
foreach ($hasil 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>
<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>
</div>
<div class="card-footer"><!-- Include Sidebar using PHP -->
<?php include '../template/footer.php'; ?></div>
</div>
</div>
</div>
 <!-- Modal Logout -->

</div>
<!-- Container Fluid -->

<!-- Footer -->

</div>
</div>
<!-- Modal Edit -->
<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">
<!-- Judul modal -->
<h5 class="modal-title fw-bold" id="editModalLabel">Update
Daily data</h5>
<!-- Tombol untuk menutup modal -->
<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 field tersembunyi untuk menyimpan ID data
yang akan diedit -->
<input type="hidden" name="edit_id" id="edit_id">
<div class="form-group">
<label for="edit_tanggal">Travel date</label>
<!-- Input field untuk mengedit tanggal -->
<input type="date" class="form-control"
id="edit_tanggal" name="edit_tanggal" required>
</div>
<div class="form-group">
<label for="edit_jam">Travel hours</label>
<!-- Input field untuk mengedit jam -->
<input type="time" class="form-control"
id="edit_jam" name="edit_jam" required>
</div>
<div class="form-group">
<label for="edit_lokasi">Travel location</label>
<!-- Input field untuk mengedit lokasi kunjungan -
->
 <input type="text" class="form-control"
id="edit_lokasi" name="edit_lokasi" required>
</div>
<div class="form-group">
<label for="edit_tujuan">Activity events</label>
<!-- Input field untuk mengedit tujuan kunjungan -
->
<input type="text" class="form-control"
id="edit_acara" name="edit_acara" required>
</div>
<div class="form-group">
<label for="edit_lama">Long activity</label>
<!-- Input field untuk mengedit lama kunjungan -->
<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">Temperature</label>
<!-- Input field untuk mengedit lama kunjungan -->
<input type="number" class="form-control"
id="edit_suhu" name="edit_suhu" required min="1">
</div>
<button type="submit" class="btn btn-
primary">Save</button>
<button type="reset" class="btn btn-secondary
cancel">Reset</button>
</form>
</div>
</div>
</div>
</div>

<!-- Modal Konfirmasi Hapus -->

<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">
<!-- Judul modal -->
<h5 class="modal-title" id="deleteModalLabel">Confirm
Delete</h5>
<!-- Tombol untuk menutup modal -->
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
 <!-- Pesan konfirmasi untuk menghapus data -->
Are you sure you want to delete this data?
</div>
<div class="modal-footer">
<!-- Tombol "Batal" untuk menutup modal -->
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Cancel</button>
<!-- Tautan Hapus akan diisi melalui JavaScript -->
<a id="deleteLink" href="#" class="btn btn-
danger">Delete</a>
</div>
</div>
</div>
</div>

<!-- Scroll to top -->

<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>

<script src="../js/ruang-admin.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// Tangkap tombol "Edit" yang diklik dan tambahkan ID yang sesuai ke
form edit
$(document).on("click", ".edit-button", function () {
var editId = $(this).data('editid');
$('#edit_id').val(editId);

// Selain mengatur nilai ID, Anda juga perlu mengatur nilai input
lainnya
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);
 });

// Tangkap tombol "Hapus" yang diklik dan tambahkan ID yang sesuai ke

tautan hapus
$(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>

<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>

5. Kode program mingguan.php :

<?php
session_start();
$sesi=$_SESSION['ADMIN'];
if(empty($_SESSION['ADMIN'])){
header('location:view/login.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/logo/logo.png" rel="icon">
<title>Riwayat 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">
<!-- Include Sidebar using PHP -->
<?php include '../template/sidebar.php'; ?>

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

<!-- Include Navbar using PHP -->
<?php include '../template/navbar.php'; ?>

<!-- Container Fluid -->

<div class="container-fluid" id="container-wrapper">

<div class="row">
<div class="col-lg-12 mb-4">
<!-- Simple Tables -->
<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-gray-900">Weekly
Report</h6>
</div>
<div class="table-responsive">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th>No</th>
<th>Travel date</th>
<th>Travel hours</th>
<th>Travel location</th>
<th>Activity events</th>
<th>Long activity</th>
<th>Temperature</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
 $no = 1;
$hasil = $proses-
>tampil_data_mingguanku('perjalanan', $sesi['iduser']);
foreach ($hasil 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>
<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>
</div>
<div class="card-footer">
<!-- Include Sidebar using PHP -->
<?php include '../template/footer.php'; ?>
</div>
</div>
</div>
</div>

<!-- Modal Logout -->

</div>
<!-- Container Fluid -->
 <!-- Footer -->

</div>
</div>
<!-- Modal Edit -->
<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">
<!-- Judul modal -->
<h5 class="modal-title fw-bold" id="editModalLabel">Update
Daily data</h5>
<!-- Tombol untuk menutup modal -->
<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 field tersembunyi untuk menyimpan ID data
yang akan diedit -->
<input type="hidden" name="edit_id" id="edit_id">
<div class="form-group">
<label for="edit_tanggal">Travel date</label>
<!-- Input field untuk mengedit tanggal -->
<input type="date" class="form-control"
id="edit_tanggal" name="edit_tanggal" required>
</div>
<div class="form-group">
<label for="edit_jam">Travel hours</label>
<!-- Input field untuk mengedit jam -->
<input type="time" class="form-control"
id="edit_jam" name="edit_jam" required>
</div>
<div class="form-group">
<label for="edit_lokasi">Travel location</label>
<!-- Input field untuk mengedit lokasi kunjungan -
->
<input type="text" class="form-control"
id="edit_lokasi" name="edit_lokasi" required>
</div>
<div class="form-group">
<label for="edit_tujuan">Activity events</label>
 <!-- Input field untuk mengedit tujuan kunjungan -
->
<input type="text" class="form-control"
id="edit_acara" name="edit_acara" required>
</div>
<div class="form-group">
<label for="edit_lama">Long activity</label>
<!-- Input field untuk mengedit lama kunjungan -->
<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">Temperature</label>
<!-- Input field untuk mengedit lama kunjungan -->
<input type="number" class="form-control"
id="edit_suhu" name="edit_suhu" required min="1">
</div>
<button type="submit" class="btn btn-
primary">Save</button>
<button type="reset" class="btn btn-secondary
cancel">Reset</button>
</form>
</div>
</div>
</div>
</div>

<!-- Modal Konfirmasi Hapus -->

<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">
<!-- Judul modal -->
<h5 class="modal-title" id="deleteModalLabel">Confirm
Delete</h5>
<!-- Tombol untuk menutup modal -->
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<!-- Pesan konfirmasi untuk menghapus data -->
Are you sure you want to delete this data?
</div>
<div class="modal-footer">
<!-- Tombol "Batal" untuk menutup modal -->
 <button type="button" class="btn btn-secondary" data-
dismiss="modal">Cancel</button>
<!-- Tautan Hapus akan diisi melalui JavaScript -->
<a id="deleteLink" href="#" class="btn btn-
danger">Delete</a>
</div>
</div>
</div>
</div>

<!-- Scroll to top -->

<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>

<script src="../js/ruang-admin.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// Tangkap tombol "Edit" yang diklik dan tambahkan ID yang sesuai ke
form edit
$(document).on("click", ".edit-button", function () {
var editId = $(this).data('editid');
$('#edit_id').val(editId);

// Selain mengatur nilai ID, Anda juga perlu mengatur nilai input
lainnya
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);
});

// Tangkap tombol "Hapus" yang diklik dan tambahkan ID yang sesuai ke

tautan hapus
$(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>

<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>

6. Kode program bulanan.php :

<?php
session_start();
$sesi=$_SESSION['ADMIN'];
if(empty($_SESSION['ADMIN'])){
header('location:view/login.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/logo/logo.png" rel="icon">
<title>Riwayat 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">
<!-- Include Sidebar using PHP -->
<?php include '../template/sidebar.php'; ?>

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

<!-- Include Navbar using PHP -->
<?php include '../template/navbar.php'; ?>

<!-- Container Fluid -->

<div class="container-fluid" id="container-wrapper">

<div class="row">
<div class="col-lg-12 mb-4">
<!-- Simple Tables -->
<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-gray-900">Monthly
Report</h6>
</div>
<div class="table-responsive">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th>No</th>
<th>Travel date</th>
<th>Travel hours</th>
<th>Travel location</th>
<th>Activity events</th>
<th>Long activity</th>
<th>Temperature</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$no = 1;
$hasil = $proses-
>tampil_data_bulananku('perjalanan', $sesi['iduser']);
foreach ($hasil 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>
<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>
</div>
<div class="card-footer"><!-- Include Sidebar using PHP -->
<?php include '../template/footer.php'; ?></div>
</div>
</div>
</div>

<!-- Modal Logout -->

</div>
<!-- Container Fluid -->

<!-- Footer -->

</div>
</div>
<!-- Modal Edit -->
 <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">
<!-- Judul modal -->
<h5 class="modal-title fw-bold" id="editModalLabel">Update
Daily data</h5>
<!-- Tombol untuk menutup modal -->
<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 field tersembunyi untuk menyimpan ID data
yang akan diedit -->
<input type="hidden" name="edit_id" id="edit_id">
<div class="form-group">
<label for="edit_tanggal">Travel date</label>
<!-- Input field untuk mengedit tanggal -->
<input type="date" class="form-control"
id="edit_tanggal" name="edit_tanggal" required>
</div>
<div class="form-group">
<label for="edit_jam">Travel hours</label>
<!-- Input field untuk mengedit jam -->
<input type="time" class="form-control"
id="edit_jam" name="edit_jam" required>
</div>
<div class="form-group">
<label for="edit_lokasi">Travel location</label>
<!-- Input field untuk mengedit lokasi kunjungan -
->
<input type="text" class="form-control"
id="edit_lokasi" name="edit_lokasi" required>
</div>
<div class="form-group">
<label for="edit_tujuan">Activity events</label>
<!-- Input field untuk mengedit tujuan kunjungan -
->
<input type="text" class="form-control"
id="edit_acara" name="edit_acara" required>
</div>
<div class="form-group">
<label for="edit_lama">Long activity</label>
 <!-- Input field untuk mengedit lama kunjungan -->
<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">Temperature</label>
<!-- Input field untuk mengedit lama kunjungan -->
<input type="number" class="form-control"
id="edit_suhu" name="edit_suhu" required min="1">
</div>
<button type="submit" class="btn btn-
primary">Save</button>
<button type="reset" class="btn btn-secondary
cancel">Reset</button>
</form>
</div>
</div>
</div>
</div>

<!-- Modal Konfirmasi Hapus -->

<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">
<!-- Judul modal -->
<h5 class="modal-title" id="deleteModalLabel">Confirm
Delete</h5>
<!-- Tombol untuk menutup modal -->
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<!-- Pesan konfirmasi untuk menghapus data -->
Are you sure you want to delete this data?
</div>
<div class="modal-footer">
<!-- Tombol "Batal" untuk menutup modal -->
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Cancel</button>
<!-- Tautan Hapus akan diisi melalui JavaScript -->
<a id="deleteLink" href="#" class="btn btn-
danger">Delete</a>
</div>
</div>
 </div>
</div>

<!-- Scroll to top -->

<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>

<script src="../js/ruang-admin.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// Tangkap tombol "Edit" yang diklik dan tambahkan ID yang sesuai ke
form edit
$(document).on("click", ".edit-button", function () {
var editId = $(this).data('editid');
$('#edit_id').val(editId);

// Selain mengatur nilai ID, Anda juga perlu mengatur nilai input
lainnya
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);
});

// Tangkap tombol "Hapus" yang diklik dan tambahkan ID yang sesuai ke

tautan hapus
$(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>
 <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>

8. index.php
Kode program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - page</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">
<style>
body {
background:url('assets/img/Cloudy.svg') center center fixed;
background-size:cover;
}
.card-body{
background-color:#fff;
border-radius:10px;
}
.shadow__btn {
padding: 10px 20px;
border: none;
font-size: 17px;
color: #fff;
border-radius: 7px;
letter-spacing: 4px;
font-weight: 700;
 text-transform: uppercase;
transition: 0.5s;
transition-property: box-shadow;
}

.shadow__btn {
background: rgb(0,140,255);
box-shadow: 0 0 25px rgb(0,140,255);
}

.shadow__btn:hover {
box-shadow: 0 0 5px rgb(0,140,255),
0 0 25px rgb(0,140,255),
0 0 50px rgb(0,140,255),
0 0 100px rgb(0,140,255);
}
</style>
</head>
<body>
<div class="container-fluid mt-5" style="width:32rem;">
<div class="row">
<div class="card-body mt-5 rounded-start shadow">
<div class="text-center mb-5">
<strong>
<img src="assets/img/login.png" alt="" width="70"
class="mb-1">
<h2 class="fw-bold">SIGN IN</h2>
</div>
<form action="controller/crud.php?aksi=login" method="post">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1"><img
src="assets/img/avatar.png" alt="" width="15"></span>
<input type="text" name="username" class="form-control"
placeholder="Username" required>
</div>
<div class="mb-1">
<label for="" class="form-label form-label-user">Enter
Username</label>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1"><img
src="assets/img/person.png" alt="" width="15"></span>
<input type="password" name="password" class="form-control"
placeholder="Password" required>
</div>
<div class="mb-1">
<label for="" class="form-label form-label-user">Enter
Password</label>
 </div>
<button type="submit" class="shadow__btn w-100">Sign
In</button>
<hr>
<td class="small">Don't have an account?<a class=""
href="views/register.php"> Sign up</a></td>
</strong>
</div>
</form>
</div>
</div>
</div>
</body>
</html>

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

• Tampilan dari dari file register.php :

• Tampilan dari dari file dashboard.php :

• Tampilan dari dari file riwayat.php :

• Tampilan dari dari file harian.php :

• Tampilan dari dari file mingguan.php :

• Tampilan dari dari file bulanan.php :