Mautahutidak Kumpulan Berita dan Informasi dari berbagai sumber yang terpercaya
Assalamualaikum, Sebelumnya setelah kita sudah membuat Form Login & Register di tutorial sebelumnya
Tutorial Membuat Form Login & Register UKK RPL 2022 PAKET 1 |APLIKASI CATATAN PERJALANAN Dengan PHP dan MySQLi
Apabila sudah mengikuti dan sudah membuat form login dan register, sekarang kita akan membuat tampilan awal atau home setelah user berhasil login.
Sebelumnya teman-teman harus membuat table perjalanan dulu didatabase yang sudah kita buat sebelumnya, gimana caranya ? gampang yuk kita belajar bareng-bareng .
- Silahkan aktifkan Apache dan MySQL nya di aplikasi XAMPP
- Setelah itu kita ke Web Browser, lalu ketik alamat URL localhost/phpmyadmin untuk mengakses database
- Pilih database yang sebelumnya kita buat, yaitu aplikasi_perjalanan
- Setelah itu membuat table baru dengan nama perjalanan dengan number of columns 5 lalu klik Go untuk menyimpan table tersebut.
- Setelah itu isikan table tersebut sesuai dengan gambar dibawah ini, lalu klik simpan
- Tampilan setelah table perjalanan Selesai
apabila sudah seperti itu yang harus kita lakukan persiapkan bahan-bahan atau file yang dibutuhkan
- untuk folder css silahkan download melalui link tersebut link Css
- file home. php
Simpan dengan nama home.php syntak dibawah ini sesuai dengan gambar diatas
<?php
session_start();
if($_SESSION[‘status’]!=”login”){
header(“location:index.php?pesan=belum_login”);
}
?>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<title>Widianto</title>
<link rel=”stylesheet” href=”css/mdi/css/materialdesignicons.min.css”>
<link rel=”stylesheet” href=”css/feather/feather.css”>
<link rel=”stylesheet” href=”css/base/vendor.bundle.base.css”>
<link rel=”stylesheet” href=”css/flag-icon-css/css/flag-icon.min.css”/>
<link rel=”stylesheet” href=”css/font-awesome/css/font-awesome.min.css”>
<link rel=”stylesheet” href=”css/jquery-bar-rating/fontawesome-stars-o.css”>
<link rel=”stylesheet” href=”css/jquery-bar-rating/fontawesome-stars.css”>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>
<div class=”container-scroller”>
<nav class=”navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row”>
<div class=”text-center navbar-brand-wrapper d-flex align-items-center justify-content-center”>
<a class=”navbar-brand brand-logo”><font color=”white”>Peduli Diri</font></a>
</div>
<div class=”navbar-menu-wrapper d-flex align-items-center justify-content-end”>
<button class=”navbar-toggler navbar-toggler align-self-center” type=”button” data-toggle=”minimize”>
<span class=”icon-menu”></span>
</button>
<ul class=”navbar-nav mr-lg-2″>
<li class=”nav-item nav-search d-none d-lg-block”>
<div class=”input-group”>
<div class=”input-group-prepend”>
</span>
</div>
</div>
</li>
</ul>
<ul class=”navbar-nav navbar-nav-right”>
<li class=”nav-item dropdown d-lg-flex d-none”>
</li>
<li class=”nav-item dropdown d-flex mr-4 “>
<a class=”nav-link count-indicator dropdown-toggle d-flex align-items-center justify-content-center” id=”notificationDropdown” href=”#” data-toggle=”dropdown”>
<i class=”icon-cog”></i>
</a>
<div class=”dropdown-menu dropdown-menu-right navbar-dropdown preview-list” aria-labelledby=”notificationDropdown”>
<p class=”mb-0 font-weight-normal float-left dropdown-header”>Keluar</p>
<a class=”dropdown-item preview-item”href=”keluar.php”>
<i class=”icon-inbox”></i> Keluar
</a>
</div>
</li>
</ul>
<button class=”navbar-toggler navbar-toggler-right d-lg-none align-self-center” type=”button” data-toggle=”offcanvas”>
<span class=”icon-menu”></span>
</button>
</div>
</nav>
<div class=”container-fluid page-body-wrapper”>
<nav class=”sidebar sidebar-offcanvas” id=”sidebar”>
<div class=”user-profile”>
<div class=”user-image”>
<img src=”poto/logo.png”>
</div>
<div class=”user-name”>
SMK
</div>
<div class=”user-designation”>
Jam’iyyatul Aulad
</div>
</div>
<ul class=”nav”>
<li class=”nav-item”>
<a class=”nav-link” href=”home.php”>
<i class=”icon-box menu-icon”></i>
<span class=”menu-title”>Home</span>
</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”catatan/catatan.php”>
<i class=”icon-location menu-icon”></i>
<span class=”menu-title”>Catatan Perjalanan</span>
</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”tambah_perjalanan/tambah.php”>
<i class=”icon-circle-plus menu-icon”></i>
<span class=”menu-title”>Isi Data</span>
</a>
</ul>
</nav>
<div class=”main-panel”>
<div class=”content-wrapper”>
<div class=”row”>
<div class=”col-sm-12 mb-4 mb-xl-0″>
<h4 class=”font-weight-bold text-dark”>Selamat Datang, <?php echo $_SESSION[‘nama’];?>
<br>Aplikasi Catatan Perjalanan</h4>
<p class=”font-weight-normal mb-2 text-muted”><?php
// cetak waktu sekarang
// kombinasi tanggal
date_default_timezone_set(‘Asia/Jakarta’);
echo ‘Pelabuhanratu. ‘ . date (‘d-m-Y, H:i:s’);
?></p>
</div>
</div>
<div class=”row mt-3″>
<div class=”col-xl-3 flex-column d-flex grid-margin stretch-card”>
<div class=”row flex-grow”>
<div class=”col-sm-12 grid-margin stretch-card”>
<img src=”poto/home.png”>
</div>
</div>
</div>
</div></div>
<footer class=”footer”>
<div class=”d-sm-flex justify-content-center justify-content-sm-between”>
<span class=”text-muted d-block text-center text-sm-left d-sm-inline-block”>Aplikasi Catatan Perjalanan</span>
<span class=”float-none float-sm-right d-block mt-1 mt-sm-0 text-center”> Smk Jam’iyyatul Aulad</span>
</div>
</footer>
</div>
</div>
</div>
<script src=”css/base/vendor.bundle.base.js”></script>
<script src=”css/template.js”></script>
<script src=”css/typeahead.js/typeahead.bundle.min.js”></script>
<script src=”css/select2/select2.min.js”></script>
</body>
</html>
</body>
</html>
