Gambaran UMUM Aplikasi
Aplikasi ini digunakan sebagai data diri perjalanan dimasa pandemi covid19. Catatan perjalanan ini yang harus diisikan sekurang-kurangnya meliputi : tanggal perjalanan, waktu, lokasi yang dikunjungi dan suhu tubuh saat memasuki lokasi.
saat pertama kali digunakan, pengguna harus mengisi nik dan nama yang akan disimpan dalam file config.txt. selanjutnya pengguna bisa masuk untuk mengisi catatan perjalanan. selain itu pengguna juga dapat melakukan pencarian berdasarkan tanggal, waktu maupun lokasi.selain itu pengguna juga dapat mengurutkan data berdasarkan tanggal perjalanan dan suhu tubuh baik secara ascending maupun descending.
Gambaran Tampilan yang akan dibuat
untuk gambaran aplikasinya nantinya adalah seperti dibawah ini
1. Tampilan Login
2. Tampilan home
3. Tampilan Catatan_perjalanan
4. Tampilan Tambah Data
Langkah-langkah membuat aplikasi
untuk membuat aplikasi ini yang paling penting adalah sudah memiliki admin LTEnya. kemudian setalah admin LTE sudah terdownload. silahkan buat 6 file yaitu
- config.txt
- data_perjalanan.txt
- login.php
- home.php
- catatan_perjalanan.php
- tambah_data.php
jika tidak mau repot sudah saya buatkan sourcodenya disini DOWNLOAD
ok langsung saja mulai tutorial membuat aplikasi perjalanan tanpa database hanya menggunakan file.txt
1. Buat Config.txt
File config.txt digunakan untuk menampung user yang akan login ke aplikasi yang kita buat. isikan data dibawah ini kedalam file config.php.
NIK|NAMA
201410213|YASIN1
201410214|YASIN2
2. buat file data_perjalanan.txt
data perjalanan digunakan untuk memperoleh data untuk dilakukan proses tambah, view data dan pencarian data. silahkan copy file dibawah ini kedalam data_perjalanan.php
ID|NAMA|NIM|JURUSAN|
2022-02-03|09.00|jakarta|603. buat file login.php
file login.php digunakan untuk user login yang datanya diambil dari file config.txt. silahkan copy sourcode dibawah ini kedalam file login.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 3 | Log in</title>
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome -->
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<a href="../../index2.html"><b>Catatan</b> Perjalanan</a>
</div>
<!-- /.login-logo -->
<div class="card">
<div class="card-body login-card-body">
<p class="login-box-msg">Sign in to start your session</p>
<?php
//Fungsi untuk mencegah inputan karakter yang tidak sesuai
function input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
};
if(isset($_POST['Submit'])) {
// Menangkap isi variabel dari file yang telah kita isi pada form.php
$nik = input($_POST['Nik']);
$nama = input($_POST['Nama']);
// Buka file mhs.txt, kemudian tuliskan isi variabel di atas kedalam mhs.txt
$txt_file = file('config.txt');
foreach($txt_file as $row => $data)
{
// Explode digunakan untuk memisahkan Item Data dariPemisah |, array pada PHP dimulaipada index ke-0
$row_data = explode('|', $data);
if ($row_data[0] == $nik && $row_data[1] == $nama) {
session_start();
$_SESSION["nik"]=$row_data[0];
$_SESSION["nama"]=$row_data[1];
header("Location:loadtext/home.php");
}else{
echo "<div class='alert alert-danger'>
<strong>Error!</strong> Username dan password salah.
</div>";
}
}
}
?>
<form action=" " method="post">
<label>Nik</label>
<div class="input-group mb-3">
<input type="text" name="Nik" class="form-control" placeholder="Nik">
<div class="input-group-append">
<div class="input-group-text">
</div>
</div>
</div>
<label>Nama</label>
<div class="input-group mb-3">
<input type="text" name="Nama" class="form-control" placeholder="Nama">
<div class="input-group-append">
<div class="input-group-text">
</div>
</div>
</div>
<div class="row">
<div class="icheck-primary">
<input type="checkbox" id="remember">
</div>
</div>
<!-- /.col -->
<div class="col-12">
<button type="submit" name="Submit" value="kirim" class="btn btn-primary btn-block">Sign In</button>
</div>
<!-- /.col -->
</div>
</form>
<!-- /.social-auth-links -->
</div>
<!-- /.login-card-body -->
</div>
</div>
<!-- /.login-box -->
<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
</body>
</html>
perhatikan pada sourcode diatas. berikut adalah logika yang digunakan untuk login dengan membaca file.txt
<?php
//Fungsi untuk mencegah inputan karakter yang tidak sesuai
function input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
};
if(isset($_POST['Submit'])) {
// Menangkap isi variabel dari file yang telah kita isi pada form.php
$nik = input($_POST['Nik']);
$nama = input($_POST['Nama']);
// Buka file mhs.txt, kemudian tuliskan isi variabel di atas kedalam mhs.txt
$txt_file = file('config.txt');
foreach($txt_file as $row => $data)
{
// Explode digunakan untuk memisahkan Item Data dariPemisah |, array pada PHP dimulaipada index ke-0
$row_data = explode('|', $data);
if ($row_data[0] == $nik && $row_data[1] == $nama) {
session_start();
$_SESSION["nik"]=$row_data[0];
$_SESSION["nama"]=$row_data[1];
header("Location:loadtext/home.php");
}else{
echo "<div class='alert alert-danger'>
<strong>Error!</strong> Username dan password salah.
</div>";
}
}
}
?>
Keterangan:
logika yang paling penting adalah pada bagian isset. jadi disourcode atas sudah dijelaskan pada codenya jadi silahkan baca keterangan di dalam codenya jika membutuhkan penjelasan.
4. membuat tampilan home.php
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 3 | Dashboard</title>
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome -->
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Tempusdominus Bbootstrap 4 -->
<link rel="stylesheet" href="../plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- JQVMap -->
<link rel="stylesheet" href="../plugins/jqvmap/jqvmap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../dist/css/adminlte.min.css">
<!-- overlayScrollbars -->
<link rel="stylesheet" href="../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<!-- Daterange picker -->
<link rel="stylesheet" href="../plugins/daterangepicker/daterangepicker.css">
<!-- summernote -->
<link rel="stylesheet" href="../plugins/summernote/summernote-bs4.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="index3.html" class="brand-link">
<img src="../dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">perjalanan</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item ">
<a href="home.php" class="nav-link ">
<p>
Home
</p>
</a>
</li>
<li class="nav-item ">
<a href="catatan_perjalanan.php" class="nav-link ">
<p>
catatan perjalanan
</p>
</a>
</li>
<li class="nav-item ">
<a href="isi_data.php" class="nav-link ">
<p>
isi data
</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header" >
<?php
echo "<h1>Selamat Datang User ". $_SESSION["nama"]." di aplikasi Catatan Perjalanan</h1>";
?>
</div>
</div>
<!-- /.card -->
</div>
</div>
</div><!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<strong>Copyright © 2014-2019 <a href="http://adminlte.io">AdminLTE.io</a>.</strong>
All rights reserved.
<div class="float-right d-none d-sm-inline-block">
<b>Version</b> 3.0.5
</div>
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
<!-- jQuery -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="../plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button)
</script>
<!-- Bootstrap 4 -->
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- ChartJS -->
<script src="../plugins/chart.js/Chart.min.js"></script>
<!-- Sparkline -->
<script src="../plugins/sparklines/sparkline.js"></script>
<!-- JQVMap -->
<script src="../plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="../plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<!-- jQuery Knob Chart -->
<script src="../plugins/jquery-knob/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="../plugins/moment/moment.min.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="../plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="../plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="../plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/adminlte.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="../dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../dist/js/demo.js"></script>
</body>
</html>
5. membuat tampilan catatan_perjalanan.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 3 | Dashboard</title>
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome -->
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Tempusdominus Bbootstrap 4 -->
<link rel="stylesheet" href="../plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- JQVMap -->
<link rel="stylesheet" href="../plugins/jqvmap/jqvmap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../dist/css/adminlte.min.css">
<!-- overlayScrollbars -->
<link rel="stylesheet" href="../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<!-- Daterange picker -->
<link rel="stylesheet" href="../plugins/daterangepicker/daterangepicker.css">
<!-- summernote -->
<link rel="stylesheet" href="../plugins/summernote/summernote-bs4.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="index3.html" class="brand-link">
<img src="../dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">perjalanan</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item ">
<a href="home.php" class="nav-link ">
<p>
Home
</p>
</a>
</li>
<li class="nav-item ">
<a href="catatan_perjalanan.php" class="nav-link ">
<p>
catatan perjalanan
</p>
</a>
</li>
<li class="nav-item ">
<a href="isi_data.php" class="nav-link ">
<p>
isi data
</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">Dashboard</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Dashboard v1</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<a href="isi_data.php"><button class="btn btn-primary btn-sm">tambah data</button></a>
<div class="card-tools">
<form action="" method="get">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="cari" class="form-control float-right" placeholder="Search">
<div class="input-group-append">
<button type="submit" value="cari" class="btn btn-default"><i class="fas fa-search"></i>search</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.card-header -->
<div class="card-body table-responsive p-0">
<table class="table table-hover text-nowrap">
<thead>
<tr>
<th>NO</th>
<th>tanggal</th>
<th>jam</th>
<th>lokasi</th>
<th>suhu</th>
</tr>
</thead>
<tbody>
<?php
$txt_file = file_get_contents('data_perjalanan.txt');
$rows = explode("\n", $txt_file);
array_shift($rows);
$i=1;
if(isset($_GET['cari'])){
$cari = $_GET['cari'];
foreach($rows as $row => $data)
{
// Explode digunakan untuk memisahkan Item Data dariPemisah |, array pada PHP dimulaipada index ke-0
$row_data = explode('|', $data);
$info[$row]['tanggal'] = $row_data[0];
$info[$row]['jam'] = $row_data[1];
$info[$row]['lokasi'] = $row_data[2];
$info[$row]['suhu'] = $row_data[3];
if ($row_data[0]===$cari){
// Menampilkan Data
echo "<tr>";
echo '<td> ' . $i++ . '</td>';
echo ' <td>' . $info[$row]['tanggal'] . '</td>';
echo ' <td>' . $info[$row]['jam'] . '</td>';
echo ' <td>' . $info[$row]['lokasi'] . '</td>';
echo ' <td>' . $info[$row]['suhu'] . '</td>';
echo "</tr>";
}
}
}else{
foreach($rows as $row => $data)
{
// Explode digunakan untuk memisahkan Item Data dariPemisah |, array pada PHP dimulaipada index ke-0
$row_data = explode('|', $data);
$info[$row]['tanggal'] = $row_data[0];
$info[$row]['jam'] = $row_data[1];
$info[$row]['lokasi'] = $row_data[2];
$info[$row]['suhu'] = $row_data[3];
// Menampilkan Data
echo "<tr>";
echo '<td> ' . $i++ . '</td>';
echo ' <td>' . $info[$row]['tanggal'] . '</td>';
echo ' <td>' . $info[$row]['jam'] . '</td>';
echo ' <td>' . $info[$row]['lokasi'] . '</td>';
echo ' <td>' . $info[$row]['suhu'] . '</td>';
echo "</tr>";
}
}
?>
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
</div>
</div><!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<strong>Copyright © 2014-2019 <a href="http://adminlte.io">AdminLTE.io</a>.</strong>
All rights reserved.
<div class="float-right d-none d-sm-inline-block">
<b>Version</b> 3.0.5
</div>
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
<!-- jQuery -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="../plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button)
</script>
<!-- Bootstrap 4 -->
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- ChartJS -->
<script src="../plugins/chart.js/Chart.min.js"></script>
<!-- Sparkline -->
<script src="../plugins/sparklines/sparkline.js"></script>
<!-- JQVMap -->
<script src="../plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="../plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<!-- jQuery Knob Chart -->
<script src="../plugins/jquery-knob/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="../plugins/moment/moment.min.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="../plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="../plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="../plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/adminlte.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="../dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../dist/js/demo.js"></script>
</body>
</html>
inti dari sourcodenya adalah sebagai berikut
<?php
$txt_file = file_get_contents('data_perjalanan.txt');
$rows = explode("\n", $txt_file);
array_shift($rows);
$i=1;
if(isset($_GET['cari'])){
$cari = $_GET['cari'];
foreach($rows as $row => $data)
{
// Explode digunakan untuk memisahkan Item Data dariPemisah |, array pada PHP dimulaipada index ke-0
$row_data = explode('|', $data);
$info[$row]['tanggal'] = $row_data[0];
$info[$row]['jam'] = $row_data[1];
$info[$row]['lokasi'] = $row_data[2];
$info[$row]['suhu'] = $row_data[3];
if ($row_data[0]===$cari){
// Menampilkan Data
echo "<tr>";
echo '<td> ' . $i++ . '</td>';
echo ' <td>' . $info[$row]['tanggal'] . '</td>';
echo ' <td>' . $info[$row]['jam'] . '</td>';
echo ' <td>' . $info[$row]['lokasi'] . '</td>';
echo ' <td>' . $info[$row]['suhu'] . '</td>';
echo "</tr>";
}
}
}else{
foreach($rows as $row => $data)
{
// Explode digunakan untuk memisahkan Item Data dariPemisah |, array pada PHP dimulaipada index ke-0
$row_data = explode('|', $data);
$info[$row]['tanggal'] = $row_data[0];
$info[$row]['jam'] = $row_data[1];
$info[$row]['lokasi'] = $row_data[2];
$info[$row]['suhu'] = $row_data[3];
// Menampilkan Data
echo "<tr>";
echo '<td> ' . $i++ . '</td>';
echo ' <td>' . $info[$row]['tanggal'] . '</td>';
echo ' <td>' . $info[$row]['jam'] . '</td>';
echo ' <td>' . $info[$row]['lokasi'] . '</td>';
echo ' <td>' . $info[$row]['suhu'] . '</td>';
echo "</tr>";
}
}
?>
6. membuat file isi_data.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 3 | Dashboard</title>
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome -->
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Tempusdominus Bbootstrap 4 -->
<link rel="stylesheet" href="../plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- JQVMap -->
<link rel="stylesheet" href="../plugins/jqvmap/jqvmap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../dist/css/adminlte.min.css">
<!-- overlayScrollbars -->
<link rel="stylesheet" href="../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<!-- Daterange picker -->
<link rel="stylesheet" href="../plugins/daterangepicker/daterangepicker.css">
<!-- summernote -->
<link rel="stylesheet" href="../plugins/summernote/summernote-bs4.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="index3.html" class="brand-link">
<img src="../dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">perjalanan</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item ">
<a href="home.php" class="nav-link ">
<p>
Home
</p>
</a>
</li>
<li class="nav-item ">
<a href="catatan_perjalanan.php" class="nav-link ">
<p>
catatan perjalanan
</p>
</a>
</li>
<li class="nav-item ">
<a href="isi_data.php" class="nav-link ">
<p>
isi data
</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">Isi Data Perjalanan</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">isi data</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Form Data Perjalanan</h3>
</div>
<!-- /.card-header -->
<!-- form start -->
<form action="" method="post" role="form">
<div class="card-body" >
<div class="form-group">
<label for="exampleInputEmail1">tanggal</label>
<input name="tanggal" type="date" class="form-control" id="exampleInputEmail1" >
</div>
<div class="form-group">
<label for="exampleInputPassword1">jam</label>
<input name="jam" type="text" class="form-control" id="exampleInputPassword1" >
</div>
<div class="form-group">
<label for="exampleInputPassword1">lokasi yang dikunjungi</label>
<input name="lokasi" type="text" class="form-control" id="exampleInputPassword1" >
</div>
<div class="form-group">
<label for="exampleInputPassword1">suhu tubuh</label>
<input name="suhu" type="number" class="form-control" id="exampleInputPassword1">
</div>
<div class="card-footer">
<button type="submit" name="Submit" class="btn btn-primary">Submit</button>
</div>
</form>
<?php
if(isset($_POST['Submit'])) {
// Menangkap isi variabel dari file yang telah kita isi pada form.php
$tanggal = $_POST['tanggal'];
$jam = $_POST['jam'];
$lokasi = $_POST['lokasi'];
$suhu = $_POST['suhu'];
// Format data yang akandiparsing
$data = "\n$tanggal|$jam|$lokasi|$suhu";
// Buka file mhs.txt, kemudian tuliskan isi variabel di atas kedalam mhs.txt
$fh = fopen("data_perjalanan.txt", "a");
fwrite($fh, $data);
// Tutup file data.txt
fclose($fh);
echo "<script> location.replace('catatan_perjalanan.php'); </script>";
//exit(header("Location: catatan_perjalanan.php"));
//header("Location: /catatan_perjalanan.php");
//return window.location.replace("catatan_perjalanan.php");
// Keterangan bila data berhasil di input
}
?>
</div>
</div><!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<strong>Copyright © 2014-2019 <a href="http://adminlte.io">AdminLTE.io</a>.</strong>
All rights reserved.
<div class="float-right d-none d-sm-inline-block">
<b>Version</b> 3.0.5
</div>
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
<!-- jQuery -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="../plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button)
</script>
<!-- Bootstrap 4 -->
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- ChartJS -->
<script src="../plugins/chart.js/Chart.min.js"></script>
<!-- Sparkline -->
<script src="../plugins/sparklines/sparkline.js"></script>
<!-- JQVMap -->
<script src="../plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="../plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<!-- jQuery Knob Chart -->
<script src="../plugins/jquery-knob/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="../plugins/moment/moment.min.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="../plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="../plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="../plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/adminlte.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="../dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../dist/js/demo.js"></script>
</body>
</html>
Inti dari sourcode diatas adalah seperti dibawah ini.
<?php
if(isset($_POST['Submit'])) {
// Menangkap isi variabel dari file yang telah kita isi pada form.php
$tanggal = $_POST['tanggal'];
$jam = $_POST['jam'];
$lokasi = $_POST['lokasi'];
$suhu = $_POST['suhu'];
// Format data yang akandiparsing
$data = "\n$tanggal|$jam|$lokasi|$suhu";
// Buka file mhs.txt, kemudian tuliskan isi variabel di atas kedalam mhs.txt
$fh = fopen("data_perjalanan.txt", "a");
fwrite($fh, $data);
// Tutup file data.txt
fclose($fh);
echo "<script> location.replace('catatan_perjalanan.php'); </script>";
//exit(header("Location: catatan_perjalanan.php"));
//header("Location: /catatan_perjalanan.php");
//return window.location.replace("catatan_perjalanan.php");
// Keterangan bila data berhasil di input
}
?>
Kesimpulan:
Jika Aplikasi ini tidak berjalan silahkan download saja contoh sourcodenya disini download. aplikasi ini dibuat belum sempurna silahkan kalian sempurnakan sendiri jika ingin lebih baik lagi. tapi intinya cara pembuatannya nanti sama dengan aplikasi ini. semoha bermanfaat dan jangan lupa komen jika tidak mengerti dengan codingnya.
0 Komentar