12/09/2016

Penghitung Jumlah Kata (Word Counter) Dengan PHP dan jQuery

Anda seorang bloger? atau anda seorang penulis artikel? apapun itu jika profesi anda berkaitan dengan media (misal teks, buku, website, dll) pasti sudah tidak asing lagi dengan yang namanya mengetik dan menyusun kata-kata menjadi satu kesatuan kalimat yang selaras. Dan biasanya kalo penulis itu punya batasan nilai minimum teks atau kata yang harus di buat. Selain menyajikan materi yang baik, memiliki aturan jumlah teks yang harus ditulis juga bagus untuk SEO web nya. Karena dengan banyaknya teks yang dibuat, maka pengaruh terhadap keyword content pun akan semakin baik.

Menyingung soal SEO atau Search Engine Optimization, Google akan cepat mengindeks web atau blog yang mempunyai konten menarik. Minimal konten tersebut memiliki paling tidak sedikitnya 300 kata. Tapi terkadang seorang bloger (termasuk saya) terasa sangat sulit menghitung jumlah kata yang telah saya ketik, karena memang 300 kata itu tidak sedikit juga untuk dihitung. Bayangkan saja jika dihitung satu persatu. paling nantinya menebak nebak saja dari pada capek-capek menghitung kata.

Berawal sari situlah saya mendapatkan ide yang mungkin sudah banyak dibahas juga oleh web web yang lain, ada yang membahas menghitung jumlah kata dengan javascript, penghitung jumlah kata dengan php, CSS jQuery dan lain sebagainya. Namun alasan kekurangan dan kelebihan dari masing-masing web yang membahas penghitungan kata lah sehingga saya ingin membuat sendiri.

Aplikasi Penghitung Kata yang saya buat cukup simple dan tidak rumit, hanya menggunakan sebuah inputan standar dari php dan ditambah sedikit event dari jQuery, karena maklum saja saya bukan seorang webmaster Pro. hehe.. saking simple nya penghitung kata ini, saya harap kalian sudah paham dengan standar penulisan atau penggunaan element dari html dan instalasi query nya. Lets do it ..


  • Pertama, seperti biasa buat project baru atau folder di htdocs dengan nama "Penghitung_kata_dengan_php_dan_jquery".
  • Kedua, simpan file jquery.js dalam folder tersebut karena kita butuh jquery untuk menjalankan event-event.
  • Ketiga, buat file index.php dan tuliskan script dibawah ini kemudian save.

<!DOCTYPE html>
<!--
Dibuat oleh : Indra Ahmad Iskandar
Email : indraiskandar10@gmail.com
<head>
Blog : indra92.blogspot.com --> <html>
<style>
<meta charset="UTF-8"> <title></title>
width: 90%;
#container { margin: 0 auto;
border: 1px #cccccc solid;
background: #eeeeee; padding: 0.5em;
text-align: center;
border-radius: 20px; } #container #container-text{
margin: 0.5em;
font-size: 1.5em; font-family: calibri; font-weight: bold; }
width: 100%; height: 320px;
#container #sub-container{ padding: 2%; } .inputan { } </style>
<div id="container-text">.:: Penghitung Kata (Word Counter) ::.</div>
<script type="text/javascript" src="jquery.js"></script> </head> <body> <div id="container">
<div>Info : <span id="info">Tidak ada info</span></div>
<div id="sub-container"><textarea name="inputan" id="word_count" class="inputan"></textarea><br> Total Kata : <span id="display_count">0</span> kata. </div> </div>
var words = $.trim(this.value).length ? this.value.match(/S+/g).length : 0;
<script> $(document).ready(function () { $("#word_count").focus(); $("#word_count").on('keydown', function (e) { if (words == 0) {
$('#display_count').text(words);
$('#display_count').text(words); $('#info').text('Tidak ada info').css('color', ''); } else if (words <= 300) {
$('#info').text('Telah Mencapai 300 kata').css('color', 'green');
$('#info').text('Masih Kurang ke 300 kata').css('color', 'red'); } else { $('#display_count').text(words); } }); }); </script> </body>
</html>

  • Keempat, jalankan di browser dengan mengetikkan url "localhost/penghitung_kata_dengan_php_dan_jquery"

Aplikasi ini hanya dibatasi minimal 300 kata, jika kata terhitung masih kurang dari 300 maka info berwarna merah yang menandakan bahwa kata masih kurang. dan jika sudah melebihi atau sama dengan 300 info akan terlihat seperti gambar diatas, berubah hijau yang menandakan bahwa jumlah kata telah 300 atau lebih.

Untuk merubah batas 300 , silahkan ganti kode
  } else if (words <= 300) {


Demo :



Download project nya :

Mulai menulis blog sejak tahun 2012. Saat ini sedang disibukkan dengan karir dibidang IT nya.

2 komentar

minta versi jquery nya yang sesuai projek mas

Sudah saya perbaharui, Silahkan download gan di link yang sudah saya sediakan diatas. Terimakasih sudah berkunjung

Komentar yang mengandung spam / link aktif akan secara otomatis disembunyikan. Mohon maaf atas ketidaknyamanan jika pertanyaan telat ataupun tidak terbalas karena keterbatasannya waktu. Silahkan hubungi kami di menu Contact Us. Terimakasih
EmoticonEmoticon