 Show Dalam tutorial ini kita akan membuat halaman form login bagi dashboard admin panel. Proses autentifikasi user sangat
diperlukan untuk mengizinkan boleh tidaknya seseorang untuk masuk ke halaman khusus user yang sudah teregistrasi. Halaman dashboard administrator adalah salah satu contohnya. Dalam halaman tersebut si admin bertugas untuk mengatur apa-apa saja yang akan ditampilkan pada halaman depan website.
Untuk file database dapat anda download pada link dibawah ini :
Pada postingan sebelumnya saya membuat artikel cara membuat CRUD dengan PHP dan MySQL. Pada kesempatakan kali ini saya akan membuat tutorial aplikasi web perpustakaan sederhana menggunakan PHP dan MySQL beserta login. Berikut adalah tampilannya: Sebelum masuk ke index jika kita belum login maka akan tampil warning seperti dibawah ini Lalu akan diarahkan pada halaman login Berikut adalah tampilan setelah login: Tambah Data Edit Data Hapus Data Detail Data Apa Saja yang Harus Dipersiapkan?
Langkah Awal PembuatanLangkah awal pembuatan aplikasi admin perpustakaan dengan PHP dan MySQL adalah membuat database. Disini saya membuat database dengan nama “db_perpustakaan” kemudian buat tabel-tabel seperti dibawah ini: Untuk database saya bisa di download disini Pertama siapkan dahulu tabel untuk menampung data user. Saya beri nama “tb_user”. Tabel “tb_user” berisi id, username, password, nama, level, foto. Source Code login.php <?php
include "koneksi.php";
ob_start();
session_start();
error_reporting(0);
if (isset($_SESSION["login"])) {
header('location: index.php');
exit;
}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login : One-IT Library</title>
<!-- BOOTSTRAP STYLES-->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FONTAWESOME STYLES-->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- CUSTOM STYLES-->
<link href="assets/css/custom.css" rel="stylesheet" />
<!-- GOOGLE FONTS-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
</head>
<body>
<div class="container">
<div class="row text-center ">
<div class="col-md-12">
<br /><br />
<h2> One-IT Library : Login</h2>
<br />
</div>
</div>
<div class="row ">
<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
<div class="panel panel-default">
<div class="panel-heading">
<strong> Masukan Username dan Password </strong>
</div>
<div class="panel-body">
<form role="form" method="POST" action="cek_login.php">
<br />
<div class="form-group input-group">
<span class="input-group-addon"><i class="fa fa-tag" ></i></span>
<input type="text" name="username" class="form-control" placeholder="Masukan Username " />
</div>
<div class="form-group input-group">
<span class="input-group-addon"><i class="fa fa-lock" ></i></span>
<input type="password" name="password" class="form-control" placeholder="Masukan password" />
</div>
<input type="submit" name="login" value="login" class="btn btn-primary">
<input type="reset" value="Batal" name="batal" class="btn btn-danger">
</div>
</div>
</div>
</div>
</div>
<!-- SCRIPTS -AT THE BOTOM TO REDUCE THE LOAD TIME-->
<!-- JQUERY SCRIPTS -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- BOOTSTRAP SCRIPTS -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- METISMENU SCRIPTS -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- CUSTOM SCRIPTS -->
<script src="assets/js/custom.js"></script>
</body>
</html>
Kemudian akan diteruskan ke cek_login.php <?php
include "koneksi.php";
function antiinjection($data){
global $mysqli;
$filter_sql = mysqli_real_escape_string($mysqli,stripslashes(strip_tags(htmlspecialchars($data,ENT_QUOTES))));
return $filter_sql;
}
$username = antiinjection($_POST['username']);
$password = antiinjection($_POST['password']);
$login=mysqli_query($mysqli,"SELECT * FROM tb_user WHERE username='$username' AND password='$password'");
$ketemu=mysqli_num_rows($login);
$r=mysqli_fetch_array($login);
// Apabila username dan password ditemukan
if ($ketemu > 0){
session_start();
// session_register("namauser");
//session_register("namalengkap");
// session_register("passuser");
//session_register("leveluser");
$_SESSION[namauser] = $r[username];
$_SESSION[namalengkap] = $r[nama];
$_SESSION[passuser] = $r[password];
$_SESSION[leveluser] = $r[level];
header('location:index.php');
}
else{
echo "<script>alert('Username Atau Password Anda Salah'); window.location = 'login.php'</script>";
}
?>
2. Koneksi ke DatabaseUntuk mengolah data kita harus melakukan koneksi ke database dengan membuat file dengan nama koneksi.php Source Code Koneksi.php <?php
include "function.php";
$host="localhost";
$user="root";
$pass="";
$database="db_perpustakaan";
$mysqli= new mysqli ($host,$user,$pass,$database);
//Object Oriented Style $mysqli -> new mysqli(host, username, password, dbname, port, socket)
//check connection
if ($mysqli -> connect_errno) {
trigger_error("Failed to connect to MYSQL: " . $mysqli, E_USER_NOTICE);
//trigger_error(message, type)
}
?>
3. IndexIndex berisi template dan pemanggilan pages. Source Code index.php <?php
session_start();
error_reporting(0);
if (isset($_SESSION["login"])) {
header('location: login.php');
exit;
}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>One-IT</title>
<!-- BOOTSTRAP STYLES-->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FONTAWESOME STYLES-->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- CUSTOM STYLES-->
<link href="assets/css/custom.css" rel="stylesheet" />
<!-- GOOGLE FONTS-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<!-- TABLE STYLES-->
<link href="assets/js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
<!-- framework bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- datepicker bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap-datepicker.min.css">
<script src="assets/js/bootstrap-datepicker.min.js"></script>
<script src="assets/locales/bootstrap-datepicker.id.min.js"></script>
</head>
<?php
if (empty ($_SESSION['username']) AND empty($_SESSION['passuser'])) {
echo "<center><br><br><br><br><br><br><br><br><br><br><br><div><img src='images/warning.png' height=180 width=200></div><br>";
echo "<center> Untuk mengakses admin One-IT Library <br> <b> anda harus login terlebih dahulu</b>";
echo "<meta http-equiv='Refresh' content='4; URL=login.php'>";
}else{
?>
<body>
<div id="wrapper">
<nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">One It Library</a>
</div>
<div style="color: white;
padding: 15px 50px 5px 50px;
float: right;
font-size: 16px;"> Today : <?php $d=date('d-m-Y'); echo "$d"; ?> <a href="login.php" class="btn btn-danger square-btn-adjust">Logout</a> </div>
</nav>
<!-- /. NAV TOP -->
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li class="text-center">
<img src="assets/img/find_user.png" class="user-image img-responsive"/>
</li>
<li>
<a href="?home.php"><i class="fa fa-home fa-2x"></i> Dashboard</a>
</li>
<li>
<a href="?page=anggota"><i class="fa fa-users fa-2x"></i> Data Anggota</a>
</li>
<li>
<a href="?page=buku"><i class="fa fa-book fa-2x"></i> Data Buku</a>
</li>
<li>
<a href="?page=transaksi"><i class="fa fa-database fa-2x"></i> Transaksi</a>
</li>
</ul>
</div>
</nav>
<!-- /. NAV SIDE -->
<div id="page-wrapper" >
<div id="page-inner">
<div class="row">
<div class="col-md-12">
<?php
include "pages.php";
?>
</div>
</div>
<!-- /. ROW -->
<hr />
</div>
<!-- /. PAGE INNER -->
</div>
<!-- /. PAGE WRAPPER -->
</div>
<!-- /. WRAPPER -->
<?php } ?>
<!-- SCRIPTS -AT THE BOTOM TO REDUCE THE LOAD TIME-->
<!-- JQUERY SCRIPTS -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- BOOTSTRAP SCRIPTS -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- METISMENU SCRIPTS -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- DATA TABLE SCRIPTS -->
<script src="assets/js/dataTables/jquery.dataTables.js"></script>
<script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
<script>
$(document).ready(function () {
$('#dataTables-example').dataTable();
});
</script>
<!-- CUSTOM SCRIPTS -->
<script src="assets/js/custom.js"></script>
</body>
</html>
4. Home/DashboardDashboard disini berisi jumlah anggota, buku, transaksi dan user beserta uaian singkat mengenai One-IT Library. Source Code home.php <?php
session_start();
error_reporting(0);
if (isset($_SESSION["login"])) {
header('location: login.php');
exit;
}
?>
<marquee>Selamat Datang di Halaman Utama One-IT Library</marquee>
<!-- /. NAV SIDE -->
<div id="page-inner">
<div class="row">
<div class="col-md-12">
<h2 style="color: black;">Admin One-IT Library</h2>
</div>
</div>
<!-- /. ROW -->
<hr />
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="panel panel-back noti-box">
<span class="icon-box bg-color-red set-icon">
<i class="fa fa-users"></i>
</span>
<div class="text-box" >
<b><?php
$mahasiswa= mysqli_query($mysqli,"SELECT * FROM tb_anggota");
$jumlah_mahasiswa = mysqli_num_rows($mahasiswa);
?>
<p style="font-size: 20px;"><?php echo $jumlah_mahasiswa; ?> Anggota</p></b>
<a href="?page=anggota">
<p class="text-muted">Lihat Detail</p></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="panel panel-back noti-box">
<span class="icon-box bg-color-green set-icon">
<i class="fa fa-book"></i>
</span>
<div class="text-box" >
<b><?php
$mahasiswa= mysqli_query($mysqli,"SELECT * FROM tb_buku");
$jumlah_mahasiswa = mysqli_num_rows($mahasiswa);
?>
<p style="font-size: 20px;"><?php echo $jumlah_mahasiswa; ?> Buku</p></b>
<a href="?page=buku">
<p class="text-muted">Lihat Detail</p></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="panel panel-back noti-box">
<span class="icon-box bg-color-blue set-icon">
<i class="fa fa-database"></i>
</span>
<div class="text-box" >
<b><?php
$mahasiswa= mysqli_query($mysqli,"SELECT * FROM tb_transaksi");
$jumlah_mahasiswa = mysqli_num_rows($mahasiswa);
?>
<p style="font-size: 20px;"><?php echo $jumlah_mahasiswa; ?> Transaksi</p></b>
<a href="?page=transaksi">
<p class="text-muted">Lihat Details</p></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="panel panel-back noti-box">
<span class="icon-box bg-color-brown set-icon">
<i class="fa fa-user"></i>
</span>
<div class="text-box" >
<b><?php
$mahasiswa= mysqli_query($mysqli,"SELECT * FROM tb_user");
$jumlah_mahasiswa = mysqli_num_rows($mahasiswa);
?>
<p style="font-size: 20px;"><?php echo $jumlah_mahasiswa; ?> User</p></b>
<p class="text-muted">Lihat Details</p>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 30px;">
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
Data Anggota Terlambat Pengembalian Buku
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Tanggal Pinjam</th>
<th>Tanggal Kembali</th>
<th>Terlambat</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php
$transaksi = $mysqli->query("SELECT * FROM tb_transaksi WHERE status='pinjam'");
$no = 0;
while( $t = $transaksi->fetch_assoc()){
$no++;
?>
<tr>
<th scope="row"><?= $no; ?></th>
<td><?= $t["nama"]; ?></td>
<td><?= $t["tgl_pinjam"]; ?></td>
<td><?= $t["tgl_kembali"]; ?></td>
<td>
<?php
$denda = 5000;
$tgl_deadline = $t['tgl_kembali'];
$tgl_kembali = date('Y-m-d');
$lambat = terlambat($tgl_deadline,$tgl_kembali);
$denda1 = $lambat*$denda;
if ($lambat>0) {
echo"<font color='red'>$lambat hari<br>(Rp. $denda1)</font>";
}else{
echo " ".$lambat." hari";
}
?>
</td>
<td><?= $t["status"]; ?></td>
<?php } ?>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="panel panel-success">
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="panel panel-success">
<div class="panel-heading">
One-IT Library
</div>
<div class="panel-body">
<p><center>Selamat datang di One-IT Library <br>
Sebuah perpustakaan digital yang memberikan kemudahan dalam mengelola data perpustakaan One-IT University</p></center>
</div>
<div class="panel-footer">
Introduction
</div>
</div>
</div>
</div>
<?php include "koneksi.php"; ?>
Untuk source code dari anggota, buku dan transaksi tidak bisa saya tampilkan disini. Jika ada yang berminat untuk belajar lebih lanjut, silahkan Download Full Source Code Disini Perlu digaris bawahi bahwa web yang saya buat ini masih jauh dari kata sempurna dan harus dikembangkan lagi. Saya masih dalam proses belajar, maka dari itu kritik dan saran dari teman-teman sekalian sangat berarti untuk saya. Bila ada yang ingin ditanyakan silahkan ajukan saja di kolom komentar. Terima Kasih dan semoga bermanfaat Seorang mahasiswa biasa yang berusaha untuk menjadi orang yang berguna. Lihat semua pos dari Siti Hartati Navigasi pos |
Cara menggunakan cara membuat dashboard php
Pos Terkait
Copyright © 2024 idkuu.com Inc.
