Italian webdesign » Developing http://www.italianwebdesign.it La community per aspiranti webdesigner Wed, 08 Feb 2012 13:42:12 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Guida php e scripting su Web Magazine http://www.italianwebdesign.it/guida-php-e-scripting-su-web-magazine/ http://www.italianwebdesign.it/guida-php-e-scripting-su-web-magazine/#comments Thu, 14 Apr 2011 12:10:57 +0000 Lauryn http://www.italianwebdesign.it/?p=7641 A partire dal nuovo anno Web Magazine ci ha proposto nuove rubriche interessanti da seguire. Una fra le tante è la guida al php, scritta da Federico e che è già giunta all’ottava puntata.

Inutile dirvi che per chi inizia con il web development è una manna. Buono studio!

Immagine 4 Guida php e scripting su Web Magazine

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/guida-php-e-scripting-su-web-magazine/feed/ 0 Mysql e database: la struttura e la chiave primaria http://www.italianwebdesign.it/mysql-e-database-la-struttura-e-la-chiave-primaria/ http://www.italianwebdesign.it/mysql-e-database-la-struttura-e-la-chiave-primaria/#comments Mon, 25 Oct 2010 05:46:35 +0000 Lauryn http://www.italianwebdesign.it/?p=6753 Chi di voi non ha mai guardato dentro un database e non ha guardato com’è fatto? Ok, per chi non ha mai masticato database e linguaggi di programmazione sembrerà di leggere arabo, ma è tutto molto semplice.

Di solito i dati che estrapoliamo o inviamo ad un database sono organizzati per tabelle, alle quali diamo un “nome” univoco e che sono organizzate per “colonne” di dati. Ebbene, una cosa importantissima nella creazione di un database, è quella di avere sempre una cosiddetta chiave primaria, per metterla sul pratico, di solito è l’ID univoco di un post, un commento, o qualsivoglia dato presente in una tabella.

Esempio di tabella:

tab44 Mysql e database: la struttura e la chiave primariaTramite questo articolo, Yourinspirationweb ci spiega cos’è la chiave primaria. Giusto un po’ di teoria per chi non “smanetta” con i database, ma una base fondamentale per chi invece vuol farlo. Sono curiosa di seguire i tutorial che seguiranno. A presto!

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/mysql-e-database-la-struttura-e-la-chiave-primaria/feed/ 16 Upload per trascinamento con html5, ajax e php http://www.italianwebdesign.it/upload-per-trascinamento-con-html5-ajax-e-php/ http://www.italianwebdesign.it/upload-per-trascinamento-con-html5-ajax-e-php/#comments Wed, 29 Sep 2010 11:24:04 +0000 Giancarlo D'Urso http://www.italianwebdesign.it/?p=6593 Il cosiddetto web 2.0 è nato per rispondere alla crescente richiesta di interazione uomo-macchina su internet. Essere attratti da un effetto particolare, o da un’applicazione interrattiva rende un sito web più appetibile e accende la curiosità dell’utente. La stessa curiosità che ho avuto io, quando ho scoperto che su gmail si possono allegare i file, durante la composizione delle email , attraverso l’upload per trascinamento. In pratica l’upload non avviene con il classico form, e il bottone “sfoglia” che consente di selezionare il file prima di accettarne il caricamento, bensì trascinando direttamente il file all’interno del browser nel classico stile drag & drop. In realtà, questa tecnologia ha qualcosa che va oltre il semplice web 2.0 perchè sfrutta le potenzialità di HTML5. In questo articolo descriverò un esempio di come simulare questo effetto.

gmail dragdrop Upload per trascinamento con html5, ajax e php

Innanzitutto elenchiamo gli strumenti che ci servono:

  • il linguaggio php
  • il framework jquery per la chiamata ajax
  • firefox (browser che supporta una forma primitiva di html5, ancora non standardizzata).

Ricordo che per fare le chiamate ajax, i file dell’esempio (anche i file html) vanno inseriti in una directory del server web configurata in modo da accettare le chiamate asincrone lato client (Apache di default lo fa!)

Dunque costruiamo un file html semplice che contiene i riferimenti a jquery e al file upload-trascinamento.js che andremo a riempire successivamente:


<html>
<head>
<title>Prova di upload per trascinamento</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="upload-trascinamento.js"></script>
</head>
<body>
<div style="margin:0 auto; text-align:center">
<h1 style="margin-top:100px;">Upload (di 1 file alla volta) per trascinamento</h1>
<h2 id="stato"></h2>
</div>
</body>
</html>

Ed ecco il file upload-trascinamento.js :


$(document).ready(function() {
$(this)
.bind("dragenter", function(event) {
return false;
})


.bind("dragover", function(event) {
return false;
})


.bind("drop", function(event) {
var file = event.originalEvent.dataTransfer.files[0];
event.stopPropagation();
$("#stato").html("Caricamento del file in corso. Attendere prego....");


$.ajax({
url:'upload.php',
async:true,
type:'POST',
contentType:'multipart/form-data',
processData:false,
data:file,
success: function(data) {
$("#stato").html("Il file <a href=\""+ data + "\">" + data + "</a> e\' stato copiato sul server<br/><br/>");
} ,
beforeSend: function(xhr) {
xhr.setRequestHeader("X-File-Name", file.name);
xhr.setRequestHeader("Cache-Control", "no-cache");
}
});
});
});

Dunque, cerchiamo di capire cosa fa questo codice:

  1. Vengono associati , all’intera pagina web (ma si potrebbe fare anche per un div o un paragrafo), tre nuovi eventi javascript riconoscibili solo dai browser che supportano html5: Dragenter, Dragover, Drop. Nel caso specifico, siamo interessati all’evento Drop, però affinchè l’evento funzioni  è necessario definire anche gli altri, magari riempiendoli con un’ azione irrilevante (return false)
  2. L’evento Drop si aziona nel momento in cui rilasciamo sulla pagina web uno o più file. Dunque cosa accade quando questo evento viene azionato?
  • Si estrae il primo file tra quelli selezionati e trascinati dal browser. Un vettore di oggetti event.originalEvent.dataTransfer.files contiene tutti i file trascinati. In particolare l’elemento files[0] contiene un solo file : il primo del vettore. Ciò significa che si potrebbero fare upload multipli. L’esempio, per semplicità, è stato sviluppato nell’ipotesi che sia fatto l’upload di un file alla volta
  • Si blocca la normale apertura del file sul browser con event.stopPropagation()
  • Si effettua la chiamata asincrona .ajax  ad un file php. La chiamata jquery passa come dati al file php , il file che è stato trascinato. E’ importante notare la presenza di contentType:’multipart/form-data’ che imposta nell’header della chiamata ajax  il tipico trasferimento dei file dati come nei normali form html, processData:false che disabilita il casting di default previsto per i dati trasmessi  con data e che permette di trasmettere l’oggetto file, non come stringa, ma con il suo datatype corretto (pdf, immagine, ecc…insomma  in base al tipo di file che abbiamo trascinato nel browser) e beforeSend che, ancora una volta, modifica gli header della chiamata ajax, per trasmette il nome del file estratto dall’oggetto file.

L’ultimo passo per completare il lavoro è è la costruzione del ricevente della chiamata ajax, ovvero il file upload.php:


<?php
$headers = getallheaders();
$nomefile = basename($headers['X-File-Name']);
$streamdati = file_get_contents("php://input");
file_put_contents($nomefile, $streamdati);
echo $nomefile;
?>

Lo script estrae il nome del file dall’header X-File-Name, legge il flusso di dati  (i byte del file) attraverso lo stream di input (php://input) passato alla funzione file_get_contents e costruisce nella directory corrente del server un nuovo file con il nome e i byte del file trasmesso.

Spero di non essere stato troppo prolisso e di aver fornito a tutti voi una nuova tecnica per rendere ancora più appetibili le vostre applicazioni web. E’ possibile scaricare e usare gratuitamente il codice di questo articolo su http://www.giancarlodurso.altervista.org

Aggiornamento. nuova versione:

In seguito alle nuove versioni di jquery e Firefox 4, il codice sopra indicato va aggiornato cambiando la riga di codice event.stopPropagation(); con event.preventDefault();

La nuova versione , funzionante con jquery 1.5.2 e Firefox 4, è al solito scaricabile dalla mia pagina web!

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/upload-per-trascinamento-con-html5-ajax-e-php/feed/ 10 Programmiamo l’Accessibilità: tabindex e accesskey con Php http://www.italianwebdesign.it/programmiamo-laccessibilita-tabindex-e-accesskey-con-php/ http://www.italianwebdesign.it/programmiamo-laccessibilita-tabindex-e-accesskey-con-php/#comments Thu, 13 May 2010 06:00:18 +0000 Giancarlo D'Urso http://www.italianwebdesign.it/?p=6064 31GTyoptMoL 218x120 Programmiamo lAccessibilità: tabindex e accesskey con PhpTutti sappiamo che dotare i collegamenti web di attributi come accesskey e tabindex è importante per l’accessibilità delle pagine. Spesso, in modo errato, si usano queste attenzioni solo sui link del menu principale, senza rendersi conto che non c’è alcuna differenza tra un link principale e uno secondario (magari piazzato nel footer e in fondo alla pagina).

Per risolvere il problema, basterebbe inserire in tutti i link questi attributi, facendo attenzione ed evitando di generare doppioni. Due link con la stessa accesskey, per esempio, creerebbero un problema di identificazione dei link.

Inoltre, un lavoro del genere, fatto in ogni pagina del sito è costoso in termini di tempo e pazienza. Pertanto quello che adesso mostrerò è una funzione php che cerca di automatizzare il lavoro tenendo traccia , volta per volta, delle lettere e dei numeri usati nei due attributi. Quello che dovrà fare poi il programmatore è semplicemente richiamare la funzione ogni volta che si scrive un link nel codice.

Nella mia semplice implementazione ho tenuto conto di alcuni aspetti tecnici (invariabili) e di scelte “implementative e di stile” (modificabili a piacimento).
Ecco le regole che ho seguito :

  • I numeri usabili in tabindex possono crescere all’infinito
  • Le lettere usabili in accesskey sono limitate. Ho ristretto il dominio di caratteri usabili in : cifre decimali {0..9} e lettere dell’alfabeto inglese. Pertanto, nella funzione, si deve aggiungere un controllo per evitare di aggiungere in ogni pagina più di 27 accesskey con carattere alfabetico.
  • Generalmente il numero di link del menu principale sono limitati, e spesso i menu, per mantenere la compatibilità con le altre pagine del sito, vengono inseriti nelle pagine php con delle require o require_once. Pertanto la mia scelta implementativa è stata quella di supporre che i link del menu principale possano essere scritti per intero, e senza automazione (compresi accesskey e tabindex) direttamente dal programmatore e usare in entrambi gli attributi le cifre decimali.

Per esempio immaginiamo di avere un menu principale con 5 link:


<div id="menu">
<a href="link1.php" tabindex="1" accesskey="1"> pagina1 </a>
<a href="link2.php" tabindex="2" accesskey="2"> pagina2 </a>
<a href="link3.php" tabindex="3" accesskey="3"> pagina3 </a>
<a href="link4.php" tabindex="4" accesskey="4"> pagina4 </a>
<a href="link5.php" tabindex="5" accesskey="5"> pagina5 </a>
</div>

Con questo schema, abbiamo dato enfasi ai link del menu principale che ovviamente avranno i primi numeri interi e quindi verranno individuati prima nell’ordine delle tabindex, ma non solo…abbiamo creato una netta distinzione tra i link del menu principale (individuabili con gli accesskey numerici) e gli altri link secondari della pagina (individuabili con gli accesskey alfabetici).

Passiamo a questo punto all’implementazione della funzione.


<?
$num_link_secondario = 1;
function accessibility()
{
$link_menu_principale=5; // perchè abbiamo ipotizzato 5 link nel menu principale
global $num_link_secondario;
$stringa_tabindex = $link_menu_principale + $num_link_secondario;
if($num_link_secondario < 27)
{
$stringa_accesskey = chr($num_link_secondario + 96);
echo " accesskey=\"" . $stringa_accesskey . "\" tabindex=\"" . $stringa_tabindex . "\" ";
}
else
echo " tabindex=\"" . $stringa_tabindex . "\" ";
$num_link_secondario++;
}
?>

A questo punto, al programmatore, non resterà altro che richiamare la funzione ogni volta che si scrive il link con la certezza di non commettere errori e di rendere più completa, accessibile e ben strutturata la pagina:


<a href="link.php" <? accessibility() ?> > link secondario</a>

Ovviamente dobbiamo ricordarci di mettere un require o require_once con il collegamento al file che contine l’implementazione della funzione.

Immaginando che il link secondario indicato nell’esempio è il primo link che l’interprete php legge , il codice html che ne verrà fuori sarà :

<a href="link.php" accesskey="a" tabindex="6" > link secondario</a>

Il secondo link sarà del tipo :

<a href="altro_link.php" accesskey="b" tabindex="7" > bla bla bla.. </a>

E così via….a questo punto non resta che augurarvi BUONA PROGRAMMAZIONE!

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/programmiamo-laccessibilita-tabindex-e-accesskey-con-php/feed/ 10 Voglio diventare webdeveloper freelance: qualche consiglio? http://www.italianwebdesign.it/voglio-diventare-webdeveloper-freelance-qualche-consiglio/ http://www.italianwebdesign.it/voglio-diventare-webdeveloper-freelance-qualche-consiglio/#comments Thu, 01 Apr 2010 07:08:03 +0000 Lauryn http://www.italianwebdesign.it/?p=5817 Innanzitutto vediamo CHI è il webdeveloper e di cosa si occupa: (fonte Wikipedia)

Il web developer, parola di origine inglese traducibile con sviluppatore web, è una figura professionale che si occupa dello sviluppo di applicazioni web, in particolare dello sviluppo del codice di programmazione, dell’ottimizzazione dei database e dei linguaggi di markup.

Lavora in team con figure come web designer, webmaster, web content manager e con esse non deve essere confuso. Il web developer spesso non progetta la grafica di un sito, non si occupa dei contenuti né della creazione di file multimediali come video o audio, ma si occupa principalmente dell’assemblaggio, della struttura e delle automazioni di un sito. Questo perché generalmente il web developer può contare su conoscenze tecniche estremamente più approfondite rispetto alle altre figure che operano nel settore. Un web developer infatti deve vantare conoscenze inerenti i protocolli di rete, i server web ed i loro moduli principali, i database, la sicurezza informatica ed i linguaggi di programmazione oltre ad un’approfondita conoscenza dei linguaggi di markup più diffusi sul web. Molto spesso i web developer sono anche web designer, oppure lo sono stati in passato.

opensource 348x300 Voglio diventare webdeveloper freelance: qualche consiglio?Chiarito questo punto fondamentale, e le conoscenze che deve avere, un webdeveloper può essere specializzato in uno o più linguaggi. Ci sono ad esempio i webdeveloper che lavorano puramente in ambiente Windows e che quindi conoscono alla perfezione i linguaggi asp e aspNet, nonchè sono più esperti di database Sql relativi (perdonate qui la mia ignoranza), e ci sono quelli più specializzati negli open source, quindi da sistemi come Linux e Apache a linguaggi come php a database Mysql, e di conseguenza, ma non necessariamente, specializzati anche in uno o più cms che si basano sul php come Joomla, Magento, WordPress, Drupal, e via dicendo. Ultimamente stanno trovando molto impiego anche gli sviluppatori di applicazioni iPhone, che se volete è meno “web” developer, anche se alla fine molte applicazioni fanno riferimento a protocolli web e il linguaggio usato alla fine è molto simile al php.
E poi c’è anche Ajax, non dimentichiamolo! E actionscript per Flash, nonchè il nuovo Flex!

Per la poca esperienza che ho io, correggetemi se sbaglio, per i primi è più facile trovare un lavoro di consulenza presso aziende di software o applicativi che si appoggiano al web, per i secondi è forse più facile invece diventare freelance e destreggiarsi in diverse situazioni e necessità del web. Ci si può infatti specializzare che so, in plugin per WordPress, per Joomla, Drupal o diventare esperti configuratori e installatori di Magento e sviluppatori di componenti relativi.

Come trovare i primi “lavoretti”

Molti di voi magari sono appena usciti dall’università, o ancora hanno imparato ad usare certi linguaggi in occasioni diverse, oppure conoscono alla perfezione C++ ma con php non hanno ancora avuto modo di cimentarsi.
Come prima cosa procuratevi un manuale php, o una guida beginners sui plugin di WordPress, o ancora studiate online come crearli. Cimentatevi nei primi esempi, e dopodichè buttatevi nella rete e cominciate!
Ecco alcuni siti dove trovare le prime commissioni:

Li trovate sempre in coda ai link di Italianwebdesign. Trovate il lavoretto per il quale vi sentite più ferrati e fate la vostra proposta. Piano piano potrete buttarvi in progetti ancora più ambiziosi, ma non smettete mai di cercare.
Cercate anche sul web fra le webagency esistenti, ma anche singoli e nuovi webdesigner freelance, che magari non hanno ancora una rete adeguata di conoscenti developer e che magari si trovano in difficoltà anche solo per creare un form php.

Purtroppo da un lato credo che siano pochi i progetti in cui un webdeveloper sviluppa tutto da zero, ma quando lo fa è perchè il sito è un progetto tutto nuovo, quindi spesso una startup o un grande progetto, che quindi frutta il giusto compenso, che in altri casi sarebbe esiguo e non rapportato effettivamente al lavoro svolto.

Prego i webdeveloper che seguono questa community di correggermi e aggiungere eventuali loro riflessioni, mentre prego chi ne avesse bisogno (webdeveloper e non) di contattare il mio nuovo e fresco webdeveloper (nonchè fidanzato): antonio@lauryn.it

Grazie!

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/voglio-diventare-webdeveloper-freelance-qualche-consiglio/feed/ 30 Come creare un plugin per WordPress: raccolta di risorse http://www.italianwebdesign.it/come-creare-un-plugin-per-wordpress-raccolta-di-risorse/ http://www.italianwebdesign.it/come-creare-un-plugin-per-wordpress-raccolta-di-risorse/#comments Fri, 05 Mar 2010 06:45:29 +0000 Lauryn http://www.italianwebdesign.it/?p=5637 wordpress plugin 2 218x120 Come creare un plugin per Wordpress: raccolta di risorsePersonalmente non mi ci sono mai arrisicata, ma sto raccogliendo informazioni per conto del mio fidanzato, che li affronterà non appena arriverà la risorsa cartacea per eccellenza, che ho ordinato su Amazon:

Ed ho poi recuperato alcune risorse utili:

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/come-creare-un-plugin-per-wordpress-raccolta-di-risorse/feed/ 2 Uno spazio per gli sviluppatori iPhone: nasce Developers iPhone http://www.italianwebdesign.it/uno-spazio-per-gli-sviluppatori-iphone-nasce-developers-iphone/ http://www.italianwebdesign.it/uno-spazio-per-gli-sviluppatori-iphone-nasce-developers-iphone/#comments Mon, 20 Jul 2009 06:31:57 +0000 Lauryn http://www.italianwebdesign.it/?p=4146 iphone nero Uno spazio per gli sviluppatori iPhone: nasce Developers iPhoneLe possibilità degli sviluppatori web si stanno spostando…dai cms, che oramai vengono soppiantati dai più famosi cms open source, i web developers ora si buttano sul mercato (proficuo?) delle applicazioni iPhone.
Il nostro amico Dimix ha avuto molto successo con una sua recente applicazione, la sua prima a dir la verità, e ora si è buttato nel settore aprendo anche una community che raggruppa chi si occupa di applicazioni iPhone appunto.
Invito Dimix a raccontarci di come gli è capitata questa occasione e come fare per diventare sviluppatori in questo campo, e soprattutto quanto si guadagna!! eheh

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/uno-spazio-per-gli-sviluppatori-iphone-nasce-developers-iphone/feed/ 18 Creare un Indice di pagine web con PHP http://www.italianwebdesign.it/creare-un-indice-di-pagine-web-con-php/ http://www.italianwebdesign.it/creare-un-indice-di-pagine-web-con-php/#comments Tue, 02 Jun 2009 06:15:32 +0000 Dario Venneri http://www.italianwebdesign.it/?p=3700 ilovephp 300x218 Creare un Indice di pagine web con PHPL’altra volta mi è capitato di avere una lista di URL tipo questa:

http://www.italianwebdesign.it/voglio-propormi-a-qualche-webagency-esiste-una-lista-delle-piu-importanti-in-italia/

http://www.italianwebdesign.it/wordpress-plugin-sidebar-photoblog-per-mostrare-lanteprima-delle-vostre-gallery/

http://www.italianwebdesign.it/tutorial-illustrator-effetto-gradiente-o-blend/

http://www.italianwebdesign.it/rdfa-la-genesi-del-web-semantico/

http://www.italianwebdesign.it/come-tutelarsi-dalla-follia-dei-clienti/

Solo che contava circa 240 url.
Di questi URL dovevo creare del codice html ed ottenere questo risultato:

Voglio propormi a qualche webagency: esiste una lista delle più importanti in Italia?
WordPress plugin: sidebar photoblog per mostrare l’anteprima delle vostre gallery
Tutorial Illustrator: effetto gradiente o blend
RDFa : La genesi del web semantico
Come tutelarsi dalla follia dei clienti

Dunque avrei dovuto visionare manualmente il titolo della pagina per 247 indirizzi, copiarlo e creare l’html adeguato. Ora, siccome dovevo allenarmi per battere il mio record a Typing of the Dead e siccome il titolo della pagina lo si poteva leggere nell’url, ho deciso di fare tutto a mano, pur sapendo che PHP avrebbe potuto fare tutto per me.

Comunque Typing of the Dead non è proprio il più famoso tra i giochi, e non tutti hanno il tempo, la voglia e la pazienza per indicizzare tante pagine web (nemmeno io, di solito), e tornato a casa ho deciso di mettere a punto lo script per fare lo stesso lavoro che io avevo fatto a mano.

Lo script completo potete scaricarlo da Qui

Ma qual è la ricetta di questo script? Beh! Per prima cosa abbiamo bisogno di una lista di URL, proprio come sopra.
A questo punto prendiamo la lista e mettiamola in una variabile chiamata $url_list;.

Dobbiamo poi trasformare la lista in un Array. Un Array è, in profane parole, una variabile che contiene al suo interno altre variabili, in modo da creare un indice. Nel nostro caso l’array che verrà fuori è tipo questo:

$array_url[0] = ‘http://indirizzo1/’;
$array_url[1] = ‘http://indirizzo2/’;
$array_url[2] = ‘http://indirizzo3/’;

Come vedete è numerato e parte da 0.
Per ottenerlo dobbiamo usare un’espressione regolare. Questa espressione regolare dirà a PHP di indicizzare una porzione di testo ogni qualvolta vengono soddisfatte determinate condizioni. Nel nostro caso la condizione è: andare d’accapo.
Dunque usiamo la funzione preg_split(); e scriviamo

$array_url = preg_split(‘/\r\n/’, $url_list);

$array_url sarà l’array, nella funzione preg_split a sinistra ci sono le condizioni da soddisfare e a destra la stringa da analizzare (nel nostro caso la lista di url nuda e cruda).

Fatto ciò abbiamo la nostra lista trasformata in un array, dunque siamo pronti per usarla a dovere in php.
Creiamo un ciclo for in modo da navigare tutto l’array:

for($x=0;$x<count($array_url); $x++){}

Questo ciclo for dice a PHP: “esegui le istruzioni che sono contenute tra parentesi graffe fintanto che la variabile $x, che come ti ho indicato inizialmente è uguale a zero, è minore del numero di indici contenuti nell’array (che otterrai con la funzione count), ed ogni volta che finisci di eseguire le istruzioni aggiungi +1 alla variabile x”.
In questo modo PHP eseguirà le istruzioni contenute tra le parentesi graffe tante volte quanti sono gli URL della lista: in questo modo andremo appunto a creare il nostro indice in html.

Passiamo alle istruzioni contenute tra parentesi graffe:

$geturl = file_get_contents($array_url[$x]);

Nella variabile $geturl; verrà salvato l’html dell’url indicato, ottenuto tramite la funzione file_get_contents();. Tra le parentesi di file_get_contents scriviamo $array_url[$x]. In pratica stiamo dicendo: raggiungi l’array nel punto definito dalla variabile $x.
A volte file_get_contents; non funziona, quindi potreste dare un’occhiata a questo workaround.

Poi scriviamo:

$title[$x] = preg_replace(“/.*<title[^>]*>|<\/title>.*/si”, “”, $geturl);

Questa funzione utilizza le espressioni regolari, tramite preg_replace();, per estrarre il tag title della pagina e salvarlo in un nuovo array chiamato $title.

Poi rifiniamo il titolo togliendo il nome del sito, nel nostro esempio stiamo navigando IWD dunque toglieremo ” Italian webdesign”. Per farlo useremo la funzione str_replace();:

$title[$x] = str_replace(“| Italian webdesign”, “”, $title[$x]);

Infine inviamo l’html al browser con la funzione echo e chiudiamo le parentesi graffe:

echo ‘<li><a href=”‘.$array_url[$x].’”>’.$title[$x].’</a></li>’;
}

Questo è tutto ciò che vi serve per navigare le pagine ed estrarne il tag title. Certo, non diventerete forti a Typing of the Dead, però risparmierete molto, moltissimo tempo.

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/creare-un-indice-di-pagine-web-con-php/feed/ 5 Il server side include (SSI) ci aiuta per i pezzi di codice che si ripetono http://www.italianwebdesign.it/il-server-side-include-ssi-ci-aiuta-per-i-pezzi-di-codice-che-si-ripetono/ http://www.italianwebdesign.it/il-server-side-include-ssi-ci-aiuta-per-i-pezzi-di-codice-che-si-ripetono/#comments Mon, 11 May 2009 06:13:31 +0000 Lauryn http://www.italianwebdesign.it/?p=3603 php Il server side include (SSI) ci aiuta per i pezzi di codice che si ripetonoMolti di voi non sanno che…(e nemmeno io lo sapevo fino a poco tempo fa) esiste un metodo in html per includere pezzi di codice esattamente come si fa con il php.

Questo metodo fa uso di una serie di comandi del server Linux / Apache che ovviamente dovete assicurarvi che siano attivi su vostro server. Penso sia poco usata come tecnica (e in effetti a malapena l’ho vista io per puro caso) perchè l’offerta di hosting Linux / Apache normalmente include anche le librerie php, pertanto questo include è molto più diretto ed efficace farlo con il php…

Mi spiego per chi non sapesse di cosa stiamo parlando.

Vi sarà certamente capitato durante la creazione del codice dei vostri siti, di avere parti comuni e ripetute, tipo ad esempio un menu. Per comodità, nella previsione di future modifiche, si tende a tenere questo codice in un file a parte che viene “incluso” nel template originale tramite la funzione “include” di php. Ebbene è possibile farlo anche con il SSI. E’ sufficiente che i files abbiano estensione .shtml ed è possibile includere la porzione di codice con questa sintassi:
<!--#include file="menu.html" -->

Domande?

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/il-server-side-include-ssi-ci-aiuta-per-i-pezzi-di-codice-che-si-ripetono/feed/ 5 Creare una funzione per generare una galleria con PHP http://www.italianwebdesign.it/creare-una-funzione-per-generare-una-galleria-con-php/ http://www.italianwebdesign.it/creare-una-funzione-per-generare-una-galleria-con-php/#comments Fri, 20 Mar 2009 07:21:01 +0000 Dario Venneri http://www.italianwebdesign.it/?p=2982 folder image Creare una funzione per generare una galleria con PHPOggi creeremo una lista di immagini. Vi sarà capitato di avere tante immagini e di doverle inserire, una per volta, in una pagina web. E di dover poi modificare il codice html della pagina quando nuove immagini soggiungevano.

Con PHP questo processo può essere facilmente automatizzato.

Per questo esercizio vi consiglio di scaricare il file degli esercizi. All’interno troverete alcune foto e i file per iniziare. Estraete il contenuto nella cartella iwd che avevamo creato in seguito al primo articolo.

Apriamo il file galleria.inc.php con il nostro editor preferito ed iniziamo a scrivere, tra i tag di apertura e chiusura di php:

function galleria($cartella){

}

In questo momento abbiamo dichiarato la creazione di una nuova funzione, chiamata galleria.

Una funzione è una serie di istruzioni da far eseguire a PHP. E’ utile quando abbiamo una serie di istruzioni da far eseguire più volte in diversi punti di un sito e non vogliamo riscrivere interamente il codice. Lo racchiudiamo in una funzione e lo eseguiamo.

In questo caso la nostra funzione farà le seguenti cose:

  1. Leggerà il contenuto di una cartella da noi indicata, e salverà il nome di ogni singolo file in un array
  2. Scorrerà l’array e invierà progressivamente al browser il codice html per mostrare le immagini

Tra le parentesi graffe andranno scritte le istruzioni da far eseguire alla funzione. Tra queste scriviamo dunque:

$listaFile = scandir($cartella);

Come potete vedere c’è una nuova istruzione, ovvero scandir. Questa istruzione restituisce i nomi dei file presenti in una directory in un Array. Cos’è un array?

Un array è, detto nel modo più terra terra che riesco ad elaborare, una serie di valori indicizzati all’interno di una variabile.

Ad esempio:

$utente['nome'] = ‘Giancarlo’;

$utente['anni'] = 44;

$utente['sesso'] = ‘M’;

Nel caso di scandir, un array restituito è simile a questo:

$listaFile[0] = ‘.’;

$listaFile[1] = ‘..’;

$listaFile[2] = ‘foto1.jpg’;

$listaFile[3] = ‘foto2.jpgl’;

Come potete notare l’array è ordinato numericamente.

Dobbiamo ora usare questa lista per creare l’html da inviare al browser.

Per farlo useremo il ciclo foreach. Questo ciclo è stato creato appositamente per scorrere attraverso un array. Ripete le istruzioni contenute nel ciclo finché l’array non finisce (se dunque l’array ha 10 indici ripeterà le istruzioni 10 volte). Scriviamo:

foreach($listaFile as $value){}

In questo modo verrà eseguito un ciclo, ed ogni volta sarà assegnato il valore dell’indice raggiunto nell’Array $listaFile alla variabile $value.

All’interno possiamo indicare l’istruzione da eseguire, ovvero:

echo ‘<li><img src=”‘.$cartella.’/’.$value’” /></li>’;

Stiamo indicando a PHP di inviare al browser l’html che formerà la lista di immagini. La variabile $cartella è il nome della cartella, passato tramite la funzione, $value è il nome dell’immagine.

Il codice scritto fino ad adesso dovrebbe questo:

function galleria($cartella){

$listaFile = scandir($cartella);

foreach($listaFile as $value){

echo ‘<li><img src=”‘.$cartella.’/’.$value.’” /></li>’;

}

}

Facciamo una prima esecuzione di prova. Per richiamare una funzione basta scrivere il nome che le abbiamo assegnato seguito dalle parentesi tonde (in cui includiamo eventuali valori da passare alla funzione). Nel nostro caso scriviamo:

galleria(‘monumenti’);

subito dopo la chiusura della funzione (è parentesi graffa } a indicarne la chiusura), e raggiungiamo lo script con il nostro browser, questo è l’html che otterremo:

<li><img src=”monumenti/.” /></li>
<li><img src=”monumenti/..” /></li>
<li><img src=”monumenti/cosenza1.jpg” /></li>
<li><img src=”monumenti/cosenza10.jpg” /></li>
<li><img src=”monumenti/cosenza12.jpg” /></li>
<li><img src=”monumenti/cosenza13.jpg” /></li>
<li><img src=”monumenti/cosenza2.jpg” /></li>

Sicuramente noterete all’inizio della lista due punti. Scandir infatti non restituisce solo la lista dei file ma l’intero contenuto di una cartella, e quindi anche quei “puntini”. Per eliminarli basta aggiungere una condizione se all’interno del ciclo foreach.

Riprendiamo la nostra funzione e prima dell’istruzione echo all’interno del ciclo foreach scriviamo:

if($value == ‘.’ || $value == ‘..’){

continue;

}

Cosa succede?

If, in inglese, vuol dire se. Con l’istruzione if, diciamo a PHP: se la condizione tra parentesi è vera allora esegui le istruzioni contenute tra le parentesi graffe.

In questo caso se $value è uguale (e per indicare l’uguale servono due simboli =, quindi ==) alla stringa ‘.’, oppure (e si usano i simboli || ) $value è uguale alla stringa ‘..’, esegui le istruzioni contenute tra le parentesi graffe (nel nostro caso continue;).

Questa istruzione, continue;, dice a PHP di saltare tutte le istruzioni contenute nel ciclo e di continuare ad eseguirlo dal punto successivo.

In questo modo quando andremo ad eseguire lo script, l’html prodotto sarà:

<li><img src=”monumenti/cosenza1.jpg” /></li>
<li><img src=”monumenti/cosenza10.jpg” /></li>
<li><img src=”monumenti/cosenza12.jpg” /></li>
<li><img src=”monumenti/cosenza13.jpg” /></li>
<li><img src=”monumenti/cosenza2.jpg” /></li>

Che è proprio l’html che vogliamo. Adesso non ci resta che riusare la funzione nelle pagine web dei nostri siti. Cancelliamo l’ultima riga (galleria(‘monumenti’);), poiché ci serviva solo per provare lo script.

Creiamo due nuovi file chiamati panorami.php e monumenti.php. All’inizio di ogni file scriviamo:

<?php require(‘galleria.inc.php’) ?>

in modo da includere la funzione. Ora scriviamo tutto l’html di rito, e quando vorremo mostrare la galleria basterà scrivere:

<ul>

<?php galleria(‘monumenti’); ?>

</ul>

Per mostrare il contenuto della cartella monumenti e:

<ul>

<?php galleria(‘panorami’); ?>

</ul>

per mostrare il contenuto della cartella panorami.

Ovviamente potrete creare diverse cartelle, con diversi nomi, basterà poi indicarlo nella funzione.

Questa è una funzione basilare, potete infatti aggiungere eccezioni, regole, ecc, che poi saranno richiamate ogni volta che userete la funzione.

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/creare-una-funzione-per-generare-una-galleria-con-php/feed/ 40