Anasayfa » Codeigniter, Php

Codeigniter Dersleri – 10 – Css Dosyası Hazırlama ve Kullanma

5 Temmuz 2011 13.185 kez okundu 12 yorum
1 Star2 Stars3 Stars4 Stars5 Stars (5 oy,5 üzerinden : 5,00 )
Loading...

Bu dersimizde codeigniter projelerinde css dosyalarını nasıl kullanabileceğimizi anlatacağım. Kullanacağımız yöntem var olan yöntemlerden sadece bir tanesi. Css oluşturup kullanırken aynı zamanda projenin gidişatında biraz değişiklik yapacağız. Bu değişiklik sadece kodların yerinin değişmesinden ibaret olacak.

İlk iş olarak css dosyamızı hazırlayalım. Aşağıdaki css kodlarını pizza_styles.css adlı bir dosyaya kaydedin ve kaydettiğiniz bu dosyayı Codeigniter klasörü altında bir “css ” klasörü oluşturun ve içine kopyalayın.

?View Code CSS
h1{  
     font-family:Verdana, Arial, Helvetica, sans-serif;  
     font-size:25px;  
	 color:brown
 }  
 p{ 
     font-family:Georgia, "Times New Roman", Times, serif;  
     font-size:12px;  
 }  
 #menu{  
     height:50px;  
 }  
 #menu ul{  
     list-style-type:none;  
     margin-left:0px;  
 }  
 #menu li{  
     float:left;  
     padding:10px;
 
 }
 
 #footer{  
     font-family:Arial, Helvetica, sans-serif;  
     font-size:10px;  
	 color:red
 }

Css dosyamız hazır ancak bunu frameworke tanıtmamız gerekiyor. Bunun için Codeigniter/application/config klasörü altındaki config.php dosyasına alttaki kodu eklememiz gerekiyor. Kodu istediğiniz yere ekleyebilirsiniz ancak karışıklık olmaması için en alta yapıştırabilirsiniz.

?View Code PHP
// Main css file
$config['css'] = 'pizza_styles.css';

Tanıtma işlemide bitti şimdi projemiz çalıştığında bu css dosyamızın kodlara gönderilmesi gerekiyor. Bunun için daha önceden var olan Codeigniter/application/models altındaki pizza_model.php dosyasını açıyoruz ve kodları aşağıdaki gibi güncelliyoruz. (7 ve 8. satırlar yeni komutlarımız.)

?View Code PHP
	function genel()
	{
		$data['title']='Kodmerkezi.net Pizza Sipariş Sayfası';
		$data['header']='<h1>Pizza Siparis Projesi</h1>';
		$data['footer']='© copyright kodmerkezi.net'; 
 
		$data['base']		= $this->config->item('base_url');//projemizin ana dizinini çekiyoruz.
		$data['css']		= $this->config->item('css');	//css dosyamızı çekiyoruz
 
		$this->load->library('MyMenu');
		$menu = new MyMenu; 
		$data['menu'] = $menu->show_menu();
		return $data;
	}

Şimdi sadece view dosyasında css dosyamızı çekmeye kaldı iş. Ancak başta da dediğim gibi küçük bir değişiklik yapacağız.Bu değişiklik şöyle olacak; controller dosyamız olan pizza.php dosyasında header,menu,içerik ve footerı tek tek çağırıyorduk.Şimdi sadece bir dosya çağıracağız. Bu dosyanın içinde ise header menu ve footerı çağıracağız. Bunun için codeigniter/application/controllers altındaki pizza.php dosyamızdaki index() ve order() fonksiyonlarımızı aşağıdaki şekilde tekrar düzenliyoruz.

?View Code PHP
	function index()
	{		
		$this->load->model('pizza_model');
		$data['orders']=$this->pizza_model->get_all_orders();
		$data+=$this->pizza_model->genel();
		//diğer üç loadı sildik
		$this->load->view('pizza_view',$data);
 
	}
	function order()
	{	$this->load->model('pizza_model');
		$data=$this->pizza_model->genel();
		//diğer üç loadı sildik
		$this->load->view('pizza_order',$data);
	}

Gördüğünüz gibi dört olan load işlemi teke düştü. Peki nerede çağrılacak bu silinen load lar. Onları view dosyasındaki değişikliklerle yapacağız.

Şimdi bu değişikliği ilk olarak codeigniter/application/views altındaki pizza_view.php dosyasında yapacağız. Dosyayı aşağıdaki gibi tekrar düzenleyin.

?View Code PHP
<html>
<head>
<link rel="stylesheet" type="text/css"  href="<?php echo $base.'css/'.$css?>"><!-- Css dosyamızı burada include ettik -->
</head>
<body>
<div id="header">
<?php $this->load->view('pizza_header'); ?><!-- header dosyamızı burada include ettik -->
</div>
<div id="menu">
<?php 	$this->load->view('pizza_menu'); ?><!-- menü dosyamızı burada include ettik -->
</div>
 
<h3>Siparişler</h3>
<table border="1">
<tr><th>İsim</th><th>Pizza</th><th>İnce Kenar</th><th>Adet</th><th>Adres</th><th>Tip</th><th>Fiyat</th></tr>
<?php foreach($orders as $row){ ?>
<tr>
<td>
<?php echo $row->name;?>
</td>
<td>
<?php echo $row->pizza;?>
</td>
<td>
<?php if($row->thin_edge)
{
	echo "Evet";
}
else
{
	echo "Hayır";
}
?>
</td>
<td>
<?php echo $row->unit;?>
</td>
<td>
<?php echo $row->address;?>
</td>
<td>
<?php 
if($row->type=="1")
{
	echo "Küçük";
}
else if($row->type=="2")
{
	echo "Normal";
}
else if($row->type=="3")
{
	echo "Büyük";
}
?>
</td>
<td>
<?php echo $row->cost;?>
</td>
</tr>
<?php } ?>
 
</table>
 
<div id="footer">
<?php $this->load->view('pizza_footer'); ?><!-- footer dosyamızı burada include ettik -->
</div>
 
</body>
</html>

sipariş dosyamız olan codeigniter/application/views altındaki pizza_order.php dosyasını da aşağıdaki gibi düzenleyin.

?View Code PHP
<html>
<head>
<link rel="stylesheet" type="text/css" 
      href="<?php echo $base.'css/'.$css?>">
</head>
<body>
<div id="header">
<?php $this->load->view('pizza_header'); ?>
</div>
<div id="menu">
<?php 	$this->load->view('pizza_menu'); ?>
</div>
 
<h3>Sipariş Sayfası</h3>
 
<p>Sipariş Formu Burada Olacak</p>
<div id="footer">
<?php $this->load->view('pizza_footer'); ?>
</div>
 
</body>
</html>

diğer dosyalarda herhangi bir değişikliğe gerek yok. Hepsi bu kadar. Umarım yardımcı olur.

 

Bunlara da Göz Atmak İsteyebilirsiniz.

<<< Önceki:

Sonraki: >>>


Facebookta Paylaş

12 yorum »

  • Sadullah dedi ki:

    bir soru sormak istiyorum. pizza_model.php sayfamızda genel isminde bir fonksiyon yoktu.o fonksiyonu yeni mi ekledik yoksa ben bir yerde bir şey mi kaçırdım? cevabınız içn şimdiden teşekkürler. kolay gelsin…

    # 6 Temmuz 2011 saat 06:48
  • admin dedi ki:

    9. dersimizde daha verimli yapı oluşturmak için pizza_model.php dosyasına genel isimli bir fonksiyon yazmıştık ve controller dosyamız olan pizza.php dosyamızdaki bazı komutları buraya taşımıştık. Bu sayede aynı işlemleri tekrar tekrar yapmak yerine sadece model dosyamızı çağırmış olacağız.
    İlginiz için teşekkürler.

    # 6 Temmuz 2011 saat 14:06
  • Sadullah dedi ki:

    Ben teşekkür ederim. Derslerinizin devamını bekliyorum…

    # 6 Temmuz 2011 saat 14:45
  • fatih dedi ki:

    merhaba öncelikle tşk.Benim css dosyam sayfalarıma yansımadı.Acaba css klaösürünü yanlış location a mı yerleştirdim…

    # 7 Temmuz 2011 saat 13:14
  • admin dedi ki:

    Codeigniter klasörü altında application,system klasörlerinin yanına css isimli klasör oluşturup onun içine attık css dosyamızı. Ayrıca view dosyasında css dosyamızı çağırdığımız koda dikkat edin.
    Ayrıca pizza_model.php dosyamıza base ve css komutlarını çağırdığımızdan emin olalım.
    Eğer hata hala düzelmediyse bir sonraki yazımı bekleyebilirsiniz. Bir sonraki yazımda, konu anlatmadan önce şu ana kadar yaptığımız projenin kaynak kodlarını webe koyacağım. Oradan indirebileceksiniz.
    Teşekkürler.

    # 7 Temmuz 2011 saat 13:34
  • fatih dedi ki:

    admin siz insanmısınız.siz insan olamassınız siz bir meleksiniz melek:)tşk benim gibi gece geç saatlere kadar bu işlerle uğraşan meraklılar bu bilgilerle uykusuz kalmaya deydiğini düşünüyorlardır eminim:)

    # 7 Temmuz 2011 saat 20:59
  • Muhammet dedi ki:

    Merhaba .Css dosyasında resim yollarını nasıl yazacağız acaba . Ana dizinin altında images klasörü içindeki resimleri nasıl gösterceğz mesela?

    # 23 Ağustos 2011 saat 13:02
  • admin dedi ki:

    Örnek olarak arkaplan resmi için şu şekilde kullanabilirsin:
    background-image:url(../images/bg.png);

    # 24 Ağustos 2011 saat 14:57
  • Yahya dedi ki:

    Admin, çok teşekkür ederiz.

    # 9 Kasım 2011 saat 14:03
  • mirza dedi ki:

    Hocam birden fazla css dosyasını nasıl göstericez ve js dosyalarını ?

    # 22 Ocak 2013 saat 11:24
  • admin dedi ki:

    Mirza,

    $data['css'] = $this->config->item('css'); şeklinde yazdığımız noktada ikinci css dosyasını yazabilirsin. Buna url verebilirsin.
    $data['css2'] = "../url/";

    # 3 Şubat 2013 saat 20:56
  • Hayal dedi ki:

    Wiev için de bir klasör oluşturdum bu klasörün içinde ki dosyalara nasıl ulaşabilirim.

    # 22 Eylül 2013 saat 17:37

Yorum Bırakın!

Yorum yaz, yada kendi sitende trackback (Geri besleme) olarak ekle. Ayrıca RSS ile bu konuya üye olabilirsin. .

Nazik olun. Temiz tutun. Konu dışına çıkmayın. Spam yaratmayın.

Bu tagları kullanabilirsiniz:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Bloğumuz gavatarı desteklemektedir. Kendi gavatarınızı edinmek için lütfen Gravatar a üye olun.