Portal dan PortalComponent merupakan kelas yang saya buat memudahkan user untuk membuat web-portal/start-up page layout. Kelas ini pula yang digunakan kelompok saya pada tugas PPL semester yang lalu. Sebagai contoh web-portal yang dapat dihasilkan, Anda dapat melihat situs seperti iGoogle, MyYahoo, PageFlakes, dan Netvibes.

Agar lebih mudah dipahami, dapat diibaratkan Portal merupakan “wadah” dan PortalComponent merupakan “pengisi wadah”-nya.

Bagaimana cara menggunakan class ini? Ikuti beberapa langkah berikut. Pada contoh ini, saya mengasumsikan Anda menggunakan Netbeans IDE 6.0 dengan plugin GWT4B sudah terinstall, dan framework GWT sudah terkonfigurasi dengan benar.

  1. Copy file Portal.java dan PortalComponent.java ke package client.
  2. Copy folder themes ke dalam folder Web Pages.
  3. Tambahkan kode
  4. <link rel="stylesheet" type="text/css" href="themes/portal-style.css">
    ke web host page di dalam tag <head></head>

  5. Pada Entry Point class, tambahkan kode berikut
  6. //Make layout composition consisted of three columns each 30% width
    //You can make less than 3 columns by setting "0" to the parameter
    public Portal portal = new Portal("30%", "30%", "30%");
    public PortalComponent portalComponent1 = new PortalComponent("Component 1",
    new HTML("This is content of Component 1"));
    public PortalComponent portalComponent2 = new PortalComponent("Component 2",
    new HTML("This is content of Component 2"));
    public PortalComponent portalComponent3 = new PortalComponent("Component 3",
    new HTML("This is content of Component 3"));
    public PortalComponent portalComponent4 = new PortalComponent("Component 4",
    new HTML("This is content of Component 4"));
    public PortalComponent portalComponent5 = new PortalComponent("Component 5",
    new HTML("This is content of Component 5"));
    public PortalComponent portalComponent6 = new PortalComponent("Component 6",
    new HTML("This is content of Component 6"));
    public PortalComponent portalComponentHeader = new PortalComponent("Header Component",
    new HTML("This is Header Component"));
    public PortalComponent portalComponentFooter = new PortalComponent("Footer Component",
    new HTML("This is Footer Component"));
    dan override method onModuleLoad menjadi sebagai barikut
    public void onModuleLoad() {
    RootPanel.get().add(portal);


    //Make portalComponent1 - 6 dragable
    portal.setDragable(portalComponent1);
    portal.setDragable(portalComponent2);
    portal.setDragable(portalComponent3);
    portal.setDragable(portalComponent4);
    portal.setDragable(portalComponent5);
    portal.setDragable(portalComponent6);

    //Add components to portal
    portal.addComponent(portalComponent1, DockPanel.WEST);
    portal.addComponent(portalComponent2, DockPanel.CENTER);
    portal.addComponent(portalComponent3, DockPanel.EAST);
    portal.addComponent(portalComponent4, DockPanel.WEST);
    portal.addComponent(portalComponent5, DockPanel.CENTER);
    portal.addComponent(portalComponent6, DockPanel.EAST);
    portal.addComponent(portalComponentHeader, DockPanel.NORTH);
    portal.addComponent(portalComponentFooter, DockPanel.SOUTH);

    //Make portalComponentHeader and footer's header not visible
    portalComponentHeader.setVisibleHeader(false);
    portalComponentFooter.setVisibleHeader(false);

    //Make portalComponent3 not closable
    portalComponent3.setClosable(false);
    }

Hasilnya, dapat Anda lihat pada Live-Demo, link alternatif: Live-Demo2

Download link:

  • Full example project (under construction)
  • Class files + stylesheet (under construction)

Di kampus, khususnya di Gamais di mana saya banyak beraktifitas, kirim SMS ke banyak (biasanya disebut nge-jarkom gurita) merupakan cara yang paling efektif dan efisien untuk memberitahukan informasi ke seluruh kader.

Kalau jumlah penerimanya hanya puluhan, mungkin masih bisa efektif menggunakan jarkom tangga/ular atau menggunakan fitur send to many dari handphone. Tapi kalau jumlahnya ratusan bahkan mendekati angka 1000? Cara seperti itu tidak lagi efektif.

Untuk itu, dikembangkanlah (sebenarnya bisa saja menggunakan aplikasi open source seperti Gammu, tapi emang niatnya ngoprek sih^^) sebuah aplikasi SMS yang dapat mengirim SMS ke banyak nomor hanya dengan satu kali klik. Aplikasi tersebut terakhir diberi nama ATCommander. Sebenarnya rencana awalnya ATCommander dikembangkan untuk program Tahajjud Call. Namun, karena beberapa kendala, belum dapat diimplementasi sepenuhnya.

Aplikasi ini dikembangkan menggunakan Delphi dan berjalan pada sistem operasi Windows. Perangkat keras yang dibutuhkan adalah handphone yang dapat mengirim SMS beserta kabel datanya, serta sebuah PC/Laptop.

Nomor penerima dapat diinput langsung atau disimpan dalam file teks dengan separator bebas. Jadi, langkah-langkah penggunaan aplikasi untuk SMS adalah seperti ini.

  1. Sambungkan handphone dengan PC
  2. Set port yang sesuai lewat menu “Port Setting”, lalu “Open Port”.
  3. Ketik konten SMS dan set SMS Center sesuai provider.
  4. Masukkan nomor penerima baik langsung maupun dari file teks.
  5. Klik “Send to List”, maka program akan mengirimkan SMS tersebut ke semua nomor dalam list.

Referensi dalam mengembangkan aplikasi ini:

Google Web Toolkit adalah framework yang ditawarkan Google untuk membuat aplikasi AJAX. Saya menggunakan framework ini dalam mengerjakan proyek sepanjang satu semester lalu di mata kuliah Proyek Perangkat Lunak (PPL).

Secara umum, kelebihan yang ditawarkan GWT ini yang dapat saya eksplorasi antara lain:

  • Anda dapat mengkode aplikasi AJAX dalam Java (yang tentunya lebih mudah dibanding JavaScript^^). Nanti compiler akan mengoversi client-side code ke dalam JavaScript. Sedangkan server-side code tetap dijalankan dalam kode biner Java.
  • Banyak kelas primitif yang disediakan (kelas Widget dan Panel) untuk membuat user interface. Nanti compiler akan mengonversi secara dinamis ke dalam tag-tag HTML. Mudah berkomunikasi client-server dengan mekanisme Remote Procedure Call (RPC) dengan fasilitas “GWT-RPC Service”. Anda tetap dapat menulis kode secara native untuk HTML, JavaScript, submit form, dsb.

Namun ada juga kekurangannya, yaitu:

  • Jika menggunakan Netbeans IDE, anda dapat menggunakan plugin GWT4NB untuk memudahkan membangun aplikasi dengan framework GWT. Tetapi, GWT4NB ini masih Beta Version sehingga terdapat bug-bug yang mengganggu.
  • Aplikasi yang dihasilkan relatif besar ukurannya.

Berikut ini ada beberapa panduan untuk mempermudah Anda jika ingin melakukan eksplorasi GWT.

Sekian dulu, semoga bermanfaat 🙂

Setelah saya posting artikel tentang membuat template engine sederhana, sekarang saya akan men-share bagaimana membuat template yang dapat digunakan oleh template engine tersebut (MySmarty). Kalau di artikel yang lalu itu lebih dominan untuk programmer, sekarang lebih dominan untuk desainer =).

Sebuah template merupakan satu direktori yang memiliki struktur file di dalamnya sebagai berikut:

  • Folder <nama_template>, yang berisi :
    1. file <nama_template>.tpl,
    2. file <nama_template>.css (optional).

File *.tpl adalah file template HTML utama. File *.css merupakan file stylesheet yang dibutuhkan dan harus ada walaupun file tersebut kosong. File-file lain seperti file javascript, gambar, dll dapat disertakan sesuai kebutuhan di dalam folder.

Prinsip kerjanya sederhana, Baca entri selengkapnya »

Inginnya posting artikel ini sejak sebelum-sebelumnya, tapi karena saya terlalu sibuk dengan deadline tugas, jadi baru sempat sekarang.

Berawal dari kebingungan yang saya alami dalam mengerjakan tugas kuliah Perograman Internet, khususnya dalam membuat fitur memilih template (Ohya, buat yang belum tahu, tugasnya itu membuat CMS sederhana dengan PHP). Bagaimana caranya membuat fitur memilih template yang:

  • sederhana;
  • mudah digunakan oleh programmer;
  • reusable, dapat digunakan untuk kode program yang lain;
  • template dapat ditambah tanpa harus mengkode ulang;
  • template dapat dibuat terpisah (mandiri) oleh desainer;

Titik terang mulai tampak ketika saya melihat seorang teman menggunakan sesuatu yang disebut Template Engine Baca entri selengkapnya »