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

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.

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.

Related posts

• No related posts.

Bahkan untuk mendukung hal tersebut, banyak bermunculan situs – situs yang menyediakan layanan pemampatan alamat URI dengan metode Short URL tersebut. Diantaranya Tiny.URL ,Bit.ly, Is.gd dan lain – lain.

Memudahkan bukan. Dan buat kamu pengguna TxP, kita pun sebenarnya juga bisa membuat sendiri Short URL dengan mudah, dan memiliki kelebihan disisi hasil pemampatan yang lebih mudah di ingat.

Lalu bagaimana caranya ? mudah :

1. Untuk membuat Short URL, maka kita perlu menambahkan kode rev=canonical service di dalam tag HEAD, gunanya adalah untuk meng-redirect tautan Short URL kita nanti nya.

   
    
     <link rev="canonical" href="http://con.toh/url/panjang-aslinya" />
    
    

   Di TxP, kita bisa mempergunakan kode seperti berikut :

    
     <txp:php>
    $have_id = preg_match('#^/([0-9].*)#', $_SERVER['REQUEST_URI'], $m);
    if ($have_id) {
     $id = $m[1];
     $permlink = permlinkurl_id($id);
     if ($permlink) {
       ob_end_clean();
       header("HTTP/1.0 302 Moved Temporarily");
       header("Location: $permlink");
       die();
      }
     }
    </txp:php>
   
    
    

   Tapi jika kamu punya masalah sepertiku, yang tidak jago di PHP(HyperText Pre Processor) dan lebih suka mempergunakan tag – tag XML(Extensible Markup Language) TxP yang terkenal fleksible itu, kamu bisa mempergunakan plugin <a href="http://stefdawson.com/sw/beta-plugin-downloads"smd_short_url. Plugin ini mempermudah kita untuk memasukkan kode rev=canonical service. Ok gunakan kode

   
     
      <txp:smd_canonical_url />
    
   
     
     

   sebagai pengganti beberapa baris kode PHP diatas.

2. Selanjutnya, untuk memunculkan Short URL. Sebelumnya mari kita tentukan format dari Short URL nantinya.

   Dalam contoh ini, saya hendak mempergunakan format sebagai berikut http://situs.com/23 , dimana angka 23 adalah angka ID dari artikel.

   Jadi ditempat kita hendak menampilkan Short URL , saya tinggal menambahkan baris kode sebagai berikut :

     
     <a href='<txp:site_url /><txp:article_id />'>Short Url</a>
   
     
     

   Dimana <txp:site_url /> akan menghasilkan http://situs.com/ dan <txp:article_id /> menghasilkan nomor urut artikel yang sedang tampil ( dalam LOOP ).

3. Selesai dan simpan.

Sederhana dan mudah bukan ? Oh ya sekarang Short URL sudah siap dipergunakan di situs layanan social networking favoritmu :) .

fn1. Short URL adalah cara untuk memudahkan penulisan alamat URI dengan tujuan memperendek alamat URI yang panjang. Untuk melakukan ini , diwajibkan untuk menambahkan link=rev di dalam tag HEAD

Related posts

• Membuat ” share box ” cantik (5)
• Custom field di Textpattern (3)

Screenshot beberapa template

Template yang dibuat memiliki ukuran ringan (<60KB) dan boleh digunakan untuk project pribadi maupun komersial.

Related posts

• Tools Menarik dari westciv.com (0)
• CSS Framework: SenCSs (2)
• Artikel Image Replacement (0)
• Free Download: The Art & Science of CSS (6)
• Free CSS Drop-Down Menu Framework (2)