Membuat Counter View Page Dengan Firebase

Membuat penghitung jumlah pengunjung (page view counter) adalah salah satu fitur yang sering digunakan dalam website untuk mengetahui seberapa sering suatu halaman dikunjungi. Dengan bantuan Firebase Realtime Database, kita bisa dengan mudah menyimpan dan menampilkan jumlah view dari halaman tertentu secara real-time. Artikel ini akan membahas cara membuat counter view page menggunakan Firebase.

Apa itu Firebase Realtime Database?

Firebase Realtime Database adalah layanan dari Google yang menyediakan basis data NoSQL berbasis cloud dan bisa diakses secara real-time. Firebase sangat cocok untuk aplikasi yang membutuhkan sinkronisasi data secara langsung antar pengguna atau perangkat.

Langkah-Langkah Membuat Counter View Page

1. Buat Project di Firebase

Kunjungi https://console.firebase.google.com/.
Klik “Add project” dan ikuti proses pendaftaran.
Setelah project dibuat, masuk ke menu Realtime Database dan klik “Create Database”.
Pilih lokasi dan atur aturan akses sebagai berikut untuk testing:
```
{
  "rules": {
    ".read": true,
    ".write": true
  }
}
```

2. Hubungkan Firebase ke Website

Tambahkan skrip Firebase ke HTML kamu:


<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-database.js"></script>

<script>
  const firebaseConfig = {
    apiKey: "API_KEY_KAMU",
    authDomain: "PROJECT_ID.firebaseapp.com",
    databaseURL: "https://PROJECT_ID.firebaseio.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID"
  };
  firebase.initializeApp(firebaseConfig);
</script>

3. Tambahkan Script Counter


<script>
  const db = firebase.database();
  const counterRef = db.ref('page_views/home');

  counterRef.once('value').then((snapshot) => {
    let count = snapshot.val() || 0;
    count++;
    counterRef.set(count);
    document.getElementById('viewCount').innerText = 'Dilihat: ' + count + ' kali';
  });
</script>

4. Tambahkan HTML untuk Menampilkan Counter


<p id="viewCount">Loading...</p>

Tips Keamanan

Setelah testing, ubah aturan akses database agar hanya bisa ditulis oleh server atau pengguna terautentikasi.
Gunakan Cloud Functions atau validasi untuk mencegah manipulasi counter oleh user.

Kesimpulan

Dengan Firebase Realtime Database, kita bisa membangun fitur counter view page yang real-time dan mudah diintegrasikan ke halaman website. Fitur ini bisa dikembangkan lebih lanjut, seperti mencatat view per IP, per user, atau menyimpan riwayat kunjungan halaman tertentu