Den här premiumvideo- och kompanionsartikeln kommer att lära dig hur man skapar ett enkelt men kraftfullt bibliotek för att hantera layouter i den populära CodeIgniter Framework. Biblioteket du skapar kan du maximera effektiviteten, spara tid och kod, modulera dina synpunkter och till och med dina Javascript- och CSS-filer.
För denna handledning är allt du behöver för att vara CodeIgniter 1.7.2-ramen. Du kan ladda ner den från deras hemsida på codeigniter.com/downloads/
Den grundläggande funktionaliteten i det här biblioteket kommer att vara mycket enkelt. Vi tar innehållet i en vy, gör dem med lämpliga data, ta sedan det renderade innehållet och tilldela det till en variabel. Nu gör vi layouten själv och ersätter en del av layouten med innehållet i denna variabel. Enkelt, men kraftfullt nog.
Tanken är att efterlikna samtalen till $ This-> last> vy ().
När vi kallar den här metoden passerar vi namnet (och platsen) för vår syn och sedan en rad data som kommer att vara tillgängliga från vyn. Här är ett exempel:
funktionsmetod ($ url_param) $ this-> load-> view ('controller_views / method_view', array ('url_param' => $ url_param));
Ovanstående kod kommer att ta filen system / application / views / controller_views / method_view.php
, skicka den url_param variabeln och skicka sedan den till webbläsaren. Här kommer vi in. Vi skickar inte innehållet till webbläsaren ännu. I stället skickar vi det till layouten och sedan till webbläsaren. Men hur gör vi det?
De se()
metod som vi just ringde kan överföras en tredje (booleska) parameter, som, om sant, kommer att lämna tillbaka den renderade vyn istället för att skicka den till webbläsaren. Vi kan spara det innehållet, göra ett andra samtal till samma metod, men den här gången ringer en layoutfil som kommer att skriva ut det här innehållet (omgivet av alla rubriker, sidfält och sidfot).
Vi skapar det här biblioteket steg för steg, med början från de mest grundläggande. Först kommer vi att skapa ett nytt bibliotek i vår system / application / biblioteken mapp och kalla det layouter.
Om du aldrig har skapat ett CodeIgniter-bibliotek, är de helt enkelt klasser som får laddas av ett samtal till
$ This-> last> bibliotek ()
.
Så, låt oss hoppa rakt in i koden:
Låt oss gå igenom varje avsnitt av koden:
- Den allra första raden är en kodningskonvention av CodeIgniter, det säkerställer att användare inte direkt kan komma åt filen från sina webbläsare eftersom CodeIgniter sätter
basepath
konstant i sinindex.php
fil.- Klassen kommer endast att vara PHP 5. Detta gör det möjligt för oss att lägga till metodkedja till klassen, vilket kommer att vara användbart senare när vi arbetar med JS och CSS inkluderar.
- Klasskonstruktören har inget för tillfället. Detta är bara skelettet i vårt bibliotek.
Så, vad händer om vi inkluderar detta från a
kontrollant
? Jo, ingenting. Klassen gör absolut ingenting för nu (inte ens konstruktören), så kommer ingenting att hända.
Steg 4 Skapa en layout
Vi ska skapa en mycket enkel layout för att förklara hur allt fungerar.
Vår allra första layout! Som du kan se är detta extremt grundläggande; det är bara en titel och en kropp. Nu är den viktiga delen i PHP-koden där. Vi echo a
$ content_for_layout
variabel. Tanken är att tilldela det renderade innehållet till denna variabel. På så sätt blir det tryckt där, omgivet av resten av kroppen, huvudet, etc..
Steg 5 Skriv lite kod!
Låt oss skriva en kod för att hantera denna layout:
CI = & get_instance (); public function view ($ view_name, $ params = array (), $ layout = 'default') // Ladda visningsens innehåll, med parametrarna gått $ view_content = $ this-> CI-> load-> view view_name, $ params, TRUE); // Nu laddar du in layouten och skickar den vy vi just gjorda $ this-> CI-> load-> view ('laytous /'. $ Layout, array ('content_for_layout' => $ view_content));Låt oss förklara vad den nya koden ser ut som:
- Vi har lagt till ett nytt privat attribut i vårt bibliotek:
$ CI
. Från våra bibliotek kan vi inte få tillgång till CodeIgniter-förekomsten direkt. Det enda sättet är att få en hänvisning till det och få tillgång till det därifrån. Så, i vår konstruktör (som kallas när biblioteket laddas) får vi vår CI-instans och tilldela den till vår lokala privata$ CI
attribut, så vi kan ringa det senare. Vi behöver det att ringalast> vy ()
metod.- Nu lade vi till en visningsmetod. Syntaxen är praktiskt taget identisk med
last> vy ()
metod. Vi får ett visningsnamn, en rad parametrar (de variabler som kommer att synas från vyn) och ett layoutnamn som som standard kommer att vara (duh) "standard". Den senare tillåter oss att ha flera layouter i vår ansökan (kanske en för inloggningsrutan utan menyer och grejer).- Nu, som vi talade tidigare, kallar vi
last> vy ()
metod, vi överför synets namn, parametrarna och en tredje parameter med värdet avSANN
. Detta garanterar att vi inte skickar utmatningen till webbläsaren. Istället kommer det att returneras till oss och tilldelas variabeln$ view_content
.- Slutligen laddar vi upp layoutfilen (som vi kommer att lagra i
system / application / views / layouter
mapp), och överför innehållet i den justastrade vyn som en parameter. När layouten blir laddad,$ content_for_layout
variabel kommer att ersättas med innehållet som just laddats och skickas till webbläsaren (notera den saknade slutparametern, vi överför inteSANN
den här gången).
Steg 6 Ändra sidans titel
Grundbiblioteket är tekniskt gjort. Men det finns några saker vi kan lägga till för att göra det ännu bättre.
Som det är, är uppläggets titel alltid densamma. Detta är inte praktiskt. Vi behöver kunna ändra det enkelt från våra kontrollörer utan att behöva skapa en oändlig mängd layouter med olika titlar (detta skulle besegra syftet med denna handledning). Så, hur gör vi det här? Vi antar att webbplatsen har en permanent titel, säger "Layouts Library". Därefter lägger vi på den del av webbplatsen vi besöker. Till exempel, för inloggningssidan, skulle titeln läsa "Layouts Library | Login".
Låt oss först skriva om layouten lite.
Layouts Library Vi har bara lagt till en annan PHP
eko
. Den här gången skriver vi ut$ title_for_layout
variabel, som vi ska tweak i vårt bibliotek. Här är det omskrivna biblioteket:CI = & get_instance (); allmän funktion set_title ($ title) $ this-> title_for_layout = $ title; allmän funktionsvy ($ view_name, $ params = array (), $ layout = 'default') // Hantera webbplatsens titel. Om NULL, lägg inte till något. Om inte, lägg till en // separator och lägg till titeln. om ($ this-> title_for_layout! == NULL) $ separated_title_for_layout = $ this-> title_separator. $ This-> title_for_layout; // Ladda visningsens innehåll, med parametrarna gått $ view_content = $ this-> CI-> load-> visa ($ visningsnamn, $ parametrar, SANT); // Nu laddar du in layouten och skickar den vy vi just gjorda $ this-> CI-> load-> view ('laytous /'. $ Layout, array ('content_for_layout' => $ view_content, 'title_for_layout' => $ separated_title_for_layout));Vad gjorde vi här?
- Vi lade till två nya attribut i vårt bibliotek:
$ title_for_layout
och$ title_separator.
Den första kommer att hålla vår titel, och den andra kommer att definiera strängen som kommer att skilja upp titelens titel från titeln som anges avset_title ()
metod.- Sedan
$ title_for_layout
satt till privat, lägger vi till en metod för att ställa in den från våra controllers. Således,set_title ()
kommer att ange värdet av$ title_for_layout
till vad vi säger det till, t.ex. 'Logga in'.- I
se()
metod, vi lade till en bit kod för att hantera det nya attributet. Om användaren aldrig sätter en titel på sidan vill vi kunna "försämras graciöst", dvs. Lägg inte till separatorn för ingenting. Således kontrollerar vi först värdet av$ title_for_layout
attribut. Om inteNULL
, då lägger vi till den konfigurerade separatorn och titeln som ställts in avset_title ()
metod.- När vi gör layouten ser vi till att vi skickar det nya attributet (även om NULL), så vi kan echo det i titeln.
Steg 7 Lägga till modulärt CSS och JS
Nu, för sist, vill vi kunna lägga till CSS och Javascript-filer modulärt. Vad betyder det här? Säg att du vill använda ett jQuery-plugin, men du vill bara använda det på en enda del av webbplatsen (kanske ett formvalideringsprogram). Du kan bara inkludera det på utsikten själv, men det ser inte bra ut på den slutliga koden. Det är alltid att föredra att alla JavaScript (och CSS) ingår i
rubrik
. Vi ska skapa en metod (ja, faktiskt två) som gör det möjligt för oss att göra just detta.Fortsätt och lägg till dessa två metoder till ditt bibliotek:
public function add_include ($ path, $ prepend_base_url = TRUE) om ($ prepend_base_url) $ this-> CI-> load-> hjälpen ('url'); // Ladda det här bara för att vara säker på $ this-> file_includes [] = base_url (). $ Väg; annat $ this-> file_includes [] = $ path; returnera $ this; // Detta tillåter kedje-metoder offentlig funktion print_includes () // Initialisera en sträng som håller alla innehåller $ final_includes = "; foreach ($ this-> inkluderar som $ include) // Kontrollera om det är en JS eller en CSS-fil om (preg_match ('/ js $ /', $ include)) // Det är en JS-fil $ final_includes. = ''; elseif (preg_match ('/ css $ /', $ include)) // Det är en CSS-fil $ final_includes. = ''; returnera $ final_includes;Var noga med att också lägga till det här nya attributet till din klass, precis ovanför
konstruktör
:privat $ inkluderar = array ();och detta till din layout, strax efter titeln
layouter-> print_includes ()?>En liten förklaring:
- De
add_include ()
Metoden tillåter oss att lägga till flera JS- eller CSS-filer från vårkontrollant
. Det tillåter även metodkedja, vilket innebär att vi kan göra något liknande$ This-> layouts-> add_include ( 'js / jquery.js') -> add_include ( 'js / jquery.plugin.js') -> add_include ( 'css / jquery.plugin.css');
vilket kan vara väldigt bekvämt när du laddar flera saker. Denna metodkedjande funktion är anledningen till att vi behöver PHP 5, eftersom PHP 4 inte stöder det.- De
$ prepend_base_url
parameter påadd_include ()
metod, kommer som standard att förbereda basadressen för CodeIgniter-installationen. Genom att ringa den här metoden med$ prepend_base_url
satt tillFALSK
, vi kan inkludera fjärrfiler (till exempel jQuery lib från Googles CDN).- De
print_includes ()
Metod är självförklarande. Det itererar genom alla de tillägg som läggs till medadd_include ()
metod, kontrollerar om filen är en Javascript eller en CSS-fil (inga andra filer stöds), och lägger till medtaget till en sträng som äntligen kommer att echo'ed i layouten.
Slutsats
Vi har skapat ett komplett och väldigt praktisk layouthanteringsbibliotek för CodeIgniter från början! Detta gör att du kan spara tid, undvika onödiga samtal för att inkludera rubriker, innehåll och sidfot samt hela tiden och modularisera dina Javascript- och CSS-filer.
Detta är den slutliga koden för layouten och biblioteket:
Layouts Library layouts-> print_includes (); ?>CI = & get_instance (); allmän funktion set_title ($ title) $ this-> title_for_layout = $ title; allmän funktionsvy ($ view_name, $ params = array (), $ layout = 'default') // Hantera webbplatsens titel. Om NULL, lägg inte till något. Om inte, lägg till en // separator och lägg till titeln. om ($ this-> title_for_layout! == NULL) $ separated_title_for_layout = $ this-> title_separator. $ This-> title_for_layout; // Ladda visningsens innehåll, med parametrarna gått $ view_content = $ this-> CI-> load-> visa ($ visningsnamn, $ parametrar, SANT); // Nu laddar du in layouten och skickar den vy vi just gjorda $ this-> CI-> load-> view ('laytous /'. $ Layout, array ('content_for_layout' => $ view_content, 'title_for_layout' => $ separated_title_for_layout)); allmän funktion add_include ($ path, $ prepend_base_url = TRUE) om ($ prepend_base_url) $ this-> CI-> load-> hjälpen ('url'); // Ladda det här bara för att vara säker på $ this-> file_includes [] = base_url (). $ Väg; annat $ this-> file_includes [] = $ path; returnera $ this; // Detta tillåter kedje-metoder offentlig funktion print_includes () // Initialisera en sträng som håller alla innehåller $ final_includes = "; foreach ($ this-> inkluderar som $ include) // Kontrollera om det är en JS eller en CSS-fil om (preg_match ('/ js $ /', $ include)) // Det är en JS-fil $ final_includes. = ''; elseif (preg_match ('/ css $ /', $ include)) // Det är en CSS-fil $ final_includes. = ''; returnera $ final_includes;Var noga med att titta på skärmbilden för hela översikten och kommentaren!