{{ message }}

Trik Include File HTML Seperti di PHP Menggunakan JQuery

30/07/2017 | Javascript
Trik Include File HTML Seperti di PHP Menggunakan JQuery

Pernahkah Anda berfikir bagaimana caranya Javascript untuk dapat saling include file HTML seperti yg dapat dilakukan PHP. Misalnya seperti require(‘content.html’); lalu konten file HTML tersebut langsung ditampilkan di Web Browser. Tentu akan sangat memudahkan bukan jika Anda dapat melakukan hal tersebut. HTML Anda tidak menumpuk pada satu tempat serta Anda dapat mengaturnya menjadi lebih rapih dan mudah part per part seperti di PHP.

Pada experiment kali ini saya akan menjabarkan sedikit trik untuk meng-include file HTML menggunakan JQuery. Yaitu tepatnya dengan meload file tersebut secara syncronize menggunakan metode AJAX (di-load dengan XHR). Saya buat secara syncronize karena jika kita load secara asyncronize seperti hal yg sering dilakukan AJAX secara standard, maka akan dirasa kurang mirip dengan PHP dan juga Anda akan bingung mengatur urutan include-nya.

Include File HTML di Client Side

Untuk meng-include file HTML kurang lebih seperti inilah script-nya;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JQuery Include</title>
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  </head>
  <body>
 
    <script>
      $.ajax({
        type: 'text/html',
        method: 'GET',
        async: false,
        cache: false,
        url: 'hello.html',
        success: function (content) {
          document.write(content);
        },
      });
    </script>
 
  </body>
</html>

Untuk membuktikan fungsi tersebut dapat berjalan silakan buat file hello.html di folder yg sama misalnya dengan isi seperti berikut;

<h1>Hello World</h1>

Silakan coba running script JQuery-Ajax diatas, maka file hello.html akan ter-load dan langsung ditampilkan konten-nya dengan baik, layak-nya PHP meng-include file. Berikut ini penjelasan script JQuery-Ajax yg kita lakukan dari line 15 hingga 24.

  1. type: ‘text/html’
    Attribute ini di-set ke text/html karena file yg kita load adalah file text biasa berisi kode HTML
  2. method: ‘GET’
    Kita mengambil file tersebut dengan method GET sebenarnya di-set ke POST juga tidak masalah
  3. async: false
    Ini adalah yg paling penting kita bahas, jika Anda meng-set async menjadi true maka ketika Anda me-load halaman lain dengan metode JQuery-Ajax yg sama dibawahnya (misalnya Anda sisipkan script load Ajax lagi di line 25). Urutan load-nya akan menjadi tidak beraturan, ini dikarenakan async: true mengambil halaman tersebut secara pararel bukannya per-baris. Jika Anda set async-nya menjadi false maka load file akan dilakukan secara perbaris.
  4. cache: false
    Attribute ini juga sangat penting, jika Anda tidak set ke false maka ketika Anda meng-update halaman yg Anda include dapat menyebabkan halaman yg terupdate tersebut tidak di-load melainkan yg di-load adalah halaman yg masih belum terupdate di cache.

  5. url: ‘hello.html’
    Tentu saja ini adalah alamat file yg mau di-include. Anda dapat menggantinya dengan relative path ataupun absolute url seperti url: “http://domainku.com/include/namafile.html” misalnya.
  6. document.write(content);
    Perintah ini dilakukan untuk langsung menampilkan isi file HTML yg di-load tersebut ke
    langsung di Web Browser.

Sebenarnya script include ini memiliki kelemahan yaitu; metode Ajax-XHR untuk meload file secara syncronize itu sudah deprecated. Deprecated itu artinya fungsi XHR tersebut sudah tidak lagi dimainten atau telah usang. Namun demikian jika Anda ingin membuat aplikasi mobile Android/iOS dengan Cordova ataupun Anda ingin membuat aplikasi Desktop dengan NW.js untuk saat ini penggunaan script ini masih tepat karena Anda membundle intreperter Javascriptnya juga didalamnya. Hingga kemungkinan fungsi ini tidak berjalan kedepan itu tidak ada selama Anda tidak meng-update versi Cordova dan NW.js yg Anda gunakan untuk membundle aplikasi. Juga script ini akan sangat berguna ketika Anda membuat template static HTML sebelum diintegrasikan dengan pemrograman server side. Untuk pembuatan website full dengan server side programming (misalnya PHP) saya tidak menyarankan script ini, sebaiknya Anda melakukan include/load file dengan menggunakan server side programming yg Anda gunakan saja.

Source Code Lengkap

File index.html;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JQuery Include</title>
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  </head>
  <body>
 
    <script>
 
      function include(htmlFile) {
        $.ajax({
          type: 'text/html',
          method: 'GET',
          async: false,
          cache: false,
          url: htmlFile,
          success: function (content) {
            document.write(content);
          },
        });
      }
 
      include('hello.html');
      include('hello2.html');
 
    </script>
 
  </body>
</html>

File hello.html;

<h1>Hello World</h1>

File hello2.html;

<h1>hello 2</h1>