Study Case : Membuat Website Berita dengan menggunakan NewsAPI dan Bootstrap

8:41:00 PM 21 Comments
Share:
Study Case : Membuat Website Berita dengan menggunakan NewsAPI dan Bootstrap. Assalamualaikum, halo kembali lagi di sahretech, kali ini saya ingin membagikan tutorial membuat News Aggregation web atau web kumpulan berita dengan menggunakan Newsapi. Penasaran bagaimana cara bikinnya ?. Ayo ikuti tutorialnya di sahretech.

Kenalan dulu dengan Newsapi

Newsapi adalah API sederhana dan sangat mudah digunakan, api ini berisi berita utama dan terkini yang didapatkan lebih dari 30.000 sumber berita dan blog dari seluruh dunia. Kalian dapat mencari berita berdasarkan kategori berita seperti : bisnis, olahraga, sains, teknologi dan lainnya. Atau kalian juga dapat mencari berita berdasarkan negara tertentu, keren!.

Dengan menggunakan Newsapi kalian nggak perlu lagi database dan kalian nggak perlu lagi cari-cari berita dari website atau blog, karena semuanya sudah disediakan di api ini. Newsapi ini menyediakan berita dari berbagai situs terkenal, untuk kategori Indonesia ada detik, kompas, cnn, cnbc, merdeka dll.







Cara Membuat Website News Aggregation dengan Menggunakan NewsAPI

  • 1. Lakukan pendaftaran di situs newsapi.org. 
  • 2. Setelah berhasil mendaftar, masuk ke akun kalian masing-masing klik tombol berwarna biru yang bertuliskan email kalian di pojok sebelah kanan. Lalu salin API key yang ada
dashboardnewsapi.org
dashboard newsapi.org

  • 3. Masuk ke folder htdocs kalian masing-masing, buat folder baru dengan nama newsapi, lalu buat file baru dengan nama index.php
  • 4. Buat tampilannya terlebih dahulu, untuk mempermudah pembuatan tampilan saya disini menggunakan bootstrap. Copy paste script yang ada di bawah ini

<!--bagian ini akan diisi dengan fungsi curl php-->
<html>
    <head>
        <!--integrasi dengan bootstrap 4, copy source css dan jsnya untuk mendapatkan tampilan bootstrap-->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </head>
    <body>
        <br>
        <div class="container">
            <!--bagian menu-->
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" href="index.php">News Agregation</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <!--item-item menu-->
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="index.php">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="kategori.php?kategori=business">Bisnis</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="kategori.php?kategori=entertaniment">Entertaiment</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="kategori.php?kategori=health">Kesehatan</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="kategori.php?kategori=science">Sains</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="kategori.php?kategori=sports">Olahraga</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="kategori.php?kategori=technology">Teknologi</a>
                        </li>
                    </ul>
                </div>
            </nav>
            <div class="row">
            
            <!--berita akan ditampilkan disini menggunakan card bootstrap-->

            </div>
        </div>
    </body>
</html>

  • 5. Lalu tambahkan fungsi php untuk mengambil data dari newsapi, letakkan script php di bawah ini pada bagian palng atas file dan jangan lupa untuk mengisi your api key dengan apikey yang telah kalian dapatkan di situsnya tadi.

<?php
    $agent = 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)';
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, "https://newsapi.org/v2/top-headlines?country=id&apiKey=your api key");
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($curl, CURLOPT_USERAGENT, $agent);
    $output = curl_exec($curl);
    curl_close($curl);

    $data = json_decode($output, true);
?>

  • 6. Lalu tambahkan script di bawah ini tepat di bawah tulisan <!--berita akan ditampilkan disini menggunakan card bootstrap-->
<?php foreach($data['articles'] as $d){ ?>
                <div class="col-md-4">
                <br>
                    <div class="card">
                        <img src="<?php echo $d['urlToImage']; ?>" height="200px" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h6 class="card-title"><?php echo $d['title']; ?></h6>
                            <p class="card-text"><?php echo $d['description']; ?></p>
                            <a href="<?php echo $d['url']; ?>" class="btn btn-primary">Lihat Detail</a>
                        </div>
                        <div class="card-footer">
                            <small class="text-muted"><?php echo $d['publishedAt']; ?></small>
                        </div>
                    </div>
                    
                </div>
            <?php } ?>

  • 7. Langkah terakhir, buat file baru dengan nama kategori.php lalu isikan file tersebut dengan script di bawah ini.
<?php
    $kategori = $_GET['kategori'];
    $agent = 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)';
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, "https://newsapi.org/v2/top-headlines?country=id&category=".$kategori."&apiKey=your api key ");
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($curl, CURLOPT_USERAGENT, $agent);
    $output = curl_exec($curl);
    curl_close($curl);

    $data = json_decode($output, true);
?>
<html>
    <head>
        <!--integrasi dengan bootstrap 4, copy source css dan jsnya untuk mendapatkan tampilan bootstrap-->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </head>
    <body>
        <br>
        <div class="container">
            <!--bagian menu-->
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" href="index.php">News Agregation</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <!--item-item menu-->
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="index.php">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="kategori.php?kategori=business">Bisnis</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="kategori.php?kategori=entertainment">Entertaiment</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="kategori.php?kategori=health">Kesehatan</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="kategori.php?kategori=science">Sains</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="kategori.php?kategori=sports">Olahraga</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="kategori.php?kategori=technology">Teknologi</a>
                        </li>
                    </ul>
                </div>
            </nav>
            <div class="row">
            
            <!--berita akan ditampilkan disini menggunakan card bootstrap-->
            <?php foreach($data['articles'] as $d){ ?>
                
                <div class="col-md-4">
                <br>
                    <div class="card">
                        <img src="<?php echo $d['urlToImage']; ?>" height="200px" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h6 class="card-title"><?php echo $d['title']; ?></h6>
                            <p class="card-text"><?php echo $d['description']; ?></p>
                            <a href="<?php echo $d['url']; ?>" class="btn btn-primary">Lihat Detail</a>
                        </div>
                        <div class="card-footer">
                            <small class="text-muted"><?php echo $d['publishedAt']; ?></small>
                        </div>
                    </div>
                    
                </div>
                <?php } ?>

            </div>
        </div>
    </body>
</html>

  • Untuk file index.php dan file kategori.php isinya hampir sama, perbedaanya adalah request api yang kita isikan, untuk halaman index berita akan ditampilkan bebas sedangkan pada halaman kategori berita akan ditampilkan sesuai dengan kategori yang dipilih. Kalian bisa lihat perbedaannya di bawah ini.
Perbedaan index.php dan kategori.php terletak pada request yang diminta

  • 8. save, lalu hidupkan xampp kalian lalu buka dibrowser dengan nama localhost/newsapi/index.php. Maka hasilnya akan tampak seperti gambar di bawah ini.
    hasil berita dengan newsapi - sahretech
    Hasil berita yang ditampilkan dengan  menggunakan news api


    Bagaimana ?. Pasti kalian langsung speachless liatnya. cuma butuh kodingan sedikit kita langsung bisa menyalin berita dan artikel dari portal berita terkenal. Ada data gambar, judul, isi berita, pembuat, tanggal terbit, dan kategori yang bisa kalian improvisasi lagi dengan tampilan yang lebih cantik.

    Satu hal yang sangat disayangkan, penggunaan apinya terbatas hanya 50 request perhari dan setiap berita tidak ditampilkan sepenuhnya. Jika kalian berniat untuk membuat news aggregation  (kumpulan berita) dan untuk dikomersialkan maka kalian bisa mencoba business plan atau enterprise plan.  


    Sekian tutorial Study Case : Membuat Website Berita dengan menggunakan NewsAPI dan Bootstrap. Semoga bermanfaat bagi kita semua, apabila ada yang ingin ditanyakan atau ada kritik dan saran, silahkan tinggalkan di kolom komentar di bawah ini. Happy Coding :)




    Tags
    Share:

    21 comments:

    1. gebyar89April 26, 2020 at 1:49 AM

      Kalau fotonya suka ga muncul kenapa ya? (Url to image)

      ReplyDelete
      Replies
      1. sahretechApril 26, 2020 at 2:45 AM

        periksa kembali url gambarnya, biasanya ada yang salah

        Delete
    2. UnknownNovember 7, 2020 at 11:20 AM

      ada pesan errornya 😅
      Warning
      : Invalid argument supplied for foreach() in

      ReplyDelete
      Replies
      1. sahretechNovember 9, 2020 at 2:58 AM

        di bawah script ini $data = json_decode($output, true);, tulis:

        var_dump($data);
        die;

        kalo muncul null, berarti ada yang salah dengan pemanggilan apinya,
        1. pastikan alamat url api benar
        2. pastikan kamu mengisi apikey sesuai dengan yang diberikan oleh si newsapi-nya

        Delete
      2. Aiz FarizsMarch 30, 2021 at 9:31 PM

        Tetep gak bisa pake api 22553d6a8d8c463bbafab2f5360f5e36

        Delete
      3. sahretechMarch 30, 2021 at 11:26 PM

        Errornya apa mas?, soalnya bisa banyak penyebab.

        Delete
    3. AnarchyMay 31, 2021 at 8:27 AM

      This comment has been removed by the author.

      ReplyDelete
      Replies
      1. sahretechMay 31, 2021 at 8:29 PM

        saya coba barusan pesannya = "Your API key is invalid or incorrect. Check your key, or go to https://newsapi.org to create a free API key." jadi pastiin apikeynya bener ya mas. terus newsapi ini terbatas hanya 50 request perhari

        Delete
      2. AnarchyJune 2, 2021 at 7:37 AM

        curl_setopt($curl, CURLOPT_URL, "https://newsapi.org/v2/top-headlines?country=id&apiKey=02474271621e45fa83d025bcc3956c3b");

        apakah syntax saya sudah benar untuk memasukan kode tersebut? (seperti spasi)

        Delete
      3. sahretechJune 6, 2021 at 6:26 AM

        Sudah benar mas, klo masih salah coba dilihat errornya apa, biar tau masalahnya dimana...

        Delete
    4. AnarchyMay 31, 2021 at 9:26 AM

      This comment has been removed by the author.

      ReplyDelete
      Replies
      1. sahretechMay 31, 2021 at 8:39 PM

        saya coba pake apikey saya berhasil, kemungkinan errornya terjadi karena sudah request lebih dari 100x. Saat terjadi error request tetap dihitung.

        Delete
    5. UnknownDecember 29, 2021 at 6:20 PM

      cara nambahin gambar atau tulisan kyk di foto itu gmana min

      ReplyDelete
      Replies
      1. sahretechDecember 29, 2021 at 7:56 PM

        img src="<?php echo $d['urlToIma... Dan seterusnya.

        Klo ngikutin d atas insyaAllah bisa

        Delete
    6. AKHMAD ROSYADADecember 25, 2022 at 4:23 AM


      Notice
      : Undefined index: articles in
      C:\xampp\htdocs\newsapi\index.php
      on line
      59


      Warning
      : Invalid argument supplied for foreach() in
      C:\xampp\htdocs\newsapi\index.php
      on line
      59

      solusi min

      ReplyDelete
      Replies
      1. sahretechDecember 25, 2022 at 3:38 PM

        Terjadi error pada baris 59, tepatnya pada variable $data['articles']. Masnya bisa mengecek langsung dengan membuka link https://newsapi.org/v2/top-headlines?country=id&apiKey=your api key di browser. Pastikan masnya mengganti your api key dengan key yang telah di dapatkan dari pendaftaran di newsapi. Jika datanya muncul harusnya tidak terjadi error. Terima kasih semoga membantu :)

        Delete
    7. AKHMAD ROSYADADecember 27, 2022 at 8:28 PM

      "https://newsapi.org/v2/top-headlines?country=id&apiKey=f5dd607375a24836915929656989ac14"); seperti ini kan masih tidak bisa

      list nomor 59 index


      solusinya gimana mas?

      ReplyDelete
    8. RantauSimatupang.comJune 24, 2023 at 5:12 AM

      Gan, kalau mau kontak admin web ini kemana ya?

      ReplyDelete
    9. Abdul Halim FikriJanuary 2, 2024 at 8:22 PM

      Slamat pagi mas, aku newbi, mohon bantuan ada arror :
      Notice: Trying to access array offset on value of type null in C:\wamp64\www\newsapi\index.php on line 62


      ReplyDelete
    10. Abdul Halim FikriJanuary 2, 2024 at 8:28 PM

      Keluar pesan erorr : Notice: Trying to access array offset on value of type null in line 62

      Mohon pencerahannya..

      ReplyDelete

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

    Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi

    Subscribe to: Post Comments ( Atom )