Cara Membuat Manajer Layout dengan CodeIgniter

() translation by (you can also view the original English article)

Artikel video dan pendamping Premium ini akan mengajarkan cara membuat perpustakaan sederhana namun canggih untuk menangani layout dalam Kerangka CodeIgniter yang populer. Perpustakaan yang akan Anda buat akan memungkinkan Anda memaksimalkan efisiensi, menghemat waktu dan kode, memodulasi tampilan dan bahkan file Javascript dan CSS Anda.

Langkah 1 Unduh File yang Diperlukan

Untuk tutorial ini, semua yang Anda butuhkan adalah kerangka CodeIgniter 1.7.2. Anda bisa mengunduhnya dari situs mereka di codeigniter.com/downloads/

Langkah 2 Bagaimana Kita Melakukan Ini

Fungsi dasar perpustakaan ini akan sangat sederhana. Kita akan mengambil isi sebuah view, me-render dengan data yang sesuai, kemudian mengambil konten yang di-render dan menetapkannya ke variabel. Sekarang, kita akan me-render layout itu sendiri, dan mengganti sebagian layout dengan isi variabel ini. Sederhana, tapi cukup kuat.

Idenya adalah untuk meniru panggilan ke $this->load->view(). Saat kita memanggil metode ini, kita mengirimkan nama (dan lokasi) dari view kita, dan kemudian array data yang bisa diakses dari view. Inilah contohnya:

 
function method($url_param) 
{ 
  $this->load->view('controller_views/method_view', array('url_param' => $url_param)); 
}

Kode diatas akan mengambil file system/application/views/controller_views/method_view.php, kirimkan saja variabel url_param, lalu kirimkan ke browser. Di sinilah kita masuk. Kita belum akan mengirim konten ke browser. Sebagai gantinya, kita akan mengirimkannya ke layout, lalu ke browser. Tapi bagaimana kita melakukannya?

Metode view() yang baru saja kita panggil dapat mengirimkan parameter ketiga (boolean), yang, jika true, akan mengembalikan view yang di-render alih-alih mengirimkannya ke browser. Kita bisa menyimpan konten itu, melakukan panggilan kedua dengan metode yang sama, tapi kali ini panggil file layout yang akan mencetak konten ini (dikelilingi semua header, sidebar dan footer).

Screencast Penuh

Langkah 3 Membuat Perpustakaan Baru

Kita akan membuat perpustakaan ini selangkah demi selangkah, mulai dari yang paling dasar. Pertama, kita akan membuat perpustakaan baru di folder system/application/libraries kita dan menyebutnya Layouts.

Jika Anda belum pernah membuat perpustakaan CodeIgniter, itu hanyalah kelas, yang dimuati oleh panggilan ke $this->load->library().

Jadi, mari langsung masuk ke kode:

 
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); 
 
/** 
 * Layouts Class. PHP5 only. 
 * 
 */ 
class Layouts { 
  public function __construct() { } 
}

Mari kita bahas setiap bagian kode:

Baris pertama adalah konvensi pengkodean CodeIgniter, pada dasarnya memastikan pengguna tidak dapat langsung mengakses file dari browser mereka, karena CodeIgniter menetapkan konstanta BASEPATH dalam file index.php-nya.
Kelas akan PHP 5 saja. Ini akan memungkinkan kita menambahkan metode berantai ke kelas, yang nantinya akan berguna saat kita bekerja dengan JS dan CSS.
Constructor kelas tidak memiliki apa-apa untuk saat ini. Ini hanya kerangka perpustakaan kita.

Lantas, apa jadinya jika kita memasukkan ini dari controller? Yah, tidak terjadi apa-apa. Kelas sama sekali tidak ada untuk saat ini (bahkan constructor-nya), jadi tidak ada yang akan terjadi.

Langkah 4 Membuat Layout

Kita akan membuat layout yang sangat sederhana untuk menjelaskan bagaimana semua bekerja.

 
<!DOCTYPE HTML> 
<html> 
<head> 
  <title>Our very first layout!</title> 
</head> 
<body> 
  <?php echo $content_for_layout; ?> 
</body> 
</html>

Seperti yang bisa Anda lihat, ini sangat mendasar; itu hanya sebuah judul dan sebuah body. Sekarang bagian yang penting ada di kode PHP disana. Kita akan meng-echo variabel $content_for_layout. Idenya adalah untuk menetapkan konten yang di-render ke variabel ini. Dengan cara ini, ia akan tercetak di sana, dikelilingi bagian body lainnya, head, dll.

Langkah 5 Tuliskan Beberapa Kode!

Mari tulis beberapa kode untuk menangani layout ini:

 
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); 
 
/** 
 * Layouts Class. PHP5 only. 
 * 
 */ 
class Layouts { 
   
  // Will hold a CodeIgniter instance 
  private $CI; 
   
  public function __construct()  
  { 
    $this->CI =& get_instance(); 
  } 
   
  public function view($view_name, $params = array(), $layout = 'default') 
  { 
    // Load the view's content, with the params passed 
    $view_content = $this->CI->load->view($view_name, $params, TRUE); 
 
    // Now load the layout, and pass the view we just rendered 
    $this->CI->load->view('laytous/' . $layout, array( 
      'content_for_layout' => $view_content 
    )); 
  } 
}

Mari kami jelaskan seperti apa kode baru ini:

Kami menambahkan atribut private baru ke perpustakaan kita: $CI. Dari dalam perpustakaan kita, kita tidak dapat mengakses instance CodeIgniter secara langsung. Satu-satunya cara adalah mendapatkan referensi dan mengaksesnya dari sana. Jadi, di constructor kita (yang dipanggil saat perpustakaan dimuat), kita mendapatkan instance CI kita, dan menetapkannya ke atribut $CI private kita, sehingga kita dapat memanggilnya nanti. Kita membutuhkannya untuk memanggil metode load->view().
Sekarang, kita menambahkan metode view. Sintaksnya identik dengan metode load->view(). Kita mendapatkan nama view, array parameter (variabel-variabel yang akan terlihat dari view), dan nama layout, yang secara default akan (duh) 'default'. Yang terakhir memungkinkan kita memiliki beberapa layout dalam aplikasi kita (mungkin satu untuk kotak login tanpa menu dan item-item lainnya).
Sekarang, seperti yang telah kita bicarakan sebelumnya, kita memanggil metode load->view(), kita mengirimkan nama view, parameternya, dan parameter ketiga dengan nilai TRUE. Ini memastikan kita tidak akan mengirimkan output ke browser. Sebaliknya itu akan dikembalikan kepada kita, dan ditugaskan ke variabel $view_content.
Akhirnya, kita memuat file layout (yang akan kita simpan di folder system/application/views/layouts), dan mengirimkan isi view yang baru dimuat sebagai parameter. Saat layout dimuat, variabel $content_for_layout akan diganti dengan konten yang baru dimasukkan, dan akan dikirim ke browser (perhatikan parameter akhir yang hilang, kita tidak mengirimkan TRUE kali ini).

Langkah 6 Mengubah Judul Halaman

Perpustakaan dasar secara teknis sudah selesai. Tapi ada beberapa hal yang bisa kita tambahkan untuk membuatnya lebih baik lagi.

Seperti itu, judul layout-nya selalu sama. Ini tidak praktis. Kita harus bisa mengubahnya dengan mudah dari controller kita, tanpa harus menciptakan jumlah layout yang tak terbatas dengan judul yang berbeda (ini akan mengalahkan tujuan tutorial ini). Jadi, bagaimana kita melakukan ini? Kami perkirakan situs ini memiliki judul permanen, misalnya "Layouts Library". Setelah itu, kami akan menempatkan bagian dari situs yang kami kunjungi. Misalnya, untuk halaman login, judulnya akan berbunyi "Layout Library | Login".

Pertama, mari kita menulis ulang layout-nya sedikit.

 
<!DOCTYPE HTML> 
<html> 
<head> 
  <title>Layouts Library<?php echo $title_for_layout ?></title> 
</head> 
<body> 
  <?php echo $content_for_layout; ?> 
</body> 
</html>

Kami hanya menambahkan echo PHP lainnya. Kali ini kita mencetak variabel $title_for_layout, yang akan kita ubah di perpustakaan kita. Inilah perpustakaan yang bisa ditulis ulang:

 
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); 
 
/** 
 * Layouts Class. PHP5 only. 
 * 
 */ 
class Layouts { 
   
  // Will hold a CodeIgniter instance 
  private $CI; 
   
  // Will hold a title for the page, NULL by default 
  private $title_for_layout = NULL; 
   
  // The title separator, ' | ' by default 
  private $title_separator = ' | '; 
   
  public function __construct()  
  { 
    $this->CI =& get_instance(); 
  } 
   
  public function set_title($title) 
  { 
    $this->title_for_layout = $title; 
  } 
   
  public function view($view_name, $params = array(), $layout = 'default') 
  {  
    // Handle the site's title. If NULL, don't add anything. If not, add a  
    // separator and append the title. 
    if ($this->title_for_layout !== NULL)  
    { 
      $separated_title_for_layout = $this->title_separator . $this->title_for_layout; 
    } 
     
    // Load the view's content, with the params passed 
    $view_content = $this->CI->load->view($view_name, $params, TRUE); 
 
    // Now load the layout, and pass the view we just rendered 
    $this->CI->load->view('laytous/' . $layout, array( 
      'content_for_layout' => $view_content, 
      'title_for_layout' => $separated_title_for_layout 
    )); 
  } 
}

Apa yang kita lakukan di sini?

Kita menambahkan dua atribut baru ke perpustakaan kita: $title_for_layout dan $title_separator. Yang pertama akan memegang judul kita, dan yang kedua, akan menentukan string yang akan memisahkan judul layout dari judul yang ditetapkan oleh metode set_title().
Karena $title_for_layout ditetapkan menjadi private, kita menambahkan sebuah metode untuk menetapkannya dari controller kita. Jadi, set_title() akan menetapkan nilai $title_for_layout untuk apa pun yang kita sampaikan, mis. 'Login'.
Dalam metode view(), kami menambahkan beberapa kode untuk menangani atribut baru. Jika pengguna tidak pernah menetapkan judul untuk halaman tersebut, kami ingin bisa "menurunkan dengan anggun", yaitu. tidak menambahkan pemisah untuk apa-apa. Jadi, pertama kita periksa nilai atribut $title_for_layout. Jika tidak NULL, maka kita tambahkan pemisah yang dikonfigurasi dan judul yang ditetapkan oleh metode set_title().
Saat me-render layout, kita memastikan bahwa kita mengirimkan atribut baru (meskipun NULL), jadi kita bisa meng-echo di judul.

Langkah 7 Menambahkan CSS dan JS modular

Nah, untuk yang terakhir, kita ingin bisa menambahkan file CSS dan Javascript secara modular. Apa artinya ini? Katakanlah Anda ingin menggunakan plugin jQuery, namun Anda hanya ingin menggunakannya di satu bagian situs web (mungkin plugin validasi formulir). Anda bisa memasukkannya ke view itu sendiri, tapi itu tidak terlihat bagus pada kode akhir. Itu selalu lebih baik untuk memiliki semua Javascript (dan CSS) termasuk di header. Kita akan membuat sebuah metode (yah, dua sebenarnya) yang memungkinkan kita melakukan hal ini.

Silakan tambahkan dua metode ini ke perpustakaan Anda:

 
public function add_include($path, $prepend_base_url = TRUE) 
{ 
  if ($prepend_base_url) 
  { 
    $this->CI->load->helper('url'); // Load this just to be sure 
    $this->file_includes[] = base_url() . $path; 
  } 
  else 
  { 
    $this->file_includes[] = $path; 
  } 
   
  return $this; // This allows chain-methods 
} 
 
public function print_includes() 
{ 
  // Initialize a string that will hold all includes 
  $final_includes = ''; 
   
  foreach ($this->includes as $include) 
  { 
    // Check if it's a JS or a CSS file 
    if (preg_match('/js$/', $include)) 
    { 
      // It's a JS file 
      $final_includes .= '<script type="text/javascript" src="' . $include . '"></script>'; 
    } 
    elseif (preg_match('/css$/', $include)) 
    { 
      // It's a CSS file 
      $final_includes .= '<link href="' . $include . '" rel="stylesheet" type="text/css" />'; 
    } 
     
    return $final_includes; 
  } 
}

Pastikan juga menambahkan atribut baru ini ke kelas Anda, tepat di atas constructor:

1
2	private $includes = array();

dan ini sesuai layout Anda, tepat setelah judulnya

1
2	<?php echo $this->layouts->print_includes() ?>

Sedikit penjelasan:

Metode add_include() memungkinkan kita menambahkan beberapa file JS atau CSS dari controller kita. Bahkan memungkinkan metode berantai, artinya kita bisa melakukan sesuatu seperti $this->layouts->add_include('js/jquery.js')->add_include('js/jquery.plugin.js')->add_include('css/jquery.plugin.css'); yang bisa sangat nyaman saat memuat banyak hal. Fitur metode berantai ini adalah alasan kita membutuhkan PHP 5, karena PHP 4 tidak mendukungnya.
Parameter $prepend_base_url pada metode add_include(), secara default akan menambahkan url dasar dari instalasi CodeIgniter. Dengan memanggil metode ini dengan $prepend_base_url diatur ke FALSE, kita dapat menyertakan file jarak jauh (misalnya, perpustakaan jQuery dari CDN Google).
Metode print_includes() sudah cukup jelas. Ia mengulangi melalui semua include yang ditambahkan dengan metode add_include(), memeriksa apakah file tersebut adalah file Javascript atau CSS (tidak ada file lain yang didukung), dan menambahkan include ke string yang akhirnya akan di-echo dalam tata letak.

Kesimpulan

Kita telah membuat perpustakaan manajer tata letak yang lengkap dan sangat praktis untuk CodeIgniter dari awal! Ini akan memungkinkan Anda menghemat waktu, menghindari panggilan yang tidak perlu untuk menyertakan header, konten, dan footer sepanjang waktu, dan memodulasi file Javascript dan CSS Anda.

Ini adalah kode akhir untuk tata letak dan perpustakaannya:

 
<!DOCTYPE HTML> 
<html> 
<head> 
  <title>Layouts Library<?php echo $title_for_layout ?></title> 
  <?php echo $this->layouts->print_includes(); ?> 
</head> 
<body> 
  <?php echo $content_for_layout; ?> 
</body> 
</html>

 
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); 
 
/** 
 * Layouts Class. PHP5 only. 
 * 
 */ 
class Layouts { 
   
  // Will hold a CodeIgniter instance 
  private $CI; 
   
  // Will hold a title for the page, NULL by default 
  private $title_for_layout = NULL; 
   
  // The title separator, ' | ' by default 
  private $title_separator = ' | '; 
   
  public function __construct()  
  { 
    $this->CI =& get_instance(); 
  } 
   
  public function set_title($title) 
  { 
    $this->title_for_layout = $title; 
  } 
   
  public function view($view_name, $params = array(), $layout = 'default') 
  {  
    // Handle the site's title. If NULL, don't add anything. If not, add a  
    // separator and append the title. 
    if ($this->title_for_layout !== NULL)  
    { 
      $separated_title_for_layout = $this->title_separator . $this->title_for_layout; 
    } 
     
    // Load the view's content, with the params passed 
    $view_content = $this->CI->load->view($view_name, $params, TRUE); 
 
    // Now load the layout, and pass the view we just rendered 
    $this->CI->load->view('laytous/' . $layout, array( 
      'content_for_layout' => $view_content, 
      'title_for_layout' => $separated_title_for_layout 
    )); 
  } 
   
  public function add_include($path, $prepend_base_url = TRUE) 
  { 
    if ($prepend_base_url) 
    { 
      $this->CI->load->helper('url'); // Load this just to be sure 
      $this->file_includes[] = base_url() . $path; 
    } 
    else 
    { 
      $this->file_includes[] = $path; 
    } 
 
    return $this; // This allows chain-methods 
  } 
 
  public function print_includes() 
  { 
    // Initialize a string that will hold all includes 
    $final_includes = ''; 
 
    foreach ($this->includes as $include) 
    { 
      // Check if it's a JS or a CSS file 
      if (preg_match('/js$/', $include)) 
      { 
        // It's a JS file 
        $final_includes .= '<script type="text/javascript" src="' . $include . '"></script>'; 
      } 
      elseif (preg_match('/css$/', $include)) 
      { 
        // It's a CSS file 
        $final_includes .= '<link href="' . $include . '" rel="stylesheet" type="text/css" />'; 
      } 
 
      return $final_includes; 
    } 
  } 
}

Pastikan untuk menonton screencast untuk gambaran lengkap dan komentar!

1
2	<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
3
4	/**
5	* Layouts Class. PHP5 only.
6	*
7	*/
8	class Layouts {
9
10	// Will hold a CodeIgniter instance
11	private $CI;
12
13	public function __construct()
14	{
15	$this->CI =& get_instance();
16	}
17
18	public function view($view_name, $params = array(), $layout = 'default')
19	{
20	// Load the view's content, with the params passed
21	$view_content = $this->CI->load->view($view_name, $params, TRUE);
22
23	// Now load the layout, and pass the view we just rendered
24	$this->CI->load->view('laytous/' . $layout, array(
25	'content_for_layout' => $view_content
26	));
27	}
28	}

1
2	<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
3
4	/**
5	* Layouts Class. PHP5 only.
6	*
7	*/
8	class Layouts {
9
10	// Will hold a CodeIgniter instance
11	private $CI;
12
13	// Will hold a title for the page, NULL by default
14	private $title_for_layout = NULL;
15
16	// The title separator, ' \| ' by default
17	private $title_separator = ' \| ';
18
19	public function __construct()
20	{
21	$this->CI =& get_instance();
22	}
23
24	public function set_title($title)
25	{
26	$this->title_for_layout = $title;
27	}
28
29	public function view($view_name, $params = array(), $layout = 'default')
30	{
31	// Handle the site's title. If NULL, don't add anything. If not, add a
32	// separator and append the title.
33	if ($this->title_for_layout !== NULL)
34	{
35	$separated_title_for_layout = $this->title_separator . $this->title_for_layout;
36	}
37
38	// Load the view's content, with the params passed
39	$view_content = $this->CI->load->view($view_name, $params, TRUE);
40
41	// Now load the layout, and pass the view we just rendered
42	$this->CI->load->view('laytous/' . $layout, array(
43	'content_for_layout' => $view_content,
44	'title_for_layout' => $separated_title_for_layout
45	));
46	}
47	}

1
2	public function add_include($path, $prepend_base_url = TRUE)
3	{
4	if ($prepend_base_url)
5	{
6	$this->CI->load->helper('url'); // Load this just to be sure
7	$this->file_includes[] = base_url() . $path;
8	}
9	else
10	{
11	$this->file_includes[] = $path;
12	}
13
14	return $this; // This allows chain-methods
15	}
16
17	public function print_includes()
18	{
19	// Initialize a string that will hold all includes
20	$final_includes = '';
21
22	foreach ($this->includes as $include)
23	{
24	// Check if it's a JS or a CSS file
25	if (preg_match('/js$/', $include))
26	{
27	// It's a JS file
28	$final_includes .= '<script type="text/javascript" src="' . $include . '"></script>';
29	}
30	elseif (preg_match('/css$/', $include))
31	{
32	// It's a CSS file
33	$final_includes .= '<link href="' . $include . '" rel="stylesheet" type="text/css" />';
34	}
35
36	return $final_includes;
37	}
38	}

1
2	<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
3
4	/**
5	* Layouts Class. PHP5 only.
6	*
7	*/
8	class Layouts {
9
10	// Will hold a CodeIgniter instance
11	private $CI;
12
13	// Will hold a title for the page, NULL by default
14	private $title_for_layout = NULL;
15
16	// The title separator, ' \| ' by default
17	private $title_separator = ' \| ';
18
19	public function __construct()
20	{
21	$this->CI =& get_instance();
22	}
23
24	public function set_title($title)
25	{
26	$this->title_for_layout = $title;
27	}
28
29	public function view($view_name, $params = array(), $layout = 'default')
30	{
31	// Handle the site's title. If NULL, don't add anything. If not, add a
32	// separator and append the title.
33	if ($this->title_for_layout !== NULL)
34	{
35	$separated_title_for_layout = $this->title_separator . $this->title_for_layout;
36	}
37
38	// Load the view's content, with the params passed
39	$view_content = $this->CI->load->view($view_name, $params, TRUE);
40
41	// Now load the layout, and pass the view we just rendered
42	$this->CI->load->view('laytous/' . $layout, array(
43	'content_for_layout' => $view_content,
44	'title_for_layout' => $separated_title_for_layout
45	));
46	}
47
48	public function add_include($path, $prepend_base_url = TRUE)
49	{
50	if ($prepend_base_url)
51	{
52	$this->CI->load->helper('url'); // Load this just to be sure
53	$this->file_includes[] = base_url() . $path;
54	}
55	else
56	{
57	$this->file_includes[] = $path;
58	}
59
60	return $this; // This allows chain-methods
61	}
62
63	public function print_includes()
64	{
65	// Initialize a string that will hold all includes
66	$final_includes = '';
67
68	foreach ($this->includes as $include)
69	{
70	// Check if it's a JS or a CSS file
71	if (preg_match('/js$/', $include))
72	{
73	// It's a JS file
74	$final_includes .= '<script type="text/javascript" src="' . $include . '"></script>';
75	}
76	elseif (preg_match('/css$/', $include))
77	{
78	// It's a CSS file
79	$final_includes .= '<link href="' . $include . '" rel="stylesheet" type="text/css" />';
80	}
81
82	return $final_includes;
83	}
84	}
85	}