PHP:Ajax:URL Kısaltma Uygulaması goo.gl, is.gd, tinyurl

Serpito demo uygulamalarına bir yenisini daha ekliyoruz. Ajax teknolojisi kullanılarak, popüler url servislerinin api  bağlantıları ile URL Kısaltma uygulaması yapıyoruz. Bu uygulamada database bağlantısına gerek yok.

Goo.gl , is.gd , tinyurl.com url kısaltma servislerinin apilerini kullanarak sade bir url kısaltma uygulamasını izah edelim.  Ajax uygulamalarında standart kullandığım arayüz ve dosya yapısı aynı. Bu yüzden, kısaca, ajax ile bağlantı kurulan post.php dosya kodlarını paylaşarak başlayalım; 

post.php

<?php
ob_start();
session_start();
require_once('func.php');
$url=$_POST&#91;'url'&#93;;
$provider=$_POST&#91;'provider'&#93;;

if(valid_url($url)){

if($provider == 'googl'){

$json_string = file_get_contents('http://urltinyfy.appspot.com/googl?url=' . urlencode($url));
$json = json_decode($json_string, true);

$short=$json&#91;'short_url'&#93;;

?>
<div align="center" style="height:45px; padding:15px; font-size:18px;"><a style="font-size:24px;" href="<?=$short?>" target="_blank"><?=$short?></a></div>
<?php

}else if($provider == 'isgd'){
$json_string = file_get_contents('http://is.gd/create.php?format=simple&amp;amp;amp;amp;url=' . urlencode($url));
?>
<div align="center" style="height:45px; padding:15px; font-size:18px;"><a style="font-size:24px;" href="<?=$json_string?>" target="_blank"><?=$json_string?></a></div>
<?php
}
else if($provider == 'tinyurl'){

$json_string = file_get_contents('http://tinyurl.com/api-create.php?url=' . urlencode($url));
?>
<div align="center" style="height:45px; padding:15px; font-size:18px;"><a style="font-size:24px;" href="<?=$json_string?>" target="_blank"><?=$json_string?></a></div>
<?php

}else{
?>
<strong style="line-height:1.8; margin-left:10px; color:#900; padding:10px;">Geçersiz servis! Lütfen URL kısaltma servislerinin birini seçin.</strong>
<?php
}
}
else{
?>
<strong style="line-height:1.8; margin-left:10px; color:#900; padding:10px;">Hatalı URL girdiniz.</strong>
<?php
}
?>

Uygulamanın arayüzünde çalışan html ve ajax kodlarını da index.php adında aşağıda paylaşıyorum.

index.php

<script type='text/javascript'>
$(function(){
$("#shrt").submit(function(){
$("#response").html("<img src='loading.gif' />");
provider = $('#provider:checked').val();
url = $("#url").val();
if(provider =='undefined'){
$("#cekin").addClass('red');
provider = 'googl';
return false;
}
else{
$.ajax({
type: "POST",
data: "url=" + url + "&amp;amp;amp;amp;provider="+provider,
url: "post.php",
success: function(msg)
{
$("#response").html(msg);
}
});
}
return false;
});
});
</script>

<h2>URL Shortener</h2>

<form action="" method="post" name="shrt" id="shrt">
<div style="width:99%; margin:0; padding:0; min-height:70px;" align="center">
<input type="text" id="url" class="comment-form-author" value="http://"/>
<button type="submit" id="submit" style="cursor:pointer;">Gönder</button>
</div>
<div style="width:99%; margin:0; padding:0; min-height:70px;" id="cekin" align="center">
<label class="mylabel" for="googl"><input type="radio" class="myClass" value="googl" id="provider" name="provider" data-color="green" /> <img src="googl.jpg" height="25" /><br />
goo.gl
</label>
<label class="mylabel" for="isgd"><input type="radio" class="myClass" value="isgd" id="provider" name="provider" data-color="green" /> <img src="isgd.jpg" height="25" /><br />
is.gd</label>
<label class="mylabel" for="tinyurl"><input type="radio" class="myClass" value="tinyurl" id="provider" name="provider" data-color="green" /> <img src="tinyurl.jpg" height="20" /><br />
tinyurl.com</label>
</div>
</form>
<div id="response"></div>

Bu kodlar sistemin temelinde çalışan çatıyı oluşturuyor. Tabi ki, demo uygulamada gördüğünü arayüz ve CSS kodlarının hepsini paylaşmıyorum.  Demoda çalışan uygulamanın eksiksiz kodlarını demo dosyasında bulabilirsiniz.

Demo      Download