Hari - Hariku Dengan Pemrograman :)

Tentang Sistem Operasi

2011-02-19T12:34:00.001+07:00

Saya masih ingat ketika masih kuliah (1997), dalam suatu ujian mata kuliah Interaksi Manusia Dan Komputer, terdapat satu pertanyaan: "Menurut anda sistem operasi (OS - Operating System) seperti apakah yang paling bagus untuk PC di masa yang akan datang?"

Pada saat itu, sistem operasi yang paling banyak digunakan adalah Windows 95/DOS. Jawaban saya pada waktu itu adalah BeOS karena tampilannya yang intuitif, kelengkapan fiturnya, serta BeOS merupakan OS yang paling canggih pada saat itu. Dimana BeOS sudah mempunyai semua aplikasi yang dibutuhkan hanya untuk sekali instal, mulai dari aplikasi multimedia sampai aplikasi server seperti PoorMan (Web Server).

Meskipun jawaban saya dianggap benar pada waktu itu, tetapi belakangan saya merasa malu juga, karena pada perkembangannya BeOS tidak terkenal hahaha :). BeOS sampai saat ini masih dikembangkan dengan nama baru yakni Haiku.

Sekarang banyak alternatif sistem operasi yang bisa berjalan pada x86 (intel, amd dan sejenisnya), yakni:
1. Windows 7 (Windows Vista, Windows XP, dll)
2. Linux (Ubuntu, Google Chrome, Fedora, Debian dll)
3. MacOs (Leopard, Tiger)
4. Android
5. MeeGo
6. Haiku
7. BSD
8. dan lain - lain

Dengan demikian kita tidak perlu lagi tergantung pada satu jenis sistem operasi saja, terutama yang selama ini sudah begitu mendarah daging yakni Microsoft Windows. Kalau punya ruang harddisk yang banyak, sekalian diinstall saja semua di komputer/laptop sistem operasinya. Sehingga kita bisa setiap hari mencicipi sistem operasi berbeda - beda.

Data Grid pada web? Gampang... Part 2

2010-05-27T14:27:00.001+07:00

Seperti yang sudah saya tunjukkan di artikel sebelumnya, pada aplikasi web juga bisa kita tampikan Data Grid layaknya Data Grid pada aplikasi desktop.

Persiapan
Unduh dhtmlxGrid di sini. Lanjutkan dengan mengekstrak file tersebut kedalam folder js (misalnya).
Sebagai contoh, anda dapat lihat gambar berikut ini:

Tidak ada salahnya untuk membaca dokumentasi dhtmlxGrid di http://docs.dhtmlx.com/doku.php?id=dhtmlxgrid:toc

Buat sebuah halaman html/php yang menampilkan tabel biasa. Misalnya halaman yang mengandung kode berikut:

<table id="grid1">
  <tbody>
    <tr>
      <th>Kolom 1</th>
      <th>Kolom 1</th>
      <th>Kolom 2</th>
    </tr>
    <tr>
      <td>1</td>
      <td>a</td>
      <td>asal aja</td>
    </tr>
    <tr>
      <td>2</td>
      <td>b</td>
      <td>Ok deh</td>
    </tr>
  </tbody>
</table>

Tampilan kode di atas kira - kira sebagai berikut:

Membuat Tampilan Datagrid

Pada contoh kode di atas, kita hanya perlu membuat tabel HTML biasa. Satu hal yang harus diperhatikan dari contoh di atas adalah atribut id dari tabel yang kita buat. Atribut id dari tabel di atas adalah grid1 dan id ini menjadi penanda bagi dhtmlxGrid untuk mengubah tampilan tabel biasa menjadi Data Grid.

Selanjutnya pada halaman yang berisi tabel tersebut kita tambahkan setelah tag table script berikut ini:

<link rel="STYLESHEET" type="text/css" href="js/dhtmlx/codebase/dhtmlxgrid.css"> 
<script type="text/javascript" src="js/dhtmlx/codebase/dhtmlxcommon.js"></script> 
<script type="text/javascript" src="js/dhtmlx/codebase/dhtmlxgrid.js"></script> 
<script type="text/javascript" src="js/dhtmlx/codebase/dhtmlxgridcell.js"></script>

<script>
    var grid = dhtmlXGridFromTable("grid1");
    grid.enableAutoWidth(true);
    grid.enableAutoHeight(true);
    grid.setSizes(); 
 </script>

lalu buka halaman web tersebut pada browser dan, Voila! tabel anda sudah berubah.
Berikut hasil perubahan dari contoh di atas:

kolom - kolomnya bisa di resize sesuka hati anda dan baris - barisnya juga bisa dipilih. Tampilan Data Grid di atas setelah saya resize menjadi:

Mudah bukan?
Dari penuturan saya diatas, bisa kita lihat bahwa untuk membuat Data Grid pada web ternyata mudah. Hanya perlu menambahkan beberapa baris javascript saja pada tampilan tabel yang sudah ada, tabel lama anda bisa berubah menjadi Data Grid.

Pengembangan selanjutnya..
Data Grid diatas sudah bisa anda ubah sesuaikan (customize) baik tema, tampilan alternatif baris, ukuran dan lain - lain. Baca manual dhtmlxGrid untuk lebih lengkapnya.
Selain untuk menampilkan data tabulasi, dhtmlxGrid juga dapat difungsikan sebagai alat masukan layaknya spreadsheet. Untuk pengembangan selanjutnya akan saya bahas pada artikel selanjutnya.

Pantau terus blog ini :)

Data Grid pada web? Gampang... Part 1

2010-05-27T10:33:00.000+07:00

Pada awalnya saya terlibat dalam proyek sistem informasi akademik salah satu universitas swasta terkenal di Yogyakarta pada tahun 2007. Beberapa permintaan dalam sistem informasi tersebut adalah:

Berbasis web
Open Source
Tampilan harus sama atau paling tidak mendekati dengan sistem lama yang dibangun dengan Delphi 7.

Permintaan ke 3 di atas merupakan sebuah tantangan, karena tidak semua tampilan desktop bisa dimplementasikan pada web. Salah satunya adalah tampilan Data Grid.

Data Grid merupakan salah satu komponen yang paling sering dipakai dalam suatu aplikasi kantoran yang berbasis desktop. Para programmer Delphi bisa dikatakan hampir selalu memakai komponen Data Grid untuk menampilkan data tabulasi. Pada kasus sistem informasi akademik di atas, aplikasi sebelumnya juga memakai komponen Data grid untuk menampilkan daftar mahasiswa.

Sementara pada web, yang ada hanya tampilan tabel yang statis. Seperti tampilan tabel pada PHPMyAdmin berikut:

Pihak klien pada saat itu tidak setuju dengan tampilan statis dan minta agar tampilan tabel harus mirip dengan tampilan Data Grid.

Setelah melakukan sedikit riset dan googling, saya menemukan dhtmlx Grid. Dari dokumentasi dan contoh - contoh yang mereka berikan, saya mencoba memakai komponen tersebut dalam aplikasi yang sedang kami kembangkan. Hasilnya pihak klien merasa puas dengan tampilan tersebut.

Semenjak itu saya memakai komponen dhtmlxGrid untuk menampilkan data tabulasi dalam setiap aplikasi web yang saya buat. Berikut salah satu tampilan aplikasi web yang saya buat akhir - akhir ini:

Pada tampilan di atas, dapat kita lihat tidak ada perbedaan antara tampilan Data Grid pada aplikasi desktop maupun tampilan Data Grid pada web.

Berikut sedikit keterangan pada tampilan Data Grid di atas:

1. Ketika tombol cari di klik, Data Grid akan mencari data yang dimaksud pada isian cari (keyword) dan menampilkannya ke pengguna.

2. Tombol Cari Lagi di klik maka Data Grid akan menggulung (scroll) tampilan sampai data selanjutnya tersebut tertampil pada layar.

3. Tombol - tombol di bawah (Timbang Badan, Pemberian Fe dll) akan dimunculkan jika salah satu baris pada Data Grid dipilih, dan akan dihilangkan jika tidak ada data yang dipilih.

Dari keterangan di atas, kita bisa melihat kalau tampilan Data Grid di atas mempunyai kelakuan yang sudah mendekati kelakuan tampilan pada aplikasi Desktop.

Seperti pada judul artikel ini, membuat tampilan di atas gampang. Hal tersebut akan saya bahas pada artikel selanjutnya. :)

Packman Google Doodle! Bikin kaget aja.

2010-05-22T09:05:00.000+07:00

Pertama lihat halaman Google kaget juga ada logo aneh. Selanjutnya iseng - iseng aku coba pakai keyboard untuk main, eh kok bisa!

Aku meng-klik kanan untuk melihat properties doodle tersebut untuk melihat apakah ini cuma flash (berarti tidak ada apa - apanya), dan aku tidak mendapati kode flash di sana. Karena aku memakai browser Google Chrome, jangan - jangan ini hanya fasilitasnya browser saja. Atau mungkin doodle ini memakai property canvasnya HTML 5 sehingga bisa dibuat game. Jadi aku langsung buka memakai browser yang paling konservatif yakni Internet Explorer 8. Ternyata doodle tersebut tetap bisa dimainkan. Wow! Tidak ada pemakaian HTML 5. Hmm.. berarti doodle ini masih memakai teknologi lama yakni Javascript + HTML 4.

Kemudian aku view page source, untuk melihat lebih dekat lagi. Memang benar masih memakai HTML 4 + Javascript. Kemudian aku periksa elemen - elemennya memakai fitur yang terdapat pada Google Chrome, hasilnya sebagai berikut:

Game/doodle tersebut ternyata bukan teknologi baru seperti yang aku curigai melainkan inovasi baru dari teknologi - teknologi yang sudah ada yakni HTML 4, Javascript dan DOM (Document Object Model).

Selamat ulang tahun yang ke 30 buat Pacman (Namco Bandai) dan juga selamat buat Google khususnya Ryan Germick dan Marcin Wichary yang telah kreatif menghadirkan Pacman pada platform web.

j-query oh j-query

2010-05-15T12:41:00.000+07:00

Sebelumnya aku mencoba berbagai jenis Framework Javascript, mulai dari Prototype, GWT (Google Web Tool), YUI (Yahoo User Interface), EXT-js dan dhtmlx. Sampai akhirnya kemudian ketemu j-query.

J-query awalnya secara tidak sengaja aku lihat di gunakan di situs web Source Forge. Selanjutnya aku coba - coba dengan setengah hati dan kemudian jatuh cinta. Framework ini cukup mudah dipelajari, intuitif dan fitur manipulasi DOM nya yang wow!

J-query mempunyai selector elemen DOM yang menurutku lebih canggih daripada framework javascript lainnya. Tidak hanya bisa memilih elemen berdasarkan ID melainkan juga bisa memilih elemen berdasarkan tag, nama class atau atribut lainnya. Selain itu j-query dilengkapi dengan filter elemen DOM. J-query benar - benar membuatku lebih mudah untuk memanipulasi dokumen HTML.

Hal ini juga mungkin dirasakan oleh programmer - programmer web lainnya sehingga kemudian muncul istilah j-query itu merupakan javascript generasi baru. Dalam situs j-query disebutkan :"jQuery is designed to change the way that you write JavaScript."

Sekarang J-query merupakan framework javascript yang paling terkenal dalam dunia pengembangan web. Microsoft bahkan mengintegrasikan j-query dalam visual studio sejak visual studio 2008 sp1.

Thanks to John Resig dan teman - teman pengembang J-Query lainnya yang telah kreatif membuat tool semacam ini. Nice Job.