php, Senza categoria

Ma è difficile implementare bootsrap in Codeigniter?

Come fare a implementare bootstrap in codeigniter? E’ difficile, complicato, devo fare un corso alla NASA? Nulla di trascendentale, anche se prima bisognerebbe partire da come mostrare una pagina a piacere al posto della consueta Welcome.php che genera un saluto gratificante all’ utente, ma dando per scontato che l’utente sappia risolvere questo facile dilemma (che comunque verrà visto alla fine in questo tutorial, basta avere un pò di pazienza e sapere quello che si deve fare, per cui il primo passo è andare su https://www.codeigniter.com/download e scaricare il famoso framework che una il paradigma Model-View-Control ossia il model e le viste mandano i dati al controller che li rielabora e per quanto riguarda le viste rispedisce tutto alla VIEW per rilanciare indietro il codice al browser, più difficle da raccontare che da capire in pratica con un editor sotto mano. Scompattata la cartella mettiamo in XAMPP, rinominiamola in bootstrap e inseriamola dentro la cartella CODEIGNITER (è una scelta personale per visualizzare i progetti). A questo punto andiamo a collegarci con https://getbootstrap.com/docs/4.1/getting-started/download/ e scarichiamo dalla prima sezione quella del Compiled CSS and JS e scompattiamo nella cartella download. Andiamo poi su https://jquery.com/download/ e scarichiamo il file https://code.jquery.com/jquery-3.3.1.min.js che una volta salvato possiamo andare a inserire nella cartella js di bootstrap, dove andremo a creare una cartella ASSETS che tradotto sta per risorse. Questa cartella andrà inserita nella root del framework scaricato. A questo punto le nostre risorse ci sono e serve lincarle ma come? Nella vista andiamo a spezzare una pagina HTML che è composta da tre parti, quindi HEAD, BODY e FOOTER. Scomposta in tre file la nostra pagina web conterrà al suo interno i tag utili per la parte interessata di quella sezione, più le risorse per andare a lincare le nostre risorse. Ad esempio nella pagina head dovremmo linkare quello che ci interessa. Nell’ inclusione del file head.php metteremo

<html>

<head>

<title>inclusione di bootsrap in codeigniter</title>

<link rel=”stylesheet” href=”<?php base_url();?>assets/css/bootstrap.min.css”>

</head>

<body>

mentre nel file di inclusione footer.php inseriamo

<script src=”<?php base_url();?>assets/js/jquery-3.3.1.min.js”>

<script src=”<?php base_url();?>assets/js/bootstrap.min.js”>

</body>

</html>

a questo punto prendiamo il codice di una pagina web responsiva fatta con bootstrap, oppure uno sei suoi componenti, andando a recuperarlo o dal sito bootsrap menzionato sopra o da siti didattici come https://www.w3schools.com/bootstrap4/default.asp, prendiamo il codice del componente o della pagina che ci interessa e incolliamolo nel file body.php e siamo già a buon punto ma attenzione perchè adesso dobbiamo configurare il nostro framework che è settato per vedere di default la pagina di benvenuto. Quindi andiamo sul file di configurazione autoload.php e andiamo a inserire il parametro URL tra virgolette $autoload[‘helper’] = array(‘url’); Ora si va a cercare il file di configurazione routes.php e si imposta il parametro $route[‘default_controller’] = ‘home’; questo significa che devo creare un file nell’ Application controller che si chiamerà Main.php che conterrà al suo interno le seguenti istruzioni:

<?php

defined(‘BASEPATH’) OR exit(‘No direct script access allowed’);

class Home extends CI_Controller {

public function index()

{

$this->load->view(‘head’);

$this->load->view(‘body’);

$this->load->view(‘footer’);

}

in cui si evince che le viste vengono caricate sostanzialmente e dove si nota il nome della classe in maiuscolo che é uguale al nome del file e anche al richiamo che abbiamo nel file di instramento nella cartella config; tutto quello che bisogna fare ora è visualizzare il risultato ottenuto all’ indirizzo http://www.farwebdesign.com/codeigniter/bootstrap/ .Complesso? Complicato? Può darsi, ma il vantaggio di lavorare in questo modo è quella di avere alle spalle una applicazione solida e robusta che oltre a garantire maggiori margini di sicurezza semplifica e riduce all’ osso il codice nelle parti che vanno controllate, quindi maggior ordine e chiarezza su dove intervenire dopo una prima fase di inevitabile sbandamento! A questo punto complichiamoci la vita. Nella navbar in alto ci sono tre link, mentre con il classico html sarebbe facili riempirli magari con tre url del tipo https://www.umbriaway.eu/ o https://www.umbriashop.eu/ o http://www.umbriaway.it/ in codeigniter come si riesce a ottenere lo stesso risultato? Semplice si va sul file body e si completano i link vuoti trasformando la navbar in questo modo:

<nav class=”navbar navbar-expand-sm bg-dark navbar-dark”>

<a class=”navbar-brand” href=”#”>Navbar</a>

<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#collapsibleNavbar”>

<span class=”navbar-toggler-icon”></span>

</button>

</nav>

e funziona se spedisco i file via FTP su server? Certo che si perché sono file esterni ma se ci aggiungo un link che punta a un file tipo

<li class=”nav-item”>

<a class=”nav-link” href=”mission.php” target=”_blank”>Mission</a>

</li>

come faccio a vederlo? Lo inserisco con gli altri e visualizzo ma cosa ottengo? Qualcosa del tipo: The requested URL /codeigniter/bootstrap/mission.php was not found on this server. E allora che fare? Occorre andare sul controller e aggiungere la nuova vista con: $this->load->view(‘mission.php’); a questo punto ricarico e…..riottengo lo stesso risultato come mai?! Per questo dilemma lasciamo la soluzione a una delle prossime puntate! Che codeigniter sia con voi nei secoli dei secoli!

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...