Skip to content


Tips Merancang User Interface Form Pencarian Data

KurangBiasaLumayanBagusLuar Biasa (9 votes, average: 4.22 out of 5)
Loading ... Loading ...
3,188 views

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…

Posted in Ajax, Info, JQuery, JavaScript, PHP, Tips & Trick. Tagged with , , , , .

Membuat Menu Tree Dengan PHP dan JQuery

KurangBiasaLumayanBagusLuar Biasa (7 votes, average: 4.29 out of 5)
Loading ... Loading ...
3,920 views

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…

Posted in JQuery, JavaScript, PHP. Tagged with , , , .

Konsep Object Oriented Programming Pada Framework PrototypeJs dan jQuery

KurangBiasaLumayanBagusLuar Biasa (11 votes, average: 4.09 out of 5)
Loading ... Loading ...
1,620 views

Object Oriented Programming (OOP) adalah metode yang baik dalam pengembangan aplikasi. Sebuah variable biasa dapat di ubah menjadi sebuah object dan dapat melakukan banyak hal seperti simpan data, memformat penampilan data dll.

Sama hal-nya dengan bahasa pemrograman lainnya, JavaScript juga membutuhkan konsep OOP dalam pengembangan aplikasi yang lebih komplex dan powerful. Saat ini banyak framework JavaScript yang menawarkan kemudahan dalam pengembangan aplikasi namun tidak banyak di antara framework-framework tersebut yang support dengan konsep OOP seperti pemrograman lainnya.

Sejauh ini framework yang saya gunakan sehari-hari adalah jQuery dan PrototypeJs. Sejauh ini konsep OOP yang kuat masih dipegang oleh PrototypeJs dan di website ini banyak script yang saya berikan sentuhan OOP dalam pengembangannya. Namun ternyata jQuery bisa juga melakukan hal yang sama.

Berikut adalah contoh script OOP dengan menggunakan PrototypeJs berikut penjelasannya:

Selengkapnya…

Posted in Info, JQuery, JavaScript, PrototypeJs. Tagged with , , , , , .

Membuat Slideshow Headline Berita Sederhana Dengan JQuery (+Efek Animasi)

KurangBiasaLumayanBagusLuar Biasa (20 votes, average: 4.35 out of 5)
Loading ... Loading ...
5,495 views

Jika berbicara tentang sarana interaktif pada web di era saat ini. Efek slideshow tentunya paling sering digunakan oleh website-website yang mengandung content berupa berita. Slideshow biasa diisi dengan rangkuman-rangkuman berita terkini (Headline) agar pengunjung dapat memantau perkembangan berita terkini dengan sajian efek slideshow yang menarik dan tidak akan cepat membuat pengunjung bosan.

Contoh slideshow yang akan kita bangun pada artikel kali ini adalah seperti gambar berikut:

Kunci dari pembuatan fasilitas ini pada halaman web anda adalah CSS + JavaScript. Untuk membuatnya pertama kali buat halaman HTML seperti ini:

Selengkapnya…

Posted in JQuery, JavaScript, Snippets. Tagged with , , , , .

Implementasi JSON pada Aplikasi Ajax

KurangBiasaLumayanBagusLuar Biasa (12 votes, average: 3.92 out of 5)
Loading ... Loading ...
1,304 views

JSON ( JavaScript Object Notation ) singkatnya adalah salah satu format data yang digunakan untuk melakukan komunikasi antar aplikasi, khususnya aplikasi web. JSON sering digunakan sebagai alternatif penggunaan XML karena sifatnya yang lebih simple, lebih cepat dan lebih mudah di-parsing / terjemahkan.

Sama hal-nya pada aplikasi web yang menggunakan Ajax, JSON dianggap lebih powerful daripada XML untuk dijadikan sebuah response dari request Ajax. Jika XML ditampilkan dalam bentuk tag atau lebih menjurus ke format HTML, JSON lebih menjurus pada format variable JavaScript.

JSON biasanya mengkonversi variable PHP menjadi format JavaScript. Berikut contohnya:

	$data = array(		
		'kode' => 'P001',
		'nama' => 'Chandra',
		'umur' => 23
	  );

Variable PHP dan isinya diatas jika di konversi menjadi JSON akan seperti ini:

{"kode":"P001","nama":"Chandra","umur":23}

Isi variable PHP sebelum di konversi ke JSON berupa array assosiatif 1 dimensi, maka format JSON yang terbentuk dari variable PHP tersebut juga berupa array assosiatif 1 dimensi. Mari lihat contoh konversi array 2 dimensi PHP menjadi JSON.

Selengkapnya…

Posted in Ajax, Info, JavaScript, PHP. Tagged with , , , , , .