Cara Memuat Website Pencarian Trending dengan Google Trends dan Php

Share:

Halo semuanya, kembali lagi di sahretech. Baiklah pada kesempatan kali ini kita akan membuat sebuah website yang tidak kalah menarik dari website-website yang telah kita bahas sebelumnya, yaitu website pencarian trending. Gimana cara buatnya?, ayo ikuti pembahasannya berikut ini.


Kita akan membuat sebuah aplikasi website sederhana dengan memanfaatkan data api yang diberikan oleh google trends, data api kali ini berbentuk xml jadi pengolahannya sedikit berbeda dari artikel-artikel yang pernah saya bahas sebelumnya. Artikel tersebut bisa kalian baca di link berikut ini: 


Kelebihan membuat aplikasi dengan data api adalah kalian tidak perlu membuat backend dan databasenya, semuanya di sediakan pihak yang menyediakan data. Kalian hanya perlu membuat tampilannya saja. Kelebihan yang lain adalah datanya tidak disimpan di client, sehingga data yang digunakan akan selalu baru.

Cara Membuat Website Pencarian Trending

Pertama, buka terlebih dahulu link berikut ini https://trends.google.co.id/trends/trendingsearches/daily?geo=ID, lalu klik tombol rss  yang ada di sebelah kanan, di antara tombol berlangganan dan tombol sematkan

sahretech
Tampilan google trends



Kemudian muncul halaman seperti gambar di bawah ini. Halaman tersebut berisi data xml yang akan kita pakai untuk ditampilkan di dalam aplikasi kita. Perbedaan data xml dan json adalah data xml menggunakan tag pembuka dan penutup, sedangkan json memiliki tanda kurung siku [..] dan kurung kurawal {..}

sahretech
Tampilan data xml



Buatlah sebuah folder baru dengan nama googletrends di dalam htdocs, lalu buatlah sebuah file di dalamnya dengan nama index.php, lalu copy script di bawah ini dan pastekan di dalam file tersebut



<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> </head> <body> <div class="container"> <br> <nav class="navbar navbar-light bg-primary"> <div class="container-fluid"> <a class="navbar-brand" href="google.com"> Google Trends </a> </div> </nav> <br> <?php //link akses data api $req="https://trends.google.co.id/trends/trendingsearches/daily/rss?geo=ID"; //ambil isi konten $temp=file_get_contents($req); //menjadikan format xml string $xml=simplexml_load_string($temp); //inisalisasi penomoran untuk tiap list $no = 1; //melakukan perluangan, ambil data yang berada di dalam tag channel di dalam item foreach($xml->channel->item as $data){ ?> <!-- membuat card bootstrap --> <div class="card mb-3"> <div class="row"> <div class="col-md-1"> <h2 class="p-3"><?php echo $no++;?></h2> </div> <div class="col-md-2"> <div class="card-body"> <!-- menampilkan judul pencarian --> <h5 class="card-title"><?=$data->title?></h5> <!-- menampilkan tanggal pencarian --> <h6 class="card-subtitle mb-2 text-muted"> <?=$data->pubDate?> </h6> <p class="card-text"> <?php //membuat data description menjadi array dengan menggunakan fungi explode $label = explode(', ', $data->description); //melakukan perulangan foreach($label as $l){ ?> <!-- tampilkan data descriptin di dalam badge bootsrap --> <span class="badge bg-primary"><?php echo $l;?></span> <?php } ?> </p> <!-- mengambil data jumalh pencarian contoh: 200.000 --> <!-- tag yang diambil <ht:approx_traffic> sedangkan cara menampilkannya seperti gambar di bawah ini --> <p class="card-text"><small class="text-muted"><?=$data->children('ht', true)->approx_traffic?> Pencarian</small></p> </div> </div> <div class="col-md-9 d-flex justify-content-end"> <?php // melakukan perulangan contoh berita di dalam sebuah pencarian // tag yang diambil adalah <ht:news_item> sedangkan cara menampilkannya seperti gambar di bawah ini foreach($data->children('ht', true)->news_item as $data){ ?> <div class="card m-2" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title"> <!-- // berikut ini judul dari sebuah artikel berita --> <!-- // tag yang diambil adalah <ht:news_item_title> sedangkan cara menampilkannya seperti gambar di bawah ini --> <?=$data->children('ht', true)->news_item_title?> </h5> <h6 class="card-subtitle mb-2 text-muted"> <!-- // mengambil sumber berita, seperti detik, cnn dll // tag yang diambil adalah <ht:news_item_source> sedangkan cara menampilkannya seperti gambar di bawah ini --> <?=$data->children('ht', true)->news_item_source?> </h6> <p class="card-text"> <!-- // mengambil isi potongan berita // tag yang diambil adalah <ht:news_item_snippet> sedangkan cara menampilkannya seperti gambar di bawah ini --> <?=$data->children('ht', true)->news_item_snippet?></p> <!-- menampilakan link menuju berita --> <a href="<?=$data->children('ht', true)->news_item_url?>" class="btn btn-primary">Read More</a> </div> </div> <!-- penutup foreach --> <?php } ?> </div> </div> </div> <!-- penutup foreach yang paling atas --> <?php } ?> </div> </body> </html>


Jika kalian jalankan maka tampilannya akan tampak seperti gambar di bawah ini. Dimana terdapat navbar di bagian paling atas, lalu di bawahnya terdapat list pencarian terpopuler, terdapat nomor urut, lalu kata kunci pencarian, dan contoh berita yang ada di sebelah kanan card bootstrap

sahretech
Hasil aplikasi




Penjelasan Script

Saya menggunakan bootstrap untuk mempermudah dan mempercantik tampilan. Beberapa component yang saya pakai adalah container  digunakan untuk membuat content di tengah, navbar  digunakan untuk membuat menu biru yang ada di bagian paling atas badge   digunakan untuk membuat tag dan card  digunakan untuk membuat bagian list component-component tersebut bisa kalian pelajari di dalam dokumentasi bootstrap

Untuk penjelasannya sudah saya tulis di bagian script yang ada di atas. Dan bagian yang paling penting adadalah script berikut ini.

        

<?php //link akses data api $req="https://trends.google.co.id/trends/trendingsearches/daily/rss?geo=ID"; //ambil isi konten $temp=file_get_contents($req); //menjadikan format xml string $xml=simplexml_load_string($temp); //inisalisasi penomoran untuk tiap list $no = 1; //melakukan perluangan, ambil data yang berada di dalam tag channel di dalam item foreach($xml->channel->item as $data){ ?>


Script di atas digunakan untuk mengambil data dan menampilkannya. Salah satu cara yang bisa kita gunakan untuk mengambil isi dari halaman adalah menggunakan file_get_contents  karena datanya banyak dan berulang-ulang maka kita perlu menggunakan foreach 

Sekian tutorial cara membuat website pencarian trending dengan google trends di php. Semoga bermanfaat, kurang lebihnya saya mohon maaf, apabila ada yang ingin ditanyakan silahkan tinggalkan pertanyaan kalian di kolom komentar di bawah ini, dan mari kita diskusikan bersama. Happy Coding, sampai jumpa di tutorial pemrograman keren lainnya.


No comments

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik