Tutorial Membuat Aplikasi Catatan Perjalanan UKK RPL 2022 PAKET 1 (Peduli Diri)| Dengan PHP dan MySQLi (Part IV)
Tutorial Membuat Aplikasi Catatan Perjalanan UKK RPL 2022 PAKET 1 (Peduli Diri)| Dengan PHP dan MySQLi (Part IV)
Sebelumnya teman-teman harus membuat table perjalanan dulu didatabase yang sudah kita buat sebelumnya, gimana caranya ? gampang yuk kita belajar bareng-bareng .
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 MySQLiPart I
https://www.widiantocoder.my.id/2022/02/tutorial-membuat-form-login-register.html
https://www.widiantocoder.my.id/2022/02/tutorial-membuat-form-login-register.html
Part II
https://www.widiantocoder.my.id/2022/02/tutorial-membuat-form-login-register_22.htmlPart III
https://www.widiantocoder.my.id/2022/02/tutorial-membuat-form-login-register_7.htmlApabila 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>
Comments
Post a Comment