Wie man einen Layout Manager mit CodeIgniter erstellt

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

In diesem Premium Video und Artikel erfahren Sie, wie Sie eine einfache, aber leistungsstarke Bibliothek für Layouts im beliebten CodeIgniter Framework erstellen. Mit der von Ihnen erstellten Bibliothek können Sie Ihre Effizienz maximieren, Zeit und Code sparen, Ihre Ansichten und sogar Ihre Javascript- und CSS-Dateien modularisieren.

Schritt 1 Laden Sie die erforderlichen Dateien herunter

Für dieses Tutorial benötigen Sie lediglich das CodeIgniter 1.7.2-Framework. Sie können es von der Website unter codeigniter.com/downloads/ herunterladen.

Schritt 2 Wie wir das machen werden

Die Grundfunktionalität dieser Bibliothek ist sehr einfach. Wir nehmen den Inhalt einer Ansicht, rendern sie mit den entsprechenden Daten, nehmen dann den gerenderten Inhalt und weisen ihn einer Variablen zu. Jetzt rendern wir das Layout selbst und ersetzen einen Teil des Layouts durch den Inhalt dieser Variablen. Einfach, aber stark genug.

Die Idee ist, die Aufrufe von $this->load->view() nachzuahmen. Wenn wir diese Methode aufrufen, übergeben wir den Namen (und den Speicherort) unserer Ansicht und dann ein Array von Daten, auf die über die Ansicht zugegriffen werden kann. Hier ist ein Beispiel:

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

Der obige Code nimmt das Datei system/application/views/controller_views/method_view.php, übergibt ihm die Variable url_param und sendet es dann an den Browser. Hier kommen wir ins Spiel. Wir werden den Inhalt noch nicht an den Browser senden. Stattdessen senden wir es an das Layout und dann an den Browser. Aber wie machen wir das?

Der soeben aufgerufenen view() -Methode kann ein dritter (boolescher) Parameter übergeben werden, der bei true die gerenderte Ansicht return, anstatt sie an den Browser zu senden. Wir können diesen Inhalt speichern, einen zweiten Aufruf derselben Methode ausführen, diesmal jedoch eine Layoutdatei aufrufen, die diesen Inhalt druckt (umgeben von allen Kopf-, Seiten- und Fußzeilen).

Vollbild

Schritt 3 Erstellen Sie eine neue Bibliothek

Wir werden diese Bibliothek Schritt für Schritt erstellen, beginnend mit den grundlegendsten. Zunächst erstellen wir eine neue Bibliothek in unserem Ordner system/application/libraries und nennen sie Layouts.

Wenn Sie noch nie eine CodeIgniter-Bibliothek erstellt haben, handelt es sich lediglich um Klassen, die durch einen Aufruf von $this->load->library() geladen werden.

Lassen Sie uns also direkt in den Code springen:

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

Lassen Sie uns jeden Abschnitt des Codes durchgehen:

Die allererste Zeile ist eine Codierungskonvention von CodeIgniter. Sie stellt im Wesentlichen sicher, dass Benutzer nicht direkt über ihren Browser auf die Datei zugreifen können, da CodeIgniter die Konstante BASEPATH in der Datei index.php festlegt.
Die Klasse wird nur PHP 5 sein. Auf diese Weise können wir der Klasse eine Methodenverkettung hinzufügen, die später bei der Arbeit mit JS- und CSS-Includes hilfreich sein wird.
Der Klassenkonstruktor hat vorerst nichts. Dies ist nur das Skelett unserer Bibliothek.

Was passiert also, wenn wir dies von einem controller einschließen? Na ja, nichts. Die Klasse macht im Moment absolut nichts (nicht einmal der Konstruktor), also wird nichts passieren.

Schritt 4 Erstellen Sie ein Layout

Wir erstellen ein sehr einfaches Layout, um zu erklären, wie alles funktioniert.

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

Wie Sie sehen können, ist dies äußerst einfach. Es ist nur ein Titel und ein Körper. Jetzt ist der wichtige Teil dort im PHP-Code. Wir geben eine Variable $content_for_layout wieder. Die Idee ist, den gerenderten Inhalt dieser Variablen zuzuweisen. Auf diese Weise wird es dort gedruckt, umgeben vom Rest des Körpers, des Kopfes usw.

Schritt 5 Schreiben Sie einen Code!

Schreiben wir einen Code für dieses Layout:

 
<?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 
    )); 
  } 
}

Lassen Sie uns erklären, wie der neue Code aussieht:

Wir haben unserer Bibliothek ein neues privates Attribut hinzugefügt: $CI. Innerhalb unserer Bibliotheken können wir nicht direkt auf die CodeIgniter-Instanz zugreifen. Die einzige Möglichkeit besteht darin, einen Verweis darauf zu erhalten und von dort aus darauf zuzugreifen. In unserem Konstruktor (der beim Laden der Bibliothek aufgerufen wird) erhalten wir unsere CI-Instanz und weisen sie unserem lokalen privaten $CI-Attribut zu, damit wir sie später aufrufen können. Wir brauchen es, um die Methode load->view() aufzurufen.
Jetzt haben wir eine Ansichtsmethode hinzugefügt. Die Syntax ist praktisch identisch mit der Methode load->view(). Wir erhalten einen Ansichtsnamen, ein Array von Parametern (die Variablen, die in der Ansicht sichtbar sind) und einen Layoutnamen, der standardmäßig (duh) 'default' ist. Letzteres ermöglicht es uns, mehrere Layouts in unserer Anwendung zu haben (möglicherweise eines für das Anmeldefeld ohne Menüs und andere Dinge).
Wie bereits erwähnt, rufen wir die Methode load->view() auf und übergeben den Namen der Ansicht, die Parameter und einen dritten Parameter mit dem Wert TRUE. Dies stellt sicher, dass wir die Ausgabe nicht an den Browser senden. Stattdessen wird es an uns zurückgegeben und der Variablen $view_content zugewiesen.
Schließlich laden wir die Layoutdatei (die wir im Ordner system/application/views/layouts speichern) und übergeben den Inhalt der gerade geladenen Ansicht als Parameter. Wenn das Layout geladen wird, wird die Variable $content_for_layout durch den gerade geladenen Inhalt ersetzt und an den Browser gesendet (beachten Sie den fehlenden letzten Parameter, diesmal übergeben wir TRUE nicht).

Schritt 6 Ändern Sie den Titel der Seite

Die Basisbibliothek ist technisch fertig. Aber es gibt ein paar Dinge, die wir hinzufügen können, um es noch besser zu machen.

Der Titel des Layouts ist immer der gleiche. Das ist nicht praktisch. Wir müssen in der Lage sein, es einfach von unseren Controllern aus zu ändern, ohne eine unendliche Anzahl von Layouts mit unterschiedlichen Titeln erstellen zu müssen (dies würde den Zweck dieses Tutorials zunichte machen). Wie machen wir das? Wir nehmen an, dass die Site einen permanenten Titel hat, z.B. "Layouts Library". Danach würden wir den Abschnitt der Site, den wir besuchen, einfügen. Auf der Anmeldeseite würde der Titel beispielsweise "Layouts Library | Login" lauten.

Lassen Sie uns zunächst das Layout etwas umschreiben.

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

Wir haben gerade ein weiteres PHP-echo hinzugefügt. Dieses Mal drucken wir die Variable $title_for_layout, die wir in unserer Bibliothek optimieren werden. Hier ist die umgeschriebene Bibliothek:

 
<?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 
    )); 
  } 
}

Was haben wir hier gemacht?

Wir haben unserer Bibliothek zwei neue Attribute hinzugefügt: $title_for_layout und $title_separator. Der erste enthält unseren Titel und der zweite definiert die Zeichenfolge, die den Titel des Layouts vom Titel trennt, der mit der Methode set_title() festgelegt wurde.
Da das $title_for_layout auf privat gesetzt wurde, fügen wir eine Methode hinzu, um es von unseren Controllern aus festzulegen. Daher setzt set_title() den Wert von $title_for_layout auf das, was wir ihm sagen, z. 'Anmeldung'.
In der view() -Methode haben wir einen Codeabschnitt hinzugefügt, um das neue Attribut zu verarbeiten. Wenn der Benutzer niemals einen Titel für die Seite festlegt, möchten wir in der Lage sein, "elegant zu verschlechtern", dh. das Trennzeichen nicht umsonst anhängen. Daher überprüfen wir zuerst den Wert des Attributs $title_for_layout. Wenn nicht NULL, hängen wir das konfigurierte Trennzeichen und den mit der Methode set_title() festgelegten Titel an.
Beim Rendern des Layouts stellen wir sicher, dass wir das neue Attribut übergeben (auch wenn NULL), damit wir es im Titel wiedergeben können.

Schritt 7 Hinzufügen von modularem CSS und JS

Zum Schluss möchten wir nun in der Lage sein, CSS- und Javascript-Dateien modular hinzuzufügen. Was bedeutet das? Angenommen, Sie möchten ein jQuery-Plugin verwenden, aber Sie möchten es nur für einen einzelnen Teil der Website verwenden (möglicherweise ein Formularvalidierungs-Plugin). Sie könnten es einfach in die Ansicht selbst aufnehmen, aber das sieht im endgültigen Code nicht sehr gut aus. Es ist immer vorzuziehen, alle Javascript- (und CSS-) Includes im header zu haben. Wir werden eine Methode erstellen (eigentlich zwei), mit der wir genau dies tun können.

Fügen Sie Ihrer Bibliothek diese beiden Methoden hinzu:

 
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; 
  } 
}

Stellen Sie sicher, dass Sie dieses neue Attribut auch Ihrer Klasse direkt über dem contstructor hinzufügen:

1
2	private $includes = array();

und dies zu Ihrem Layout, direkt nach dem Titel

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

Eine kleine Erklärung:

Mit der Methode add_include() können wir mehrere JS- oder CSS-Dateien von unserem controller hinzufügen. Es erlaubt sogar die Verkettung von Methoden, was bedeutet, dass wir so etwas wie $this->layouts->add_include('js/jquery.js')->add_include('js/jquery.plugin.js')->add_include('css/jquery.plugin.css'); Das kann sehr bequem sein, wenn mehrere Dinge geladen werden. Diese Funktion zur Verkettung von Methoden ist der Grund, warum wir PHP 5 benötigen, da PHP 4 dies nicht unterstützt.
Der Parameter $prepend_base_url in der Methode add_include() stellt standardmäßig die Basis-URL der CodeIgniter-Installation voran. Durch Aufrufen dieser Methode mit der Einstellung $prepend_base_url auf FALSE können wir Remote-Dateien einschließen (z. B. die jQuery-Bibliothek aus Googles CDN).
Die print_includes() -Methode ist selbsterklärend. Es durchläuft alle mit der Methode add_include() hinzugefügten Includes, prüft, ob es sich bei der Datei um eine Javascript- oder eine CSS-Datei handelt (keine anderen unterstützten Dateien), und hängt das Include an eine Zeichenfolge an, die schließlich im Layout wiedergegeben wird.

Schlussfolgerung

Wir haben eine vollständige und sehr praktische Layout-Manager-Bibliothek für CodeIgniter von Grund auf neu erstellt! Auf diese Weise können Sie Zeit sparen, unnötige Aufrufe vermeiden, um ständig Kopf-, Inhalts- und Fußzeilen einzuschließen, und Ihre Javascript- und CSS-Dateien modularisieren.

Dies ist der endgültige Code für das Layout und die Bibliothek:

 
<!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; 
    } 
  } 
}

Sehen Sie sich unbedingt den Screencast an, um die vollständige Übersicht und den Kommentar zu erhalten!

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	}