Panduan Cara Membaca Feed Atom Di Browser

Selamat datang di wahyup.com, Panduan Belajar Jaringan Komputer dan Web Developer Javascript Untuk Pemula! Jika Anda adalah salah satu pembaca setia blog ini, Anda mungkin bertanya-tanya tentang cara terbaik untuk tetap terkini dengan konten terbaru tanpa harus terus-menerus mengunjungi situs. Nah, jawabannya adalah dengan memanfaatkan feed Atom!

Dalam panduan ini, kami akan membimbing Anda melalui langkah-langkah sederhana untuk membaca feed Atom di browser Anda. Feed Atom adalah salah satu cara paling efisien untuk mengakses pembaruan terkini dari wahyup.com tanpa harus menjelajahi situs secara manual.

Cara Membaca Feed.atom Di Browser

Daftar Isi :

Apa itu Feed Atom
Langkah-langkah Membaca Feed Atom Di Browser
Cara Membaca Feed Atom dengan HTML dan JavaScript JQuery

1. Apa itu Feed Atom

Feed Atom adalah format feed yang sering digunakan oleh para Blogger untuk menghadirkan konten terkini dari blog mereka. Dengan memanfaatkan Feed Atom, pembaca blog dapat dengan mudah berlangganan pembaruan terbaru melalui pembaca feed atau agregator feed.

Konten Feed Atom mencakup informasi penting seperti judul, tanggal publikasi, dan isi dari posting terbaru yang Anda bagikan di blog. Tak hanya sebagai sarana pemberitahuan terkini kepada pembaca, Feed Atom juga menjadi alat yang efektif untuk mempromosikan blog Anda, potensial meningkatkan daya tarik situs, dan akhirnya, meningkatkan jumlah pembaca

2. Langkah-langkah Membaca Feed Atom Di Browser

Terdapat beberapa langkah yang dapat teman-teman lakukan, seperti menggunakan add-ons pada browser ataupun menggunakan aplikasi lainnya

Pilih Browser yang Mendukung Feed Atom
Langkah pertama adalah memastikan bahwa browser yang Anda gunakan mendukung feed Atom. Sebagian besar browser populer seperti Google Chrome, Mozilla Firefox, dan Safari memiliki dukungan bawaan untuk feed Atom.
Temukan Link Feed Atom
Biasanya, link feed Atom dapat ditemukan di bagian bawah halaman utama atau di bagian header situs. Jika sulit ditemukan, Anda dapat mengecek "robots.txt" situs untuk menemukan informasi tentang feed Atom.
Gunakan Pembaca Feed Atom
Setelah menemukan link feed Atom, salin URL-nya. Selanjutnya, buka pembaca feed Atom seperti Feedly atau Inoreader, dan tambahkan feed Wahyup.com menggunakan URL yang telah Anda salin.

3. Cara Membaca Feed Atom dengan HTML dan JavaScript JQuery

Pada tahap ketiga ini saya menggunakan teknologi JavaScript beserta JQuery untuk membaca feed.atom menggunakan browser.

Buat Folder Feed yang berisi feed.atom yang sudah di download dan buat file index.html yang akan digunakan untuk implementasi nya.

1. Buat file index.html pada vscode.

Isi file index.html dengan struktur dasar HTML sebagai berikut :

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Membaca Feed Atom</title>
  <!-- kita menggunakan jquery -->
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
  <!-- mendapatkan feed-container dari script berikut -->
  <div id="feed-container"></div>
</body>
</html>

2. Tambahkan script Javascript dari JQuery

Disini kita akan menggunakan sedikit JQuery untuk melakukan Ajax request.

  <script>
    $(document).ready(function () {
      // Menggunakan jQuery untuk melakukan AJAX request
      $.ajax({
        url: 'feed.atom', // Ganti dengan path sesuai dengan lokasi file feed.atom Anda
        dataType: 'xml', // Menentukan tipe data yang diharapkan (XML)
        success: function (data) {
          // Proses data XML yang diterim a
          $(data).find('entry').each(function () {
            // Ambil data yang Anda perlukan dari setiap entri (entry)
            var title = $(this).find('title').text();
            var content = $(this).find('content').html();
            // Tampilkan ke elemen HTML, contoh dengan id "feed-container"
            $('#feed-container').append(
              '<div><h2>' + title + '</h2></div>'
              );
            $('#feed-container').append(
              '<div><p>' + content + '</p></div>'
              );
          });
        },
        error: function () {
          // Handle error jika terjadi kesalahan dalam melakukan request
          console.error('Gagal mengambil data feed.atom');
        }
      });
    });
  </script>

Jika digabungkan maka hasilnya adalah sebagai berikut pada file index.html

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Awonapa</title>
  <!-- kita menggunakan jquery -->
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>

<body>
  <!-- mendapatkan feed-container dari script berikut -->
  <div id="feed-container"></div>
  <script>
    $(document).ready(function () {
      // Menggunakan jQuery untuk melakukan AJAX request
      $.ajax({
        url: 'feed.atom', // Ganti dengan path sesuai dengan lokasi file feed.atom Anda
        dataType: 'xml', // Menentukan tipe data yang diharapkan (XML)
        success: function (data) {
          // Proses data XML yang diterim a
          $(data).find('entry').each(function () {
            // Ambil data yang Anda perlukan dari setiap entri (entry)
            var title = $(this).find('title').text();
            var content = $(this).find('content').html();
            // Tampilkan data ke dalam elemen HTML, misalnya, dalam elemen dengan id "feed-container"
            $('#feed-container').append(
              '<div><h2>' + title + '</h2></div>'
              );
            $('#feed-container').append(
              '<div><p>' + content + '</p></div>'
              );
          });
        },
        error: function () {
          // Handle error jika terjadi kesalahan dalam melakukan request
          console.error('Gagal mengambil data feed.atom');
        }
      });
    });
  </script>

</body>

</html>

Cara menampilkan di browser?

Anda tidak bisa langsung menampilkan di browser karena bakal kena CORS gitu, jadi perlu web server ya, boleh pakai xampp atau live server yang ada di vscode deh..

Ini adalah hasil dari render menggunakan JQuery tadi yang sudah kita buat dengan kode diatas. Nah itu URL saya menggunakan live server dari vscode ya biar bisa di render url defaultnya itu : http://127.0.0.1:5500/index.html.
Oiyaa itu tapi masih ada tag HTML nya tuh, biar enak dibaca ya langsung di copy aja semua teks yang muncul disitu.

Kalau udah di copy, terus buat file baru article.html nah disitu temen-temen paste aja dalam tag <body> diisiniii paste </body>, kalau sudah ya tinggal di buka di browser lagi aja. *note itu saya hapus beberapa biar gak panjang.

Dan ini hasil dari proses yang sudah saya coba kerjakan, jadi bisa lebih mudah dibaca dan yaudah tinggal temen-temen olah aja mau dijadiin apa, se-sederhana itu kan? 😊

Yaudah gitu aja semoga bermanfaat ya wkwk, di artikel berikutnya insyaAllah coba tak bahas gimana cara dapatin feed dari sebuah website atau blog nya. Silahkan komentar jika bingung atau ada hal-hal lain.

Tag Penelusuran :

Feed Burner
Cara membaca Feed Atom
Feed Atom Browser
Blog Wahyup

Wahyup - Software House Lampung