Menghitung Pengunjung Online Realtime Auto Refresh

Setelah sebelumnya kita membahas tentang Menghitung Pengunjung Online Dengan PHP dan SQLite, maka sekarang ini kita akan mengembangkan kode sebelumnya menjadi lebih dinamis. Umumnya online visitor counter tidak menyediakan layanan untuk menghitung jumlah pengunjung online secara realtime. Sehingga membuat online visitor counter sendiri harus dilakukan jika ingin melihat visitor counter berjalan realtime. Maksud realtime adalah keterangan jumlah pengunjung online akan berubah atau refresh sendiri saat jumlah pengunjung online bertambah/berkurang.

Sebelum Anda bisa mencoba kode berikut, pastikan anda sudah membaca artikel berjudul Menghitung Pengunjung Online Dengan PHP dan SQLite. Artikel ini sebenarnya hanyalah pengembangan dari artikel tersebut.

Dari kode sebelumnya, kita hanya perlu mengubah javascript agar dapat melakukan refresh dalam kurun waktu tertentu. Di sini saya memilih interval 10.000 ms, sehingga jumlah pengunjung online akan diperbarui secara realtime tiap 10 detik.

Untuk mendukung proses realtime; fungsi refresh dengan setTimeout() yang disediakan javascript bisa digunakan. Prototype-nya adalah sebagai berikut.

setTimeout(function, interval);

Sehingga jika dikolaborasikan dengan script online visitor counter sebelumnya, hasilnya akan menjadi seperti berikut:

<div id='online'></div>
<script>
 function print_online(){
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() { 
   if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
    document.getElementById('online').innerHTML = xmlHttp.responseText + " pengguna online";
   }
  }
  xmlHttp.open("GET", "http://localhost/online.php", true);
  xmlHttp.send(null);
  setTimeout(print_online,10000);
 }
 print_online();
</script>

Tidak berbeda jauh, bukan?
Sangat simpel, hanya dengan menabahkkan beberapa baris kode di atas anda sudah bisa membuat realtime online visitor counter untuk website/blog anda. Selamat mencoba.

Read more

Menghitung Pengunjung Online Dengan PHP dan SQLite

Jika anda memiliki website besar, anda pasti merasa percaya diri untuk menampilkan jumlah pengunjung online di website anda. Jangan biarkan trafik anda turun gara-gara loading halaman lambat. Perlu diketahui bahwa salah satu penyebab lambatnya loading website adalah terlalu banyak menggunakan script yang berjalan pada client-side (mis: javascript). Selain itu, terlalu banyak melakukan query database juga menyebabkan lambatnya loading website.

Umumnya, website kelas personal (blog) masih menampilkan jumlah pengunjung online / online visitor count dengan layanan counter gratis; misalnya seperti supercounters.com. Tanpa disadari, hal ini sangat empengaruhi waktu loading halaman web. Apalagi layanan seperti itu memiliki banyak user yang menginginkan jumlah pengunjung online dalam waktu yang sama. Ini membuat beban server penyedia online visitor counter lebih berat dan berimbas pada waktu load website anda sendiri.

Jika anda memiliki hosting sendiri, lebih baik anda membuat online visitor counter sendiri. Tapi jika tidak punya, ada banyak hosting gratis bisa anda coba; misalnya 3owl.com.

Membuat online visitor counter sendiri memang agak merepotkan. Tapi jika melihat script visitor counter yang bekerja dengan SQLite, membuat online visitor counter sendiri perlu dipertimbangkan. Ini karena, menurut beberapa referensi, SQLite mampu bekerja lebih cepat dalam mengolah database (link referensi). Jadi, memasang online visitor counter berbasis SQLite bisa dipastikan akan mempengaruhi waktu loading halaman web anda.

counter.php
Kode berikut ini adalah inti utama dari proses perhitungan pengunjung online. Setiap pengunjung yang mengakses website dibedakan berdasarkan alamat IP. Adapun tahapan proses yang dilakukan oleh kode ini adalah
- Memperoleh alamat IP pengunjung ($ip)
- Memperoleh waktu akses pengunjung ($curtime)
- Memperoleh waktu 3 menit yag lalu ($lowtime)
- Memeriksa apakah online.db sudah dibuatkan tabel 'counter'. Jika belum ada, buat!
  $db->exec("CREATE TABLE IF NOT EXISTS `counter` ...
- Memasukkan $ip dan $curtime pengunjung ke database  jika belum ada. Jika sudah ada, update kolom lastaccess dengan $curtime.
  $db->exec("INSERT OR REPLACE INTO counter ...
- Menghapus data pengunjung yang sudah 3 menit tidak melakukan aktivitas:
  $db->exec("DELETE FROM counter WHERE lastvisit < '$lowtime'");
- Menghitung jumlah pengunjung yang sedang aktif dalam kurun waktu 3 menit terakhir
  $res = $db->query("SELECT COUNT(ip) AS count from counter");

<?php
function get_online(){
 $ip = $_SERVER['REMOTE_ADDR'];
 $curtime = date("Y-m-d H:i:s");
 $lowtime = date("Y-m-d H:i:s", strtotime("-3 minutes"));

 $db = new SQLite3(dirname(__FILE__)."/online.db");
 $db->exec("CREATE TABLE IF NOT EXISTS `counter` (
   `ip` varchar(60) NOT NULL,
   `lastvisit` DATETIME NOT NULL,
   UNIQUE(`ip`)
 )");

 $db->exec("INSERT OR REPLACE INTO counter (ip,lastvisit) VALUES('$ip','$curtime')");
 $db->exec("DELETE FROM counter WHERE lastvisit < '$lowtime'");
 $res = $db->query("SELECT COUNT(ip) AS count from counter");
 $row = $res->fetchArray();
 return $row['count'];
}
?>

online.php
Kode ini akan mencetak angka dari counter.php

<?php
include 'counter.php';
echo get_online();
?>

Di halaman anda
Di setiap halaman anda, patikan anda menyisipkan kode ini di sekitar tag <body>. Jumlah pengunjung online akan diperoleh dari online.php dan dicetak pada elemen <div id='online'></div>.

...
<div id='online'></div>
<script>
 var xmlHttp = new XMLHttpRequest();
 xmlHttp.onreadystatechange = function() { 
  if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
   document.getElementById('online').innerHTML = xmlHttp.responseText + " pengguna online";
  }
 }
 xmlHttp.open("GET", "http://DOMAIN-ANDA.com/online.php", true);
 xmlHttp.send(null);
</script>
...

Hasilnya
Saya sudah mencoba kode ini di localhost dan di website saya sendiri (link). Hasil screenshot di localhost terlihat seperti berikut:

Yap, itu tadi adalah sedikit tutorial singkat mengenai cara menghitung jumlah pengunjung online atau yang biasa disebut sebagai online visitor counter. Mudah-mudahan bermanfaat.

Read more

Membuat Animasi Loading Blog Seperti Youtube

Sekarang kita akan membahas hal baru dan unik, yaitu membuat animasi loading / progress seperti youtube. Siapapun blogger, pasti ingin melihat pengunjungnya terkesan dan betah berlama-lama di blognya. Salah satujaln yang dilakukan adalah membuat blog terlihat interaktif dengan menambah animasi loading pada blog.

Banyak yang mengira bahwa cara membuat animasi loading blog adalah hal yang kompleks dan membutuhkan skill pemrograman tingkat dewa. Mungkin ada benarnya, sih. Walau begitu, sebenarnya hal tersebut bisa dipermudah dengan memanfaatkan automatic page load progress bar library jQuery. Dengan kata lain, cara membuat animasi loading blog / progress bar blog cukup dilakukan dengan menambahkan referensi script library.

Lalu, library yang mana yang bisa dipakai dan mudah diimplementasikan untuk membuat animasi loading blog / progress bar blog ?
Dari penelusuran saya, ternyata ada banyak library javascript ataupun jquery untuk hal ini. Dari semuanya itu, akhirnya saya memilih PACE.js karena mudah dan praktis.

Demo : http://github.hubspot.com/pace/docs/welcome/
Download : http://github.com/HubSpot/PACE/

Cara implementasi animasi loading blog / loading halaman website dengan PACE.js sangatlah mudah, kita hanya perlu memasukkan referensi pace.js dan salah satu tema CSS pace.js (lihat macam-macam tema) di atas kode penutup </head>.

  <script src="/pace/pace.js"></script>
  <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>

Jika kita hanya memiliki blog/website gratisan seperti blogger; saya sarankan untuk menggunakan referensi dari CDN tanpa harus mendownload source PACE.js. Selain itu, pastikan kita juga sudah mengikutsertakan referensi jquery sebelumnya. Khusus untuk platform Blogger, anda tidak perlu menambahkan referensi jquery, karena secara default, blogger sudah menambahkannya secara otomatis dalam template kita.

CDN PACE.js : https://cdnjs.com/libraries/pace
CDN JQuery : https://cdnjs.com/libraries/jquery/

Sebenarnya, baik website personal ataupun blog gratisan, mendownload library PACE.js adalah opsional, karena sudah ada beberapa CDN yang menyediakan library tersebut di servernya.

Berikut ini merupakan contoh penggunaan CDN untuk membuat animasi loading blog / progress bar dengan PACE.js (tema Flash). Jika anda menggunakan Blogger, cukup letakkan kode tepat di atas tag </head>. Hasilnya bisa anda lihat di blog Komputoo ini :D

  <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js" integrity="sha256-EPrkNjGEmCWyazb3A/Epj+W7Qm2pB9vnfXw+X6LImPM=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/black/pace-theme-flash.min.css" integrity="sha256-HsWJ70tOKcd52gFzhVX319egmTCvQbMOs0DYg3bDMi8=" crossorigin="anonymous" />
</head>

Yap, sekian tutorial singkat mengenai cara membuat animasi loading blog / cara membuat progress bar blog. Mudah-mudahan bisa bermanfaat.

Read more

Mengambil Kutipan Ringkasan Artikel Wikipedia Dengan API (Javascript)

Saya terkesan melihat Google dengan cepatnya mengerti maksud saya. Ketika saya mengetik "nama latin kunyit", muncul banyak sekali hasil dan salah satunya yang ditempatkan paling atas adalah kutipan dari Wikipedia.

Saya terheran, bagaimana bisa teknologi crawler milik Google bisa melakukan ekstraksi data seperti itu?

Namun, setelah saya mengagali banyak informasi dari internet, tertujulah saja pada fakta mencengangkan. Ternyata Wikipedia menyediakan API yang bisa diakses tanpa batasan ataupun bayaran sepeserpun.

Contoh implementasinya adalah ketika saya ingin mengekstrak data ringkasan dan gambar mengenai Ikan Nila (Oreochromis niloticus).

https://id.wikipedia.org/w/api.php?format=jsonfm&action=query&prop=extracts|pageimages&pithumbsize=300&exintro=&explaintext=&titles=Oreochromis%20niloticus&redirects

Atau, ketika saya hendak memperoleh informasi yang berkaitan dengan flora/fauna.

https://id.wikipedia.org/w/api.php?action=query&generator=search&gsrlimit=50&gsrsearch=intitle:udang+incategory:Artikel_dengan_format_mikro_%27spesies%27&prop=revisions&rvprop=content&rvsection=0&format=jsonfm

Jika kalian ingin tahu lebih banyak mengenai fitur API Wikipeda, silahkan kunjungi:

https://www.mediawiki.org/wiki/API:Main_page

Eh, tunggu dulu. Apa gunanya Anda mempelajari hal ini? Banyak, salah satunya apabila anda ingin mempresentasikan informasi kepada user ketika mengetik kata kunci di kotak pencarian blog anda. Dengan setikit ketrampilan Javascript/JQuery, data API yang tersusun sebagai JSON dapat diinterpretasikan dan diolah dengan mudah. Berikut contoh implementasinya.

<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
 $(document).ready(function() {
  $("#wiki-search").click(function(e) {
   e.preventDefault();
   var katakunci = $("#wiki-search-input").val();
   var url =  "https://id.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro=&explaintext=&titles="+katakunci+"&redirects&callback=?";
   $.getJSON(url ,function(data) {
    $.each(data.query.pages, function(i, item) {
     $("#wiki-title").html (item.title);
     $("#wiki-content").html (item.extract);
    });
   });
  });
 });
</script>
</head>
<body>
 <form > 
   <input type="text" id="wiki-search-input"> <button id="wiki-search"> Search!!</button>
 </form>
 <div id='wiki-title' style="font-weight:bold;"></div>
 <p id='wiki-content'></p>
 <a href="http://www.komputoo.pw">Wikipedia Search Widget</a>
</body>
</html>

Agar API dapat diakses melalui client dengan JS, URL API harus disisipkan "&callback=?", agar server wikipedia menyetujui permintaan kita. Jika implementasi ini dilakukan dari server-side, hal tersebut boleh diabaikan saja.

Saya juga sudah menyisipkan contoh implementasi kode di bawah ini untuk menunjukkan bahwa kode bekerja dengan baik. Silahkan dicoba.

### Coba ketik : kucing, macan, atau lainnya ###

### Hasilnya akan terlihat di atas ###

Kode di atas self-explained bagi yang sudah terbiasa dengan pemrograman web. Jadi apabila mungkin ada unek-unek yang perlu disampaikan, silahkan scroll ke bawah untuk berkomentar :)

Read more

Cara Ganti Domain Blogger Tanpa Kehilangan Trafik (Dengan 7 Baris Kode)

Cara mengganti domain bukanlah hal yang sulit. Tapi yang sulit adalah mengganti domain tanpa kehilangan trafik, khususnya yang datang dari mesin pencari.

Kalau sudah yakin tak apalah berharap ganti domain.
Tapi kalau trafik sudah tinggi, perasaan dilema pun akan datang di sini.
Apalagi jika faktanya sebagian besar trafik blog ini berasal dari mesin pencari.
Semua pengunjung kamu nantinya bisa dipastikan akan tersesat, di halaman 404.
Apa boleh buat, blog harus tetap diisi, meski nama domainnya belum sreg di hati.

Eits, jangan kawatir, masalah ini sebenarnya bisa diatasi dengan sangat mudah, kok. Setelah membaca ini kamu akan bisa mengganti domain tanpa kehilangan trafik dari mesin pencari. Simak saja penjelasan singkat yang disajikan berikut ini.

Sebagai contoh, studi kasus ini akan berusaha mengubah domain dari situslama.blogspot.com ke situsbaru.blogspot.com. Untuk melakukan hal ini dengan benar adalah; pertama-tama, ganti domain atau subdomain blog kamu ke situsbaru.blogspot.com saat sepi pengunjung. Cocoknya ya, malam hari kalau situs beraudien lokal. Paling jam 10 sudah banyak yang tidur, kok.

Kemudian buat blog baru dengan nama domain lamamu (situslama.blogspot.com). Kontennya tidak perlu diisi, ya. :D

Sekarang masuk ke edit HTML template blog baru kamu yang sudah diatur sehingga berdomain situslama.blogspot.com. Yang perlu kamu lakukan adalah memasukkan kode berikut tepat di bawah kode tag <head>.

  <script>
  //<![CDATA[
   var u = window.location.href;
   u = u.replace(window.location.host, 'situsbaru.blogspot.com');
   window.location.href = u;
  //]]>
  </script>

Simpan, dan selesai. Mulai dari sini, apabila situslama.blogspot.com diakses, secara otomatis browser akan teralih ke situsbaru.blogspot.com, tapi tetap dengan list konten artikel yang sama seperti sebelumnya.

Bukan cuma homepagenya saja, semua artikel yang memiliki permalink unik dengan alamat basis situslama.blogspot.com pasti akan diarahkan secara otomatis dengan benar.
Contohnya:
situslama.blogspot.com/2017/03/cara-menyembunyikan-link-aktif-pada.html

akan mengarah menuju:
situsbaru.blogspot.com/2017/03/cara-menyembunyikan-link-aktif-pada.html

Tambahan tips opsional ini juga bisa kamu lakukan untuk mempercepat proses pengalihan. Ini karena saat situs lama dibuka, browser harus mengunduh dan memproses seluruh kode HTML sebelum pengalihan dilakukan. Tentu saja ini perlu waktu sedikit lebih lama, karena browser harus melakukan loading 2 kali untuk benar-benar bisa menampilkan konten yang diminta. Untuk itu, baik juga apabila kode template situslama.blogspot.com ini kita sederhanakan scriptnya.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
  <b:skin><![CDATA[]]></b:skin>
  <script>
  //<![CDATA[
   var u = window.location.href;
   u = u.replace(window.location.host, 'situsbaru.blogspot.com');
   window.location.href = u;
  //]]>
  </script>

  </head>

  <body>
 <b:section id='main' name='Main'/>
  </body>
</html>

Paste saja semua kode di atas untuk menggantikan kode template yang lama dari situslama.blogspot.com. Insyaallah ini bisa membantu mempercepat proses pengalihan. Setelah terlihat pengalihan terproses dengan benar, anda juga tidak boleh lupa mensubmit ulang sitemap dan URL ke direktori dan banyak mesin pencari, seperti awal membuat domain. Maaf saja, SEO dari domain lama tidak bisa dengan mudah ikut serta di domain baru. Kecuali untuk Google. Setelah, kita mengkonfirmasikan penggantian domain dari webmasters tools, semua skor reputasi SEO domain lama akan diikutkan secara otomatis olehnya.

Oke, mudah-mudahan artikel ini bermanfaat... :)

Read more

Cara Menyembunyikan Link Aktif Pada Komentar Blogger (Dengan 15 Baris Kode Saja)

Komentar dengan link aktif bisa menurunkan reputasi SEO blog, begitulah kata para bloggers yang sering saya baca. Tapi dari pribadi saya sendiri, hal ini kurang begitu saya akui kebenarannya. Buktinya saja Facebook, Twitter, Instagram dan banyak situs besar lainnya tetap bisa menduduki peringkat atas, meskipun sebagian besar situs di dunia ini menautkannya.

Kalau anda termasuk golongan orang yang percaya hal ini, maka pilihan yang paling tepat adalah segera menghapus komentar semacam ini. Lalu bagaimana jika jumlah pengunjung dan komentar hariannya relatif besar? Tetap, anda harus menghapusnya secara manual. Terkhususnya untuk yang menggunakan platform Blogger. Tidak seperti Wordpress, Blogger tdak memiliki banyak pilihan plugin untuk dipakai. Sebagian besar atribut widget tambahan dibuat dengan Javascript. Termasuk dalam hal menyembunyikan komentar dengan link aktif pada blog.

Lihat Juga : Komentar Blogger Sembunyi Karena Pakai Link Aktif? Tenang, Masih Bisa Terindex

Nah, pada kesempatan kali ini, Komputoo akan menunjukkan serta menjelaskan bagaimana cara menyembunyikan komentar blogger dengan javascript. Sangat cocok bagi kalian yang menginginkan cara instan untuk mengusir spammer secara halus. Perlu diingat ya, meski komentar dengan link aktif ini sudah sembunyi, kita tetap harus menghapusnya secara manual. Kenapa? baca saja postingan yang saya lampirkan di atas.

Di Blogger, seluruh komentar blog tersimpan pada elemen <div> dengan nama atribut id "comment-block", lalu tiap teks komentar yang berhasil diposting akan ditampilkan dalam blok elemen <p>teks komentar</p>. Untuk mendeteksi adanya link aktif pada komentar tersebut, kita akan memeriksa apakah di dalam blok <p> tersebut terdapat tag semacam <a ...>...</a>. Jika iya, langsung saja kita bantai komentar tersebut. Metode inilah yang akan dilakukan oleh script berikut:

<script>
//<![CDATA[
function blockComments() {
    var comments = document.getElementById('comment-holder'),
        content = comments.getElementsByTagName('p');
    for(var i = 0; i < content.length; i++) {
        if(content[i].innerHTML.indexOf('</a>') !== -1) {
            content[i].innerHTML = "Maaf, dilarang menambahkan link aktif di komentar!";
            content[i].className = "blocked-comment";
        }
    }
}
blockComments();
//]]>
</script>

Masuk ke bagian manajemen Template di Blogger kamu, lalu pilih Edit HTML. Paste kode di atas, tepat di atas </body>. Simpan dan selesai. Sangat mudah! Hasilnya pun tidak diragukan lagi, bro.

Secara detil, fungsi kerja script di atas sangat sederhana lho sebenarnya. Misalnya salah satu komentar berwujud seperti ini:
<p>
   <a href='http://www.numpanglewat.xxx'>numpang lewat</a>
</p>

Setelah script tersebut bekerja, komentar tersebut akan berubah menjadi seperti ini:
<p class='blocked-comment' >
   Maaf, dilarang menambahkan link aktif di komentar!
</p>

Loh, kenapa ada tambahan class='blocked-comment' ?
Ini sebenarnya untuk mempermudah kita jika ingin pesan block komentar tersebut memiliki gaya tertentu, Misalnya, jika ingin teks pesan blokir tersebut berwarna merah, tambahkan script CSS ini di atas </head>. Sisanya, anda bisa menambahkan style lain juga pada script ini.

<style>
   p.blocked-comment {
     color: red;
   }
</style>

Ok, That's all...

Read more

Membuat Jam Digital JavaScript Sederhana

Sederhana tapi menakjubkan. Seperti itulah gambaran yang akan terasa ketika menulis beberapa skrip jam digital dengan javascript ini. Untuk melakukannya tidak sulit setelah mengetahui dasar-dasarnya.

Yang pertama harus diketahui, manajemen waktu Javascript dilakukan dengan membuat objek instansi class Date. Setelah dibuat, serangkaian method dapat digunakan dari objek tersebut. Untuk membuat jam sederhana, ada 3 method yang perlu diketahui, yaitu getHours(), getMinutes() dan getSeconds(). Saya rasa, tidak perlu lah saya menjelaskan satu per satu, bahasanya cukup sederhana untuk dimengerti kan?

<script type='text/javascript'>
function reformat(s){
 if(s < 10) s = "0" + s;
 return s;
}

function updateJam() {
 var sekarang = new Date();
 var j = reformat(sekarang.getHours());
 var m = reformat(sekarang.getMinutes());
 var d = reformat(sekarang.getSeconds());
 document.getElementById('jam').innerHTML =
 j + ":" + m + ":" + d;
 var t = setTimeout(updateJam, 500);
}
</script>

...

<div onclick='updateJam();' id='jam'>00:00:00</div>

Fungsi updateJam() bertugas menulis waktu saat ini ke salah satu elemen dengan id "jam". Di akhir, fungsi ini memuat timer, yang akan mengeksekusi fungsi ini kembali setelah berlalu 0.5 detik. Fungsi ini terpanggil dan mengupdate waktu kembali beserta membuat timer baru. Begitu seterusnya, sehingga fungsi ini tidak akan pernah berhenti bekerja sejak dieksekusi pertama kali.

Waktu yang dihasilkan oleh objek Date masih dalam bentuk angka biasa. Agar angka di bawah 10 memiliki awalan 0, kita membuat fungsi sederhana untuk memodifikasi nilainya, yaitu dengan reformat().

Lalu kapan eksekusi pertama yang dimaksud?
Tepat! yaitu saat elemen ber-id jam diklik. Ini sesuai dengan kode di dalam atribut onclick di atas. Jika anda ingin kode ini dieksekusi otomatis saat halaman web di load. Tempatkan kode yang sama di atribut onload miliki elemen body.

<body onload='updateJam();'>

Sebagai contoh, saya sudah memasukkan script dan elemen yang dijelaskan di atas pada postingan ini. Coba klik jam di bawah ini untuk memulai.

00:00:00

Keren, bukan? :D
Selamat mencoba...

Read more