Study Case : Membuat Website Berita dengan menggunakan NewsAPI dan Bootstrap

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
    $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);
    $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'];
    $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);
    $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 :)




    No comments