Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Dashboard Admin Perpustakaan dengan PHP dan MySQL Beserta Login

Dashboard Admin Perpustakaan dengan PHP dan MySQL Beserta Login

Posting Komentar


4 JULI 2020 ~ SITI HARTATI

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?

  • Folder dengan nama “UAS” (localdisk C:/xampp/htdocs/UAS)
  • Kemudian download template binary-admin disini
  • Xampp, teks editor dan browser

Langkah Awal Pembuatan

Langkah 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

1. Login

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<?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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?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 Database

Untuk mengolah data kita harus melakukan koneksi ke database dengan membuat file dengan nama koneksi.php

Iklan

Source Code Koneksi.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?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. Index

Index berisi template dan pemanggilan pages.

Source Code index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<?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/Dashboard

Dashboard disini berisi jumlah anggota, buku, transaksi dan user beserta uaian singkat mengenai One-IT Library.

Source Code home.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<?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"; ?>


Posting Komentar untuk " Dashboard Admin Perpustakaan dengan PHP dan MySQL Beserta Login"