Jawaban Tugas UAS MBD - Dodik Arvianto - 04319004 - TI - B

Download as pdf or txt
Download as pdf or txt
You are on page 1of 27

Jawaban tugas UAS MBD

Nama :Dodik Arvianto

NIM : 04319004

Prodi : Teknik Informatika_B

1. Buatkan tutorial aplikasi user acount basis data terdsistribusi, menggunakan minimal
2 user .

Tutorial pembuatan aplikasi Perpustakaan

Tampilan menu Login, pada menu login terdapat 2 pilihan login, login sebagai admin dan
login sebagai anggota.

Script pembuatan form Login

<!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">
<!--
The above 3 meta tags *must* come first in the head; any other head content must come
*after* these tags -->
<meta name="description" content="PerpustakaanKU">
<meta name="perpustakaanku" content="PerpustakaanKU">
<link rel="icon" href="../../favicon.ico">
<title>PerpustakaanKU</title>

<!-- Bootstrap core CSS -->


<link href="css/bootstrap.min.css" rel="stylesheet">

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


<link href="signin.css" rel="stylesheet">
<script src="js/ie-emulation-modes-warning.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

</head>

<body background="img/page-background.png">

<div class="container">

<form class="form-signin" action="proseslogin.php" method="post">


<center>
<h2 class="form-signin-heading"><span class="glyphicon glyphicon-th-
large"></span> PerpustakaanKU </h2>
</center>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-
user"></i></span>
<input type="text" id="username" name="username" class="form-
control" placeholder="Username" autocomplete="off"
autofocus="on" required>
</div>
<div class="input-group" style="margin-top: 5px;">
<span class="input-group-addon"><i class="glyphicon glyphicon-
lock"></i></span>
<input type="text" id="password" name="password" class="form-
control" placeholder="Password" autocomplete="off"
required>
</div>
<div class="input-group" style="margin-top: 5px;">
<span class="input-group-addon"><i class="glyphicon glyphicon-
lock"></i></span>
<select class="form-control" name="level" id="level">
<option> -- Pilih Salah Satu --</option>
<option value="admin"> Admin</option>
<option value="anggota"> Anggota</option>
</select>
</div>
<br />
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<button class="btn btn-lg btn-warning btn-
block" type="submit"><a href="daftar.php"> Sign up </a></button>
<p class="text-right"> Kembali ke Home,<a href="index.php">klik disini</a></p>
</form>

</div> <!-- /container -->


<center>
<h5 class="form-signin">Copyright &copy; <a href="#" data-toggle="modal" data-
target="#contact">PerpustakaanKU</a>
</h5>
</center>

<!-- Modal Dialog Contact -->


<div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Contact Us</h4>
</div>
<div class="modal-body">
<p> PerpustakaanKu adalah salah satu layanan bagi pengguna untuk dapat menga
kses berbagai buku bacaan yang dan
dilakukan kapan saja dan dari mana saja, dengan menggunakan jaringan inter
net.</p>
<p> PerpustakaanKu memiliki koleksi buku dalam bentuk format digital dan bis
a diakses dengan komputer. koleksi
bacaan dari PerpustakaanKu dapat diakses dengan cepat dan mudah lewat jari
ngan komputer.</p>
<p> PerpustakaanKU bebasis website yang responsif, untuk info, saran, maupun
kritik bisa menghubungi kami :
</p>
<table>
<tr>
<td>E-mail</td>
<td>:</td>
<td><a href="[email protected]">[email protected]</a><
/td>
</tr>
<br />
<tr>
<td>Blog</td>
<td>:</td>
<td><a href="#" target="_blank">www.PerpustakaanKU.com</a></td>
</tr>
<br />
<tr>
<td>Website</td>
<td>:</td>
<td><a href="#" target="_blank">www.PerpustakaanKU.com</a></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- end dialog modal -->

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->


<script src="js/ie10-viewport-bug-workaround.js"></script>
</body>

</html>

Script proses login

<?php
include("conn.php");
date_default_timezone_set('Asia/Jakarta');

session_start();

$username = $_POST['username'];
$password = $_POST['password'];
$level = $_POST['level'];

if ($level == 'admin') {

$username = mysqli_real_escape_string($conn, $username);


$password = mysqli_real_escape_string($conn, $password);

if (empty($username) && empty($password)) {


header('location:login.html?error=1');
} else if (empty($username)) {
header('location:login.html?error=2');
} else if (empty($password)) {
header('location:login.html?error=3');
} else {
header('location:admin/index.php');

$q = mysqli_query($conn, "select * from admin where username='$username' and p


assword='$password'");
$row = mysqli_fetch_array($q);

if (mysqli_num_rows($q) == 1) {
$_SESSION['user_id'] = $row['user_id'];
$_SESSION['username'] = $username;
$_SESSION['fullname'] = $row['fullname'];
$_SESSION['gambar'] = $row['gambar'];

header('location:admin/index.php');
} else {
header('location:login.html?error=4');
}
}
} else {
$username = mysqli_real_escape_string($conn, $username);
$password = mysqli_real_escape_string($conn, $password);

if (empty($username) && empty($password)) {


header('location:login.html?error=1');
} else if (empty($username)) {
header('location:login.html?error=2');
} else if (empty($password)) {
header('location:login.html?error=3');
} else {
header('location:anggota/index.php');

$q = mysqli_query($conn, "select * from data_anggota where username='$username


' and password='$password'");
$row = mysqli_fetch_array($q);

if (mysqli_num_rows($q) == 1) {
$_SESSION['id'] = $row['id'];
$_SESSION['no_induk'] = $row['no_induk'];
$_SESSION['nama'] = $row['nama'];
$_SESSION['username'] = $username;
$_SESSION['jk'] = $row['jk'];
$_SESSION['kelas'] = $row['kelas'];
$_SESSION['ttl'] = $row['ttl'];
$_SESSION['alamat'] = $row['alamat'];
$_SESSION['foto'] = $row['gambar'];

header('location:anggota/index.php');
} else {
header('location:login.html?error=4');
}
}
}
Tampilan halaman Perpustakaan

Script halaman utama aplikasi

<?php include "conn.php"; ?>


<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>PerpustakaanKU || Membaca menjadi lebih mudah!</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-
scalable=no' name='viewport'>
<meta name="description" content="Perpustakaan Berbasis Web">
<meta name="keywords" content="Perpustakaan, perpus, online, website">
<meta name="perpustakaanku" content="PerpustakaanKU" />
<!-- bootstrap 3.0.2 -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Morris chart -->
<link href="css/morris/morris.css" rel="stylesheet" type="text/css" />
<!-- jvectormap -->
<link href="css/jvectormap/jquery-jvectormap-
1.2.2.css" rel="stylesheet" type="text/css" />
<!-- Date Picker -->
<link href="css/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />
<!-- Daterange picker -->
<link href="css/daterangepicker/daterangepicker-
bs3.css" rel="stylesheet" type="text/css" />
<!-- iCheck for checkboxes and radio inputs -->
<link href="css/iCheck/all.css" rel="stylesheet" type="text/css" />
<!-- bootstrap wysihtml5 - text editor -->
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='te
xt/css'>
<!-- Theme style -->
<link href="css/style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
// 1 detik = 1000
window.setTimeout("waktu()", 1000);

function waktu() {
var tanggal = new Date();
setTimeout("waktu()", 1000);
document.getElementById("output").innerHTML = tanggal.getHours() + ":" + t
anggal.getMinutes() + ":" + tanggal.getSeconds();
}
</script>
<script language="JavaScript">
var tanggallengkap = new String();
var namahari = ("Minggu Senin Selasa Rabu Kamis Jumat Sabtu");
namahari = namahari.split(" ");
var namabulan = ("Januari Februari Maret April Mei Juni Juli Agustus September
Oktober November Desember");
namabulan = namabulan.split(" ");
var tgl = new Date();
var hari = tgl.getDay();
var tanggal = tgl.getDate();
var bulan = tgl.getMonth();
var tahun = tgl.getFullYear();
tanggallengkap = namahari[hari] + ", " + tanggal + " " + namabulan[bulan] + "
" + tahun;

var popupWindow = null;

function centeredPopup(url, winName, w, h, scroll) {


LeftPosition = (screen.width) ? (screen.width - w) / 2 : 0;
TopPosition = (screen.height) ? (screen.height - h) / 2 : 0;
settings = 'height=' + h + ',width=' + w + ',top=' + TopPosition + ',left=
' + LeftPosition + ',scrollbars=' + scroll + ',resizable'
popupWindow = window.open(url, winName, settings)
}
</script>

<style type="text/css">

</style>
</head>

<body class="skin-black">
<!-- header logo: style can be found in header.less -->
<header class="header">
<a href="index.html" class="logo">
PerpustakaanKU
</a>

<!-- Header Navbar: style can be found in header.less -->


<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<div class="navbar-right">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="messages-menu">
<table width="1000">
<tr>
<td width="200">
<div class="Tanggal">
<h4>
<script language="JavaScript">
document.write(tanggallengkap);
</script>
</div>
</h4>
</td>
<td align="left" width="30"> - </td>
<td align="left" width="620">
<h4>
<div id="output" class="jam"></div>
</h4>
</td>
</tr>
</table>
</li>
<li class="dropdown messages-menu">
<a href="#" data-toggle="modal" data-target="#contact">
<i class="fa fa-envelope"></i>
<!--<span class="label label-success">4</span>-->
</a>
</li>
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="login.html" data-placement="bottom" data-
toggle="tooltip" title="Login">
<i class="fa fa-user"></i>
</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="wrapper row-offcanvas row-offcanvas-left">
<!-- Left side column. contains the logo and sidebar -->

<aside>

<!-- Main content -->


<section class="content">

<!-- Main row -->


<div class="row">
<div class="col-lg-12">
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-
dismiss="alert" aria-hidden="true">&times;</button>
<!--
<marquee behavior="alternate" direction="left" onmouseover="this.stop();" onmouseout="
this.start();">-->
<b>Selamat Datang di PerpustakaanKU, Untuk Login silahkan
klik Icon User atau klik <a href="login.html">disini</a></b>
</div>
</div>

<div class="col-md-8">
<section class="panel">
<header class="panel-heading">
<b>Data Pengunjung Hari Ini</b>
</header>
<div class="panel-body table-responsive">
<?php
$tanggal = date("Y/m/d");
$query1 = "select * from pengunjung where tgl_kunjung=
'$tanggal'";
$tampil = mysqli_query($conn, $query1) or die(mysqli_e
rror($conn));
?>
<table class="table table-hover">
<thead>
<tr>
<th>Nama</th>
<th>Tanggal</th>
<th>Jam Berkunjung </th>
<th>Keperluan</th>
</tr>
</thead>

<?php while ($data = mysqli_fetch_array($tampil))


{ ?>
<tbody>
<tr>
<td><?php echo $data['nama']; ?></td>
<td><?php echo $data['tgl_kunjung']; ?
></td>
<td><?php echo $data['jam_kunjung']; ?
></td>
<td><?php echo $data['perlu1']; ?></td
>
<?php
}
?>

</table>
<hr />
<?php $tampil = mysqli_query($conn, "select * from pen
gunjung where tgl_kunjung='$tanggal'");
$user = mysqli_num_rows($tampil);
?>
<center>
<h4>Jumlah Pengunjung Hari Ini : <?php echo "$user
"; ?> Orang </h4>
</center>
</div>
</section>

</div>
<!--end col-6 -->
<div class="col-md-4">
<section class="panel">
<header class="panel-heading">
<b>Buku Pengunjung</b>
</header>
<div class="panel-body">
<div class="twt-area">
<form class="form-horizontal style-
form" style="margin-top: 20px;" action="insert-
pengunjung.php" method="post" enctype="multipart/form-data" name="form1" id="form1">
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-
label">No </label>
<div class="col-sm-10">
<input name="id" type="text" id="id" c
lass="form-
control" placeholder="Tidak perlu di isi" autofocus="on" readonly="readonly" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-
label">Nama</label>
<div class="col-sm-10">
<input name="nama" type="text" id="nam
a" class="form-control" placeholder="Nama Anda" required />
<!--<span class="help-
block">A block of help text that breaks onto a new line and may extend beyond one line
.</span>-->
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-
label">Jenis kelamin</label>
<div class="col-sm-6">
<select class="form-
control" name="jk" id="jk">
<option> -- Pilih Salah Satu --
</option>
<option value="L"> Laki -
Laki</option>
<option value="P"> Perempuan</opti
on>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-
label">Usia</label>
<div class="col-sm-6">
<input name="kelas" type="text" id="ke
las" class="form-control" placeholder="Usia Anda" required />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-
label">Perlu</label>
<div class="col-sm-10">
<input name="perlu1" type="text" id="p
erlu1" class="form-control" placeholder="Keperluan" required />
<!--<span class="help-
block">A block of help text that breaks onto a new line and may extend beyond one line
.</span>-->
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-
label">Cari?</label>
<div class="col-sm-10">
<input name="cari" type="text" id="car
i" class="form-control" placeholder="Apa yang anda cari.?" required />
<!--<span class="help-
block">A block of help text that breaks onto a new line and may extend beyond one line
.</span>-->
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-
label">Saran</label>
<div class="col-sm-10">
<textarea rows="4" name="saran" id="sa
ran" class="form-
control" placeholder="Saran Anda untuk PerpustakaanKU" cols="25"></textarea>
<!--<span class="help-
block">A block of help text that breaks onto a new line and may extend beyond one line
.</span>-->
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-
label">Tanggal</label>
<div class="col-sm-10">
<input name="tgl_kunjung" type="text"
class="form-
control" id="tgl_kunjung" value="<?php echo "" . date("Y/m/d") . ""; ?>" readonly="rea
donly" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-
label">Jam</label>
<div class="col-sm-10">
<input name="jam_kunjung" type="text"
class="form-
control" id="jam_kunjung" value="<?php echo "" . date("H:i:s") . "" ?>" readonly="read
only" />
</div>
</div>
<div class="form-group" style="margin-
bottom: 20px;">
<label class="col-sm-2 col-sm-2 control-
label"></label>
<div class="col-sm-8">
<input type="submit" value="Simpan" na
me="simpan" class="btn btn-sm btn-primary" />&nbsp;
<a href="#" class="btn btn-sm btn-
danger">Batal </a>
</div>
</div>

</form>
</div>
</div>
</section>
</div>

</div>
</section>

<!-- Data Total Pengunjung -->


<div class="col-md-12">
<section class="panel">
<header class="panel-heading">
<b> Data Akumulasi Pengunjung</b>
</header>
<div class="panel-body table-responsive">
<?php
$query = "select * from pengunjung order by id desc limit 10";
$tampil = mysqli_query($conn, $query) or die(mysqli_error($con
n));
?>
<table class="table table-hover">
<thead>
<tr>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Usia</th>
<th>Tanggal</th>
<th>Jam Berkunjung </th>
<th>Keperluan</th>
<th>Buku Yang di Cari</th>
</tr>
</thead>
<?php while ($data1 = mysqli_fetch_array($tampil)) { ?>
<tbody>
<tr>
<td><?php echo $data1['nama']; ?></td>
<td><?php echo $data1['jk']; ?></td>
<td><?php echo $data1['kelas']; ?></td>
<td><?php echo $data1['tgl_kunjung']; ?></td>
<td><?php echo $data1['jam_kunjung']; ?></td>
<td><?php echo $data1['perlu1']; ?></td>
<td><?php echo $data1['cari']; ?></td>
<?php
}
?>

</table>
<hr />
<?php $tampil1 = mysqli_query($conn, "select * from pengunjung
order by id");
$user1 = mysqli_num_rows($tampil1);
?>
<center>
<h4>Jumlah Total Pengunjung : <?php echo "$user1"; ?> Oran
g </h4>
</center>
</div>
</section>

</div>
</div>
<!-- row end -->
<!-- /.content -->
<div class="footer-main">
Copyright PerpustakaanKU 2021
</div>
</aside><!-- /.right-side -->

</div><!-- ./wrapper -->

<!-- Modal Dialog Contact -->


<div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">PerpustakaanKU</h4>
</div>
<div class="modal-body">
<p> PerpustakaanKu adalah salah satu layanan bagi pengguna untuk d
apat mengakses berbagai buku bacaan yang dan dilakukan kapan saja dan dari mana saja,
dengan menggunakan jaringan internet.</p>
<p> PerpustakaanKu memiliki koleksi buku dalam bentuk format digit
al dan bisa diakses dengan komputer. koleksi bacaan dari PerpustakaanKu dapat diakses
dengan cepat dan mudah lewat jaringan komputer.</p>
<p> PerpustakaanKU bebasis website yang responsif, untuk info, sar
an, maupun kritik bisa menghubungi kami :</p>
<table>
<tr>
<td>E-mail</td>
<td>:</td>
<td><a href="[email protected]">PerpustakaanKU@
gmail.com</a></td>
</tr>
<br />
<tr>
<td>Blog</td>
<td>:</td>
<td><a href="#" target="_blank">www.PerpustakaanKU.com</a>
</td>
</tr>
<br />
<tr>
<td>Website</td>
<td>:</td>
<td><a href="#" target="_blank">www.PerpustakaanKU.com</a>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- end dialog modal -->

<!-- jQuery 2.0.2 -->


<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></sc
ript>
<script src="js/jquery.min.js" type="text/javascript"></script>

<!-- jQuery UI 1.10.3 -->


<script src="js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- daterangepicker -->
<script src="js/plugins/daterangepicker/daterangepicker.js" type="text/javascript"
></script>

<script src="js/plugins/chart.js" type="text/javascript"></script>

<!-- datepicker
<script src="js/plugins/datepicker/bootstrap-
datepicker.js" type="text/javascript"></script>-->
<!-- Bootstrap WYSIHTML5
<script src="js/plugins/bootstrap-wysihtml5/bootstrap3-
wysihtml5.all.min.js" type="text/javascript"></script>-->
<!-- iCheck -->
<script src="js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
<!-- calendar -->
<script src="js/plugins/fullcalendar/fullcalendar.js" type="text/javascript"></scr
ipt>

<!-- Director App -->


<script src="js/Director/app.js" type="text/javascript"></script>

<!-- Director dashboard demo (This is only for demo purposes) -->
<script src="js/Director/dashboard.js" type="text/javascript"></script>

<!-- Director for demo purposes -->


<script type="text/javascript">
$('input').on('ifChecked', function(event) {
// var element = $(this).parent().find('input:checkbox:first');
// element.parent().parent().parent().addClass('highlight');
$(this).parents('li').addClass("task-done");
console.log('ok');
});
$('input').on('ifUnchecked', function(event) {
// var element = $(this).parent().find('input:checkbox:first');
// element.parent().parent().parent().removeClass('highlight');
$(this).parents('li').removeClass("task-done");
console.log('not');
});
</script>
<script>
$('#noti-box').slimScroll({
height: '400px',
size: '5px',
BorderRadius: '5px'
});

$('input[type="checkbox"].flat-grey, input[type="radio"].flat-grey').iCheck({
checkboxClass: 'icheckbox_flat-grey',
radioClass: 'iradio_flat-grey'
});
</script>
<script type="text/javascript">
$(function() {
"use strict";
//BAR CHART
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July
"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
new Chart(document.getElementById("linechart").getContext("2d")).Line(data
, {
responsive: true,
maintainAspectRatio: false,
});

});
// Chart.defaults.global.responsive = true;
</script>
</body>

</html>

Script daftar sebagai pengunjung

<!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">
<!--
The above 3 meta tags *must* come first in the head; any other head content must come
*after* these tags -->
<meta name="description" content="PerpustakaanKU">
<meta name="perpustakaanku" content="PerpustakaanKU">
<link rel="icon" href="../../favicon.ico">

<title>PerpustakaanKU</title>

<!-- Bootstrap core CSS -->


<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="signin.css" rel="stylesheet">
<script src="js/ie-emulation-modes-warning.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

</head>

<body background="img/page-background.png">

<div class="container">

<form class="form-signin" action="insert-anggota.php" method="post">


<center>
<h2 class="form-signin-heading"><span class="glyphicon glyphicon-th-
large"></span> PerpustakaanKU </h2>
</center>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-
user"></i></span>
<input type="text" id="no_induk" name="no_induk" class="form-
control" placeholder="Email" autocomplete="off" autofocus="on" required>
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-
user"></i></span>
<input type="text" id="nama" name="nama" class="form-
control" placeholder="Nama" autocomplete="off" autofocus="on" required>
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-
user"></i></span>
<input type="text" id="username" name="username" class="form-
control" placeholder="Username" autocomplete="off" autofocus="on" required>
</div>
<div class="input-group" style="margin-top: 5px;">
<span class="input-group-addon"><i class="glyphicon glyphicon-
lock"></i></span>
<input type="text" id="password" name="password" class="form-
control" placeholder="Password" autocomplete="off" required>
</div>
<div class="input-group" style="margin-top: 5px;">
<span class="input-group-addon"><i class="glyphicon glyphicon-
user"></i></span>
<select class="form-control" name="jk" id="jk">
<option> -- Pilih Salah Satu --</option>
<option value="P"> Perempuan</option>
<option value="L"> Laki-laki</option>
</select>
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-
user"></i></span>
<input type="text" id="kelas" name="kelas" class="form-
control" placeholder="Usia" autocomplete="off" autofocus="on" required>
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-
user"></i></span>
<input type="text" id="ttl" name="ttl" class="form-
control" placeholder="Tempat, Tanggal Lahir (DD MM YY)" autocomplete="off" autofocus="
on" required>
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-
user"></i></span>
<input type="text" id="alamat" name="alamat" class="form-
control" placeholder="Alamat" autocomplete="off" autofocus="on" required>
</div>
<br />
<input type="submit" value="Daftar" class="btn btn-sm btn-primary" />&nbsp;
<a href="login.html" class="btn btn-sm btn-danger">Batal </a>
<p>Login? <a href="login.html">klik disini</a></p>
</form>

</div> <!-- /container -->

<center>
<h5 class="form-signin">Copyright &copy; <a href="#" data-toggle="modal" data-
target="#contact">PerpustakaanKU</a>
</h5>
</center>

<!-- Modal Dialog Contact -->


<div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Contact Us</h4>
</div>
<div class="modal-body">
<p> PerpustakaanKu adalah salah satu layanan bagi pengguna untuk dapat menga
kses berbagai buku bacaan yang dan
dilakukan kapan saja dan dari mana saja, dengan menggunakan jaringan inter
net.</p>
<p> PerpustakaanKu memiliki koleksi buku dalam bentuk format digital dan bis
a diakses dengan komputer. koleksi
bacaan dari PerpustakaanKu dapat diakses dengan cepat dan mudah lewat jari
ngan komputer.</p>
<p> PerpustakaanKU bebasis website yang responsif, untuk info, saran, maupun
kritik bisa menghubungi kami :
</p>
<table>
<tr>
<td>E-mail</td>
<td>:</td>
<td><a href="[email protected]">[email protected]</a><
/td>
</tr>
<br />
<tr>
<td>Blog</td>
<td>:</td>
<td><a href="#" target="_blank">www.PerpustakaanKU.com</a></td>
</tr>
<br />
<tr>
<td>Website</td>
<td>:</td>
<td><a href="#" target="_blank">www.PerpustakaanKU.com</a></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- end dialog modal -->

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->


<script src="js/ie10-viewport-bug-workaround.js"></script>
</body>

</html>

Script insert pengunjung

<?php
include "conn.php";
$id = $_POST['id'];
$nama = $_POST['nama'];
$jk = $_POST['jk'];
$kelas = $_POST['kelas'];
$perlu1 = $_POST['perlu1'];
$cari = $_POST['cari'];
$saran = $_POST['saran'];
$tgl_kunjung = $_POST['tgl_kunjung'];
$jam_kunjung = $_POST['jam_kunjung'];

//if( empty($nama) || empty($jk) || empty($kelas) || empty($perlu) || empty($cari) ||


empty($saran) ){
//echo "<b>Data Harus Di isi.!!!</b>";
//}else{

$query = mysqli_query($conn, "INSERT INTO pengunjung (id, nama, jk, kelas, perlu1, car
i, saran, tgl_kunjung, jam_kunjung) VALUES ('$id', '$nama', '$jk', '$kelas', '$perlu1'
, '$cari', '$saran', '$tgl_kunjung', '$jam_kunjung')");
if ($query){
echo "<script>alert('Data Berhasil dimasukan!'); window.location = 'index.php'</sc
ript>";
} else {
echo "<script>alert('Data Gagal dimasukan!'); window.location = 'index.php'</scrip
t>";
}
//}

Dibawah ini merupkan script configurasi database dan lampiran database pembuatan aplikasi
perpustakaan :

Script configurasi database :

<?php
$db_name = "db_perpuspro";

$conn = mysqli_connect("localhost", "root", "");


mysqli_select_db($conn, "db_perpuspro");

//fungsi format rupiah


/**function format_rupiah($rp) {
$hasil = "Rp." . number_format($rp, 0, "", ".") . ",00";
return $hasil;
}**/
//fungsi pinjaman buku terlambat
function terlambat($tgl_dateline, $tgl_kembali)
{

$tgl_dateline_pcs = explode("-", $tgl_dateline);


$tgl_dateline_pcs = $tgl_dateline_pcs[2] . "-" . $tgl_dateline_pcs[1] . "-
" . $tgl_dateline_pcs[0];

$tgl_kembali_pcs = explode("-", $tgl_kembali);


$tgl_kembali_pcs = $tgl_kembali_pcs[2] . "-" . $tgl_kembali_pcs[1] . "-
" . $tgl_kembali_pcs[0];

$selisih = strtotime($tgl_kembali_pcs) - strtotime($tgl_dateline_pcs);

$selisih = $selisih / 86400;


if ($selisih >= 1) {
$hasil_tgl = floor($selisih);
} else {
$hasil_tgl = 0;
}
return $hasil_tgl;
}

Lampiran database :

-- phpMyAdmin SQL Dump


-- version 4.7.4
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Feb 02, 2021 at 10:31 AM
-- Server version: 10.1.29-MariaDB
-- PHP Version: 7.1.12

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";


SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;


/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `db_perpuspro`
--

-- --------------------------------------------------------

--
-- Table structure for table `admin`
--

CREATE TABLE `admin` (


`user_id` int(2) NOT NULL,
`username` varchar(150) NOT NULL,
`password` varchar(15) NOT NULL,
`fullname` varchar(30) NOT NULL,
`gambar` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `admin`
--
INSERT INTO `admin` (`user_id`, `username`, `password`, `fullname`, `gambar`) VALUES
(1, 'operator', 'operator', 'Petugas', 'gambar_admin/avatar5.png'),
(2, 'mihrawardana', 'mihrawardana', 'Mihra Wardana', 'gambar_admin/foto.jpg'),
(3, 'admin', 'admin', 'Admin PerpustakaanKU', 'gambar_admin/ssamson.jpg');

-- --------------------------------------------------------

--
-- Table structure for table `data_anggota`
--

CREATE TABLE `data_anggota` (


`id` int(4) NOT NULL,
`no_induk` varchar(100) NOT NULL,
`nama` varchar(150) NOT NULL,
`username` varchar(100) NOT NULL,
`password` varchar(25) NOT NULL,
`jk` varchar(2) NOT NULL,
`kelas` varchar(5) NOT NULL,
`ttl` varchar(100) NOT NULL,
`alamat` varchar(250) NOT NULL,
`foto` varchar(75) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `data_anggota`
--

INSERT INTO `data_anggota` (`id`, `no_induk`, `nama`, `username`, `password`, `jk`, `k


elas`, `ttl`, `alamat`, `foto`) VALUES
(1, '[email protected]', 'Mihra Wardana', 'mihrawardana', 'mihrawardana', 'P', '1
9', 'Kendari, 29 10 2001', 'Ranomeeto', 'gambar_anggota/fotoo.jpg'),
(2, '[email protected]', 'anggota', 'anggota', 'anggota', 'P', '10', 'Konawe, 12 09 19
99', 'Semarang', 'gambar_anggota/IMG-20191104-WA0043.jpg'),
(20, '[email protected]', 'user', 'user', 'user', 'L', '39', 'Mandonga, 28 03 1887', 'Man
donga', ''),
(21, '[email protected]', 'Dwi Hardiansyah', 'awing', '12345678', 'L', '18', 'unaaha,
2001-05-05', 'kendari', '');

-- --------------------------------------------------------

--
-- Table structure for table `data_buku`
--

CREATE TABLE `data_buku` (


`id` int(11) NOT NULL,
`judul` varchar(250) NOT NULL,
`pengarang` varchar(250) NOT NULL,
`th_terbit` varchar(4) NOT NULL,
`penerbit` varchar(250) NOT NULL,
`isbn` varchar(25) NOT NULL,
`kategori` varchar(50) NOT NULL,
`jumlah_buku` int(2) NOT NULL,
`asal` varchar(50) NOT NULL,
`tgl_input` varchar(75) NOT NULL,
`gambar` text NOT NULL,
`link_buku` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `data_buku`
--

INSERT INTO `data_buku` (`id`, `judul`, `pengarang`, `th_terbit`, `penerbit`, `isbn`,


`kategori`, `jumlah_buku`, `asal`, `tgl_input`, `gambar`, `link_buku`) VALUES
(1, 'Pemrograman Web Hosting', 'Mihra Wardana', '2019', '-', '-
', 'Laporan', 61, 'Koleksi PerpustakaanKU', '2021/01/31', 'gambar_buku/ssamson.jpg', '
https://drive.google.com/file/d/1F7IttU4rMNuCvuQlhAGGAGFDQ76LAvLg/view?usp=sharing'),
(8, 'Menjadi Perempuan Terdidik dan Feminisme', 'Dr. Wiyatmi, M.hum', '2013', 'UNY Pre
ss', '978-602-7981-02-
7', 'Novel', 325, 'Koleksi PerpustakaanKU', '2021/02/01', 'gambar_buku/18ea2ec6-87a6-
4af2-ac1f-
be6d89dac9c1.jpg', 'https://drive.google.com/file/d/1FtanKL1PhyffVYM0WHjKRUmy_AWeiEvU/
view?usp=sharing'),
(9, 'Perempuan di titik nol', 'Nawal el -
Saadawi', '1989', 'Yayasan Pustaka Obor Indonesi', '978-979-461-867-
7', 'Novel', 201, 'Koleksi PerpustakaanKU', '2021/02/01', 'gambar_buku/54b21d38-348b-
4a8a-890f-
7eb267d692be.jpg', 'https://drive.google.com/file/d/1Fr5ajsbd_f2Tcg4mzd2gF3PXk5-
30T4q/view?usp=sharing'),
(10, 'Matinya Socrates', 'Plato', '2015', 'Narasi', '(10)979-16844-
8 / (13) 97', 'Kisah', 307, 'Koleksi PerpustakaanKU', '2021/02/01', 'gambar_buku/c7001
ce9-e0dc-4e86-8581-3a814bd91c23.jpg', 'https://drive.google.com/file/d/1CK0jW2bmO03-
JUNRjR4YdCoUuNDGi8hD/view?usp=sharing'),
(11, 'filsafat perselingkuhan ', 'Reza A.A Wattimena', '2010', 'PT Evolireta', '978-
602-8861-76-
2', 'Filsafat', 160, 'Koleksi PerpustakaanKU', '2021/02/01', 'gambar_buku/641d9600-
0a0f-43ab-8d74-
fee32cbe5dd3.jpg', 'https://drive.google.com/file/d/1Cm9dvFPs_xG6R7odecyn35UXY5sKXp0r/
view?usp=sharing'),
(12, 'Perempuan Berbicara Kretek', 'Abmi Handayani, dkk', '2012', 'Indonesia Berdikari
', '978-602-99292-1-
8', 'Novel', 334, 'Koleksi PerpustakaanKU', '2021/02/01', 'gambar_buku/a3ccaab6-0a24-
4c92-bfc0-
0c7e4eaf82ac.jpg', 'https://drive.google.com/file/d/1Fszlh7k9sXO_4RJMOPVbFUU1nCXRdThs/
view?usp=sharing'),
(13, 'Perempuan Yang Dihapus Namanya', 'Avianti Armand', '2017', 'PT Gramedia Pustaka
Utama', '978-602-0337-
135', 'Puisi', 90, 'Koleksi PerpustakaanKU', '2021/02/01', 'gambar_buku/ed7d3a96-54af-
4cc4-8bb3-
af2aa8877b9c.jpg', 'https://drive.google.com/file/d/1D4jjMpjGzXFEbza4Q1m46rDiyuS5MVxz/
view?usp=sharing'),
(14, 'Filsafat Islam Masa Awal', 'Drs.H. Ibrahim, M.Pd', '2016', 'PKBM Rumah Buku Cara
baca Makassar', '978-602-1175-14-
9', 'Filsafat', 159, 'Koleksi PerpustakaanKU', '2021/02/01', 'gambar_buku/89e4850b-
99b0-42bb-bc54-
9014ad7cb2e6.jpg', 'https://drive.google.com/file/d/1CrF90oxr8Hq4pAX54dk8wCyhWd4LNC4W/
view?usp=sharing'),
(15, 'Teologi dan Falsafah Hijab', 'Murtadha Muthahhari', '2011', 'Rausyanfikr Institu
te', '978-602-1602-08-
9', 'Filsafat', 192, 'Koleksi PerpustakaanKU', '2021/02/01', 'gambar_buku/9820c58c-
e249-4c99-a762-
502559f74b46.jpg', 'https://drive.google.com/file/d/1DE4tr2EHw8WyoW_BEVuMcZlQLUFc1Yxg/
view?usp=sharing'),
(16, 'Agama Jawa', 'Abangan, Santri, Priyayi', '2014', 'Komunitas Bambu', '978-602-
9402-12-
4', 'Filsafat', 640, 'Koleksi PerpustakaanKU', '2021/02/01', 'gambar_buku/14e9999b-
4cff-4b9a-a570-
58f4e85c7942.jpg', 'https://drive.google.com/file/d/1DZkte6KAPKwfbx7nkWlgEVrnSxsPQdA7/
view?usp=sharing'),
(17, 'Pulang', 'Leila S. Chudori', '2012', 'PT Gramedia Jakarta', '978-979-91-0515-
8', 'Novel', 476, 'Koleksi PerpustakaanKU', '2021/02/01', 'gambar_buku/fea0ab63-c12a-
4ed1-9223-
0022aedde99b.jpg', 'https://drive.google.com/file/d/1DPuIjYBqeysldiYjw835d6y9qNY4A6r8/
view?usp=sharing'),
(18, 'Teknologi Informasi', 'Abdul Qadil & Terra Ch. Triwahyuni', '2013', 'CV. Andi Of
fset', '-
', 'Komputer', 26, 'Koleksi PerpustakaanKU', '2021/02/01', 'gambar_buku/6c7016ba-fa2a-
4c39-b553-72b6079f5810.jpg', 'https://drive.google.com/file/d/1BIh0-
onGwxuhINjmmfWKa_BJ-bACIUoG/view?usp=sharing'),
(19, 'Petani dan Penguasa', 'Noer Fauzi', '1999', 'INSIST, KPA, bekerja sama dengan Pu
staka Pelajar', '979-9289-04-
1', 'Novel', 330, 'Koleksi PerpustakaanKU', '2021/02/01', 'gambar_buku/88fa64d4-7641-
4f42-a103-
9f7286fe42f8.jpg', 'https://drive.google.com/file/d/1HGTHHlARiDkf7au0K17_rjBimSD2fex7/
view?usp=sharing'),
(20, 'Perempuan Yang Mengantarkan surga', 'Haris Priyatna & Lisdy Rahayu', '2014', 'PT
Mizan Pustaka', '978-602-1337-32-
5', 'Novel', 278, 'Koleksi PerpustakaanKU', '2021/02/01', 'gambar_buku/e6462ec0-ad5b-
48c0-82f8-
1998daee4e57.jpg', 'https://drive.google.com/file/d/1HMRV3bFz019hR7fGsF7A8lE3NJt4V2kc/
view?usp=sharing'),
(21, 'Desain dan Pemrograman Multimedia Pembelajaran Interaktif', 'Wandah Wibawanto, S
.Sn., M.Ds', '2017', 'Penerbit cerdas Ulet Kreatif', '978-602-7534-26-
1', 'Komputer', 195, 'Koleksi PerpustakaanKU', '2021/02/01', 'gambar_buku/37acf42b-
2b3b-4fdb-a8cf-
3a6c608c4d98.jpg', 'https://drive.google.com/file/d/1H8U7pVR7AKaFcjf_mlbWf54_4_MfVOp9/
view?usp=sharing'),
(22, 'Kebenaran yang hilang', 'Farag Fouda', '2007', 'Balai peneltian dan pengembangan
agama jakarta', '-
', 'Politik', 216, 'Koleksi PerpustakaanKU', '2021/02/01', 'gambar_buku/9beecc09-6d1e-
4ed0-b3bb-ff66d34377b5.jpg', 'https://drive.google.com/file/d/1H62-
4ftUeOnopDBXTdEAI3yiBEIEB4g-/view?usp=sharing'),
(23, 'Covid 19 & disrupsi', 'Syafarudi, Erna Rochana, Erizal barnawi, Bagus Wardianto'
, '-', 'Pusaka Media', '978-623-6569-62-
7', 'Umum', 0, 'Koleksi PerpustakaanKU', '2021/02/01', 'gambar_buku/92fd4697-bbf3-
48e0-93dd-181aa1986f88.jpg', 'https://drive.google.com/file/d/1H-
o5FHjnC_CsihxKg76jGyPhKksWmo-K/view?usp=sharing'),
(24, 'Buku Pertama Belajar Pemrograman JAVA', 'Abdul Kadir', '2013', 'Mediakom', '(10)
979-877-368-
3 / (13)', 'Komputer', 444, 'Koleksi PerpustakaanKU', '2021/02/01', 'gambar_buku/IMG_2
0210201_210025.jpg', 'https://drive.google.com/file/d/1BMZgBjcoZlx9zdKvBrqUUxmeSihX4Ax
B/view?usp=sharing');

-- --------------------------------------------------------

--
-- Table structure for table `pengunjung`
--

CREATE TABLE `pengunjung` (


`id` int(8) NOT NULL,
`nama` varchar(255) NOT NULL,
`jk` varchar(2) NOT NULL,
`kelas` varchar(17) NOT NULL,
`perlu1` varchar(15) NOT NULL,
`cari` varchar(255) NOT NULL,
`saran` varchar(255) NOT NULL,
`tgl_kunjung` date NOT NULL,
`jam_kunjung` time NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `pengunjung`
--

INSERT INTO `pengunjung` (`id`, `nama`, `jk`, `kelas`, `perlu1`, `cari`, `saran`, `tgl
_kunjung`, `jam_kunjung`) VALUES
(10, 'Mihra Wardana', 'P', '19', 'Mencari referen', 'Buku yang berkaitan dengan komput
er', 'Agar menyediakan lebih banyak buku referensi, sehingga kami dapat menemukan refe
rensi sesuai kebutuhan kami', '2021-02-01', '14:35:53'),
(11, 'Wardana', 'P', '21', 'Membaca', 'Novel', 'Sebaiknya jumlah referensi lebih diti
ngkatkan', '2021-02-01', '14:43:30');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `admin`
--
ALTER TABLE `admin`
ADD PRIMARY KEY (`user_id`);

--
-- Indexes for table `data_anggota`
--
ALTER TABLE `data_anggota`
ADD PRIMARY KEY (`id`);

--
-- Indexes for table `data_buku`
--
ALTER TABLE `data_buku`
ADD PRIMARY KEY (`id`);

--
-- Indexes for table `pengunjung`
--
ALTER TABLE `pengunjung`
ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `admin`
--
ALTER TABLE `admin`
MODIFY `user_id` int(2) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

--
-- AUTO_INCREMENT for table `data_anggota`
--
ALTER TABLE `data_anggota`
MODIFY `id` int(4) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=22;

--
-- AUTO_INCREMENT for table `data_buku`
--
ALTER TABLE `data_buku`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=25;

--
-- AUTO_INCREMENT for table `pengunjung`
--
ALTER TABLE `pengunjung`
MODIFY `id` int(8) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;


/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
BUKTI PEMBAYARAN SPP BULAN JUNI

You might also like