RIA (Rich Internet Application) Makin Nyata Dengan OpenLaszlo

Apa sich Openlaszlo itu? kalau saya bisa jelaskan sedikit dengan bahasa layaknya manusia ,

Openlazlo merupakan salah satu tool yang dapat digunakan untuk mbangun aplikasi berbasis web atau istilah kerennya RIA (Rich Internet Application). kenapa saya bilang salah satu..? karena ada tool lain yang mungkin lebih populer, seperti salah satunya silverlight buatannya orang-orang microsoft. kedua tool ini bekerja dengan konsep yamg hampir sama, mereka sama-sama memanfaatkan XML saat menampilkan data kedalam browser.  itulah salah satu sebab yang membuat aplikasi terasa lebih real setelah load pertamakali.

Namun dari semua kelebihan dan kekurangan yang ada diantara keduanya, openlaszlo lah yang saya rasa cocok bagi web developer NPBP (No Pay Big Profit) karena openlazlo bisa kita peroleh dan gunakan secara gratis..tis..tis.. di http://www.openlaszlo.org/download !!

Menggunakan Openlaszlo, kita bisa mbuat aplikasi web tanpa page transition seperti web konvensional karena cara kerja yang dianut oleh tool ini, adalah cache and update some data. artinya data yang tidak mengalami perubahan tidak akan direfreshi, hanya data terbarulah yang akan direfresh ke dalam browser. fungsi API inilah yang membuat response time lebih singkat dibanding cara konvensional.

Sebagai gambaran dan sekaligus menjawab PR yang saya terima dari teman-teman mahasiswa, saya tampilkan contoh source code aplikasi berbasis openlaszlo untuk menampilkan dan menambah data.

saya asumsikan openlaszlo dan tool databasenya sudah ready di komputer. database bisa pakai DB2 atau MySql.

jika anda pakai DB2 maka harus ada db2jcc.jar dan db2jcc_license_cu.jar didalam folder WEB-INF\lib atau kalau anda pakai MySql yang harus ditambahkan ke dalam  WEB-INF\lib adalah mysql-connector-java-5.1.6-bin.jar.

1. Buat database dengan SQL berikut :

CREATE TABLE contact (email varchar(40) PRIMARY KEY, first_name varchar(20), last_name varchar(20), phone varchar(20));

2. jika ingin langsung coba dengan data, anda jalankan saja SQL berikut atau secara manual ditambahkan

INSERT INTO contact (email, first_name, last_name, phone) VALUES (‘aaa@tes.com’, ‘Joko’, ‘Supono’, ’123456789′);

INSERT INTO contact (email, first_name, last_name, phone) VALUES (‘bbba@tes.com’, ‘Andi’, ‘Subroto’, ’987654321′);

3. Tulis kode dibawah kemudian simpan dengan nama getcontacts.php. kode ini sama seperti kita menggunakan ekstensi JSP. Peran file ini adalah mengambil data yang ada pada tabel kemudian ditampilkan sebagai XML yang tersimpan langsung ke dalam memori.

<?php

// koneksi database

global $link;

$link = mysqli_connect(“host”, “username”, “password”, “database”);

// verifikasi koneksi

if (!$link)

{

printf(“Connection to database failed: %s\n”, mysqli_connect_error());

exit();

}

// perintah sql

$stmt = mysqli_prepare($link, “SELECT email, first_name, last_name, phone FROM contact”);

// eksekusi query

mysqli_stmt_execute($stmt);

// masukan isi field ke dalam variabel

mysqli_stmt_bind_result($stmt, $email, $first_name, $last_name, $phone);

// buat file XML

$xw = new xmlWriter();

$xw->openMemory();

$xw->startDocument(’1.0′,’UTF-8′);

$xw->startElement(‘phonebook’);

// ambil data

while (mysqli_stmt_fetch($stmt))

{

$xw->startElement(‘contact’);

// tulis atribut

$xw->writeAttribute(‘firstName’, $first_name);

$xw->writeAttribute(‘lastName’, $last_name);

$xw->writeAttribute(‘email’, $email);

$xw->writeAttribute(‘phone’, $phone);

$xw->endElement();

}

// akhir isi

$xw->endElement();

// akhir dokumen XML

$xw->endDocument();

// outputkan jadi XML

header(‘Content-Type: text/xml’);

print $xw->outputMemory(true);

// tutup koneksi tabel

mysqli_stmt_close($stmt);

// tutup koneksi databse

mysqli_close($link);

?>

dalam kode diatas menggunakan MYSQLI ( MYSQL Improved, muncul saat MYSQL5 dirilis), yang katanya lebih cepat dan secure (masih katanya )

4.   Terakhir, tuliskan kode openlaszlo yang menggabungkan XML dengan PHP atau JSP. di dalam kode ini akan kita lihat pemanggilan file PHP yang telah kita buat tadi.

<canvas height=”200″ width=”100%” bgcolor=”#D4D0C8″>

<dataset name=”dset” src=”http://host/getcontacts.php” request=”true” type=”http”/>

<class name=”contactview” extends=”view” visible=”false” x=”20″ height=”120″>

<text y=”10″>First Name:</text>

<edittext name=”firstName” datapath=”@firstName” x=”80″ y=”10″/>

<text y=”35″>Last Name:</text>

<edittext name=”lastname” datapath=”@lastName” x=”80″ y=”35″/>

<text y=”60″>Phone:</text>

<edittext name=”phone” datapath=”@phone” x=”80″ y=”60″/>

<text y=”85″>Email:</text>

<edittext name=”email” datapath=”@email” x=”80″ y=”85″/>

</class>

<simplelayout axis=”y”/>

<view>

<simplelayout axis=”y”/>

<text onclick=”parent.newContact.setAttribute(‘visible’, !parent.newContact.visible);”>New Entry…</text>

<contactview name=”newContact” datapath=”new:/contact”>

<button width=”80″ x=”200″ y=”10″>Add

<handler name=”onclick”>

parent.datapath.updateData();

var dp=canvas.datasets.dset.getPointer();

dp.selectChild();

dp.addNodeFromPointer( parent.datapath );

parent.setAttribute(‘visible’, false);

parent.setAttribute(‘datapath’, “new:/contact”);

</handler>

</button>

</contactview>

</view>

<view datapath=”dset:/phonebook/contact”>

<simplelayout axis=”y”/>

<view name=”list” onclick=”parent.updateContact.setAttribute(‘visible’, !parent.updateContact.visible);”>

<simplelayout axis=”x”/>

<text datapath=”@firstName”/>

<text datapath=”@lastName”/>

<text datapath=”@phone”/>

<text datapath=”@email”/>

</view>

<contactview name=”updateContact”>

<button width=”80″ x=”200″ y=”10″>Update

<handler name=”onclick”>

parent.parent.datapath.updateData();

</handler>

</button>

<button width=”80″ x=”200″ y=”40″>Delete

<handler name=”onclick”>

parent.parent.datapath.deleteNode();

</handler>

</button>

</contactview>

</view>

</canvas>

setelah semua selesai, tahap selanjutnya adalah testing project kita ini

oh iya, untuk koneksi database atau pemanggilan file php, sesuaikan host, user, password dan nama database dengan yang anda miliki.

OC.. semoga bermanfaat

Advertisement