• On March 31, 2021
User Management Syistem

Manajemen akses user adalah sebuah fitur di dalam sistem yang berguna untuk melakukan pengelolaan hak akses pengguna sebuah aplikasi. Pengelolaan tersebut terdiri dari menambah user baru, update akses, menghapus akses dan membagi setiap tingkatan akses (acces level) ke dalam beberapa bagian. Di dalam Sistem Informasi Manajemen Rumah Sakit (SIMRS) diperlukan juga manajemen akses untuk membagi hak akses tersebut kepada setiap pengguna sesuai dengan tugasnya. 

Sebelum membuat fitur/modul manajemen akses tersebut, ada baiknya pengembang atau programer SIMRS melakukan observasi terlebih dahulu kepada calon user di Rumah Sakit (RS) atau klinik. Fungsinya adalah untuk mengetahui komposisi dari user itu sendiri serta mengetahui hak dan batasan tugas yang dipegang masing-masing orang. Secara umum, sesuai pengalaman saya, pembagian akses untuk SIMRS dilakukan secara horisontal. Artinya tidak ada pembagian akses secara bertingkat (vertikal) karena hampir semua karyawan/user sistem memiliki tingkatan stara hanya saja modul yang dibutuhkan berbeda-beda. Adapun hak akses SIMRS yang saya gunaan adalah sebagai berikut:

  1. Admin/IT RS. Admin atau IT RS adalah bagian yang bertugas melakukan pemantauan stabilitas pengguna, mengelola hak akses itu sendiri, mengelola data referensi non medis serta melakukan pencadangan (backup) database secara berkala atau periodik.
  2. Medrek (Rekam Medis). Medrek (Rekam Medis) adalah bagian yang melakukan pengelolaan data pasien baik pasien baru ataupun pasien lama, unit pelayanan rawat jalan dan rawat inap, mengelola referensi data diagnosa dan menyajikan laporan untuk indikator pelayanan rumah sakit.
  3. Farmasi/Apoteker. Farmasi adalah bagian yang melakukan pengelolaan data yang berhubungan dengan penyediaan referensi obat-obatan, pengelolaan penjualan dan pembelian obat, pengelolaan data alat kesehatan, manajemen stok secara spesifik dan pengelolaan biling obat.
  4. Radiologi. Radiologi adalah bagian yang melakukan pengelolaan data pelayanan tindakan radiolog, pelaporan penggunaan lembar film, indikator kecepatan pelayanan dan informasi hasil analisa radiolog.  
  5. Laboratorium. Laboratorium adalah bagian yang melakukan pengelolaan data  pelayanan tindakan pemeriksaan Lab, pelaporan penggunaan alat-alat, indikator kecepatan pelayanan pemeriksaan, dan informasi analisis hasil pemeriksaan laboratorium.
  6. Administrasi ruangan inap (Adru).  Administrasi ruangan (Adru) adalah bagian yang melakukan pengelolaan data penggunaan ruangan oleh pasien rawat inap. Berdasarkan referensi informasi dari dokter, pada bagian ini juga berhak melakukan pencatatan data informasi kesehatan pasien seperti diagnosa, anamnesa dan resume pulang.
  7. Admisi BPJS. Admisi BPJS adalah bagian yang melakukan pengelolaan data pendaftaran pasien BPJS dari mulai melakukan verifikasi kepesertaan hingga proses pemantauan klaim pembayaran biaya berobat. Bagi rumah sakit atau fasilitas kesehatan yang sudah bekerja sama dengan BPJS maka hal ini sudah tidak asing lagi karena SIMRS adalah satu prasyarat mutlak dalam pengelolaan data yang efektif. 
Setelah kita ketahui jenis masing-masing user akses yang akan digunakan, langkah selanjutnya adalah melakukan implementasi pada fitur manajemen akses di SIMRS. Silahkan baca terlebih dahulu postingan sebelumnya mengenai form login dan validasi akses user untuk SIMRS berbasis web. Kita akan melanjutkan dari tutorial sebelumnya agar pembahasan bisa lebih singkat.
 

1. Modifikasi Halaman index.php

Pertama-tama lakukan penyesuaian pada halaman utama (index.php) agar semua komponen menyatu pada halaman ini. Buka file index.php kemudian ketikan kode berikut ini. 

 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <?php
            include "_Config/Connection.php";
            include "_Config/Session.php";
            include "_Partial/Head.php";
        ?>
    </head>
    <body>
        <?php
            include "_Partial/Navbar.php";
            include "_Partial/Menu.php";
        ?>
        <main id="main" class="main mb-5">
            <?php
                include "_Partial/PageTitle.php";
                include "_Partial/RoutingPage.php";
                include "_Partial/Modal.php";
            ?>
        </main>
        <?php
            include "_Partial/Copyright.php";
            include "_Partial/BackToTop.php";
            include "_Partial/FooterJs.php";
            include "_Partial/RoutingJs.php";
            include "_Partial/RoutingSwal.php";
        ?>
    </body>
</html>


2. Buat Menu Akses

Buat list menu yang apabila dipilih akan mengarahkan pada halaman akses. Buka file _Partial/Menu.php kemudian tambahkan kode berikut: 

 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
<?php
    if(empty($_GET['Page'])){
        $Page="";
    }else{
        $Page=$_GET['Page'];
    }
?>
<aside id="sidebar" class="sidebar menu_background">
    <ul class="sidebar-nav" id="sidebar-nav">
        <li class="nav-item">
            <a class="nav-link <?php if($Page==""){echo "collapsed";} ?>" href="index.php">
                <i class="bi bi-grid"></i>
                <span>Dashboard</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link <?php if($Page=="Akses"){echo "collapsed";} ?>" href="index.php?Page=Akses">
                <i class="bi bi-key"></i>
                <span>Akses</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link <?php if($Page=="Pasien"){echo "collapsed";} ?>" href="index.php?Page=Pasien">
                <i class="bi bi-people"></i>
                <span>Pasien</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link <?php if($Page=="Kunjungan"){echo "collapsed";} ?>" href="index.php?Page=Kunjungan">
                <i class="bi bi-file-earmark-medical-fill"></i>
                <span>Kunjungan</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link <?php if($Page=="Keuangan"){echo "collapsed";} ?>" href="index.php?Page=Keuangan">
                <i class="bi bi-coin"></i>
                <span>Keuangan</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link <?php if($Page=="Apotek"){echo "collapsed";} ?>" href="index.php?Page=Apotek">
                <i class="bi bi-capsule-pill"></i>
                <span>Apotek</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link <?php if($Page=="Laboratorium"){echo "collapsed";} ?>" href="index.php?Page=Laboratorium">
                <i class="bi bi-file-medical"></i>
                <span>Laboratorium</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link <?php if($Page=="Radiologi"){echo "collapsed";} ?>" href="index.php?Page=Radiologi">
                <i class="bi bi-camera"></i>
                <span>Radiologi</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link <?php if($Page=="Hemodialisa"){echo "collapsed";} ?>" href="index.php?Page=Hemodialisa">
                <i class="bi bi-camera"></i>
                <span>Hemodialisa</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link <?php if($Page=="Laporan"){echo "collapsed";} ?>" href="index.php?Page=Laporan">
                <i class="bi bi-file-bar-graph"></i>
                <span>Laporan</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link <?php if($Page=="Pengaturan"){echo "collapsed";} ?>" href="index.php?Page=Pengaturan">
                <i class="bi bi-gear"></i>
                <span>Pengaturan</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#ModalLogout">
                <i class="bi bi-box-arrow-in-left"></i>
                <span>Keluar</span>
            </a>
        </li>
    </ul>
</aside>


3. Ubah File RoutingPage.php Menuju Halaman Akses

Arahkan halaman akses tersebut pada file directory khusus agar kita tidak bingung nantinya ketika melakukan perubahan. Buka file _Partial/RoutingPage.php kemudian ketik code berikut: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<?php
    if(empty($_GET['Page'])){
        include "_Page/Beranda/Beranda.php";
    }else{
        $Page=$_GET['Page'];
        if($Page=="Akses"){
            include "_Page/Akses/Akses.php";
        }
    }
?>


4. Ubah File RoutingJs.php Untuk Jquery Akses

Untuk menangani beberapa event, kita akan menghubungkan halaman dengan file jQuery yang akan mempercepat proses. Buka file _Partial/RoutingJs.php kemudian ketikan kode berikut: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<?php 
    //Routing File JS Berdasarkan Halaman
    if(empty($_GET['Page'])){
        echo '<script type="text/javascript" src="_Page/Beranda/Beranda.js"></script>';
    }else{
        $Page=$_GET['Page'];
        if($Page=="Akses"){
            echo '<script type="text/javascript" src="_Page/Akses/Akses.js"></script>';
        }
    }
?>


5. Ubah File PageTitle.php Untuk Judul Halaman Akses

Untuk menampilkan judul halaman yang relevan, kita juga bisa melakukan pada judul tersebut agar berubah sesuai fitur halaman yang kita pilih. Buka file _Partial/PageTitle.php kemudian ketik kode berikut: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<?php
    if(empty($_GET['Page'])){
        echo '<div class="pagetitle">';
        echo '  <h1><i class="bi bi-grid"></i> Dashboard</h1>';
        echo '</div>';
    }else{
        $Page=$_GET['Page'];
        if($Page=="Akses"){
            echo '<div class="pagetitle">';
            echo '  <h1><i class="bi bi-key"></i> Akses</h1>';
            echo '</div>';
        }
    }
    
?>


6. Ubah File Modal.php Untuk Menampilkan Form Akses

Untuk dapat menggunakan fitur modal dari Bootstrap, maka dibutuhkan file yang melakukan routing untuk file modal yang digunakan agar tidak menumpuk. Buka file _Partial/Modal.php kemudian ketik kode berikut: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<?php
    if(empty($_GET['Page'])){
        include "_Page/Beranda/ModalBeranda.php";
    }else{
        $Page=$_GET['Page'];
        //Nanti Di Routing Fitur Modal atau Popup Di Sini
        if($Page=="Akses"){
            include "_Page/Akses/ModalAkses.php";
        }
    }
    //Modal Global
    include "_Page/Logout/ModalLogout.php";
?>


7. Membuat File Fungsi Untuk menyimpan reusable code

Buat sebuah file pada directory _Config/Function.php kemudian ketikan kode berikut ini: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<?php
    //Memanggil Detail Data
    function getDataDetail($Conn,$NamaDb,$NamaParam,$IdParam,$Kolom){
        $QryParam = mysqli_query($Conn,"SELECT * FROM $NamaDb WHERE $NamaParam='$IdParam'")or die(mysqli_error($Conn));
        $DataParam = mysqli_fetch_array($QryParam);
        if(empty($DataParam[$Kolom])){
            $Response="";
        }else{
            $Response=$DataParam[$Kolom];
        }
        return $Response;
    }
?>


8. Membuat Directory Halaman Utama Akses

Sekarang kita sampai pada tahapan yang sangat penting, yaitu kita akan membuat directory khusus yang menampung semua file komponen dari halaman akses. Silahkan buat sebuah directory pada _Page/Akses kemudian buat sebuah file dengan nama Akses.php. Setelah itu ketikan kode berikut ini: 

 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
<section class="section dashboard mb-4">
    <div class="row">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="accordion accordion-flush mb-3 border-bottom" id="accordionFlushExample">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="flush-headingOne"> 
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse1" aria-expanded="false" aria-controls="flush-collapse1"> 
                                    Filter & Pencarian
                                </button>
                            </h2>
                            <div id="flush-collapse1" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample" style="">
                                <div class="accordion-body">
                                    <form action="javascript:void(0);" id="ProsesBatas" autocomplete="off">
                                        <input type="hidden" name="page" id="page" value="1">
                                        <div class="row mb-3 mt-3">
                                            <div class="col-md-12 mb-2">
                                                <label for="batas">Data</label>
                                                <select name="batas" id="batas" class="form-control">
                                                    <option value="5">5</option>
                                                    <option selected value="10">10</option>
                                                    <option value="25">25</option>
                                                    <option value="50">50</option>
                                                    <option value="100">100</option>
                                                    <option value="250">250</option>
                                                    <option value="500">500</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-12 mb-2">
                                                <label for="ShortBy">Mode Urutan</label>
                                                <select name="ShortBy" id="ShortBy" class="form-control">
                                                    <option value="DESC">Z to A</option>
                                                    <option value="ASC">A to Z</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-12 mb-2">
                                                <label for="OrderBy">Dasar Urutan</label>
                                                <select name="OrderBy" id="OrderBy" class="form-control">
                                                    <option value="">Pilih</option>
                                                    <option value="nama">Nama</option>
                                                    <option value="kontak">Kontak</option>
                                                    <option value="email">Email</option>
                                                    <option value="akses">Akses</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-12 mb-2">
                                                <label for="keyword_by">Dasar Pencarian</label>
                                                <select name="keyword_by" id="keyword_by" class="form-control">
                                                    <option value="">Pilih</option>
                                                    <option value="nama">Nama</option>
                                                    <option value="kontak">Kontak</option>
                                                    <option value="email">Email</option>
                                                    <option value="akses">Akses</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-12 mb-2" id="FormKeyword">
                                                <label for="keyword">Kata Kunci</label>
                                                <input type="text" name="keyword" id="keyword" class="form-control">
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-12 mb-2">
                                                <button type="submit" class="btn btn-md btn-dark btn-block btn-rounded">
                                                    <i class="bi bi-search"></i> Cari
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-12 mb-2">
                            <button type="button" class="btn btn-md btn-primary btn-block btn-rounded" data-bs-toggle="modal" data-bs-target="#ModalTambahAkses">
                                <i class="bi bi-plus"></i> Tambah Akses
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-9" id="MenampilkanTabelAkses">
            
        </div>
    </div>
</section>


Untuk menangani setiap event pada halaman tersebut, kita akan menggunakan jQuery. Silahkan buat sebuah file pada directory yang sama dengan nama Akses.js kemudian ketikan kode berikut ini: 

  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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
//Menampilkan Akses Pertama Kali
$('#MenampilkanTabelAkses').html("Loading...");
var ProsesBatas = $('#ProsesBatas').serialize();
$.ajax({
    type 	    : 'POST',
    url 	    : '_Page/Akses/TabelAkses.php',
    data 	    :  ProsesBatas,
    success     : function(data){
        $('#MenampilkanTabelAkses').html(data);
    }
});
//Ketika Batas Data Diubah
$('#batas').change(function(){
    var ProsesBatas = $('#ProsesBatas').serialize();
    $('#MenampilkanTabelAkses').html('Loading...');
    $.ajax({
        type 	    : 'POST',
        url 	    : '_Page/Akses/TabelAkses.php',
        data 	    :  ProsesBatas,
        success     : function(data){
            $('#MenampilkanTabelAkses').html(data);
        }
    });
});
//Ketika keyword_by
$('#keyword_by').change(function(){
    var keyword_by = $('#keyword_by').val();
    $('#FormKeyword').html('Loading...');
    $.ajax({
        type 	    : 'POST',
        url 	    : '_Page/Akses/FormKeyword.php',
        data 	    :  {keyword_by: keyword_by},
        success     : function(data){
            $('#FormKeyword').html(data);
        }
    });
});
//Ketika Submit Proses Filter Dan Pencarian
$('#ProsesBatas').submit(function(){
    var ProsesBatas = $('#ProsesBatas').serialize();
    $('#MenampilkanTabelAkses').html('Loading...');
    $.ajax({
        type 	    : 'POST',
        url 	    : '_Page/Akses/TabelAkses.php',
        data 	    :  ProsesBatas,
        success     : function(data){
            $('#MenampilkanTabelAkses').html(data);
        }
    });
});
//Ketika Modal Tambah Akses Muncul
$('#ModalTambahAkses').on('show.bs.modal', function (e) {
    $('#NotifikasiTambahAkses').html('<small class="text-primary">Pastkan data akses yang anda input sudah benar</small>');
});
//Kondisi saat tampilkan password
$('.form-check-input').click(function(){
    if($(this).is(':checked')){
        $('#password1').attr('type','text');
        $('#password2').attr('type','text');
    }else{
        $('#password1').attr('type','password');
        $('#password2').attr('type','password');
    }
});
//Ketika Proses Submit Tambah Akses
$('#ProsesTambahAkses').submit(function(){
    $('#NotifikasiTambahAkses').html('<div class="spinner-border text-secondary" role="status"><span class="sr-only"></span></div>');
    var form = $('#ProsesTambahAkses')[0];
    var data = new FormData(form);
    $.ajax({
        type 	    : 'POST',
        url 	    : '_Page/Akses/ProsesTambahAkses.php',
        data 	    :  data,
        cache       : false,
        processData : false,
        contentType : false,
        enctype     : 'multipart/form-data',
        success     : function(data){
            $('#NotifikasiTambahAkses').html(data);
            var NotifikasiTambahAksesBerhasil=$('#NotifikasiTambahAksesBerhasil').html();
            if(NotifikasiTambahAksesBerhasil=="Success"){
                //Menutup Modal
                $('#ModalTambahAkses').modal('hide');
                //Reset Form Tambah
                $('#ProsesTambahAkses')[0].reset();
                $('#password1').attr('type','password');
                $('#password2').attr('type','password');
                //Reset Form Filter Data
                $('#ProsesBatas')[0].reset();
                //Menampilkan Data
                var ProsesBatas = $('#ProsesBatas').serialize();
                $.ajax({
                    type 	    : 'POST',
                    url 	    : '_Page/Akses/TabelAkses.php',
                    data 	    :  ProsesBatas,
                    success     : function(data){
                        $('#MenampilkanTabelAkses').html(data);
                    }
                });
                //Menampilkan Swal
                swal("Berhasil!", "Tambah Akses Berhasil", "success");
            }
        }
    });
});
//Ketika Modal Detail Akses Muncul
$('#ModalDetailAkses').on('show.bs.modal', function (e) {
    var id_akses = $(e.relatedTarget).data('id');
    $('#FormDetailAkses').html("Loading...");
    $.ajax({
        type 	    : 'POST',
        url 	    : '_Page/Akses/FormDetailAkses.php',
        data        : {id_akses: id_akses},
        success     : function(data){
            $('#FormDetailAkses').html(data);
        }
    });
});
//Ketika Modal Edit Akses Muncul
$('#ModalEditAkses').on('show.bs.modal', function (e) {
    var id_akses = $(e.relatedTarget).data('id');
    $('#NotifikasiEditAkses').html('<small class="text-primary">Pastkan data akses yang anda input sudah benar</small>');
    $('#FormEditAkses').html("Loading...");
    $.ajax({
        type 	    : 'POST',
        url 	    : '_Page/Akses/FormEditAkses.php',
        data        : {id_akses: id_akses},
        success     : function(data){
            $('#FormEditAkses').html(data);
        }
    });
});
//Ketika Proses Submit Edit Akses
$('#ProsesEditAkses').submit(function(){
    $('#NotifikasiEditAkses').html('<div class="spinner-border text-secondary" role="status"><span class="sr-only"></span></div>');
    var form = $('#ProsesEditAkses')[0];
    var data = new FormData(form);
    $.ajax({
        type 	    : 'POST',
        url 	    : '_Page/Akses/ProsesEditAkses.php',
        data 	    :  data,
        cache       : false,
        processData : false,
        contentType : false,
        enctype     : 'multipart/form-data',
        success     : function(data){
            $('#NotifikasiEditAkses').html(data);
            var NotifikasiEditAksesBerhasil=$('#NotifikasiEditAksesBerhasil').html();
            if(NotifikasiEditAksesBerhasil=="Success"){
                //Menutup Modal
                $('#ModalEditAkses').modal('hide');
                //Menampilkan Data
                var ProsesBatas = $('#ProsesBatas').serialize();
                $.ajax({
                    type 	    : 'POST',
                    url 	    : '_Page/Akses/TabelAkses.php',
                    data 	    :  ProsesBatas,
                    success     : function(data){
                        $('#MenampilkanTabelAkses').html(data);
                    }
                });
                //Menampilkan Swal
                swal("Berhasil!", "Edit Akses Berhasil", "success");
            }
        }
    });
});
//Ketika Modal Ubah Password Muncul
$('#ModalUbahPassword').on('show.bs.modal', function (e) {
    var id_akses = $(e.relatedTarget).data('id');
    $('#NotifikasiUbahPassword').html('<small class="text-primary">Pastkan password yang anda input sudah benar</small>');
    $('#FormUbahPassword').html("Loading...");
    $.ajax({
        type 	    : 'POST',
        url 	    : '_Page/Akses/FormUbahPassword.php',
        data        : {id_akses: id_akses},
        success     : function(data){
            $('#FormUbahPassword').html(data);
            //Kondisi saat tampilkan password
        $('#TampilkanPassword2').click(function(){
            if($(this).is(':checked')){
                $('#password1_edit').attr('type','text');
                $('#password2_edit').attr('type','text');
            }else{
                $('#password1_edit').attr('type','password');
                $('#password2_edit').attr('type','password');
            }
        });
        }
    });
});
//Ketika Proses Submit Edit Password
$('#ProsesUbahPassword').submit(function(){
    $('#NotifikasiUbahPassword').html('<div class="spinner-border text-secondary" role="status"><span class="sr-only"></span></div>');
    var form = $('#ProsesUbahPassword')[0];
    var data = new FormData(form);
    $.ajax({
        type 	    : 'POST',
        url 	    : '_Page/Akses/ProsesUbahPassword.php',
        data 	    :  data,
        cache       : false,
        processData : false,
        contentType : false,
        enctype     : 'multipart/form-data',
        success     : function(data){
            $('#NotifikasiUbahPassword').html(data);
            var NotifikasiUbahPasswordBerhasil=$('#NotifikasiUbahPasswordBerhasil').html();
            if(NotifikasiUbahPasswordBerhasil=="Success"){
                //Menutup Modal
                $('#ModalUbahPassword').modal('hide');
                //Menampilkan Data
                var ProsesBatas = $('#ProsesBatas').serialize();
                $.ajax({
                    type 	    : 'POST',
                    url 	    : '_Page/Akses/TabelAkses.php',
                    data 	    :  ProsesBatas,
                    success     : function(data){
                        $('#MenampilkanTabelAkses').html(data);
                    }
                });
                //Menampilkan Swal
                swal("Berhasil!", "Ubah Password Berhasil", "success");
            }
        }
    });
});
//Ketika Modal Hapus Akses Muncul
$('#ModalHapusAkses').on('show.bs.modal', function (e) {
    var id_akses = $(e.relatedTarget).data('id');
    $('#NotifikasiHapusAkses').html('<small class="text-primary">Apakah anda yakin akan menghapus data ini?</small>');
    $('#FormHapusAkses').html("Loading...");
    $.ajax({
        type 	    : 'POST',
        url 	    : '_Page/Akses/FormHapusAkses.php',
        data        : {id_akses: id_akses},
        success     : function(data){
            $('#FormHapusAkses').html(data);
        }
    });
});
//Ketika Proses Submit Hapus Akses
$('#ProsesHapusAkses').submit(function(){
    $('#NotifikasiHapusAkses').html('<div class="spinner-border text-secondary" role="status"><span class="sr-only"></span></div>');
    var form = $('#ProsesHapusAkses')[0];
    var data = new FormData(form);
    $.ajax({
        type 	    : 'POST',
        url 	    : '_Page/Akses/ProsesHapusAkses.php',
        data 	    :  data,
        cache       : false,
        processData : false,
        contentType : false,
        enctype     : 'multipart/form-data',
        success     : function(data){
            $('#NotifikasiHapusAkses').html(data);
            var NotifikasiHapusAksesBerhasil=$('#NotifikasiHapusAksesBerhasil').html();
            if(NotifikasiHapusAksesBerhasil=="Success"){
                //Menutup Modal
                $('#ModalHapusAkses').modal('hide');
                //Menampilkan Data
                var ProsesBatas = $('#ProsesBatas').serialize();
                $.ajax({
                    type 	    : 'POST',
                    url 	    : '_Page/Akses/TabelAkses.php',
                    data 	    :  ProsesBatas,
                    success     : function(data){
                        $('#MenampilkanTabelAkses').html(data);
                    }
                });
                //Menampilkan Swal
                swal("Berhasil!", "Hapus Akses Berhasil", "success");
            }
        }
    });
});


9. Membuat Form Modal Akses

Untuk menampilkan form, kita akan buat dalam bentuk popup atau modal bootstrap. Silahkan buat file pada directory _Page/Akses/ModalAkses.php kemudian ketikan kode berikut ini 

  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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<div class="modal fade" id="ModalTambahAkses" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form action="javascript:void(0);" id="ProsesTambahAkses">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-light"><i class="bi bi-person-plus"></i> Tambah Akses</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label for="nama_akses">Nama Lengkap</label>
                        </div>
                        <div class="col-md-8">
                            <input type="text" name="nama_akses" id="nama_akses" class="form-control">
                        </div>
                    </div>
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label for="kontak_akses">Nomor Kontak</label>
                        </div>
                        <div class="col-md-8">
                            <input type="text" name="kontak_akses" id="kontak_akses" class="form-control" placeholder="62">
                            <small>Hanya boleh angka (maksimal 20 karakter)</small>
                        </div>
                    </div>
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label for="email_akses">Email</label>
                        </div>
                        <div class="col-md-8">
                            <input type="text" name="email_akses" id="email_akses" class="form-control" placeholder="alamat-email@domain.com">
                        </div>
                    </div>
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label for="password1">Password</label>
                        </div>
                        <div class="col-md-8">
                            <input type="password" name="password1" id="password1" class="form-control">
                            <small class="credit">Password hanya boleh terdiri dari 6-20 karakter angka dan huruf</small>
                        </div>
                    </div>
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label for="password2">Ulangi Password</label>
                        </div>
                        <div class="col-md-8">
                            <input type="password" name="password2" id="password2" class="form-control">
                            <small class="credit">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="Tampilkan" id="TampilkanPassword" name="TampilkanPassword">
                                    <label class="form-check-label" for="TampilkanPassword">
                                        Tampilkan Password
                                    </label>
                                </div>
                            </small>
                        </div>
                    </div>
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label for="akses">Level Akses</label>
                        </div>
                        <div class="col-md-8">
                            <input type="text" name="akses" id="akses" list="ListAkses" class="form-control">
                            <datalist id="ListAkses">
                                <?php
                                    //Array Data akses
                                    $QryAkses = mysqli_query($Conn, "SELECT DISTINCT akses FROM akses ORDER BY akses ASC");
                                    while ($DataAkses = mysqli_fetch_array($QryAkses)) {
                                        $akses= $DataAkses['akses'];
                                        echo '<option value="'.$akses.'">';
                                    }
                                ?>
                            </datalist>
                            <small>Maksimal Terdiri Dari 20 karakter</small>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 mt-3" id="NotifikasiTambahAkses">
                            <small class="text-primary">Pastkan data akses yang anda input sudah benar</small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-primary">
                    <button type="submit" class="btn btn-success btn-rounded">
                        <i class="bi bi-save"></i> Simpan
                    </button>
                    <button type="button" class="btn btn-dark btn-rounded" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle"></i> Tutup
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="ModalDetailAkses" tabindex="-1">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header bg-info">
                <h5 class="modal-title text-light"><i class="bi bi-person-fill"></i> Detail Akses</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="FormDetailAkses">
            </div>
            <div class="modal-footer bg-info">
                <button type="button" class="btn btn-dark btn-rounded" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle"></i> Tutup
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="ModalEditAkses" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form action="javascript:void(0);" id="ProsesEditAkses">
                <div class="modal-header bg-success">
                    <h5 class="modal-title text-light"><i class="bi bi-pencil"></i> Edit Akses</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="FormEditAkses">
                        <!-- Menampilkan Form Ketika Modal Muncul -->
                    </div>
                    <div class="row">
                        <div class="col-md-12 mt-3" id="NotifikasiEditAkses">
                            <!-- Akan menampilkan notifikasi ketika di proses -->
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-success">
                    <button type="submit" class="btn btn-primary btn-rounded">
                        <i class="bi bi-save"></i> Simpan
                    </button>
                    <button type="button" class="btn btn-dark btn-rounded" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle"></i> Tutup
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="ModalUbahPassword" tabindex="-1">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <form action="javascript:void(0);" id="ProsesUbahPassword">
                <div class="modal-header bg-info">
                    <h5 class="modal-title text-light"><i class="bi bi-key"></i> Ubah Password</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="FormUbahPassword">
                        <!-- Menampilkan Form Ketika Modal Muncul -->
                    </div>
                    <div class="row">
                        <div class="col-md-12 mt-3" id="NotifikasiUbahPassword">
                            <!-- Akan menampilkan notifikasi ketika di proses -->
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-info">
                    <button type="submit" class="btn btn-success btn-rounded">
                        <i class="bi bi-save"></i> Simpan
                    </button>
                    <button type="button" class="btn btn-dark btn-rounded" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle"></i> Tutup
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="ModalHapusAkses" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <form action="javascript:void(0);" id="ProsesHapusAkses">
                <div class="modal-header bg-danger">
                    <h5 class="modal-title text-light"><i class="bi bi-trash"></i> Hapus Akses</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="FormHapusAkses">
                        <!-- Menampilkan Form Ketika Modal Muncul -->
                    </div>
                    <div class="row">
                        <div class="col-md-12 text-center mt-3" id="NotifikasiHapusAkses">
                            <!-- Akan menampilkan notifikasi ketika di proses -->
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-danger">
                    <button type="submit" class="btn btn-success btn-rounded">
                        <i class="bi bi-check"></i> Ya, Hapus
                    </button>
                    <button type="button" class="btn btn-dark btn-rounded" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle"></i> Tidak
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>


10. Membuat Data List Akses

Untuk menampilkan datanya kita akan buat dalam bentuk list, dimana masing-masing list akan menyediakan tombol drop down untuk pilihan opsi. Buat file pada directory _Page/Akses/TabelAkses.php Kemudian ketikan kode berikut ini: 

  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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<?php
    //koneksi dan session
    ini_set("display_errors","off");
    include "../../_Config/Connection.php";
    //kategori
    if(!empty($_POST['kategori'])){
        $kategori=$_POST['kategori'];
    }else{
        $kategori="";
    }
    //Keyword_by
    if(!empty($_POST['keyword_by'])){
        $keyword_by=$_POST['keyword_by'];
    }else{
        $keyword_by="";
    }
    //keyword
    if(!empty($_POST['keyword'])){
        $keyword=$_POST['keyword'];
    }else{
        $keyword="";
    }
    //batas
    if(!empty($_POST['batas'])){
        $batas=$_POST['batas'];
    }else{
        $batas="10";
    }
    //ShortBy
    if(!empty($_POST['ShortBy'])){
        $ShortBy=$_POST['ShortBy'];
    }else{
        $ShortBy="DESC";
    }
    //OrderBy
    if(!empty($_POST['OrderBy'])){
        $OrderBy=$_POST['OrderBy'];
    }else{
        $OrderBy="id_akses";
    }
    //Atur Page
    if(!empty($_POST['page'])){
        $page=$_POST['page'];
        $posisi = ( $page - 1 ) * $batas;
    }else{
        $page="1";
        $posisi = 0;
    }
    if(empty($keyword_by)){
        if(empty($keyword)){
            $jml_data = mysqli_num_rows(mysqli_query($Conn, "SELECT*FROM akses"));
        }else{
            $jml_data = mysqli_num_rows(mysqli_query($Conn, "SELECT*FROM akses WHERE nama like '%$keyword%' OR kontak like '%$keyword%' OR email like '%$keyword%' OR akses like '%$keyword%'"));
        }
    }else{
        if(empty($keyword)){
            $jml_data = mysqli_num_rows(mysqli_query($Conn, "SELECT*FROM akses"));
        }else{
            $jml_data = mysqli_num_rows(mysqli_query($Conn, "SELECT*FROM akses WHERE $keyword_by like '%$keyword%'"));
        }
    }
?>
<script>
    //ketika klik next
    $('#NextPage').click(function() {
        var valueNext=$('#NextPage').val();
        var batas="<?php echo "$batas"; ?>";
        var keyword="<?php echo "$keyword"; ?>";
        var keyword_by="<?php echo "$keyword_by"; ?>";
        var OrderBy="<?php echo "$OrderBy"; ?>";
        var ShortBy="<?php echo "$ShortBy"; ?>";
        $('#MenampilkanTabelAksesFitur').html('Loading...');
        $.ajax({
            url     : "_Page/AksesFitur/TabelFiturAkses.php",
            method  : "POST",
            data 	:  { page: valueNext, batas: batas, keyword: keyword, keyword_by: keyword_by, OrderBy: OrderBy, ShortBy: ShortBy },
            success: function (data) {
                $('#MenampilkanTabelAksesFitur').html(data);
                $('#page').val(valueNext);
            }
        })
    });
    //Ketika klik Previous
    $('#PrevPage').click(function() {
        var ValuePrev = $('#PrevPage').val();
        var batas="<?php echo "$batas"; ?>";
        var keyword="<?php echo "$keyword"; ?>";
        var keyword_by="<?php echo "$keyword_by"; ?>";
        var OrderBy="<?php echo "$OrderBy"; ?>";
        var ShortBy="<?php echo "$ShortBy"; ?>";
        $('#MenampilkanTabelAksesFitur').html('Loading...');
        $.ajax({
            url     : "_Page/AksesFitur/TabelFiturAkses.php",
            method  : "POST",
            data 	:  { page: ValuePrev,batas: batas, keyword: keyword, keyword_by: keyword_by, OrderBy: OrderBy, ShortBy: ShortBy },
            success : function (data) {
                $('#MenampilkanTabelAksesFitur').html(data);
                $('#page').val(ValuePrev);
            }
        })
    });
    <?php 
        $JmlHalaman =ceil($jml_data/$batas); 
        $a=1;
        $b=$JmlHalaman;
        for ( $i =$a; $i<=$b; $i++ ){
    ?>
        //ketika klik page number
        $('#PageNumber<?php echo $i;?>').click(function() {
            var PageNumber = $('#PageNumber<?php echo $i;?>').val();
            var batas="<?php echo "$batas"; ?>";
            var keyword="<?php echo "$keyword"; ?>";
            var keyword_by="<?php echo "$keyword_by"; ?>";
            var OrderBy="<?php echo "$OrderBy"; ?>";
            var ShortBy="<?php echo "$ShortBy"; ?>";
            $('#MenampilkanTabelAksesFitur').html('Loading...');
            $.ajax({
                url     : "_Page/AksesFitur/TabelFiturAkses.php",
                method  : "POST",
                data 	:  { page: PageNumber, batas: batas, keyword: keyword, keyword_by: keyword_by, OrderBy: OrderBy, ShortBy: ShortBy },
                success: function (data) {
                    $('#MenampilkanTabelAksesFitur').html(data);
                    $('#page').val(PageNumber);
                }
            })
        });
    <?php } ?>
</script>
<?php
    if(empty($jml_data)){
        echo '<div class="card">';
        echo '  <div class="card-body text-center text-danger">';
        echo '      Tidak Ada Akun Akses Yang Ditampilkan';
        echo '  </div>';
        echo '</div>';
    }else{
        $no = 1+$posisi;
        //KONDISI PENGATURAN MASING FILTER
        if(empty($keyword_by)){
            if(empty($keyword)){
                $query = mysqli_query($Conn, "SELECT*FROM akses ORDER BY $OrderBy $ShortBy LIMIT $posisi, $batas");
            }else{
                $query = mysqli_query($Conn, "SELECT*FROM akses WHERE nama like '%$keyword%' OR kontak like '%$keyword%' OR email like '%$keyword%' OR akses like '%$keyword%' ORDER BY $OrderBy $ShortBy LIMIT $posisi, $batas");
            }
        }else{
            if(empty($keyword)){
                $query = mysqli_query($Conn, "SELECT*FROM akses ORDER BY $OrderBy $ShortBy LIMIT $posisi, $batas");
            }else{
                $query = mysqli_query($Conn, "SELECT*FROM akses WHERE $keyword_by like '%$keyword%' ORDER BY $OrderBy $ShortBy LIMIT $posisi, $batas");
            }
        }
        while ($data = mysqli_fetch_array($query)) {
            $id_akses=$data['id_akses'];
            $nama=$data['nama'];
            $kontak=$data['kontak'];
            $email= $data['email'];
            $akses= $data['akses'];
?>
            <div class="card">
                <div class="card-body">
                    <div class="filter">
                        <a class="icon" href="#" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi bi-three-dots"></i></a>
                        <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow" style="">
                            <li class="dropdown-header text-start">
                                <h6>Option</h6>
                            </li>
                            <li>
                                <a href="javascript:void(0);" class="dropdown-item"  data-bs-toggle="modal" data-bs-target="#ModalDetailAkses" data-id="<?php echo "$id_akses"; ?>">
                                    <i class="bi bi-info-circle"></i> Detail
                                </a> 
                            </li>
                            <li>
                                <a href="javascript:void(0);" class="dropdown-item"  data-bs-toggle="modal" data-bs-target="#ModalEditAkses" data-id="<?php echo "$id_akses"; ?>">
                                    <i class="bi bi-pencil-square"></i> Edit Akses
                                </a> 
                            </li>
                            <li>
                                <a href="javascript:void(0);" class="dropdown-item"  data-bs-toggle="modal" data-bs-target="#ModalUbahPassword" data-id="<?php echo "$id_akses"; ?>">
                                    <i class="bi bi-key"></i> Ubah Password
                                </a> 
                            </li>
                            <li>
                                <a href="javascript:void(0);" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#ModalHapusAkses" data-id="<?php echo "$id_akses"; ?>">
                                    <i class="bi bi-x"></i> Hapus Akses
                                </a>
                            </li>
                        </ul>
                    </div>
                    <b class="card-title">
                        <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#ModalDetailAkses" data-id="<?php echo "$id_akses"; ?>">
                            <?php echo "$no. $nama" ?>
                        </a>
                    </b>
                    <div class="row">
                        <div class="col-md-12">
                            <ul>
                                <li>
                                    <i class="bi bi-envelope"></i> Email : <code><?php echo "$email" ?></code>
                                </li>
                                <li>
                                    <i class="bi bi-phone"></i> Kontak : <code><?php echo "$kontak" ?></code>
                                </li>
                                <li>
                                    <i class="bi bi-key"></i> Akses : <code><?php echo "$akses" ?></code>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
<?php
            $no++; 
        }
    }
?>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12 text-center">
        <div class="btn-group shadow-0" role="group" aria-label="Basic example">
            <?php
                //Mengatur Halaman
                $JmlHalaman = ceil($jml_data/$batas); 
                $JmlHalaman_real = ceil($jml_data/$batas); 
                $prev=$page-1;
                $next=$page+1;
                if($next>$JmlHalaman){
                    $next=$page;
                }else{
                    $next=$page+1;
                }
                if($prev<"1"){
                    $prev="1";
                }else{
                    $prev=$page-1;
                }
            ?>
            <button class="btn btn-sm btn-outline-info" id="PrevPage" value="<?php echo $prev;?>">
                <span aria-hidden="true">«</span>
            </button>
            <?php 
                //Navigasi nomor
                if($JmlHalaman>3){
                    if($page>=2){
                        $a=$page-1;
                        $b=$page+1;
                        if($JmlHalaman<=$b){
                            $a=$page-1;
                            $b=$JmlHalaman;
                        }
                    }else{
                        $a=1;
                        $b=$page+1;
                        if($JmlHalaman<=$b){
                            $a=1;
                            $b=$JmlHalaman;
                        }
                    }
                }else{
                    $a=1;
                    $b=$JmlHalaman;
                }
                for ( $i =$a; $i<=$b; $i++ ){
                    if($page=="$i"){
                        echo '<button class="btn btn-sm btn-info" id="PageNumber'.$i.'" value="'.$i.'"><span aria-hidden="true">'.$i.'</span></button>';
                    }else{
                        echo '<button class="btn btn-sm btn-outline-info" id="PageNumber'.$i.'" value="'.$i.'"><span aria-hidden="true">'.$i.'</span></button>';
                    }
                }
            ?>
            <button class="btn btn-sm btn-outline-info" id="NextPage" value="<?php echo $next;?>">
                <span aria-hidden="true">»</span>
            </button>
        </div>
    </div>
</div>


11. Membuat Form Detail, Edit, Ubah Password Dan Hapus Akses

Agar setiap form dapat tampil secara dinamis maka kita akan membuatnya satu per satu sesuai dengan kebutuhan


FormDetailAkses.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
<?php
    //Koneksi
    date_default_timezone_set('Asia/Jakarta');
    include "../../_Config/Connection.php";
    include "../../_Config/Function.php";
    //Tangkap id_akses
    if(empty($_POST['id_akses'])){
        echo '<div class="row">';
        echo '  <div class="col-md-12 mb-3">';
        echo '      ID Akses Tidak Boleh Kosong!.';
        echo '  </div>';
        echo '</div>';
    }else{
        $id_akses=$_POST['id_akses'];
        $nama=getDataDetail($Conn,'akses','id_akses',$id_akses,'nama');
        $kontak=getDataDetail($Conn,'akses','id_akses',$id_akses,'kontak');
        $email=getDataDetail($Conn,'akses','id_akses',$id_akses,'email');
        $akses=getDataDetail($Conn,'akses','id_akses',$id_akses,'akses');
?>
    <div class="row mb-3">
        <div class="col-md-4">Nama</div>
        <div class="col-md-8"><code><?php echo "$nama"; ?></code></div>
    </div>
    <div class="row mb-3">
        <div class="col-md-4">Kontak</div>
        <div class="col-md-8"><code><?php echo "$kontak"; ?></code></div>
    </div>
    <div class="row mb-3">
        <div class="col-md-4">Email</div>
        <div class="col-md-8"><code><?php echo "$email"; ?></code></div>
    </div>
    <div class="row mb-3">
        <div class="col-md-4">Akses</div>
        <div class="col-md-8"><code><?php echo "$akses"; ?></code></div>
    </div>
<?php }?>


FormEditAkses.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
<?php
    //Koneksi
    date_default_timezone_set('Asia/Jakarta');
    include "../../_Config/Connection.php";
    include "../../_Config/Function.php";
    //Tangkap id_akses
    if(empty($_POST['id_akses'])){
        echo '<div class="row">';
        echo '  <div class="col-md-12 mb-3">';
        echo '      ID Akses Tidak Boleh Kosong!.';
        echo '  </div>';
        echo '</div>';
    }else{
        $id_akses=$_POST['id_akses'];
        $nama=getDataDetail($Conn,'akses','id_akses',$id_akses,'nama');
        $kontak=getDataDetail($Conn,'akses','id_akses',$id_akses,'kontak');
        $email=getDataDetail($Conn,'akses','id_akses',$id_akses,'email');
        $akses=getDataDetail($Conn,'akses','id_akses',$id_akses,'akses');
?>
    <input type="hidden" name="id_akses" value="<?php echo "$id_akses"; ?>">
    <div class="row mb-4">
        <div class="col-md-4">
            <label for="nama_akses">Nama Lengkap</label>
        </div>
        <div class="col-md-8">
            <input type="text" name="nama_akses" id="nama_akses" class="form-control" value="<?php echo "$nama"; ?>">
        </div>
    </div>
    <div class="row mb-4">
        <div class="col-md-4">
            <label for="kontak_akses">Nomor Kontak</label>
        </div>
        <div class="col-md-8">
            <input type="text" name="kontak_akses" id="kontak_akses" class="form-control" placeholder="62" value="<?php echo "$kontak"; ?>">
            <small>Hanya boleh angka (maksimal 20 karakter)</small>
        </div>
    </div>
    <div class="row mb-4">
        <div class="col-md-4">
            <label for="email_akses">Email</label>
        </div>
        <div class="col-md-8">
            <input type="text" name="email_akses" id="email_akses" class="form-control" placeholder="alamat-email@domain.com" value="<?php echo "$email"; ?>">
        </div>
    </div>
    <div class="row mb-4">
        <div class="col-md-4">
            <label for="akses">Level Akses</label>
        </div>
        <div class="col-md-8">
            <input type="text" name="akses" id="akses" list="ListAkses" class="form-control" value="<?php echo "$akses"; ?>">
            <datalist id="ListAkses">
                <?php
                    //Array Data akses
                    $QryAkses = mysqli_query($Conn, "SELECT DISTINCT akses FROM akses ORDER BY akses ASC");
                    while ($DataAkses = mysqli_fetch_array($QryAkses)) {
                        $akses= $DataAkses['akses'];
                        echo '<option value="'.$akses.'">';
                    }
                ?>
            </datalist>
            <small>Hanya boleh angka (maksimal 20 karakter)</small>
        </div>
    </div>
<?php }?>


FormHapusAkses.php 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
    if(!empty($_POST['id_akses'])){
        $id_akses=$_POST['id_akses'];
?>
    <input type="hidden" name="id_akses" value="<?php echo $id_akses; ?>">
    <div class="row">
            <div class="col col-md-12 text-center">
                <span class="modal-icon display-2-lg">
                    <img src="assets/img/question.gif" width="70%">
                </span>
            </div>
        </div>
    </div>
<?php 
    }else{
        $id_akses="";
        echo '  <div class="row">';
        echo '      <div class="col col-md-12 text-center">';
        echo '          <small class="modal-title my-3">ID Akses Tidak Boleh Kosong!.</small>';
        echo '      </div>';
        echo '  </div>';
    }
?>


FormKeyword.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
<?php
    include "../../_Config/Connection.php";
    if(empty($_POST['keyword_by'])){
        echo '<label for="keyword">Kata Kunci</label>';
        echo '<input type="text" name="keyword" id="keyword" class="form-control">';
    }else{
        $keyword_by=$_POST['keyword_by'];
        if($keyword_by=="akses"){
            echo '<label for="keyword">Kata Kunci</label>';
            echo '<select name="keyword" id="keyword" class="form-control">';
            echo '  <option value="">Pilih</option>';
            //Tampilkan list akses
            $Qry = mysqli_query($Conn, "SELECT DISTINCT akses FROM akses ORDER BY akses ASC");
            while ($Data = mysqli_fetch_array($Qry)) {
                $akses=$Data['akses'];
                echo '<option value="'.$akses.'">'.$akses.'</option>';
            }
            echo '</select>';
        }else{
            echo '<label for="keyword">Kata Kunci</label>';
            echo '<input type="text" name="keyword" id="keyword" class="form-control">';
        }
    }
?>


FormubahPassword.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
<?php
    //Koneksi
    date_default_timezone_set('Asia/Jakarta');
    include "../../_Config/Connection.php";
    include "../../_Config/Session.php";
    //Tangkap id_akses
    if(empty($_POST['id_akses'])){
        echo '  <div class="row">';
        echo '      <div class="col-md-6 mb-3">';
        echo '          ID Akses Tidak Boleh Kosong!';
        echo '      </div>';
        echo '  </div>';
    }else{
        $id_akses=$_POST['id_akses'];
?>
    <input type="hidden" name="id_akses" value="<?php echo "$id_akses"; ?>">
    <div class="row">
        <div class="col-md-12 mt-3">
            <label for="password1">Password Baru</label>
            <input type="password" name="password1" id="password1_edit" class="form-control">
            <small class="credit">Password hanya boleh terdiri dari 6-20 karakter angka dan huruf</small>
        </div>
        <div class="col-md-12 mt-3">
            <label for="password2">Ulangi Password</label>
            <input type="password" name="password2" id="password2_edit" class="form-control">
            <small class="credit">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="Tampilkan" id="TampilkanPassword2" name="TampilkanPassword2">
                    <label class="form-check-label" for="TampilkanPassword2">
                        Tampilkan Password
                    </label>
                </div>
            </small>
        </div>
    </div>
<?php } ?>


12. Membuat File Proses Edit, Ubah password dan Hapus Akses

Sekarang kita buat file prosesnya, buat beberapa file berikut ini pada directory yang sama _Page/Akses


ProsesTambahAkses.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
<?php
    //Koneksi
    include "../../_Config/Connection.php";
    include "../../_Config/Session.php";
    //Validasi nama tidak boleh kosong
    if(empty($_POST['nama_akses'])){
        echo '<small class="text-danger">Nama tidak boleh kosong</small>';
    }else{
        //Validasi kontak tidak boleh kosong
        if(empty($_POST['kontak_akses'])){
            echo '<small class="text-danger">Kontak tidak boleh kosong</small>';
        }else{
            //Validasi email tidak boleh kosong
            if(empty($_POST['email_akses'])){
                echo '<small class="text-danger">Email tidak boleh kosong</small>';
            }else{
                //Validasi Password tidak boleh kosong
                if(empty($_POST['password1'])){
                    echo '<small class="text-danger">Password tidak boleh kosong</small>';
                }else{
                    //Validasi Level Akses Tidak Boleh Kosong
                    if(empty($_POST['akses'])){
                        echo '<small class="text-danger">Level akses tidak boleh kosong</small>';
                    }else{
                        //Validasi kontak tidak boleh lebih dari 20 karakter
                        $JumlahKarakterKontak=strlen($_POST['kontak_akses']);
                        if($JumlahKarakterKontak>20||$JumlahKarakterKontak<6||!preg_match("/^[0-9]*$/", $_POST['kontak_akses'])){
                            echo '<small class="text-danger">Kontak terdiri dari 6-20 karakter numerik</small>';
                        }else{
                            //Validasi kontak tidak boleh duplikat
                            $kontak_akses=$_POST['kontak_akses'];
                            $ValidasiKontakDuplikat=mysqli_num_rows(mysqli_query($Conn, "SELECT*FROM akses WHERE kontak='$kontak_akses'"));
                            if(!empty($ValidasiKontakDuplikat)){
                                echo '<small class="text-danger">Nomor kontak tersebut sudah terdaftar</small>';
                            }else{
                                //Validasi email duplikat
                                $email_akses=$_POST['email_akses'];
                                $ValidasiEmailDuplikat=mysqli_num_rows(mysqli_query($Conn, "SELECT*FROM akses WHERE email='$email_akses'"));
                                if(!empty($ValidasiEmailDuplikat)){
                                    echo '<small class="text-danger">Email sudah digunakan</small>';
                                }else{
                                    if($_POST['password1']!==$_POST['password2']){
                                        echo '<small class="text-danger">Password Tidak sama</small>';
                                    }else{
                                        //Validasi jumlah dan jenis karakter password
                                        $JumlahKarakterPassword=strlen($_POST['password1']);
                                        if($JumlahKarakterPassword>20||$JumlahKarakterPassword<6||!preg_match("/^[a-zA-Z0-9]*$/", $_POST['password1'])){
                                            echo '<small class="text-danger">Password can only have 6-20 numeric characters</small>';
                                        }else{
                                            //Jumlah Karakter Akses Tidak Boleh Lebih Dari 20 Karakter
                                            $JumlahKarakterAkses=strlen($_POST['akses']);
                                            if($JumlahKarakterAkses>20){
                                                echo '<small class="text-danger">Jumlah karakter level akses tidak boleh lebih dari 20 karakter</small>';
                                            }else{
                                                //Variabel Lainnya
                                                $nama_akses=$_POST['nama_akses'];
                                                $kontak_akses=$_POST['kontak_akses'];
                                                $email_akses=$_POST['email_akses'];
                                                $password1=$_POST['password1'];
                                                $password1=MD5($password1);
                                                $akses=$_POST['akses'];
                                                //Simpan Data
                                                $entry="INSERT INTO akses (
                                                    nama,
                                                    kontak,
                                                    email,
                                                    password,
                                                    akses
                                                ) VALUES (
                                                    '$nama_akses',
                                                    '$kontak_akses',
                                                    '$email_akses',
                                                    '$password1',
                                                    '$akses'
                                                )";
                                                $Input=mysqli_query($Conn, $entry);
                                                if($Input){
                                                    echo '<small class="text-success" id="NotifikasiTambahAksesBerhasil">Success</small>';
                                                }else{
                                                    echo '<small class="text-danger">Terjadi kesalahan pada saat menyimpan data</small>';
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
?>


ProsesEditAkses.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
<?php
    //Koneksi
    include "../../_Config/Connection.php";
    include "../../_Config/Session.php";
    include "../../_Config/Function.php";
    //Validasi id_akses tidak boleh kosong
    if(empty($_POST['id_akses'])){
        echo '<small class="text-danger">ID Akses tidak boleh kosong</small>';
    }else{
        //Validasi nama tidak boleh kosong
        if(empty($_POST['nama_akses'])){
            echo '<small class="text-danger">Nama tidak boleh kosong</small>';
        }else{
            //Validasi kontak tidak boleh kosong
            if(empty($_POST['kontak_akses'])){
                echo '<small class="text-danger">Kontak tidak boleh kosong</small>';
            }else{
                //Validasi email tidak boleh kosong
                if(empty($_POST['email_akses'])){
                    echo '<small class="text-danger">Email tidak boleh kosong</small>';
                }else{
                    //Validasi Level Akses Tidak Boleh Kosong
                    if(empty($_POST['akses'])){
                        echo '<small class="text-danger">Level akses tidak boleh kosong</small>';
                    }else{
                        //Variabel Lainnya
                        $id_akses=$_POST['id_akses'];
                        $nama=$_POST['nama_akses'];
                        $kontak=$_POST['kontak_akses'];
                        $email=$_POST['email_akses'];
                        $akses=$_POST['akses'];
                        //Data Lama
                        $KontakLama=getDataDetail($Conn,'akses','id_akses',$id_akses,'kontak');
                        $EmailLama=getDataDetail($Conn,'akses','id_akses',$id_akses,'email');
                        //Validasi kontak tidak boleh lebih dari 20 karakter
                        $JumlahKarakterKontak=strlen($_POST['kontak_akses']);
                        if($JumlahKarakterKontak>20||$JumlahKarakterKontak<6||!preg_match("/^[0-9]*$/", $_POST['kontak_akses'])){
                            echo '<small class="text-danger">Kontak terdiri dari 6-20 karakter numerik</small>';
                        }else{
                            //Jumlah Karakter Akses Tidak Boleh Lebih Dari 20 Karakter
                            $JumlahKarakterAkses=strlen($_POST['akses']);
                            if($JumlahKarakterAkses>20){
                                echo '<small class="text-danger">Jumlah karakter level akses tidak boleh lebih dari 20 karakter</small>';
                            }else{
                                //Validasi Kontak Tidak Boleh Duplikat
                                if($kontak==$KontakLama){
                                    $ValidasiDuplikatKontak="";
                                }else{
                                    $ValidasiDuplikatKontak=getDataDetail($Conn,'akses','kontak',$kontak,'kontak');
                                    if(!empty($ValidasiDuplikatKontak)){
                                        $ValidasiDuplikatKontak="Kontak Yang Anda Gunakan Sudah Ada";
                                    }else{
                                        $ValidasiDuplikatKontak="";
                                    }
                                }
                                //Validasi Email Tidak Boleh Duplikat
                                if($email==$EmailLama){
                                    $ValidasiEmailDuplikat="";
                                }else{
                                    $ValidasiEmailDuplikat=getDataDetail($Conn,'akses','email',$email,'email');
                                    if(!empty($ValidasiEmailDuplikat)){
                                        $ValidasiEmailDuplikat="Email Yang Anda Gunakan Sudah Ada";
                                    }else{
                                        $ValidasiEmailDuplikat="";
                                    }
                                }
                                if(!empty($ValidasiDuplikatKontak)){
                                    echo '<small class="text-danger">'.$ValidasiDuplikatKontak.'</small>';
                                }else{
                                    if(!empty($ValidasiEmailDuplikat)){
                                        echo '<small class="text-danger">'.$ValidasiEmailDuplikat.'</small>';
                                    }else{
                                        //Simpan Data
                                        $UpdateAkses = mysqli_query($Conn,"UPDATE akses SET 
                                            nama='$nama',
                                            email='$email',
                                            kontak='$kontak',
                                            akses='$akses'
                                        WHERE id_akses='$id_akses'") or die(mysqli_error($Conn)); 
                                        if($UpdateAkses){
                                            echo '<small class="text-success" id="NotifikasiEditAksesBerhasil">Success</small>';
                                        }else{
                                            echo '<small class="text-danger">Terjadi kesalahan pada saat menyimpan data</small>';
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
?>


ProsesHapusAkses.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<?php
    //Connection
    include "../../_Config/Connection.php";
    if(empty($_POST['id_akses'])){
        echo '<span class="text-danger">ID Akses tidak dapat ditangkap oleh sistem</span>';
    }else{
        $id_akses=$_POST['id_akses'];
        //Proses hapus data
        $HapusAkses = mysqli_query($Conn, "DELETE FROM akses WHERE id_akses='$id_akses'") or die(mysqli_error($Conn));
        if ($HapusAkses) {
            echo '<span class="text-success" id="NotifikasiHapusAksesBerhasil">Success</span>';
        }else{
            echo '<span class="text-danger">Hapus Data Gagal</span>';
        }
    }
?>


ProsesUbahPassword.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
<?php
    //koneksi dan session
    date_default_timezone_set('Asia/Jakarta');
    include "../../_Config/Connection.php";
    //Validasi Form Data
    if(empty($_POST['id_akses'])){
        echo '<span class="text-danger">Sistem Tidak Bisa Menangkap ID akses</span>';
    }else{
        if(empty($_POST['password1'])){
            echo '<span class="text-danger">Password Tidak Boleh Kosong</span>';
        }else{
            if(empty($_POST['password2'])){
                echo '<span class="text-danger">Password Tidak Boleh Kosong</span>';
            }else{
                $id_akses=$_POST['id_akses'];
                $password1=$_POST['password1'];
                $password2=$_POST['password2'];
                $JumlahPassword1 = strlen($password1);
                $JumlahPassword2 = strlen($password2);
                if($JumlahPassword1<5||$JumlahPassword1>50){
                    echo '<span class="text-danger">Password Harus 6-20 karakter</span>';
                }else{
                    if($JumlahPassword2<5||$JumlahPassword2>50){
                        echo '<span class="text-danger">Password Harus 6-20 karakter</span>';
                    }else{
                        $PasswordEnkripsi=MD5($password1);
                        $UpdatePassword = mysqli_query($Conn,"UPDATE akses SET 
                            password='$PasswordEnkripsi'
                        WHERE id_akses='$id_akses'") or die(mysqli_error($Conn)); 
                        if($UpdatePassword){
                            echo '<span class="text-success" id="NotifikasiUbahPasswordBerhasil">Success</span>';
                        }else{
                            echo '<span class="text-danger">Update Password Gagal!</span>';
                        }
                    }
                }
            }
        }
    }
?>


13. Kesimpulan

Apabila mengikuti langkah-langkah di atas maka selanjutnya bisa dicoba untuk masing-masing proses. Dimulai denganb tambah data akses, edit data askes, ubah password, hapus akses dan menampilkan detail akses. Tampilan program lebih jelas dapat dilihat pada vidio berikut ini 


 

Untuk yang membutuhkan link download via github : https://github.com/dhiforester/SimrsTutorial.git