Gestione semplificata dei modal Bootstrap in applicazioni CakePHP 3

In questa semplice guida è illustrato un semplice approccio per la visualizzazione dei modali Bootstrap all’interno di una applicazione CakePHP 3. I passi da rispettare sono i seguenti:

  1. Defininizione del blocco HTML in cui mandare in visualizzazione il modale, sara definito a livello di layout per essere disponibile in tutte le pagine che utilizzando il medesimo layout.
  2. Definizione di un controller per la gestione del modale da mandare in visualizzazione. Lo stesso controller può essere utilizzato pure per gestire i parametri da passare in alternativa ai parametri che è possibile mandare attraverso la request.
  3. Definizione del contenuto del modale definito in src/Template/Modal.
  4. Definizione del link da cui mabdare in esecuzione il tutto.

Definizione del Layout

Viene predisposto il layout con un blocco specifico in cui mandare in esecuzione il modale “myModal”, ovviamente l’esempio potrebbe essere completato inserendo anche i modali bootstrap in formato small o large. La cosa importante è che il template sia predisposto per BOOTSTRAP, io ho utilizzato la versione 3 integrata attraverso BOWER.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>New CakePHP app</title>
        <!-- Sets initial viewport load and disables zooming  -->
        <meta name="viewport" content="initial-scale=1, maximum-scale=1">
        <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="<?= $this->Url->build('/') ?>bower_components/bootstrap/dist/css/bootstrap.min.css">
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="<?= $this->Url->build('/') ?>bower_components/jquery/dist/jquery.min.js"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="<?= $this->Url->build('/') ?>bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    </head>
    <body>
        <!-- content block -->
        <?= $this->fetch('content') ?>
        <!-- #myModal block -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="padding: 10px"></div>
            </div>
        </div> 
        <script>
            /**
             * Remove data on hidden bs modal
             * @param {type} param
             */
            $('#myModal').on('hidden.bs.modal', function (e) {
                $(this).removeData('bs.modal');
            });
        </script>
    </body>
</html>

Attenzione al blocco JQuery, rimuove il contenuto del modale dopo la sua chiusura. Questa situazione viene utilizzata quando dalla stessa risorsa sono invocati modali con contenuti diversi, evitando che il modale visualizzi sempre e solo il contenuto visualizzato la prima volta. Una alternativa sarebbe quella di fare il refresh della pagina e dell’interno layout alla chiusura del blocco, ma può risultare meno pratica.

Definizione del Controller specifico

Quello di seguito illustrato rappresenta un semplice controller che manda in render il template specifico utilizzando  il params[‘pass’][0], mediante il quale viene invocata la risorsa. Ovviamente quello illustrato è un esempio semplificato, possono essere aggiunti controlli ed eccezioni per gestire il caso in cui il nome del template sia errato oppure utilizzare $this->set per creare delle variabili da passare al template invocato.

class ModalController extends AppController {

    /**
     * 
     */
    public function initialize() {
        parent::initialize();
    }

    /**
     * 
     */
    public function display() {
        if (isset($this->request->params['pass'][0])) :
            $this->render(trim($this->request->params['pass'][0]), null);
        endif;
    }
}

Definizione del template specifico

Definito in src/Template/Modal, rappresenta il blocco che sarà mandato in esecuzione dal controller. Ipotizzando di chiamare il template hello_wordl.ctp, è possibile definire un file come di seguito.

<h1>Hello World</h1>
<p>Sono un modale Bootstrap</p>

Lanciamo il modale

A questo punto da qualsiasi pagina, che utilizza il layout DEFAULT illustrato sopra, è possibile utilizzare il seguente codice per lanciare il template all’interno del modale “myModal” predisposto.

<a href="<?= $this->Url->build(['controller' => 'modal', 'action' => 'display', 'hello-world']) ?>" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#myModal">Vedi</a>

L’approccio rappresenta la soluzione tecnica che trovo pratica ed intuitiva, oltre che rapida, per integrare l’uso dei modali Bootstrap all’interno delle nostre applicazioni CakePHP 3.

Lascia un commento