TEKNOLOGI DAN KOMUNIKASI

Maret 4, 2010 at 5:29 am (Pemrograman Javascript)

PEMROGAMAN JAVASCRIPT

Mengenal AJAX

Sekarang muNgkin masih banyak kalangan IT yang membicarakan AJAX?Apakah itu?

AJAX bukan pakai java, tapi javascript yg sifatnya client side script….

AJAX itu sendiri diperkenalkan oleh seorang pakar pembuat program khususnya pemrograman berbasis web. Orang yang sangat berjasa tersebut tidak lain dan tidak bukan adalah Rasmus Lerdorf, dari tangan dingin Rasmus Lerdorf ini pulalah beberapa waktu yang lalu lahirlah PHP.

Untuk mengaplikasikan AJAX dalam website, yang dibutuhkan adalah browser yang menyediakan layanan Javascript, dan komponen XMLHTTP bagi pengguna Internet Explorer (IE), dan XMLHttpRequest untuk Firefox, Safary, Opera dan browser lainnya. Syarat-syarat tersebut hampir pasti sudah terpenuhi, mengingat pengguna internet banyak yang menggunakan IE dan Firefox.

Sebenarnya tidak ada hal baru dalam AJAX, karena yang digunakan adalah teknologi javascript, yang notabene sudah lama digunakan. Oleh karena itu, bagi yang sudah terbiasa dengan javascript, akan mudah sekali mempelajari AJAX. Pembahasan ini tidak menekankan pada salah satu teknologi (Javascript, AJAX, HTML, PHP), akan tetapi keseluruhan dari hal tersebut. Hal ini karena penggunaan AJAX tidak hanya pada sisi client (browser), tapi juga melibatkan respon dari server.

Dengan menggunakan konsep ini, page HTML bisa membuat koneksi secara asinkron ke server dengan cara mengambil XML atau dokumen text. Selanjutnya XML atau dokumen text ini akan digunakan oleh javascript untuk meng-update atau memodifikasi Document Object Model (DOM) pada page HTML.

Untuk selanjutnya teknologi ini juga dikenal web remoting atau remote scripting. Developer Web dapat mengkombinasikan plug in, java applets atau hidden frame untuk mengemulasikan interaksi antara page HTML dengan dokumen XML. Dalam teknologi Javascript telah disediakan sebuah object yaitu XMLHTTPRequest. Object ini sudah banyak disupport oleh banyak browser seperti Internet Explorer, Firefox, Opera, Netscape dan lain sebagainya.

Konsep AJAX ini ide awalnya dikemukakan oleh Rasmus Lerdorf. Rasmus Lerdorft mengemukakan konsep AJAX ini dalam sebuah miling list (milist). Berawal dari milist tersebut konsep AJAX kemudian dikenal dan dikembangkan oleh banyak orang.

Nah, untuk lebih memahami definisi ajax di atas, berikut contoh sederhana penggunaan aplikasi ajax.
Sebelumnya, anda harus menginstall web server, PHP, MySql. Aplikasi yang sudah lengkap dan bias digunakan adalah XAMPP, silahkan download di website resminya yang versi terbarunya xampp di www.xampp.com
Saya anggap pembaca sudah memahami cara instalasi xampp, jika belum silahkan googling aja.

Anggap, struktur webservernya seperti berikut :
Buat folder latihanajax di folder xampp di c:\xampp\htdocs\latihanajax
Nanti seluruh file latihan ada folder tersebut.
Buat file latsatu.html

Coba anda tuliskan sebuah text pada form di bawah

Buat file latsatu.js

var xmlHttp = bikinXmlHttp();

function bikinXmlHttp() {
var xmlHttp;
if (window.ActiveXObject) {
try { //jika IE
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e) {
xmlHttp = false;
}
} else {
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
xmlHttp = false;
}
}
if (!xmlHttp) {
alert(“Gagal dalam membuat xmlHttpRequest Object”);
} else {
return xmlHttp;
}
}

function proses() {
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
teks = encodeURIComponent(document.getElementById(“teksInput”).value);
xmlHttp.open(“GET”, “latsatu.php?teks=”+teks, true);
xmlHttp.onreadystatechange = responServer;
xmlHttp.send(null);
} else {
setTimeout(‘proses’,1000); //jika sibuk ulangi dalam 1 detik
}
}

function responServer() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.documentElement;
hasilTeks = xmlDocumentElement.firstChild.data;

document.getElementById(“hasilProses”).innerHTML = hasilTeks;
setTimeout(‘proses()’,1000);
} else {
alert(“Ada problem, method statusText adalah “+xmlHttp.statusText);
}
}
}

Buat file latsatu.php

< ?php
header(‘Content-type:Text/xml’);
echo ‘‘;

echo ‘‘;
$teks = htmlentities($_GET[teks]);

if (!empty($teks)) {
echo ‘Teks yang anda masukkan adalah : ‘.$teks;
} else {
echo ‘Silahkan Masukkan teks pada kotak input di atas’;
}
echo ‘‘;
?>

Kalau sudah, silahkan buka web browser anda, pakai IE dan firefox
Ketikkan di url nya, http://localhost/latsatu.html
Maka hasilnya adalah sebagai berikut :
Jika kita memasukkan teks di form, otomatis teks tersebut akan dituliskan di bawahnya. Kenapa bisa begitu? Di bawah ini saya jelaskan keterangan programnya.
Keterangan listing program :

Dokumen latsatu.html adalah file HTML standard

Untuk memanggil javascript di file eksternal.

Pada input di atas, kita definisikan onkeyup=’proses()’ yang artinya, jika pointer/cursor kita arahkan di dalam form maka akan memanggil fungsi javascript process(). Sedangkan id=”teksInput” digunakan untuk menandai bahwa form ini mempunya id yang bernama teksInput.Kita definisikan id=”hasilProses” untuk menampilkan hasil dari fungsi proses().

Dokumen latsatu.js
Membuat object xmlHttp untuk melakukan transaksi data, karena antara IE dan browser yang lain beda, maka kita definisikan variabel xmlHttp adalah sebuah fungsi yang mengecek apakah browser yang dipakai IE atau bukan.
Untuk IE, xmlHttp di definisikan oleh ActiveXObject(”Microsoft.XMLHTTP”) sedangkan untuk browser yang lain, xmlHttp di isi fungsi XMLHttpRequest().
var xmlHttp = bikinXmlHttp();

function bikinXmlHttp() {
var xmlHttp;
if (window.ActiveXObject) {
try { //jika IE
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e) {
xmlHttp = false;
}
} else {
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
xmlHttp = false;
}
}
if (!xmlHttp) {
alert(“Gagal dalam membuat xmlHttpRequest Object”);
} else {
return xmlHttp;
}
}

Setelah kita definisikan xmlHttp, kita bisa pakai object tersebut didalam fungsi yang lain. Fungsi proses() berisi xmlHttp.readyState, readyState adalah property dari xmlHttp, bisa bernilai 0-4, bernilai 4 berarti koneksi request sukses, yang berarti baris selanjutnya yang akan dieksekusi. Kita akan bahas detail tentang XMLHttpRequest di Bab selanjutnya.
Kemudian pada baris 3, pengambilan nilai dari dokumen dengan id “teksInput” yang tidak lain adalah input teks pada latsatu.html, kita namai nilai dari form itu sebagai variabel “teks”.

Properti onreadystatechange adalah untuk meminta respon server, yang akan di definisikan pada fungsi di bawahnya. Sedangkan setTimeout adalah fungsi javascript untuk mengulang dalam waktu 1 detik jika server sibuk.
function proses() {
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
teks = encodeURIComponent(document.getElementById(“teksInput”).value);
xmlHttp.open(“GET”, “latsatu.php?teks=”+teks, true);
xmlHttp.onreadystatechange = responServer;
xmlHttp.send(null);
} else {
setTimeout(‘proses()’,1000); //jika sibuk ulangi dalam 1 detik
}
}

Fungsi respon server di minta oleh fungsi proses(), readyState = 4 jika proses yang dilakukan object telah selesai dan properti status = 200 adalah respon akan mengembalikan nilai OK karena dokumen ditemukan pada waktu request.
responseXML merupakan property untuk mengembalikan respon dalam format XML
documentElement digunakan untuk mengambil root element pada dokumen XML
firstChild.data untuk mengambil nilai pada element pada dokumen XML
pada baris 7 id “hasilProses” pada dokumen HTML akan diberi nilai hasilTeks yang merupakan nilai dari dokumen XML.
function responServer() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.documentElement;
hasilTeks = xmlDocumentElement.firstChild.data;

document.getElementById(“hasilProses”).innerHTML = hasilTeks;
setTimeout(‘proses()’,1000);
} else {
alert(“Ada problem, method statusText adalah “+xmlHttp.statusText);
}
}
}

Kode di atas hanyalah salah satu contoh sederhana penggunaan konsep ajax, jika anda masih bingung adalah wajar karena penjelasan masing2 ada di bab selanjutnya.

Terbilang dengan Suara

“Pulsa anda sekarang adalah : dua – puluh – ribu – tiga – ratus – rupiah !” Demikian sahut operator mesin di seberang sana saat seseorang merequest cek pulsa pada penyedia layanan telepon selular.

“Pemberhentian berikutnya: halte sarinah, mohon periksa kembali barang bawaan anda dan hati-hati melangkah”, operator di dalam bus trans Jakarta mengingatkan para penumpangnya sesaat sebelum bus berhenti pada stasiun tertentu.

“Nomer antrian tiga – puluh – empat, di counter dua”, operator mesin kembali bersuara di sebuah antrian Bank.

Canggih sekali ya suara-suara tersebut ! Ternyata aplikasi berbasis suara sangat membantu manusia dalam menjalani kehidupan kita sehari-hari. Rumitkah membuat program di atas ?, “Loh memang suara itu diprogram yach ?, bukannya ada mbak-mbak yang ngomong di speaker ?”. “Ya iyalah diprogram… kasihan sekali dong mbak-nya jika terlahir ke dunia ini hanya untuk nongkrongin speaker terus setiap waktu. Hi hi hi….

Download Tulisan Lengkap: evacliquers-TerbilangSuara.zip

Trik Matikan Komputer Dengan Klik Kanan

Selalu banyak cara dalam memodifikasi komputer. Mulai dari modifikasi perangkat keras(hardware) dengan cara membeli perangkat keras baru hingga modifikasi perangkat lunak(software) dengan menggunakan perangkat lunak tambahan.

Namun modifikasi yang sering terjadi dan dilakukan terhadap komputer sering terlihat di sisi perangkat lunak itu sendiri. Hal tersebut dapat dilihat dari penambahan perangkat lunak tambahan seperti aplikasi pengolah kata, aplikasi pengolah database dan aplikasi pemrograman.

Terkadang seorang pengguna komputer merasa tidak puas dengan tampilan standar yang diberikan oleh sistem operasi itu sendiri. Maka mereka sering melakukan modifikasi sistem operasi dengan menggunakan aplikasi tambahan atau melalui fasilitas yang ada di sistem operasi itu sendiri, seperti: regedit, mmc dan lain-lain.

Salahsatu contoh modifikasi sistem operasi dengan menggunakan fasilitas lainnya yaitu dengan memanfaatkan bahasa pemrograman yang sudah ada pada sistem operasi itu sendiri. Windows merupakan salahsatu sistem operasi yang memiliki bahasa pemrograman built-in. Beberapa bahasa perograman yang berada di Windows dan bersifat Client-Side diantaranya yaitu JavaScript dan VBScript.

Download Tulisan Lengkap: evacliquers-shutdownklikkanan.zip

Bekenalan dengan AJAX

Istilah AJAX (Asynchronous JavaScript And XML) dalam pengembangan web menjadi populer
pada beberapa tahun belakangan ini. AJAX ini sendiri bukan merupakan bahasa pemrograman baru, AJAX hanya merupakan sebuah teknik pemanfaatan object XMLHttpRequest dengan javascript untuk berkomunikasi dengan server secara Asynchronous, dengan pemanfaatan object XMLHttpRequest ini kita dapat membuat proses berjalan secara background atau bekerja dibelakang layar sementara user dapat tetap berinteraksi dengan halaman web yang ada. Pemanfaatan tehnik Asynchronous ini jugalah yang telah mendorong pengembangan web menjadi lebih kaya atau banyak yang menulisnya dengan istilah pengembangan Rich Internet Application (RIA) atau WEB 2.0.

Pada artikel ini akan dibahas tentang pemanfaatan tehnik komunikasi kepada server secara Asynchronous dengan mengunakan object XMLHttpRequest yang dibuat dengan Javascript dan membaca struktur XML data dengan menanfaatkan DOM (Document Object Model).

Download Tulisan Lengkap:

1. evacliquers: Berkenalan dengan Ajax
2. evacliuers-Source-Code

Membuat Aplikasi Peta Sederhana menggunakan AJAX

Dalam tulisan kali ini penulis mencoba membahas penerapan AJAX (Asynchronous Javascript and XML) untuk membuat aplikasi peta berbasis web. Seperti kita ketahui bersama bahwa AJAX dapat digunakan pada website yang berinteraksi dengan server melalui javascript secara asinkron (background), sehingga pengguna tidak perlu me-load keseluruhan isi page. Hal ini menyebabkan pengiritan waktu dan bandwidth, juga menghasilkan website yang makin interaktif.

Kali ini sengaja penulis tidak menjelaskan secara detail mengenai teori-teori AJAX karena teori-teori tersebut sudah pernah penulis bahas di artikel sebelumnya yang berjudul Membangun Aplikasi Web Menggunakan AJAX. Berikut ini URL address yang menunjukkan artikel dasar-dasar AJAX tersebut diatas
http://ilmukomputer.org/2007/07/10/membangun-aplikasi-web-dengan-ajax
Silakan download artikel lengkap dan contoh source pada link ekoheri-petaajax.pdf dan ekoheri-petasourcecode.zip dibawah ini

Download Tulisaan Lengkap:

1. evacliquers-petaajax.pdf
2. evcliquers-petasourcecode.zip

Proteksi Control Panel dengan JavaScript

Menghentikan seseorang mengakses ke aplikasi-aplikasi sistem di komputer merupakan salah satu cara dalam mengamankan sistem operasi. Namun dalam sistem operasi terdapat satu bagian penting yang berhubungan langsung dengan hardware (perangkat keras) dan tentunya jika diakses oleh orang yang tidak berwenang akan mengakibatkan sistem menjadi crash (hang) bahkan hardware yang sedang diakses bisa jadi tidak dapat digunakan kembali. Nah, sekarang bagaimana cara mengamankan aplikasi sistem terpenting dari sistem operasi tersebut. Ikutilah petunjuk berikut ini.
Trik yang satu ini pernah dimuat di Tabloid PCplus pada edisi 279 (20 Maret – 02 April 2007) melalui rubrik

Download Tulisan Lengkap: evacliquers-proteksicontrolpanel.zip

Tips & Trik Javascript

Bila kita sering membuat Program Aplikasi Web, tentunya Pemrograman Javascript dibutuhkan untuk melakukan pengolahan awal halaman web . Berikut beberapa Tips & Trik Javascript yang cukup berguna untuk kita pakai

Download Tulisan Lengkap: evacliquers-javascript.zip

Pengantar Java Script

Semenitpun Internet tidak akan berhenti berkembang , demikian juga dengan bahasa pemrograman berbasis web yang akan selalu berkembang, termasuk juga JavaScript, yang merupakan bahasa pengenalan awal sebelum kita benar benar serius terjun dan berkecimpung di dalam pengembangan aplikasi web. Pada artikel Pengantar JavaScript ini kita akan belajar dasar dasar pengenalan struktur bahasa dan cara kerja JavaScript dalam suatu dokumen HTML

Download Tulisan Lengkap: evacliquers-Pengantar JavaScript

Membuat Aplikasi Testimonial Dengan AJAX

Anda semua pastilah sudah sangat familiar dengan testimonial. Sekarang ini banyak sekali web site yang sudah dilengkapi dengan testimonial. Pada intinya testimonial itu berfungsi sebagai sarana bagi pengunjung sebuah situs web untuk mengisi kritik dan saran terhadap web site tersebut. Pada tulisan kali ini penulis mencoba membahas bagaimana membuat aplikasi testimonial menggunakan AJAX. Jika pada artikel dasar-dasar AJAX yang pernah dibahas sebelumnya penulis hanya membahas metode GET, kali ini penulis akan menggunakan metode POST untuk membuat aplikasi testimonial ini.

Download Tulisan Lengkap: evacliquers-TestimonialAJAX

Katakan Cinta dengan Java

Adakalanya kita ingin mengatakan atau mengungkapkan perasaan cinta kita kepada seseorang yang kita sayangi, katakan dengan bunga atau kado, itu mah sudah biasa. Sekarang kita akan mengungkapkan perasaan cinta itu dengan Java yaitu applet Java atau bisa juga disebut applet cinta

Dowload Tulisan Lengkap: evacliquers-cinta.zip

Permalink Tinggalkan sebuah Komentar