Ketika teman-teman membaca judul diatas mungkin kamu akan bertanya-tanya bagaimana sih maksudnya ekstrak/extract link data dengan ajax dan jquery? Seperti Tumblr lagi. Bagi kamu yang sudah pernah menggunakan tumblr dan pernah mengirim link mungkin akan tahu bagaimana maksud judul tersebut. Jadi jika kamu masih bingung dengan judul tersebut, kamu bisa mencobanya di tumblr terlebih dahulu atau bisa locat ke paling bawah artikel untuk langsung mencoba demo sitenya.
Saya akan menjelaskan konsep ektrak link data tersebut. Sebenarnya hal ini bertujuan untuk mengambil judul dan konten artikel hanya melalui url yang di inputkan. Jadi ajax tersebut akan memecah data dari yang terkandung dari URL tersebut dan di masukan ke class atau id yang ditargetkan.
Baca Juga :
Trik ini saya dapatkan dari blog Srinivas Tamada, web programing dari India dan saya modifikasi lagi.
Ekstrak Link Data Dengan Ajax dan jQuery Seperti Tumblr
$(document).ready(function(){
$("#box").keyup(function(){
var content=$(this).val();
var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
//Mengorek dan menyaring URL dari regular expressions
var url= content.match(urlRegex);
if(url.length>0){
$("#linkbox").slideDown('show');
$("#linkbox").html("<img src='loading.gif'>");
$.get("urlcontent.php?url="+url,function(response) {
//untuk mendapatkan judul dari halaman website dari tag title
var title=(/<title>(.*?)<\/title>/m).exec(response)[1];
//untuk mendapatkan content dari halaman website dari tag p
var ptag=(/<p>(.*?)<\/p>/m).exec(response)[1];
$("#linkbox").slideUp('show');
/*untuk menaruh data yang diperoleh kedalah tag html yang mempunyai class 'title' dalam contoh ini saya menggunakan tag input*/
$('.title').attr('value',title);
/*untuk menaruh data yang diperoleh kedalah tag html yang mempunyai class 'content' dalam contoh ini saya menggunakan tag textare*/
$('.content').html(ptag);
});
}
return false();
});
});
Mungkin untuk penjelasan sudah saya masukan dalam tiap barisan code javascriptnya.
Berikut untuk kode phpnya yang dalam hal ini saya buat dengan nama file urlcontent.php agar sesuai dengan nama file yang ada pada code javascriptnya.
<?php
if($_GET['url']) {
$url=$_GET['url'];
echo file_get_contents($url);
}
?>
Coder tersebut bertujuan untuk membaca data yang berada pada url menjadi string.
Berikut full html code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ekstrak Link Data Dengan Ajax dan Jquery Seperti Facebook</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#box").keyup(function(){
var content=$(this).val();
var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
//Mengorek dan menyaring URL dari regular expressions
var url= content.match(urlRegex);
if(url.length>0){
$("#linkbox").slideDown('show');
$("#linkbox").html("<img src='loading.gif'>");
$.get("urlcontent.php?url="+url,function(response) {
//untuk mendapatkan judul dari halaman website dari tag title
var title=(/<title>(.*?)<\/title>/m).exec(response)[1];
//untuk mendapatkan content dari halaman website dari tag p
var ptag=(/<p>(.*?)<\/p>/m).exec(response)[1];
$("#linkbox").slideUp('show');
/*untuk menaruh data yang diperoleh kedalah tag html yang mempunyai class 'title' dalam contoh ini saya menggunakan tag input*/
$('.title').attr('value',title);
/*untuk menaruh data yang diperoleh kedalah tag html yang mempunyai class 'content' dalam contoh ini saya menggunakan tag textare*/
$('.content').html(ptag);
});
}
return false();
});
});
</script>
<style type="text/css">
body {
font-family:Georgia, "Times New Roman", Times, serif;
}
#box, .title {
width:450px;
height:10px;
color:#999;
border:solid 1px #dedede;
font-size:14px;
padding:7px;
margin-bottom:6px;
}
.content {
width:450px;
height:150px;
color:#999;
border:solid 1px #dedede;
font-size:14px;
padding:7px;
margin-bottom:6px;
}
.img {
float:left;
width:150px;
margin-right:10px;
text-align:center;
}
#linkbox {
height:50px;
padding:5px;
display:none;
text-align:center;
}
</style>
</head>
<body>
<h3>Tutorial link <a href="">Click Here</a></h3>
<div style="margin:10px auto; padding:10px; width:450px">
<h1>Ekstrak Link Data Dengan Ajax dan Jquery Seperti Facebook</h1>
<div id="linkbox">
</div>
<input id="box" type="text" value="Url"
onblur="if (this.value == '') {this.value = 'Url';}"
onfocus="if (this.value == 'Url') {this.value = '';}" />
<input class="title" type="text" value="Title"
onblur="if (this.value == '') {this.value = 'Title';}"
onfocus="if (this.value == 'Title') {this.value = '';}" />
<textarea class="content"></textarea>
<div style="color:#999;">Contoh URL: https://www.pindexain.com</div>
</div>
</body>
</html>
