Introduzione alla programmazione web Web Developing Introduzione alla programmazione web a cura di Claudio Acanfora – 07/2007
Introduzione In ambito informatico, la programmazione è l’insieme delle attività grazie alle quali è possibile istruire un personal computer a svolgere particolari compiti; A tale scopo, il programmatore, utilizza un linguaggio particolare, compreso dalla macchina, detto appunto “linguaggio di programmazione”; Il risultato ottenuto è detto software o codice sorgente.
Linguaggi di programmazione Esistono svariati linguaggi di programmazione, più e meno complessi; In generale la preferenza di uno rispetto ad un altro è dettata solo da una simpatia personale e dal tipo di risultato che si vuole ottenere; Tuttavia, con l’avvento di internet, ai linguaggi classici se ne sono affiancati altri, specifici per il web, che li rendono appunto una scelta obbligata per la creazione di siti.
Tecniche di programmazione Se la scelta di un linguaggio di programmazione rispetto ad un altro e’ quasi ininfluente per un programmatore, particolare attenzione invece si deve porre nel caso il software da produrre sia di tipo stand-alone o web; Nella prima categoria ricadono i cosiddetti software gestionali, di office automation, o di utilità varia il cui utilizzo prescinde da internet. Si parlerà nel primo caso quindi di programmazione software, nel secondo caso di programmazione web.
Tecniche di programmazione Per meglio comprendere la differenza fondamentale tra le due tecniche di programmazione, suddividiamo il lavoro del programmatore (codice sorgente di un software) in due componenti. Business Logic, che si occupa di processare i dati; Interfaccia utente che comprende le maschere di immissione dati, nonché di output;
Tecniche di programmazione Nella programmazione software, la divisione è solamente “logica”: il programmatore utilizza un unico linguaggio di programmazione per la produzione del software e le due entità risiedono logicamente sullo stesso computer; Nella programmazione web, invece, vi è una divisione fisica delle due componenti: L’interfaccia utente risiede sul computer client; La logica applicativa risiede sul computer server; Sono scritte in linguaggi completamente differenti.
Programmazione web Lo sviluppo di un’applicazione web, pertanto, richiede l’utilizzo di più linguaggi di programmazione a seconda della componente software che s’intende realizzare; Per l’interfaccia utente, i cosiddetti linguaggi client-side (in esecuzione sul computer client) più comunemente usati sono: HTML, CSS, JavaScript; La logica applicativa richiede l’uso di linguaggi server-side: ASP, JSP, PHP sono alcuni esempi. La loro esecuzione avviene sui computer server.
Programmazione web Interfaccia utente: HTML CSS JavaScript … SERVER Logica Applicativa: ASP JSP PHP … CLIENT
Linguaggi Client-Side HTML: è il linguaggio in cui vengono scritte le pagine web; definisce il modo in cui le informazioni devono apparire sullo schermo (tipo di carattere, colore, immagini, ecc); JavaScript: permette un maggiore controllo sui dati immessi dall’utente; CSS: sono i cosiddetti “fogli di stile” che si applicano ad una pagina HTML grazie ai quali è possibile fissarne i formati, i colori, ecc.
Linguaggi Server-Side ASP, JSP, PHP: rispettivamente di proprietà Microsoft, Sun e GPL, questi linguaggi permettono di scrivere la logica applicativa di un sito web; SQL: è il linguaggio usato per interrogare un database;
Esempio pratico Vediamo ora, come esempio, una semplice pagina web che esegue la somma di due numeri e ne mostra il risultato; Per la sua realizzazione, utilizziamo due linguaggi di programmazione: HTML, lato client, per definirne l’aspetto grafico; PHP, lato server, per eseguire l’operazione aritmetica;
Il codice sorgente <html> <title>Somma di due numeri</title> <body> <h1>Il risultato della somma 3+2 è uguale a <font color=“FF0000”><?= 3+2 ?></font> </h1> </body> <html>
Il codice HTML (lato client) <html> <title>Somma di due numeri</title> <body> <h1>Il risultato della somma 3+2 è uguale a <font color=“FF0000”><?= 3+2 ?></font> </h1> </body> <html>
Il codice PHP (lato server) <html> <title>Somma di due numeri</title> <body> <h1>Il risultato della somma 3+2 è uguale a <font color=“FF0000”><?= 3+2 ?></font> </h1> </body> <html>
L’esempio in azione…