Extrak informasi dari sebuah url dengan PHP dan jQuery

 Author : hadinug, 28 March, 2014, Komentar

Kita mungkin sering berbagi sebuah link website di halaman facebook. Dan coba kita perhatikan, ketika kita mengetik sebuah link pada kolom komentar atau status facebook, maka facebook akan secara otomatis mengextract informasi tentang link url yang kita bagikan.


Terinspirasi dari facebook, penulis mencoba berbagi sebuah pengalaman, bagaimana cara mengextract url yang kita tuliskan pada textarea dan menampiklan informasi seperti yang facebook lakukan.



Langsung saja agar tidak banyak berbasa-basi, kita masuk ke script jQuery


$(document).ready(function() {
    var getUrl = $('#get_url'); //url yang di extract dari textarea
    getUrl.keyup(function() {
        //matac url
        var match_url = /b(https?)://([-A-Z0-9.]+)(/[-A-Z0-9+&@#/%=~_|!:,.;]*)?(?[A-Z0-9+&@#/%=~_|!:,.;]*)?/i;
        if (match_url.test(getUrl.val())) {
            $("#results").hide();
            $("#loading_indicator").show(); //menampilkan loading image
            var extracted_url = getUrl.val().match(match_url)[0]; //mengektrak url pertama di textarea
//lakukan proses ajax dan kirim ke process.php
            $.post('process.php', {'url': extracted_url}, function(data) {
                extracted_images = data.images;
                total_images = parseInt(data.images.length - 1);
                img_arr_pos = total_images;
                if (total_images > 0) {
                    inc_image = '<div class="extracted_thumb" id="extracted_thumb"><img src="' + data.images[img_arr_pos] + '" width="100" height="100"></div>';
                } else {
                    inc_image = '';
                }
                //menampung kontent
                var content = '<div class="extracted_url">' + inc_image + '<div class="extracted_content"><h4><a href="' + extracted_url + '" target="_blank">' + data.title + '</a></h4><p>' + data.content + '</p><div class="thumb_sel"><span class="prev_thumb" id="thumb_prev">&nbsp;</span><span class="next_thumb" id="thumb_next">&nbsp;</span> </div><span class="small_text" id="total_imgs">' + img_arr_pos + ' of ' + total_images + '</span><span class="small_text">&nbsp;&nbsp;Choose a Thumbnail</span></div></div>';
                //menampilkan hasil
                $("#results").html(content); //append received data into the element
                $("#results").slideDown(); //show results with slide down effect
                $("#loading_indicator").hide(); //hide loading indicator image
            }, 'json');
        }
    });

    //user clicks previous thumbail
    $("body").on("click", "#thumb_prev", function(e) {
        if (img_arr_pos > 0)
        {
            img_arr_pos--; //thmubnail array posisi decrement
//replace dengan new thumbnail
            $("#extracted_thumb").html('<img src="' + extracted_images[img_arr_pos] + '" width="100" height="100">');
//menampilkan posisi thumbnail
            $("#total_imgs").html((img_arr_pos) + ' of ' + total_images);
        }
    });
    //user click next thumbail
    $("body").on("click", "#thumb_next", function(e) {
        if (img_arr_pos < total_images)
        {
            img_arr_pos++; //thmubnail array posisi increment
//replace dengan new thumbnail
            $("#extracted_thumb").html('<img src="' + extracted_images[img_arr_pos] + '" width="100" height="100">');
//replace thmubnail position text
            $("#total_imgs").html((img_arr_pos) + ' of ' + total_images);
        }
    });
});


Kemudian pada PHP script untuk process.php


<?php

if (isset($_POST["url"])) {
    $get_url = $_POST["url"];
    // get schema url
    $theurl = parse_url($get_url);
    //Include PHP HTML DOM parser (requires PHP 5 +)
    include_once("include/simple_html_dom.inc.php");

    //get URL content
    $get_content = file_get_html($get_url);

    //Get Page Title 
    foreach ($get_content->find('title') as $element) {
        $page_title = $element->plaintext;
    }

    //Get Body Text
    foreach ($get_content->find('body') as $element) {
        $page_body = trim($element->plaintext);
        $pos = strpos($page_body, ' ', 200); //Find the numeric position to substract
        $page_body = substr($page_body, 0, $pos); //shorten text to 200 chars
    }

    $image_urls = array();

    //get all images URLs in the content
    foreach ($get_content->find('img') as $element) {
        /* check image URL is valid and name isn't blank.gif/blank.png etc..
          you can also use other methods to check if image really exist */
        if (!preg_match('/blank.(.*)/i', $element->src) && filter_var($element->src, FILTER_VALIDATE_URL)) {
            $image_urls[] = $element->src;
        } else {
            $image_urls[] = $theurl['scheme'] . '://' . $theurl['host'] . $element->src;
        }
    }

    //prepare for JSON 
    $output = array('title' => $page_title, 'images' => $image_urls, 'content' => $page_body);
    echo json_encode($output); //output JSON data
}
?>


Cukup dengan php dan jQuery kita bisa membuat aplikasi pengextrak informasi dari sebuah url. Silahkan klik demo aplikasi pengektrak untuk melihat hasil demonya dan untuk download disini


 
Bagikan halaman ke sosial media
 
Tags :   jQuery    php       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda