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['url']; $provider=$_POST['provider']; 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['short_url']; ?> <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;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;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.
Ortalama günde 3 saatimi bloglarda harcarım. Girdiğim en yararlı bloglardan birisi
bu oldu. Benim görüşümce diğer site sahipleri buradan örnek almalı.
Sadece rss beslemesi bulamadım.|
Çoğu zaman yorum bırakmam. Fakat bu içerik çok güzel olmuş!