Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

LZ-string adalah sebuah algoritma yang berfungsi untuk kompresi dan dekompresi data. Tujuan algoritma tersebut adalah untuk dapat mengurangi ukuran string. LZ-string dirancang untuk bekerja pada data data teks atau yang sering disebut dengan string, dan algoritma ini dapat menghasilkan output size file yang lebih kecil dibandingkan dengan representasi teks aslinya.


Sekilas Mengenai LZ-String

LZ-string dirancang dengan konsep kompresi dan dekompresi yang tidak terpisahkan. Artinya algoritma ini menyediakan transformasi data secara dua arah. Oleh sebab itu LZ-string tidak sesuai apabila konteksnya digunakan untuk enkripsi keamanan data.


Singkatan "LZ" merujuk pada "Lempel-Ziv," yang mengacu pada keluarga algoritma kompresi yang umum digunakan. Algoritma ini memanfaatkan pengulangan dan pola dalam data untuk mengurangi redundansi dan, akhirnya, menghasilkan bentuk yang lebih ringkas. Manfaat yang diperoleh dari proses ini menghasilkan sebuah deret data string yang lebih ringkas dan sangat cocok digunakan dalam komunikasi data pada sistem lokal.


Untuk mengamankan data yang sudah dikompresi menggunakan LZ-string ini, biasanya dilanjutkan dengan proses enkripsi. Beberapa programer menggunakan LZ-string tersebut bersamaan dengan enkripsi JWT atau enkripsi DES guna mengamankan datanya. Artinya setelah string melalui proses kompresi, selanjutnya dienkrip dan barulah data aman untuk dikirim.


Adapun tahapan LZ-String tersebut dijelaskan sebagai berikut:

  • Kompresi
    Pada tahap kompresi, LZ-string mencari pola pengulangan dalam string input dan menggantinya dengan representasi yang lebih pendek. Dengan cara ini, string dapat direpresentasikan dengan lebih efisien.
  • Dekompresi
    Pada tahap dekompresi, string yang terkompresi dapat dikembalikan ke bentuk aslinya dengan menggantikan representasi pendek dengan pola pengulangan sesuai.
  • Base64 Encoding
    LZ-string sering kali digunakan bersama dengan encoding Base64. Setelah melakukan kompresi, hasilnya sering kali diubah ke dalam format Base64 untuk memastikan bahwa data yang dikompresi dapat dengan mudah diwakili sebagai string teks yang aman.


Implementasi LZ-String Pada Pemrograman PHP

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:


1. Instal Library LZ-String PHP

Tahap awal, silahkan buat sebuah project kosong terlebih dulu. Anda harus menginstal composer terlebih dulu untuk memperoleh library LZ-string PHP. Apabila belum silahkan instal composer nya. Apabila sudah, silahkan masuk ke terminal pada project yang anda buat tadi kemudian ketikan perintah berikut : 

  1. composer require nullpunkt/lz-string-php
. Tunggu beberapa saat sampai proses selesai. Apabila berhasil maka sekarang anda memiliki sebuah volder dengan nama 'Vendor' yang mana di dalamnya sudah ada subdirectory dari library LZ-string PHP tersebut.


2. Buat Halaman index.php

Untuk mempermudah pada saat uji coba script nya nanti, kita buat contoh program sederhananya. Silahkan buat file baru dengan nama index.php. Setelah itu ketik script dasar berikut ini: Keterangan :

  • Pada baris ke 7 dan 8 kita masukan CDN bootstrap agar tampilan nampak rapih. Jadi jangan lupa untuk koneksi internetnya.
  • Baris ke 88 gunakan plugin jQuery agar proses bisa berlangsung cepat. Silahkan download filenya dan tempatkan pada folder vendor project yang tadi dibuat.
  • Pada baris 90 sampai dengan 115 merupakan code jQuery yang menangani form untuk bisa langsung diproses.


3. Buat File ProsesEnkripsi.php

Untuk melakukan proses enkripsi ketika string sudah diinputkan pada form, buat sebuah file dengan nama ProsesEnkripsi.php kemudian ketik script berikut ini : 

  1. <?php
  2.     include "vendor/autoload.php";
  3.     function compress($string){
  4.         return \LZCompressor\LZString::compressToBase64($string);
  5.     }
  6.     if(!empty($_POST['string'])){
  7.         $string=$_POST['string'];
  8.     }else{
  9.         $string="";
  10.     }
  11.     $enkripsi=compress($string);
  12.     echo $enkripsi;
  13. ?>


4. Buat File ProsesDekripsi.php

Sebaliknya untuk melakukan proses dekripsi dari hasil tadi, silahkan buat sebuah file dengan nama ProsesDekripsi.php kemudian ketik baris kode berikut ini : 

  1. <?php
  2.     include "vendor/autoload.php";
  3.     function decompress($string){
  4.         return \LZCompressor\LZString::decompressFromEncodedURIComponent($string);
  5.     }
  6.     if(!empty($_POST['string'])){
  7.         $string=$_POST['string'];
  8.     }else{
  9.         $string="";
  10.     }
  11.     $dekripsi=decompress($string);
  12.     echo $dekripsi;
  13. ?>

5. Jalankan Program

Simpan semua perubahan, kemudian coba buka programnya. Apabila berhasil maka hasilnya akan seperti ini:

Sekarang coba ketik apa saja pada kolom string sebelah kiri kemudian klik pada tombol enkripsi. Hasilnya akan tampil pada kolom dibawahnya. Lalu pada kolom sebelah kanan masukan output tadi dan lakukan hal yang sama dengan memilih tombol dekripsi.

Setiap data yang akan diproses atau disimpan pada database, sebaiknya sudah melalui proses validasi terlebih dulu. Hal ini bertujuan agar mengurangi resiko adanya serangan melalui sql injection yang dapat merusak struktur database, atau adanya pencurian data yang sangat berbahaya. Dengan adanya validasi karakter ini memungkinkan kita mengendalikan mekanisme masuknya data sebagai hasil interaksi antara pengguna dan sistem.

Proses validasi karakter pada pemrograman PHP dapat disesuaikan dengan standar atau aturan yang kita buat, baik yang berbasis database atau berbasis kebiasaan pengguna. Berdasarkan pengalaman, penggunaan validasi yang melibatkan 2 (dua) aspek tersebut cukup efektif mengurangi resiko dan dapat diterapkan pada beberapa proses sekaligus. Sebelum kita beranjak pada masalah teknikal kita akan membahas terlebih dulu apa saja yang akan kita validasi pada data masukan (input) sehingga bisa tersimpan pada tabel-tabel database dengan aman.

1. Memahami Tipe Karakter Database

Tipe karakter berhubungan dengan prilaku sebuah karakter sehingga sistem memberikan perlakuan yang berbeda pada masing-masing tipe. Ada baiknya kita memahami tipe-tipe karakter tersebut karena akan sangat bermanfaat ketika kita menghadapi project yang menuntut pendalaman pada basis data. Untuk memahami lebih mendalam mengenai tipe data ini baiknya pelajari terlebih dulu Memahami Tipe Data Pada DBMS MySql yang sudah dibahas pada postingan lain di seri belajar ini. 

2. Contoh Program Input Data Sederhana

Untuk mempersingkat waktu, kita akan melanjutkan beberapa tutorial yang pernah kita buat sebelumnya. Hal ini bertujuan agar kita paham dengan alur proses belajarnya. Jadi silahkan ikuti dulu langkah-langkahnya pada 2 (dua) postingan artikel tutorial berikut ini:

Silahkan ikuti kedua tutorial tersebut dengan baik. Kemudian kita langsung saja buat program berbasis web untuk input data sederhana pada database. Silahkan buat sebuah database dengan nama misalnya "belajar_php" kemudian buat juga tabel di dalam database tersebut dengan nama misalnya "pasien" spesifikasinya seperti ini: 

Validasi Karakter Yang Diinput Menggunakan Pemrograman PHP

Penjelasan:

Kolom id_pasien dibatasi dengan jumlah 10 digit, yang artinya database hanya akan dibatasi kurang dari 10 milyar baris data.

Kolom nama kita batasi hingga 225 karakter, dimana nantinya kita bisa batasi lebih ketat hingga 200 karakter.

  1. Kolom kontak kita coba menggunakan varchar, agar kita tahu perbedaannya nanti saat uji coba.
  2. Kolom alamat menggunakan text agar pengguna lebih leluasa pada saat input alamat dengan jelas.
  3. Kolom tempat_lahir, walaupun rata-rata pendek namun kita antisipasi jika ada yang memiliki nama daerah yang terlalu panjang.
  4. Kolom tanggal_lahir menggunakan format date (YYYY-mm-dd)
  5. Kolom input_date menggunakan format DATETIME (YYYY-mm-dd hh:ii)

Dalam project yang sudah kita buat pada tutorial sebelumnya, silahkan buat sebuah folder dengan nama "_Config" yang di dalamnya kita buat juga sebuah file PHP dengan nama "Connection.php". Jika sudah ketik script berikut in: 

  1. <?php
  2.     //Ini adalah halaman untuk melakukan konfigurasi database
  3.     $servername = "localhost";
  4.     $username = "root";
  5.     $password = "";
  6.     $db = "belajar_php";
  7.     // Mulai Koneksi
  8.     $Conn = new mysqli($servername, $username, $password, $db);
  9.     // Check Koneksi
  10.     if ($Conn->connect_error) {
  11.         die("Connection failed: " . $Conn->connect_error);
  12.     }
  13. ?>

Pada file index.php yang ada pada directory utama project, silahkan lakukan perubahan pada beberapa baris sehingga menjadi seperti berikut:

Penjelasan: Pada baris ke 54 sampai dengan 62 merupakan script jQuery yang digunakan untuk menentukan event ketika pengguna memilih menu dengan nilai "id" berupa "FormTambahPasien" maka akan diarahkan pada halaman "_Page/Pasien/FormTambahPasien.php".

Dari Source Code diatas kita buat sebuah folder dengan nama "pasien" kemudian didalamnya kita buat sebuah file dengan nama "FormTambahPasien.php". Jika sudah ketik script berikut ini:

 

Buat sebuah file dengan nama ProsesTambahPasien.php pada folder "_Page/Pasien/" untuk proses validasi dan menyimpan datanya pada database kemudian ketik script berikut ini:

Penjelasan :

  1. Pada baris 9 sampai dengan 20 merupakan perintah validasi, dimana sistem akan menampilkan notifikasi ketika form tidak diisi.
  2. Pada baris 21 sampai 26 digunakan untuk antisipasi jika pengguna tidak memiliki nomor kontak.
  3. Baris 31 sampai 34 berfungsi untuk membuat variabel yang menghitung jumlah karakter masing-masing data yang sudah ditangkap.
  4. Baris 35 sampai 57 berfungsi untuk melakukan validasi jumlah karakter masing-masing tipe data.
  5. Baris 52 berfungsi untuk validasi bahwa form nama tidak boleh mengandung angka.
  6. Baris 55 berfungsi untuk validasi tempat lahir tidak boleh mengandung angka.
  7. Baris 59 berfungsi untuk validasi kontak hanya boleh angka
  8. Baris 63 digunakan untuk validasi tanggal lahir hanya boleh angka dan tanda strip.
  9. Baris 67 sampai 82 digunakan untuk proses input data ke database.

Sekarang coba jalankan programnya, jika sudah benar maka akan seperti pada vidio demo berikut ini:


3. Penutup

Beberapa fungsi yang digunakan pada saat proses input data, sebelumnya dengan menggunakan PHP kita bisa melakukan berbagai cara validasi. Fungsinya agar pada saat proses input, kita bisa mengetahui penyebab kesalahannya. Selain itu dari segi keamanan akan jauh lebih efektif karena kita membatasi karakter macam apa yang diperbolehkan untuk diproses. Informasi lebih lanjut, apabila ada kesalahan pada langkah-langkah di atas, atau kurang paham dengan penjelasan di atas, silahkan tinggalkan komentar.

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.