PHPTutorial

Tutorial Membuat Instagram Downloader dengan PHP dan Bootstrap

Tutorial Membuat Instagram Downloader dengan PHP dan Bootstrap
Tutorial Membuat Instagram Downloader dengan PHP dan Bootstrap

Afid Arifin – Pernahkah Anda terlintas ingin membuat script php untuk mendownload konten dari Instagram atau Instagram downloader? Jika iya, Anda kesasar membaca artikel ini merupakan pilihan tepat.

Karena, dalam artikel kali ini saya akan memberikan tutorial singkat mengenai cara membuat script php untuk mendownload konten dari Instagram.

Konten yang dimaksud adalah berupa video dan foto dari Instagram yang 100% sepenuhnya dapat digunakan pada script ini. Karena, saya membuatnya juga mengambil API Instagram langsung.

Baiklah, tanpa berpikir lama lagi, silahkan Anda ikuti langkah – langkahnya secara urut berikut ini.

Membuat Instagram Downloader dengan PHP dan Bootstrap

Baiklah, tanpa lama-lama lagi langsung saja ikuti langkah membuat instagram downloader berikut ini.

1. Langkah Pertama

Buatlah file baru dengan nama sesuka hati Anda, sedangkan dalam hal ini sebagai contoh Anda telah membuat file index.html lalu isikan file tersebut dengan script berikut ini.

<!DOCTYPE html>
  <html lang="id-ID">
    <head>
      <title>
        Instagram Downloader | Afid Arifin
      </title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="utf-8">
      <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
      <style>
        .thumb {
          margin-top: 15px;
          margin-bottom: 15px;
        }
      </style>
      <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    </head>
  <body>

  <!-- Content Body -->
  <div class="container">
      <div class="row">
        <div class="col-md-12">
          <center>
            <h1 style="margin-top: 12px;">
              Tools Instagram Downloader
            </h1>
          </center>
        </div>
      </div>
      <div class="row" style="margin-top: 15px;">
        <div class="col-md-6">
          <div class="thumb" style="border: none;">
            <a class="thumb" href="#">
              <img class="img-thumbnail" src="https://asset.kompas.com/crops/UuADTgF8vBA2xEDwA20yAjF5VV4=/0x0:1000x667/750x500/data/photo/2017/04/21/3305124549.jpg">
            </a>
          </div> 
        </div>
        <div class="col-md-6 thumb">
          <div class="card">
            <div class="card-header bg-secondary text-white">
              <h3>
                Instagram Downloader
              </h3>
            </div>
            <div class="card-body">
              <form method="POST">
                <div class="form-group">
                  <p class="text-muted text-center" style="margin-top: 0px;">
                    Gunakan tools Instagram downloader gratis spesial untuk Anda. Mendukung video dan gambar dari Instagram. Hasil download Anda tetap aman dan tidak kami simpan di server.
                  </p>
                  <label>
                   <b>URL Anda:</b>
                  </label>
                  <input type="url" name="url" class="form-control form-control-lg" placeholder="Masukkan URL Anda...">
                  <small class="form-text text-muted">
                    Perhatian! URL selain dari Instagram akan ditolak!
                  </small>
                </div>
                <center>
                  <button type="submit" name="submit" class="btn btn-primary btn-lg" style="width: 49%;">
                    Download
                  </button>
                  <button type="reset" class="btn btn-danger btn-lg" style="width: 49%;">
                    Bersihkan
                  </button>
                </center>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 offset-md-3">
          <center>
            &copy; 2020 - <a href="https://afidarifin.com" rel="dofollow">Afid Arifin</a>
            <p class="text-muted">
              Terima kasih kepada <a href="https://developers.facebook.com/docs/instagram/embedding">API Instagram Embed</a>.
            </p>
            <p class="text-muted">
              Semua hak cipta dilindungi oleh Tuhan. Barangsiapa yang menjual source code ini maka resiko ditanggung Anda kelak di Akhirat.
            </p>
          </center>
        </div>
      </div>
    </div>
  </body>
</html>

Pada langkah pertama, kita telah membuat bagian tampilan dari program sederhana kita ini. Selanjutnya, kita masuk ke langkah kedua.

2. Langkah Kedua

Karena program Instagram downloader menggunakan API Instagram maka kita membuat alat khusus untuk mengambil datanya. Mari kita buat file baru dengan nama curl.php untuk membuat fungsi CURL PHP.

<?php
  function curl($url, $post = null) {

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
        
    if($post != null) {
      curl_setopt($ch, CURLOPT_POST, true);
      curl_setopt($ch, CURLOPT_POSTFIELDS, $post);
    }

    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        
    $exec = curl_exec($ch);
    curl_close($ch);

    return $exec;
  }
?>

Script di atas akan kita gunakan untuk mengambil data dari API Instagram. Selanjutnya, kita akan membuat file execute-nya. Silahkan ikuti langkah ketiga berikut ini.

3. Langkah Ketiga

Silahkan buat file baru dengan nama execute.php lalu copy paste-kan kode berikut ini.

<?php
  if(isset($_POST['submit'])) {
    
    // Data required
    $url = strip_tags(filter_var($_POST['url'], FILTER_SANITIZE_URL));
        
    if(empty($url)) {
      
      // Empty URL
      echo "<script>
        $(document).ready(function() {
          Swal.fire({
            position: 'top-center',
            icon: 'warning',
            title: 'Silahkan masukkan URL!',
            showConfirmButton: false,
            timer: 3000
          });
        });
      </script>";
    } else {

      // Execute
      //result using json from API INSTAGRAM
      $fetch = curl('https://api.instagram.com/oembed/?url='.$url.'');
      $json = json_decode($fetch);

      // Successfully
      echo "<script>
        $(document).ready(function() {
          Swal.fire({
            title: 'Berhasil!',
            html: 'Anda baru saja mendownload konten milik <b>@".$json->author_name."</b>. Klik tombol Download di bawah!',
            imageUrl: '".$json->thumbnail_url."',
            imageWidth: 400,
            imageHeight: 200,
            imageAlt: 'Courtesy by ".$json->thumbnail_url."',
            confirmButtonText: 'Download',
          }).then(function() {
            window.location = '".$json->thumbnail_url."';
          });
        });
      </script>";
    }
  }
?>

Kode di atas berfungsi untuk memvalidasi inputan dari pengguna. Untuk cara lebih ringkas lagi, Anda dapat menggunakan seluruh program dari langkah di atas dalam satu file seperti berikut.

<!DOCTYPE html>
  <html lang="id-ID">
    <head>
      <title>
        Instagram Downloader | Afid Arifin
      </title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="utf-8">
      <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
      <style>
        .thumb {
          margin-top: 15px;
          margin-bottom: 15px;
        }
      </style>
      <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    </head>
  <body>
  
    <!-- Source Code To Get Data URL With CURL -->
    <?php
      function curl($url, $post = null) {

        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $url);
        
        if($post != null) {
          curl_setopt($ch, CURLOPT_POST, true);
          curl_setopt($ch, CURLOPT_POSTFIELDS, $post);
        }

        curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        
        $exec = curl_exec($ch);
        curl_close($ch);

        return $exec;
      }
    ?>

    <!-- Executed Data From Form -->
    <?php
      if(isset($_POST['submit'])) {
        
        // Data required
        $url = strip_tags(filter_var($_POST['url'], FILTER_SANITIZE_URL));
        
        if(empty($url)) {

          // Empty URL
          echo "<script>
            $(document).ready(function() {
              Swal.fire({
                position: 'top-center',
                icon: 'warning',
                title: 'Silahkan masukkan URL!',
                showConfirmButton: false,
                timer: 3000
              });
            });
          </script>";
        } else {

          // Execute
          //result using json from API INSTAGRAM
          $fetch = curl('https://api.instagram.com/oembed/?url='.$url.'');
          $json = json_decode($fetch);

          // Successfully
          echo "<script>
            $(document).ready(function() {
              Swal.fire({
                title: 'Berhasil!',
                html: 'Anda baru saja mendownload konten milik <b>@".$json->author_name."</b>. Klik tombol Download di bawah!',
                imageUrl: '".$json->thumbnail_url."',
                imageWidth: 400,
                imageHeight: 200,
                imageAlt: 'Courtesy by ".$json->thumbnail_url."',
                confirmButtonText: 'Download',
              }).then(function() {
                window.location = '".$json->thumbnail_url."';
              });
            });
          </script>";
        }
      }
    ?>

    <!-- Content Body -->
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <center>
            <h1 style="margin-top: 12px;">
              Tools Instagram Downloader
            </h1>
          </center>
        </div>
      </div>
      <div class="row" style="margin-top: 15px;">
        <div class="col-md-6">
          <div class="thumb" style="border: none;">
            <a class="thumb" href="#">
              <img class="img-thumbnail" src="https://asset.kompas.com/crops/UuADTgF8vBA2xEDwA20yAjF5VV4=/0x0:1000x667/750x500/data/photo/2017/04/21/3305124549.jpg">
            </a>
          </div> 
        </div>
        <div class="col-md-6 thumb">
          <div class="card">
            <div class="card-header bg-secondary text-white">
              <h3>
                Instagram Downloader
              </h3>
            </div>
            <div class="card-body">
              <form method="POST">
                <div class="form-group">
                  <p class="text-muted text-center" style="margin-top: 0px;">
                    Gunakan tools Instagram downloader gratis spesial untuk Anda. Mendukung video dan gambar dari Instagram. Hasil download Anda tetap aman dan tidak kami simpan di server.
                  </p>
                  <label>
                   <b>URL Anda:</b>
                  </label>
                  <input type="url" name="url" class="form-control form-control-lg" placeholder="Masukkan URL Anda...">
                  <small class="form-text text-muted">
                    Perhatian! URL selain dari Instagram akan ditolak!
                  </small>
                </div>
                <center>
                  <button type="submit" name="submit" class="btn btn-primary btn-lg" style="width: 49%;">
                    Download
                  </button>
                  <button type="reset" class="btn btn-danger btn-lg" style="width: 49%;">
                    Bersihkan
                  </button>
                </center>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 offset-md-3">
          <center>
            &copy; 2020 - <a href="https://afidarifin.com" rel="dofollow">Afid Arifin</a>
            <p class="text-muted">
              Terima kasih kepada <a href="https://developers.facebook.com/docs/instagram/embedding">API Instagram Embed</a>.
            </p>
            <p class="text-muted">
              Semua hak cipta dilindungi oleh Tuhan. Barangsiapa yang menjual source code ini maka resiko ditanggung Anda kelak di Akhirat.
            </p>
          </center>
        </div>
      </div>
    </div>
  </body>
</html>

Kesimpulan

Bagaimana? mudah bukan cara membuatnya? hanya butuh 162 baris kode maka Anda bisa membuat sesuatu yang menarik buat orang lain. Lalu, di mana saya dapat melihat demonya? Silahkan Anda lihat pada gambar berikut ini.

Tutorial Membuat Instagram Downloader dengan PHP dan Bootstrap

Tutorial Membuat Instagram Downloader dengan PHP dan Bootstrap

Sekian dari saya, semoga bermanfaat. Anda bebas menggunakan source code Instagram downloader di atas dengan catatan tidak menjualnya ke orang lain. Kenapa? karena saya sharenya aja secara gratis kepada Anda :).

You may also like

Leave a reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *