Pages

  • Home
  • Daftar Artikel

Membuat Editable Grid Form

Jika umumnya suatu form diperuntukkan mengisi satu data maka editable grid form ini adalah form berbentuk grid yang dapat langsung diisi beberapa data entry sekaligus. Di dalam CodeCharge Studio membuat grid form bisa sangat mudah dan cepat. Kita memerlukan data/table baru untuk mencontohkannya.
Saya sudah menambahkan tabel baru yakni table "webteman" ke dalam database mysql. Tabel ini akan memuat daftar website yang dimiliki oleh member. Ikuti langkah selanjutnya.

Dump file tabel "webteman" sebagai berikut

<div class="separator" style="clear: none; float: right;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;

</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
Setelah tabel selesai dibuat, kita perlu halaman untuk memuat grid form ini. Saya gabungkan saja form ini di halaman "updateprofil". Tepatnya di bawah form "update profil".


Gunakan Tool Box, Editable Grid Builder.
  1. Pilih connection
  2. Gunakan tabel "webteman" Pilih semua selain "idweb"
  3. Pada Build Query, tentukan kondisi WHERE, atur parameter idteman = "UserID" type Session (ini akan membatasi data yang ditampilkan pada grid form adalah milik member yang login).
  4. Tidak memerlukan "Search"
  5. No Sorting, No Navigator, Record per Page = 5
  6. Number of Empty Row = 1
  7. Tentukan Style
  8. Finish
  9. Hide field "idteman"
  10. Set Default Value pada field url "http://"
  11. Atur properties Events, klik kanan pada "Before Show Row" pilih "Add Action", pilih "Retrieve Value for Control".. 
    Editable Grid Builder
  • Control name : idteman
  • Source Type Session
  • Source name : UserID
Seperti pada gambar:












 Tampilan pada localhost sebagai berikut:
Add your Website
Terlihat ada satu baris saja, akan tetapi jika sudah dimuat data maka akan muncul baris kosong baru.

Silahkan di coba di http://kisahteman.id1945.com

No comments:

Post a Comment