So erstellen Sie einen Layout Manager mit CodeIgniter

In diesem Premium-Video- und Begleitartikel-Artikel erfahren Sie, wie Sie eine einfache, aber leistungsfähige Bibliothek erstellen, um Layouts im beliebten CodeIgniter Framework zu verarbeiten. 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 ihrer Website unter codeigniter.com/downloads/ herunterladen.


Schritt 2 Wie machen wir das?

Die grundlegende Funktionalität dieser Bibliothek wird sehr einfach sein. 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 Anrufe zu imitieren $ this-> load-> view (). Wenn wir diese Methode aufrufen, übergeben wir den Namen (und den Ort) unserer Ansicht und dann ein Datenfeld, auf das von der Ansicht aus zugegriffen werden kann. Hier ist ein Beispiel:

 Funktionsmethode ($ url_param) $ this-> load-> view ('controller_views / method_view', array ('url_param' => $ url_param)); 

Der obige Code übernimmt die Datei system / application / views / controller_views / method_view.php, Übergeben Sie die Variable url_param und senden Sie sie 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??

Das Aussicht() Methode, die wir gerade aufgerufen haben, kann ein dritter (boolescher) Parameter übergeben werden, der, wenn er wahr ist, verwendet wird Rückkehr die gerenderte Ansicht, anstatt sie an den Browser zu senden. Wir können diesen Inhalt speichern und einen zweiten Aufruf derselben Methode ausführen, aber diesmal rufen Sie eine Layoutdatei auf, die diesen Inhalt druckt (umgeben von allen Kopfzeilen, Seitenleisten und Fußzeilen)..


Full Screencast



Schritt 3 Erstellen Sie eine neue Bibliothek

Wir werden diese Bibliothek Schritt für Schritt erstellen, beginnend mit dem einfachsten. Zunächst erstellen wir eine neue Bibliothek in unserem System / Anwendung / Bibliotheken Ordner und nennen Sie es Layouts.

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

Lass uns also direkt in den Code springen:

  

Gehen wir durch jeden Abschnitt des Codes:

  1. Die allererste Zeile ist eine Codierungskonvention von CodeIgniter. Sie stellt im Wesentlichen sicher, dass Benutzer nicht direkt über die Browser auf die Datei zugreifen können, da CodeIgniter die Einstellung setzt BASEPATH konstant in seiner index.php Datei.
  2. Die Klasse wird nur PHP 5 sein. Auf diese Weise können wir der Klasse Methodenverkettung hinzufügen, die später nützlich sein wird, wenn wir mit JS und CSS-Includes arbeiten.
  3. Der Klassenkonstruktor hat vorerst nichts. Dies ist nur das Skelett unserer Bibliothek.

Was passiert also, wenn wir dies von a einschließen Regler? Naja nichts. Die Klasse macht absolut nichts (nicht einmal den Konstruktor), also passiert nichts.


Schritt 4 Erstellen Sie ein Layout

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

    Unser allererstes Layout!     

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


Schritt 5 Schreiben Sie etwas Code!

Schreiben wir etwas Code, um dieses Layout zu handhaben:

 CI = & get_instance ();  public function view ($ view_name, $ params = array (), $ layout = 'default') // Lade den Inhalt der Ansicht, wobei die Parameter $ view_content = $ this-> CI-> load-> view ($ view_name, $ params, TRUE); // Lade jetzt das Layout und übergebe die gerade gerenderte Ansicht. $ This-> CI-> load-> view ('laytous /'. $ Layout, array ('content_for_layout' => $ view_content)); 

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

  1. Wir haben unserer Bibliothek ein neues privates Attribut hinzugefügt: $ CI. In unseren Bibliotheken können wir nicht direkt auf die CodeIgniter-Instanz zugreifen. Der einzige Weg ist, einen Verweis darauf zu bekommen und von dort aus darauf zuzugreifen. In unserem Konstruktor (der beim Laden der Bibliothek aufgerufen wird) rufen wir unsere CI-Instanz ab und weisen sie unserem lokalen privaten Benutzer zu $ CI Attribut, so können wir es später aufrufen. Wir brauchen es, um das anzurufen Laden-> Ansicht () Methode.
  2. Jetzt haben wir eine Ansichtsmethode hinzugefügt. Die Syntax ist praktisch identisch mit der Laden-> Ansicht () Methode. Wir erhalten einen Ansichtsnamen, ein Array von Parametern (die Variablen, die in der Ansicht sichtbar sein werden) und einen Layoutnamen, der standardmäßig (duh) 'default' ist. Letzteres erlaubt es uns, mehrere Layouts in unserer Anwendung zu haben (vielleicht eines für die Login-Box ohne Menüs und Sachen).
  3. Wie wir vorher gesprochen haben, nennen wir das Laden-> Ansicht () Als Methode übergeben wir den Namen der Ansicht, die Parameter und einen dritten Parameter mit dem Wert von WAHR. Dadurch wird sichergestellt, dass die Ausgabe nicht an den Browser gesendet wird. Stattdessen wird es an uns zurückgegeben und der Variablen zugewiesen $ view_content.
  4. Zum Schluss laden wir die Layoutdatei (die wir im speichern werden) System / Anwendung / Ansichten / Layouts Ordner), und übergeben Sie den Inhalt der gerade geladenen Ansicht als Parameter. Wenn das Layout geladen wird, wird die $ content_for_layout Die Variable wird durch den gerade geladenen Inhalt ersetzt und an den Browser gesendet (beachten Sie den fehlenden letzten Parameter, wir werden nicht übergeben WAHR diesmal).

Schritt 6 Ändern Sie den Titel der Seite

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

So ist der Titel des Layouts immer gleich. Das ist nicht praktisch. Wir müssen es leicht von unseren Controllern aus ändern können, ohne unendlich viele 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, beispielsweise "Layouts Library". Danach würden wir den Bereich der Website, den wir besuchen, einfügen. Für die Anmeldeseite lautet der Titel beispielsweise "Layouts Library | Login"..

Zuerst schreiben wir das Layout ein bisschen um.

    Layouts-Bibliothek<?php echo $title_for_layout ?>     

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

 CI = & get_instance ();  public function set_title ($ title) $ this-> title_for_layout = $ title;  Öffentliche Funktionsansicht ($ view_name, $ params = array (), $ layout = 'default') // Behandelt den Titel der Site. Wenn NULL, füge nichts hinzu. Wenn nicht, fügen Sie ein // Trennzeichen hinzu und hängen den Titel an. if ($ this-> title_for_layout! == NULL) $ separates_title_for_layout = $ this-> title_separator. $ this-> title_for_layout;  // Lade den Inhalt der Ansicht mit den übergebenen Parametern $ view_content = $ this-> CI-> load-> view ($ view_name, $ params, TRUE); // Laden Sie jetzt das Layout und übergeben Sie die gerade gerenderte Ansicht: $ this-> CI-> load-> view ('laytous /'. $ Layout, array ('content_for_layout' => $ view_content, 'title_for_layout' => $ separate_title_for_layout)); 

Was haben wir hier gemacht??

  1. Wir haben unserer Bibliothek zwei neue Attribute hinzugefügt: $ title_for_layout und $ title_separator. Der erste wird unseren Titel enthalten, und der zweite definiert die Zeichenfolge, die den Titel des Layouts von dem von der Gruppe festgelegten Titel trennt set_title () Methode.
  2. Seit der $ title_for_layout wurde auf privat gesetzt, fügen wir eine Methode hinzu, um sie von unseren Controllern festzulegen. Somit, set_title () setzt den Wert von $ title_for_layout zu was auch immer wir es sagen, z. 'Anmeldung'.
  3. In dem Aussicht() Methode haben wir ein Stück Code hinzugefügt, um das neue Attribut zu behandeln. Wenn der Benutzer niemals einen Titel für die Seite festlegt, möchten wir "in der Lage sein, sich" grausam abzubauen ", dh. Das Trennzeichen nicht umsonst anhängen. Daher überprüfen wir zuerst den Wert von $ title_for_layout Attribut. Wenn nicht NULL, Dann hängen wir das konfigurierte Trennzeichen und den von der Gruppe festgelegten Titel an set_title () Methode.
  4. Beim Rendern des Layouts stellen wir sicher, dass wir das neue Attribut übergeben (auch wenn NULL), damit wir es im Titel wiederholen können.

Schritt 7 Hinzufügen von modularem CSS und JS

Zum Schluss möchten wir CSS- und Javascript-Dateien modular hinzufügen können. Was bedeutet das? Angenommen, Sie möchten ein jQuery-Plugin verwenden, Sie möchten es jedoch nur für einen Teil der Website verwenden (möglicherweise ein Plugin für die Formularüberprüfung). Sie könnten es einfach in die Ansicht selbst einschließen, aber im endgültigen Code sieht das nicht sehr gut aus. Es ist immer vorzuziehen, alle Javascript- (und CSS-) Elemente in der Header. Wir werden eine Methode erstellen (also eigentlich zwei), mit der wir genau dies tun können.

Fügen Sie der Bibliothek diese beiden Methoden hinzu:

 öffentliche Funktion add_include ($ path, $ prepend_base_url = TRUE) if ($ prepend_base_url) $ this-> CI-> load-> helper ('url'); // Lade das nur um sicher zu gehen, dass $ this-> file_includes [] = base_url () ist. $ path;  else $ this-> file_includes [] = $ path;  $ this zurückgeben; // Dies erlaubt Kettenmethoden public function print_includes () // Eine Zeichenfolge initialisieren, die alle enthält. Include_includes = "; foreach ($ this-> umfasst als $ include) // Überprüfen Sie, ob es sich um eine JS oder eine CSS-Datei if (preg_match ('/ js $ /', $ include)) // Es handelt sich um eine JS-Datei $ final_includes. = '';  elseif (preg_match ('/ css $ /', $ include)) // Dies ist eine CSS-Datei $ final_includes. = '';  return $ final_includes; 

Stellen Sie sicher, dass Sie dieses neue Attribut auch über Ihrer Klasse in Ihre Klasse einfügen Konstrukteur:

 private $ Includes = array ();

und dies zu deinem Layout, gleich nach dem Titel

 layouts-> print_includes ()?>

Eine kleine Erklärung:

  1. Das add_include () Mit dieser Methode können wir mehrere JS - oder CSS - Dateien aus unserer Regler. Es erlaubt sogar die Verkettung von Methoden, was bedeutet, dass wir etwas tun können $ this-> layouts-> add_include ('js / jquery.js') -> add_include ('js / jquery.plugin.js') -> add_include ('css / jquery.plugin.css'); was sehr bequem sein kann, wenn mehrere Sachen geladen werden. Diese Methode der Verkettung von Methoden ist der Grund, warum wir PHP 5 benötigen, da PHP 4 es nicht unterstützt.
  2. Das $ prepend_base_url Parameter auf der add_include () Bei dieser Methode wird standardmäßig die Basis-URL der CodeIgniter-Installation vorangestellt. Durch Aufruf dieser Methode mit der $ prepend_base_url einstellen FALSCH, Wir können entfernte Dateien einschließen (z. B. die jQuery lib aus dem CDN von Google)..
  3. Das print_includes () Methode ist selbsterklärend. Es iteriert durch alle mit dem Addierten add_include () prüft, ob es sich bei der Datei um eine Javascript- oder eine CSS-Datei handelt (keine anderen Dateien werden unterstützt), und hängt das Include an eine Zeichenfolge an, die schließlich im Layout wiedergegeben wird.

Fazit

Wir haben eine komplette und sehr praktische Layout-Manager-Bibliothek für CodeIgniter von Grund auf erstellt! Auf diese Weise können Sie Zeit sparen, unnötige Aufrufe von Kopfzeilen, Inhalten und Fußzeilen vermeiden und Ihre Javascript- und CSS-Dateien modularisieren.

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

    Layouts-Bibliothek<?php echo $title_for_layout ?> layouts-> print_includes (); ?>     
 CI = & get_instance ();  public function set_title ($ title) $ this-> title_for_layout = $ title;  Öffentliche Funktionsansicht ($ view_name, $ params = array (), $ layout = 'default') // Behandelt den Titel der Site. Wenn NULL, füge nichts hinzu. Wenn nicht, fügen Sie ein // Trennzeichen hinzu und hängen den Titel an. if ($ this-> title_for_layout! == NULL) $ separates_title_for_layout = $ this-> title_separator. $ this-> title_for_layout;  // Lade den Inhalt der Ansicht mit den übergebenen Parametern $ view_content = $ this-> CI-> load-> view ($ view_name, $ params, TRUE); // Laden Sie jetzt das Layout und übergeben Sie die gerade gerenderte Ansicht: $ this-> CI-> load-> view ('laytous /'. $ Layout, array ('content_for_layout' => $ view_content, 'title_for_layout' => $ separate_title_for_layout));  public function add_include ($ path, $ prepend_base_url = TRUE) if ($ prepend_base_url) $ this-> CI-> load-> helper ('url'); // Lade das nur um sicher zu gehen, dass $ this-> file_includes [] = base_url () ist. $ path;  else $ this-> file_includes [] = $ path;  $ this zurückgeben; // Dies erlaubt Kettenmethoden public function print_includes () // Eine Zeichenfolge initialisieren, die alle enthält. Include_includes = "; foreach ($ this-> umfasst als $ include) // Überprüfen Sie, ob es sich um eine JS oder eine CSS-Datei if (preg_match ('/ js $ /', $ include)) // Es handelt sich um eine JS-Datei $ final_includes. = '';  elseif (preg_match ('/ css $ /', $ include)) // Dies ist eine CSS-Datei $ final_includes. = '';  return $ final_includes; 

Schauen Sie sich den Screencast an, um eine vollständige Übersicht und Kommentare zu erhalten!