Cara Membuat Counter Pengunjung Situs Web Dengan Javascript

Bareh

3 Mar, 2022

Pada pembahasan kali ini, saya ingin memberikan tutorial kepada kamu, yaitu cara membuat penghitung pengunjung situs web dengan menggunakan JavaScript. Dalam postingan ini saya akan menunjukkan kepada kamu code penghitung pengunjung situs web html, dengan cara membuat Penghitung Sederhana Menggunakan Javascript, HTML & CSS (Bootstrap). Saya akan memberi kamu demo dan contoh untuk diterapkan. Dalam postingan ini, kita akan belajar tentang cara membuat penghitung pengunjung dalam html dan dengan sebuah contoh.

Pada postingan ini, kita akan membuat aplikasi penghitung pengunjung situs web dengan fungsi berikut:

Tampilkan jumlah total kunjungan di halaman.
Fungsionalitas untuk mengatur ulang jumlah kunjungan pada tombol klik.
Tingkatkan hitungan refresh dan kunjungan mendatang.

Pertama-tama kita akan mulai dengan membuat struktur HTML dan kemudian membuat fungsionalitas dengan JavaScript yang diikuti dengan menambahkan style CSS (Bootstrap).

1. Buat file HTML

Teks judul ditambahkan ke file HTML dengan menambahkan pembungkusnya dalam <div></div>. Selain itu, kita perlu menambahkan <div></div> lain dengan id "website-counter" dengan konten kosong untuk menampilkan jumlah pengunjung menggunakan JavaScript.

<html>
 <head>
   <title>Penghitung Situs Web</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
 </head>
 <body>
   <div>Jumlah kunjungan situs web:</div>
   <div id="website-counter" class="badge bg-primary text-wrap" style="width: 6rem; margin: 20px"></div>
   <button id="reset" type="button" class="btn btn-danger">Reset</button>
 </body>
</html>

2. DOM querySelector() untuk mencocokkan kontainer menggunakan JavaScript

Langkah selanjutnya adalah menggunakan document.querySelector() agar sesuai dengan elemen HTML dengan id "website-counter" dan menetapkannya ke variabel untuk operasi manipulasi DOM di kemudian hari.

var counterContainer = document.querySelector("#website-counter");

3. Mengambil jumlah pengunjung menggunakan LocalStorage.getItem()

Sekarang kita mengambil nilai sebelumnya dari jumlah pengunjung situs web dari localStorage dengan menggunakan metode localStorage.getItem() dengan meneruskan kunci "page_view" sebagai parameter. Nilai disimpan di localStorage browser web dan menyimpan data di luar satu sesi.

var visitCount = localStorage.getItem("page_view");

4. Menginisialisasi jumlah pengunjung menjadi 1 di lokalStorage jika entri tidak ditemukan

Entri localStorage tidak ada selama sesi pengguna pertama, oleh karena itu localStorage.getItem("page_view") akan kembali tidak terdefinisi. Kasus ini ditangani dengan menginisialisasi visitCount ke 1 dan menambahkan entri menggunakan localStorage.setItem("") dengan "page_view" sebagai kuncinya.

visitCount = 1;
 
//Tambahkan entri untuk key="page_view"
localStorage.setItem("page_view", 1);

5. Tingkatkan jumlah pengunjung dan perbarui localStorage

Sebaliknya skenario sebelumnya, jika entri untuk kunci "page_view" sudah ada, nilai String yang diambil dikonversi ke tipe data angka menggunakan Number(). VisitCount sesi sebelumnya kemudian bertambah dan nilainya diperbarui di localStorage.

visitCount = Number(visitCount) + 1;
 
// Perbarui nilai penyimpanan lokal
localStorage.setItem("page_view", visitCount);

6. Tampilkan jumlah pengunjung pada halaman menggunakan element.innerHTML

Setelah nilai visitCount yang benar ditentukan, itu perlu ditampilkan di layar. Hal ini dilakukan dengan menetapkan variabel visitCount ke element.innerHTML. Properti .innerHTML pada elemen DOM yang dipilih memungkinkan kode HTML ditambahkan di dalam elemen DOM yang dipilih. Akibatnya, kode HTML halaman web akan diperbarui untuk menampilkan jumlah pengunjung situs web.

counterContainer.innerHTML = visitCount;

7. Menerapkan fungsi Reset yang dipicu oleh tombol klik

Sekarang jumlah pengunjung diimplementasikan, kita perlu menambahkan tombol reset untuk memungkinkan pengguna mengatur ulang penghitung kembali ke 1. Langkah pertama adalah memasukkan kode HTML untuk tombol reset dan mencocokkan tombol menggunakan DOM querySelector() mirip dengan "website-counter".

Elemen DOM yang dipilih dilampirkan dengan event listener klik untuk memicu fungsi pengendali reset. Jumlah pengunjung situs web diatur ulang dengan menginisialisasi ulang visitCount ke 1 dan memperbarui nilai di localStorage. Jumlah pengunjung diperbarui di layar menggunakan element.innerHTML yang mirip dengan langkah sebelumnya.

<button id="reset" type="button" class="btn btn-danger">Reset</button>

// Menambahkan jumlah view ketika onClick
  resetButton.addEventListener("click", () => {
    visitCount = 1;
    localStorage.setItem("page_view", 1);
    counterContainer.innerHTML = visitCount;
  });

8. Menambahkan style CSS ke elemen, agar berada ditengah

Setelah semua fungsi penghitung pengunjung situs web diimplementasikan, sekarang saatnya untuk menambahkan style CSS ke aplikasi untuk menambahkan tampilan profesional dan meningkatkan kegunaan. Masukkan tag link dari bootstrap online, dan code CSS yang berada dibawah ini, kemudian ditulis pada bagian di dalam <head></head> halaman web HTML.

<style>
        /* Elemen tengah */
        body, .website-counter {
                display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        }
       
        body {
                height: 100vh;
        }
</style>

Berikut ini merupakan code akhir dari keseluruhan code "HTML, JavaScript, dan CSS" yang telah dibahas :

<html>
  <head>
    <title>Penghitung Situs Web</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
    <style>
      /* Elemen tengah */
      body,
      .website-counter {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
 
      body {
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div>Jumlah kunjungan situs web:</div>
    <div id="website-counter" class="badge bg-primary text-wrap" style="width: 6rem; margin: 20px"></div>
    <button id="reset" type="button" class="btn btn-danger">Reset</button>
  </body>
</html>
 
<script>
  var counterContainer = document.querySelector("#website-counter");
  var resetButton = document.querySelector("#reset");
  var visitCount = localStorage.getItem("page_view");
 
  // Periksa apakah entri page_view ada
  if (visitCount) {
    visitCount = Number(visitCount) + 1;
    localStorage.setItem("page_view", visitCount);
  } else {
    visitCount = 1;
    localStorage.setItem("page_view", 1);
  }
  counterContainer.innerHTML = visitCount;
 
  // Menambahkan jumlah view ketika onClick
  resetButton.addEventListener("click", () => {
    visitCount = 1;
    localStorage.setItem("page_view", 1);
    counterContainer.innerHTML = visitCount;
  });
</script>

Penutup

Kita telah membuat penghitung pengunjung situs web sederhana hanya menggunakan Javascript, HTML, dan CSS. Ini adalah metode yang sangat sederhana untuk menambahkan penghitung pengunjung ke situs web kecil atau pribadi kamu. Metode ini mudah diterapkan tetapi memiliki fungsi yang sangat terbatas.

Ada banyak berbagai metode lain yang bisa digunakan, seperti penghitung web yang menggunakan alamat IP atau alat analitik tersedia seperti Google Analytics yang mudah diatur dan juga menyediakan banyak alat dan fitur lain di samping penghitung hit. Ini memberikan laporan terperinci untuk setiap kunjungan ke halaman web. Jadi mending pakai yang mana? Semua itu tergantung kebutuhan masing – masing.

Baiklah mungkin segitu aja dulu untuk postingan kali ini. Jangan lupa di bagikan ke teman-teman kamu yang lain ya, dan jangan lupa kunjungi situs ini untuk mendapatkan info menarik serta terbaru lain nya. Kalau masih bingung caranya, komen aja di bawah! Terima kasih!