Showing posts with label Sistem Informasi. Show all posts
Showing posts with label Sistem Informasi. Show all posts
Konsep Dasar Technique for Order Preference by Similarity to Ideal Solution (TOPSIS)
Technique for Order Preference by Similarity to Ideal Solution (TOPSIS) adalah salah satu metode pengambilan keputusan multikriteria yang pertama kali diperkenalkan oleh Yoon dan Hwang (1981). TOPSIS menggunakan prinsip bahwa alternatif yang terpilih harus mempunyai jarak terdekat dari solusi ideal positif dan terjauh dari solusi ideal negatif, yang bertujuan untuk menentukan kedekatan relatif dari suatu alternatif dengan solusi optimal. Solusi ideal positif didefinisikan sebagai jumlah dari seluruh nilai terbaik yang dapat dicapai untuk setiap atribut, sedangkan solusi negatif ideal terdiri dari seluruh nilai terburuk yang dicapai untuk setiap atribut.
Pemahaman Tentang Technique for Order Preference by Similarity to Ideal Solution (TOPSIS) Sebagai Sistem Pendukung Keputusan
Technique for Order Preference by Similarity to Ideal Solution (TOPSIS) merupakan salah satu teknik yang bisa diterapkan dalam sistem pendukung keputusan. Sistem Pendukung Keputusan atau Decision Support System (DSS) secara umum didefinisikan sebagai sebuah sistem yang mampu memberikan kemampuan pemecahan masalah maupun kemampuan pengkomunikasian untuk masalah semi terstruktur (Whetyningtyas, 2011). Pengertian Decision Support System menurut (Jogiyanto, 2001) adalah suatu sistem informasi untuk membantu manajer level menengah untuk proses pengambilan keputusan setengah terstruktur (semi structured) supaya lebih efektif dengan menggunakan model-model analitis dan data yang tersedia.
Istilah Sistem Pendukung Keputusan (SPK) mengacu pada suatu sistem yang memanfaatkan dukungan komputer dalam proses pengambilan keputusan. Untuk memberikan pengertian yang lebih maka ada beberapa definisi mengenai SPK oleh beberapa ahli (Hermawan, 2005). Menurut Dewanto (2015) sistem pendukung keputusan (SPK) merupakan suatu sistem yang berbasis komputer yang ditunjukan untuk membantu pengambil keputusan dengan memanfaatkan data dan model tertentu untuk memecahkan berbagai persoalan yang tidak terstruktur.
Sistem pendukung keputusan digunakan untuk mendeskripsikan sistem yang didesain untuk membantu manajer memecahkan masalah tertentu. Sistem pendukung keputusan (SPK) adalah bagian dari sistem informasi berbasis komputer termasuk sistem berbasis pengetahuan untuk mendukung pengambilan keputusan dalam suatu organisasi maupun perusahaan (Dewanto, 2015)
Dari beberapa para ahli di atas, dapat disimpulkan bahwa sistem pendukung keputusan merupakan suatu sistem informasi berbasis komputer yang dibuat untuk membantu memecahkan suatu masalah dalam pengambilan keputusan berupa alternatif pilihan menggunakan pemodelan analisis dan data yang ada.
Penerapan Technique for Order Preference by Similarity to Ideal Solution (TOPSIS)
Penerapan TOPSIS membantu perusahaan untuk memanfaatkan pendekatan analisis dan pengambilan keputusan yang lebih sistematis dan terstruktur. Dalam konteks bisnis yang semakin kompleks dan global, alat ini dapat memberikan nilai tambah dalam mencapai tujuan strategis dan menghadapi tantangan yang berkembang dengan cepat.
Penerapan Technique for Order Preference by Similarity to Ideal Solution (TOPSIS) dalam dunia bisnis dan globalisasi memberikan berbagai manfaat, terutama dalam proses pengambilan keputusan. Berikut adalah beberapa manfaat utama dari penerapan TOPSIS dalam konteks bisnis dan globalisasi:
  1. TOPSIS membantu dalam memilih alternatif terbaik dari sejumlah opsi yang tersedia. Dalam konteks bisnis, ini dapat diterapkan pada pemilihan vendor, pemilihan proyek investasi, atau evaluasi strategi bisnis.
  2. TOPSIS dapat digunakan untuk menganalisis kinerja relatif dari setiap alternatif dalam hubungannya dengan kriteria yang ditetapkan. Ini membantu dalam evaluasi kualitas produk, layanan, atau keputusan bisnis.
  3. Dengan mempertimbangkan kriteria risiko dan keamanan, TOPSIS dapat membantu dalam pengambilan keputusan yang lebih informasional dan dapat mengurangi risiko yang terkait dengan keputusan bisnis.
  4. Dengan memilih alternatif yang paling mendekati solusi ideal, TOPSIS dapat meningkatkan efisiensi dan produktivitas dalam operasi bisnis. Misalnya, dalam pemilihan strategi operasional atau investasi dalam teknologi baru.
  5. Dalam lingkungan bisnis yang semakin terglobalisasi, TOPSIS dapat digunakan untuk memilih strategi ekspansi pasar, pemilihan mitra bisnis internasional, atau evaluasi proyek lintas batas.
  6. TOPSIS membantu dalam mengevaluasi proyek dan investasi dengan mempertimbangkan berbagai aspek yang relevan. Ini dapat membantu perusahaan dalam memilih proyek yang paling sesuai dengan tujuan bisnis dan kebijakan perusahaan.
  7. Penerapan TOPSIS memastikan bahwa keputusan bisnis didasarkan pada data dan analisis yang lebih objektif. Ini membantu dalam meningkatkan keputusan yang lebih baik dan mengurangi potensi keputusan yang bersifat subyektif.
Definisi Technique for Order Preference by Similarity to Ideal Solution (TOPSIS) Menurut Para Ahli
Technique for Order Preference by Similarity to Ideal Solution (TOPSIS) adalah salah satu metode dari model keputusan MADM. Metode TOPSIS menggunakan konsep dimana alternatif terpilih yang terbaik tidak hanya memiliki jarak terpendek dari solusi ideal positif, tetapi juga memiliki jarak terpanjang dari solusi ideal negatif (Elyza Gustru Wahyuni, 2017).
Menurut Dicky Nofriansyah (2017) menyatakan bahwa, TOPSIS merupakan salah satu metode yang digemari oleh peneliti di dalam merancang sebuah sistem pendukung keputusan, selain konsepnya sederhana tetapi kompleksitas dalam pemecahan masalah baik itu ditandai dengan konsep penyelesaian metode ini yaitu dengan memilih alternatif terbaik yang tidak hanya memiliki jarak terpendek dari solusi ideal positif tetapi juga memiliki jarak terpanjang dari solusi ideal negatif.
Menurut Simanjorang (2019) Metode TOPSIS adalah salahsatu metode yang bisa membantu proses pengambilan keputusan yang optimal untuk menyelesaikan masalah keputusan secara praktis. Hal ini disebabkan karena konsepnya sederhana dan mudah dipahami. Sejalan dengan pendapat Marlina, Yusnaeni, dan Indriyani (2017) TOPSIS merupakan suatu metode sistem pendukung keputusan (DSS) yang digunakan untuk memilih peringkat terbaik dengan nilai bobot tertinggi pada alternative yang dinilai. Penilaian dilakukan dengan menilai berdasarkan bobot nilai dari kriteria dan alternatif. Metode TOPSIS dapat menyelesaikan pengambilan keputusan secara praktis, karena konsepnya sederhana dan mudah dipahami, komputasinya efisien, serta memiliki kemampuan mengukur kinerja relatif dari alternatif-alternatif keputusan (Parhusip et al., 2011). Metode ini banyak digunakan untuk menyelesaikan pengambilan keputusan secara praktis karena konsepnya yang sederhana dan mudah dipahami, serta komputasinya efisien dan memiliki kemampuan mengukur kinerja relatif dari alternatif-alternatif keputusan.
Tujuan Technique for Order Preference by Similarity to Ideal Solution (TOPSIS)
TOPSIS bertujuan untuk menentukan solusi ideal positif dan solusi ideal negatif. Solusi ideal positif memaksimalkan kriteria manfaat dan meminimalkan kriteria biaya, sedangkan solusi ideal negatif memaksimalkan kriteria biaya dan meminimalkan kriteria manfaat (Fan dan Cheng, 2009). Kriteria manfaat merupakan kriteria dimana ketika nilai kriteria tersebutsemakin besar maka semakin layak pula untukdipilih. Sedangkan kriteriabiaya merupakan kebalikan dari kriteria manfaat, semakin kecil nilai darikriteria tersebut maka akan semakin layak untuk dipilih. Dalam metode TOPSIS, alternatif yang optimal adalah yang paling dekat dengan solusi idealpositif dan paling jauh dari solusi ideal negatif.
Kelemahan Dan Kelebihan Technique for Order Preference by Similarity to Ideal Solution (TOPSIS)
Dalam metode TOPSIS, dipertimbangkan adanya solusi ideal positif dan solusi ideal negatif. Solusi ideal positif merupakan nilai terbaik dari semua kriteria sedangkan solusi ideal negatif adalah nilai terburuk untuk tiap kriteria dari alternatif yang ada. Dengan adanya kedua solusi ini maka alternatif yang dipilih dalam metode TOPSIS merupakan alternatif yang memiliki jarak terdekat dengan solusi ideal positif dan jarak terjauh dengan solusi ideal negatif. Karena itulah maka dapat disimpulkan beberapa kelemahan dan kelebihan metode TOPSIS.
Kelemahan TOPSIS
  1. Belum adanya penentuan bobot prioritas yang menjadi prioritas hitungan terhadap kriteria, yang berguna untuk meningkatkan validitas nilai bobot perhitungan kriteria. Maka dengan alasan ini, metode ini dapat dikombinasikan misalnya dengan metode AHP agar menghasilkan output atau keputusan yang lebih maksimal
  2. Belum adanya bentuk linguistik untuk penilaian alternatif terhadap kriteria, biasanya bentuk linguistik ini diinterpretasikan dalam sebuah bilangan fuzzy
  3. Belum adanya mediator seperti hirarki jika diproses secara mandiri maka dalam ketepatan pengambilan keputusan cenderung belum menghasilkan keputusan yang sempurna
  4. Metode TOPSIS ini dapat digunakan dalam menentukan perangkingan alternatif dengan memperhitungkan solusi ideal dari suatu masalah dan penentuan bobot setiap kriteria. Namun, kurang baik jika digunakan dalam mendapatkan bobot yang memperhitungkan hubungan antara kriteria. Walaupun dapat dilakukan dengan pairwase comparison, tetapi membutuhkan matriks dan perhitungan yang lebih rumit. Oleh karena itu, dilakukan penggabungan dengan metode lain seperti ANP (Analytic Network Process) dalam mengatasi masalah pembobotan tersebut.
  5. Pada proses yang menggunakan metode TOPSIS, perangkingan dan pembobotan kriteria adalah memiliki nilai yang telah pasti. Padahal, dalam aplikasinya di kehidupan nyata, terdapat informasi yang tidak lengkap atau informasi yang dibutuhkan tidak tersedia. Contoh penyebab informasi yang tidak lengkap tersebut adalah karena adanya penilaian dari manusia yang seringkali bersifat tidak pasti/kabur (fuzzy) dan tidak dapat mengestimasikan perangkingan dalam data numerik yang pasti. Ketidakpastian ini merupakan sesuatu yang tidak dapat diatasi jika menggunakan metode TOPSIS, kecuali jika dilakukan perhitungan algoritma lebih lanjut dalam perumusan metode TOPSIS tersebut.
  6. Metode TOPSIS menentukan solusi berdasarkan jarak terpendek menuju solusi ideal dan jarak terbesar dari solusi negatif yang ideal. Namun, metode ini tidak mempertimbangkan kepentingan relatif (relative importance) dari masing-masing jarak tersebut.
  7. Pada metode TOPSIS, seringkali digunakan asumsi pada tingkat kepentingan relatif masing-masing respon dan digunakan kombinasi dengan metode lain untuk menyelesaikan asumsi tersebut. Contohnya adalah dengan menggunakan metode AHP (Analytical Hierarchy Process) atau ANP (Analytic Network Process) untuk memperoleh nilai bobot yang mewakili tingkat kepentingan relatif masing-masing kriteria.
  8. Pada metode TOPSIS, alternatif dengan ranking tertinggi merupakan solusi yang terbaik, namun belum tentu ranking tertinggi tersebut adalah yang terdekat dari solusi ideal. Sehingga perlu dilakukan perhitungan lagi untuk memastikannya.
Kelebihan TOPSIS
  1. Konsepnya sederhana dan mudah dipahami, kesederhanaan ini dilihat dari alur proses metode TOPSIS yang tidak begitu rumit. Karena menggunakan indikator kriteria dan variabel alternatif sebagai pembantu untuk menentukan keputusan
  2. Komputasinya efisien, perhitungan komputasinya lebih efisien dan dan cepat
  3. Mampu dijadikan sebagai pengukur kinerja alternatif dan juga alternatif keputusan dalam sebuah bentuk output komputasi yang sederhana.
  4. Dapat digunakan sebagai metode pengambilan keputusan yang lebih cepat.
Tahapan Perhitungan Technique for Order Preference by Similarity to Ideal Solution (TOPSIS)
Algoritma Penyelesaian masalah MADM dengan TOPSIS (Kusumadewi, S. Hartati, S. Harjoko, A. Wardoyo, 2004):
  • Menentukan alternatif yang pada penelitian ini adalah merek dan model mobil bekas kemudian menormalisasi setiap nilai alternatif dan matrix ternormalisasi terbobot.
  • Membuat rating pada masing-masing alternatif pada masing-masing kriteria dengan rumus sebagai berikut: 
  •  
  • Keterangan:
    ij    = Nilai Normalisasi Kriteria ke i.
    Xij    = Hasil pertimbangan berdasarkan kriteria ke i.
     
  • Membuat matrix normalisasi terbobot.
  • Menentukan nilai normalisasi maksimum dan minimum.
  • Menghitung Sparasi Ideal Positif dengan menggunakan persamaan berikut ini:
  •  
  • Keterangan:
    Di+     = Sparasi ideal positif
    yi+     = Nilai Normaliasasi Maksimum
    yij    = Normalisasi Terbobot
     
  • Hasil perhitungan untuk nilai normalisasi maksimum dikurangi normalisasi terbobot

  • Hasil perhitungan untuk nilai normalisasi maksimum dikurangi normalisasi terbobot pangkat 2 (dua) dengan persamaan

  • Hasil perhitungan untuk nilai akar dari jumlah akumulasi normalisasi maksimum dikurangi normalisasi terbobot pangkat 2 (dua) pada persamaan

  • Menghitung Sparasi Ideal negatif dengan menggunakan persamaan berikut ini:
  •  
  • Keterangan:
    Di-     = Sparasi ideal negatif
    yi-     = Nilai Normaliasasi minimum
    yij    = Normalisasi Terbobot
  • Hasil perhitungan untuk nilai normalisasi terbobot dikurangi normalisasi minimum

  • Hasil perhitungan untuk nilai normalisasi minimum dikurangi normalisasi terbobot pangkat 2 (dua) dengan persamaan

  • Hasil perhitungan untuk nilai akar dari jumlah akumulasi normalisasi minimum dikurangi normalisasi terbobot pangkat 2 (dua) pada persamaan

  • Menghitung nilai preferensi dari setiap alternatif berdasarkan solusi ideal positif dan solusi ideal negative.
  • Data solusi ideal positif dan negative di atas kemudian dihitung menggunakan persamaan berikut ini:
  •  
  • Keterangan:
    Vi    = Nilai preferensi untuk alternatif ke i
    D-    = Solusi Ideal negative
    D+    = Solusi Ideal positif
     
  • Melakukan perankingan berdasarkan hasil perhitungan nilai preferensi.
Penutup
TOPSIS merupakan suatu metode sistem pendukung keputusan (DSS) yang digunakan untuk memilih peringkat terbaik dengan nilai bobot tertinggi pada alternative yang dinilai. Penilaian dilakukan dengan menilai berdasarkan bobot nilai dari kriteria dan alternatif. Namun, metode ini tidak mempertimbangkan kepentingan relatif (relative importance) dari masing-masing jarak tersebut. Oleh sebab itu solusi dari permasalahan kekurangan metode TOPSIS dapat ditutupi dengan batasan yang jelas dalam menentukan jarak penilaian pada masing-masing kriteria yang digunakan. Pada metode TOPSIS, seringkali digunakan asumsi pada tingkat kepentingan relatif masing-masing respon dan digunakan kombinasi dengan metode lain untuk menyelesaikan asumsi tersebut. Contohnya adalah dengan menggunakan metode AHP (Analytical Hierarchy Process) atau ANP (Analytic Network Process) untuk memperoleh nilai bobot yang mewakili tingkat kepentingan relatif masing-masing kriteria.
Sumber Pustaka
  1. Amida, S. N., & Kristiana, T. (2019). Sistem Pendukung Keputusan Penilaian Kinerja Pegawai Dengan Menggunakan Metode Topsis. JSAI (Journal Scientific and Applied Informatics), 2(3), 193–201. https://doi.org/10.36085/jsai.v2i3.415
  2. Dicky Nofriansyah, S. D. (2017). Multi Criteria Decision Making (MCDM): pada sistem pendukung keputusan. Deepublish.
  3. Elyza Gustru Wahyuni, A. T. A. (2017). Sistem Pendukung Keputusan Penerimaan Pegawai Dengan Metode Topsis. Jurnal Sains, Teknologi Dan Industri, 14(2).
  4. Fan, C. K., & Cheng, S. W. (2009). Using Analytic Hierarchy Process Method and Technique for Order Preference by Similarity to Ideal Solution to Evaluate Curriculum in Department of Risk Management and Insurance. 19(1), 1–8.
  5. Hakim, L. (2019). Sistem Pendukung Keputusan Penilaian Kinerja Karyawan Menggunakan Metode Topsis Pada PT.Karunia Berkat Alam Demak.
  6. Hermawan, J. (2005). Membangun Decision Support System. Andi.
  7. Marlina, M., Yusnaeni, W., & Indriyani, N. (2017). Sistem Pendukung Keputusan Pemilihan Siswa Yang Berhak Mendapatkan Beasiswa Dengan Metode Topsis. Jurnal Techno Nusa Mandiri, 14(2), 147–152.
  8. Mulyanto, A. (2009). Sistem Informasi Konsep dan Aplikasi. Pustaka Pelajar.
  9. Nurhayati, S. (2017). Sistem Penilaian Kinerja Karyawan Menggunakan Metode TOPSIS pada PT XYZ. Prosiding Saintiks FTIK UNIKOM, 2, 25–28.
  10. Palasara, N., & Baidawi, T. (2018). Penerapan Sistem Pendukung Keputusan Pada Penilaian Karyawan Menggunakan Metode Technique for Order Preference by Similarity to Ideal Solution ( TOPSIS ).
  11. Pressman, R. (2001). Software Engineering: A Practitioner’s Approach, Fifth Ed. McGraw-Hill Book Company.
  12. Putra, K. D., Lina, S., Sitio, M., Studi, P., Informatika, T., Teknik, F., Pamulang, U., Selatan-indonesia, T., & Karyawan, P. K. (2021). Perancangan Sistem Pendukung Berbasis Desktop Menggunakan Kombinasi Metode SMART-TOPSIS. 5(3), 240–249.
  13. Rahman, A. K., & Suwartane, I. G. A. (2020). Rancang Bangun Sistem Pendukung Keputusan Penilaian Karyawan Terbaik Dengan Metode Tehcnique For Order Preference By Similarity To Ideal Solution (TOPSIS) Berbasis Web. 4(1).
  14. Sachdeva. (2009). Multi-Factor Mode Critically Analysis Using TOPSIS. International Journal of Industrial Enineering, 5(8).
  15. Simanjorang, R. M. (2019). Sistem Pendukung Keputusan Pemilihan Dosen Terbaik dengan menggunakan Metode TOPSIS (Studi Kasus: STMIK Pelita Nusantara Medan). Jurnal STMIK Pelita Nusantara Medan, 4(1), 10–15.
  16. Whetyningtyas, A. (2011). Peranan Decision Support System (DSS) Bagi Manajemen Selaku Decision Maker. Jurnal Analisis Manajemen, 5(1), 102–108.


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