Ekstrak Konten menggunakan PHP dan Pratinjau seperti Facebook

Saat berbagi URL, jika klien secara otomatis mengekstrak judul dan gambar untuk mempostingnya sebagai pratinjau, maka itu akan menyenangkan. Di banyak situs media sosial seperti Facebook dan LinkedIn kita dapat melihat fitur itu. Mereka mengekstrak judul dan informasi meta pada tautan berbagi. Dalam tutorial ini, kita akan mengekstrak judul halaman, deskripsi meta dan gambar dari URL yang dibagikan oleh pengguna.

Dalam contoh ini, saya menggunakan PHP dan curl untuk mengekstrak konten dan gambar dari URL yang diberikan. Ketika pengguna membagikan tautan ke kotak teks masukan yang diberikan, panggilan AJAX akan dikirim untuk laman PHP guna memproses permintaan CURL untuk mengekstraksi data jarak jauh. Dalam tutorial sebelumnya, kami telah melihat cara mengekstrak konten dari URL dan mengurai menggunakan Parser HTML Sederhana DOM . Setelah mendapatkan data jarak jauh, kode PHP menghasilkan JSON dengan judul, deskripsi, dan data gambar dan menanggapi panggilan AJAX untuk menampilkan pratinjau di browser.

jQuery AJAX panggilan untuk memulai CURL

Kode berikut menunjukkan skrip jQuery AJAX untuk meminta data jarak jauh untuk URL masukan yang diberikan. Ketika pengguna menyisipkan URL ke dalam kolom input, permintaan AJAX ini akan dikirim ke file get-data.php .Dalam file ini, saya memproses ekstraksi konten jarak jauh melalui CURL dan mengembalikan konten ini sebagai respons AJAX.

Setelah mendapatkan data dari URL, itu akan dipratinjau di browser. Jika URL berisi lebih banyak gambar maka gambar ini akan terlihat dengan mengklik navigasi sebelumnya dan berikutnya yang ditunjukkan di bawah pratinjau gambar.

  <jenis skrip = "teks / javascript">
 $ (document) .ready (function () {
     var image_src;
     $ ('# remote-url'). on ("keyup", function () {  
     $ ("# output") .html ("");
     $ ("# loader"). show (); 
    
     var remote_url = $ (this) .val ();
        var image_html = '';
                
     $ .ajax ({
                     url: "get-data.php",
                     ketik: "POST",
                     data: {'url': remote_url},
                     tipe data: "json",
                     success: function (data, status) {
                          image_src = data.image_src;
              total_images = 0;
                             if (data.image_src) {
                                 total_images = parseInt (data.image_src.length-1);
                                 current_image_position = total_images;
                 
                      if (total_images> = 0) {
                       image_html = '<div class = "gambar-pratinjau" id = "gambar-pratinjau"> <img src = "' + data.image_src [current_image_position] + '"> </ div>' +
                                         '<div class = "prev-next-navigation"> <span class = "prev-img" id = "prev-img"> </ span> <span class = "next-img" id = "next-img" > </ span> </ div> ';
                      }
                             }
                         
                          cotent_html = '<div class = "text-data"> <a class="page-title" href="'+remote_url+'" target="_blank">' + data.title + '</a> <div>' + data.pengguna + '</ div>';
              var responseHTML = image_html + cotent_html;
             
              $ ("# output") .html (responseHTML) .show (); 
              $ ("# loader"). hide ();
                     },
                     error: function () {alert ("Masalah dalam mengekstraksi data dari remote URL");}
                 });
  });


  $ ("body"). pada ("klik", "# prev-img", function (e) {  
   if (current_image_position> 0) 
   {
    current_image_position--;
    $ ("# image-preview") .html ('<img src = "' + image_src [current_image_position] + '">');
   }
  });
 
  $ ("body"). pada ("klik", "# next-img", function (e) {  
   if (current_image_position <total_images)
   {
    current_image_position ++;
    $ ("# image-preview") .html ('<img src = "' + image_src [current_image_position] + '">');
   }
  });
 });
 </ script>

Permintaan CURL PHP untuk Mengeluarkan Judul dan Meta Dari URL

Kode PHP berikut menunjukkan cara mendapatkan judul halaman dan detail meta lainnya dengan menggunakan CURL. Dalam kode ini, saya menginisialisasi objek CURL dan mengatur URL untuk diakses dengan referensi objek ini. Skrip CURL akan mengembalikan konten HTML dari halaman jauh.

Setelah mendapatkan konten HTML, kita perlu mengurai HTML dengan merujuk judul , nama meta dan img tag untuk mendapatkan judul halaman, deskripsi dan URL gambar, masing-masing. Data ini dikodekan ke dalam array JSON dan dikembalikan sebagai respons AJAX.

  <? php
 if (isset ($ _ POST ["url"]) && filter_var ($ _ POST ["url"], FILTER_VALIDATE_URL)) {
    
     // Ekstrak HTML menggunakan curl
     $ ch = curl_init ();
    
     curl_setopt ($ ch, CURLOPT_HEADER, 0);
     curl_setopt ($ ch, CURLOPT_RETURNTRANSFER, 1);
     curl_setopt ($ ch, CURLOPT_URL, $ _POST ["url"]);
     curl_setopt ($ ch, CURLOPT_FOLLOWLOCATION, 1);
    
     $ data = curl_exec ($ ch);
     curl_close ($ ch);
    
     // Memuat HTML ke Objek DOM
     $ dom = new DOMDocument ();
     @ $ dom-> loadHTML ($ data);
    
     // Pilah DOM untuk mendapatkan Judul
     $ nodes = $ dom-> getElementsByTagName ('title');
     $ title = $ nodes-> item (0) -> nodeValue;
    
     // Parse DOM untuk mendapatkan Meta Description
     $ metas = $ dom-> getElementsByTagName ('meta');
     $ body = "";
     untuk ($ i = 0; $ i <$ metas-> length; $ i ++) {
         $ meta = $ metas-> item ($ i);
         if ($ meta-> getAttribute ('name') == 'description') {
             $ body = $ meta-> getAttribute ('konten');
         }
     }
    
     // Buat DOM untuk mendapatkan Gambar
     $ image_urls = array ();
     $ images = $ dom-> getElementsByTagName ('img');
     
      untuk ($ i = 0; $ i <$ images-> length; $ i ++) {
          $ image = $ images-> item ($ i);
          $ src = $ image-> getAttribute ('src');
         
          if (filter_var ($ src, FILTER_VALIDATE_URL)) {
              $ image_src [] = $ src;
          }
      }
    
     $ output = array (
         'title' => $ title,
         'image_src' => $ image_src,
         'body' => $ body
     );
     echo json_encode ($ output); 
 }
 ?>