Archive

Archive for the ‘Front end’ Category

How to making function save and load data in zkoss server-side

October 22, 2013 Leave a comment

Terkadang fungsi save pada pembuatan web aplikasi sangat berpengaruh saat user melakukan penyimpanan data. Seberapa cepat data yang di simpan dapat di tampilkan kembali pada Grid atau di layer front end. Sehingga terlihat proses yang terjadi dalam penyimpanan cepat.

Kali ini saya memcoba membuat save atau penyimpanan data customer dan menampilkannya tanpa harus melakukan penyimpanan pada database tertentu.

Proses ini dapat di gambarkan sebagai berikut :

Artcitecture Data zkoss server-side
Gambar artcitecture proses

Front end yang di gunakan adalah frontend dengan menggunakan

  1. zkoss server-side proses.

Integrated Development Envirotment (IDE) yang digunakan :

  1. IDE Eclipse.

Langkah pertama saya membuat tampilan depan dari data yang akan diinput oleh user. Form Customer dengan field idCustomer, name, Alamat, telepon, email, button save, dan di bagian bawah dari form saya tambahkan grid untuk penampungan data customer.
bentuknya seperti dibawah ini :

form Customer
Read more…

Membuat Bookmarks/share link di Website

March 29, 2013 Leave a comment

Simple pada saat pembuatan bookmarks/share biasanya bookmarks/share ini sering kita lihat di footer page pada website yang pernah kita kunjungi, bookmarks/share ini memiliki fungsi dapat melakukan share artikel atau melakukan penyimpanan artikel pada aplikasi-aplikasi yang diinginkan seperti social media, e mail, dll.

Kali ini saya ingin share bagaimana cara mudah untuk pembuatan icon-icon share/bookmarks untuk dapat di gunakan di page website kita.

bookmarksshare

Langkah pertama buat Html untuk penempatan icon-icon bookmarks/share. Didalam body html kita gunakan ul element sebagai parent dari icon-icon bookmarks tersebut, lalu setelah itu baru kita bual child li untuk penempatan per-icon . Ex: sourcecode pada html :

source code sebelum di sisipkan css

Hasil dari html yang telah dibuat :

hasil dari Html

Read more…

Pembuatan Menu Menggunakan Bounce

December 7, 2012 Leave a comment

 Menu menggunakan bounce yang terinspirasi dari menu yang ditampilkan oleh Mac book, Linux, dll.jump Fisheye

Cara membuat menu dengan icon jump dengan menggunakan effect bounce.

1. Pertama buat atau tentukan dahulu icon yang akan memiliki effect bounce.

2. Download libary jquery

  • jquery-ui-1.8.16.customer/development-bundle/jquery-1.6.2.js
  • jquery-ui-1.8.16.customer/js/jquery-ui-1.8.16.custom.min.js

Setelah itu anda dapat membuat html untuk meletakan icon-icon tersebut source seperti di bawah ini :
htmlFesheye Jump

Lalu kita include libary jquery kedalam html :

  • jquery-ui-1.8.16.customer/development-bundle/jquery-1.6.2.js
  • jquery-ui-1.8.16.customer/js/jquery-ui-1.8.16.custom.min.js
  • jquery-ui-1.8.16.customer/css/ui-lightness/jquery-ui-1.8.16.custom.css

Setelah pembuatan html untuk icon lalu kita dapat memasukan source effect menggunakan javascript (source seperti di bawah ini). Read more…

Menambahkan Plugin Zkoss di Netbeans 6.8

August 7, 2011 Leave a comment

Zkoss adalah salah satu framework untuk pengembangan layer persentation atau sering kita kenal dengan nama FrontEnd. Zkoss memiliki stuktur teknologi yang berbeda dengan framework Frontend lainnya, Karena zkoss memiliki stuktur teknologi client side dan server side yaitu dimana zkoss dapat berjalan atau running di sisi client dan disisi server. Dimana zkoss dikembangkan dengan menggunakan bahasa pemprograman java, biasanya itu di implementasikan di server side.

Plugin zkoss dapat digunakan di eclipse dan di netbeans, Tapi kali ini saya ingin share menambahkan plugin zkoss kedalam netbeans 6.8.
Read more…

Menambahkan Replace di Libary jquery.json-2.2.js

March 9, 2011 Leave a comment

Posting kali ini saya ingin membahas tentang jquery.json-2.2.js yaitu libary yang di sediakan oleh jquery bertujuan untuk memudahkan pengguna jquery dalam melakukan parsing data dengan format JSON. Lalu setelah saya mencoba dalam pembuatan suatu form dengan menggunakan jquery. Saya memiliki masalah pada saat parsing data json ke backend karena Json yang saya terima dari Front end adalah berbentuk seperti di bawah ini :

[{“idBank”:2,{“typetransaction”:”Deposit”,”acctIdCustomerAccount”:”001-01-2-1257355718″,
“accountSubtype”:”Savings”},”depositType”:”Cash”,”acctIdSource”:””,”checkNo”:””,”bankRoutingNumber”:””,
“transactionCode”:””,”maxAmount”:””,”currency”:”IDR”,”depositAmount”:””,”id”:”_empty”,””:”1″,”Total”],”totalAmountTransaction”:”1600000″},
“listOfDeposits”:[{“depositType”:”Cash”,”acctIdSource”:””,”checkNo”:””,”bankRoutingNumber”:””,
“transactionCode”:””,”maxAmount”:”0.00″,”currency”:”IDR”,”depositAmount”:”1600000.00″}]}]

Permasalahan ini saya dapat karena di libary jquery.json-2-2.js melakukan penutukan “{” “}” disetiap id form yang atau id div yang saya panggil untuk di parsing data ke backend oleh karena itu untuk dapat menghasilkan keluaran data parsing json ke backend seperti di bawah ini, Saya melakukan penambahan coding pada libary jquery.json-2.2.js.

[{“idBank”:2,”typetransaction”:”Deposit”,”acctIdCustomerAccount”:”001-01-2-1257355718″,”accountSubtype”:”Savings”,
“totalAmountTransaction”:”1600000″,”listOfDeposits”:[{“depositType”:”Cash”,”acctIdSource”:””,”checkNo”:””,”bankRoutingNumber”:””,
“transactionCode”:””,”maxAmount”:”0.00″,”currency”:”IDR”,”depositAmount”:”1600000.00″}]}]

Penambahan yang saya lakukan pada libary json di jquery yaitu melakukan replace tanda buka “{” tutup dan “}” menjadi kosong “”, baru lah saya dapat menghasilkan parsing json yang sesuai dengan backend.
Di bawah ini beberapa line code yang saya tambahkan kedalam libary jquery.json-2.2.js


$.toJSONNoCurly = function(o) {
var val = $.toJSON(o);
val = val.replace("{", "");
val = val.replace("}", "");

return val;
}

saya buat variabel kedua dari bentuk json yaitu $toJSONNoCurly yang di mana functionnya adalah me-replace buka “{” menjadi “” dan tutup “}” menjadi “” dari function $toJSON di function libary nya.

Semoga bermanfaat.

Download File

Categories: Front end Tags:

Penjumlahan pada column Grid JqGrid di dalam zkoss

October 18, 2010 Leave a comment

Artikel ini sebenarnya sudah lama ingin di posting kedalam blog tapi karena banyak alasan yang tidak dapat disebutkan “alasan klasik”.

Dimulai dari pembuatan projek dimana penggerjaan frontend menggunakan framework jqGrid.
Hubungan antara jqGrid dengan jQuery adalah jqGrid menggunakan javascript libary jQuery.
Dan jQuery adalah mempercepat dan meringkas libary javascript yang disederhanakan untuk melintasi dokumen HTML, event handling, animasi, dan interaksi Ajax untuk pengembangan web yang cepat. jQuery dirancang untuk mengubah cara Anda untuk menulis JavaScript.

Jadi jqGrid adalah Ajax yang menggunakan javascript kontrol yang menyediakan solusi untuk mewakili dan memanipulasi data tabel di web. Karena grid adalah solusi didalam sisi klien untuk memuat data secara dinamis melalui callback Ajax. jqGrid juga dapat diintegrasikan dengan teknologi server-side, termasuk PHP, ASP, Java Servlets, JSP, ColdFusion, dan Perl.

Di grid jqGrid saya mencoba untuk melakukan perhitungan pada column jumlah yang dimana column tersebut berisikan nilai intenger yang dapat di lakukan perhitungan hal pertama yang saya lakukan adalah pembuatan
form pada zkoss :
Read more…

Categories: Front end Tags: