Scribd
Upload
83 views21 pages

Manual Book Awang

This document provides instructions for creating a travel log application using Bootstrap templates. It includes downloading a Bootstrap theme, editing files to create login/registration pages, adding PHP code to process login/registration, and storing user data in a text file. The steps are: 1) Download Bootstrap templates, 2) Edit files to create pages for login, registration, and user profile, 3) Add PHP code to process login and registration, 4) Create a text file to store user data.

Uploaded by

Desi Risa Perty
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
83 views21 pages

Manual Book Awang

This document provides instructions for creating a travel log application using Bootstrap templates. It includes downloading a Bootstrap theme, editing files to create login/registration pages, adding PHP code to process login/registration, and storing user data in a text file. The steps are: 1) Download Bootstrap templates, 2) Edit files to create pages for login, registration, and user profile, 3) Add PHP code to process login and registration, 4) Create a text file to store user data.

Uploaded by

Desi Risa Perty
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 21

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>

<!-- Custom fonts for this template-->

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

<!-- Custom styles for this template-->

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

</head>

<body class="bg-gradient-danger">

<div class="container">

<!-- Outer Row -->

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

<!-- Nested Row within Card Body -->

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

<div class="form-group">

<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>
<!-- Bootstrap core JavaScript-->

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

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

<!-- Core plugin JavaScript-->

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

<!-- Custom scripts for all pages-->

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

<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 - Register</title>

<!-- Custom fonts for this template-->

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

<!-- Custom styles for this template-->

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

</head>

<body class="bg-gradient-danger">

<div class="container">

<!-- Outer Row -->

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

<!-- Nested Row within Card Body -->

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

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

<div class="form-group">

<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>
<!-- Bootstrap core JavaScript-->

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

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

<!-- Core plugin JavaScript-->

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

<!-- Custom scripts for all pages-->

<script src="js/sb-admin-2.min.js"></script>

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

window.location.assign('index.php');

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

window.location.assign('index.php');

</script>

<?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="">

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

<!-- Custom fonts for this template-->

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

<!-- Custom styles for this template-->

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

<!-- Custom styles for this page -->

<link href="vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">

</head>

<body id="page-top">

<!-- Page Wrapper -->

<div id="wrapper">

<!-- Sidebar -->

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

<!-- Sidebar - Brand -->

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

<!-- Divider -->

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

<!-- Nav Item - Dashboard -->

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

<!-- Divider -->

<hr class="sidebar-divider">

<!-- Heading -->

<div class="sidebar-heading">

Interface

</div>

<!-- Nav Item - Charts -->

<li class="nav-item">

<a class="nav-link" href="?url=tulis_catatan">

<i class="fas fa-fw fa-clone"></i>

<span>Tulis Catatan / Perjalanan</span></a>

</li>

<!-- Nav Item - Tables -->

<li class="nav-item">

<a class="nav-link" href="?url=catatan_perjalanan">

<i class="fas fa-fw fa-book"></i>

<span>Catatan Perjalanan</span></a>

</li>
<!-- Nav Item - Tables -->

<li class="nav-item">

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

<!-- Divider -->

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

<!-- Sidebar Toggler (Sidebar) -->

<div class="text-center d-none d-md-inline">

<button class="rounded-circle border-0" id="sidebarToggle"></button>

</div>

</ul>

<!-- End of Sidebar -->

<!-- Content Wrapper -->

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

<!-- Main Content -->

<div id="content">

<!-- Topbar -->

<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

<h3>Aplikasi Peduli Diri - Aplikasi Catatan Perjalanan</h3>

</nav>

<!-- End of Topbar -->

<!-- Begin Page Content -->

<div class="container-fluid">

<!-- Page Heading -->


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

<!-- /.container-fluid -->

</div>

<!-- End of Main Content -->


<!-- Footer -->

<footer class="sticky-footer bg-white">

<div class="container my-auto">

<div class="copyright text-center my-auto">

<span>Copyright &copy; Aplikasi Peduli Diri 2022</span>

</div>

</div>

</footer>

<!-- End of Footer -->

</div>

<!-- End of Content Wrapper -->

</div>

<!-- End of Page Wrapper -->

<!-- Scroll to Top Button-->

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

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

</a>

<!-- Logout Modal-->

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

<!-- Bootstrap core JavaScript-->

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

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

<!-- Core plugin JavaScript-->

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

<!-- Custom scripts for all pages-->

<script src="js/sb-admin-2.min.js"></script>

<!-- Page level plugins -->

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

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

<!-- Page level custom scripts -->

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

<div class="form-group">

<label>Tanggal</label>

<input type="date" required class="form-control" placeholder="Masukkan Tanggal"


name="tgl">

</div>

<div class="form-group">

<label>Jam</label>

<input type="time" required class="form-control" placeholder="Masukkan Jam"


name="jam">

</div>

<div class="form-group">

<label>Lokasi</label>
<input type="text" required class="form-control" placeholder="Masukkan Lokasi"
name="lokasi">

</div>

<div class="form-group">

<label>Suhu Tubuh</label>

<input type="number" required class="form-control" placeholder="Masukkan Suhu Tubuh"


name="suhu">

</div>

<div class="form-group">

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

<!-- <?php

//header('location:user.php?url=catatan_perjalanan');

?> -->

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

You might also like