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)

Kunjungi dan baca tutorialnya disini , atau kamu juga bisa melihat dulu hasil implementasi nya disana.

Hai Textpatternian, Patrick di TxP Tips juga sudah membuat tutorial untuk menerapkannya ke TxP.

Mudah dan indah. Mau ???

Related posts

• Membuat Short URL sendiri dengan TxP (5)
• Custom field di Textpattern (3)
• Membuat tooltips dengan BeautyTips (0)
• Membuat Slideshow dengan CrossSlide (0)
• Tinggi elemen yang seragam dengan EqualHeights jQuery Plugin (0)

Saya tidak! , tapi Vladimir Carrer bisa membuktikannya.

Kodenya : .dp50 {width:50%; float:left; display: inline; *margin-right:-1px; }

Serius, ternyata ini benar – benar bisa berjalan baik, walau hanya untuk penggunaan pada 1,2,4,8,16 kolom. Luar biasa.

Related posts

• CSS Framework: SenCSs (2)

@font-face adalah at-rule dalam CSS yang dipergunakan untuk mendeskripsikan secara detil dari sebuah font yang bisa di embed melalui CSS eksternal.

Gratis, segera unduh!!!

Related posts

• Color Scheme Designer (2)
• Tools Menarik dari westciv.com (0)
• Font Gratis dan Berkualitas di fontsquirrel (7)
• Menghitung Biaya Pembuatan Website dengan Web Development Project Estimator (6)

Bedanya yang di bahas kali ini adalah pemakaian custom field untuk Textpattern.

Apa itu Textpattern ???

Textpattern adalah content management system yang fleksibel, elegan, dan mudah di operasikan. Mirip dengan WordPress kecuali bahwa pada kenyataannya WordPress dibangun hanya untuk mesin blog, sedangkan Textpattern adalah murni CMS.

Di Smashing Magazine, Anda akan menemui kata hacks pada judulnya, tapi di Textpattern mungkin kata – kata itu tidak berarti.

Di bawah ini saya akan menunjukkan cara penggunaan custom field untuk melakukan pekerjaan – pekerjaan seperti yang di maksudkan di Smashing Magazine.

Sebelumnya, ada perbedaan cara mempergunakan custom field di TxP dan WordPress. Di TxP custom field harus sudah di atur dengan nama unik. Pengaturan bisa dilakukan di halaman preferences .

Sedangkan untuk mengisi custom field bisa dilakukan lewat halaman write article. Untuk mempelajari tampilan visual dari halaman write article silakan merujuk ke Textbook.

Untuk sementara , TxP hanya menyediakan custom field sebanyak 10 buah saja, dan akan di kembang biak-kan menjadi unlimited di rilis berikutnya 4.0.9.

1. Mengatur waktu kadaluwarsa artikel

Problem : Kadang kala ( seperti saat mengadakan kontes ) Anda ingin menampilkan artikel dan kemudian otomatis berhenti tampil setelah beberapa waktu. Ini mungkin akan sulit untuk melakukannya, padahal sebenarnya tidak begitu. Ya tentu saja dengan kehebatan dari custom field.

Solusi : Sayangnya…. di Textbook Textpattern tidak termuat halaman yang menceritakan bagaimana cara untuk melakukannya.

Tapi tidak perlu khawatir, karena sejak versi rilis 4.0.7, Textpattern sudah menyediakan fungsi ” best before … ” untuk menentukan waktu kadaluwarsa dari artikel.

Untuk mempergunakannya, Anda harus terlebih dahulu menentukan kapan artikel akan kadaluwarsa di halaman Write article . Kemudian di halaman template Anda , gunakan kode ini :

<txp:if_expired>
Artikel sudah kadaluwarsa.
<txp:else />
Isi artikel
</txp:if_expired>

Penjelasan kode : fungsi <txp:if_expired> akan memeriksa apakah kolom kadaluwarsa sudah di atur, jika sudah dan waktu sudah terpenuhi maka akan mengeksekusi atau menampilkan teks : Artikel sudah kadaluwarsa , jika tidak maka akan menampilkan isi dari artikel.

Anda juga bisa mengganti isi text dengan kode – kode template Anda.

2. Tampilkan artikel penuh atau hanya ringkasannya saja ?

Problem : Penulis artikel di Smashing Magazine heran kenapa hampir 95% ( keakuratan belum terbukti ) blogger menampilkan artikelnya dengan cara yang sama dihalaman depannya. Padahal akan lebih baik jika ada kombinasi untuk menampilkan artikel dengan full post dan atau hanya dengan ringkasannya saja.

Solusi : Ada 2 cara di Textpattern untuk memberikan opsi kepada penulis untuk menentukan bagaimana cara artikel ditampilkan, apakah dengan full post dan atau hanya dengan ringkasannya saja.

• Cara pertama dengan mempergunakan custom field.

Atur terlebih ( beri nama ) dahulu 1 buah custom field lewat halaman preferences, dalam kasus ini mari kita beri nama : model.

Kemudian di template di sisipkan kode berikut :

<txp:if_custom_field name="model" val="full">
<txp:article form="full_post" />
<txp:else />
<txp:excerpt />
</txp:if_custom_field>

Penjelasan kode : kode ini sederhana, pertama Textpattern akan memeriksa custom field dengan nama model , jika isi ( val ) dari custom field adalah full, maka kode <txp:article form="full_post" /> akan di eksekusi. Jika tidak berisi full atau kosong, maka yang akan di eksekusi adalah kode <txp:excerpt /> .

• Dengan Override form

Fitur Override form juga bisa dipergunakan untuk melakukan pekerjaan ini. Caranya adalah membuat beberapa buah forms berbeda, dengan model full post dan ringkasan. Bahkan untuk ringkasan pun juga bisa ditentukan menurut beberapa kondisi, seperti 1 paragraph , 2 paragraph, 100 kata dan lain – lain.

Untuk mempergunakannya, pada pilihan drop down override img , pilih form yang hendak dipergunakan oleh artikel.

3. Menampilkan mood ?? atau musik yang sedang di dengarkan.

Problem : Anda ingin menampilkan mood sekarang atau musik yang sedang diperdengarkan.

Solusi : Mudah. tentu saja dengan kekuatan custom field. Buat terlebih dahulu 1 custom field, beri nama mood. Di tempat yang ingin ditampilkan gunakan kode :


<txp:if_custom_field name="mood" />
<p>Mood : <txp:custom_field name="mood" /></p>
</txp:if_custom_field>


4. Menambahkan deskripsi META ke post

Problem : Anda ingin menambahkan deskripsi META di post, tentu saja isi deskripsi berbeda – beda tiap artikel, dan yahhh WordPress tidak bisa melakukkannya. Bagaimana dengan Textpattern ?

Solusi : Di Textpattern Anda tidak perlu melakukan hacks untuk menambahkan META. Sungguh , Textpattern sudah datang dengan fungsi itu di rilisnya.

Kali ini tanpa custom field, caranya :

Di halaman write article, di bagian kolom keywords img isi dengan tag yang ingin dipergunakan.

Kemudian di dalam tag HTML HEAD, gunakan kode berikut :


<txp:meta_keywords />


5. Tautan ke sumber eksternal

Problem : Jadi Anda ingin membuat tautan ke sumber eksternal pada judul artikel ?

Solusi : Untuk ini harus mempergunakan / menggabungkan 2 fungsi yaitu override form dan custom field.

Buat 1 buah custom field beri nama ext URI, kemudian buat sebuah form dengan nama tautan, bertipe article, dan isi dengan kode berikut :


<txp:if_custom_field name="ext URI" />
<h1><a href='<txp:custom_field name="ext URI" />'><txp:title /></a></h1>
<txp:if_custom_field />
<txp:body />

Kemudian di kolom custom field ext URI , kita tinggal menaruh alamat URI lengkap dari tautan yang di inginkan. Dan meng-override form-kan dengan mempergunakan form tautan.

Demikian 5 buah trik dan tips mempergunakan fungsi custom field seperti di WordPress. Smashing Magazine menuliskan 10 hacks di blog nya, disini saya baru membuat 5 , dan 5 lagi akan saya tampilkan di artikel yang lain.

– – Textpatternian – –

Related posts

• Membuat Short URL sendiri dengan TxP (5)
• Membuat ” share box ” cantik (5)