conoscere il territorio

Working in progress sul progetto

http://umbriawayformazione.altervista.org/ci_project_glocal/

Riassunto delle puntate precedenti

All’ indirizzo https://umbriawaydesign.wordpress.com/2021/03/05/territorio-storia-cultura-conoscere-le-risorse-che-hai-sotto-casa-con-glocal-web-app-come-mettere-in-moto-un-progetto-con-codeigniter-prima-puntata/ abbiamo visto come inizializzare un progetto complesso, come fare delle valutazioni strategiche legate alla tecnologia da usare (usiamo codeigniter perché oltre ad essere un framework potente è anche leggero e facilmente modellabile) e ai contenuti da mostrare. Ci siamo lasciati con un problema, come mai non vedo contenuti? Perché dobbiamo agganciare le risorse del template originale, come fare?

Agganciare le risorse esterne pensando da Codeigniter

Bene per fortuna avendo all’ attivo già un progetto che ci ha dato da lavorare per due-tre mesi, indirizzo http://umbriawayformazione.altervista.org/ci_project_seicento/ adesso siamo in grado di risparmiare un sacco di tempo almeno sulle impostazioni base. Infatti lavorando con due editor possiamo importare il codice di un progetto in un altro usando un semplice copia e incolla

Lavorare sul file config.php

Il file config.php che si trova dentro APPLICATION/CONFIG va riaggiustato dopo la nostra prima stesura nel primo articolo perchè dobbiamo fare in modo di agganciare le risorse esterne. Quindi vediamo come diventa tenendo conto che la nostra cartella ASSETS che sta allo stesso livello di APPLICATION è composta da quattro directory interne che sono IMG/CSS/JS/FONTS:

$config['base_url'] = 'http://umbriawayformazione.altervista.org/ci_project_glocal/';
$config['assets'] = array (
'img' => $config['base_url'].'assets/img',
'css' => $config['base_url'].'assets/css',
'js' => $config['base_url'].'assets/js',
'fonts' => $config['base_url'].'assets/fonts'
);

Perfetto a questo punto siamo a metà dell’ opera, adesso dobbiamo lavorare tanto sul file index.php presente dentro la cartella VIEW presente in APPLICATION, in particolare dobbiamo trasformare tutti i link statici in dinamici, vediamo in dettaglio. Si trata di sostituire a

<link href="css/custom.css" rel="stylesheet">

l’informazione di aggancio dinamica:

<link rel="stylesheet" type="text/css" href="<?php echo $this->config->item('assets')['css']?>/custom.css">

e questa operazione va fatta con lo stesso criterio per tutti i nostri CSS che si trovano nel template. Poi ovviamente si lavora anche sull’inclusione per gli altri tipi di file. Per esempio i JS statici:

<script src="js/bootstrap.min.js"></script>

diventa:

<script src="<?php echo $this->config->item('assets')['js']?>/bootstrap.min.js"></script>

e si procede a sostituire tutti i riferimenti statici con lo stesso criterio. Fatte tutte queste conversioni d statico a dinamico rifacciamo FTP con il nostro FileZilla dopodichè torniamo a vedere come appare ora il nostro progetto:

Ancora qualcosina da rifinire!

Ok adesso è tutta un’ altra musica e qualcosa è cambiato senza citare il titolo di un film famoso. Ma ci accorgiamo che alcune immagini non riusciamo a visualizzarle come mai? Perchè dobbiamo fare lo stesso lavoro di puntamento di cui sopra, per esempio una immagine tradizionale come:

<img class="img-responsive img-circle center-block" src="images/phone.jpg" alt="">

dobbiamo convertirla in:

<img class="img-responsive img-circle center-block" src="<?php echo $this->config->item('assets')['img']?>/umbria.jpg" alt="web developer umbria">

Attenzione alla cache quando sbagliamo path e magari non vediamo le immagini , il comando per Browser Windows e Linux : CTRL + F5 può forzare il refresh della singola pagina consentendoci di aggirare il problema della visibilità sull’ aggiornamento dei fogli di stile

Se non funziona qualcosa è perché abbiamo sbagliato a non segnalare il nome della cartella giusta dove è contenuto il file, quindi occorre anche verificare sul file config.php che cosa esattamente abbiamo indicato come directory, in ogni caso alla fine siamo di fronte a un raro caso in questo anno idilliaco di “è andato tutto bene”, come testimonia la nostra home. Basta sincerarsi ad esempio che nel foglio di stile ci sia il puntamento corretto nella definizione della classe tipo per esempio:

.item {
	background: url('../img/umbria1.jpg');
	}

CONCLUSIONI

Bravo hai fatto funzionare tutta la parte statica con codeigniter, ma ti sei accorto che ora hai il problema di lavorare sui contenuti e non è roba da poco? Del resto se hai voluto la bicicletta pedala! Quindi l’ultimo passo è quello di aggiustare la homepage con contenuti coerenti e sensati, importando e personalizzando tutta la grafica che vuoi magari approvvigionandoti dal bellissimo https://unsplash.com/!

Rispondi

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

Logo di 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...