Menampilkan Database dalam tabel

Tentunya kita akan menampilkan data dalam website bukan? Nah dalam web contoh ini kita akan buat beberapa tabel yang dihasilkan dari database. Pertama kita akan menambahkan tabel profil user dalam halaman update profil yang telah kita buat. Asumsinya member ingin lihat datanya yang sudah di update.

Halaman yang kita gunakan adalah halaman updateprofil. Silahkan dibuka menggunakan CodeCharge Studio.
Insert satu kolom disamping form updateprofil. Caranya,
klik kanan pada kolom, pilih Table, pilih Insert Column.Untuk memindahkan kolom ke kiri atau ke kanan, klik menu Move Column Left / Right.

Dalam contoh ini kita hanya akan menampilkan data dari member yang login, berarti cuman satu data profil.

Ok, kita mulai. Kita akan menggunakan Grid Builder. Ada 6 step untuk membuat tabel grid data ini.

1. Memilih koneksi yang digunakan, default saja

2. Memilih Tabel dan data yang akan di tampilkan.  Pilih profil.  Kali ini kita akan menggunakan query yang menggabungkan 2 tabel. Tabel profil dan tabel tingkatmember. Klik Build Query. Lihat gbr.









-->

3.  Visual query builder terlihat seperti di samping. Klik Add untuk menambahkan tabel lain ke query. Tambahkan tabel tingkatmember.












4. Sebuah relasi antar tabel tercipta otomatis antar field tingkatmember_id.

Kita perlu mengatur kondisi WHERE untuk menentukan data apa yang akan dimunculkan. Ingat, kita hanya akan menampilkan data member yang login (hanya 1 member).









Klik kanan pada idteman, pilih WHERE, edit Parameter dengan UserID
Type : Session
Use Default=0

Klik OK.

Sekarang kita memilih data apa saja yang akan ditampilkan. Kali ini kita menambahkan status keanggotaannya (tingkatmember).


Next

CCS menawarkan apakah kita memerlukan Form Search. Untuk kasus kita ini tidak memerlukan Search, jadi Next..

Tampilan data perlu diatur. Karena datanya cuma 1 maka kita pilih Columnar dengan Record per Page 1.

Pilihan untuk navigasi tabel data kita. Saat ini tidak diperlukan karena.... data yang kita tampilkan cuma 1. Jadi.... Next

Terakhir adalah memilih Style untuk tabel. Seperti biasa pilih Original.

Klik Finish.


Tabel data profil sudah jadi, beri sedikit pengaturan pada:

1. Nama Tabel, misal: Profil Member
2. Atur format tanggal lahir dan DBformat
3. Klik kanan pada label text photo, pilih Change To... pilih Image
4. Klik kanan pada photo, pilih <IMG> properti, tambahkan folder tempat photo disimpan. lihat gambar di samping. Tambahkan photo/ sebelum {photo}.

Pengaturan lain untuk photo bisa di atur di form tsb. Misal ukuran, alignment, border dll.

Sekarang tabel profil member sudah benar-benar selesai. Silahkan di uji.

Tampilannya dalam localhost