Codeigniter Serisi 7 – Tasarım etkileşimi

PHP Programlama  Mart 7, 2015

Codeigniter’de bir viewe nasıl css ve js dosyalarını ekleyeceğimizi anlatacağım. Popüler bir çalışma yapmak adına Bootstrap ve JQuery entegrasyonunu yapacağız.

İlk olarak bootstrap için getbootstrap.com adresinden bootstrapı ve jquery.com adresinden jquery javascript dosyasını indiriyoruz. İlk olarak projemizin ana dizinine assets adında bir klasör oluşturalım ve bu klasör içerisinede css, js ve img adında 3 klasör daha oluşturalım. Bunları tasarım için kulandığımız dosyaları tiplerine göre atacağımız yerler olsun.

2015-03-07-01_32_32-netbeans-assetsfolder

Gördüğünüz gibi ana dizinde klasörlerimizi oluşturduk. Şimdi indirdiğimiz dosyaları bu klasörlere şu şekilde atalım. İndirdiğimiz bootstrap zip dosyasını açıp css içindeki bootstrap.min.css ile bootstrap-theme.min.css dosyalarını projemizin css klasörüne kopyalıyoruz. Bootstrap içinde ki js klasöründe bulunan bootstrap.min.js dosyasını ve indirdiğimiz jquery-2.1.3.min.js (ben bu versiyonu indirdim siz hangini indirdiyseniz) dosyasını da projemizde ki js klasörüne atıyoruz. Bunun dışında var olan farklı bir dosya tipi olan fontların klasörünü direk assets klasörüne atalım. Böylece assets klasörü içinde css, img, js ve fonts klasörleri oluştu.

Artık tasarımı kendi sistemimize giydirelim. Daha önceki çalışmamızda application/views/bizimki.php dosyasını oluşturmuştuk. Bu dosya üzerinden çalışmaya devam edelim.

Dosyamızı açıp içindeki tüm içeriği temizleyelim. Daha sonra https://gist.github.com/hubgit/90452 adresinde bulunan boş html sayfası projesine girip html kodlarını kopyalayıp bizimki.php dosyasına yapıştırıyoruz. Sayfayı bu şekilde bir çalıştıralım. Tabiki bom boş bir sayfa 🙂 Tekrar projeye dönüp bakıyoruz. Örnek şablonda head içeriğinde önce css sonra da js tanımlamaları yapılmış. Bizde aynı sırayla gidiyoruz ve link ve style ile başlayan alt alta iki satırı siliyoruz. İlk olarak bootstrap temel stil dosyamızı sayfaya ekleyelim.

<link href="<?php echo base_url(); ?>/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

Ops! yukarıda bir tuhaflık var, bu base_url() fonksiyonu nedir? Kısaca şu demek config.php de belirttiğimiz base_url değerini okuyan fonksiyon. Eğer config.php dosyasını düzgün yapılandırmışsanız bu şekilde çalışacaktır. Aynı şekilde bootstrap-theme.min.css yi de ekleyelim. Ardından altta ki script referanslarını da silip şunu yapıyoruz.

<script src="<?php echo base_url(); ?>/assets/js/jquery-2.1.3.min.js" type="text/javascript"></script>

Evet aynen base_url() fonksiyonunu burada da kullandık. Bootstrap.min.js içinde aynı şekilde ekleme yapalım. Sonuç olarak sayfamızın kodu şu şekilde görülmelidir.

2015-03-07-02_16_09-baseurl

Tekrar sayfayı çalıştırıp bakalım ne görüyoruz diye. Amanın bir hata! Bu şu demek oluyor CI içinde base_url() fonksiyonunu canınızın çektiği gibi kullanamazsınız. Hemen controller klasöründe ki bizimki.php dosyasını açın ve index fonksiyonunun içinde ki ilk satırı aşağı kaydırıp oraya şu kodu yapıştırın.

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

Bu bir helperi kullanacağımızı ve bunun yüklenmesi gerektiğini belirtir. Yüklediğimiz helper url ve bu helper yüklenmeden url işlemlerini yapmak mümkün değil. CI ihtiyacınız olmayacak şeyleri siz istemeden yüklemez. Tabi temel şeyleri kastettiğimi sanmıyoruz. Ancak birçok helper, library ve diğer şeylerin CI da bulunmasından dolayı hepsini toplu yüklemek yerine ihtiyacımız olduğunda yüklemeyi sağlar. Controllerin içi şu şekilde görünecektir.

2015-03-07-02_05_13-urlinfunc

Eğer ki bir sayfada tüm fonksiyonlarda bu url helperini yüklemeniz gerekiyorsa bunun yerine kurucu fonksiyonda da yazabiliriz. Fonksiyon bazında, kontroller bazında ve uygulama bazında yükleme işlemlerini yeri geldiğinde anlatacağım, şu anda kafanızı karıştırmak istemiyorum.

Tasarıma geri dönelim ve sayfamıza klasik bootstrap kodları ile önceki çalışmamızda bulunan öğeleri tekrar oluşturalım. Önceki çalışmamızda hatırlayacağınız gibi bir isim gösterme ve post ettiğmiz datayı okuyup isim yerine yazan birşey yapmıştık. İsmin ekrana basılması için bootstrapın contextual background sınıfıyla ekrana dökeceğim. body tagları arasına şu kodu yapıştıralım.

<p class="bg-success"><?php echo $isim; ?></p>

bg-success yeşil zemin üzerine yazı yazmak için, php içeriğini ise önceki derste anlatmıştım. Şimdi tekrar formumuzu ekleyelim. Ancak bu sefer helper ile bu işlemi yapacağız. Controllerimize geri dönüp url helperinin altına bir satır açıp form helper için şu satırı yapıştıralım.

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

Şimdi viewimize geri dönelim. Yukarıdaki kodun amacı altta yazacağımız fonksiyonlar için olduğunu belirtmek isterim. Şimdi body’e eklediğimiz yeşil yazının altına yazmaya başlayalım. Hemen form tagını açalım.

<?php echo form_open('bizimki', array('class' => 'form-horizontal')); ?>

<?php echo form_close(); ?>

Bu bizim form taglarımızı doğru bir şekilde oluşturmaya yarıyor. Ancak array oluşturup içinde parametreler vermemiz mümkün bunu örnekten sonra anlatacağım. Şu anda form tagında ki class değerini form-horizontal yaptım. Her ne ise kodu aşağı yapıştırıyorum üzerinden anlatacağım.

<?php echo form_open('bizimki', array('class' => 'form-horizontal')); ?>
 <div class="form-group">
 <label class="control-label col-sm-3">Adınız:</label>
 <div class="col-sm-9">
 <?php echo form_input(array('name' => 'isim', 'class' => 'form-control')); ?>
 </div>
 </div>
 <div class="form-group">
 <div class="col-sm-9 col-sm-offset-3">
 <?php echo form_submit(array('name' => 'submit', 'value' => 'Gonder', 'class' => 'btn btn-primary')); ?>
 </div>
 </div>
 <?php echo form_close(); ?>

Yukarıda ki kodu açıklayacak olursak genel anlamda Bootstrapın form standartlarından dolayı bir sürü div ve label var. Ancak form_input ile bir dizi içerisinde input tagının değerlerini eşleştirip gönderebiliyoruz. Aynı şekilde form_submit içinde dizi ile değerleri eşleştirip gönderebiliyoruz. Bu şekilde ister burada belirtin isterseniz controller tarafında dizileri tanımlayıp validation gibi tagları da controller tarafında yönetin. Konuyu o kadar dallandırmıyoruz şimdilik.

2015-03-07-02_43_13-Title

Bu ekran görüntüsünün arka planında oluşan kodu da verelim.

     <form action="http://localhost:8086/codeigniter4sample/index.php/bizimki" method="post" accept-charset="utf-8" class="form-horizontal">        
        <div class="form-group">
            <label class="control-label col-sm-3">Adınız:</label>
            <div class="col-sm-9">
                <input type="text" name="isim" value="" class="form-control"  />            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-9 col-sm-offset-3">
                <input type="submit" name="submit" value="Gonder" class="btn btn-primary"  />            </div>
        </div>
    </form>

İşte az önceki tanımlamalar bu sonucu üretmiş oldu. Özellikle array içerisinde verdiğimiz eşleşmelerin aynı şekilde burada tagların attributleri olduğunu görebilirsiniz. Önceki controlleri silmediğimiz için gönder dediğinizde aynı şekilde çalışacaktır. Projenin son halini github üzerinden güncelledim oradan bakabilirsiniz. Ben form helperi size anlatayım.

form_open()

Bu koddan temel olarak bahsettim, bizim için form tagı açıyor tabi varsayılan olarak genel ayarları yapıyor. Parametreleri anlatacak olursam ilk parametre string olarak controller/function şeklinde verilir. Eğer index function çağıracaksanız /function kısmına gerek yok zaten index belirtmesenizde çağrılıyor. ikinci parametre formun attribleri, yani id, class için bir dizi oluşturup örneğimizdeki gibi yapabiliyorsunuz. Üçüncü bir parametre hakkı da var bu da yine array alıyor ve eşleşmeleri hidden field olarak yapıyor. Bunlar kullanıcının bizzat değişmesini istemeyeceğiniz verileri aktarabileceğiniz form fieldlerini kısaca oluşturmanın bir yöntemi.

form_open_multipart()

Form open ile aynı ancak multipart olarak açıyor formu. Bu dosya yükleme yapacağınızda ihtiyacınız olan form tipi.

form_hidden()

Form open ile belirtmek dışında direk bu fonksiyonlada yapılabiliyor. form_hidden(‘adi’, ‘degeri’) şeklinde kullanılıyor. İsterseniz iki string değer yerine bir dizi array oluşturup adı-değeri şeklinde birçok hidden fieldi tek seferde oluşturabilirsiniz.

form_input()

Sizin için bir input tagı açar. Array ile parametreleri eşleştirerek verip kullanabilirsiniz. Parametre adları haliyle inputun alabileceği attribler içindir.

form_password()

Klasik input’un type si password olarak ayarlanmış şeklidir. * lı karakter girdiğimiz inputumuzu oluşturur. input ile aynı mantıkla array üzerinden attribleri alır.

form_upload()

Dosya yükleme alanı oluşturur. Haliyle input objesinin type si file olanıdır ve inputla aynı mantıkla array üzerinden attribleri alır.

form_textarea()

textarea nesnesi koyar ve yine attribleri array üzerinden alır.

form_dropdown()

Üç parametre alır, ilki name değeri, ikincisi array olarak açılan listeleri, üçündü değer ise varsayılan seçilmiş değeri belirtir.

form_checkbox()

Checkbox oluşturmak içindir ve dizi olarak attribleri alır.

form_radio()

Radiobox oluşturmak içindir ve dizi olarak attribleri alır.

form_submit()

Formu submit yapan butonu üretir. Array ile attribleri alır.

form_label()

label tagı açar, üç değer alabilir. İlki tagın içinde gösterilecek label metni, ikincisi hangi inputa ait (o inputun name’i) ve son olarak dizi ile attribler.

form_reset()

Formu resetlemeye yarayan butonu çıkarır.

form_button()

Form için genel buton ekler. Array ile attribleri alır.

form_close()

Formu kapatmaya yarar.

Bu bilgiler ile örnek kodları görebilmek için lütfen codeigniter.com adresinden User Manual girip Table Of Contents kısmından Form Helper konusunu bulun. Aynı başlıklar altında örnekleri bulunmaktadır. Ancak yaptığımız örnekten anlaşılacağı gibi array ile html attribleri tüm form elemenlerine eklenmektedir. Bu değerleri tasarım konusundan anladığınızı var sayarak anlattım.

Bir sonraki yazımda görüşünceye dek esenlikle kalın…

Bu yazı 3326 defa görüntülendi

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Yazar Hakkında

15 yıllık çalışma hayatında birçok proje geliştirmiş binlerce projeyi inceleme fırsatı bulmuş yazılım aşığıdır. İşini hobi olarak gören yazarımız iş hayatını profesyonelce zevkle sürdürmektedir.

Son Eklenenler