Tag: JavaScript

  • JavaScript dan Object Oriented Programming (OOP) Bagian 2

    Pada catatan mengenai pemrograman berorientasi objek, sudah dijelaskan cara untuk menciptakan object dan mengakses property-nya dengan menggunakan dot notation.

    nama_object.nama_property

    Selain itu, juga bisa dengan menggunakan bracket notation.

    nama_object["nama_property"]

    Perbedaannya adalah bracket notation bisa diisi dengan variabel yang nilainya adalah nama dari property.

    var nama_object = {
      nama_property: nilai_property
    };
    
    var nama = "nama_property";
    nama_object[nama];
    

    Baris terakhir pada contoh di atas sama dengan nama_object["nama_property"]. Contoh kasus yang membutuhkan bracket notation adalah pada perulangan for-in. Bentuk dasarnya adalah sebagai berikut.

    for (var nama_property in nama_object) {}

    Kemudian dengan menggunakan bracket notation, cetak semua property yang ada pada suatu object.

    var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
      this.umur = umur_anjing_saya;
      this.warna = warna_anjing_saya;
    };
    
    var heli = new Anjing(5, "putih");
    
    var nama_property;
    for (nama_property in heli) {
      console.log(heli[nama_property]);
    }
    

    Untuk menciptakan object “Anjing”, maka digunakan custom constructor seperti pada potongan kode di atas. Namun sebenarnya itu adalah cara untuk mendefinisikan suatu class. Class bisa dianalogikan sebagai tipe pada suatu object sama halnya seperti tipe data pada variabel.

    Sebagai contoh pada kode “Anjing” di atas. Dalam hal ini, “heli” adalah object dari class “Anjing”. Class adalah hal yang sangat penting dalam pemrograman berorientasi objek. Hal itu karena class menyediakan informasi tentang suatu object. Jadi bisa dikatakan object adalah “instansi” dari class.

    Sampai sejauh ini sudah dibahas tentang konsep dasar OOP, yaitu enkapsulasi. Satu hal yang tidak boleh terlupakan pada konsep enkapsulasi adalah masalah privasi. Analogi pada dunia nyata adalah seperti ini, katakan ada seekor “Anjing” bernama “heli” yang berumur 5 tahun dan berwarna “putih”. Anjing lain bernama “luki” bisa memiliki property dan method yang berbeda dengan “heli”. Anjing “luki”, sebagai sebuah object yang kompleks dan mandiri, tentu saja tidak boleh sekedar mencontek “property” dan “method” yang ada pada Anjing “heli”. Alasannya, meskipun bisa saja memiliki “umur” dan “warna” yang sama, tetapi tidak mungkin dengan property seperti misalnya susunan DNA yang sama.

    Contoh lain, analogikan object sebagai sebuah televisi. Televisi memiliki method antara lain: on/off, pindah saluran, dan ubah volume suara. Method lain seperti fungsi-fungsi elektronik yang ada di dalamnya dibuat private sehingga tidak bisa diakses, yang bisa mengaksesnya adalah seorang ahli yang memiliki pengetahuan tentang televisi.

    var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
      this.umur = umur_anjing_saya;
      this.warna = warna_anjing_saya;
    };
    
    var heli = new Anjing(5, "putih");
    var luki = heli.warna;
    console.log(luki);
    

    Dapat dilihat pada contoh di atas, property “warna” dari object “heli” bisa diakses oleh variabel “luki” yang berada di luar class “Anjing”. Lalu bagaimana untuk menyembunyikan informasi agar tidak bisa diakses di luar class? Definisikan property dengan menggunakan kata kunci var. Dengan kata lain, ini adalah sebuah private property.

    var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
      var umur = umur_anjing_saya;
      var warna = warna_anjing_saya;
    };
    
    var heli = new Anjing(5, "putih");
    var luki = heli.warna;
    console.log(luki);
    

    Dengan menggunakan kata kunci var, property tidak akan bisa diakses dari luar class. Pada contoh di atas, console akan mengeluarkan “undefined error“.

    Meskipun tidak bisa diakses dari luar class, ada satu cara untuk bekerja menggunakan property ini, yaitu melalui sebuah public method. Public method akan mengembalikan nilai dari private property.

    var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
      var umur = umur_anjing_saya;
      var warna = warna_anjing_saya;
      this.suara = function() {
        return "Umur saya " + umur + " tahun dan berwarna " + warna;
      };
    };
    
    var heli = new Anjing(5, "putih");
    console.log(heli.suara());
    

    Tidak hanya property, method juga bisa dibuat private. Caranya sama seperti membuat private property.

    var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
      var umur = umur_anjing_saya;
      var warna = warna_anjing_saya;
      var suara = function() {
        return "Umur saya " + umur + " tahun dan berwarna " + warna;
      };
      this.guk = function() {
        return suara();
      };
    };
    
    var heli = new Anjing(5, "putih");
    console.log(heli.guk());
    

    Pada catatan ini telah dibahas mengenai perbedaan dot notation dengan bracket notation, class, dan private property & private method. Berikutnya masih ada satu konsep dasar OOP dengan JavaScript yang juga penting, pewarisan (inheritance).

  • JavaScript dan Object Oriented Programming (OOP)

    JavaScript adalah bahasa pemrograman yang paling penting dalam pengembangan website. JavaScript juga mendukung pemrograman berorientasi objek (object oriented programming), karena mengenal konsep object, property, dan method. Mungkin juga banyak yang melewatkan salah satu sifat dasar OOP yang terdapat pada JavaScript, yaitu inheritance atau pewarisan. Pewarisan dalam JavaScript disebut prototype.

    Ketika belajar tentang OOP, pasti tidak bisa lepas dari object. Object memungkinkan para programer untuk menggunakan kembali kode-kode yang pernah ditulis, re-used, inilah yang merupakan sifat dasar dari OOP, enkapsulasi (encapsulation).

    Object, dalam JavaScript, dan pada banyak bahasa pemrograman berorientasi objek yang lain adalah sebuah tipe data. Tipe data lain yang lebih primitif adalah string, number, dan boolean. Berikut ini adalah cara mendeklarasikan sebuah variabel sesuai tipe datanya.

    var kata = "belajar"; //string
    var angka = 153; // number
    var jawaban = true; // boolean
    

    Sedikit lebih rumit untuk mendeklarasikan object. Jika string dianalogikan sebagai kata (kumpulan karakter), number sebagai angka, dan boolean sebagai pernyataan benar atau salah; object dianalogikan sebagai sebuah benda yang lebih kompleks. Cukup sampai di sini pengertian dari object karena pengertian lanjutan dari tipe data ini hanya akan menjadikannya semakin kompleks dan susah dimengerti. Jadi langsung saja pada cara untuk mendeklarasikan object.

    Sama seperti mendeklarasikan variabel dengan tipe data primitif, untuk menciptakan object digunakan kata kunci var. Untuk contoh akan dibuat sebuah objek, anjing.

    var anjing = {};

    Pada contoh di atas diciptakan sebuah objek kosong yang diberi nama “anjing”. Dalam dunia nyata tentu saja tidak ada objek kosong, maka dari itu pada tipe data object juga dikenal property dan method. Property dan method adalah variable dan function yang berada di dalam object.

    var anjing = {
      umur: 3,
      warna: merah,
      suara: function() {
        return "guk";
      }
    };
    

    Maka jadilah sebuah object anjing yang memiliki 2 property, yaitu umur dan warna; dan sebuah method suara. Kemudian bagaimana cara untuk mengakses property dan method dari sebuah object. Jika pada tipe data primitif, tinggal ambil saja nama variabelnya, karena variabel itu berisi data yang ingin diakses. Sedangkan untuk tipe data object adalah dengan menggunakan dot notation dengan formula sebagai berikut.

    nama_object.nama_property atau
    nama_object.nama_method()

    Jadi kita dapat mengakses property dengan cara menulis anjing.umur atau anjing.warna dan anjing.suara() untuk mengakses method. Selain menggunakan dot notation, property juga dapat diakses menggunakan bracket notation, dengan formula sebagai berikut.

    nama_object[“nama_property”]

    var anjing = {
      umur: 3,
      warna: merah,
      suara: function() {
        return "guk";
      }
    };
    
    var umur_anjing_saya = anjing.umur; // dot notation
    var warna_anjing_saya = anjing["warna"]; // bracket notation
    console.log(anjing.suara()); // mencetak method suara ke console
    

    Cara mendeklarasikan object seperti di atas adalah dengan menggunakan Literal Notation. Cara lain untuk menciptakan object adalah dengan menggunakan kata kunci new. Cara ini disebut sebagai menciptakan object dengan constructor. Formulanya adalah sebagai berikut.

    var nama_object = new Object();

    Contoh di atas jika diubah ke cara kedua menjadi sebagai berikut.

    var anjing = new Object();
    anjing.umur = 3;
    anjing.warna = "merah";
    anjing.suara = function() {
      return "guk";
    };
    

    Seperti halnya pada function, sebuah method juga dapat diberikan 1 atau lebih parameter. Parameter adalah variabel yang dilewatkan pada function atau method. Pada contoh di atas, method suara akan ditambahkan sebuah method dengan parameter. Method ini berfungsi untuk mengubah warna anjing.

    var anjing = new Object();
    anjing.umur = 3;
    anjing.warna = "merah";
    anjing.suara = function() {
      return "guk";
    };
    anjing.ubahWarna = function(warna_baru) {
      anjing.warna = warna_baru;
    };
    

    Jadi property “warna” pada object “anjing” dapat diubah dengan memanggil method “ubahWarna”.

    anjing.ubahWarna("kuning");

    Catatan panjang lebar di atas belum sepenuhnya merangkum konsep object dalam OOP. Sebagai contoh, Method “ubahWarna” tidak bisa digunakan pada “anjing” yang lain (atau dengan kata lain, hanya ada 1 ekor anjing di dunia ini). Jadi kode tersebut belum memiliki sifat dasar OOP yang memungkinkan setiap object dapat digunakan kembali. Object “anjing” harus diubah menjadi lebih universal, sehingga dapat digunakan oleh semua anjing di dunia.

    Untuk membuat object anjing menjadi lebih universal, dibutuhkan kata kunci baru yaitu this. Kata kunci ini bertindak sebagai wadah yang mengacu pada objek yang bersangkutan. Selain itu juga perlu mengubah constructor standar new Object() sehingga menjadi custom constructor. Custom constructor memiliki formula sebagai berikut.

    var nama_object = function(nama_parameter) {
    this.nama_property = nama_parameter;
    };

    Selengkapnya dapat dilihat pada contoh berikut.

    var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
      this.umur = umur_anjing_saya;
      this.warna = warna_anjing_saya;
      this.suara = function() {
        return "Umur saya " + this.umur + " tahun dan berwarna " + this.warna;
      };
    };
    

    Sekarang object “Anjing” (huruf ‘A’ kapital menandakan bahwa itu adalah constructor, meskipun tidak diwajibkan) dapat digunakan untuk semua anjing yang ada di dunia. Contoh saya memiliki seekor anjing yang bernama “heli” yang berumur 5 tahun dan berwarna “putih”, maka dapat dituliskan ke dalam kode sebagai berikut.

    var heli = new Anjing(5, "putih");
    var bicara = heli.suara();
    console.log(bicara);
    

    Sehingga object “Anjing” dengan nama “heli” berkata: “Umur saya 5 tahun dan berwarna putih” :D.

    Pada catatan ini dikenalkan istilah-istilah umum pada OOP, yaitu object, property, method, dan constructor serta kata kunci yang berhubungan dengannya, new dan this. Sampai di sini sudah dibahas tentang enkapsulasi (encapsulation). Pada catatan berikutnya, konsep ini akan diperdalam kemudian dilanjutkan tentang konsep pewarisan (inheritance).

  • Membuat Tombol “Back”

    Pada umumnya browser sudah memiliki tombol “back” yang berfungsi untuk kembali ke halaman sebelumnya. Seorang web developer harus mempunyai alasan yang bagus untuk memasangnya pada website, misal karena adanya permintaan khusus dari klien. Namun, artikel ini ditulis bukan demi klien, melainkan demi ilmu pengetahuan 🙂

    Ada 2 cara yang bisa dipakai, yaitu dengan JavaScript dan PHP. Untuk mencoba kode-kode di bawah ini, dibutuhkan sebuah halaman lain yang berisi link menuju ke halaman yang berisi tombol “back” ini.

    <input type="button" value="Go Back" onclick="history.back(-1)" />
    

    Tentunya implementasi menggunakan JavaScript masih kurang, karena ada kemungkinan user mematikan JavaScript di browser-nya. Berikut ini adalah implementasi dengan PHP.

    <?php
      $url = htmlspecialchars($_SERVER['HTTP_REFERER']);
    ?>
      <a href="<?=$url?>">Go Back</a>
    

    Pada snippet di atas digunakan fungsi PHP htmlspecialchars untuk mensanitasi input dari client. Meskipun secara fisik tidak ada input yang bisa disusupi oleh user, namun harus tetap berpegang pada prinsip dasar pengembangan website, yaitu jangan pernah percaya apa yang dikirimkan oleh client.

    Jika kode PHP di atas langsung dieksekusi tanpa melalui halaman lain, maka akan muncul pesan peringatan:

    Notice: Undefined index: HTTP_REFERER in /var/www/index.php on line 2

    Itu adalah pesan peringatan karena ada yang salah pada kode PHP. Untuk memperbaiki kesalahan itu bisa dipelajari di sini.

    <?php
      $url = isset($_SERVER['HTTP_REFERER']) ? htmlspecialchars($_SERVER['HTTP_REFERER']) : '';
    ?>
      <a href="<?=$url?>">Go Back PHP</a>
    

    Dalam artikel singkat ini selain dipelajari cara membuat tombol “back” namun juga pentingnya menulis kode yang baik dan berkualitas. Kode yang baik dan berkualitas akan membuat website yang dibuat menjadi lebih aman. Mulailah menulis kode yang berkualitas dari kasus yang paling sederhana.

  • Menangani Browser dengan JavaScript Disable

    JavaScript dibutuhkan pada hampir semua website modern. Tanpanya, maka sebuah website tidak akan berjalan sesuai keinginan. Namun apa yang harus dilakukan jika client men-disable dukungan terhadap JavaScript? Solusi yang paling sederhana adalah dengan memberikan peringatan pada client untuk mengizinkan browser menjalankan JavaScript.

    Pada sebuah dokumen HTML, JavaScript disisipkan di antara tag <script> dan </script>. Selain itu juga ada tag <noscript>, yang akan dijalankan pada saat JavaScript di-disable pada browser.

    <script>kode di dalam sini akan dieksekusi saat javascript enable</script>
    <noscript>kode di dalam sini akan dieksekusi saat javascript disable</noscript>
    

    Untuk menangani client yang men-disable JavaScript maka perlu me-redirect-nya ke sebuah halaman yang berisi peringatan untuk meng-enable JavaScript. Namun, bagaimana untuk me-redirect halaman tanpa menggunakan sebuah script? Yaitu dengan menggunakan HTML meta tag yang bernama meta refresh. Meta tag ini akan me-redirect user ke halaman lain dalam interval yang sudah ditentukan pada header.

    <noscript>
      <meta http-equiv="Refresh" content="1; url=warning.html">
    </noscript>
    

    Snippet yang ada di dalam tag <noscript> di atas adalah sebuah meta refresh yang menginstruksikan browser untuk me-refresh halaman website secara otomatis dalam interval yang sudah ditentukan dalam atribut content (dalam satuan detik). Atribut url berisi halaman yang dituju untuk menampilkan pesan peringatan.

  • Pengenalan AJAX Menggunakan jQuery

    AJAX (Asynchronous JavaScript and XML) adalah sebuah teknik pemrograman yang memungkinkan kita melakukan pertukaran data antara client dengan server secara asynchronous, yang artinya komunikasi terjadi di belakang layar sehingga halaman web tidak harus dimuat ulang hanya untuk mengganti sebagian dari isinya.

    Sebelum era jQuery, pemrograman AJAX sangat sulit dilakukan, karena berhubungan dengan pengaksesan DOM menggunakan JavaScript. Terimakasih kepada jQuery, sehingga pemrograman menggunakan teknik AJAX bisa menjadi lebih mudah dan cepat.

    Penerapan teknik AJAX yang paling sederhana adalah untuk memanggil dan memuat sebuah dokumen HTML ke dalam DOM. Teknik ini dapat dengan mudah kita wujudkan dengan menggunakan fungsi load() dari jQuery. Secara singkat fungsi ini berguna untuk memuat data (HTML dokumen) dari server dan menyisipkannya ke dalam elemen yang sesuai.

    $(document).ready(function() {
      $('#tombol').click(function(){
        $('#container').load('content.html');
        });
      });
    

    Selain menggunakan fungsi jQuery load(), potongan kode di atas juga menggunakan fungsi click(). Fungsi ini akan dieksekusi ketika ada click event (user meng-klik sebuah tombol atau link). Fungsi ini mirip dengan JavaScript event onClick.

    Berikut ini adalah source code lengkapnya. Untuk mencoba kode ini, dibutuhkan juga sebuah file HTML yang akan dipanggil, beri nama “isi.html” dan isilah dengan sembarang kode HTML.

    <!DOCTYPE html>
    <html>
    <head>
      <script src="http://code.jquery.com/jquery-latest.js"></script>	
      <script type="text/javascript">
      $(document).ready(function() {
        $('#tombol').click(function(){
          $('#kontainer').load('isi.html');
          });
        });
      </script>
    </head>
    <body>
      <input type="button" id="tombol" value="klik di sini">
      <div id="kontainer">
        <!--Isi dari file content.html akan ditampilkan di sini-->
      </div>
    </body>
    </html>
    

    Ketika tombol diklik, AJAX memanggil URL “isi.html” dan menyisipkannya ke dalam DOM. DOM yang dimaksud di sini adalah sebuah elemen dengan id=”kontainer”.

    Karena fungsi jQuery click() mirip dengan event JavaScript onClick, maka source code di atas dapat juga ditulis seperti berikut:

    <!DOCTYPE html>
    <html>
    <head>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
      <script type="text/javascript">		
      function loadIsi(){
        $('#kontainer').load('isi.html');
      }
      </script>
    </head>
    <body>	
      <a href="#tombol" onclick="loadIsi(); return false;">load isi</a>
      <div id="kontainer">
        <!--Isi dari file content.html akan ditampilkan di sini-->
      </div>
    </body>
    </html>