Belajar Adobe AIR : Membuat MP3 Player Sendiri

Udah ga asing dong dengan yang namanya Winamp, ITunes, Windows Media Player dsb. Yup, itulah beberapa software yang sering kita gunakan klo mau nyetel MP3, malah saking seringnya, sampe-sampe kerja jadi ga konsen kalo ga sambil denger musik. Nah pernah ga sih terpikir untuk bikin seperti itu ?? (klo yang bukan orang IT sih jawabannya udah pasti, NGGAK..... hehehe, sorry y).

Jujur ane juga ga kepikiran untuk bikin begituan, udah ada yg gratis n bagus kok, ngapain pusing2. Tapi....... klo yang gratis n bagus itu buatan kita sendiri, apa nggak canggih tuh namanya. Well, pelajaran kedua dari Adobe AIR ini, kita akan coba bagaimana membuat MP3 Player, belum canggih-canggih amat sih, y lumayanlah buat cari suasana baru, asal bisa Play, Pause sama Stop aj..... :D.

Adobe AIR sendiri ternyata udah support function-function untuk itu, perhatikan script berikut :

//selalu sertakan AIRAliases.js, file ini wajib ada<script type="text/javascript" src="AIRAliases.js"></script>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script>

//Define variable

var soundChannel1, mp3, sound, pausePosition, fold;

                                   

function change_mp3(val)

{

$('#temp_mp3').attr("value",val);

        fold = $('#target_mp3').attr("value");

if(soundChannel1) soundChannel1.stop();

mp3 = air.File.applicationDirectory.resolvePath(fold+"/"+val);

sound = new air.Sound(new air.URLRequest(mp3.url));

soundChannel1 = sound.play();

        $('#temp_play').attr("value","play");

$('#temp_pause').attr('value','');

}

function play_mp3()

{

fold = $('#target_mp3').attr("value");

if($('#temp_mp3').attr("value"))

{

if($('#temp_play').attr("value") == "")

{

var val = $('#temp_mp3').attr("value");

mp3 = air.File.applicationDirectory.resolvePath(fold+"/"+val);

sound = new air.Sound(new air.URLRequest(mp3.url));

soundChannel1 = sound.play();

$('#temp_play').attr("value","play");

}

}

}

function pause_mp3()

{

pausePosition = soundChannel1.position; 

soundChannel1.stop();

$('#playz_mp3').attr('style','display:none;');

$('#resumez_mp3').attr('style','display:block;background:#FFFFFF;');

$('#temp_pause').attr('value','pause');

}

function resume_mp3()

{

if($('#temp_pause').attr('value') == "pause")

{

fold = $('#target_mp3').attr("value");

var val = $('#temp_mp3').attr("value");

pausePosition = soundChannel1.position;

mp3 = air.File.applicationDirectory.resolvePath(fold+"/"+val);

sound = new air.Sound(new air.URLRequest(mp3.url));

soundChannel1 = sound.play(pausePosition);

$('#temp_pause').attr('value','');

}

}

function stop_mp3()

{

$('#playz_mp3').attr('style','display:block;background:#FFFFFF;');

$('#resumez_mp3').attr('style','display:none;');

soundChannel1.stop();

}

function open_folder()

{

var file = air.File.desktopDirectory;

file.addEventListener( air.Event.SELECT, function( e ) {

var list = e.target.getDirectoryListing();

var playlist="";

var name_mp3,cek_type;

for( var f = 0; f < list.length; f++ )

{

if( !list[f].isDirectory && !list[f].isHidden )

{

name_mp3 = list[f].name.substring(0,parseInt(list[f].name.length)-4);

cek_type = list[f].name.substring(parseInt(list[f].name.length)-3,list[f].name.length);

if(cek_type == "mp3")

{

if($('#temp_mp3').attr('value') == "") $('#temp_mp3').attr('value',list[f].name);

playlist += "<li><a style='display:block;background:#FFFFFF;' class='klik' alt='"+list[f].name+"'>"+name_mp3+"</a></li>";

}

}

}

$('#playlist').html(playlist);

$('#target_mp3').attr("value",e.target.nativePath);

$('.klik').click( function( e ) {

     change_mp3($(this).attr('alt'));

 });

});

file.browseForDirectory( 'Pilih Folder Musik' );

}

$( document ).ready( function() {

  $('#download-link').click( function( e ) {

open_folder();

});

});

</script>

Script HTML-nya kurang lebih seperti ini :
<div id="all_container">
  <a href="#" id="download-link" style="display:block;background:#FFFFFF;">Add Folder</a>

<input type="hidden" id="temp_mp3" value="">
<input type="hidden" id="temp_play" value="">         <input type="hidden" id="temp_stop" value="stop">


<input type="hidden" id="temp_pause" value="">
<input type="hidden" id="target_mp3" value="">

<div id="playlist_container">
<div id="tombol">
<a onClick="play_mp3()" class="tombol_play" id="playz_mp3" style="display:block;background:#FFFFFF;">Play</a>
<a onClick="resume_mp3()" class="tombol_resume" id="resumez_mp3" style="display:block;background:#FFFFFF;display:none;">Resume</a>
<a onClick="pause_mp3()" class="tombol_pause" id="pausez_mp3" style="display:block;background:#FFFFFF;">Pause</a>
<a onClick="stop_mp3()" class="tombol_stop" id="stopz_mp3" style="display:block;background:#FFFFFF;">Stop</a>
</div>

<ul id="playlist">
</ul>
</div>
</div>

Nah tinggal dikasih sentuhan CSS sesuai selera, MP3 Player ente siap digunakan. Sample lengkapnya bisa di sedot di MazhtersPlaylist.zip

Belajar Adobe AIR : Membuat Tray Icon

Alhamdulillah bisa ketemu lagi sama Adobe AIR, udah lama bgt ga ngobrol tentang ini, buat mengingat lagi langkah awal bagaimana instalasi Adobe AIR, klik di sini ya. Nah berawal dari posting ini, yuks pelan2 kita bermain-main dengan AIR, nggak sulit kok, cuma butuh 1 syarat...... jgn takut basah....... :P.

Pelajaran pertama ini adalah bagaimana membuat Tray Icon, apa itu Tray Icon ?? Mungkin sebagian besar dari kita udah sering pake YM, Gtalk atau sejenisnya. Jika diaplikasi tersebut kita klik tanda "x", akan muncul Icon kecil di kanan bawah monitor kita, nah itulah yg dinamakan Tray Icon. Fungsinya memang tidak terlalu signifikan, bisa dibilang hanya untuk menghemat space di Toolbar atau mungkin agar terlihat lebih cantik saja.

Berikut script untuk membuat Tray Icon tersebut :
//selalu sertakan AIRAliases.js, file ini wajib ada.
<script type="text/javascript" src="AIRAliases.js"></script>


//define variable win sebagai alias dari window.nativeWindow, biar penulisan setelahnya ga panjang2

var win = window.nativeWindow;


var iconLoadComplete = function(event) 
{ 
    air.NativeApplication.nativeApplication.icon.bitmaps = [event.target.content.bitmapData]; 
}

air.NativeApplication.nativeApplication.autoExit = false; 
var iconLoad = new air.Loader(); 
var iconMenu = new air.NativeMenu(); 
//perintah ini untuk menambahkan menu "Exit" pada Tray Icon yg kita buat
var exitCommand = iconMenu.addItem(new air.NativeMenuItem("Exit")); 
exitCommand.addEventListener(air.Event.SELECT,function(event){ 
        air.NativeApplication.nativeApplication.icon.bitmaps = []; 
        air.NativeApplication.nativeApplication.exit(); 
        //perintah ini untuk mengclose window atau menutup aplikasi desktop.
        win.close();
}); 


//perintah ini agar ketika Tray Icon di klik, window akan muncul, begitu jg sebaliknya.
var TrayIcon_Click = function(event){
    if (window.nativeWindow.visible) {
        window.nativeWindow.visible = false;
        win.minimize();
    } else {
        window.nativeWindow.visible = true;
        win.restore();
        //nah ini agar window yg muncul selalu berada di paling depan, berguna jika ada beberapa window.
        window.nativeWindow.orderToFront();
    }
};


if (air.NativeApplication.supportsSystemTrayIcon) { 
    air.NativeApplication.nativeApplication.autoExit = false; 
    iconLoad.contentLoaderInfo.addEventListener(air.Event.COMPLETE,iconLoadComplete); 
    //ini logo yg akan muncul di kanan bawah layar / gambar Tray Iconnya.
    iconLoad.load(new air.URLRequest("icons/logo_mazhters16x16.png")); 
    //ini text ketika mouseover di Tray Icon
    air.NativeApplication.nativeApplication.icon.tooltip = "Demo Application"; 
    air.NativeApplication.nativeApplication.icon.menu = iconMenu;
    air.NativeApplication.nativeApplication.icon.addEventListener("click", TrayIcon_Click);
}

Sangat mudah bukan ?? sebenarnya ente tinggal siapin icon/logo saja, yg lainnya bs tinggal copy paste. Ok Guys..... selamat mencoba..... tunggu modul berikutnya......

Catatan Kecil : Tips dalam membuat WAP

Hal hal kecil terkadang sering kita lupakan, padahal dari situlah sesuatu yang besar berawal. Mulai dari sekarang, ane akan coba sharing sesuatu yang mungkin di anggp sepele ( dalam bidang programming tentunya ) yang pada kenyataannya tidak bisa di abaikan, seperti ada pepatah bilang "batu kecil memang tidak melukai, tapi bisa membuat orang tergelincir".

Pertama yang lagi anget-angetnya di benak ane, yaitu hal-hal yang perlu diperhatikan dalam pembuatan WAP, berikut tips-nya :

• Hindari penggunaan design yang WAH!!!, sebaiknya design/interface WAP yang sederhana, jangan menggunakan image terlalu banyak, cukup pakai background color saja.
• Buat flow sesederhana mungkin, walaupun akan berbeda dengan versi WEB misalnya, tapi itu jauh lebih baik, sebab menurut hasil analisa, para pengguna WAP bisa dibilang agak 'males' jika berhadapan dengan flow yang ribet.
• Jangan menggunakan menu panjang ke samping (maksimal 2 saja), dan gunakan persentase untuk menentukan width-nya ( ingat, screensize terkecil pengguna WAP itu 128x128 ).
• CSS yang di support oleh HP, berbeda dengan Browser, gunakan script ini untuk membedakan keduanya, <link type="text/css" media="handheld" href="css/handheld.css" />
  <link type="text/css" media="screen" href="css/screen.css" /> handheld.css untuk HP, dan screen.css untuk Browser.
• Sebaiknya gunakan <table><tr><td> daripada menggunakan <ul><li>, bisa dibilang, buat seperti pertama kali anda belajar HTML.
• Sebisa mungkin hindari penggunaan fungsi javascript seperti onClick, onChange dkk.

Kira-kira itu tips dari ane ( ini kisah nyata loh, pengalaman pribadi, hehe ). Yang perlu dicatat disini, tips2 tersebut jika target market anda adalah semua pengguna HP yang bisa menggunakan WAP, tapi jika target market anda dalam pembuatan WAP untuk type2 smartphone, beberapa tips diatas mungkin bisa di abaikan.

Bermain LDAP dengan PHP

Aseekkkk nambah lagi ilmunya, kali ini kita bermain-main dengan LDAP yuk. LDAP apaan sih ??
LDAP (Lightweight Directory Access Protocol) merupakan suatu network protokol yang digunakan untuk mengakses direktori.

Pengertian direktori disini adalah sekumpulan informasi yang disusun berdasarkan hirarki tertentu. Sebuah direktori merupakan sebuah database, yang pengelolaan informasinya di dasarkan pada atribut setiap item datanya, atribut-atribut tersebut diantaranya :
uid -> User id
cn -> Common Name
sn -> Surname
l -> Location
ou -> Organisational Unit
o -> Organisation
dc -> Domain Component
st -> State
c -> Country

Ok cukup sekilas tentang LDAP, kita lanjut ke pokok permasalah. Buat ente yang blum pernah berhubungan dengan LDAP sebelumnya, jangan merindik duluan.... koneksi LDAP dengan PHP ternyata tidak sesulit yang dibayangkan, simple dan mudah dimengerti. Siap-siap.... berikut langkah-langkahnya.

1. Buka phpinfo() dulu, pastikan LDAP sudah dalam posisi Enable, klo blum, buka file php.ini, perhatikan pada bagian ini ";extension=php_ldap.dll", hilangkan titik koma (;) di depannya.

2. Perhatikan skrip berikut :

<?php
$ldap_host = '123.456.7.89'; //Host LDAP
$ldap_domain = 'mazhters.com'; // LDAP Domain
$ldap_dn = 'dc=mazhters,dc=com'; // Domain Component
// Jika $ldap_domain = 'mazhters.co.id'; 
// maka $ldap_dn = 'dc=mazhters,dc=co,dc=id';
$ldap_user = 'userlogin';
$ldap_pass = 'userpass';

$ldap_conn = ldap_connect($ldap_host);
if($ldap_conn) 
{
// menyatukan aplikasi dengan server LDAP
$ldapbind = ldap_bind($ldap_conn, $ldap_user, $ldap_pass);
// verify binding
if (!$ldapbind){
die('Login gagal, userlogin or userpass salah');
}
}
else
{
die('Koneksi ke LDAP Gagal');
}

//Ada beberapa server yang mesti minta set_option ini dulu
ldap_set_option($ldap_conn, LDAP_OPT_PROTOCOL_VERSION, 3);
ldap_set_option($ldap_conn, LDAP_OPT_REFERRALS, 0);

//Mencari nilai-nilai dari atribut LDAP sesuai filter yang di inginkan.
//Sample yg ane pake ini untuk mencari nilai-nilai atribut berdasarkan userlogin
$result = ldap_search($ldap_conn, $ldap_dn, "(samaccountname=".$ldap_user.")");

//Nah ini untuk narik nilai atributnya.
$entries = ldap_get_entries($ldap_conn, $result);

//Ini untuk munculin, tinggal dipilih-dipilih value mana yang mau diambil
echo "<pre>";
print_r($entries);
echo "</pre>";
die();
?>

Mudahkan ?? nah dari sini tinggal di explore lagi sesuai kebutuhan.

Login website via Facebook

Wah wah udah lama banget ga nulis tutorial, berarti ilmunya blum nambah2 nih... payah.... Yuk kita saling sharing lagi, cekidot.

Mungkin ente sering mengunjungi website yang mengharuskan ente daftar kemudian login untuk dapat masuk kedalamnya. Malahan saking banyak-nya website seperti itu yg ente kunjungi, al hasil sampe lupa username n passwordnya karena kelamaan ga buka2 lagi. Karena issue itu, para developer mencari cara bagaimana memudahkan user untuk melakukan login, salah satunya dengan menggunakan account Facebook untuk login ke website.

Seberapa hebat sih metode ini ?? Jika selama ini kita harus masukkan username n password untuk login ke website yg dituju, dengan menggunakan metode ini, maka cukup dengan sekali klik, otomatis anda sudah login jg ke website yg bersangkutan, dengan catatan ente pada posisi sudah login di Facebook, tapi jika blum login di Facebook, otomatis engine akan meminta ente untuk login dulu. Sebagai contoh yang
pernah ane bikin di sini. Dan berikut langkah-langkahnya :

1. Punya Account facebook (ini syarat utama... hehehe).
2. Pastikan email yg anda gunakan untuk mendaftar di Facebook dan di website yang dituju, harus sama (karena kita akan menggunakan field email ini untuk comparasi).
3. Buat aplikasi baru di Facebook, pada posisi ini ane anggap ente sudah bisa membuat aplikasi di Facebook yang paling sederhana, klo blum, coba cari tau gimana cara bikin aplikasi di Facebook.
4. Masukkan script berikut di folder tempat aplikasi Facebook ente.

Pada tahap ini sebenarnya login menggunakan Facebook sudah selesai, tinggal bagaimana memodifikasi engine login di website ente dengan parameter email yang didapat dari email Facebook. Berhubung setiap programmer memiliki gaya yg berbeda di engine login ini, jd klo ada yg masih bingung, bisa langsung tanya ke ane ya.... bisa via YM, Email or Lewat sini jg boleh.

Selamat mencoba.....