8 Mart 2015 Pazar

CodeIgniter - 4 - Upload - Resim Havuzu Örneği


Yeni yayınımdan merhabalar... Bu sefer, geçen yayınımda anlattığım CodeIgniter'da Upload meselesini biraz daha genişletmek istiyorum. Bugünkü uygulamamız şöyle olacak:

Bir resim havuzumuz olacak. Buraya resim upload edebileceğiz. Buradaki resimleri görebileceğiz ve silebileceğiz. Veritabanı işlemi yapmayacağız. Bu yayını anlayabilmeniz için, CodeIgniter'ın kurulumunu ve temel mantığını biliyor olmalısınız. Bu konuda sorun yaşıyorsanız, önceki yayınlarımı okuyabilirsiniz:

1- Merhaba Dünya
2- Template Sistemi
3- Resim Upload Etmek

Yine, kolay takip edebilmeniz için, adım adım anlatacağım. Ancak, Template Sistemi başlıklı yayınımdaki kurulumu yaptığınızı varsayıyorum. Buyrun:

1) Kök klasörümüze (site.com) assets adlı bir klasör açacağız. assets'in içine images adlı bir klasör açacağız. images'in içine de resimhavuzu adlı bir klasör açacağız. Upload edeceğimiz resimleri bu klasöre kaydedeceğiz: http://localhost/site.com/assets/images/resimhavuzu/

2) Öncelikle, application/controllers/ klasörü altına resimhavuzu.php adında bir dosya açalım ve bu controller'ımızın kodlarını yazalım:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class resimhavuzu extends CI_Controller
{
    public function __construct() { parent::__construct(); }
 
    public function index()
    {      
        $data['bilgi'] = '';
        $data['uyari'] = '';

        $this->load->helper('directory');

        $map = directory_map('./public/assets/images/resimhavuzu/');

        $data['dosyalar'] = $map;

        $this->load->view('resimhavuzu_view',$data);
    }
}

Burada, resimhavuzu_view.php adlı view'a gönderilen $bilgi ve $uyari adlı değişkenler dikkatinizi çekmiştir. Eğer resim yükleme sırasında bir sorun oluşursa uyarımızı $uyari değişkenine, eğer işlem başarılı olursa da $bilgi değişkenine bilgi yükleyeceğiz. Ancak sayfa ilk yüklendiğinde (yani index() fonksiyonunda) bilgi veya uyarı görüntülenmeyecek. O yüzden, bu değişkenlere şimdilik boş bir string atadık. Şuanlık controller'ımız hazır. Buraya daha sonra tekrar döneceğiz. Ama öncelikle sayfamızı görmek için, view dosyamızı da oluşturalım...

3) application/views/ klasörü altına, resimhavuzu_view.php adında bir dosya oluşturalım ve içine şu basit formu yerleştirelim:

<!doctype html>
<html lang="tr-TR">
<head>
    <meta charset="UTF-8">
    <title>Resim Havuzu</title>
    <base href="<?=base_url()?>">
</head>
<body>
    <?=$bilgi?>
    <?=$uyari?>
    <hr />
    <form method='post' action='resimhavuzu/yukle' enctype='multipart/form-data'>
        <input type='file' name='resim' />
        <input type='submit' value='Resmi Yükle' />
    </form>
    <hr />
    <?php foreach($dosyalar as $dosya) { ?>
        <div><img src='assets/images/resimhavuzu/<?=$dosya?>' /></div>
        <div><a href='resimhavuzu/sil/<?=$dosya?>'><?=$dosya?> adlı resmi sil</a>
        <hr />
    <?php }?>
</body>
</html>

Burada, tasarımı güzelleştirecek hiçbir kod yazmadım. Siz CSS'le daha düzgün bir yapı oluşturabilirsiniz. Konumuz bu değil. Bu sayfayı oluşturduğunuzda,
http://localhost/site.com/resimhavuzu
linki ile sayfaya erişebilirsiniz. "Resmi Yükle" butonuna tıkladığınızda, url'miz şu şekle girecek:
http://localhost/site.com/resimhavuzu/yukle
Bunun anlamı: "resimhavuzu adlı controller'ın yukle() adlı fonksiyonunu çalıştır"
Ancak henüz böyle bir fonksiyon oluşturmadık. Sıra bunu oluşturmaya geldi.

4) Şimdi yeniden application/controllers/resimhavuzu.php yolundaki controller'ımızı açalım ve index() fonksiyonundan sonra, class'ımızın içinde kalacak şekilde, şu fonksiyonu da ekleyelim:

public function yukle()
{
    $data['bilgi'] = '';
    $data['uyari'] = '';

    if( !$this->input->post() ) $data['uyari'] = 'Bu sayfaya direkt erişmemelisiniz';
    else
    {
        $config['upload_path'] = 'assets/images/resimhavuzu/';
        $config['allowed_types'] = 'gif|jpg|jpeg|png';
        $config['file_name'] = 'ResimHavuzu';

        $this->load->library('upload', $config);
        $sonuc = $this->upload->do_upload('resim');

        if( !$sonuc ) $data['uyari'] = '<strong>Hata:</strong> '.$this->upload->display_errors();
        else
        {
            $yuklenen_ad = $this->upload->data()['raw_name'].$this->upload->data()['file_ext'];
            $data['bilgi'] = 'Resim, "'.$yuklenen_ad.'" adıyla, başarıyla yüklendi.';
        }

        $this->load->helper('directory');

        $data['dosyalar'] = directory_map('./public/assets/images/resimhavuzu/');

        $this->load->view('resimhavuzu_view',$data);
    }
}

Merak edenler için: Dosyaları bir dizi halinde bize sunan, CodeIgniter'ın directory_map() fonksiyonunu kullanabilmek için, directory adlı helper'ı yüklememiz gerekiyordu.

yukle() fonksiyonumuzu da yazmamızla birlikte, şuan resim upload edebiliyoruz. Şimdi de sıra, son işlemimiz olan silme işleminde... resimhavuzu_view.php dosyamızda bir link koymuştuk: Her resmin altında, resimhavuzu/sil/dosyaadı şeklinde href parametresi barındıran bir <a> tagı. Şimdi, bu linke tıklandığında olacakları işleyelim.

5) Yüklediğimiz resimlerin altındaki linklere tıkladığımızda, şöyle bir url yapımız oluyor:
http://localhost/site.com/resimhavuzu/sil/ResimHavuzu3.jpg
Anlamı: resimhavuzu controller'ındaki sil() fonksiyonuna ResimHavuzu3.jpg parametresini göndererek çalıştır.

O halde, application/controllers/resimhavuzu.php yolundaki controller'ımızı açalım ve bir parametre alan sil() fonksiyonumuzu oluşturalım. yukle() fonksiyonundan sonra, şu fonksiyonu ekleyin:

public function sil($dosya='')
{
    if( $dosya == '' ) redirect(base_url().'resimhavuzu');

    unlink('public/assets/images/resimhavuzu/'.$dosya);
    $data[bilgi'] = $dosya.' adlı resim, resim havuzundan kaldırıldı.';

    $this->load->helper('directory');
    $data['dosyalar'] = directory_map('./public/assets/images/resimhavuzu/');
    $this->load->view('resimhavuzu_view',$data);
}

İşte bu kadar. Artık resimhavuzu adlı klasörümüze resim ekleyebiliyoruz. Resimleri listeleyebiliyoruz ve silebiliyoruz. Temel haliyle bu bilgileri anlatmaya çalıştım. Bunun üzerine kendinize göre sayfayı tasarlayabilirsiniz.

Mesela resmi silmek için ilgili linke tıklandığında, pat diye silmesin de önce bir sorsun mu istiyorsunuz? O halde linkleri şu şekilde düzenleyin:

<a
    href='assets/images/resimhavuzu/<?=$dosya?>'
    onclick='return confirm('<?=$dosya?> adlı resim silinecek!');'
>
    <?=$dosya?> adlı resmi sil
</a>

Veya eğer hiç resim yoksa, resimlerin listelendiği bölüme "Hiç resim yok" yazmasını isteyebilirsiniz. Bunun için de, resimleri listeleyen foreach döngüsünü kapsayan bir if yapısı kullanabilirsiniz:

<?php if( count($dosyalar) > 0 ) { ?>
    <?php foreach($dosyalar as $dosya) { ?>
        ...
    <?php } ?>
<?php } else echo 'Hiç resim yok'; ?>

Bu gibi geliştirmeler size kalmış. Başka bir yayında görüşmek üzere. :)

Hiç yorum yok:

Yorum Gönder

Site Haritası

CodeIgniter Yayınları 1. Merhaba Dünya : CodeIgniter'da Merhaba Dünya yazısını görün... 2. Template Sistemi : CodeIgniter ile sta...