T-10 Homepage

Seiring berkembanganya aplikasi web, satu per satu fasilitas / feature yang terkesan kaku pada halaman web diubah menjadi interaktif dan dapat menarik perhatian pengunjung web tersebut. Seperti halnya form pencarian, pada saat web belum berkembang seperti sekarang, form pencarian hanya sebatas textbox dan beberapa filter item lainnya, namun kali ini feature pencarian banyak yang dilengkapi dengan feature autocomplete.

Dengan adanya autocomplete, pengunjung sangat dibantu dalam melakukan pencarian karena autocomplete dapat memberikan daftar hasil-hasil pencarian sesuai yang diinput oleh user sebelum user menekan tombol submit atau tombol “cari”. Proses pada background yang melakukan autocomplete pencarian adalah dengan menggunakan Ajax.

Contoh standar form autocomplete

Sekarang saya coba untuk membuat fasilitas autocomplete terlihat lebih menarik / fancy dengan memodifikasi format output hasil pencarian di bawah textbox seperti gambar diatas, menjadi seperti ini:

Form autocomplete yang lebih menarik / fancy

Tentu dengan format autocomplete seperti gambar diatas, pengunjung menjadi lebih terbantu dalam melakukan pencarian data yang lebih akurat karena disertakan juga foto hasil pencarian dan keterangan lainnya. Design diatas terinspirasi dari format hasil autocomplete di facebook.

Selengkapnya…

ComboBox atau element Select pada halaman website adalah elemen form yang sangat berguna untuk melakukan pemilihan data. Namun seringkali terjadi kesalahan pemilihan data seperti ketika memilih propinsi pada suatu pulau, malah memilih propinsi di pulau lainnya. Oleh karena itu combobox harus di design secara baik agar dapat mengurangi kesalahan input user.

Berikut adalah teknik untuk mendesign ComboBox dinamis dalam kasus pemilihan data lokasi.

Selengkapnya…

Berawal dari banyak request untuk pengembangan artikel sebelumnya tentang “Create, Update dan Delete Data Master Dengan Ajax” maka saya coba kembangkan form CRUD dengan metoda table dinamis (Dynamic Grid), maksudnya adalah semua kegiatan tambah, ubah dan menghapus dapat dilakukan pada table yang menampilkan data.

Masih mengambil topik managemen data pegawai, saya coba kembangkan script lama saya sehingga tampilannya seperti ini.

Tampilan saat menambah data

Tampilan saat mengubah data

Selengkapnya…

Pertama-tama saya ucapkan Selamat Tahun Baru 2010, semoga kita dapat meraih hasil yang lebih baik dari tahun sebelumnya.

Artikel kali ini akan membahas tentang animasi image yang sering di gunakan pada setiap sisi halaman website, yaitu image rotator. Image rotator adalah cara menampilkan daftar image yang diganti satu per satu dalam suatu periode. Animasi ini biasanya di pasang pada space banner di dalam halaman website, agar pengunjung dapat melihat satu per satu secara bergantian produk yang di tawarkan pada banner tersebut.

Untuk membuat efek image rotator dengan JavaScript biasa tentu akan sulit, namun dengan bantuan jQuery anda tidak perlu menulis banyak kode, karena efek animasi seperti fadeIn (menampilkan perlahan-lahan) dan fadeOut (menyembunyikan perlahan-lahan) sudah disediakan oleh library jQuery standar.

Selengkapnya…

Proses Create, Update dan Delete (CRUD) adalah proses dasar dalam management data. Kali ini saya akan membangun proses CRUD dengan metode Ajax.

Data yang diinput adalah data karyawan, pertama-tama ciptakan dulu table karyawan dan master departement:

Selengkapnya…