Wednesday, May 16, 2018

Mengecek Adanya Komentar Balasan pada Komentar Induk di Blogger

Mengingat kembali tentang bagaimana kita membedakan antara komentar induk dengan komentar balasan pada Blogger dapat kita lakukan dengan cara mengecek adanya properti var.inReplyTo pada item komentar yang dimaksud. Properti ini bertugas untuk menyimpan ID komentar induk:

<b:loop values='data:post.comments' var='comment'>
  <b:if cond='data:comment.inReplyTo'>
    <!-- `data:comment` adalah komentar balasan -->
  <b:else/>
    <!-- `data:comment` adalah komentar induk -->
  </b:if>
</b:loop>

Dari sini kita dapat melakukan iterasi ulang di dalam iterasi komentar induk, dan kemudian menyaring anak-anak komentar yang memiliki nilai properti var.inReplyTo (dalam hal ini adalah reply.inReplyTo) yang sama dengan parent.id (dalam hal ini adalah comment.id):

<b:loop values='data:post.comments' var='comment'>
  <b:if cond='!data:comment.inReplyTo'>
    <b:loop values='data:post.comments' var='reply'>
      <b:if cond='data:reply.inReplyTo == data:comment.id'>
        <!-- komentar balasan untuk `data:comment` akan tersedia di sini sebagai `data:reply` -->
      </b:if>
    </b:loop>
  </b:if>
</b:loop>

Ekspresi lambda (fungsi anonim) pada Blogger memungkinkan kita untuk melakukan penyaringan komentar-komentar balasan terhadap ID komentar induk dengan cara yang lebih cepat seperti ini, karena penyaringan data komentar dapat dilakukan sebelum proses iterasi dilakukan:

<b:loop values='data:post.comments' var='comment'>
  <b:if cond='!data:comment.inReplyTo'>
    <b:loop values='data:post.comments filter (i => i.inReplyTo == data:comment.id)' var='reply'>
      <!-- komentar balasan untuk `data:comment` akan tersedia di sini sebagai `data:reply` -->
    </b:loop>
  </b:if>
</b:loop>

Ada satu metode yang menarik dalam fungsi anonim Blogger yaitu metode count. Metode ini memungkinkan kita untuk menghitung jumlah item yang ada setelah proses bersyarat selesai diterapkan pada koleksi data. Sebagai contoh, kode di bawah ini akan menampilkan jumlah total komentar dengan nama penulis Taufik Nurrohman:

Jumlah komentar dari Taufik Nurrohman: <b:eval expr='data:post.comments count (i => i.author == "Taufik Nurrohman")'/>

Dalam bahasa pemrograman, kita dapat melakukan sesuatu seperti ini untuk menghitung jumlah komentar dari Taufik Nurrohman, yang mana ini tidak akan dapat kita lakukan pada Blogger sebelum adanya fitur fungsi anonim:

let i = 0;
post.comments.forEach(comment => {
    if (comment.author == 'Taufik Nurrohman') {
        ++i;
    }
});

console.log('Jumlah komentar dari Taufik Nurrohman: ' + i);

Metode count pada fungsi anonim akan lebih sesuai jika disamakan dengan metode filter dan properti length pada JavaScript seperti ini:

let i = post.comments.filter(i => i.author == 'Taufik Nurrohman').length;

console.log('Jumlah komentar dari Taufik Nurrohman: ' + i);

Cara Mengecek Apakah Komentar Induk Memiliki Komentar Balasan atau Tidak

Sebuah komentar dari seorang pembaca bernama Satank Mkr pada artikel Membuat Fitur Komentar Berbalas (Threaded Comments) pada Blogger dengan Fungsional yang Asli kurang lebih menanyakan tentang bagaimana caranya menambahkan elemen pembungkus khusus yang akan melingkupi seluruh komentar balasan, sehingga jika terdapat setidaknya satu buah komentar balasan di bawah komentar induk, maka komentar-komentar balasan tersebut akan dibungkus dengan elemen HTML tertentu. Berikut adalah ilustrasi yang beliau maksudkan:

<b:if cond='data:post.numberOfComments > 0'>
  <ul class='comments'>
    <b:loop values='data:post.comments' var='comment'>
      <li class='comment'> … </li>
    </b:loop>
  </ul>
</b:if>
<ul class="comments">
  <li class="comment"> … </li>
  <li class="comment"> … </li>
  <li class="comment"> … </li>
</ul>

Melihat pada contoh di atas, akan sangat mudah untuk menambahkan elemen pembungkus <ul class="comments"> karena Blogger memiliki properti numberOfComments pada data:post yang bertugas untuk menyimpan jumlah keseluruhan komentar yang ada. Akan tetapi, kita tidak memiliki properti khusus untuk menghitung jumlah komentar balasan melalui data:comment, sehingga untuk menentukan apakah sebuah komentar induk memiliki komentar balasan atau tidak akan mustahil tanpa adanya properti khusus; katakanlah var.numReplies seperti ini:

<b:if cond='data:post.numberOfComments > 0'>
  <ul class='comments'>
    <b:loop values='data:post.comments' var='comment'>
      <li class='comment'> … </li>
        <b:if cond='data:comment.numReplies > 0'>
          <ul class='comment-replies'>
            <b:loop values='data:post.comments filter (i => i.inReplyTo == data:comment.id)' var='reply'>
              <li class='reply'> … </li>
            </b:loop>
          </ul>
      </b:if>
    </b:loop>
  </ul>
</b:if>
<ul class="comments">
  <li class="comment"> … </li>
  <li class="comment"> … </li>
  <li class="comment">
    …
    <ul class='comment-replies'>
      <li class='reply'> … </li>
      <li class='reply'> … </li>
    </ul>
  </li>
  <li class="comment"> … </li>
</ul>

Metode count datang menyelamatkan! Karena metode ini mampu menghitung jumlah komentar yang ada setelah proses bersyarat diterapkan pada data komentar, maka kita dapat menghitung jumlah komentar balasan terkait dengan komentar induk dengan cara seperti ini:

<b:with var='numReplies' value='data:post.comments count (i => i.inReplyTo == data:comment.id)'>
  Jumlah komentar balasan: <data:numReplies/>
</b:with>

Untuk menerapkannya sebagai ekspresi kondisional di dalam iterasi komentar, kita bisa menuliskannya seperti ini:

<b:if cond='data:post.numberOfComments > 0'>
  <ul class='comments'>
    <b:loop values='data:post.comments' var='comment'>
      <li class='comment'> … </li>
        <b:with var='numReplies' value='data:post.comments count (i => i.inReplyTo == data:comment.id)'>
          <b:if cond='data:numReplies > 0'>
            <ul class='comment-replies'>
              <b:loop values='data:post.comments filter (i => i.inReplyTo == data:comment.id)' var='reply'>
                <li class='reply'> … </li>
              </b:loop>
            </ul>
          </b:if>
        </b:with>
      </b:if>
    </b:loop>
  </ul>
</b:if>

Atau seperti ini juga bisa:

<b:if cond='data:post.numberOfComments > 0'>
  <ul class='comments'>
    <b:loop values='data:post.comments' var='comment'>
      <li class='comment'> … </li>
        <b:with var='replies' value='data:post.comments filter (i => i.inReplyTo == data:comment.id)'>
          <b:if cond='data:replies.size > 0'>
            <ul class='comment-replies'>
              <b:loop values='data:replies' var='reply'>
                <li class='reply'> … </li>
              </b:loop>
            </ul>
          </b:if>
        </b:with>
      </b:if>
    </b:loop>
  </ul>
</b:if>

Labels: , ,

23 Comments:

At Thursday, May 31, 2018 at 8:10:00 PM GMT+7, Blogger budkalon said...

Selamat malam. Saya ingin bertanya, apakah sudah ada artikel yang cukup bagus mengenai formulir komentar versi 3.0 milik blogger?

 
At Sunday, June 10, 2018 at 11:59:00 AM GMT+7, Blogger Ivan Mantovani S said...

masih aktif aja nih suhu...

 
At Sunday, June 10, 2018 at 4:04:00 PM GMT+7, Blogger sphoto said...

Thanks admin!
are there any codes to show numbered comment in a poss?

 
At Thursday, July 5, 2018 at 8:25:00 PM GMT+7, Blogger Taufik Nurrohman said...

Pernah Saya coba terapkan pada tema yang tidak standar tapi selalu tampil sebagai halaman kesalahan.

 
At Thursday, July 5, 2018 at 8:26:00 PM GMT+7, Blogger Taufik Nurrohman said...

Kalau ada yang baru pasti aktif lagi.

 
At Thursday, July 5, 2018 at 8:28:00 PM GMT+7, Blogger Taufik Nurrohman said...

/2012/07/menambahkan-nomor-urut-pada-daftar.html

 
At Friday, August 3, 2018 at 1:49:00 AM GMT+7, Blogger Ampas Leteg said...

Coba ini bang...

https://gist.github.com/ismis/715bc852e37cfbb2e458998ca4efc7fc

 
At Friday, August 3, 2018 at 9:52:00 PM GMT+7, Blogger Taufik Nurrohman said...

Sudah mas. Tinggal menambahkan parameter &skin=soho saja kan? Hasilnya muncul halaman kesalahan kalau di blog Saya.

 
At Saturday, August 4, 2018 at 8:23:00 PM GMT+7, Blogger Ampas Leteg said...

Masalahnya bukan hanya pada parameter &skin=soho saja, tapi yang ada di dalam <b:skin> itu di bawa juga tidaknya.

Entah kok bisa gitu...

 
At Wednesday, August 8, 2018 at 9:45:00 AM GMT+7, Blogger Thiago Coss said...

I got a new comments box (v.3.0). I customized the "Soho" theme. Look >> https://thicoss.blogspot.com/2018/07/resenha-alem-da-magia-tahereh-mafi.html

 
At Wednesday, August 8, 2018 at 4:57:00 PM GMT+7, Blogger Taufik Nurrohman said...

Yes. But the problem here is that you can’t apply the new comment form style to your old template away. Putting the default <html> attributes from template V3 to my current template wasn’t enough.

The only person that I know have managed to apply the new comment form style to his old template was Duy Pham.

 
At Tuesday, January 8, 2019 at 1:30:00 AM GMT+7, Blogger Dekraken TV said...

mas tanya dong, saya kan barusan mampir [url=https://stackoverflow.com/questions/37436554/how-to-use-google-blogger-lambda-operators]disini[/url]

saya ingin menampilkan post based on label di homepage saya menambahkan tag cond seperti ini dan berhasil

...


yang ingin saya tanya, bagaimana cara mengatur jumlah post yang akan tampil ya mas?
makasih sebelumnya

 
At Thursday, January 17, 2019 at 2:45:00 PM GMT+7, Blogger Taufik Nurrohman said...

Nggak bisa mas, karena fungsi filter hanya akan mengambil data yang sesuai dengan perintah saja, tapi tidak bisa menentukan banyak data yang akan ditampilkan. Kalau jumlah data yang akan disaring ada sebanyak 20 misalnya, maka hasilnya keluarannya pasti akan selalu lebih kecil atau sama dengan 20.

 
At Thursday, January 17, 2019 at 6:21:00 PM GMT+7, Blogger Dekraken TV said...

terima kasih mas sudah merespon, saya udah menemukan alternatif lain, dan hasilnya memuaskan..

satu lagi dong nanya boleh ya mas, hehe
bagaimana caranya mendapatkan data:post.id / postID disetiap post yang ditampilkan di related posts?

saya udah coba dengan menambahkan kode seperti ini,


blogID = /\:blog-?(\d+)(\.|$)/.exec(entry.id.$t)[1];
postID = entry.id.$t.replace('tag:blogger.com,1999:blog-'+blogID+'.post-','');


hasilnya hanya menampilkan 1 postID yang sama di semua related post.
kurang lebih seperti ini mas tampilannya

[img]https://1.bp.blogspot.com/-SXx52v5zw7k/XEBknSUdLKI/AAAAAAAAAc4/VzL8yzlKyCk5Q4rOekb2IWtOZBERzLSnQCLcBGAs/s1600/fdadas.jpg[/img]

 
At Thursday, June 13, 2019 at 12:09:00 AM GMT+7, Blogger Saeful Rahman said...

Boleh sharing metode seperti apa yang dipake untuk memfilter pos tanpa mengurangi jumlah postingan yang ditentukan. Kebetulan Saya juga membutuhkan untuk template yang sedang saya buat.

 
At Tuesday, September 3, 2019 at 12:08:00 AM GMT+7, Blogger Maulida Dzul Fikri said...

Apakah Mas Taufik tau teknik apa yang kira-kira dipakai oleh duy-pham.blogspot.com?

Jika perhatikan, tautan komentar dia hanya bisa menggunakan &skin=soho. Selain itu, misalnya jika kita ganti dengan &skin=contempo, tautan yang berisi formulir komentar dia akan rusak.

Anehnya, jika kita hapus &skin=soho, formulir komentar dia menjadi biasa, yakni sama dengan template versi 2 dan widget versi 1.

Apakah selain berkaitan dengan data:skin, juga berkaitan dengan pengaturan komentar di dalam dasbor Blogger, seperti opsi iframe, pop-up, atau terbuka di tab baru? Blogger memiliki tiga pilihan tersebut dan masing-masing berbeda: jika pop-up dan/atau terbuka di halaman baru, dia gunakan formulir yang tidak sama ketika kita pilih opsi iframe seperti ini.

Meski, ya, seperti yang Mas Taufik bicarakan di blog Ignel.com, formulir komentar teranyar milik Blogger tidak memiliki pratinjau. Namun, jika masalah ini terpecahkan, barangkali menjadi perkembangan bagi pengguna teknologi lama milik Blogger yang ingin menggunakan kebaharuannya. Jika Duy Pham bisa, asumsi teknologi yang terbarulah yang bisa merubah mengikuti yang lama akan patah. Bahwa teknologi lama juga bisa up to date dengan perputaran zaman.

 
At Friday, September 6, 2019 at 7:41:00 PM GMT+7, Blogger Sekedus said...

pakai length juga bisa gan. [url=https://bloggercode-blogconnexion.blogspot.com/2016/04/data-parameters-length-size.html]ref[/url]

 
At Sunday, September 8, 2019 at 8:44:00 PM GMT+7, Anonymous Anonymous said...

Mas, ada teknik untuk membatasi jumlah karakter dalam textarea komentar Blogger atau tidak? Misalnya dengan Javascript atau tidak?

 
At Sunday, October 6, 2019 at 8:14:00 AM GMT+7, Blogger Taufik Nurrohman said...

Sepertinya masalah di definisi variabel bagian komentar yang harus disertakan sebelum bisa memakai gaya formulir yang baru. Coba tanya mbak Igniel.

 
At Tuesday, February 11, 2020 at 8:12:00 PM GMT+7, Blogger Dean said...

Wahh milik saya malah urutan dari threaded komentarnya tidak beraturan itu kenapa ya mas?, jadi misal ada yang komentar 5 orang dan saya ingin balas komentar nomor 2, posisi komentar baru itu malah dibawah komentar ke 5, jadi bukan antara 2 dan 3 gitu :(

 
At Tuesday, February 11, 2020 at 10:04:00 PM GMT+7, Blogger Taufik Nurrohman said...

Itu biasanya karena masalah pada bagaimana implementasi fungsi JavaScript untuk memindahkan formulir komentar. Uuntuk kasus formulir komentar balasan berada di bawah komentar balasan terakhir mungkin itu karena formulir komentar di-append ke elemen <ul> induk dari item-item komentar balasan dan bukannya di-append ke elemen <li> dari item komentar yang dimaksud:

<ul>
<li>Komentar 1</li>
<li>
Komentar 2
<ul>
<li>Komentar 2.1</li>
<li>Komentar 2.2</li>
<li>Komentar 2.3</li>
<li>Komentar 2.4</li>
<li>Komentar 2.5</li>
<form>Formulir komentar</form>
</ul>
</li>
<li>Komentar 3</li>
</ul>


<ul>
<li>Komentar 1</li>
<li>
Komentar 2
<ul>
<li>Komentar 2.1</li>
<li>
Komentar 2.2
<form>Formulir komentar</form>
</li>
<li>Komentar 2.3</li>
<li>Komentar 2.4</li>
<li>Komentar 2.5</li>
</ul>
</li>
<li>Komentar 3</li>
</ul>

 
At Tuesday, February 11, 2020 at 10:56:00 PM GMT+7, Blogger Dean said...

Kalau untuk formulir komentarnya aman aman saja, tapi untuk balasan komentarnya itu yang berpindah ke paling bawah.. Saya coba untuk repair reply comments nya menggunakan script gitu hanya memperbaiki tombol balasnya saja, tapi tidak memperbaiki posisi balasannya..

Contohnya begini:
<img height="auto" src="https://1.bp.blogspot.com/-8TQ5LJm9MZs/XkLNeXy7dJI/AAAAAAAAA9Y/KoiTX9K_jT0BDW1oumq-TwMfozvnH6lRACNcBGAsYHQ/s1600/Formulir-komentar.png" width="600" />

 
At Friday, February 14, 2020 at 6:45:00 AM GMT+7, Blogger Taufik Nurrohman said...

Itu normal mas, karena maksimal anak balasannya sudah diset satu tingkat. Ada satu item konfigurasi di JavaScript komentar Blogger yang sampai sekarang belum pernah ada di dokumentasi tapi mungkin bisa dipakai untuk menambah tingkatan anak balasan. Saya sendiri masih penasaran tapi belum sempat nyoba. Namanya maxThreadDepth. Coba ganti nilainya menjadi lebih besar dari 2.

 

Post a Comment

<< Home