cakephp twitter bootstrap

 

Ehi, se ti interessa un CMS basato su CakePHP, dai un’occhiata a PhpStarDust CMS 😉

Nelle settimane scorse ho avuto l’influenza, una vera rottura. Non ce la facevo proprio a lavorare ma non potevo certo passare il tempo solo a leggere e guardare puntate di Big Bang Theory. Avevo bisogno di qualcosa che mi mantenesse allenato il cervello 😀

Così mi sono messo a “giocare” con CakePHP e, integrando Twitter Bootstrap, ho realizzato un CMS che ho deciso di chiamare Bootcake EWD e che, ovviamente, condivido con te (e con il resto dell’umanità) visto che ho scritto ovunque che sono un sostenitore dell’open source 😀

Puoi scaricare i files alla fine del post.

Di cosa si tratta?

Bootcake EWD non è un CMS “completo” come, ad esempio, WordPress o Joomla. L’ho pensato come una sorta di “CMS base“, un punto di partenza per poter costruire, in poco tempo, qualsiasi tipo di CMS o Web Applications che necessiti di un back-end per la gestione dei contenuti. Per tutti gli sviluppatori che amano lavorare con un framework MVC, in particolare CakePHP, Bootcake EWD può essere un buon punto di partenza per lo sviluppo dei propri progetti.

Bootcake EWD, dopo l’installazione, mette a disposizione due soli moduli: Users e Pages. Users per creare gli utenti che possono accedere al back-end e Pages per creare le pagine del sito/applicazione. Ricopiando i files app/Controller/PagesController.php (o UsersController.php), app/Model/Page.php e le views (add.ctp, edit.ctp, index.ctp) presenti in app/View/Pages e cambiandone i nomi e le caratteristiche (database e form nelle views), si potranno, in pochissimo tempo, creare altri moduli. Nota bene che le view app/View/Pages/list_pages.ctp e app/View/Pages/view.ctp sono i files front-end che permettono di visualizzare pubblicamente la lista di pagine presenti e la singola pagina. Nel file app/webroot/js/functions.js ho inserito alcune funzioni necessarie per il funzionamento del back-end. In app/View/Elements ci sono i files header.ctp e footer.ctp che sono porzioni di markup “incluse” in tutte le view.

Come integrare Twitter Bootstrap in CakePHP?

Caricare il file bootstrap.css nella cartella app/webroot/css (caricare anche il file bootstrap-responsive.css per layout responsive). Caricare il file bootstrap.js nella cartella app/webroot/js. Quindi, caricare i files delle icone Glyphicons (glyphicons-halflings-white.png e glyphicons-halflings.png) nella cartella app/webroot/img. A questo punto, creare un nuovo file di layout nella cartella app/View/Layouts che chiameremo bootstrap.ctp e che conterrà il codice di markup di Bootstrap con le inclusioni dei files necessari per il suo funzionamento.

<meta name="description" content="&lt;?php echo $description; ?&gt;" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap --><script type="text/javascript" src="http://code.jquery.com/jquery.js"></script><!--?php echo $this--->Html-&gt;css('bootstrap.css'); ?&gt; <!--?php echo $this--->Html-&gt;css('bootstrap-responsive.css'); ?&gt; <!--?php echo $this--->Html-&gt;script('bootstrap.js'); ?&gt; <!--?php echo $this--->Html-&gt;script('functions.js'); ?&gt;<!--?php echo $this--->fetch('content'); ?&gt;

Abbiamo integrato Bootstrap, ora, nelle views possiamo usufruire di tutta la potenza delle sue interfacce. Ad esempio, se un pulsante di un form vogliamo renderlo “bootstrap-style“, ci basterà specificarlo come illustrato di seguito:

echo $this-&gt;Form-&gt;submit('Save',array('class'=&gt;'btn btn-success'));

Questo per quanto concerne CakePHP, ovviamente, possiamo anche inserire il solo codice html di Bootstrap laddove ci serve.

Come installare e usare Bootcake EWD?

La procedura d’installazione è quella di CakePHP con qualche piccola aggiunta. Caricare tutti i files e cartelle presenti nella cartella bootcakeewd sullo spazio web, dopodichè, settare le variabili url, sitename, description e uploads nel file app/Config/core.php. In url mettere l’indirizzo del sito (con slash finale), in sitename il nome del sito, in description la descrizione e in uploads il path della cartella in cui finiranno i files uploadati (anche qui slash finale). Questa cartella sarà sempre, comunque, app/webroot/files. Ora specificare i parametri di connessione al database MySQL nel file app/Config/database.php. Ti ricordo che le url le puoi gestire dal file app/Config/routes.php e che, se installi in una sottodirectory, devi specificare la direttiva RewriteBase /nome_cartella/ nei files htaccess che trovi in tuo_sito/.htaccess, tuo_sito/app/.htaccess e tuo_sito/app/webroot/.htaccess.

Ora, richiamare tuo_sito/install per installare Bootcake EWD, in pratica, per creare le tabelle nel database. Dopo questo passaggio, il file app/Controller/InstallationController.php, può anche essere eliminato poichè non serve più. Per accedere al back-end richiamare tuo_sito/admin ed accedere inserendo “admin” sia come username che come password. Creare un nuovo utente ed eliminare quello di default.

Per verificare che l’installazione sia riuscita puoi richiamare tuo_sito/check_installation.

Ora è tutto pronto, devi solo dare sfogo alla tua creatività per sviluppare il tuo progetto 🙂

E’ ovvio che un requisito che devi avere è un minimo di familiarità con i framework MVC. Ma, oggi come oggi, usare questi strumenti è ormai divenuto uno standard per lo sviluppo di web application (per fortuna!). Una cosa interessante che otteniamo dall’integrazione di Bootstrap è che, anche il layout del back-end, è totalmente responsive. Ovviamente, questa “base”, può essere migliorata e/o ampliata. Se decidi di dedicarci tempo e di combinarci qualcosa facci sapere eh 🙂

Se avete domande chiedete pure, come sempre, discutiamo nei commenti 😉

Download

Se scarichi e utilizzi Bootcake EWD significa che hai letto e dato il tuo assenso alle seguenti condizioni:

– EmaWebDesign non si assume alcuna responsabilità, implicita od esplicita, su eventuali danni provocati dall’uso proprio o improprio di Bootcake EWD.
– chi utilizza Bootcake EWD lo utilizza completamente a suo rischio e pericolo assumendosene tutte le responsabilità.

Versione 1.0
Licenza GPL

http://www.emawebdesign.com/wp-content/plugins/downloads-manager/img/icons/winzip.gif download: Bootcake EWD (2.03MB)
added: 21/02/2013
clicks: 1919
description: Bootcake EWD è un CMS "base" realizzato integrando Twitter Bootstrap con CakePHP.

NO SPAM. Non fornirò la tua email a terzi e riceverai solo contenuti che ti interessano sugli argomenti che tratto e potrai cancellarti quando vuoi con un link che trovi in tutte le email.