Temi, header e footer su Codeigniter

Se usi temi già fatti per il tuo sito e vuoi inserirli in Codeigniter facilmente… beh, qui già ci blocchiamo.

Non esiste modo di inserire temi presi dal web (Themeforest.net per dirne uno) senza dover cambiare ogni singolo collegamento con uno che a CI piaccia.

In realtà un modo c’è però… ecco come fare (sembra complesso ma è solo spiegato per intero, così da farvi capire bene i passaggi… in 2 minuti avete fatto tutto)!

  1. Modificare il file .htaccess nella root del sito
  2. Creare cartella tema nella root e inserirvi il tema
  3. Suddividere il tema in due file: header e footer
  4. Creare due view che includono i file header e footer del tema
  5. Una classe core che carichi il tema e le view desiderate
  6. Modifica del percorso dei file inclusi nel tema
  7. Utilizzare il tema in un controller (1 sola riga sarà il premio per il duro lavoro)

Cominciamo

Codeigniter include nelle URL quell’index.php che a noi non piace. Dovremo toglierlo, aggiungendo nel file .htaccess della root principale (allo stesso livello della cartella application e system) un paio di istruzioni che ci saranno utili:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ index.php/$1 [L]
</IfModule>

Con queste poche righe abbiamo detto al server che se trova un nome di pagina che non è index.php, di aggiungere in modo “invisibile” index.php e trattare la pagina come se ci fosse, così sarà ben visibile.

Questo però lo facciamo fare a due condizioni (le due righe sovrastanti): non deve essere un file ne una cartella, così quando andremo ad includere un tema, ogni  file ad esso collegato non sarà preso come un qualcosa da aggiungerci “index.php” bensì lo lascierà intatto e sarà perfettamente raggiungibile!

Detto questo passiamo al tema.

IL TEMA

Creiamo una cartella “tema” sempre nella cartella principale (insieme ad application e system) dove inseriremo il nostro tema completo. Creeremo poi i file _header.php e _footer.php.
Ogni webmaster che si rispetti sa che in campo di sviluppo dinamico di un sito si debba creare un file contenente tutta la parte superiore del sito (include dei js e css, logo, menu) e la parte inferiore, chiamata footer, contenente la parte finale del sito, così da poter inserire ogni pagina creata nel mezzo e, in caso di modifiche, poter cambiare un singolo file per vedere le modifiche propagarsi in tutto il sito: molto molto comodo!

Con l’aiuto di Codeigniter possiamo creare un caricamento automatico del tutto in una sola riga, ma ci servono tre cose: due file php nella cartella views che si occupano del caricamento del file header e footer e il file che si occuperà di unire il tutto che metteremo nella cartella Core. Vediamo prima i due file delle view:

/application/views/header.php

<?php require $urlinclude.'_header.php'; ?>

Personalmente creo i file header e footer con il trattino davanti, così compaiono sempre in cima agli altri file e non devo cercarli in continuazione (trucchi da sviluppatore). La variabile $urlinclude sarà inclusa nella libreria e conterrà il percorso del file nel tema.

/application/views/footer.php

<?php require $urlinclude.'_footer.php'; ?>

Il punto davanti è fondamentale, perché farà puntare l’include nella root principale, dove abbiamo inserito la nostra cartella tema.

Fatto questo, molto semplice come avete visto, creiamo il file Core, colui che in effetti caricherà i file in modo ordinato.

LA LIBRERIA CHE UNISCE LE PARTI

Creiamo quindi nella cartella application/core il file MY_Loader.php :

<?php
/**
 * /application/core/MY_Loader.php
 * portapipe.wordpress.com
 */
class MY_Loader extends CI_Loader {
  public function tema($nomeView = array(), $vars = array())
  {
    //aggiungiamo la variable urlbase e urlinclude che dirà a header e footer dove trovare i file
    $vars['urlbase']='/tema/';
    $vars['urlinclude']='./tema/';
    //Qui carichiamo prima header, poi loop delle viste passate e poi footer
    $content = $this->view('header', $vars);
    if(is_array($nomeView)){
      foreach($nomeView as $nv){
        $content .= $this->view($nv, $vars);
      }
    }else{
      $content .= $this->view($nomeView, $vars);
    }
    $content .= $this->view('footer', $vars);
  }
}

Questo codice è in realtà molto semplice: estende la classe Loader di Codeigniter, carica la view header, carica le viste (un array in caso di viste multiple, poi vi spiego) e infine il footer, passando la variabile $urlbase a tutte le pagine incluse. Basico ma magico!

Ora abbiamo i file corretti, le inclusioni fatte e un loader per il nostro tema. Cosa manca? Beh solo due cose: la modifica del percorso dei file nell’header (e footer, dipende dal tema) e l’utilizzo in un controller.

AGGIORNIAMO I PERCORSI DEI FILE NEL TEMA

Apriamo il file _header.php nella cartella del tema e scoviamo tutte le inclusioni dei file css, javascript e immagini. Vi ricordate che prima, nel file /application/views/header.php, abbiamo creato la variabile $urlbase ? Bene, serviva proprio per questo passaggio! Se vorrete cambiare la cartella e inserire magari un secondo tema potrete cambiare il percorso proprio da quella variabile, e tutto il tema si aggiornerà!

Esempio di include di file css e javascript prima e dopo la modifica:

<link href="css/style.css" rel="stylesheet" media="all"/>
<script type="text/javascript" src="js/jquery.js"></script>
<!-- dovrà diventare... -->
<link href="<?=$urlbase?>css/style.css" rel="stylesheet" media="all"/>
<script type="text/javascript" src="<?=$urlbase?>js/jquery.js"></script>

Direi che l’esempio sia molto chiaro: per aggiungere la modifica del percorso dovrete inserire solamente <?=$urlbase?> prima di ogni percorso di file e il gioco è fatto!

Finalmente, dopo il duro lavoro fatto (per fortuna solo una volta per ogni sito) vediamo come farlo funzionare.

UTILIZZO DEL TUTTO

Creiamo il file “test.php” nella cartella controllers (/application/controllers/test.php) e inseriamo il seguente codice:

<?php

class Test extends CI_Controller{

  public function index(){
    $data['frase'] = '<h1>Benvenuti sul mio sito dinamico col tema figoso!</h1>';
    $this->load->tema('test',$data);
  }
}

Avete letto bene: con una riga abbiamo caricato il tema e la view ‘test’ (che ora faremo). Il resto dice “estendi il controller di CI, crea la funzione base index, crea una variabile data con chiave frase e passala alle view”.

Vi chiederete… ma se volessi passare più view? Qui arriva il nostro array! Ho fatto in modo che voi possiate caricare una singola vista o più viste, ovviamente per ordine, così da non risentire del problema “libreria esterna” e avere libertà di movimento quasi totale! Quindi in caso di più viste useremo “$this->load->tema(array(‘vista1′,’vista2’),$data);”

La view sarà il contenuto del vostro sito, alla quale abbiamo anche passato la variabile frase (poche righe più sopra).

/application/views/test.php


<h1><?=$frase?></h1>
<p>Questo sarà il contenuto del sito!</p>

Rapido ed indolore! Ma quella variabile $frase da dove salta fuori? Codeigniter vi trasforma tutte le chiavi dell’array passato, in questo caso $data[ ], in variabili vere e proprie! Geniale!

Vogliamo vedere il prodotto finito? Andiamo su http://www.tuosito.it/test ed ammirate il vostro lavoro!!!

Annunci

, , , , , , , , , , , , ,

  1. Lascia un commento

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: