La nostra prima applicazione Vediamo come utilizzare praticamente CodeIgniter in un server locale per creare un piccolo sito aziendale. Utilizzeremo il nostro IDE preferito NetBeans per PHP scaricabile qui: http://netbeans.org/downloads/index.html. Possiamo scegliere la versione per php di soli 25 MB, rispetto alla completa, che per l'utima versione, la 6.8 e di ben 237MB. Gli utenti Linux possono trovare nei rispettivi repository la propria versione di NetBeans, che tuttavia potrebbe essere meno recente di quella scaricabile dal sito del produttore. I passaggi seguenti si riferiscono a l'utilizzo di Codeigniter e NetBeans in ambiente Linux, Ubuntu 8.04.1, su sistema LAMP debitamente installato e configurato [nota: cfr. mio tutorial su joomla in Linux: http://www.istitutomajorana.it/index.php?option=com_content&task=view&id=874&Itemid=33].
1. Predisponiamo l'ambiente di lavoro Creiamo la nostra directory di lavoro nella root del server apache e per comodità di sviluppo attribuiamola all'utente che svilupperà la nostra applicazione, che chiamiamo “utente”. Ricordiamo che in Ubuntu l'utente di apache è di default “www-data”, per questo occorre cambiare il nome del proprietario che utilizzerà la cartella di lavoro: ~$ sudo mkdir /var/www/codeIgniter ~$ sudo chwon -R utente:utente /var/www/codeIgniter/
Ora scompattiamo l'archivio di CodeIgniter che abbiamo scaricato dal sito, nella nostra home utente. Rinominiamo la cartella “codeIgniter”. Nel nostro esempio abbiamo inserito la cartella nella sottocartella Documenti. Lanciamo il nostro NetBeans e creiamo un nuovo progetto che chiameremo codeIgniter, stando attenti di scegliere “Crea un progetto da un codice esistente”, per indicare la cartella che abbiamo scompattato.
I passi successivi saranno quelli di indicare la cartella del progetto da utilizzare, il nome e il server web, che sarà necessariamente localhost.
1
Tutte queste configurazioni potranno sempre essere cambiate da file > Project Proprieties (CodeIgniter), come nell'immagine seguente. Controllate che sia selezionato il campo “copia i files da sorgenti “to another location”.
Se tutto è andato bene, cliccando sul pulsante “Run Project”, dovrebbe apparire la schermata di benvenuto di CodeIgniter:
2
Non è stato nemmeno necessario configurare $config['base_url'], nel file system/application/config/config.php. Ci ricorderemo di farlo, ovviamente, quando decideremo di pubblicare il nostro lavoro su un hosting. A questo punto tutto è pronto per iniziare a programmare con il nostro nuovo framework! In questo primo esempio di programmazione non faremo uso di database, ma semplicemente creeremo una minisito composte dalle classiche quattro pagine, Home, Chi siamo, Prodotti, Dove siamo e Contatti, facendo uso della gestione delle url e delle views messe a disposizione da CodeIgniter. La pagina contatti, sarà creata in un capitolo successivo facendo uso della libreria “email”.
2. Il template Scarichiamoci un template html, per esempio da questo sito: http://www.freelayouts.com/websites/htmltemplates Cerchiamo uno abbastanza recente e sufficientemente complesso a tre colonne, in modo da potervi facilmente implementare altre sezioni in futuro. Scegliamo “PremiumSeries”. Scompattiamo l'archivio. Nella cartella “premiumseries”, troviamo il file “index.html” che dobbiamo rinominare in index.php, il file default.css e la cartella images. Copiamo la cartella images e il file css nella root delnostro sito. Copiamo la cartella premiumseries con dentro il solo file index.php in /system/application/views/. Prima di poter utilizzare il nostro template, dobbiamo fare alcune piccole configurazioni. Cambiamo la pagine predefinita, da welcome a sito, agendo sul file system/application/config/routes.php, alla linea 43: $route['default_controller'] = "sito";
e alla linea 14 del file di configurazione system/application/config/config.php, mettiamo l'indirizzo del nostro sito: $config['base_url'] = "http://localhost/codeIgniter";
3. Creiamo in nostro primo controller Il nostro controller potrebbe chiamarsi semplicemente Sito. Creiamo quindi il file sito.php in system/application/controllers: <?php class Sito extends Controller { function Sito() { parent::Controller(); } function index() { $this->load->view('premiumseries/index'); } }
Basterà puntare il browser su http://localhost/codeIgniter per vedere il risultato del nostro lavoro, o ancora più semplicemente eseguire il “run Project” o F6 dal nostro ide.
3
4. Personalizzazione del template Ora possiamo lavorare sul nostro sito, pulendo le sezioni che non ci interessano nel template e inserendo i controller per le pagine. La pulizia del template può essere fatte semplicemente commentando tutte le sezioni che non ci interessano e modificando i menu con le pagine che ci interesseranno. Alle fine avremo questo risultato:
4
5. Sviluppo del nostro sito Ora creiamo i contenuti delle nostre pagine, Home, Chi siamo, Prodotti, Dove siamo e Contatti. Le pagine le otterremo tagliando dal template il contenuto centrale che sostituiremo con un segna posto in php simile a questo: <?= $content_text; ?>
Ora bisogna che il controller passi alla views questa variabile con il valore relativo della nostra pagina, che di default sarà home. Per questo modifichiamo la funzione index, in questo modo: function index() { $this->data['content_text'] = "Benvenuti in home page"; $this->load->view('premiumseries/index',$this->data); }
dove il contenuto “Benvenuti in home page” potrà essere sostituito con tutto il codice compreso tra i div con id="content" del nostro template. Per le altre pagine, dobbiamo creare altre funzioni: function chi_siamo(){ $this->data['content_text'] = "Benvenuti nella sezione CHI SIAMO"; $this->load->view('premiumseries/index',$this->data); } function prodotti(){ $this->data['content_text'] = "Benvenuti nella sezione PRODOTTI"; $this->load->view('premiumseries/index',$this->data);
ecc... Se infatti ora digitiamo una url del tipo: http://localhost/codeIgniter/index.php/sito/chi_siamo
giungiamo alla nostra pagina. Tuttavia non visualizziamo correttamente il layout della pagina perché dobbiamo settare bene i percorsi per i file css e le immagini del template. Per questo ci serviamo dell'helper “url”. Nella funzione Sito, aggiungiamo la stringa: $this->load->helper('url'); in questo modo: function Sito() { parent::Controller(); $this->load->helper('url'); }
Ora nel nostro template impostiamo il percorso del css, in questo modo: <?php echo base_url()?>/default.css"
Non ci resta che sistemare il menu per permettere la navigazione. Per farlo cambiamo la funzione Sito, nel modo seguente e magari aggiungiamo anche una variabile per il titolo della pagina da passare al tag title. Di seguito il codice completo del nostro controller: <?php class Sito extends Controller { public $data;
5
function Sito() { parent::Controller(); $this->load->helper('url'); $this->data['top_menu']['home'] = anchor('sito','Home',array('title'=>'Home')); $this->data['top_menu']['chi_siamo'] = anchor('sito/chi_siamo','Chi Siamo',array('title'=>'Chi Siamo')); $this->data['top_menu']['prodotti'] = anchor('sito/prodotti','Prodotti',array('title'=>'Prodotti')); $this->data['top_menu']['dove_siamo'] = anchor('sito/dove_siamo','Dove Siamo',array('title'=>'Dove Siamo')); $this->data['top_menu']['contatti'] = anchor('sito/contatti','Contatti',array('title'=>'Contatti')); }
function index() { $this->data['content_title'] = "Home"; $this->data['content_text'] = "Benvenuti in home page"; $this->load->view('premiumseries/index',$this->data); } function chi_siamo(){ $this->data['content_title'] = "Chi Siamo"; $this->data['content_text'] = "Benvenuti nella sezione CHI SIAMO"; $this->load->view('premiumseries/index',$this->data); } function prodotti(){ $this->data['content_title'] = "Prodotti"; $this->data['content_text'] = "Benvenuti nella sezione PRODOTTI"; $this->load->view('premiumseries/index',$this->data); } function dove_siamo(){ $this->data['content_title'] = "Dove Siamo"; $this->data['content_text'] = "Benvenuti nella sezione DOVE SIAMO"; $this->load->view('premiumseries/index',$this->data); } function contatti(){ $this->data['content_title'] = "Contatti"; $this->data['content_text'] = "Benvenuti nella sezione CONTATTI"; $this->load->view('premiumseries/index',$this->data); }
6
}
Nel nostro template dobbiamo inserire la posto del menu orizzontale e verticale (senza l'id main) il seguente codice: <ul id="main"> <li class="current_page_item"><?php echo $top_menu["home"]?></li> <li><?php echo $top_menu["chi_siamo"]?></li> <li><?php echo $top_menu["prodotti"]?></li> <li><?php echo $top_menu["dove_siamo"]?></li> <li><?php echo $top_menu["contatti"]?></li> </ul>
6. Indicazioni per sviluppare ulteriormente la nostra applicazione La nostra applicazione però presenta alcuni limiti. Se per esempio i contenuti delle pagine semistatiche sono grossi, diventa scomodo passarli con un array. In questo caso potremmo dividere il template in tre parti: header content e footer e importare il corpo centrale, content in una view apposita. In questo caso il codice del controller sito, assumerebbe questa forma: <?php
class Sito extends Controller { public $data;
function Sito() { parent::Controller(); $this->load->helper('url'); $this->data['top_menu']['home'] = anchor('sito','Home',array('title'=>'Home')); $this->data['top_menu']['chi_siamo'] = anchor('sito/chi_siamo','Chi Siamo',array('title'=>'Chi Siamo')); $this->data['top_menu']['prodotti'] = anchor('sito/prodotti','Prodotti',array('title'=>'Prodotti')); $this->data['top_menu']['dove_siamo'] = anchor('sito/dove_siamo','Dove Siamo',array('title'=>'Dove Siamo')); $this->data['top_menu']['contatti'] = anchor('sito/contatti','Contatti',array('title'=>'Contatti')); }
La cartella “premiumseries” conterrà i seguenti file: header.php, footer.php e template.php. Il file template.php, avrà questo codice: <?php $this->load->view('premiumseries/header',$top_menu); $this->load->view($content); $this->load->view('premiumseries/footer'); ?>
7
la seconda riga contiene la variabile per per importare la views passata dal parametro del menu.
Conclusione Questa nostra prima semplicissima applicazione, può essere utilizzata per creare in modo semplice la base per un sito generico, senza l'utilizzo di database per gestire i contenuti di poche pagine statiche, che non dovranno essere cambiate frequentemente. La gestione delle stesse avviene senza nemmeno un template engine, ma utilizzando solo delle views create ad hoc e importate nella parte centrale del template. Una soluzione più raffinata, può essere quella di utilizzare una libreria per gestire meglio il template: http://maestric.com/doc/php/codeigniter_template. Nel caso volessimo sviluppare ulteriormente in nostro sito, dovremmo provvedere a riscrivere la pagina contatti utilizzando la libreria “email” [cfr. http://codeigniter.com/user_guide/libraries/email.html]. Un esempio lo troviamo in questo tutorial: http://godbit.com/article/introduction-to-code-igniter-part-2. Per scrivere il form della views contatti, possiamo utilizzare l'helper “form” [cfr. http://www.codeigniteritalia.it/gli-helper/5-formhelper].
8