Javascript : Function sebagai parameter

Halo , jumpa lagi dengan makkul.com. Kali ini saya akan berbagi tips tentang javascript callback alias function as parameter. Apa itu function as parameter ? Di dalam javascript, function telah menjadi bagian yang sangat penting yang menggantikan kedudukan class. Jika dalam bahasa pemrograman lain kita bisa membuat object dan memasukan object tersebut sebagai parameter. contoh kode php :

<?php

  //membuat class a
  class a
  {
 var $in_a = "this text is from a";
  }
  
  
  //membuat class b 
  class b
  {
 function show_a($a)
 {
  echo $a->in_a;
 }
  }
  
  
  //implementasi
  $oa = new a();
  
  $ob = new b();
  
  //menggunakan object a sebagai parameter untuk function pada object b
  $ob->show_a($oa);
  
?>

Pada kode diatas, object kita gunakan sebagai parameter. Dan karena kita mengetahui isi dari object , maka kita dapat menggunakan property - property dari object tersebut untuk kita gunakan pada function yang membutuhkan. Jika telah mengerti kode diatas, maka kita akan siap ke langkah selanjutnya untuk pengertian function as parameter pada javascript. Berikut ini adalah implementasi contoh kode diatas dengan menggunakan javascript.

function a()
{
 this.inA = "dari dalam a";
}

a.prototype.get_in_a = function()
{
 console.log("hello "+ this.inA);
};


function b()
{
 this.nama = "b";
}

b.prototype.show_a = function(ax){

 //mengecek apakah parameter adalah function
 if(typeof a=="function")
 {
  ax.get_in_a();
 }
};


var oa = new a();
var ob = new b();

ob.show_a(oa); // menggunakan object a sebagai parameter

Pada contoh kode diatas, object dari function a, menjadi masukan untuk object b. Dan karena kita sudah mengetahui fungsi yang ada didalam function a, maka kita bisa menjalankan fungsi tersebut didalam function pada kelas b :). Happy Coding!

Javascript : Tips tentang Array dan Object

Halo, jumpa lagi dengan makkul.com dan tulisan tentang javascript. Kali ini saya ingin berbagi tips tentang javascript array.

Jika kamu telah mengenal JSON (Javascript object notation) atau cara penulisan object di javascript, maka sebenarnya property dalam object bisa diakses dengan notasi array, atau dengan kata lain, json bersifat seperti assosiative array pada php ataupun hashmap pada java.

contoh kode :

var a = {nama:"budi",alamat:"pekanbaru"};

//mengakses property dengan cara object
console.log(a.nama);

//mengakses property dengan cara array
console.log(a["nama"]);

Tapi sebaliknya untuk array tidak bisa berlaku seperti objet :)

That's it tips kali ini. Happy Coding!

Latihan Javascript Mudah : Menggunakan Chrome Developer Tools

Hi semua, sudah lama juga tidak ada tulisan baru di blog ini. Walaupun demikian bukan berarti saya tidak memantau blog ini :).

ok sebagai selingan dan tips kali ini saya akan membagikan ide tentang belajar javascript cara mudah. Ya, karena kita bisa langsung tau hasil dari kode kita.

Yang kita butuhkan adalah Chrome webbrowser dari google, jika belom ada silahkan didownload dulu. Jika sudah ada, tekan tombol Ctrl+shift+I untuk membuka developer tools. Disini kita klik Console untuk memunculkan console javascript.

didalam Console javascript ini , semua perintah javascript yang kita tulis dan enter akan langsung dijalankan dan masuk ke memory browser, jadi kita bisa melakukan test. Lebih jauh lagi, apabila kita melakukan debug terhadap aplikasi yang berjalan pun bisa dilakukan. Namun, sebelum kita berlari, kita harus mampu berjalan. dan berikut ini adalah contoh pemrograma javascript dengan Chrome Developer Tools Console.

var a = 10; //(enter)
var b = 20; //(enter)
console.log(a+b); //(enter)

Yup demikian !, jika sukses maka akan muncul angka 30 didalam console tersebut. Happy coding! dan jangan lupa untuk dibagi dan dikembangkan idenya!.

JQuery : Membuat dialog Box

Halo, kali ini kita mencoba membuat dialog box menggunakan jquery ui. Apa itu jquery UI ? , jquery UI adalah User Interface (UI) yang dibuat sebagai plugin jquery, sehingga cara penggunaannya sama seperti menggunakan plugin jquery yang lain.

Berikut ini contoh tampilan dialog sederhana yang saya gunakan dalam aplikasi yang saya buat.

Berikut ini langkah - langkah pembuatan dialog :

1. Buat sebuah tag dalam body (boleh dimanapun) div yang berisi kontent html table seperti pada form diatas. Jangan lupa beri id untuk div yang kita buat ini. saya memberi nama "dialog_harga". Id ini penting , agar kita dapat dengan mudah men-select dari jquery , nih maksudnya seperti ini --> $("#dialog_harga")
2. Buat Inisialisasi kode.

Ya, cukup demikian langkah - langkahnya. Untuk langkah lain yang sudah pasti, seperti : include semua file jquery dan jquery-ui kedalam body. Mari kita lihat kodenya :

JQuery : Memahami penggunaan class selector

Halo semua, kali ini saya ingin berbagi pemahaman tentang jquery class selector. Hm, sebenarnya saya tidak tau pasti kata yang tepat untuk class selector ini, tapi karena selector ini berdasarkan kepada class name di css, maka class selector menurut saya adalah istilah yang cukup tepat. :)

Ok, lanjut dengan contoh ya. Coba lihat kode berikut ini :

<html>

<head>

<style type=\'text/css\'>

.judul{

font-weight:bold;

}

</style>

</head>

<body>

Judul Buku <br>

<ul>

<li class=\'judul\'>Habis Gelap terbitlah terang</li>

<li class=\'judul\'>Salah Asuhan</li>

<li class=\'judul\'>Siti Nurbaya</li>

</ul>



</body>

</html>

Lowongan Kerja PHP

Hmm judulnya seakan saya mau posting lowongan kerja ya ? engga, saya engga mau posting lowognan kerja. tapi saya mau kasi tips tentang tren php saat ini. Jadi kamu bisa tau apa yang harus dikejar.

Nih saya kasih tau langsung aja :

Database : MySQL , MSSQL , Oracle , MongoDB. Silahkan pilih salah satu. dua lebih baik.

Framework : Codeigniter,Zend,Symfony

Javascript : jQuery,Jquery UI, Ext-js

Webservice : type data : xml,yml,kml,json

protocol : xml-rpc,soap,custom

Nah, list di atas merupakan pilihan, jadi pilihlah masing - masing 1 dari 3 kategori tersebut. dua lebih baik.

Lalu apa yang harus dilakukan untuk mendapatkan pengetahuan itu ?. yah latihan bikin project, misal :

1. clone wordpress dengan fungsi xml-rpc agar bisa memposting dari web/aplikasi lain

2. Aplikasi Point Of Sales dengan fitur - fitur jQuery UI

Ok. saya cukup disini dulu, selanjutnya akan saya lengkapi. have a nice hunting!

Membuat Plugin jQuery

Untuk membuat plugin jQuery sebenarnya cukup mudah. berikut ini adalah langkah - langkahnya

1. Buat kode jQuery.fn.myFunction = function(args,e){}

2. Modifikasi kode tersebut

3. Test kode tersebut.

jQuery.fn.myFunction = function(args,e) {

//gunakan kata kunci this untuk menunjuk object/element saat ini
//ini karena function bersifat relatif terhadap element hasil selection jquery

return this.each(function(){

 $(this).click(function(){
     alert("hello saya custom plugin");
});

};
};

Nah sampai disini anda sudah membuat plugin untuk jquery.Simpan file diatas dengan nama myplugin.js

Berikut ini cara penggunaannnya. Asumsi file myplugin.js dan jquery.js diletakan dalam folder yang sama.

<html>
<head>
<Script language="javascript" src="jquery.js"></script>
<Script language="javascript" src="myplugin.js"></script>
<Script language="javascript">

$(document).ready(function(){

//1. selection diaktifkan pada element html yang memiliki kelas mylabel
//2. panggil custom plugin/function

$(".mylabel").myfunction();

});

</script>
</head>
<body>
<label class='mylabel'>klik me</label>
</body>
</html>

Nah, jika tidak ada masalah, maka apabila kamu mengklik label tersebut maka akan muncul pesan alert yang berasal dari custom plugin/function. Selamat Mencoba dan Happy Coding!

Download Contoh Diatas.
Download versi PDF dari artikel ini

Contoh Penggunaan JQuery

Berikut ini contoh penggunaan jquery. Jika kamu pernah mengenal pemrograman javascript di web maka pasti pernah mengenal onClick seperti pada contoh ini :

<html>
<head>
<Script language="javascript">

function hello()
{
alert("hello world!");
}

</script>
</head>
<body>
<input type="button" onClick="hello()" value="click me"/>
</body>
</html>

Jika html diatas dijalankan/dibuka dari browser maka akan menampilkan button yang apabila di click maka akan muncul alert.

Pendekatan jQuery agak berbeda, jQuery melakukan selection/query terhadap element - element html. berikut ini contoh selection jquery berdasarkan kode diatas.

<html>
<head>
<-- assumsi jquery.js ada dalam folder yang sama -->
<Script language="javascript" src="jquery.js" ></script>
<Script language="javascript">

$(document).ready(function(){
$("input").click(function(){
alert("hello jquery!");
});
});

</script>
</head>
<body>
<input type="button" value="click me"/>
</body>
</html>

Bila diperhatikan memang sangat berbeda ya. mari kita bahas

$(document).ready(function(){

//disini kode anda

});

merupakan code yang membantu jquery memastikan bahwa document telah terdownload sempurna, sehingga tidak ada bagian - bagian halaman yang tertinggal.

$("input").click(function()
{
//disini code
});

sedangkan kode diatas ini berarti jquery melakukan selection terhadap tag input, dan mengikat fungsi klik pada elemen/tag input tersebut. Sehingga jika anda punya element selain button maka akan ikut terquery/terpilih oleh jquery.

Contoh selection lainnya :

• $("#myinput") --> mencari element dengan id "myinput"
• $(".myclass") --> mencari element dengan css class "myclass"
• $(".myclass").children() --> mencari isi dari element dengan css class "myclass"

Nah jquery selection ini mengikuti konsep CSS3 Selection.

Ok. Cukup Sekian untuk Artikel Ini. Happy Coding!

Download jQuery cheatseet untuk mengetahui lebih banyak jquery selection

Download Jquery chart referens

Download versi PDF artikel Ini

Pengenalan JQuery

Ini tulisan khusus untuk yang masih bingung tentang jQuery. Pertanyaan - pertanyaan semacam, "apa sih jQuery itu?", "Apasih pengertian jQuery?" akan terjawab disini.

Buat yang pernah mencoba menggunakan javascript, pasti lebih mudah mengerti hal yang akan saya sampaikan. Buat yang belum mengerti, maka kita ambil gampangnya saja. So, apasih jquery itu ? , "jQuery adalah library javascript yang bisa digunakan untuk mempermudah interaksi antara programer dengan halaman web/file html".

Jadi urusan - urusan modifikasi html pada waktu halaman sedang diakses dari browser menjadi lebih mudah dengan jQuery. Terus mungkin ada yang bertanya ,"Koq halaman yang sudah diakses dimodifikasi ?" , nah jawabannya bisa liat facebook. di facebook notification misalnya, jika ada notifikasi baru maka akan muncul angka. Ini semua merupakan hasil dari pemrograman dengan Javascript. Nah, dengan jQuery maka hal - hal semacam itu bisa dilakukan dengan cara relatif lebih mudah.

Untuk tulisan berikutnya, saya akan memberi contoh - contoh penggunaan jQuery.

Happy Coding!

Baca Juga

Contoh Penggunaan Jquery

Textcounter : Jquery Plugin Untuk Menghitung jumlah karakter dalam textbox

Textcounter ini merupakan penghitung jumlah character didalam textbox yang dapat digunakan untuk mengetahui jumlah character yang telah ditulis juga jumlah message yang akan dikirim.

Silahkan digunakan dan dimodifikasi dengan tetap mencantumkan sumber aslinya. Happy Coding!

Download Plugin

Download Latest Update.

PHP: Membuat JSON dengan PHP

Untuk membuat json dengan php, langkah pertama yang perlu diingat adalah , php digunakan untuk menghasilkan string yang akan digunakan oleh browser. Sehingga apapun yang kita hasilkan baik html,text,xml ataupun json sesungguhnya tidak menjadi masalah asalkan kita tau cara membentuk format yang diinginkan tersebut.

Jika belum mengerti format json, ada baiknya baca dulu artikel sebelumnya. Jika sudah, baik kita lanjutkan artikel ini.

Contoh 1

<?php

header("content-type:application/json");
echo "{\"nama\":\"budi anduk\"}";

?>

jika dijalankan akan menghasilkan :
{"nama":"budi anduk"}

Ini adalah data json paling sederhana yang terdiri dari 1 buah variabel, yaitu nama dan isinya string "budi anduk".

Javascript : Membuat Array Yang Unik

Membuat sebuah array yang unik ide dasarnya adalah :

1. Sort / Urut array sehingga isi yang sama akan berdekatan
2. lihat semua isi array dengan melakukan perulangan
3. dalam perulangan kita harus menyimpan element/isi array sebelumnya yang akan kita bandingkan dengan element yang sedang kita lihat.
4. Jika element tidak sama maka kita tambahkan kedalam array yang baru.

Ini Kodenya :

function distinct_array(anyArray){

var cval="";
var pval="";
var c=0;

//siapkan array yang baru
var result = new Array();

//order/urut array
anyArray.sort();

//lakukan perulangan
for(i=0;i<anyarray.length;i++){

cval = anyArray[i];

//jika previous value tidak sama dengan current
//masukan ke dalam array yang baru

if(cval!=pval)
{
result[c]=cval;
c++;
}

//timpa nilai lama dengan nilai yang baru
//untuk pengecekan selanjutnya
pval = cval;
}

return result;

}

Javascript : Pengenalan JSON

Saat ini aplikasi web telah menjadi tren yang terus menerus mengalami perbaikan. Berbagai solusi mulai dari cara koneksi (XMLHTTPRequest) dan Type data (Text,XML,JSON) telah dibuat untuk kemudahan pembuatan aplikasi web. Saya akan berbicara mengenai JSON yang merupakan typedata yang menjadi pilihan majority untuk pengembangan aplikasi web.

JSON, Javascript Object Notation adalah suatu cara penulisan data yang bersifat object oriented dan 100% compatible dengan javascript.

Mengapa Mengunakan JSON ?
1. JSON 100% Javascript compatible , jadi bisa dijalan disetiap browser
2. JSON Memiliki type data, tidak seperti xml
3. JSON Mudah dibaca baik oleh mesin maupun manusia
4. JSON Mudah ditulis/dibuat