13 Ağustos 2009

Resim.im API Uygulaması

Filed under: php — admin @ 05:33

Internet üzerinde sayısız resim yükleme servisi var. Ve herkesin bildiği gibi hazır uygulama kullanan siteler çoğunluğu oluşturmakta, özellikle Türkiye’de imaj barındırma hizmeti veren servisler paylaşımlı(shared) hosting kullandıklarından kısa sürede tarih olmaktadır. Nedenlerine gelirsek, herşeyden önce imaj/site barındırma  İşlemci, Harddisk  ve Ram kullanımının fazla olması nedeniyle masraflıdır. Ayrıca gelir – gideri karşılamamaktadır.

Evet, bu düşünce ile API’yi yazmaya karar verdim. Amacım kaliteli bir servis oluşturmak ve kullanılabilirliği arttırmaktı. Programlama bilgimi elimden geldiği kadarıyla ileri düzeyde kullanmaya çalıştım. İçime sinen bir çalışma oldu. Umarım siz de memnun kalırsınız. Dökümantasyon’a  uyarı ile hızlı bir giriş yapalım.

Uyarı!

  1. Sunucunuzdaki php versiyonu minimum PHP5 olması gerekmektedir.
  2. Maksimum 1 MB yükleme yapabilirsiniz. JPG, GIF, PNG harici formatlar desteklenmez. Telif hakkı içeren ve yetişkin içerikte resim yüklemek yasaktır. Kural ihlali yapan siteler yasaklı listesine alınır.

İçerik

Demo
Dosyaları indirmek için tıklayınız.

Sistem İşleyişi

Dosyayı formdan yolladıktan sonra islem.php ile dosya içeriğini üç farklı aşamada süzüyor. Dosya uygun görülürse geçici klasörünüz olan “tmp” e aktarıp cURL ile resim.im’daki “http://api.resim.im/api?q=yukle” adresine istek yollayıp yükleme talebinde bulunuyor. Yükleme başarılıysa dosyanın ID bilgisi javascript ile “http://api.resim.im/yukle.js” dosyasındaki fonksiyona tetikleme yapıyor ve resim adreslerini JSON ile çektikten sonra geçici dosyayı siliyor. Yazdığım aşamalarda herhangi bir problem oluşursa hata kodu ile geri döndürme yapabiliyor.

API Kullanımı

ZIP dosyasını açtıktan sonra dosyaları istediğiniz(subdomain, dizin vb.) yere yüklediğiniz taktirde sistem sorunsuz çalışacaktır. Yalnız kendine göre özelleştirerek kullanmak isteyenler için dosyalar hakkında bilgi veriyorum.

Klasör İçeriği

api
api.html
islem.php
tmp
.htaccess

- api.html

Özel tasarımla uğraşmak istemeyenler için hazırlanmış, W3 uyumlu sayfadır.

CSS

<style type="text/css">
body{background:url('http://api.resim.im/img/bg.png') repeat-x; margin:100px 0 0 0; text-align:center; font-size:14px}
#kapsa{margin:0 auto; width:390px}
p{font-size:12px}
.pa { font-size:12px; text-align:left; }
#sonuc_p { margin:5px 0 0 0; text-align:left; }
#hata { background:url('http://api.resim.im/img/hata.gif') no-repeat; padding:0 0 3px 16px; margin:15px 0 0 0; font-size:11px;}
a{color:#000; text-decoration:none}
a:hover{color:#000; text-decoration:underline}
.linkler { width:342px; display:block; padding:5px; color:#333; margin:0 0 5px 0; }
.yeni_alan{width:389px; margin-top:20px}
.yeni_yukseklik{background-image:url('http://api.resim.im/img/01.png'); height:17px}
.yeni_alt{background-image:url('http://api.resim.im/img/03.png'); height:14px}
.yeni_ortala{background-image:url('http://api.resim.im/img/02.png')}
.yeni_alan .yeni_ortala ._html div a{color:#069; text-decoration:none}
._html{padding:20px 16px 16px 16px; clear:both; font-family:Verdana; font-size:12px; text-align:center;}
.yukle{margin:20px 0 0 0}
h1{text-align:right; font-size:13px; font-family:helvetica,sans-serif; padding:0; color:#999; font-weight:normal; margin:0 5px 0 0}
ul{margin:5px 5px  5px 15px; padding:0; list-style:none}
ul li{background:url('http://api.resim.im/img/kurallar.gif') no-repeat 0 2px; text-align:left; font-size:11px; line-height:20px; padding-left:25px}
#alt{font-size:11px; font-family:Tahoma; margin:10px 0 0 0}
</style>

CSS dosyası ile sayfa üzerinde tam olarak hakimiyet sağlayabilir ve form genişliği, buton ayarları ve arkaplan üzerinde sorunsuz değişiklik yapabilirsiniz. CSS öğrenmek için ilgili sayfayı ziyaret edip Türkçe E-book’u indirebilirsiniz.

Javascript

<script type="text/javascript">
// <![CDATA[
var buton   = "http://api.resim.im/img/buton.png";
// ]]>
</script>
<script type="text/javascript" src="http://api.resim.im/yukle.js"></script>

Javascript ile tek yolladığımız parametre buton bilgisidir. “http://api.resim.im/img/buton.png” imajını istediğiniz gibi değiştirebilirsiniz. Ek özellikler istediğiniz taktirde eklenebilir.

- islem.php

Kodlar sonraki versiyonlar için modüler altyapı oluşturmak niyetiyle tamamen php5(object oriented) olarak yazılmıştır.

190-191 satırları arasında düzenleme yapabilirsiniz.

define('_KLASOR_', 'tmp');
define('_KB_', '1000');

İlk satır : geçici klasör adıdır. Ön tanımlı değer “tmp” klasörüdür. Klasör adını değiştirmek istediğiniz taktirde CHMOD 777 vermeyi unutmayınız.
İkinci satır: yükleme yaptırabileceğiniz maksimum değerdir. 1000 Kilobayt aşağısında yükleme yaptırabilir ama yukarısı için hata alırsınız.

+ tmp

Geçici klasör adı, yukarıdaki yönergelere göre değişiklik yapabilirsiniz.

- .htaccess

Güvenlik içindir. Resimlerin yüklendiği klasör olduğundan dolayı içinde php, cgi, pl uzantılı çalıştırdığınızda hata alacaksınız.

8 Yorum »

  1. eline saglik onur’cum :)

    Yorum by Mustafa — 14 Ağustos 2009 @ 17:31
  2. güzel fikir tebrikler

    Yorum by kaho — 15 Ağustos 2009 @ 22:55
  3. @mustafa, sağolasın.

    @kaho,
    sizin yaptığınız işlerden ve fikirlerinizden güzel olamaz. teşekkürler.

    Yorum by admin — 16 Ağustos 2009 @ 03:20
  4. takdir,tebrik,alkış…

    Yorum by Orhan — 16 Ağustos 2009 @ 06:14
  5. Takdire şayan bir çalışma…

    Yorum by Amaç Dizayn — 24 Eylül 2009 @ 12:28
  6. eline saglik onurcum :)

    Yorum by Loophus — 01 Ekim 2009 @ 18:45
  7. TMP klasörüne yüklediğimiz resimler bize bant genişliği sorunu yaşatmaz mı ?

    Yorum by Tardu Petersen — 26 Temmuz 2010 @ 09:47
  8. hayır yaşatmaz. sadece 1 (unique) gösterimi kadar trafik miktarınız harcanır.

    Yorum by admin — 26 Temmuz 2010 @ 17:06

Bu yazıya yapılan yorumlar için RSS beslemeleri. TrackBack URL

Yorum yap