Asudahlah.com

Programming, tutorials, mechatronics, operating systems, and other tech stuff

[FREEWARE] Tomahawk 0.8.4 Music Player

1 comment
Screenshot - 12282015 - 08:37:56 AMTomahawk adalah audio player open source generasi baru yang menyediakan akses musik dari beberapa sumber. Dapat memainkan lagu-lagu dari library musik lokal Anda, layanan musik berlangganan seperti Spotify dan SoundCloud, atau jaringan library music.

Tomahawk juga dapat menghubungkan Anda dengan komputer lain dan teman-teman untuk berbagi lagu-lagu, Telusuri library musik mereka, dan melihat-lihat playlist milik mereka.

Dengan aplikasi ini, anda juga bisa streaming internet radio, melihat rilis terbaru, dan lagu top dari berbagai tangga lagu musik online.

Tomahawk adalah music player lengkap, yang menggabungkan berbagai sumber musik dan jaringan sosial dalam interface / antarmuka yang mudah digunakan dan intuitif.

  • Publisher

  • Release date : 2015-04-18

  • OS : Windows XP/Vista/7/8


asudahlah-btn-download-mirror-1

1 comment :

Post a Comment

TP-Link Access Point/router batch reboot/restarter php script [ID]

2 comments
For english version, click here.

Jika anda memiliki infrastruktur wireless network, yg terdiri dari banyak Access point dan Wi-Fi router. Dan pada suatu ketika, anda harus me-reboot semua access point. Akan sangat melelahkan jika anda harus login ke setiap AP/Router dan restart secara manual satu persatu.

Ngapain manual kalau kita bisa bikin kode buat nge-restart masal?

Untungnya, dalam kasus saya. semua access point mempunyai merek sama, yaitu TP-Link. Setelah beberapa riset dan experimen, akhirnya ketemu cara me-reboot access point dan router dengan merk itu melalui URL. Lalu saya tulis script PHP untuk membereskan semuanya.

Di infrastruktur saya, saya buat semua access point dan router mempunyai IP sub yg berbeda dari DHCP. Semua memiliki username dan password sama, semua memiliki metode otentikasi sama.Skrip ini menggunakan bahasa PHP, berjalan di terminal. Jadi mudah untuk diotomatiskan. Tinggal nambahin ke cron job. Jangan lupa di "chmod 777" dan jangan lupa php5-cli sudah terinstall.

Berikut adalah script yg bisa anda copy dan sesuaikan dengan kondisi masing-masing.

[code lang="php"]#!/usr/bin/php
<!--?php
//----------Auth config
$apUser="admin";
$apPass="admin";
//----------Lists of AP and it's IP address
$apList=Array(
Array("Ext1","192.168.0.15"),
Array("Ext2","192.168.0.17"),
Array("Jalak","192.168.0.2"),
Array("Barat","192.168.0.3"),
Array("-","192.168.0.5"),
Array("Parkit","192.168.0.6"),
Array("Murai","192.168.0.9"),
Array("Nuri","192.168.0.10"),
Array("Kenari","192.168.0.12"),
Array("Cucak","192.168.0.13"),
Array("Hud-Hud","192.168.0.14"),
);

function curl_download($ip){
$Url="http://".$ip."/userRpm/SysRebootRpm.htm?Reboot=Reboot";
// is cURL installed yet?
if (!function_exists('curl_init')){
die('Sorry cURL is not installed!');
}

// OK cool - then let's create a new cURL resource handle
$ch = curl_init();

// Set URL to download
curl_setopt($ch, CURLOPT_REFERER, "http://".$ip."/userRpm/SysRebootRpm.htm");
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (X11; Ubuntu; Linux i686;rv:12.0) Gecko/20100101 Firefox/12.0");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, $Url);
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_ANY);
curl_setopt($ch, CURLOPT_USERPWD, $apUser.":".$apPass);
curl_setopt($ch, CURLOPT_TIMEOUT, 120);

$output = curl_exec($ch);

curl_close($ch);

return $output;
}

print "n";
print "e[1;34mAP Resetter. By Cybermujahidze[0mn";
print "n";
print "List of AP:n";
foreach($apList as $ap){
print str_pad($ap[1],15,' ',STR_PAD_RIGHT)." ".str_pad($ap[0],10,' ',STR_PAD_RIGHT)." queuedn";
}
print "n";
print "Resetting ALL APn";
print "----------------n";
foreach($apList as $ap){
if(curl_download($ap[1])){
print str_pad($ap[1],15,' ',STR_PAD_RIGHT)." ".str_pad($ap[0],10,' ',STR_PAD_RIGHT)." [ e[1;32mAP Rebootede[0m ]n";
}else{
print str_pad($ap[1],15,' ',STR_PAD_RIGHT)." ".str_pad($ap[0],10,' ',STR_PAD_RIGHT)." [ e[1;31m AP Down e[0m ]n";
}
}
print "AP reset finished.n";
print "------------------n";
?-->
[/code]

2 comments :

Post a Comment

Mengatasi fungsi suspend yang hilang di cinnamon ubuntu

No comments
Setelah lama menggunakan xfce di laptop ubuntu saya. Akhirnya beberapa hari lalu (karena ditipu guru saya) saya terpaksa mengganti desktop saya menjadi cinnamon.

Selama ini, saya tidak pernah mematikan / shut down laptop saya. Setiap saya selesai menggunakan, selalu saya suspend agar tidak perlu menunggu booting saat ingin menggunakan lagi.

Nah, muncul sebuah masalah setelah saya menginstall cinnamon, yaitu tidak ada menu suspend ketika klik quit di launcher. Yang muncul hanya tombol "Restart", "Cancel" dan "Shut Down".

Pada kasus saya, yang menjadi sumber masalah adalah settingan cinnamon session yang default-nya tidak menggunakan logind. Untuk menggeceknya, bisa anda gunakan perintah:

gsettings get org.cinnamon.desktop.session settings-daemon-uses-logind

gsettings get org.cinnamon.desktop.session session-manager-uses-logind

apabila kedua setting diatas menghasilkan "false". Maka artinya cinnamon session tidak menggunakan logind. Kita harus mensetnya secara manual dengan perintah:


gsettings set org.cinnamon.desktop.session settings-daemon-uses-logind true
gsettings set org.cinnamon.desktop.session session-manager-uses-logind true
gsettings set org.cinnamon.desktop.session screensaver-uses-logind false


setelah restart, tombol suspend sekarang muncul di window session

Screenshot - 12102015 - 01:33:04 PM

Akhirnya sekarang saya sudah bisa suspend. :)

Tapi disini saya menemui masalah lagi, yaitu ketika laptop lid saya tutup, ubuntu saya tidak mau suspend. Padahal di power setting sudah saya atur demikian.

Akhirnya saya menemukan solusi, yaitu dengan cara uncomment pada satu baris konfigurasi di file:
/etc/systemd/logind.conf

gunakan text editor kesayangan anda untuk merubahnya, jangan lupa perintah sudo.

sudo nano /etc/systemd/logind.conf

cari baris yang memuat konfigurasi "HandleLidSwitch=suspend", kemudian hilangkan tanda pagar diawal baris. (uncomment).

Lalu restart, dan hilanglah masalah "suspend" di laptop ubuntu cinnamon saya.

Setelah itu, masih banyak lagi masalah yang saya temui saat masa transisi ke cinnamon. yang akan saya share di artikel lain.

Sekian coretan singkat saya, mudah-mudahan bisa berguna.

No comments :

Post a Comment

Mengatasi MS Office di wine hang karena my network places

No comments
Terkadang para pengguna MS Office di wine dikesalkan karena Office hang atau not responding ketika hendak menyimpan pekerjaan, umumnya itu terjadi karena tidak sengaja klik my network places.

Screenshot from 2015-12-04 08:17:44

Dan itu sangat menjengkelkan sekali karena seluruh pekerjaan yang sudah dilakukan hilang karena tidak bisa tersimpan. Untung-untung kalau masih bisa di-recover. tapi tetap saja menjengkelkan.

Apabila di windows, icon places tersebut tidak menjadi masalah. Tetapi di wine lain halnya, karena pada dasarnya kita tidak menjalankan sistem operasi window sehingga path untuk my network places tidak mengarah kemana-mana, menyebabkan loading yang tidak kunjung selesai ketika mengaksesnya.

Salah satu cara (menurut saya satu-satunya) untuk mengatasi masalah tersebut adalah dengan tidak menampilkan tombol tersebut agar kedepannya kita tidak salah "klik".

Disini saya tidak mengajarkan untuk menggunakan aplikasi yang saya sebut, niat saya disini hanya untuk share masalah yang pernah saya alami dan cara mengatasinya. Siapa tahu bakal berguna untuk orang lain kedepannya.

Menyembunyikan tombol my network places di ms office wine



  1. Langkah pertama adalah dengan membuka registry editor wine, caranya jalankan aplikasi winetrick.

  2. Lalu pilih menu "select the default wineprefix".

  3. Pilih "run regedit".

  4. Setelah muncul registry editor, buka :
    HKEY_CURRENT_USER\Software\Microsoft\Office\12.0\Common\Open Find\Places\StandardPlaces
    Note : Yang diwarnai hijau mungkin berbeda, tergantung versi office yang anda miliki. pilih saja angka yang paling tinggi.

  5. Kemudian pada setiap key yang ada didalam StandardPlaces, ubah value dari registry DWORD "Show" menjadi 0 dengan klik kanan pada registry di panel kanan, lalu pilih modify, ubah Value ke 0, lalu OK. (Jika ada registry bernama "View", ubah juga nilainya ke 0).
    Screenshot from 2015-12-04 08:27:30

  6. Apabila tidak ada registry DWORD yang bernama "Show", silahkan buat sendiri dengan cara klik kanan dipanel kanan, lalu pilih New > DWORD Value, kemudian beri nama "Show" tanpa petik kemudian enter. Secara default Value-nya adalah 0.

  7. Ulangi step 5 dan 6 untuk key Recent, Publishing, My Computer dan Desktop

  8. Pastikan sudah benar, lalu keluar dari registry.

  9. Silahkan coba buka aplikasi MS Office kembali, lalu open file. Harusnya di panel kiri sudah tidak ada my network places.

Sekian tips singkat untuk mengantisipasi "sakit hati" yang disebabkan oleh fitur bawaan MS.

No comments :

Post a Comment

Cek informasi status baterai laptop di linux via terminal

1 comment
Di linux, kita dapat mengetahui informasi dan status baterai bahkan dari terminal sekalipun. Berikut saya tutorial yang sangat singkat tentang bagaimana cara melihat status baterai melalui terminal dengan program upower, beserta cara untuk mempermudahnya.

Upower adalah sebuah abstraksi untuk enumerasi perangkat power, memantau aktivitas device, dan meng-query history dan statistik. Dibuat oleh freedesktop.org. Informasi dan dokumentasi lengkap bisa anda kunjungi di http://upower.freedesktop.org/.

Untuk melihat informasi baterai, langkah pertama adalah cari path untuk device baterai dengan perintah:

[code class="zem_slink" href="http://en.wikipedia.org/wiki/Bash_%28Unix_shell%29" title="Bash (Unix shell)" rel="wikipedia" 1="target="_blank">bash</a>"" language=""]upower -e[/code]



Lalu akan muncul beberapa path device seperti berikut:

[code lang="bash"]/org/freedesktop/UPower/devices/line_power_ADP0
/org/freedesktop/UPower/devices/battery_BAT0
/org/freedesktop/UPower/devices/DisplayDevice[/code]


Apabila tidak muncul list path device seperti diatas, melainkan pesan error "command not found" artinya upower belum terinstal (Dimana jarang sekali saya menemui distribusi OS linux yang tidak menyertakan upower). Silahkan install dulu upower dengan perintah :
sudo apt-get install upower

untuk ubuntu, debian, mint dan sebangsanya.

Ketiga path diatas masing-masing menunjuk ke device(perangkat) power, misalnya pada contoh diatas adalah line power(Adaptor AC), batterai, dan display device.

Nah setelah path untuk baterai diketahui, dalam kasus diatas yaitu /org/freedesktop/UPower/devices/battery_BAT0, kita bisa cek status baterai dengan perintah:

[code lang="bash"]upower -i /org/freedesktop/UPower/devices/battery_BAT0[/code]



maka akan tampil kurang lebih seperti ini:

[code lang="bash"] native-path: BAT0
vendor: NOTEBOOK
model: BAT
serial: 0001
<a class="zem_slink" href="http://en.wikipedia.org/wiki/Power_supply" title="Power supply" rel="wikipedia" target="_blank">power supply</a>: yes
updated: Sat 29 Aug 2015 10:51:07 PM WIB (107 seconds ago)
has history: yes
has statistics: yes
battery
present: yes
rechargeable: yes
state: discharging
warning-level: none
<a class="zem_slink" href="http://en.wikipedia.org/wiki/Energy" title="Energy" rel="wikipedia" target="_blank">energy</a>: 19.9911 Wh
energy-empty: 0 Wh
energy-full: 31.3797 Wh
energy-full-design: 48.84 Wh
energy-rate: 12.9156 W
voltage: 14.8 V
time to empty: 1.5 hours
percentage: 63%
capacity: 64.25%
technology: <a class="zem_slink" href="http://en.wikipedia.org/wiki/Lithium-ion_battery" title="Lithium-ion battery" rel="wikipedia" target="_blank">lithium-ion</a>
icon-name: 'battery-full-symbolic'
History (charge):
1440863467 63.000 discharging
History (rate):
1440863467 12.916 discharging
[/code]



Artinya, status baterai laptop saya sedang tidak di charge(state=discharging). Energi baterai sekarang (energy)19.9911 Wh atau dalam persentase (percentage) 63%.

Baterai penuh(energy-full) 31.3797 Wh. Yang artinya umur baterai saya sudah berkurang, dan hanya bisa di charge hingga 31.3797 Wh, dimana seharusnya (energy-full-design) 48.84 Wh. Kapasitasnya (capacity) sudah berkurang 64.25% dari semula(baru).

Silahkan anda bereksperimentasi dan amati informasi-informasi yang lainnya.

Membuat shortcut (alias) perintah cek baterai


Sekarang untuk mempermudah cek informasi baterai, kita buat sebuah perintah shortcut/alias untuk perintah-perintah diatas.

Caranya cukup mudah yaitu edit file .bashrc di direktori home anda:

nano ~/.bashrc

Jika file tersebut tidak ada(kosong), coba ganti dengan file .bash_profile atau .profile.

Lalu pada baris paling atas, tambahkan baris:


[code lang="bash"]alias baterai='upower -i /org/freedesktop/UPower/devices/battery_BAT0'
[/code]


Ganti baterai sesuai dengan keinginan anda, yang penting tidak sama dengan perintah-perintah yang sudah ada.

lalu simpan dan jalankan perintah:


[code lang="bash"]source ~/.bashrc[/code]

untuk memuat ulang file .bashrc atau .bash_profile atau .profile.

Kemudian silahkan uji coba alias yang telah dibuat tadi, dimana pada contoh saya adalah perintah baterai.

baterai

1 comment :

Post a Comment

Pengolahan citra dengan html5 dan javascript bagian 2: Mengakses data pixel

2 comments
Tutorial ini merupakan lanjutan dari tutorial Pengolahan citra dengan html5 dan javascript bagian 1:Menampilkan citra

Mengakses, membaca dan mengubah data pixel adalah salah satu elemen penting dalam pengolahan citra(image processing) dimana nantinya dari data pixel tersebut akan diolah dengan metode-metode olah citra, kemudian mengubah data pixel tersebut untuk memanipulasi citra.

Pada tutorial sebelumnya, kita sudah bisa mengubah gambar kedalam object canvas html 5. Sekarang saya akan membahas tentang bagaimana cara membaca data pixel dan tentu saja menggunakan javascript.

Mari kita ambil script dari bab sebelumnya.

[code lang="html"]
<html>
<head>
<title>Image processing menggunakan canvas dan javascript</title>

</head>
<body>
<img src=jeruk.jpg style=display:none; id=gambarSumber >
<canvas id=kanvasSumber ></canvas>
<script type=text/javascript>
//membuat variabel javascript yang memuat kedua elemen diatas.
var gambarSumber=document.getElementById('gambarSumber');
var kanvasSumber=document.getElementById('kanvasSumber');

//buat variabel yang memuat tinggi dan lebar gambar
var tinggi=gambarSumber.height;
var lebar=gambarSumber.width;

//samakan tinggi dan lebar kanvas dengan gambar
kanvasSumber.width=lebar;
kanvasSumber.height=tinggi;

//membuat objek 2d dari canvas kemudian menggambar gambarSumber kedalam objek tersebut
var kanvas2d = kanvasSumber.getContext("2d");
kanvas2d.drawImage(gambarSumber,0,0,lebar,tinggi);
</script>
</body>
</html>[/code]

Langkah selanjutnya yaitu membuat variabel baru yang memuat image data dari kanvas2d yang sudah kita buat. Dengan parameter sebagai berikut:

kanvas2d.getImageData(x awal, y awal,lebar,tinggi);

[code lang="html"]//mengambil image data yg memuat data pixel. kita namai dengan variabel idata
            var idata=kanvas2d.getImageData(0,0,lebar,tinggi);

[/code]

Dalam script diatas kita ambil seluruh pixel gambar mulai dari koordinat 0,0.

Sekarang variabel idata memuat clamped array yang berisikan data pixel secara berurutan dari pojok kiri atas hingga pojok kanan bawah.
Masing masing pixel diwakili oleh 4 elemen dari array, dimana:

  • elemen pertama adalah angka desimal(0-255) nilai warna merah/red

  • elemen kedua adalah warna hijau/green

  • elemen ketiga warna biru/blue

  • elemen keempat nilai alpha/transparansi. dimana 0 artinya tidak terlihat sama sekali.


Contoh dari image data yang berisi 2 pixel warna merah dan biru:
255,0,0,255,0,0,255,255 yang dapat diakses melalui idata.data[0] untuk mengambil nilai merah pada pixel pertama jadi sangat sulit untuk menentukan pixel yg akan diolah. Kita perlu cara mudah untuk mengambil nilai satu pixel hanya berdasar kordinat yaitu dengan membuat sebuah fungsi.

Fungsi javascript untuk membaca pixel


Kita namai fungsi dengan nama getPixel, dan menerima 2 variabel parameter yaitu x dan y.

[code lang="html"]function getPixel(x,y){
//membuat array kosong untuk menampung hasil
var arr=Array();
//mengambil posisi pixel dari idata dalam variabel i dengan:
//membagi 4 hasil dari (y*lebar)+x
var i=((y*idata.width)+x)*4;

//masukkan 4 array dari posisi yang sudah ditemukan(i)
arr[0]=idata.data[i]; //warna merah
arr[1]=idata.data[i+1]; //warna hijau
arr[2]=idata.data[i+2]; //warna biru
arr[3]=idata.data[i+3] //transparensi/alpha

//kemudian return array yg memuat hasil
return arr;
}[/code]

Script diatas sudah saya beri comment untuk setiap baris yang saya rasa sudah dapat menjelaskan cara kerja dari fungsi diatas.

Untuk menguji fungsi yang telah dibuat tadi, buka javascript console pada browser dengan klik kanan lalu inspect element, lalu plih tab console. Dan jalankan fungsi diatas misalnya:

[code lang="javascript"]getPixel(0,0);[/code]

untuk mendapatkan pixel paling pojok kanan atas.Screenshot from 2015-08-25 16:16:26maka hasilnya akan seperti berikut:

Screenshot from 2015-08-25 16:19:32

Hasil dari getPixel berupa array yang berisi [67,91,17,255]. yang artinya pixel pada koordinat 0,0 memuat warna:

R/Red/Merah = 67

G/Green/Hijau = 91

B/Blue/Biru = 17

A/Alpha/Transparansi(0=Transparan, 255=Solid) = 255

Mari kita coba dengan koordinat lain misalnya 1,1:

Screenshot from 2015-08-25 16:20:30Artinya :

R/Red/Merah = 43

G/Green/Hijau = 62

B/Blue/Biru = 255

A/Alpha/Transparansi = 255

Script keseluruhan:

[code lang="html"]<html>
<head>
<title>Image processing menggunakan canvas dan javascript</title>

</head>
<body>
<img src=jeruk.jpg style=display:none; id=gambarSumber >
<canvas id=kanvasSumber ></canvas>
<script type=text/javascript>
//membuat variabel javascript yang memuat kedua elemen diatas.
var gambarSumber=document.getElementById('gambarSumber');
var kanvasSumber=document.getElementById('kanvasSumber');

//buat variabel yang memuat tinggi dan lebar gambar
var tinggi=gambarSumber.height;
var lebar=gambarSumber.width;

//samakan tinggi dan lebar kanvas dengan gambar
kanvasSumber.width=lebar;
kanvasSumber.height=tinggi;

//membuat objek 2d dari canvas kemudian menggambar gambarSumber kedalam objek tersebut
var kanvas2d = kanvasSumber.getContext("2d");
kanvas2d.drawImage(gambarSumber,0,0,lebar,tinggi);
var kanvas2d = kanvasSumber.getContext("2d");

//mengambil image data yg memuat data pixel. kita namai dengan variabel idata
var idata=kanvas2d.getImageData(0,0,lebar,tinggi);
//dalam kasus ini kita ambil seluruh pixel gambar mulai dari koordinat 0,0

function getPixel(x,y){
//membuat array kosong untuk menampung hasil
var arr=Array();
//mengambil posisi pixel dari idata dalam variabel i dengan:
//membagi 4 hasil dari (y*lebar)+x
var i=((y*idata.width)+x)*4;

//masukkan 4 array dari posisi yang sudah ditemukan(i)
arr[0]=idata.data[i]; //warna merah
arr[1]=idata.data[i+1]; //warna hijau
arr[2]=idata.data[i+2]; //warna biru
arr[3]=idata.data[i+3] //transparensi/alpha

//kemudian return array yg memuat hasil
return arr;
}

</script>
</body>
</html>[/code]

 

Sekian tutorial pengolahan citra dengan javascript bagian 2 tentang membaca data pixel. Pada tutorial selanjutnya akan saya bahas tentang mengubah data pixel dan me-render ulang gambar pada kanvas, dengan menggunakan library yang sudah saya sediakan.

Untuk video tutorial bisa anda saksikan di youtube:

Indeks tutorial pengolahan citra menggunakan html5 dan javascript:

2 comments :

Post a Comment

Pengolahan citra dengan html5 dan javascript bagian 1: Menampilkan citra

2 comments
Pengolahan citra atau image processing biasanya dilakukan menggunakan bahasa pemrograman compiler seperti C, Java, Pascal, dsb atau pemrograman yang dikhususkan untuk tujuan matematis seperti matlab dan scilab.

Namun seiring perkembangan teknologi, kini pengolahan citra juga bisa dilakukan dengan teknologi web yaitu menggunakan canvas html5 dan javascript.

Canvas adalah sebuah elemen yang hadir pada html5, yang berguna untuk menampilkan, objek grafis 2d. Dan tidak menutup kemungkinan untuk grafis 3d. Sedangkan javascript dalam kasus ini berguna sebagai bahasa pemrograman untuk membuat, mengolah, menampilkan, dan memanipulasi elemen canvas tersebut.

Kelebihan dan kelemahan


Kelebihan


Kelebihan teknologi web untuk pengolahan citra jika dibandingkan dengan teknologi konvensional diantaranya:

  • Hampir bisa dijalankan dimana saja (selama ada browser yang mendukung html5).

  • Tidak perlu compile (seperti web pada umumnya, tinggal edit dan refresh).

  • Bisa dijadikan online (karena pada dasarnya merupakan halaman web biasa).

  • Perkembangan teknologi cepat (mengikuti perkembangan teknologi web yang sangat pesat).

  • Sangat banyak kemungkinan (bayangkan, desktop environment seperti gnome menggunakan javascript dan css, bahkan aplikasi android banyak yang mengandalkan basis web).


Kelemahan


Tentu saja cara ini juga memiliki kelemahan diantaranya :

  • Kurangnya kemampuan untuk mengakses hardware langsung (karena berjalan diatas browser).

  • Kemungkinan lebih lambat untuk prosesnya (karena resource seluruhnya diatur oleh browser, jadi performa antar komputer antar browser bisa saja berbeda).


 

Persiapan pembuatan aplikasi image processing


Kebutuhan



  • Yang perlu disiapkan adalah komputer dengan sistem operasi (pasti :P)

  • Webserver XAMPP atau terserah anda.

  • Sebuah file gambar dengan ukuran tidak terlalu besar, sekitar 640x480 px sudah cukup besar.

  • Text editor terserah anda, saya sarankan menggunaan geany atau notepad++.

  • Browser terbaru (google chrome, mozilla firefox).


Persiapan


Install webserver dan pastikan bisa berjalan dengan baik.

Screenshot from 2015-08-05 20:58:32Buat sebuah folder di htdocs dengan nama imageprocessing(nama bisa terserah anda), kemudian copy file gambar yg sudah disiapkan kedalam folder.

Buka text editor lalu buat sebuah file dengan nama index.html, dan simpan menjadi satu dengan gambar tadi dalam folder imageprocessing.

Isi file index.html dengan html dasar berikut kemudian simpan:

[code lang="html"]

<title>Image processing menggunakan canvas dan javascript</title>


<img src="jeruk.jpg" style="display:none;" id="gambarSumber">
<canvas id="kanvasSumber"></canvas>
<script type="text/javascript"></script>

[/code]

Penjelasan script diatas adalah:

Kita memuat file gambar jeruk.jpg menggunakan tag html img, kemudian sembunyikan gambar tersebut agar tidak tampil, lalu beri id gambarSumber untuk memanggilnya di javascript nanti.

Lalu buat sebuah elemen canvas dengan id kanvasSumber yang nantinya akan kita gunakan untuk menampilkan gambar menggunakan javascript sekaligus menjadi sumber citra untuk proses-proses selanjutnya.

Buat tag ;, bagi anda yang belum tahu.

Sekarang kita buat variabel yang memuat elemen img dan canvas, masing-masing kita namai gambarSumber dan kanvasSumber.

[code lang="javascript"]var gambarSumber=document.getElementById('gambarSumber');
var kanvasSumber=document.getElementById('kanvasSumber');[/code]

script diatas mengambil elemen html yang mempunyai ID gambarSumber kedalam variabel javascript gambarSumber dan ID kanvasSumber kedalam variabel kanvasSumber, menggunakan DOM (apa itu DOM? singkatan dari Document Object Model, bisa anda baca lebih lengkapnya di wikipedia).

Selanjutnya kita memerlukan tinggi dan lebar dari gambar sumber

[code lang="javascript"]var tinggi=gambarSumber.height;
var lebar=gambarSumber.width;[/code]

Lalu kita buat object context 2d dari elemen canvas

[code lang="javascript"]var kanvas2d = kanvasSumber.getContext("2d");[/code]

Lalu gambar gambarSumber kedalam canvas dengan fungsi drawImage.

[code lang="javascript"]kanvas2d.drawImage(gambarSumber,0,0,lebar,tinggi);[/code]

fungsi drawImage diatas membutuhkan 5 parameter yaitu: elemen gambar sumber, x awal , y awal , lebar gambar, tinggi gambar.

Sekarang akses melalui browser ke alamat http://localhost/imageprocessing/ . Jika sudah benar, maka akan tampil gambar kita tadi.

Screenshot from 2015-08-05 21:39:02

Jika kita inspect element, maka bisa dilihat bahwa yang tampil bukanlah elemen html image, melainkan sebuah canvas.

Screenshot from 2015-08-05 21:39:23Screenshot from 2015-08-05 21:40:10Setelah tahap ini, pengolahan citra bisa dilakukan dengan mengambil data dari canvas tersebut yang akan saya lanjutkan pembahasannya pada artikel lanjutan Pengolahan citra dengan html5 dan javascript bagian 2: Membaca data pixel.

Jika anda lebih suka tutorial berbentuk video step by step, bisa anda simak pada video berikut:



Script keseluruhan seperti:

[code lang="javascript"]

<title>Image processing menggunakan canvas dan javascript</title>



<img src="jeruk.jpg" style="display:none;" id="gambarSumber">
<canvas id="kanvasSumber"></canvas>
<script type="text/javascript">
//membuat variabel javascript yang memuat kedua elemen diatas.
var gambarSumber=document.getElementById('gambarSumber');
var kanvasSumber=document.getElementById('kanvasSumber');

//buat variabel yang memuat tinggi dan lebar gambar
var tinggi=gambarSumber.height;
var lebar=gambarSumber.width;

//samakan tinggi dan lebar kanvas dengan gambar
kanvasSumber.width=lebar;
kanvasSumber.height=tinggi;

//membuat objek 2d dari canvas kemudian menggambar gambarSumber kedalam objek tersebut
var kanvas2d = kanvasSumber.getContext("2d");
kanvas2d.drawImage(gambarSumber,0,0,lebar,tinggi);
</script>

[/code]

Indeks tutorial pengolahan citra menggunakan html5 dan javascript:

2 comments :

Post a Comment

Buat, edit, dan mainkan tabulature guitar pro di linux dengan TuxGuitar

No comments
Bagi anda para gitaris yang sudah kenal dan biasa memainkan tabulature dengan aplikasi Guitar Pro di windows, maka di linux ada versi alternatifnya yg open-source, yaitu TuxGuitar. Hebatnya, aplikasi open-source ini mendukung format ekstensi file tabulature PowerTab, Guitar Pro 2, Guitar Pro 3, Guitar Pro 4, dan Guitar Pro 5. Jadi kita bisa mendownload dan memainkan tab gitar dari berbagai macam situs.

Selain mendukung banyak format, TuxGuitar juga dilengkapi dengan fitur export kedalam file MIDI, PDF, dan teks biasa(ASCII). Sehingga memungkinkan untuk men-sintesis ke dalam aplikasi lain(fruity loop, rosegarden atau muse) dan mencetak tabulature.

Instalasi dan Konfigurasi TuxGuitar di Linux Ubuntu


Aplikasi TuxGuitar sudah ada di repository ubuntu, anda hanya tinggal menginstall menggunakan software center, synaptic (di section Multimedia/universe), maupun melalui terminal dengan perintah berikut:

[code lang="bash"]sudo apt-get install tuxguitar[/code]

atau anda bisa mendownload dari website resminya di http://tuxguitar.herac.com.ar/download.html, disana juga terdapat installer TuxGuitar untuk windows dan mac os.
Versi tux guitar yang saya install disini adalah versi 1.2

Berikut adalah tampilan awal dari TuxGuitar.

Screenshot from 2015-08-03 19:53:15TuxGuitar secara default menampilkan music score, tabulature, dan fretboard.

Berikutnya kita atur konfigurasinya supaya bisa memainkan tabulature. Klik menu Tools > Settings, lalu klik tab Sound di paling bawah, kemudian pada drop-down MIDI Port, pilih Gervill.

Jika tidak ada pilihan Gervill, Install dahulu Java sound API untuk TuxGuitar dengan perintah:

[code lang="bash"]sudo apt-get install tuxguitar-jsa[/code]

Setelah itu, tutup window "Configure Tuxguitar", lalu klik "Yes". Sekarang coba mainkan tabulature dengan klik tombol Start pada toolbar. Silahkan mendownload tabulature dari situs guitar pro, ultimate guitar, atau situs-situs lain terserah anda.

Sebagai contoh, saya memainkan tabulature Dream Theater - On the backs of angels

Tutorial singkat penggunaan TuxGuitar


Mengubah tabulature


Sebelum mengubah tabulature, sembunyikan music score terlebih dahulu agar kita lebih leluasa. Dengan menghilangkan centang pada menu view > view Score.

Untuk mengubah tabulature, klik pada tabulature hingga muncul kursor berupa persegi seperti gambar berikut:

tampilan tabulatureLalu klik pada fretboard keynote yang diinginkan misalnya seperti gambar berikut:tampilan fretboardDan hasilnya :

tampilan tabulature2


Meng-export tabulature menjadi PDF dan teks


Setelah edit tabulature, agar kita mudah untuk ber-gitar dengan lebih nyaman tanpa harus menghadap layar komputer, alangkah baiknya jika kita cetak tabulature-nya. Untuk mencetaknya, ada dua cara yg paling mudah. Pertama menggunakan PDF, yang kedua menggunakan file teks. Saya lebih suka cara pertama karena lebih praktis.

Untuk mengekspor kedalam bentuk teks, klik menu File > Export > Export ASCII. Kemudian pilih tempat untuk menyimpan hasil eksport. Hasil Eksport biasanya berformat .tab dimana bisa anda rename menjadi .txt karena pada dasarnya file tersebut hanya memuat teks karakter ASCII saja.

Untuk mengekspor kedalam bentuk PDF, klik menu File > Export > Export PDF. Disini, muncul window Options.

export pdf option

Pada dropdown "Track", pilih track yang akan di ekspor karena biasanya satu file dapat memuat beberapa track seperti lead guitar, rythm guitar, bass, atau distortion guitar.

Pada "Range", kita bisa menentukan jumlah bagian tab yang di ekspor, biarkan default untuk mengekspor dari awal sampai akhir.

Pada "Options", kita bisa menentukan apa saja yang dicetak. Misalnya kita hanya memerlukan tabulature saja, maka centang "Show Tablature", dan hilangkan centang yg lain.

Lalu klik OK dan pilih tempat untuk menyimpan.

Catatan Tambahan


Dalam contoh ini, kita menggunakan java sound API (Gervill) untuk memainkan tabulature, dan bunyi yang dihasilkan menjadi kurang menarik. Untuk mengatasi masalah ini, kita bisa menggunakan synthesizer lain untuk meng-sintesis suara gitar yang lebih mendekati bunyi gitar sungguhan.

Salah satu synthesizer yang populer di linux adalah fluidsynth, menggunakan tampilan gui QSynth. yang akan saya bahas di artikel berikutnya.

No comments :

Post a Comment

Membaca schema.org microdata pada html terstruktur dengan PHP

5 comments
Microdata, microformat dan RDFs adalah sebuah kamus / vocabulary untuk menentukan struktur konten HTML yang didukung oleh Google dan hampir semua search engine besar. Microdata digunakan sebagai skema untuk menentukan konten dari sebuah website yang dapat dipahami oleh crawler atau robot penelusuran search engine. Sedangkan schema.org adalah penyedia dari skema struktur vocabulary tersebut. Sudah banyak website-website yang menggunakan microdata, terutama toko-toko online atau marketplace dengan tujuan  konten dari websitenya mudah dipahami oleh mesin pencari. Sebagai contoh website marketplace tokopedia.com.

Pada postingan kali ini saya akan fokus membahas tentang bagaimana cara membaca atau mengekstrak data microdata menggunakan PHP. Dimana nantinya akan banyak kegunaan dan penerapannya. Contoh penerapannya bisa anda coba di website hargapedia.info. (ini promosi) dimana pada website tersebut kita dapat melakukan pencarian barang, yang kemudian berdasarkan pencarian tersebut akan dicarikan katalog harga langsung dari tokopedia dengan menggunakan microdata.

Untuk lebih jelasnya mengenai microdata bisa anda baca di wikipedia.

Untuk bagaimana cara menggunakan microdata dan dokumentasinya, bisa anda lihat di situs schema.org.Sekilas tentang library microdataPHP

microdataPHP adalah salah satu library PHP yang digunakan untuk mengekstrak microdata dari file HTML. Dibuat oleh linclark dan bisa anda unduh di github linclark/MicrodataPHP.

Atau anda bisa menggunakan versi fork yang sudah saya minimalkan dan yang saya gunakan dalam tutorial ini. Bisa anda unduh di cybermujahidz/MicrodataPHP

Microdata PHP menggunakan library native PHP DOMDocument untuk mengambil dan membaca data dari HTML, kemudian mengolahnya berdasarkan aturan-aturan dari schema.org sehingga didapatkan sebuah struktur microdata. Dimana hasilnya bisa kita jadikan sebuah php object atau juga JSON.

Cara membaca struktur mikrodata menggunakan microdataPHP


Pertama-tama, download library microdata php dari repo saya di cybermujahidz/MicrodataPHP.

Kemudian buat sebuah file php dengan nama bacaMicrodata.php atau terserah anda di doc root webserver anda, misalnya htdocs.

copy folder "src" dari library microdataPHP tadi kedalam doc root sehingga dapat di include oleh file bacaMicrodata.php yang kita buat tadi.

lalu edit file bacaMicrodata.php menggunakan text editor kesayangan anda dan ketikkan script berikut (misalnya kita hendak mengekstrak data dari website tokopedia.com):

[code lang="php"]

<?php
//memanggil library microdataPhp
include('src/MicrodataPhp.php');
//url dari html yang akan di extract
//disini saya mengambil hasil pencarian produk dengan kata kunci "motherboard" dari tokopedia
$url='https://www.tokopedia.com/search?st=product&q=motherboard&sc=0';

//membuat object MicrodataPhp dari url kedalam variabel $md
$md=new MicrodataPhp($url);

//mengambil hasil olahan microdata berupa php object kedalam variabel $data
$data=$md->obj();

//print rekursif hasilnya
echo "<pre>";
print_r($data);
echo "</pre>";
?>

[/code]

Pastikan anda terhubung ke internet, karena script tersebut akan mengunduh data langsung dari tokopedia. kemudian panggil file bacaMicrodata.php melalui browser.

Jika tidak ada problem, maka kurang lebih hasilnya akan seperti ini:

microdata1

Jika diakses langsung ke tokopedia, maka sebenarnya bentuknya seperti ini:

microdata3

Dengan memanfaatkan hasil tersebut kita dapat membuat list daftar barang hasil pencarian dengan loop dari itemscope itemListElement.

Script berikut untuk menampilkan data kedalam tabel berdasarkan struktur pada website tokopedia, jadi skrip berikut hanya berlaku untuk data dari tokopedia.

[code lang="php"]

<table>
<?php
//memanggil library microdataPhp
include('src/MicrodataPhp.php');
//url dari html yang akan di extract
//disini saya mengambil hasil pencarian produk dengan kata kunci "motherboard" dari tokopedia
$url='https://www.tokopedia.com/search?st=product&q=motherboard&sc=0';

//membuat object MicrodataPhp dari url kedalam variabel $md
$md=new MicrodataPhp($url);

//mengambil hasil olahan microdata berupa php object kedalam variabel $data
$data=$md->obj();

//berdasarkan struktur yang didapat(lihat hasil script pertama), array yang memuat list hasil pencarian terdapat pada index 1 atau 2
//cek apakah index 1 dan 2 kosong. bila kosong, artinya hasil pencarian kosong.
if(empty($data->items[1]) && empty($data->items[2])){
    echo "tidak ditemukan";
exit;
}

//jika ada promosi, maka hasil pencarian berada pada index 2, karena index 1 akan berisi barang-barang promosi
$listing=(!empty($data->items[2]))?2:1;

//loop hasil sebagai variabel $anu
foreach($data->items[$listing]->properties['itemListElement'] as $anu){
//$anu->properties['name'] adalah array yg berisi itemprop nama, biasanya hanya ada satu elemen didalamnya
//$anu->properties['offers'] adalah array yg berisi penawaran harga. biasanya dalam hasil pencarian tokopedia hanya ada 1 harga untuk 1 item. Sehingga dapat langsung diambil menggunakan properties['price'] yg berisi array untuk nominal harga
    echo "
    <tr>
        <td>".$anu->properties['name'][0]."</td>
        <td>".$anu->properties['offers'][0]->properties['price'][0]."</td>
    </tr>
    ";
}
?>
</table>

[/code]

Dan hasilnya :

microdata2

sekian salah satu contoh cara mengekstrak microdata dari html menggunakan PHP. Selebihnya bisa anda eksperimen dan kembangkan sendiri sesuai kebutuhan anda.

Troubleshooting


Berikut adalah beberapa contoh masalah yang mungkin ditemui ketika mencoba tutorial diatas.

Pesan Fatal Error max nesting level


Fatal error: Maximum function nesting level of '100' reached, aborting!

Umumnya terjadi jika anda menggunakan mod php xdebug. Terjadi karena microdataPHP melakukan nesting loop rekursif yang melebihi nilai maksimum yang ditetapkan oleh xdebug.

Solusinya:

tambahkan

[code lang="php"]ini_set('xdebug.max_nesting_level', 400);[/code]

pada awal baris script php.

Tidak muncul hasil


Kemungkinan php.ini anda men-disable error reporting, atau memang tidak ada hasil apa-apa yang didapat oleh microdataPHP.

Solusinya:

Untuk memunculkan error reporting, tambahkan baris

[code lang="php"]error_reporting('E_ALL');[/code]

atau jika tidak ada hasil apa-apa, pastikan anda bisa mengakses tokopedia.com melalui browser.

Pesan error (!) scream error suppression ignored


( ! ) SCREAM: Error suppression ignored for ( ! )...

Terjadi bila anda menggunakan xdebug dan fitur scream aktif. Karena microdataPHP menggunakan error suppression"@" untuk mengatasi struktur html yang tidak valid.

Solusinya:

tambahkan

[code lang="php"]ini_set('xdebug.scream' 0);[/code]

pada awal baris php.

5 comments :

Post a Comment

Transfer file melalui jaringan di ubuntu menggunakan SSH dan File Manager

No comments
Banyak cara untuk melakukan transfer file melalui jaringan di linux ubuntu, bisa dengan samba server, http server, ftp, sftp, dan lain-lain. Salah satu diantaranya yang paling mudah dan yang akan saya bahas kali ini adalah dengan menggunakan SFTP ( SSH File Transfer Protocol ). Yaitu transfer file melalui SSH.

Syarat utama untuk SFTP ini adalah:

  1. Jaringan sudah diatur sedemikian rupa sehingga memungkinkan masing-masing komputer untuk melakukan ping.

  2. SSH server pada komputer yang akan diakses harus sudah terinstall, aktif, dan dapat diakses / login dari komputer lain. Untuk panduan instalasi SSH Server, dapat anda baca di artikel Cara Mengaktifkan dan konfigurasi SSH Server di ubuntu

  3. Aplikasi file manager seperti nautilus, nemo, thunar, dll.(dalam contoh ini saya gunakan Nautilus bawaan ubuntu) sudah terinstall di komputer client yang hendak mengakses.


Meng-koneksikan file manager ke SFTP


Langkah pertama, Buka file manager (dalam contoh ini nautilus).

Cara 1


lalu klik menu file (atau context-menu / tombol gir di pojok kanan atas untuk nautilus release terbaru). Kemudian klik menu "Connect to server... " seperti gambar berikut:

sftp0Kemudian pada dialog connect to server, masukkan alamat tujuan dengan protokol sftp. Dalam contoh gambar berikut saya menggunakan alamat 192.168.6.2 , jadi alamatnya: sftp://192.168.6.2

sftp3Kemudian klik tombol "Connect". Lalu akan muncul dialog login seperti gambar berikut, isikan username dan password ssh server komputer tujuan.
Jika setelah di klik "Connect" tidak terjadi apa-apa, kemungkinan alamat yang anda masukkan tidak dapat diakses. Pastikan bahwa alamat ip tersebut bisa di ping dan terdapat SSH server berjalan di komputer tersebut.

Apabila SSH server komputer tujuan menggunakan port tcp selain port default ssh (port 22), maka tambahkan alamat port setelah IP, dipisah titik dua (:) misalnya sftp://192.168.6.2:1234

sftp2Lalu klik tombol "Connect". Dan tunggu hingga proses login berhasil, maka nautilus akan membuka direktori home dari user yang anda gunakan untuk login.
Untuk masuk ke direktori lain semisal /, /var/www, /etc, tekan "Ctrl+L", lalu pada address location bar, hapus alamat yang mengarah ke direktori home. Contoh: sftp://192.168.6.2/home/asudahlah menjadi sftp://192.168.6.2/ atau sftp://192.168.6.2/var/www

Cara 2


Cara ini lebih simple daripada yang pertama. :D yaitu anda tinggal tekan "Ctrl+L", lalu masukkan alamat IP tujuan beserta protokolnya seperti sftp://192.168.6.2/, kemudian tekan enter. Dan akan muncul dialog login dan langkah selanjutnya bisa anda baca di Cara 1. :D That's it.

Catatan


Sama seperti FTP, cara ini menggunakan client dan server. Dimana client dapat mengakses server, tapi tidak sebaliknya. Akan tetapi, anda tetap bisa menghapus, membuat, mengirim, dan mengambil file tergantung dari hak akses user yang anda gunakan saat login.

Pada file manager, koneksi yang barusan anda buat akan dianggap sebagai sebuah direktori yang seolah-olah di mount dan biasanya ditampilkan pada sidebar.

No comments :

Post a Comment

Cara Mengaktifkan dan konfigurasi SSH Server di ubuntu

2 comments

Sekilas tentang SSH


Secure Shell (SSH) adalah sebuah protokol jaringan kriptografi untuk komunikasi data yang aman, login antarmuka baris perintah, perintah eksekusi jarak jauh, dan layanan jaringan lainnya antara dua jaringan komputer. Ini terkoneksi, melalui saluran aman atau melalui jaringan tidak aman, server dan klien menjalankan server SSH dan SSH program klien secara masing-masing. Protokol spesifikasi membedakan antara dua versi utama yang disebut sebagai SSH-1 dan SSH-2.

Tentang SSH lebih lengkap bisa anda kunjungi http://id.wikipedia.org/wiki/SSH

Instalasi SSH server di ubuntu


SSH server yang akan kita gunakan sudah ada di repository main ubuntu. Sehingga dapat langsung anda install dengan perintah

[code]sudo apt-get install openssh-server[/code]

Kecil kok, gak sampe 1 mega.

Setelah instalasi berhasil, secara otomatis server ssh sudah berjalan di komputer anda. Saat ini, seharusnya anda sudah bisa login ke komputer anda secara remote melalui jaringan dengan menggunakan alamat IP anda pada port 22 (port default ssh), kemudian login menggunakan username dan password anda.

Selanjutnya, kita perlu mengatur konfigurasi server ssh tadi agar dapat berjalan sebagaimana mestinya.:D

Konfigurasi dasar SSH server


Mengganti port SSH Server


Secara default, SSH server menggunakan port 22 untuk berkomunikasi. Tetapi, kita dapat menggantinya sesuai keinginan kita. Entah karena kepingin, atau memang port 22 akan kita gunakan untuk program lain.

Untuk mengganti konfigurasi SSH server, buka file sshd_config yang ada pada direktori /etc/ssh/sshd_config.
Catatan : nganu... pada direktori /etc/ssh/, biasanya terdapat 2 file dengan nama hampir sama, yaitu "ssh_config" dengan "sshd_config". ssh_config adalah file konfigurasi untuk ssh client. Sedangkan sshd_config adalah untuk ssh server. Jangan keliru :D

buka dengan text editor favorit anda, dan jangan lupa, setiap anda mengedit file konfigurasi di linux, gunakanlah hak akses super user. dengan perintah sudo. Agar perubahan-perubahan yang anda ketik tidak sia-sia(karena terlanjur ngetik banyak, ternyata tidak bisa disimpan, terpaksa harus copy paste, dan ini yang bikin kadang saya merasa... asudahlah... ).

misalnya, saya menggunakan text editor nano.

[code]sudo nano /etc/ssh/sshd_config[/code]

Kemudian, pada parameter keyword "Port" dibawah komentar "# What ports, IPs annd protocols we listen for" (kalo gak salah). Biasanya sih di baris-baris atas(di tempat saya gitu).

ssh1

ubah nilai default 22 ke port yang anda inginkan.
Catatan : Pastikan port yang hendak anda gunakan tidak bertabrakan dengan program lain.

Gunakan fitur Find pada text editor anda. Misalnya pada nano, saya gunakan Ctrl+w lalu saya ketik "port".

Setelah selesai, simpan lalu restart SSH server anda dengan :

[code]service ssh restart[/code]

atau

[code]/etc/init.d/ssh restart[/code]

 Mengatur Banner login SSH


Anda juga bisa menambahkan banner anda sendiri. Banner disini tentu saja dalam bentuk text. Dimana banner ini akan tampil ketika client membuka koneksi SSH sebelum login. Sekedar untuk informasi atau bisa juga untuk peringatan bagi orang-orang nyasar(baca:heker) yang entah numpang lewat atau cuma mampir.

Untuk menambahkan Banner, pada file sshd_config, tambahkan baris:

[code]Banner /etc/issue.net[/code]

atau uncomment baris yang sudah ada dengan menghapus tanda pagar (#) diawal baris.

Kemudian simpan. dan sebelum di restart. Edit file /etc/issue.net dengan text editor dan sesuaikan dengan keinginian anda. Isi dari file issue.net inilah yang menjadi banner yg tampil pada saat sebelum otentikasi/login. Misalnya saya rubah seperti ini:

ssh2Simpan kemudian restart SSH server. Maka ketika hendak login ssh dalam kasus ini saya menggunakan perintah:

[code]ssh anu@localhost[/code]

keluar konfirmasi yes/no, pilih yes. Lalu akan tampil kurang lebih seperti screenshot berikut:ssh3

Sekian tutorial singkat dari asudahlah.com. semoga bermanfaat.

2 comments :

Post a Comment

Menghitung jumlah hari antara 2 tanggal di PHP

1 comment
Sebuah coretan singkat tentang cara untuk menghitung jumlah hari antara 2 tanggal di PHP. Fungsi ini memang sepele, tapi tetap saya post disini karena siapa tahu ada yang membutuhkan.

Penerapannya bisa untuk menghitung tengat waktu/deadline, kadaluarsa, jangka waktu, dll.

<?php

function hitungHari($awal,$akhir){

$tglAwal = strtotime($awal);

$tglAkhir = strtotime($akhir);

$jeda = abs($tglAkhir - $tglAwal);

return floor($jeda/(60*60*24));

}

?>
untuk penggunaanya (dalam contoh ini menggunakan format penanggalan SQL):

echo hitungHari('2015-01-01','2015-12-01');

Penjelasannya


function hitungHari($awal,$akhir)

adalah deklarasi fungsi hitungHari yg menerima 2 parameter, yaitu variabel $awal dan $akhir. Dimana $awal adalah tanggal awal (dalam kasus ini menggunakan format string penanggalan SQL yaitu tahun-bulan-tanggal). Dan $akhir adalah tanggal akhir.

$tglAwal = strtotime($awal);
$tglAkhir = strtotime($akhir);

Dua baris diatas mengubah variabel $awal dan $akhir yg berisi string tanggal, kedalam bentuk time (jumlah detik sejak tahun 1 Januari 1970) yang kemudian disimpan ke variable $tglAwal dan $tglAkhir.

$jeda = abs($tglAkhir - $tglAwal);

Baris diatas adalah operasi pengurangan dari $tglAkhir dikurangi $tglAwal. Sehingga didapat hasil yaitu jarak waktu antara 2 variabel tadi dalam satuan detik. Fungsi abs() adalah untuk mendapatkan angka absolut (angka yg selalu positif) karena bisa saja hasil dari pengurangan tersebut adalah minus, jika $tglAwal lebih besar daripada $tglAkhir. Lalu kemudian disimpan kedalam variabel $jeda.

return floor($jeda/(60*60*24));
Fungsi floor() pada baris diatas adalah untuk membulatkan kebawah dari hasil perhitungan $jeda/(60*60*24). Maksud perhitungan disamping adalah membagi nilai variabel $jeda dengan (60*60*24) dimana 60 adalah jumlah detik dalam 1 menit, 60 adalah jumah menit dalam 1 jam, 24 adalah jumlah jam dalam 1 hari. Karena nilai dari $jeda adalah dalam satuan detik.

Jika anda ingin menyesuaikan fungsi tersebut untuk menghitung jumlah minggu, bulan, tahun, tinggal anda sesuaikan (60*60*24) menjadi (60*60*24*7) untuk minggu,  (60*60*24*30) untuk bulan.

Sekian tutorial PHP sederhana untuk menghitung jumlah hari antara 2 tanggal. Semoga bermanfaat.

1 comment :

Post a Comment

Install dan konfigurasi compiz untuk xfce4 di ubuntu/xubuntu

1 comment
XFCE4 adalah salah satu dari sekian banyak desktop environtment untuk sistem operasi linux. Keunggulan dari desktop environtment ini adalah dapat di-kustomisasi secara mudah dan cukup ringan jika dibandingkan dengan desktop envrontment lain yang terkenal seperti gnome dan kde.

Xfce sendiri memiliki window manager dan desktop compositing bawaan yaitu xfwm, dimana seringkali menyebabkan pengguna xfce cepat bosan karena fiturnya yang itu-itu saja.Alangkah baiknya jika xfwm bawaan xfce digantikan dengan compiz yang memiliki berbagai macam fitur dan kemampuan yang menarik.

compiz

Nah, pada posting kali ini saya akan membahas tentang cara instalasi dan konfigurasi compiz untuk menggantikan xfwm di xfce. Sebelum beralih ke compiz, pastikan terlebih dahulu bahwa hardware anda, terutama hardware grafis, mampu untuk menjalankan compiz. Saya rasa hardware-hardware saat ini tidak ada masalah akan hal itu.

Instalasi Compiz dan kebutuhannya


Pastikan pc anda sudah terinstall ubuntu dengan desktop environtment xfce dan dapat berjalan lacar tanpa masalah.

Langkah pertama yaitu install compiz, compiz-plugin, ccsm dan metacity:

[code]sudo apt-get install compiz compiz-plugins compizconfig-settings-manager metacity[/code]

setelah instalasi selesai, kita perlu mengaktifkan beberapa plugin compiz agar compiz dapat berjalan dengan benar. Buka ccsm (compiz config settings manager) melalui launcher atau melalui terminal dengan perintah "ccsm" sebagai user biasa(bukan root).

Klik "OK" jika muncul kotak notifikasi.

compiz2

Lalu aktifkan (tandai centang disamping) plugin-plugin berikut :

  • Composite

  • Gnome Compatibility

  • OpenGL

  • Window Decoration

  • Move Window

  • Resize Window

  • Place Windows


Silahkan anda aktifkan plugin-plugin lainnya yang anda sukai misalnya desktop cube atau animation. Tapi jangan mengaktifkan "Unity plugin".

Setelah selesai, jalankan perintah berikut untuk mencoba compiz :

[code]compiz --replace ccp[/code]

Jika tidak ada masalah atau error, maka desktop anda akan tampil sebagaimana mestinya. xfce anda berjalan menggunakan compiz, bisa anda coba enable-disable plugin lain yg ada di compiz config settings manager untuk melihat hasilnya.

Saat ini anda menggunakan compiz, akan tetapi setelah restart atau jendela terminal yg menjalankan compis di close, xfce akan kembali menggunakan xfwm. Untuk mengubahnya, buka setting manager melalui launcher, Session and Startup, pada tab "Application autostart", klik tombol "Add", lalu tambahkan perintah berikut pada kolom command :

[code]compiz --replace[/code]

Kemudian restart pc anda.

Jika suatu saat anda tidak ingin menggunakan compiz, atau ketika tiba-tiba compiz bermasalah, anda bisa kembali menggunakan xfwm dengan men-disable entry compiz yang anda buat tadi pada session and startup.

1 comment :

Post a Comment

Install and configure compiz in xfce4 ubuntu/xubuntu

No comments
XFCE4 is one of the many desktop environment to linux operating system. The advantages of desktop environment this is can be customized easily and quite mild when compared with another famous environment desktops such as gnome and kde.

Xfce itself has a window manager and compositing desktop default IE xfwm, which often causes the user xfce quickly bored because the feature that it-that's it. It would be nice if the default xfce xfwm replaced by compiz that has a variety of exciting features and capabilities.



I will discuss about how to install and configuring compiz to replace xfwm in xfce. Before switching to compiz, make sure in advance that your hardware, especially graphics hardware, capable to run compiz.

Installing Compiz and its dependency


Make sure your pc already installed ubuntu with xfce desktop environment and can run smoothly without problems.

The first step that is install compiz, compiz-plugins, ccsm and metacity

[code]&lt;code class=&quot;plain plain&quot;&gt;sudo apt-get install compiz compiz-plugins compizconfig-settings-manager metacity&lt;/code&gt;[/code]

After installation is complete, we need to enable some plugin of compiz in order to be able to run correctly. Open ccsm (compiz config settings manager) through the launcher or via the terminal with the command "ccsm" as a normal user (not root).



Click "OK" If the notification box appears.

  • Then turn on (check mark beside) the following plugins:

  • Composite

  • Gnome Compatibility

  • OpenGL

  • Window Decoration

  • Move Window

  • Resize Window

  • Place Windows


Please activate the plugin-other plugins that you like for example a desktop cube or animation. But do not enable the "Unity".

Once done, run the following command to try compiz:

[code]compiz --replace ccp[/code]

 

If there is no problem or error, so your desktop will appear as expected. Xfce you walk using compiz, you can try to enable-disable other plugins imaginable on the compiz config settings manager to see the results.

Currently you are using compiz, but after a restart or a terminal window running yg compis in close, xfce will re-use the xfwm. To change it, go to the settings manager through the launcher, Session and Startup, on the tab "Application autostart", click "Add" button, and add the following commands in the command column:

[code]compiz --replace[/code]

Then restart your pc.

If at any time you do not want to use compiz or compiz suddenly troubled, you can re-use the xfwm by downloading disable compiz entry that you created earlier in the session and startup.

No comments :

Post a Comment

Ubuntu Make, mempermudah developer untuk instalasi Android studio dan Android SDK

No comments
Ubuntu Make (a.k.a Ubuntu Developer Tools Center), adalah tool command line yang dapat digunakan untuk mendownload sekaligus menginstall versi terbaru Android Studio dan Android SDK beserta seluruh dependensinya.
ubuntu-logoTool ini dibuat oleh canonical (pengembang resmi Ubuntu) dengan tujuan untuk menjadikan developer aplikasi merasa nyaman dalam pengembangan aplikasi di Ubuntu. Seperti yang ditulis oleh Didier Roche, engineer canonical di blognya "Ubuntu loves developers and we are going to showcase it by making Ubuntu the best available developer platform".

Untuk saat ini, pihak canonical masih fokus pada para developer android.

Install Android Studio melalui Ubuntu Makeandroid-studio-update


Versi ubuntu yang mendukung Ubuntu Make adalah versi 14.04(trusty) keatas. Dan khusus untuk versi 14.04, harus menambahkan PPA terlebih dahulu:

[code] $ sudo add-apt-repository ppa:ubuntu-desktop/ubuntu-make
$ sudo apt-get update[/code]

PPA diatas tidak perlu anda gunakan jika anda memiliki versi ubuntu 14.10(utopic) keatas.

Lalu install ubuntu make dengan perintah :

[code] $ sudo apt-get install ubuntu-make[/code]

Setelah selesai instalasi ubuntu make, jalankan perintah berikut untuk menginstall anroid studio :

[code] $ umake android[/code]

Kemudian tentukan path instalasi dan setujui lisensi google yg tampil. Lalu ubuntu make akan mendownload dan menginstall seluruh dependency yang dibutuhkan oleh android studio.android-studio

No comments :

Post a Comment

Belajar Jquery : Fungsi fadeIn, fadeOut, fadeTo jquery untuk transisi elemen

1 comment
Pada artikel kali ini kita akan membahas tentang efek fadeIn, fadeOut dan fadeTo pada jquery. Fungsi efek ini biasanya digunakan untuk transisi elemen pada web, baik muncul maupun lenyap secara berkala(memudar).

Seperti artikel tentang animate sebelumnya, kita menggunakan file contoh yang sama dengan yang ada di artikel Tutorial dasar menggunakan jquery untuk mempercantik halaman web.
Bagi yang belum tahu cara dasar menggunakan jquery, monggo simak link diatas. ;)

Ok, cekidot, langsung to de poin.
Fungsi efek fadeIn dan fadeOut mempunyai struktur yang sama yaitu:

[code lang="javascript"]$(elemen).fadeOut(durasi);[/code]

dimana elemen adalah elemen yang dipanggil, sedangkan durasi adalah waktu yang diperlukan bagi elemen untuk menghilang(fadeOut) atau tampil(fadeIn) dalam milidetik.

Untuk langsung mencobanya, silahkan edit file html yang tadi saya bahas. Ubah script html-nya jadi:

[code lang="javascript"]$('#kotak').fadeOut(1000);[/code]

Simpan dan refresh untuk lihat hasilnya, kalau tidak ada masalah, maka seharusnya #kotak secara bertahap memudar hingga menghilang. Sekarang coba tambahkan .fadeIn(1000) setelah fungsi fadeOut, hingga menjadi:

[code lang="javascript"]$('#kotak').fadeOut(1000).fadeIn(1000);[/code]

Dan lihat hasilnya. :)
Tidak ada masalah? kalau tidak terjadi apa-apa, cek disini solusinya. ;)

Ok, sekarang kita lanjut ke fungsi fadeTo.
Agak berbeda dari kedua fungsi sebelumnya, fungsi fadeTo mempunyai 2 properties yaitu durasi dan opacity. Sehingga bentuknya kayak gini:

[code lang="javascript"]$(elemen).fadeTo(durasi,opacity);[/code]

Contoh terapan:

[code lang="javascript"]$('#kotak').fadeTo(1000 , 0.5);[/code]

Nah, nilai dari opacity adalah antara 0 sampai 1, dimana semakin kearah 0, objek semakin menghilang, semakin kearah 1 objek semakin jelas (0=full transparan, 1=tidak transparan).

Screenshot from 2015-04-22 14:25:04

Misalnya dalam contoh diatas, opacity bernilai 0,5 yang artinya object setengah menghilang setengah nampak(transparan). Untuk lebih jelasnya, coba terapkan ke file html contoh kita tadi. ;)
Sekian artikel tentang fungsi fadeIn, fadeOut, dan fadeTo jquery, untuk artikel tentang fungsi-fungsi jquery lainnya bisa agan temukan di submenu jquery di menu programming.
Selamat belajar. :) dan jangan lupa +1 ;)

P.S:Copas silahkan, tapi jangan lupa cantumkan sumber. ;)

1 comment :

Post a Comment

Belajar jquery : Fungsi animate jquery untuk menganimasikan elemen web

No comments
Kali ini kita akan membahas tentang fungsi animate di jquery. Fungsi ini berguna untuk membuat animasi pada elemen web.

Untuk penjelasan dasar tentang cara menggunakan jquery, bisa anda baca di artikel Tutorial dasar menggunakan jquery untuk mempercantik halamanweb

Dalam contoh ini kita menggunakan file yang sama dengan yang ada di artikel Tutorial dasar menggunakan jquery untuk mempercantik halaman web.

Struktur dasar fungsi animate adalah:
.animate(property css dalam kurung kurawal,durasi waktu dalam milidetik);

Misalnya:


[code lang="javascript"]$('#kotak').animate({'margin-left':'100px'},1000);[/code]


bisa juga dibaca:
elemen yang mempunyai id=kotak.
dianimasikan dari kondisi awal “margin-left:0px”, menjadi “margin-left:100px”.
dalam durasi 1 detik(1000milidetik).

Keterangan:kondisi “margin-left” awal elemen adalah 0px karena tidak diatur css-nya(default).

Sekarang kita coba:

[code lang="javascript"]$('#kotak').animate({ 'margin-left':'100px' , 'height':'300px' },500);[/code]


bisa juga kita baca:
elemen yang mempunyai id=kotak.
dianimasikan dari kondisi awal “margin-left:0px” dan “height:50px”, menjadi “margin-left:100px” dan “height:300px”.
dalam durasi setengah detik(500ms).

bingung kenapa kondisi awal “height:50px”? sudah ane bilang kan, kalau kita menggunakan contoh file yang sama dengan yang ada di artikel Tutorial dasar menggunakan jquery untuk mempercantik halaman web. :D

Kita bisa menambahkan beberapa property css sekaligus dalam satu animasi dengan dipisahkan koma.

Untuk menambahkan animasi, kita hanya perlu menambahkan fungsi animate setelahnya, dipisahkan dengan titik. Misalnya:


[code lang="javascript"]$('#kotak').animate({ 'margin-left':'100px'},1000).animate({ 'margin-top':'100px'},1000).animate({'font-size':'20px'},1000);[/code]


Simpan dan coba hasilnya. :)
Sekian artikel tentang fungsi animate jquery, untuk artikel tentang fungsi-fungsi jquery lainnya bisa agan temukan di submenu jquery di menu programming.
Selamat belajar. :) dan jangan lupa +1 ;)

P.S:Copas silahkan, tapi jangan lupa cantumkan sumber. ;)

No comments :

Post a Comment

Tutorial dasar menggunakan jquery untuk mempercantik halaman web

No comments
Jquery adalah library javascript yang sangat berguna di dunia web programming. Mulai dari meng-animasikan content web, hingga melakukan ajax(apa itu ajax? klik disini.), dan masih banyak fitur-fitur lainnya.Ok, langsung saja ke topik utama. Sebelum kita bisa menggunakan jquery, pertama-tama kita harus punya file javascript jquery terlebih dahulu, bisa di download disini. Kemudian taruh file tersebut di sebuah folder. Misalnya saya taruh di folder berikut:




jquery1

Kemudian buat file html(nama terserah anda)

jq3


Edit file html tersebut dengan open with pake notepad++(sangat disarankan, bisa didownload disini:download notepad++) atau editor favorit agan, ketikkan script berikut(variasi terserah agan :D)


[code lang="html"]
<title>Latihan jquery</title>
<script src="&quot;jquery-1.7.2.min.js&quot;" lang="&quot;javascript&quot;"></script>
<style>
#kotak{
font-family:arial;
font-size:14px;
width:200px;
height:50px;
background:#f00;
padding:10px;
color:#fff;
}
</style>
<script lang="&quot;javascript&quot;">
$(document).ready(function(){
//script jquery disini
});
</script>


<div id="&quot;kotak&quot;">
belajar jquery di <br>http://net-crawler.blogspot.com</div>

[/code]

Simpan, lalu buka file html tadi melalui browser(biasanya langsung double-clik).

Hasilnya kurang lebih seperti ini:

jq4
pertama-tama kita panggil file jquery menggunakan tag:

 


[code lang="html"]<script src="jquery-1.7.2.min.js" lang="javascript"></script>[/code]


 



attribut src menunjukkan letak file jquery relative terhadap file html.

Script jquery ada diantara:

$(document).ready(function(){
dan
});
Script diatas adalah constructor jquery, yg maksudnya, script yang ada didalam kurung kurawal {} dieksekusi setelah halaman(document) sudah dimuat(ready).

Sekarang coba agan tambahkan script berikut diantara kurung kurawal tadi.



[code lang="javascript"]$('#kotak').animate({'margin-left':'400px'},1000);[/code]



Simpan dan refresh browser. Apa yang terjadi?
Jika tidak ada kesalahan, seharusnya kotak tadi bergeser kekanan sepanjang 400 pixel.


Apa maksudnya? script tadi adalah fungsi “.animate” jquery yang berfungsi menganimasikan object/elemen yang dipanggil.

dimana:


$(elemen yang dipanggil).fungsi jquery;


Dalam contoh diatas, kita menggunakan tanda # yang diikuti tulisan “kotak”.


lambang # adalah id, jadi maksudnya adalah memanggil elemen yang mempunyai id=kotak, yaitu div yang berisi “belajar jquery bla bla bla” tadi. jika kita ingin memanggil div tersebut menggunakan class(misalnya div tadi bentuknya
) maka kita memanggilnya dengan titik “.abc”.


Setelah elemen terpanggil, kita tinggal menambahkan fungsi-fungsi jquery yang akan kita bahas secara terpisah. untuk setiap fungsi, dipisahkan dengan tanda titik. Misalnya:




[code lang="javascript"]$('#kotak').animate({'margin-left':'400px'},1000).animate({'margin-top':'200px'},1000);[/code]

coba simpan lalu refresh browser dan amati yang terjadi.
Penjelasan tentang fungsi animate, bisa agan baca disini.


Sekian adalah dasar untuk menggunakan jquery pada halaman web. Untuk penjelasan tentang fungsi-fungsi yang ada di jquery, bisa anda lihat di sub menu Jquery yang ada di menu programming.


Resource yang digunakan disini:



Selamat belajar. :) dan jangan lupa +1 ;)


No comments :

Post a Comment

Desain website, animasi, banner iklan berbasis html5 dengan Google Web Designer untuk linux dan windows

No comments
Google web designer adalah program untuk membuat website dan iklan interaktif berbasis html 5. Dimana kiita bisa membuat konten dengan drawing tools, text, 3D Object, animasi seperti flash tapi berbasis html 5 dan hasilnya berupa html, css dan javascript. Terdapat juga tools untuk transformasi 3D, timeline dan tweening untuk memudahkan dalam meng-animasi.
Jadi kita bisa membuat slide show, iklan, banner, google Ad, tanpa menggunakan flash dan hasilnya dapat langsung kita cantumkan pada web/blog.

google web designer

Aplikasi ini hadir dalam bentuk repositori, dimana dalam repositori tersebut juga memuat produk-produk google lainnya untuk linux. Untuk saat ini(saat artikel ini dibuat), Google Web Designer sudah mencapai versi release beta 1.2.1. Sudah saya coba di ubuntu 14.04 dan berhasil. Sayangnya, untuk dukungan browser masih lebih mengarah ke browser-browser berbasis webkit seperti google chrome.

Install Google web designer


Silahkan download installer langsung dari website google web designer disini.

Sesuaikan download dengan os yang anda gunakan. Kemudian, setelah selesai di download. Jalankan installer seperti menginstall aplikasi pada umumnya.

Untuk Linux


Untuk linux, menginstall google web designer secara otomatis juga menambahkan repositori untuk google. Jadi anda juga akan mendapatkan update-update terbaru dari produk google lainnya.

Anda dapat mendownload installer baik .deb maupun .rpm dari website google web designer. Atau install dengan 3 baris perintah terminal berikut :

[code lang="shell"]
wget -O google-webdesigner_i386.deb https://dl.google.com/linux/direct/google-webdesigner_current_i386.deb
sudo dpkg -i google-webdesigner_i386.deb
rm google-webdesigner_i386.deb&nbsp; [/code]

Jika anda menggunakan arsitektur linux 64bit, maka ganti "i386" dengan "amd64".

Catatan untuk pengguna linux


Terkadang google web designer bermasalah jika diinstall di sistem yang non-english. Untuk mengatasinya, hapus folder google web designer di direktori home  ~/.local/share :

[code]rm -r ~/.local/share/google-web-designer[/code]

dan jalankan google web designer dengan perintah berikut:

[code]LANGUAGE=en_US google-webdesigner[/code]

No comments :

Post a Comment

Install Sublime Text 3 di Ubuntu Menggunakan PPA

No comments
Sublime Text adalah text editor populer yang dikhususkan untuk programming dan mengedit source code. Mendukung banyak bahasa pemrograman mulai dari scripting language (PHP, Javascript, HTML, dsb) hingga programming language(C, C#, Java, VB. dsb).

sublime-text-3Awalnya, sublime text versi 3 hanya untuk user yang sudah terdaftar dengan harga lisensi $70. Tapi, sublime text 3 sekarang bisa digunakan untuk semua orang dan seperti versi pendahulunya yaitu sublime text 2, sublime text 3 dapat digunakan tanpa lisensi dengan batas waktu yang tidak ditentukan(unlimited).

Kelebihan Sublime Text dibanding text editor biasa adalah:

  • Multiple Selection
    Dapat melakukan banyak perubahan sekaligus, dengan seleksi beberapa bagian teks dan merubah secara bersamaan.

  • Command Pallete
    Dapat menyimpan beberapa perintah yang sering digunakan seperti pengurutan, merubah syntax, merubah indent, hanya dengan Ctrl+Shift+P.

  • Distraction Free Mode
    Menampilkan editor secara fullscreen sehingga dapat meningkatkan fokus pada saat koding. Tidak terganggu oleh elemen-elemen tidak penting yang tidak harus ditampilkan di layar.

  • Plugin

  • Customizable
    Dapat dikustomisasi sesuai keinginan.

  • Dan masih banyak lagi...


Agar lebih memahami kelebihan-kelebihan sublime text, silahkan menginstall dan mencobanya sendiri.

Install Sublime text 3 di ubuntu dengan PPA.


Bagi pengguna ubuntu, untuk mempermudah instalasi, kita gunakan ppa yang sudah disediakan oleh webupd8.com.
Jika sebelumnya anda sudah menginstall sublime text 2, maka akan diupgrade ke sublime text 3. Pastikan anda sedang tidak menjalankan sublime text.

Buka terminal dan jalankan perintah :

[code lang="shell"]
sudo add-apt-repository ppa:webupd8team/sublime-text-3
sudo apt-get update
sudo apt-get install sublime-text-installe[/code]


Untuk menginstall di selain ubuntu, silahkan download sublime text 3 disini dan menginstall secara manual.


Tips

untuk menonaktifkan notifikasi versi, tambahkan baris berikut:


[code]"update_check": false[/code]


pada User Preferences(Preferences > Settings - User)

No comments :

Post a Comment