Manual Book Awang

Nama:Awang Pramudya A
Kelas:XII-RPL 1
No:20
SMKN JATIROGO
PROJECT UKK
APLIKASI CATATAN PERJALANAN
MANUAL BOOK
DAFTAR ISI
A.PENJELASAN
UKK XII RPL MEMBUAT APLIKASI CATATAN PERJALANAN
B.PEMBUATAN
1.Download Boostsrap Themes&Template
https://startbootstrap.com/themes
2.Buka file tersebut
3.Membuat index.php dengan mengganti index.html ke php dan mengedit codingan sesuai yg di
inginkan
<!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="">
<title>Aplikasi Peduli Diri - Login</title>

<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?
family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">

<link href="css/sb-admin-2.min.css" rel="stylesheet">
</head>
<body class="bg-gradient-danger">
<div class="container">

<div class="row justify-content-center">
<div class="col-xl-6 col-lg-12 col-md-9">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">

<div class="row">
<div class="col-lg-12">
<div class="p-5">
<div class="text-center">
<img src="img/pp.png" width="40%">
<h1 class="h4 text-gray-900 mb-2 mt-4">Selamat Datang Di Aplikasi Peduli Diri</h1>

<p>Silahkan Masukkan Data Anda</p>
</div>
<form class="user" method="post" action="proses_login.php">
<div class="form-group">
<input name="nik" required type="text" class="form-control form-control-user"
id="exampleInputEmail" aria-describedby="emailHelp"
placeholder="Masukkan NIK Anda...">
</div>
<input name="nama_lengkap" required type="password" class="form-control form-control-user"
id="exampleInputPassword" placeholder="Masukkan Nama Lengkap Anda...">
</div>
<button type="submit" class="btn btn-secondary btn-user btn-block">
<i class="fa fa-spinner"></i> Login
</button>
</a>
<hr>
<a href="register.php" class="btn btn-secondary btn-user btn-block">
Belum Punya Akun? Silahkan Ke Halaman Reister<i class="fa fa-arrow-right fa-fw"></i>
<a href="Lupa_username.php" class="btn btn-user">
Lupa Username<i class="fa fa-arrow-right fa-fw"></i>
</a>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<script src="vendor/jquery-easing/jquery.easing.min.js"></script>

<script src="js/sb-admin-2.min.js"></script>
</body>
</html>
HASIL:
4. Membuat tampilan register dengan membuat file register.php

<!DOCTYPE html>
<html lang="en">
<head>
<title>Aplikasi Peduli Diri - Register</title>
<link
rel="stylesheet">
</head>
<body class="bg-gradient-danger">
<div class="container">

<div class="row justify-content-center">
<div class="col-xl-6 col-lg-12 col-md-9">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">

<div class="row">
<div class="col-lg-12">
<div class="p-5">
<div class="text-center">
<img src="img/pp.png" width="40%">

<h1 class="h4 text-gray-900 mb-2 mt-4">Register Akun Aplikasi Peduli Diri</h1>
<p>Silahkan Masukkan Data Anda</p>
</div>
<form class="user" method="post" action="proses_register.php">
<input name="nik" required type="text" class="form-control form-control-user"
id="exampleInputEmail" aria-describedby="emailHelp"
placeholder="Masukkan NIK Anda...">
</div>
<input name="nama_lengkap" required type="text" class="form-control form-control-user"
id="exampleInputPassword" placeholder="Masukkan Nama Lengkap Anda...">
</div>
<button type="submit" class="btn btn-secondary btn-user btn-block">
<i class="fa fa-spinner"></i> Register
</button>
</a>
<hr>
<a href="index.php" class="btn btn-secondary btn-user btn-block">
<i class="fa fa-arrow-left fa-fw"></i> Sudah punya Akun? Silahkan Ke Halaman Login
</a>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hasil:
5.Membuat Proses_login.php dan Proses_register.php

Proses_login.php
<?php
$nik=$_POST['nik'];
$nama=$_POST['nama_lengkap'];
$format="$nik|$nama";
$file=file("config.txt",FILE_IGNORE_NEW_LINES);
if(in_array($format, $file)){
session_start();
$_SESSION['nik']=$nik;
$_SESSION['nama_lengkap']=$nama;
header("location:user.php");
}else{ ?>
<script type='text/javascript'>window
alert('!!!Maaf kombinasi NIK dan Nama Lengkap Salah.');
window.location.assign('index.php');
</script>
<?php
?>
Proses_register.php
<?php
error_reporting(0);
$nik=$_POST['nik'];
$nama=$_POST['nama_lengkap'];
//cek apakah nik sudah terdaftar atau belum
$data=file("config.txt", FILE_IGNORE_NEW_LINES);
foreach($data as $value){
$pecah=explode("|", $value);
if($nik==$pecah['0']){
$cek=true;
if($cek){ //jika nik sudah terdaftar?>
<script type='text/javascript'>
alert('!! Maaf NIK Anda Sudah Terdaftar.');
window.location.assign('register.php');
</script>
<?php }else{ //jika data tidak ditemukan
//buat format penyimpanan

$format="\n$nik|$nama";
//buka dulu file config.txt
$file=fopen('config.txt','a');
fwrite($file, $format);
//tutup file
fclose($file);
?>
<script type='text/javascript'>
alert('Pendaftaran Berhasil Dilakukan.');
</script>
<?php
?>
6.Membuat file .txt untuk menyimpan data(NIK Dan USERNAME)

7.Membuat User.php dengan mengganti blank.html ke User.php
<?php
session_start();
if(empty($_SESSION['nik'])){?>
<script type="text/javascript">
alert("Maaf Anda Belum Melakukan Login");
</script>
<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Aplikasi Peduli Diri - User</title>
<link
rel="stylesheet">

<link href="vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
</head>
<body id="page-top">

<div id="wrapper">

<ul class="navbar-nav bg-gradient-secondary sidebar sidebar-dark accordion" id="accordionSidebar">

<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-book"></i>
</div>
<div class="sidebar-brand-text mx-3">Peduli Diri</div>
</a>

<hr class="sidebar-divider my-0">

<li class="nav-item">
<a class="nav-link" href="user.php">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span></a>
</li>

<hr class="sidebar-divider">

<div class="sidebar-heading">
Interface
</div>

<a class="nav-link" href="?url=tulis_catatan">
<i class="fas fa-fw fa-clone"></i>
<span>Tulis Catatan / Perjalanan</span></a>
</li>

<a class="nav-link" href="?url=catatan_perjalanan">
<i class="fas fa-fw fa-book"></i>
<span>Catatan Perjalanan</span></a>
</li>

<a onclick="return confirm('Apakah Anda Yakin Ingin Logout?')" href=logout.php
class="nav-link" href="logout.php">
<i class="fas fa-fw fa-power-off"></i>
<span>Logout</span></a>
</li>

<hr class="sidebar-divider d-none d-md-block">

<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
</ul>


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

<div id="content">

<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<h3>Aplikasi Peduli Diri - Aplikasi Catatan Perjalanan</h3>
</nav>


<div class="container-fluid">


<div class="h5 mb-4 text-gray-800">
<?php
if(!empty($_GET['url'])){
switch ($_GET['url']) {
case 'tulis_catatan';
include 'tulis_catatan.php';
# code...
break;
case 'catatan_perjalanan';
include 'catatan_perjalanan.php';
# code...
break;
case 'edit_catatan';
include 'edit_catatan.php';
break;
default:
echo "<h3>Halaman Tidak Ditemukan</h3>";
break;
}else{
echo "Selamat Datang Di Aplikasi Peduli Diri<br>";
echo "Anda Login Sebagai : <b>".$_SESSION['nama_lengkap']."</b>";
?>
</div>
</div>

</div>



<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright © Aplikasi Peduli Diri 2022</span>
</div>
</div>
</footer>

</div>

</div>


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

<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>

<a class="btn btn-secondary" href="login.html">Logout</a>
</div>
</div>
</div>
</div>

<script src="vendor/datatables/jquery.dataTables.min.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>

<script src="js/demo/datatables-demo.js"></script>
</body>
</html>
Hasil:
8.Membuat file Tulis_catatan.php
<div class="card">
<div class="card-header">
<a href="user.php" class="btn btn-secondary btn-icon-split">
<span class="icon text-white-50">
<i class="fas fa-arrow-left"></i>
</span>
<span class="text">Kembali</span>
</a>
</div>
<div class="card-body">
<form action="simpan_catatan.php" method="post">
<label>Tanggal</label>
<input type="date" required class="form-control" placeholder="Masukkan Tanggal"

name="tgl">
</div>
<label>Jam</label>
<input type="time" required class="form-control" placeholder="Masukkan Jam"

name="jam">
</div>
<label>Lokasi</label>
<input type="text" required class="form-control" placeholder="Masukkan Lokasi"
name="lokasi">
</div>
<label>Suhu Tubuh</label>
<input type="number" required class="form-control" placeholder="Masukkan Suhu Tubuh"

name="suhu">
</div>
<button type="submit" class="btn btn-secondary"><i class="fa

fa-save"></i>SIMPAN</button>
<button type="reset" class="btn btn-secondary"><i class="fa fa-trash"></i>HAPUS</button>
</div>
</form>
</div>
</div>
Hasil:
9.membuat file catatan.txt untuk menyimpan data catatan

10.membuat proses simpan dengan membuat file Simpan_catatan.php
<?php
session_start();
$nik=$_SESSION['nik'];
$nama=$_SESSION['nama_lengkap'];
$tgl=$_POST['tgl'];
$jam=$_POST['jam'];
$lokasi=$_POST['lokasi'];
$suhu=$_POST['suhu'];
$id_catatan = rand(0, 100000);
$format="\n$id_catatan|$nik|$nama|$tgl|$jam|$lokasi|$suhu";
$file=fopen('catatan.txt','a');
fwrite($file, $format);
fclose($file);
?>
<script type="text/javascript">
alert('Data Perjalanan Tersimpan');
window.location.assign('user.php?url=catatan_perjalanan');
</script>

11.Membuat file Catatan_perjalanan.php untuk menampilkan data

<div class="card">
<div class="card-header">
<a href="user.php" class="btn btn-secondary btn-icon-split">
<span class="icon text-white-50">
<i class="fas fa-arrow-left"></i>
</span>
<span class="text">Kembali</span>
</a>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>No</th>
<th>Tanggal</th>
<th>Jam</th>
<th>Lokasi</th>
<th>Suhu Tubuh</th>
</tr>
</thead>
<tfoot>
<tr>
<th>No</th>
<th>Tanggal</th>
<th>Jam</th>
<th>Lokasi</th>
<th>Suhu Tubuh</th>
</tr>
</tfoot>
<tbody>
<?php
$no=1;
$data=file("catatan.txt",FILE_IGNORE_NEW_LINES);
$user=$_SESSION['nik']."|".$_SESSION['nama_lengkap'];
foreach ($data as $value) {
$pecah=explode("|", $value);
@$key=$pecah['1']."|".$pecah['2'];
if($key==$user){
?>
<tr>
<td><?= $no++; ?></td>
<td><?= $pecah['3']; ?></td>
<td><?= $pecah['4']; ?></td>
<td><?= $pecah['5']; ?></td>
<td><?= $pecah['6']; ?></td>
</tr>
<?php } } ?>
</tbody>
</table>
</div>
</div>
</div>
Hasil:
12.membuat proses logout dengan membuat file logout.php

?php
session_start();
session_destroy();
header("location:index.php");
?>
C.CARA MENJALANKAN
1.Start apache xampp_control
2.buka browser dengan mengetik localhost/namafile
3.mengisi NIK dan USERNAME jika tidak terdaftar silahkan register
4.Jika sudah login klik Tulis Catatan/Perjalanan
5.isi data perjalanan
6.lalu klik icon simpan data perjalanan
7.klik catatan perjalanan untuk melihat data yang sudah tersimpan
8.klik logout jika sudah selesai
C.PENUTUPAN
Selamat mencoba *_*

Manual Book Awang

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual Book Awang

Uploaded by

Copyright:

Available Formats

Nama:Awang Pramudya A

2.Buka file tersebut

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="description" content="">

<meta name="author" content="">

<title>Aplikasi Peduli Diri - Login</title>

<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

<link href="css/sb-admin-2.min.css" rel="stylesheet">

<div class="row justify-content-center">

<div class="col-xl-6 col-lg-12 col-md-9">

<div class="card o-hidden border-0 shadow-lg my-5">

<div class="card-body p-0">

<img src="img/pp.png" width="40%">

<h1 class="h4 text-gray-900 mb-2 mt-4">Selamat Datang Di Aplikasi Peduli Diri</h1>

<form class="user" method="post" action="proses_login.php">

<input name="nik" required type="text" class="form-control form-control-user"

placeholder="Masukkan NIK Anda...">

<input name="nama_lengkap" required type="password" class="form-control form-control-user"

id="exampleInputPassword" placeholder="Masukkan Nama Lengkap Anda...">

<button type="submit" class="btn btn-secondary btn-user btn-block">

<i class="fa fa-spinner"></i> Login

<a href="register.php" class="btn btn-secondary btn-user btn-block">

Belum Punya Akun? Silahkan Ke Halaman Reister<i class="fa fa-arrow-right fa-fw"></i>

<a href="Lupa_username.php" class="btn btn-user">

Lupa Username<i class="fa fa-arrow-right fa-fw"></i>

4. Membuat tampilan register dengan membuat file register.php

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="description" content="">

<meta name="author" content="">

<title>Aplikasi Peduli Diri - Register</title>

<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

<link href="css/sb-admin-2.min.css" rel="stylesheet">

<div class="row justify-content-center">

<div class="col-xl-6 col-lg-12 col-md-9">

<div class="card o-hidden border-0 shadow-lg my-5">

<div class="card-body p-0">

<img src="img/pp.png" width="40%">

<p>Silahkan Masukkan Data Anda</p>

<form class="user" method="post" action="proses_register.php">

<input name="nik" required type="text" class="form-control form-control-user"

placeholder="Masukkan NIK Anda...">

<input name="nama_lengkap" required type="text" class="form-control form-control-user"

id="exampleInputPassword" placeholder="Masukkan Nama Lengkap Anda...">

<button type="submit" class="btn btn-secondary btn-user btn-block">

<i class="fa fa-spinner"></i> Register

<a href="index.php" class="btn btn-secondary btn-user btn-block">

5.Membuat Proses_login.php dan Proses_register.php

alert('!!!Maaf kombinasi NIK dan Nama Lengkap Salah.');

//cek apakah nik sudah terdaftar atau belum

if($cek){ //jika nik sudah terdaftar?>

<span>Copyright © Aplikasi Peduli Diri 2022</span>