nayzuko.com || animation n web tutorial

Untuk menampilkan data yang ada di database Joomla kita akan menggunakan JooDatabase (Joodb). Data akan diambil dari tabel yang ada di database, bukan eksternal database.
1. Download JooDB dan install melalui Joomla installer. Enable plugin "search-joodb" jika belum aktif.
2. Masuk ke menu Component, pilih JooDatabase.
3. Klik New, akan keluar popup Datatabel. Isi dengan nama yang diinginkan lalu pilih tabel dalam database.
4. Pilih field yang ingin ditampilkan.

Yang juga penting adalah mendesain template untuk menampilkan data. Lihat di "Catalog view template".

Catalog view harus mempunyai dua buah {joodb loop}, untuk mengapit data yang akan ditampilkan.

Pada versi sebelumnya ada masalah dalam penempatan {joodb loop} sehingga data tidak bisa ditampilkan. Pada versi terbaru, masalah ini sudah diperbaiki.

Field yang ditampilkan harus memakai kode {joodb namafield}.

Sementara fitur lainnya bisa ditempatkan di luar loop. Fitur lainna: {joodb pagenav}, {joodb searchbox},
{joodb pagecount}, {joodb limitbox}, dan {joodb alphabox}. Untuk mengaturnya, bisa dengan copy-paste, mengetik langsung di text editor, atau melalui panel HTML.

Untuk menampilkan tabel data, masuk ke Menu Manager. Dan buat menunya. Misalnya Data Siswa. Lalu, pilih type Joodb>>Catalog View. Pilih datatable yang diinginkan pada parameter basic. Biarkan parameter lainnya.

Kustomisasi template untuk mempercantik tampilan.
Layout seperti di samping ini, bisa didapat dengan mengubah template catalog view. Masuk ke panel HTML, timpa isinya dengan kode ini. Jangan lupa: ganti nama field sesuai dengan nama field di tabel database Anda.

<table style="width: 100%; background-color: #e4e4e4;" border="0">
<tbody>
<tr>
<td align="ridht"><br />{joodb pagecount}</td>
<td align="center" valign="top"><br />{joodb limitbox}</td>
<td align="center" valign="top"><br />{joodb searchbox}</td>
</tr>
<tr>
<td colspan="3">
<table class="cat" style="background-color: #cccccc; width: 100%;" border="0" cellspacing="3">
<tbody>
<tr>
<td width="15%" align="center">Value</td>
<td width="60%" align="center">Title</td>
<td align="center">Image</td>
</tr>
</tbody>
</table>
{joodb loop}                                                                                   
<table class="cat" style="border-bottom: 1px solid #cccccc; background-color: #f5f5f5; height: 142px;" border="0" cellspacing="3" width="100%">
<tbody>
<tr class="{joodb loopclass}">
<td style="font-weight: bold; text-shadow: 1px 1px 3px #aaaaaa; vertical-align: middle; width: 15%;" align="center">{joodb ifis|value}{joodb value} ${joodb endif}</td>
<td style="width: 60%;"><strong>{joodb title}</strong><br /><span class="small">{joodb date}</span><br /><br /> {joodb short_description}<br /><br />
<div style="display: block;">{joodb readon}</div>
</td>
<td style="width: 24%;" align="center"><img src="/components/com_joodb/sample-images/{joodb picture}" border="0" alt="*" /></td>
</tr>
</tbody>
</table>
{joodb loop}
<h3>{joodb nodata}</h3>
</td>
</tr>
<tr>
<td colspan="3" align="center">{joodb pagenav}<br /></td>
</tr>
</tbody>
</table>

{/multithumb}