Codeigniter Serisi 13-Tasarımlandırma

PHP Programlama  Nisan 6, 2016

Merhaba bu yazımda çalışmamıza tasarımları ekleyeceğiz. Malumunuz bir önceki yazıda ekrana kayıtları dump yöntemiyle doldurmuştuk. Şimdi kayıtları düzgün bir şekilde listeleyelim.

İlk olarak view dizinine bir header bir de footer php dosyası ekleyerek tasarımın üst ve alt kısımlarını koyuyoruz. Bu sayede biz sadece ortada kalan bizim sürekli değişeceğimiz html kısmıyla ilgileneceğiz.

2016-04-06 10_36_12-codeigniter-v3-ders - Cloud9

Şimdi header dosyamızı açarak üst kısmı yerleştirelim.

2016-04-06 10_38_28-codeigniter-v3-ders - Cloud9

Burada bizim view kodlarımız body tagları arasına geleceği için body burada açma ihtiyacı duyduk. Body nerede kapanacak tabiki footer.php de. Hemen oraya da kapatma kodlarını ekleyelim.

2016-04-06 10_40_25-codeigniter-v3-ders - Cloud9

Şunu diyebilirsiniz, arkadaş bunları her sayfaya da koyardık bölmenin ne esprisi var. Lakin şimdi jquery ve bootstrap entegrasyonu yapacağımız için bu entegrasyonları sürekli olarak yapma ihtiyacı duymayacağız. Bu mantıkla sürekli kullanacağımız şeyleri tekrarlamamış oluyoruz.

Öncelikle jquery den başlayalım. Jquery.com adresinden download bölümüne geçelim ve oradan jquery nin son sürümünü indirelim. Ayrıca migrate plugin var onu da indirelim nedir diyecek olursanız eski jquery kütüphaneleriyle yazılmış pluginlerde lüzum ediyor. Ancak migrate yi ihtiyaç olmadan projeye eklemeyeceğim. Herhangi bir plugin hata verirse indireceğim. Şimdi direk ana dizine contents klasörü açıp onun içine js klasörü ekleyerek bunları atalım.

2016-04-06 10_47_27-codeigniter-v3-ders - Cloud9

Gördüğünüz gibi iki dosyayı da yükledik. Js kütüphaneleri her ne kadar alışılagelmiş olarak head tagları arasına konulsada artık boyutları çok fazla olduğu için sayfanın sonuna koymak daha mantıklı oluyor. böylece js kütüphaneleri yüklenene kadar ekran boş kalmıyor sayfa bir şekilde görünüyor. Bu yüzden jquery footer.php ekleyeceğim.

2016-04-06 10_51_34-codeigniter-v3-ders - Cloud9

Evet artık body nin en altında jquery var. Artık bootstrap ekleyebiliriz. Bootstrap tasarım için güzel bir alt yapı sağlamakta ve bir çok tasarım artık bootstrap standartları üzerine geliştirilmekte. getbootstrap.com adresine girerek bootstrap indirebiliriz. İndirme işlemini anlatmıyorum download linkine tıklarsınız sanırım. Zip dosyasını açıp js klasöründen bootstrap.min.js dosyasını, css klasörüne (oluşturmanız gerek) bootstrap.min.css ve bootstrap-theme.min.css, fonts klasörüne ise fonts klasöründekilerin hepsini atıyoruz. Bootstrap dosyalarımız tamamdır. Bunların js olanlarını yine footera css olanlarını da headera ekleyeceğiz.

Artık dönelim listeleme action ımıza. Dump yerine liste olarak göstereceğiz kayıtları. Hemen View/Telefon_defteri klasörüne index.php adında bir dosya açalım. Ardından listeleme actionumuza gelip kayıtları dökme işlemine başlayalım. index actionumuzda ki var_dump silip şu şekle getiriyoruz. Bu arada unutmadan ilk satırada url helper i ekledim gözünüzden kaçmasın.

çalıştırıp bakarsanız hiç bir şey görmezsiniz. Şu an sadece kaynak kod kısmında header ve footer yazdığımız kodlar görünecektir. E malumunuz oluşturduğumuz index.php de birşey yok. İndex dosyasını şu şekle getirelim.

Burada yine dikkatinizi çekeceğim bir nokta var. Verileri controller tarafında $data değişkenine doldursak da view yüklerken array içerisinde ‘model’ ile ilişkilendirdiğimiz için $model değişkenini kullanmak zorundayız. Bu diziye ne kadar bilgi aktaracağınız önemli değil hangi isimle eşleştirmişseniz o isimle değişkenden okursunuz. Çalıştırdığınız da verilerin listesini göreceksiniz. Bir sonraki derste ekle, düzenle ve sil butonlarını koyup ekleme formunu elden geçirip bir kopyası ile düzenleme formunu oluşturup oralara da değineceğiz. Projenin adresleri

github: https://github.com/halityurttas/codeigniter4sampleV3

c9: https://ide.c9.io/halityurttas/codeigniter-v3-ders

Tekrar görüşünceye dek esenlikle…

Bu yazı 1692 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