T-10 Homepage

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…

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…

Pada saat merancang sebuah form anda perlu memikirkan masalah user interface agar para pengguna aplikasi anda dapat dengan mudah mengoperasikan sistem yang anda buat dan mencegah adanya human error. Design user interface pada aplikasi harus diperhatikan pada setiap field yang berhubungan dengan data dari database.

Pada artikel kali ini saya ingin memberikan tips bagaimana mensiasati perancangan form pada saat pencarian data pada suatu table yang record-nya sudah banyak sehingga tidak mungkin element SELECT/DROPDOWN bisa menampungnya. Berikut adalah screenshootnya:

Pada tampilan diatas ada satu inputan kode pegawai dan di sebelahnya adalah nama pegawai sesuai dari kode yang dimasukkan. Apabila user hafal dengan kode pegawai maka kode dapat langsung diinput dan ketika cursor sudah keluar dari inputan kode maka dengan metode Ajax, pencarian nama pegawai dengan kode yang diinput sebelumnya pun akan dilakukan. Namun apabila user lupa akan kode pegawai, dia dapat menekan tombol cari dan keluar dialog seperti gambar diatas. Dialog diatas bertujuan untuk mensupport user dalam melakukan pencarian pegawai yang ingin diinput.

Selengkapnya…

Pada setiap aplikasi, menu merupakan element paling penting yang berfungsi sebagai navigasi dari halaman satu ke halaman lainnya, dari module satu ke module lainnya. Pada aplikasi yang lebih professional, menu sangat diperhatikan karena merupakan sarana untuk pembagian module per masing-masing user dan group pengguna aplikasi.

Menu sebagai dasar navigasi dari suatu aplikasi haruslah dimanis atau bisa diedit, ditambah dan di custom oleh admin. Untuk itu menu setiap link-nya harus disimpan di database, berikut sample table menu yang sederhana.

Selengkapnya…