Showing posts with label SIMRS. Show all posts
Showing posts with label SIMRS. Show all posts

Rekam medis (Medical Record) adalah kumpulan data yang memberikan informasi mengenai pasien secara personal maupun kolektif pada suatu fasilitas kesehatan yang di dalamnya terdapat informasi identitas, catatan pemeriksaan kesehatan, obat yang diresepkan, diagnosa penyakit dan informasi penunjang lain yang memungkinkan menjadi pertimbangan dalam melakukan analisis untuk pasien bersangkutan. Secara kolektif data rekam medis tersebut juga dapat dimanfaatkan oleh tenaga kesehatan, lembaga pemerintah serta manajemen rumah sakit secara internal untuk memutuskan rekomendasi kebijakan di masa yang akan datang.

Konsep rekam medis yang dikemukakan oleh Huffman (1999) pada bukunya yang berjudul Health Information Managment menyatakan bahwa "Rekam medis adalah informasi nyata yang menunjukan kondisi kesehatan pasien sekarang, riwayat penyakit di masa lalu dan catatan pengobatan yang pernah dialami yang didokumentasikan oleh tenaga profesional kesehatan yang secara langsung memberikan pelayanan".

Di Indonesia sendiri, konsep dasar dari rekam medis tersebut dikemukakan salah satunya oleh Ikatan Dokter Indonesia (IDI) pada tahun 2005 yang menyatakan bahwa "Rekam medis adalah rekaman dalam bentuk tulisan atau gambaran aktivitas pelayanan yang diberikan oleh pemberi pelayanan medis atau fasilitas kesehata kepada pasien".

Berdasarkan kedua definisi tersebut di atas sudah sangat jelas mengenai apa itu rekam medis. Pada kesempatan kali ini kita akan membahas bagaimana penerapan rekam medis tersebut pada sistem terkomputerisasi yang sudah berintegrasi dengan sistem informasi manajemen rumah sakit (SIMRS). Hal ini tentunya akan sangat membantu sekali bagi pengembang sistem yang ingin melakukan implementasi dari berbagai konsep rekam medis yang ada sekarang pada aplikasi SIMRS yang akan dibuat.

 

Rekam Medis Elektronik

Rekam medis elektronik adalah penerapan prosedur standar pencatatan informasi dasar dari pasien yang memperoleh pelayanan kesehatan pada media elektronik berbasis data. rekam medis elektronik memanfaatkan teknologi dalam rangka menunjang berbagai pekerjaannya agar lebih efektif dan efisien. Prinsip utama yang sangat penting, yang menjadikan sebuah sistem dapat menerapkan rekam medis elektronik adalah kemudahan akses, keamanan data dan tingkat akurasi yang tinggi.

Rekam medis elektronik biasa, secara definitif sebetulnya berbeda dengan rekam medis yang sudah terintegrasi. Kedua istilah ini merupakan pemahaman yang berbeda, dimana data atau informasi yang disimpan dalam format elektronik belum tentu semuanya dapat divisualisasikan dalam bentuk digital dan diproses oleh sistem. Semua informasi yang membutuhkan alat yang dipengaruhi oleh prinsip elektronika (media elektronik) maka informasi tersebut adalah informasi elektronik. Suatu data elektronik yang belum melalui proses digitalisasi misalnya rekaman suara dalam bentuk pita kaset, file image yang belum terkompresi dalam format text dan informasi lain yang tidak bisa dipergunakan untuk kepentingan analisa pada sistem merupakan data yang belum terintegrasi. Oleh sebab itu rekam medis elektronik hanya bisa efektif apabila ada pengembangan dalam hal teknologi informasi sebagai penunjangnnya.

Hingga saat ini, rekam medis elektronik baik secara regulasi ataupun prosedural belum dapat diterapkan sepenuhnya. Hal ini berkaitan erat dengan kondisi infrasruktur sistem yang belum banyak dikembangkan dan aspek pembiayaan yang sangat mahal. Untuk dapat menunjang semua aktivitas rekam medis yang berbasis kertas sebelumnya, menjadi berbasis elektronik membutuhkan pemerataan infrastruktur, kekuatan finansial dan peningkatan kualitas tenaga perekam medis itu sendiri.

Berdasarkan penjelasan tersebut maka penerapan rekam medis elektronik menghadapi banyak sekali kendala yang tentunya sebanding dengan potensi yang dimilikinya. Rekam medis elektronik berpotensi meningkatkan kualitas pelayanan dan kualitas data informasi sehingga memberi surplus keuantungan yang menjanjikan bagi manajemen rumah sakit. Secara spesifik, rekam medis elektronik tidak hanya mampu memberikan keuntungan secara intangible namun juga memberikan keuntungan nyata (tangible) berupa kemudahan dalam pengambilan keputusan, efisienasi sumber daya manusia, optimalisasi proses operasional, efisiensi pembiayaan dan memberikan ruang lebih luas untuk penyimpanan data dalam jangka waktu yang sangat panjang.

 

Langkah Awal Perancangan Sistem Rekam Medis Elektronik

Berdasarkan jurnal ilmiah The design of electronic medical records for patients of continuous care yang ditulis oleh Xiaolan He, dkk (2021) pada Journal of Infection and Public Health menyatakan bahwa fungsi utama dari sistem rekam medis elektronik meliputi fungsi penciptaan data rekam medis, fungsi data dasar, fungsi pemeliharaan, fungsi penulisan dan pencatatan rekam medis, fungsi pencatatan aktivitas, fungsi pengaturan sistem, dan fungsi pengolahan data rekam medis.

Berdasarkan pendapat tersebut kita bisa memberikan sedikit modifikasi, disesuaikan dengan kondisi dan karakteristik alur kerja di fasilitas kesehatan yang akan dilakukan implementasi rekam medis elektronik tersebut. Kita asumsikan bahwa perancangan ini berlaku untuk integrasi dengan SIMRS. Berikut ini proses utama komponen subsistem rekam medis elektronik terintegrasi:

  • Proses autentikasi pengguna (user) pada aplikasi rekam medis oleh pihak admin aplikasi atau pejabat yang berwenang, memberikan hak dan kewajiban kepada petugas rekam medis untuk mempergunakan sistem sesuai dengan prosedur. Pada proses ini dapat juga disertai dengan pernyataan legalitas dalam bentuk surat pernyataan ataupun perjanjian kontrak secara profesional dengan petugas rekam medis.
  • Proses permulaan atau generalisasi kode rekam medis sebagai standar yang tidak bisa dimanipulasi. Penciptaan nomor rekam medis yang bersifat baku untuk menghindarkan dari terjadinya duplikasi, data yang tertukar, atau kekeliruan pada saat memberikan pelayanan kesehatan.
  • Proses pendataan identitas, tujuan kedatangan pasien atau proses pasien masuk yang dibagi menjadi 2 (dua) tujuan utama yaitu pasien rawat inap dan pasien rawat jalan. Pada proses ini perlu diperhatikan juga mengenai validasi data yang ketat untuk menghindari terjadinya kesalahan pencatatan seperti duplikasi data, kesalahan penulisan istilah.
  • Pembuatan data dasar yang meliputi ketersediaan referensi nama-nama dokter, kategori jenis poliklinik, informasi fasilitas ruang rawat, ketersediaan fasilitas sarana alat penunjang medis, referensi diagnosa ICD, referensi status kepesertaan dalam asuransi kesehatan  dan referensi lain yang juga bisa bersumber dari pihak eksternal rumah sakit.
  • Proses pencatatan kondisi kesehatan pasien, pencatatan history pengobatan, informasi tenaga kesehatan yang memberikan pelayanan, informasi durasi waktu pemberian pelayanan dan pencatatan lainnya yang memungkinkan membantu dalam proses analisis di masa depan.

Rekam Medis Elektronik Pada Sistem Informasi Manajemen Rumah Sakit

Rekam medis elektronik berbasis aplikasi dapat diintegrasikan dengan sistem informasi manajemen rumah sakit (SIMRS) guna mempermudah koordinasi data dan mempercepat proses komunikasi antar bagian. Dalam proses ini, sistem yang dikembangkan harus tetap menjaga aspek kerahasiaan, keamanan dan kemudahan akses data informasi tersebut. Beberapa pengembang aplikasi biasanya menempatkan rekam medis sebagai satu subsistem atau modul terpisah yang suatu waktu dapat dilepas atau di satukan kembali. Hal ini tidak menyalahi aturan namun tentunya sangat tidak efektif apabila diterapkan pada sistem yang dikembangkan secara mandiri.

Penjelasan lebih lengkap mengenai sistem informasi manajemen rumah sakit sudah dibahas pada posting sebelumnya yang berjudul konsep dasar dan pengertian sistem informasi manajemen rumah sakit (SIMRS) atau bisa kunjungi tautan berikut ini https://bit.ly/39AwVG5. Berdasarkan penjelasan tersebut sudah jelas menyatakan bahwa rekam medis elektronik beserta komponen utama di dalamnya merupakan bagian dari sistem itu sendiri agar dapat berfungsi dengan optimal. Integrasi itu sendiri merupakan penyatuan informasi baik yang dikelola terpisah atau bisa juga dilakukan pengelolaan bersama.

Berikut ini adalah bentuk implementasi pada proses integrasi antara rekam medis elektronik dengan sistem informasi manajmen rumah sakit (SIMRS):

  1. Fitur pembacaan nomor NIK dan kartu peserta BPJS sekaligus dengan proses validasi status kepesertaan, validasi ketersediaan data pada kunjungan sebelumnya, catatan hasil pemeriksaan penunjang (laboratorium dan radiologi) dan informasi biaya pengobatan dengan bagian keuangan.
  2. Fitur pelaporan indikator pelayanan berdasarkan periode waktu yang sekaligus disajikan bersebrangan (cross filter) dengan data jenis pelayanan yang diterima, metode pembayaran yang digunakan, pembiayaan, pemeriksaan penunjang dan penggunaan kamar inap.
  3. Fitur assembling antara data rekam medis pasien secara personal atau secara kolektual dengan data diagnosa internal sehingga menghasilkan gambaran kecendrungan jenis penyakit yang diderita pada periode waktu tertentu. Pada fitur ini bisa juga dimanfaatkan untuk melakukan kontrol terhadap kesesuaian antara diagnosa penyakit dengan terapi yang diberikan oleh dokter.

Penutup

Dalam rangka meningkatkan efektifitas dan efisiensi pendataan rekam medis pasien untuk fasilitas kesehatan maka dibutuhkan integrasi antara komponen rekam medis elektronik dengan sistem informasi manajemen rumah sakit (SIMRS). Hal tersebut bertujuan untuk mempermudah manajemen dalam mengkoordinasikan data dan informasi yang ada menjadi proses yang lebih singkat tanpa perlu perulangan. Implementasi rekam medis elektronik bisa dilakukan pada aspek pendataan pasien pada saat pertama kali datang hingga aspek analisa yang menghasilkan informasin lanjutan secara kolektif untuk manajemen rumah sakit.

Sumber Pustaka:

  • Huffman. 1999. Health Information Managment. Phisician Record Company Berwin Lilianis. USA
  • Depkes RI Dirjen Pelayanan Medik. 2005. Pedoman Pengelolaan Rekam Medis Rumah Sakit di Indonesia. Revisi 1. Jakarta: Departemen Kesehatan. RI Direktorat Jendral Pelayanan Medik.
  • Xiaolan He, Lei Cai, Shiju Huang, Xiaoju Ma, Xueling Zhou. 2021. The design of electronic medical records for patients of continuous care. Volume 14 Issue 1 . Journal of Infection and Public Health
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