Cara Mempersingkat Komentar Dinamis dengan Jquery PHP Mysql

Ketika kita mempunyai sebuah komentar atau semacam teks yang sangat panjang, dan kita ingin membuatnya seperti teks yang sedikit terlebih dahulu baru ketika kita ingin melihat teks yang lain, kita bisa menekan tombol read more atau semacamnya kita bisa menggunakan cara ini, seperti apa belajar cara mempersingkat komentar dinamis dengan Jquery PHP Mysql simak terus ya teman-teman.

Cara ini sebenarnya sering kita jumpai apalagi teman-teman pernah bermain sebuah sosial media facebook dimana ketika kita membuat sebuah postingan, apalagi postingan kita itu panjang pasti yang akan tampil di beranda adalah teks yang sedikit terlebih dahulu, kenapa di buat seperti itu, guna nya adalah supaya kita bisa meminimalis post orang yang ada di bawahnya, supaya terlihat juga post yang pengguna lain, bayangkan jika cara ini tidak di gunakan pasti sangat panjang bukan, satu beranda panjang scrollnya gara-gara post kita, itu sangat mengganggu sekali, oke langsung saja cara mempersingkat komentar dinamis dengan Jquery PHP Mysql, benar disini kita membuat seperti itu dengan mengguankan jquery php mysql, jquery untuk proses readmorenya, php dan mysql untuk memproses data yang ada di database dan kita looping, oke jadi caranya sperti ini

<?php  
$koneksi = mysqli_connect("localhost", "root", "", "dbase");
$sql = "SELECT * FROM tbl_comment ORDER BY id DESC";
$result = mysqli_query($koneksi, $sql);
?>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <title>Cara Mempersingkat Komentar Dinamis dengan Jquery PHP Mysql</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="offset-md-2 col-md-8">
          <h1 class="text-center">Cara Mempersingkat Komentar Dinamis dengan Jquery PHP Mysql</h1>
          <ul class="list-group list-group-flush">
            <?php  
              while($row = mysqli_fetch_array($result)){
                $comment = mysqli_escape_string($koneksi, $row["comment"]);

            ?>
            <li class="list-group-item">
              <?php  
                echo substr($comment, 0,  100) . "....";
                if(strlen($comment)>100){
                  echo '<span id="'.$row["id"].'" style="display:none">'.substr($comment, 100).'</span> &nbsp';
                  echo '<span data-id="'.$row["id"].'" style="color:red; cursor:pointer" class="readmore">more</span>';
                }
              ?>
            </li>
            <?php  
              }
            ?>
          </ul>
        </div>
      </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
      $(document).ready(function(){
        $('.readmore').click(function(){
          var id  = $(this).attr("data-id");
          var text = $(this).text();
          if(text == 'more'){
            $('#'+id+'').show();
            $(this).text('less');
          }else{
            $('#'+id+'').hide()
            $(this).text('more');
          }
        })
      })
    </script>
  </body>
</html>

<?php

$koneksi = mysqli_connect("localhost", "root", "", "dbase");

$sql = "SELECT * FROM tbl_comment ORDER BY id DESC";

$result = mysqli_query($koneksi, $sql);

<!doctype html>

<head>

<title>Cara Mempersingkat Komentar Dinamis dengan Jquery PHP Mysql</title>

</head>

<body>

<h1 class="text-center">Cara Mempersingkat Komentar Dinamis dengan Jquery PHP Mysql</h1>

<?php

while($row = mysqli_fetch_array($result)){

$comment = mysqli_escape_string($koneksi, $row["comment"]);

<?php

echo substr($comment, 0, 100) . "....";

if(strlen($comment)>100){

echo '<span id="'.$row["id"].'" style="display:none">'.substr($comment, 100).'</span> &nbsp';

echo '<span data-id="'.$row["id"].'" style="color:red; cursor:pointer" class="readmore">more</span>';

}

</li>

<?php

}

</ul>

</div>

$(document).ready(function(){

$('.readmore').click(function(){

var id = $(this).attr("data-id");

var text = $(this).text();

if(text == 'more'){

$('#'+id+'').show();

$(this).text('less');

}else{

$('#'+id+'').hide()

$(this).text('more');

}

})

</script>

</body>

</html>

Jika teman-teman lihat di atas dan seperti yang saya tulis di atas, di sini saya menggunakan sebuah datanya dari sebuah database, setelah itu kita looping dan sebelum kita looping sebenarnya kita sudah menampilkan post komentarnya itu, tetapi hanya 100 karakter, karakter yang lainya kita sembunyikan terlebih dahulu, lalu ketika readmore kita tekan, barulah muncul teks yang lain, lalu untuk jquerynya itu kita akan mengecek komentar mana yang ingin kita lihat dengan attribute data-id lalu kita diteksi tombol itu tulisan more atau less jika more keluarkan semua teksnya jika less kita tutup. oke jika kita coba tampilannya akan seperti ini

seperti yang teman-teman lihat pada gambar teks yang tadinya kita sembunyikan akan tampil ketika kita tekan lagi tombol less nya akan kembali menghilang kurang lebih seperti itu cara mempersingkat komentar dinamis dengan Jquery PHP Mysql semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.

Cara Mempersingkat Komentar Dinamis dengan Jquery PHP Mysql

Facebook DUMET School

Categories