Showing posts with label Komputer. Show all posts
Showing posts with label Komputer. Show all posts

Dengan melakukan bridging BPJS pada Vclaim v.2 maka aplikasi SIMRS yang dikembangkan bisa melakukan beberapa pemanggilan data, salah satunya adalah proses pengecekan status peserta berdasarkan NIK. Fitur ini bisa sangat membantu SIMRS yang dikembangakan sehingga mempercepat proses pelayanan, karena petugas tidak lagi harus melakukan pengecekan status pada aplikasi vclaim secara terpisah.


Lebih jauh, pengembang SIMRS bisa meningkatkan kehandalan fitur pengelolaan data master pasiennya. Misalnya bisa diterapkan pada saat melakukan pendaftaran pasien baru, sehingga proses lebih mudah dan cepat. Dengan fitur ini, pasien cukup membawa kartu KTP untuk memvalidasi identitasnya pada saat akan melakukan pendaftaran pelayanan kesehatan.


Pada artikel ini kita akan membahas bagaimana melakukan bridging dengan vclaim v.2 khususnya proses cek NIK peserta. Adapun contoh project ini akan melanjutkan modul kelola data pasien yang sudah pernah kita bahas. Oleh sebab itu, bagi yang belum tahu bisa kunjungi terlebih dulu seri belajar membuat SIMRS sendiri pada tautan berikut (Membuat Aplikasi SIMRS Berbasis Web).


Berbeda dengan versi sebelumnya, pada bridging kali ini perlu dilakukan proses deskriptif dan dekompresi karena response yang diterima berupan data yang sudah di enkripsi dan terkompresi. Untuk menambah pemahaman proses tersebut, silahkan kunjungi juga artikel yang membahas kompresi dan dekompresi tersebut pada tautan berikut "di sini".


Sebelum melakukan bridging, saya asumsikan para pembaca sudah memiliki data parameter penting sebagai informasi ijin aksesnya berupa consis, user_key, secret_key dan kode ppk. Bagi yang belum memiliki kode-kode tersebut silahkan melakukan pengajuan ke BPJS wilayahnya masing-masing. Baiklah, kita langsung saja ke langkah-langkahnya:


1. Instalasi Composer

Sebelum ke proses kompresi dan dekompresi kita harus menginstal Composer terlebih dulu agar mempermudah pemasangan library lainnya. Silahkan kunjungi website resminya di https://getcomposer.org/download/
Setelah memperoleh instalernya silahkan instal sampai selesai seperti biasa.


2. Instalasi Library Dekompresi dengan Lz String

Untuk implementasi penggunaan algoritma LZ-string pada pemrograman PHP dapat dilakukan dengan sangat mudah. Pada kesempatan kali ini, kita akan menggunakan sebuah library yang dibuat oleh 'nullpunkt'. Lebih jelasnya kita mulai dengan tahap-tahap penggunaannya sudah ada pada artikel berikut ini Kompresi Dan Dekompresi Data Menggunakan LZ String Pada Pemrograman PHP silahkan ikuti langkah-langkahnya. Jika sudah kembali ke tutorial ini.


3. Membuat Fungsi Pengaturan Bridging

Silahkan buka project yang sudah didownload sebelumnya, tersedia pada artikel sebelumnya, atau pada akhir artikel ini. Lakukan perubahan pada file pada _Config/Function.php kemudian tambahkan baris kode berikut.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
function getSettingVclaim($Conn,$parameter){
        $QryParam = mysqli_query($Conn,"SELECT * FROM pengaturan WHERE kategori_pengaturan='Bridging Vclaim' AND status='Active'")or die(mysqli_error($Conn));
        $DataParam = mysqli_fetch_array($QryParam);
        if(empty($DataParam['pengaturan'])){
            $Response="";
        }else{
            $pengaturan=$DataParam['pengaturan'];
            $JsonData =json_decode($pengaturan, true);
            $Response=$JsonData[$parameter];
        }
        return $Response;
    }


4. Modifikasi Data Tabel Pasien

Buka file pada directory _Page/Pasien/TabelPasien.php kemudian ubah menjadi seperti berikut:


5. Modifikasi jQuery Data Pasien

Buka file pada directory _Page/Pasien/pasien.js kemudian ubah menjadi seperti berikut:


6. Modifikasi Popup/Modal Pasien

Buka file pada directory _Page/Pasien/Modalpasien.php kemudian ubah menjadi seperti berikut:


7. Menampilkan Detail Informasi NIK pasien

Buat sebuah file pada directory _Page/Pasien/FormDetailNik.php kemudian ubah menjadi seperti berikut:


8. Melakukan Pengujian Aplikasi

Silahkan lakukan pengujian pada aplikasi, buka menu masien dan pada data pasien klik pada bagian nik. Jika benar maka sistem akan menampilkan tampilan sebagi berikut:


Silahkan ikuti seri belajar membuat SIMRS ini lebih lengkap pada tautan berikut


Download Full Source Code via Git Hub

Download Full Source Code Via G-Drive


Silahkan lakukan request, atau hubungi saya melalui kolom komentar

Bridging SIMRS dengan VClaim v.2 bertujuan untuk mempermudah komunikasi data antara kepentingan manajemen Rumah Sakit dengan pelayanan informasi BPJS Kesehatan. Berbeda dengan versi sebelumnya, sebagai usaha untuk meningkatkan keamanan pada saat komunikasi data maka setiap pemanggilan web service harus dicantumkan parameter validasi. Salah satu parameter yang harus disematkan adalah signature.


Pada kesempatan kali ini kita akan mulai membahas bagaimana proses bridging tersebut secara umum. Dimulai dengan pembuatan signature tersebut, yang berguna untuk validasi yang efektif. Untuk mempermudah pemahaman lebih lanjut, kita akan langsung melakukan implementasi pengaturan bridging tersebut pada SIMRS yang sudah kita kembangkan pada artikel sebelumnya.


Bagi anda yang baru mengikuti seri belajar pengembangan aplikasi SIMRS, silahkan kunjungi daftar isi seri belajar membuat aplikasi SIMRS berbasis web.


Membuat Tabel Pengaturan

Tujuan dibuatnya tabel ini nantinya kita akan menggunakan parameter tersebut untuk bisa berpindah-pindah mode bridging. Misalnya kita ingin berpindah dari tester ke production tanpa harus melakukan pengaturan secara manual pada source code kita. Berikut struktur tabel pengaturan tersebut:


Update Komponen Partial

Langkah berikutnya adalah membuat halaman pengaturan. Silahkan lakukan update pada file-file berikut untuk melakukan routing halaman menuju halaman pengaturan.

  • _Partial/Modal.php
  • _Partial/PageTitle.php
  • _Partial/RoutingJs.php
  • _Partial/RoutingPage.php


Membuat Halaman Pengaturan

Langkah berikutnya adalah membuat directory pengaturan. Silahkan buat folder baru dengan nama 'Pengaturan' seperti berikut ini

  • _Page/Pengaturan/FormEditPengaturanVclaim.php
  • _Page/Pengaturan/FormTambahPengaturanVclaim.php
  • _Page/Pengaturan/HasilGenerateSignature.php
  • _Page/Pengaturan/ListPengaturanBridging.php
  • _Page/Pengaturan/ModalPengaturan.php
  • _Page/Pengaturan/Pengaturan.js
  • _Page/Pengaturan/Pengaturan.php
  • _Page/Pengaturan/ProsesEditPengaturanVclaim.php
  • _Page/Pengaturan/ProsesHapusPengaturanVclaim.php
  • _Page/Pengaturan/ProsesTambahPengaturanVclaim.php


Apabila sudah, silahkan uji coba. Lihat hasilnya seperti (demo berikut ini)


Download Source Code Full-nya gratis di Link Berikut ini: Download Source Code SIMRS berbasis Web

Kunjungi juga daftar isi semua artikel seri belajar membuat SIMRS berbasis web

Blum Blum Shub (BBS) merupakan algoritma komputasi yang digunakan untuk menciptakan karakter acak sehingga menghasilkan karakter yang sulit diprediksi. Perkembangan teknologi komputer yang pesat pada saat ini, telah mendorong para ahli dalam bidang kriptografi untuk menciptakan sebuah algoritma yang dapat digunakan dengan sederhana namun tetap memiliki sifat pengacakan yang kuat. Bidang tersebut erat kaitannya dengan usaha perlindungan data dan informasi, sehingga kemajuan teknologi tersebut terjamin keamanannya. Selain kriptografi, pada saat ini algoritma pengacakan juga dapat diterapkan dalam bidang lain seperti pengujian statistik, pertandingan atau pengundian, pengujian perangkat lunak dan lain-lain.


Pengertian Algoritma Blum Blum Shub (BBS)

Algoritma Blum Blum Shub (BBS) adalah suatu algoritma yang diterapkan pada komputasional yang di rancang dengan tujuan untuk menghasilkan suatu urutan nilai yang tidak dapat di tebak polanya dengan mudah, sehingga urutan nilai tersebut dapat di anggap sebagai suatu keadaan acak (random). Algoritma Blum Blum Shub (BBS) merupakan cryptographically psedorandom number generator (CSPRNG) yang berarti bahwa deret bilangan yang dihasilkannya sebenarnya dihasilkan oleh algoritma deterministik, namun sulit untuk diprediksi atau ditebak tanpa pengetahuan tentang kunci rahasia yang digunakan.


Salah satu manfaat nyata dari penggunaan algoritma tersebut adalah untuk menciptakan karakter acak yang kuat sehingga sulit ditebak. Hal ini berkaitan dengan kriptografi modern, dimana cukup banyak diperlukan pembangkit bilangan acak sebagai salah satu komponen utama dalam meningkatkan keamanan pengiriman informasi.


Secara teoritis tidak ada prosedur komputasi yang mampu menghasilkan deret bilangan acak yang benar-benar sempurna (truly random). Oleh sebab itu, dalam tekhnologi komputerisasi saat ini, setiap karakter acak yang dihasilkan merupakan hasil dari proses pseudo-random number generator (PRNG). Pengertian dari pseudo-random number generator (PRNG) itu sendiri adalah sebuah proses pengacakan menggunakan formula matematis atau deterministik yang diawali oleh suatu kondisi yang disebut dengan seed. Selain itu pseudo-random number generator (PRNG) juga memiliki periodik yang berarti memiliki panjang siklus, yang ketika dalam kondisi tertentu dan periode tertentu maka pengacakan mungkin dapat terulang secara identik.


Kelemahan Blum Blum Shub (BBS)

Algoritma Blum Blum Shub (BBS) tidak cocok untuk diterapkan pada keamanan kriptografi tingkat pertama yang mengandalkan sifat acak atas bilangan yang dihasilkan. Karena Algoritma Blum Blum Shub (BBS) masih mungkin dapat diprediksi dan dapat berulang dalam pola periode tertentu. Algoritma Blum Blum Shub (BBS) juga tidak cocok untuk penguncian informasi secara langsung. Contoh dari hal ini misalnya menggunakan Algoritma Blum Blum Shub (BBS) untuk menciptakan password karena hal ini beresiko untuk dapat ditebak melalui proses matematis tertentu.


Kelebihan Blum Blum Shub (BBS)

Algoritma Blum Blum Shub (BBS) dibuat pada tahun 1986 oleh Lenore Blum, Manuel Blum dan Michael Shub. Blum Blum Shub (BBS) memiliki suatu kelebihan dibandingkan metode pengacakan lainnya, yaitu terletak pada kesederhanaannya dalam melakukan pengacakan. Dengan kesederhanaan proses tersebut maka sangat cocok apabila diterapkan pada proses kryptografi yang melibatkan file besar jika dibandingkan dengan algoritma lainnya.


Algoritma Blum Blum Shub (BBS) cocok untuk diterapkan pada kebutuhan pengacakan rendah yang memperbolehkan kemungkinan penggunaan ulang reuseable. Hal ini disebabkan karena Algoritma Blum Blum Shub (BBS) memungkinkan diatur periodenya sehingga dapat menciptakan pengacakan ulang secara identik. Kelebihan ini sekaligus memanfaatkan kekurangan dari Algoritma Blum Blum Shub (BBS). Contoh penggunaan semacam ini misalnya kita akan mengacak sebuah kumpulan angka urutan soal yang jumlahnya terbatas, atau melakukan pengundian pada range yang tidak lengkap, juga ketika ingin melakukan pengacakan dalam batas-batas tertentu.


Penerapan Algoritma Blum Blum Shub (BBS)

Algoritma Blum Blum Shub (BBS) dapat dimanfaatkan oleh beberapa bidang yang menggunakan teknologi komputer serta mengandalkan kemampuan pengacakan. Algoritma Blum Blum Shub (BBS) dapat diterapkan sesuai karakteristik pseudo-random number generator (PRNG) yang dimilikinya sehingga lebih efektif dan efisien. Berikut ini adalah beberapa contoh penerapan Algoritma Blum Blum Shub (BBS):

  • Penerapan Algoritma Blum Blum Shub (BBS) dalam bidang penelitian untuk pengujian statistik. Dalam beberapa proses pengujian statistik membutuhan kondisi dimana objek memiliki validitas yang tinggi atas informasinya ketika dilakukan pengujian dalam kondisi yang tidak dapat diduga. Penerapan Algoritma Blum Blum Shub (BBS) bisa digunakan untuk menentukan sample penelitian, pengujian validitas data atau pengujian persamaan yang menjawab kesesuaian antara interpertasi statustik dengan kondisi sebenarnya.
  • Penerapan Algoritma Blum Blum Shub (BBS) dalam simulasi komputer. Dalam proses simulai komputer diperlukan suatu kondisi yang kompleks dengan tingkatan yang dpat diukur. Dengan menggunakan Algoritma Blum Blum Shub (BBS) maka proses simulasi dapat terdeskripsi melalui tingkatan pengacakan yang dihasilkan.
  • Permainan dan Hiburan. Dalam game komputasi agar konten tidak dapat diprediksi oleh pemain maka dalam kondisi tertentu menggunakan pengacakan untuk menghasilkan tantangan yang menarik. Proses pengcakan yang dibutuhkan adalah generator yang bisa menyesuaikan dengan kondisi manakala sumber daya yang digunakan pada permaianan yang diciptakan memiliki batasan tertentu. Misalnya dalam proses pengacakan nomor soal, pengacakan kondisi permaianan atau pengacakan ID pemain untuk memperoleh kisaran angka acak dalam rang tertentu.


Penutup

Kelemahan pada Algoritma Blum Blum Shub (BBS) sebetulnya dapat ditutupi dengan menggunakan kondisi awal yang berbeda-beda sehingga pengacakan yang dihasilkan tidak dapat di reverse. Dalam penerapannya untuk bidang keamanan data informasi dapat diterapkan untuk penciptaan pengacakan blok logika sehingga informasi yang ada didalamnya tidak dapat diprediksi dengan mudah karena menghasilkan permutasi yang tidak terbatas. Algoritma Blum Blum Shub (BBS) cocok untuk diterapkan pada kebutuhan pengacakan rendah yang memperbolehkan kemungkinan penggunaan ulang reuseable. Dalam konteks pemahaman ini, pengacakan bisa digunakan untuk memberikan faktor bias pada objek yang memiliki kemampuan prediksi yang cukup tinggi semisalnya kecerdasan buatan (AI) sehingga informasi yang diserap tidak dapat diterjemahkan dengan mudah.


Penciptaan bilangan acak membutuhkan batasan tertentu, pada siklus tertentu dengan jarak nilai tertentu pula agar mudah diimplementasikan dan diterapkan dalam kehidupan sehari-hari. Walaupun Algoritma Blum Blum Shub (BBS) tidak sepenuhnya acak, namun dapat direkayasa dengan beberapa cara sehingga menghasilkan permutasi yang tidak terbatas. Namun dampaknya, penggunaan semacam itu harus menyertakan penghentian algoritma secara manual ketika kondisi pengacakan sudah mencapai tujuan sesuai batasan yang diinginkan.


Sumber Pustaka

  • Munir , Rinaldi. 2011. Algoritma dan Pemrograman. Bandung : Informatika
  • Rizal Adi Saputra 2021, Implementasi Metode Blum Blum Shub (BBS) Untuk Pengacakan soal Kuis Pada Aplikasi Media Pembelajaran Ipa Tingkat Sekolah Dasar Kelas 6 Berbasis Mobile
  • Wibowo, M. A. (2015). Pengacakan Soal Menggunakan Metode Blum Blum Shub (BBS) Pada Aplikasi Pembelajaran Matematika Berbasis DekstoP. STMIK AKAKOM Yogyakarta.https://eprints.akakom.ac.id/3

Konsep Dasar Algoritma 3DES (Data Encryption Standard )

Algoritma penyandian data yang telah dijadikan standard sejak tahun 1977 adalah Data Encryption Standard (DES) setelah disetujui oleh National Bureau of Standard (NBS) dan setelah dinilai kekuatannya oleh National Security Agency (NSA). Algoritma DES dikembangkan di IBM di bawah kepemimpinan W.L. Tuchman pada tahun 1972. Kekuatan DES saat itu terletak pada panjang kuncinya yaitu 56-bit. Akibat perkembangan teknologi yang begitu pesat, DES, dalam beberapa hal, terbukti kurang dalam hal jaminan aspek keamanan (Menezes, et al., 1997).


Perangkat keras khusus yang bertujuan untuk menentukan kunci 56-bit DES hanya dalam waktu beberapa jam sudah dapat dibangun. Dan pada tahun 1998, Electronic Frontier Foundation menggunakan suatu komputer yang dikembangkan secara khusus yang bernama DES Cracker, dalam waktu kurang dari tiga hari telah mampu untuk memecahkan DES. Beberapa pertimbangan tersebut telah manandakan bahwa diperlukan sebuah standard algoritma baru dan kunci yang lebih panjang. Setelah itu, dibuatlah beberapa pengembangan dari DES dengan cara memperbesar ruang kunci. Varian pengembangan DES yang paling dikenal adalah DES Berganda, yakni pemanfaatan DES berkali-kali untuk proses enkripsi dan dekripsinya. Double DES mempunyai kelemahan yaitu ia dapat diserang


Dengan algoritma yang dikenal sebagai meet-in-the-middle-attack, yang pertama kali ditemukan oleh Diffie dan Hellman. Sebagai bentuk pencegahan terhadap serangan tersebut, maka digunakanlah tiga kali langkah DES. Bentuk tersebut dinamakan sebagai Triple DES.


Algoritma Triple DES termasuk algoritma cipher blok berbasis kuncisimetris. 3DES (Triple Data Encryption Standard) atau biasa di sebut DESede atau juga Triple DES merupakan suatu algoritma pengembangan dari algoritma DES (Data Encryption Standard). Triple DES menggunakan algoritma DES sebagai algoritma utama. Pada dasarnya algoritma yang digunakan sama, hanya pada 3DES dikembangkan dengan melakukan enkripsi dengan implementasi algoritma DES sebanyak tiga kali. 3DES memiliki tiga buah kunci yang berukuran 168-bit (tiga kali kunci 56-bit dari DES). Triple DES dipilih sebagai cara simpel untuk memperbesar ukuran kunci tanpa perlu mengganti algoritma Triple DES dikembangkan untuk mengatasi kelemahan ukuran kunci yang digunakan pada proses enkripsi-deskripsi DES sehingga teknik kriptografi ini lebih tahan terhadap exhaustive key search yang dilakukan oleh kriptoanalis.


Penggunaan triple DES dengan suatu kunci tidak akan menghasilkan pemetaan yang sama seperti yang dihasilkan oleh DES dengan kunci tertentu. Hal itu disebabkan oleh sifat DES yang tidak tertutup (not closed). Sedangkan dari hasil implementasi dengan menggunakan modus Electronic Code Book (ECB) menunjukkan bahwa walaupun memiliki kompleksitas/notasi O yang sama (O(n)), proses enkripsi-deskripsi pada DES lebih cepat dibandingkan dengan triple DES.


Pada algoritma Triple DES dibagi menjadi tiga tahap, setiap tahapnya merupakan implementasi dari algoritma DES. Tahap pertama, plainteks yang diinputkan dioperasikan dengan kunci eksternal pertama (K1) dan melakukan proses enkripsi dengan menggunakan algoritma DES. Sehingga menghasilkan pra-cipherteks pertama. Tahap kedua, pra-cipherteks pertama yang dihasilkan pada tahap pertama, kemudian dioperasikan dengan kunci eksternal kedua (K2) dan melakukan proses enkripsi atau proses dekripsi (tergantung cara pengenkripsian yang digunakan) dengan menggunakan algoritma DES. Sehingga menghasilkan pra-cipherteks kedua. Tahap terakhir, pra-cipherteks kedua yang dihasilkan pada tahap kedua, dioperasikan dengan kunci eksternal ketiga (K3) dan melakukan proses enkripsi dengan menggunakan algoritma DES, sehingga menghasilkan cipherteks (C).


Beberapa mode operasi yang dapat diterapkan pada algoritma kriptografi penyandi blok Triple DES di antaranya adalah Electronic Code Book (ECB), Cipher Block Chaining (CBC), Cipher Feedback (CFB), dan Output Feedback (OFB) (Pasca Nugraha 2011:113)


Bentuk Umum 3DES


Konsep Triple DES sebenarnya sama dengan DES, namun terdapat beberapa pengembangan, Bentuk umum TDES (mode EEE):


  • Enkripsi: C = EK3(EK2(EK1 (P)))
  • Dekripsi: P = DK1(DK2 (DK3 (C)))


Untuk menyederhanakan TDES, maka langkah di tengah diganti dengan D (mode EDE). Ada dua versi TDES dengan mode EDE:


  • Menggunakan 2 kunci
  • Menggunakan 3 kunci


Berikut merupakan skema Triple DES dengan 2 kunci :


Dan di bawah ini adalah skeme Triple DES dengan 3 kunci :

Sedangkan untuk pemilihan kunci ada dua pilihan untuk pemilihan kunci eksternal algoritma 3DES, yaitu:


  • K1, K2, dan K3 adalah kunci-kunci yang sama
    K1 = K2 = K3 = K1
  • K1, K2, dan K3 adalah kunci-kunci yang saling bebas
    1 ≠ K2 ≠ K3 ≠ K1
  • K1 dan K2 adalah kunci-kunci yang saling bebas, dan K3 = K1


Penutup

Kekuatan DES saat itu terletak pada panjang kuncinya yaitu 56-bit. Akibat perkembangan teknologi yang begitu pesat, DES, dalam beberapa hal, terbukti kurang dalam hal jaminan aspek keamanan. Dengan algoritma yang dikenal sebagai meet-in-the-middle-attack, yang pertama kali ditemukan oleh Diffie dan Hellman. Sebagai bentuk pencegahan terhadap serangan tersebut, maka digunakanlah tiga kali langkah DES. Bentuk tersebut dinamakan sebagai Triple DES. Triple DES menggunakan algoritma DES sebagai algoritma utama. Pada dasarnya algoritma yang digunakan sama, hanya pada 3DES dikembangkan dengan melakukan enkripsi dengan implementasi algoritma DES sebanyak tiga kali.

Sumber Pustaka

  •  A.S. Rosa dan Shalahudin  M, 2011. Rekayasa Perangkat Lunak. Modula. Bandung.
  • Anwar Ashraf, 2014. International Journal of Software Engineering, 
  • Bin Ladjamudin, Al ¬Bahra. 2005, Analisis dan  Desain Sistem Informasi, Graha Ilmu, Yogyakarta. 
  • Fauzi Ahmad, 2016. Analisis Hybrid Cryptosystem Algoritma Elgamal Dan Algoritma Triple Des. STMIK Kaputama Binjai. Medan Sumatra Utara.
  • Heru Adya Gunawan, dkk. 2014. Keamanan login web menggunakan metode 3des Berbasis teknologi quick response code. Jurnal Informatika Mulawarman.
  • Jogiyanto. 2001. Analisis dan perancangan system. Andi Offset. Yogyakarta.
  • Kadir, Abdul. 2003. Pengenalan Sistem Informasi. Penerbit Graha Ilmu, Jakarta.
  • Laudon, 2010. Management Information Syistem: Managing The Digital Firm. Prentic Hall. New Jersey.
  • Mulyanto Agus, 2009. Sistem Informasi Konsep dan Aplikasi. Pustaka Pelajar. Yogyakarta.
  • Pressman, 2002. Rekayasa Perangkat Lunak Pendekatan Praktisi (Buku Satu), ANDI Yogyakarta.
  • Pasca Nugraha, M., & Munir, R. 2011. Pengembangan Aplikasi QR Code Generator dan QR Code Reader dari Data Berbentuk Image. Konferensi Nasional Informatika.
  • Rahayu, Y. D., Nana Ramadijanti, S. M., & Yuliana Setiowati, S. M. 2010. Pembuatan Aplikasi Pembacaan Quick Response Code Menggunakan Perangkat Mobile Berbasis J2ME untuk identifikasi Barang.


Berpindah halaman pada pemrograman web tidak lepas dari peran proses browser melakukan inisiasi terhadap URL yang dituju. Pada proses ini browser akan mengolah secara keseluruhan halaman yang akan ditampilkan sesuai file pada URL tersebut. Hal ini akan tidak efisien apabila pengunjung atau pengguna web harus selalu berpindah halaman dengan konten yang sebetulnya tidak perlu diulang-ulang sehingga dianggap membuang-buang resource. Dengan menggunakan javascript kita bisa memanipulasi halaman secara dinamis tanpa perlu melakukan reload ulang pada halaman utama. Proses ini akan jauh lebih hemat karena kita tidak perlu menampilkan secara keseluruhan halaman.

Pada artikel kali ini kita akan menggunakan jQuery sebagai framework javascript yang akan mempermudah perpindahan halaman serta proses load file PHP yang kita gunakan. Untuk dasar penggunaannya bisa langsung saja mengunjungi website resmi jQuery

Untuk mempersingkat waktu, kita akan melanjutkan project yang sudah ada pada postingan sebelumnya. Silahkan kunjungi postingan tersebut di sini : Membuat Routing Halaman Sederhana Dengan PHP dan silahkan ikuti langkah-langkahnya. Jika sudah, silahkan kembali lagi kesini dan mari kita buat perbedaan yang mencolok dari 2 (dua) buah metode dan teknik yang akan kita gunakan.

1. Membuat Class Halaman

Mari kita mulai dengan membuat perubahan utama pada file index.php yang telah kita buat pada tutorial sebelumnya. Silahkan lakukan perubahan menjadi seperti berikut ini:


Berdasarkan source code tersebut diatas kita akan melihat perbedaannya dimana yang semula kendali halaman dilakukan oleh script PHP maka sekarang kita hanya perlu menambahkkan atribut id pada class div yang akan menampilkan halaman-halamannya.

2. Instal jQuery

Untuk memasang (instal) jQuery pada project, silahkan kunjungi website resminya. Anda bisa menggunakan berbagai metode untuk melakukan instalasi jQuery tersebut. Pada postingan kali ini saya menggunakan NPM, namun jika belum memiliki NPM yang terinstal silahkan instal terlebih dulu atau anda bisa menggunakan metode download file jQuery nya. 

Apabila menggunakan NPM untuk instalasi maka tampilan directorynya akan seperti ini:


Jika menggunakan metode download manual tinggal disesuaikan saja terkait posisi peletakan folder jQuery tersebut.

3. Tambahkan Script jQuery Untuk Berpindah Halaman

Silahkan tambahkan baris script berikut ini di bawah </main> dan di atas </body> untuk memanggil plugin jquery yang sudah kita instal tadi.

  1. <script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>

Kemudian tambahkan juga baris script berikut ini di bawahnya untuk memberikan perintah pada halaman agar menampilkan masing-masing file sesuai menu yang di click .

  1. <script>
  2. //Menampilkan Halaman Home Pertama Kali
  3. $.ajax({
  4. type : 'POST',
  5. url : '_Page/Home.php',
  6. success : function(data){
  7. $('#MenampilkanHalaman').html(data);
  8. }
  9. });
  10. //Ketika Halaman 1 Di Klik
  11. $('#KeHalaman1').click(function(){
  12. $.ajax({
  13. type : 'POST',
  14. url : '_Page/Halaman_1.php',
  15. success : function(data){
  16. $('#MenampilkanHalaman').html(data);
  17. }
  18. });
  19. });
  20. //Ketika Halaman 2 Di Klik
  21. $('#KeHalaman2').click(function(){
  22. $.ajax({
  23. type : 'POST',
  24. url : '_Page/Halaman_2.php',
  25. success : function(data){
  26. $('#MenampilkanHalaman').html(data);
  27. }
  28. });
  29. });
  30. //Ketika Halaman 3 Di Klik
  31. $('#KeHalaman3').click(function(){
  32. $.ajax({
  33. type : 'POST',
  34. url : '_Page/Halaman_3.php',
  35. success : function(data){
  36. $('#MenampilkanHalaman').html(data);
  37. }
  38. });
  39. });
  40. </script>

Jika semua langkah-langkah sudah dilakukan silahkan jalankan web dengan benar maka hasilnya akan seperti berikut ini.


Demikian tutorial mengenai Berpindah Halaman Secara Dinamis Tanpa Reload Menggunakan jQuery ini semoga bisa membantu anda belajar pemrograman web dengan baik. Jika ada yang tidak dipahami silahkan tinggalkan komentar.