Category Archives

15 Articles

Deploy Aplikasi QT untuk Platform Windows (MinGW 32 Bit)

Berikut ini adalah cara deploying aplikasi yang diprogram menggunakan QT untuk Platform Windows 32 Bit dan di compile menggunakan MinGW 32 Bit.

Contoh saya menggunakan QT Open Source 5.3.1 dengan Compiler MinGW 4.8.2

Sejak QT 5.2, telah disediakan tools bernama windeployqt.exe.

Pada QT Open Source 5.3.1  dengan compiler MinGW 4.8.2, windeployqt.exe dapat dicari di C:\Qt\5.3\mingw482_32\bin (apabila anda menggunakan default instalation).

Menggunkan command prompt ubah ke directory di mana terdapat windeployqt.exe.

Jalankan dahulu qtenv2.bat untuk setting up environment

c:\Qt\5.3\mingw482_32\bin\qtenv2.bat

qtenv2.bat akan menyipakan environment path supaya windeployqt.exe dapat dijalankan pada prompt di folder aplikasi. Selain itu juga menyiapkan path pada folder qt tolls yang berisi library yang diperlukan.

echo off
echo Setting up environment for Qt usage…
set PATH=C:\Qt\5.3\mingw482_32\bin;C:\Qt\Tools\mingw482_32\bin;%PATH%
cd /D C:\Qt\5.3\mingw482_32

Setelah itu pindah ke folder hasil build aplikasi anda.

Jalankan windeployqt.exe dan gunakan nama hasil build aplikasi. Contoh apabila nama build aplikasi adalah test.exe, maka jalankan

c:\folderAplikasiAnda\windeployqt.exe test.exe

Selanjutnya pada folder tersebut telah diisi semua library yang diperlukan untuk deploying aplikasi anda.

Installation of Node.js dan Express.js

logo
Node.js installation

1. Install python-software-properties

sudo apt-get install python-software-properties

2. add repository chris-lea

sudo add-apt-repository ppa:chris-lea/node.js

3. update apt-get

sudo apt-get update

4. install node.js

sudo apt-get install nodejs

 

express.js installation

1. install express

npm install -g express

2. check npm installation

npm ls

Done!

Mengubah Action Click Button Secara Dinamis dengan Fungsi unbind

Pada artikel ini dijelaskan cara mengubah action click button secara dinamis.

Contoh apabila ada 3 button, button_pertama, button_kedua dan button_ketiga. Action pada button_ketiga ditentukan oleh action button_pertama atau action button_kedua. Apabila button_pertama di click, maka button_ketiga akan memanggil fungsi_pertama apabila di-click. Apabila button_kedua di-click, maka button_ketiga akan memanggil fungsi_kedua.

Setiap button_pertama atau button_kedua di-click akan dipanggil dahulu fungsi unbind click action untuk button_kedua Fungsi unbind pada javascript digunakan untuk melepaskan action fungsi sebelumnya. Setelah fungsi unbind dipanggil, button_ketiga dapat di-bind pada fungsi baru.

Berikut baris kode javascript menggunan JQuery, kode ini diletakkan di dalam $(document).ready(function(){}):

$(‘#button_pertama’).click(function() {

$(‘#button_ketiga’).unbind(‘click’);

$(‘#button_ketiga’).click(fungsi_pertama);

});

function fungsi_pertama()

{

// Kode untuk fungsi_pertama

}

$(‘#button_kedua’).click(function() {

$(‘#button_ketiga’).unbind(‘click’);

$(‘#button_ketiga’).click(fungsi_kedua);

});

function fungsi_kedua()

{

// Kode untuk fungsi_kedua

}

Referensi selengkapnya mengenai fungsi unbind dapat dilihat di http://api.jquery.com/unbind/

JQuery Ajax

Ajax merupakan teknik pemrograman web dinamis menggunakan javascript. Ajax dapat digunakan untuk mengambil data dari database tanpa harus me-reloading halaman atau berpindah url. Fungsi ajax dapat dikombinasikan dengan button atau event lainnya.

Pada artikel ini akan dijelaskan mengenai penggunaan Ajax pada JQuery, pembaca diharapkan sudah mengerti dasar php, html, javascript dan JQuery seperti membuat function, deklarasi variabel dan mengakses DOM dengan JQuery.

Berikut ini adalah contoh penggunaan Ajax pada JQuery.

Kode ini diletakkan di dalam $(document).ready(function(){} )

$.ajax({

url: http://www.yohanli.com/index.php/c_contoller_anda/fungsi_yang_dipanggil, //misalnya url controller anda

data: parameter,

cache: false,

dataType: “json”,

beforeSend: function() {before_ajax();},

complete: function() {after_ajax();},

success: function(result_json) {success_function(result_json);}

});

Data parameter

Parameter merupakan variabel yang akan di pass ke halaman selanjutnya. Contoh parameter didapatkan dari input box dengan id input_box_1, maka akan ditulis dengan format: ‘data1=’ + $(# input_box_1).val(). parameter ini mem-passing variabel data1 di url tujuan. Variabel ini dapat diakses dengan cara $_GET[‘data_1’] menggunakan php.

Multiple parameter dari banyak input box dapat dilakukan dengan contoh berikut ini:

var parameter = ‘data1=’ + $(#input_box_1).val() + ‘&data2=’ + $(#input_box_2).val()’;

Kode di atas menjelaskan bahwa akan ada 2 variabel yang dipass yaitu data1 dan data2 yang diambil dari input_box 1 dan input_box_2

Pada url tujuan, variabel ini dapat diambil menggunakan php dengan cara $_GET[‘data1’] dan $_GET[‘data2’]

 

Function

Fungsi before_ajax(), after_ajax() dan success_function() merupakan fungsi javascript yang maxing-masing akan di-execute pada saat terjadi ajax request. Fungsi ini dapat diletakkan di dalam $(document).ready(function() ).

function before_ajax()

{

// Kode ini akan dipanggil sesaat sebelum ajax request

}

function after_ajax()

{

// Kode ini akan dipanggil sesaat sesudah ajax request

}

 function success_function(result_json)
{
// Kode ini dipanggil setelah ajax berhasil memberikan return yang dapat berupa json, jsonp, xml, script, text atau html.
}

Variabel yang didapat dari ajax dapat diakses langsung oleh javascript. Pada contoh ini  digunakan JSON, JSON lebih fleksibel dan relatif simple daripada xml.

Contoh apabila return merupakan json data berupa {“hasil”: {“nama” : “saya”, “umur” : “20 tahun”}}

Data ini dapat diakses dengan cara:

result_json[‘hasil’][‘nama’] akan menghasilkan string “saya”

result_json[‘hasil’][‘nama’] akan menghasilkan string “20 tahun”
Kode PHP URL Tujuan
Berikut adalah contoh coding URL tujuan

<?php
class C_Controller_Anda {

function __construct()

{

// Kode Constructor

}

function index()

{

// Kode Index

}

function fungsi_yang_dipanggil()

{

// di sini diletakkan kode untuk menyajikan data return

$data_pertama = $_GET[‘data1’]; // ini adalah cara mengambil parameter  data1

$data_kedua = $_GET[‘data2’]; // ini adalah cara mengambil parameter data2

$result_json = $this->Model_Anda->fungsi_di_dalam_model_yang_dipanggil($data_pertama, $data_kedua);

echo $result_json; // ini data yang akan diterima oleh ajax

}

} ?>

 

Referensi JQuery Ajax dapat dilihat di http://api.jquery.com/jQuery.ajax/
Selamat belajar…

Event onkeyup pada Javascript

Berikut ini adalah contoh aplikasi kode javascript menggunakan event onkeyup pada input form.

 

<html>

<head>

<script type=”text/javascript”>

function hitung()

{

var ttlbelanja=document.getElementById(“totalbelanja”).value;

var tendered=document.getElementById(“uang”).value;

var kembali=tendered-ttlbelanja;

if(kembali<0)

{

kembali = “Uang Belum Cukup”;

}
document.getElementById(“kembali”).innerHTML=kembali;

}
function uangotomatis()

{

var ttlbelanja=document.getElementById(“totalbelanja”).value;

document.getElementById(“uang”).value=ttlbelanja;

document.getElementById(“kembali”).innerHTML=0;

}

</script>

</head>

<body>

<h1>Menghitung Uang Kembali</h1>

<form>

Total Belanja:

<input type=”text” id=”totalbelanja” name=”totalbelanja” onkeyup=”uangotomatis()” />

<br />

Uang:

<input type=”text” id=”uang” name=”uang” onkeyup=”hitung()”/>

<br />

</form>

<div style=”float:left;”>Kembali: &nbsp;</div>

<div style=”float:left;” id=”kembali”> </div>

<br />

</body>

</html>