Cara Kompres Kode HTML, CSS, Javascript, dan Kode Lainnya

By . Kategori: PHP, Web Tags: , , , ,

Irnanto.com – Ada banyak cara membuat file atau script agar dijalankan lebih ringan dalam proses pengaksesannya, salah satunya dengan cara meminimalkan baris kode pada program yang dibuat. Apa perbedaan script code 1 baris dengan yang berbaris-baris ? Tentu saja ada bedanya, jika semakain banyak baris kode yang kita buat, maka akan semakin banyak pula bit data pada file kode tersebut. Hal ini yang bisa menyebabkan semakin lama data di load atau di proses.

Sebenarnya kita bisa membuat baris kode pada setiap file script yang kita buat menjadi satu baris, setelah script selesai dibuat dengan cara menghapus / menggabungkan tiap-tiap baris program, tetapi akan membutuhkan banyak waktu untuk dapat membuat kode tersebut menjadi satu baris. Ada juga cara lain untuk menjadikan kode program menjadi satu baris yaitu dengan cara ketika akan membuat program, program langsung di tuliskan satu baris, tetapi ini juga dapat menimbulkan masalah ketika kita akan men-debug program yang kita buat.

Dari permasalah-permasalahan yang dihadapi ketika akan meng-kompres kode HTML, CSS, dan Javascript akhirnya saya membuat Cara kompres kode HTML, CSS, dan Javascript dengan menggunakan sistem yang saya buat sendiri. Sistem ini menggunakan bahasa pemrograman PHP yang akan memproses inputan script/kode yang memiliki baris kode program yang banyak dan akan di proses untuk dijadikan kode program satu baris.

Form Kompres Kode Script HTML, CSS, dan  Javascript

Form kompres kode script HTML, CSS, dan Javascript

Script kompres kode

Ketikkan kode program di bawah ini dan simpan dengan ekstensi .php. Di sini saya menggunakan nama file kompres-kode.php

<html>
    <head>
        <title>Kompres Kode | irnanto.com</title>
    </head>
    <body>
        <form id=”form1″ name=”form1″ method=”post” action=”<?php echo $_SERVER[‘PHP_SELF’]; ?>”>
            <label>input kode : <textarea name=”input” id=”input” cols=”45″ rows=”5″></textarea></label><br/>
            <input type=”submit” name=”button” id=”button” value=”Submit” /><br/>
<?php
    if(isset($_POST[‘button’])){
        function ob_html_compress($kompress){
            $kompress=str_replace(array(“\n”,”\r”,”\t”,”   “),”,$kompress);
            $kompress = str_replace(array(”  “),’ ‘,$kompress);
        return $kompress = str_replace(array(“> <“),’><‘,$kompress);
        }
        ob_start(“ob_html_compress”);
?>
            <textarea name=”output” cols=”100″ rows=”20″><?php echo $_POST[‘input’]; ?></textarea>
<?php
        ob_end_flush();
    }
?>
        </form>
    </body>
</html>

Penjelasan kode program “Kompres kode” :

  • Form akan mengirimkan data dengan metode POST ke file itu sendiri ($_SERVER[‘PHP_SELF’])
  • Textarea berfungsi untuk menginputkan source kode
  • Submit berfungsi untuk tombol aksi pengiriman data
  • Kondisi jika tombol “button” di tekan atau pengiriman data nilai/value dari “button” telah di set maka……… (baca lagi bawahnya)
  • membuat fungsi  ob_html_compress dengan satu parameter $kompress
  • Merubah string menjadi ” (karakter kosong) jika menemukan karakter “\n”,”\r”,”\t”,”   “(spasi tiga) (\n dan \r artinya akhir baris dan \t artinya tabulasi/tab) dan disimpan ke variabel $kompress
  • Merubah string menjadi “” (karakter kosong) jika menemukan karakter ”  ” (spasi dua) dan disimpan ke variabel $kompress
  • Merubah string menjadi ‘><‘ jika menemukan karakter “> <“ dan disimpan ke variabel $kompress lalu dikembalikan
  • ob_start berfungsi mengubah output buffering menjadi aktif. Sementara output buffering aktif tidak ada output dikirim dari script (selain header), bukan output disimpan dalam buffer internal.
  • Textarea name=”output” akan menampilkan hasil kompres script/kode yang sebelumnya diinputkan (menampilkan kiriman $_POST[‘input’])
  • ob_end_flush() artinya Flush (mengirim) buffer output dan mematikan output buffering. Fungsi ini akan mengirimkan isi dari output buffer paling atas (jika ada) dan mengubah output buffer menjadi off.

Coba kita lihat kode HTML dan CSS yang di inputkan ke dalam form kompres kode seperti gambar di bawah ini.

Input Kode Script Yang Akan Di Kompres

Input kode script yang akan di kompres

Ketika kita tekan tombol “Submit” maka source code yang berbaris-baris akan di kompres dan akan di tampilkan ke dalam textarea seperti gambar di bawah ini yang menampilkan hasil kompres kode HTML dan CSS yang menjadi satu baris kode program. Setelah itu Anda lakukan Copy dan Paste kode tersebut di file yang Anda inginkan.

Hasil Kompres Kode HTML dan CSS

Hasil kompres kode HTML dan CSS

Perlu diingat, jika Anda menggunakan program kompres ini untuk mengkompres kode program, pastikan tiap statement di tutup dengan benar dan jika anda menggunakan komentar, pastikan komentar tersebut bukan komentar satu baris (gunakan komentar perbaris yang ada tanda pembuka sebagai penanda awal komentar dan tanda penutup sabagai akhir komentar) agar kode program anda bisa aktif dan berjalan dengan sempurna.

Jika Anda menggunakan bahasa pemrograman server side seperti PHP maka non aktifkan/hapus dulu kode pembuka dan penutup pada script PHP agar kode program yang akan di kompres dapat di tampilkan dengan sempurna. Jika Anda tidak ingin menghapus atau me-non aktifkan penanda pembuka dan penutup PHP, maka anda bisa membuat hasil kompres ditampilkan dalam tag atau tanda komentar HTML, setelah itu Anda bisa meng-copy script PHP yang telah di kompres tersebut pada inspect element.

Mudah bukan ?. Script kompres ini sering saya gunakan ketika membuat program-program yang memerlukan kecepatan akses data yang tinggi dan penghematan akses data. OK, cukup sekian pambahasan Cara Kompres Kode HTML, CSS, Javascript dan Kode Lainnya (Anda bisa kompres kode java,JQuery dan kode program lainnya). Semoga berhasil.

Belum ada komentar untuk “Cara Kompres Kode HTML, CSS, Javascript, dan Kode Lainnya”

Tinggalkan Komentar