Creare una galleria fotografica con il Cloud Storage di Hostingsolutions.it - parte 6

Come promesso nella scorsa puntata, oggi vedremo come adattare Twitter Bootstrap alla nostra applicazione, donandole un aspetto professionale, usabile, adattabile a più dispositivi.

Twitter Bootstrap

Come i nostri lettori ricorderanno, in passato ci siamo già occupati di Twitter Bootstrap, rimandiamo dunque a quegli articoli per un’introduzione più generale e qualche dettaglio tecnico. Riassumiamo qui solamente le motivazioni che ci hanno spinto verso l’utilizzo di un CSS Framework, e di Twitter Bootstrap in particolare:

velocizza enormemente la creazione di una web application, perché fornisce stili e convenzioni già pronti, ben disegnati, personalizzabili ma soprattutto… che non vanno creati da zero!
aiuta a strutturare meglio il codice HTML, che sarà più corretto semanticamente e di conseguenza più SEO-friendly (ottimizzato per i motori di ricerca);
se scelto bene e utilizzato correttamente, permette di mantenere un codice molto pulito e facilmente modificabile in futuro, qualora si vogliano re-implementare da zero tutti gli stili o si voglia passare ad un altro CSS Framework;
le caratteristiche di responsive web design permettono di adattare la visualizzazione, senza modifiche al codice, a display mobile come tablet, cellulari, eccetera;
ha una grandissima base di utilizzatori ed è attivamente sviluppato e migliorato.

Vediamo quindi come adatteremo il framework alla struttura della nostra applicazione. Come ricorderete, abbiamo creato un template generico, che verrà richiamato da tutti i controller. Questo template è memorizzato in
application/views/includes/template.php

che include a sua volta le pagine (nella stessa directory) header.php e footer.php.

Prima di modificare queste pagine, dobbiamo creare una directory assets nella directory principale (o root) della nostra applicazione, e copiarvi tutte le risorse necessarie, reperibili nella distribuzione standard di Twitter Bootstrap ovvero queste directory:

css: directory dei fogli di stile, dove ne aggiungeremo altri creati da noi o necessari ad altri componenti;
img: immagini e icone utilizzate dall’applicazione;
js: sorgenti Javascript.

Fatto ciò, possiamo modificare il file header.php:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>PhotoCloud</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="PhotoCloud">
    <meta name="author" content="Dimitri De Franciscis per www.internetpost.it">
    <base href="<?php echo base_url();?>" />

    <!-- Le styles -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    <link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="assets/css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" media="screen" />

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap-transition.js"></script>
    <script src="assets/js/bootstrap-carousel.js"></script>
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="#">Photocloud</a>
          <ul class="nav">
            <li ><?php echo anchor('/', 'Home'); ?></li>
            <li class="divider-vertical"></li>
            <li ><?php echo anchor('collection/index', 'Collezioni'); ?></li>
            <li class="divider-vertical"></li>
            <li ><?php echo anchor('/home/about', 'About'); ?></li>
          </ul>
          <div class="nav-collapse pull-right">
            <?php
            if (isset($this->session->userdata['logged_in'])) {
              echo anchor('login/logout', '<i class="icon-user"></i>Logout', 'class="btn"');
            }
            else {
              echo anchor('login/index', '<i class="icon-user"></i>Login', 'class="btn"');
            }
            ?>
          </div>
        </div><!-- class="container" -->
      </div><!-- class="navbar-inner" -->
    </div><!-- class="navbar" -->

    <div class="container">
      <?php
      if (isset($this->session->userdata['logged_in'])) {
        echo '<div class="pull-right">';
        echo 'Logged in as <em>' . $this->session->userdata['username'] . '</em>';
        echo '</div>';
      }
      ?>

      <?php
      if (isset($show_masthead)) {
        ?>
      <div class="hero-unit">
        <h1>Photocloud</h1>
        <p>Gallery fotografica basata su PHP e Cloud Storage.</p>
      </div>
        <?php
      }

      $flashErrorMessages = $this->session->flashdata('errorMessages');
      $showErrors = isset($errorMessages) || ! empty($flashErrorMessages);

      if ($showErrors) {
        echo '<div class="alert alert-error"><h3>Errore</h3>';
        if (isset($errorMessages)) {
          // TODO better formatting
          print_r($errorMessages);
        }
        if (isset($flashErrorMessages)) {
          // TODO better formatting
          print_r($flashErrorMessages);
        }
        echo '</div>';
      }
      ?>

Come potete notare, ne abbiamo approfittato per aggiungere diversi elementi al template:

una navigation barin cima alla pagina, con diversi link e pulsanti:
- link alla homepage e alla pagina “Collezioni” (che vedremo in un’altra puntata);
- pulsante di Login, che viene mostrato quando l’utente non è entrato come administrator;
- pulsante di Logout se siamo entrati come administrator;
un <div> con l’attributo class=”hero-unit”: è il classico mega-titolone che va tanto di moda oggi. Viste le dimensioni ingombranti, abbiamo deciso di mostrarlo solo se la variabile $show_masthead è definita.

La pagina footer.php invece rimane identica:

    </div> <!-- /container -->
  </body>
</html>

Così come il template principale, template.php, che riportiamo qui per completezza:

<?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'); ?>

Una volta fatte queste modifiche, la homepage avrà un aspetto decisamente più professionale e curato:

Sviluppi

Nella prossima puntata vedremo come creare una sezione amministrativa e proteggerla con username + password.

Twitter Bootstrap

Sviluppi

Links