TxP : Menampilkan daftar kategori dengan ALA Accesible Data Visualization

Wilson Miner menulis sebuah artikel yang menarik di A List Apart yang berjudul Accessible Data Visualization with Web Standards. Artikel memberikan tuntunan untuk membuat tampilan visualisasi data dengan mempergunakan HTML dan CSS. Artikel yang sangat bagus.

Artikel tersebut memberikan inspirasi untuk membuat tampilan yang mirip rapi dengan sumber data dari kategori artikel di blog ini. Dengan Textpattern tentu saja.

Saya hendak membuat tampilan nama kategori dengan jumlah artikel di dalam kategori tersebut, kemudian nama kategori tertaut ke dalam daftar artikel yang termasuk di dalamnya. Dari sini saya mendapatkan sumber data : nama kategori dan jumlah artikel di dalam kategori.

Mengambil data

Untuk menarik hasil dari sumber data tersebut , bisa dengan mempergunakan plugin smd_query. Plugin ini berfungsi untuk menjembatani pengguna untuk berbicara atau memanggil data dan fungsi spesifik di dalam database SQL.

Setelah memasang pulgin smd_query, gunakan kode ini untuk memanggil data dari SQL :

   
     <txp:smd_query query="SELECT DISTINCT 
             txc.name, COUNT(*) AS count FROM txp_category AS txc,
             textpattern AS txp
             WHERE type='article'
             AND (txc.name = txp.category1 OR txc.name = txp.category2)
             GROUP BY txc.name" 
             wraptag="ul" class="chartlist" break="li" />
   
  

Kode ini akan menelusuri table textpattern dengan filter jenis article dan kemudian memeriksa data di kolom Category1 dan Category2. Setelah itu semua data dimasukkan dalam satu grup dengan nama name¹ .

Kemudian smd_query akan memeriksa grup ini, dan mengelompokkan nama – nama kategori dalam artikel menjadi satu nama kategori ( jika sama ). Dan diberi nama count

Menampilkan data dengan ALA Accesible Data Visualization

Sebelumnya perlu di inga bahwa saya telah memiliki snippet bernama name dan count , yang dengan smd_query biasa ditampilkan dengan kode {nama_snippet}.

Untuk menampilkan daftar kategori, saya akan mempergunakan tag txp:category dengan tambahan atribut :

• link untuk membuat daftar kategori bisa ditautkan ke daftar artikel berdasarkan kategori tersebut,
• name untuk menampilkan kategori lebih spesifik dengan filter nama kategori,
• title untuk menampilkan nama kategori, dan
• section untuk memfilter kategori per bagian²

Kemudian juga disesuaikan dengan format kode yang dipergunakan di ALA Accesible Data Visualization.

  
    <txp:category name='{name}' link='1' title='1' section='blog' />
    <span class="count">{count}</span>
    <span class="index" style="width: {count}%">({count}%)</span>
  
  

Terakhir , saya menyatukan kode sehingga menjadi seperti ini :

  
    <txp:smd_query query="SELECT DISTINCT 
             txc.name, COUNT(*) AS count FROM txp_category AS txc,
             textpattern AS txp
             WHERE type='article'
             AND (txc.name = txp.category1 OR txc.name = txp.category2)
             GROUP BY txc.name" 
             wraptag="ul" class="chartlist" break="li">
       <txp:category name='{name}' link='1' title='1' section='blog' />
       <span class="count">{count}</span>
       <span class="index" style="width: {count}%">({count}%)</span>
     </txp:smd_query>
  
  

Selesai, dan contoh tampilan bisa dilihat di WC.

Di ALA Accesible Data Visualization memberikan 3 tampilan berbeda yaitu sparkline, timeline, dan chartlist. Dalam tutorial ini memang baru menampilkan ala chartlist, tapi tentu saja untuk 2 yang lainnya juga bisa diimplementasikan dengan mudah. Selamat mencoba.

¹ Penamaan bisa diganti dengan nama lain.

² Bisa diatur sesuai kebutuhan, dalam contoh saya mempergunakan section blog.