Sei in HOME > Guide Hosting, Domini e Cloud > Come creare una galleria fotografica > Creare una galleria fotografica con il Cloud Storage di Hostingsolutions.it – parte 5

Creare una galleria fotografica con il Cloud Storage di Hostingsolutions.it – parte 5

Nella scorsa puntata abbiamo cominciato a lavorare sul codice della nostra applicazione Photocloud, creando le tabelle sul database (MySql) e creando le classi del modello, sfruttando CodeIgniter come framework MVC.

Controller e View

I Controller in un framework MVC per web application (come CodeIgniter) sono quei componenti che intercettano le chiamate HTTP eseguite dal browser dell’utente, eseguono la logica applicativa, e rimandano alla Vista (o View) appropriata, sia essa una pagina statica, un form, un elenco, un documento JSON o XML. Uno degli aspetti fondamentali di CodeIgniter è che, al contrario di tanti altri framework, cerca di minimizzare le imposizioni agli sviluppatori, ad esempio per quanto riguarda la gestione del flusso, dei template da usare nelle view, eccetera. Ciò garantisce massima libertà e controllo, ma significa anche un maggior sforzo implementativo.

Per prima cosa abbiamo deciso di stabilire delle convenzioni per quanto riguarda la struttura delle pagine:

  • nella directory application/views/includes abbiamo creato il file template.php: tutti i controller dovranno mostrare questa view;
  • il template si aspetterà una variabile $main_content, con il nome della pagina che andrà caricata nel corpo principale del template;
  • oltre a ciò, il template includerà le pagine header.php e footer.php.

Ecco quindi il codice di application/views/includes/template.php:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>
<?php $this->load->view('includes/header'); ?>
<?php $this->load->view($main_content); ?>
<?php $this->load->view('includes/footer'); ?>

 

Da notare, oltre all’inclusione di header.php e footer.php tramite la chiamata $this->load->view(…). Questo metodo è utilizzato nello stesso identico modo nei controller e, nonostante l’apparente semplicità (dopotutto carica semplicemente un file), in realtà esegue diversi compiti ed è di grande aiuto:

  • la forma completa è:
    $this->load->view(‘file_name’, $data, true/false);
  • il primo parametro è il nome del file da caricare come view;
  • il secondo parametro, $data, è opzionale e deve contiene i dati da mostrare nella view. Deve essere obbligatoriamente un array associativo o un oggetto;
  • se $data è un array associativo, tutti i suoi elementi vengono esportati come variabili grazie alla funzione Funzione extract() di PHP;
  • se $data è un oggetto, tutte le sue property sono convertite in un array e passate ad extract() come sopra;
  • il terzo parametro, anch’esso opzionale, determina se inviare direttamente al browser la view (valore false, default) oppure restituirla come stringa (valore true).

Utilizzare il valore true per il terzo parametro è utile per gestire in maniera avanzata le view, ad esempio per rispondere a chiamate AJAX che aggiornano solamente alcuni frammenti di pagina, oppure per costruire layout molto complessi.

Ecco quindi il codice per gli altri due frammenti del template, ovvero application/views/includes/header.php:

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Photocloud</title>
</head>
<body>
  <div class="container">

 

e application/views/includes/footer.php:

  </div><!-- class="container" -->
</body>
</html>

 

Nonostante questi elementi siano ancora molto semplici abbiamo deciso di mantenerli da subito in file separati, presto infatti dovremo modificarli per creare un tema vero e proprio. Alcuni esempi di elementi che andranno inseriti:

  • link fogli di stile e script;
  • suddivisioni strutturali della pagina (principalmente tramite <div>);
  • menu di navigazione;
  • messaggi e link vari, banner, eccetera.

Controller per la homepage

Vediamo ora un esempio pratico di creazione di un “giro completo”: controller, view e configurazione.

Per prima cosa realizziamo il controller Home, che risiederà nel file application/controllers/home.php:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Home extends CI_Controller {

  public function index() {
    $data['main_content'] = 'home';

    $this->load->model('Collection_model');
    $data['collections'] = $this->Collection_model->get_collections(5);

    $this->load->view('includes/template', $data);
  }
}

 

Da notare:

  • abbiamo impostato la voce $data[‘main_content’] = ‘home’ per indicare a CodeIgniter che la view di destinazione, che verrà inclusa nel template come visto sopra, è views/home.php. Da notare che il suffisso .php va omesso;
  • l’utilizzo del metodo get_collections() della classe Collection_model (cfr. scorsa puntata), che carica le 5 collezioni più recenti. Questo elenco sarà disponibile come variabile $collections nella view;
  • il metodo si chiama index(), ad indicare che è il metodo di default di questo controller.

Il controller così realizzato risponderà a queste URL (sostituite www.example.org con la URL di base della vostra installazione):

http://www.example.org/index.php/home/index

http://www.example.org/index.php/home

Vogliamo ora fare in modo che questo controller risponda con il metodo index() quando gli utenti arrivano sulla homepage, ovvero quando digitano uno di questi indirizzi:

http://localhost/internetpost.it/2012/photocloud/deploy/index.php/

http://localhost/internetpost.it/2012/photocloud/deploy/index.php

http://localhost/internetpost.it/2012/photocloud/deploy/

http://localhost/internetpost.it/2012/photocloud/deploy

Per ottenere ciò è sufficiente aprire il file di configurazione application/config/routes.php e modificare la voce default_controller da:

$route[‘default_controller’] = “welcome”;

a:

$route[‘default_controller’] = “home”;

View

Ecco finalmente la view che mostrerà l’elenco delle collezioni:

<h2>Ultime collezioni</h2>

<?php
foreach($collections as $collection) {
  $name = htmlspecialchars($collection->name, ENT_NOQUOTES, 'UTF-8');
  $detail_url = base_url() . 'index.php/collection/get/' . $collection->id;
?>
    <a href="<?php echo $detail_url;?>">
      <img src="<?php echo $collection->thumbnail_path; ?>"
          width="<?php echo $collection->thumbnail_width; ?>"
          heigth="<?php echo $collection->thumbnail_height; ?>"
          alt="<?php echo $name;?>">
      <h5><?php echo $name;?></h5>
    </a>
<?php
}
?>

 

Ovviamente il progetto finale avrà un aspetto migliore, qui ci premeva mostrare solamente l’essenza dello sviluppo con CodeIgniter, che è davvero molto veloce e immediato, senza troppi fronzoli o complicazioni inutili.

Sviluppi

Nella prossima puntata daremo un aspetto più professionale all’applicazione mediante l’utilizzo di Twitter Bootsrap, una framework CSS davvero molto ben fatto e sciuramente adatto ad un’applicazione come Photocloud.

Links