Corso Joomla 1.5 - Il Server Locale

Prefazione. Un server locale per le prove

Un server locale (da istallare sul nostro pc di casa) è indispensabile per poter far funzionare script in linguaggio PHP e MySQL. IL php è infatti definito un linguaggio lato –server, ovvero ha bisogno di un “motore” che lo codifichi per poter arrivare a generare  la pagina html finale.

Nulla di complicato! Il server che utlizzeremo,può essere avviato senza dover istallare nulla e senza un particolare know–how; può essere trasportato su una comune pen drive o hard disk esterno.

Può infine essere utilizzato come un vero server internet, per potersi cimentare nello studio di siti dinamici (Joomla).. ed essere utile in moltissimi altri casi.

Il server che utilizzeremo si chiama Xampp è un software che comprende tutto il necessario,è gratuito!

1.Reperiamo il software per istallare il server locale

http://www.apachefriends.org/it/index.html , sito da cui scaricare Xampp. Scaricando la versione .ZiP (importante,per poter utilizzare al meglio il programma).

2.Fase preparatoria all’istallazione I pt.

Inserire la cartella scompattata direttamente sotto C: o comunque non all’interno di una cartella,altrimenti ogni volta bisogna andarli a dire tutto il perscorso, aprire la cartella scompattata e copiare  la cartella xampp fuori dalla cartella scompattata.Eliminare la cartella scompattata.

Controllare attraverso xamp-portcheck se tutte le porte sono free.

Nel caso alcune fossero già occupate utilizzare xampp_stop che va a bloccare le altre applicazioni liberando le porte.

3.Istallazione e setup II pt.

Andremo a fare il setup di xampp, il quale dovrà essere rifatto ogni volta che lo sposteremo su un computer diverso e quindi anche ogni volta che viene cambiato il percorso della cartella xampp. Il file che effettua questo settaggio è setup_xampp. Cliccando sull’applicazione il setup viene fatto in automatico. Per avviare il server vi sono diverse modalità,però quella che ci interessa di piu  utilizzare  è xampp-control. Clicchiamo su start Apache e MySql. Avviamo l’applicazione xampp-portcheck per vedere se i nostri server sono davvero funzionanti.

Proviamo a richiamare l’indirizzo del server interno per vedere cosa ci visualizza.Apriamo il browser (Firefox è consigliato!) e sulla barra dell’indirizzo digitiamo http://localhost/  Appare la videata Xampp in cui andremo a cliccare la nostra lingua e abbiamo finalmente il benvenuto con l’indicazione della versione.

Ci sono delle piccole impostazioni da fare nel caso debba essere utilizato anche all’esterno magari un una rete di piu computer ed avere una certa sicurezza.

Cliccando sull’icona stato. Ci vengono confermati i servizi che sono attivi e questi sono tutti quelli che ci servono.

Cliccando su sicurezza vediamo elencate una serie di problematiche che il server rileva.

4.Setup di sicurezza

Cliccare sul link localhost/security/.. posto dopo la tabella dello stato della sicurezza,una pagina nella quale possiamo andare ad inserire una nuova password per l’utente di root(L’utente che dispone dei massimi privilegi.) Andando ad inserirla sia su mysql che xampp.Tornando ora su sicurezza ci viene chiesto il nome utente e la password appena inserita.

Poi andare su /localhost/phpmyadmin con nome utente predefinito “root” e la password. Questo mi permette di aprire e gestire tutti i database che mi servono.Lo utilizzeremo con l’istallazione di joomla!

5.Qualche nota per conoscerlo meglio

visioniamo la cartella xampp. vediamo la cartella htdocs, la cartella pubblica, la cartella in cui l’utente viene proiettato digitando il nome del sito.

Autore: Fabrizio Garis

Javascript - Form

Oggetto Form

Durante la lettura di un file html, viene creato una array con tante celle quanti sono i moduli all’interno del file.

document.forms[]

Poprietà

document.forms[].length

document.forms[].action

document.forms[].method

document.forms[].name

document.forms[].enctype

document.forms[].elements[]

Accesso agli elementi

document.forms[].elements[] è a sua volta un array con tante celle quanti sono gli elementi del modulo.

document.forms[0].elements[4]

document.forms[2].elements[3]

Riferirsi al form e ai suoi elementi usando gli array corrispondenti non è l'unico modo per individuare gli elementi dei form.

Vale sempre la possibilita’ di attribuire un nome (name) al form e ai suoi elementi.

È fondamentale dare dei nomi e/o degli id ai moduli e ai loro elementi.

I nomi permettono di distinguere tra i dati che vengono inviati al server.

Ogni volta che si introduce un nome, l’interprete JavaScript crea una proprietà corrispondente.

Eventi

Textarea, select(option) à onChange, onFocus, onBlur

Hidden: campo nascosto, non sente nessun evento.

Reset/submit à onClick, onFocus, onBlur, onSubmit, onReset

Ogni volta che con il mouse si clicca su un elemento di un form viene generato un evento.

Se esiste un gestore per l’evento, vengono mandate in esecuzione le istruzioni JavaScript corrispondenti.

<form name="form1">
<input type="button" name="b1" value="Cambia colore" onClick="document.bgColor=‘yellow’;">
</form>

Value

Tutti gli elementi di un modulo hanno un valore che in JavaScript si legge grazie alla proprietà value.

Il valore può essere:
Il valore dell’elemento specificato nell’attributo value.
Il valore fornito in input dall’utente.

Esempio:
var prova=form1.b1.value
(prova conterra’ il valore del bottone – ovvero “Cambia colore”)

Radio e checkbox

I bottoni radio e checkbox hanno anche la proprietà checked.
document.form.rd1.checked
if (document.form.rd1.checked==true)

Select e Option

Gli oggetti select e option permettono di creare menu a discesa.

Tra le proprieta’ di select, le piu’ importanti sono:

selectedIndex (restituisce l’indice della voce del menu a discesa selezionata dall’utente).

options[] (restituisce un’array contenente le opzioni della lista)
i = document.frm1.sel1.selectedIndex (memorizza nella variabile i l’indice dell’opzione selezionata).
document.frm1.sel1.options[i].value (restituisce il valore dell’opzione selezionata)

Tra le proprieta’ di option, la piu’ importante e’:
selected (restituisce un valore booleano. Se l’opzione e’ quella selezionata restituisce true, altrimenti false)
if (document.forms[0].elements[0].options[0].selected) {
alert(“hai selezionato il primo elemento");
}

Invio

Al momento dell’invio di un modulo, oppure quando si vogliono cancellare i campi, si possono fare dei controlli mediante i gestori di eventi onSubmit e onReset

<form name="frm1" method="post" action="…"
onSubmit="return controlla();"
onReset="return conferma_canc();">

Se le funzioni controlla() e conferma_canc() restituiscono false le azioni corrispondenti vengono impedite.

Si può verificare:
Che l’utente abbia inserito i tutti i dati nei campi obbligatori.
Il formato dell’input sia corretto.

Javascript - Dom Document

Document Object Model

L’oggetto document rappresenta il documento html visualizzato ed è su di esso che si agisce per rendere le pagine dinamiche.

Tutti gli oggetti nell’html sono proprietà dell’oggetto document.

Possiede le seguenti collections, le più diffuse:
forms[]
links[]
images[]
anchors[]

Sintassi

Per invocare metodi e proprietà di document è necessario utilizzare :
document.metodo()
document.proprieta

Proprietà

document.bgColor (colore di background)

document.fgColor (colore del testo)

document.linkColor (colore link)

document.alinkColor

document.vlinkColor

document.title

document.referrer (URL di provenienza)

Metodi principali

document.write() permette di scrivere testo all’interno di un documento. Ha un parametro di tipo stringa. Attenzione! Se si associa a un evento, sovrascrive il documento corrente.

document.focus(): porta in primo piano la finestra del documento.

document.open(): apre un flusso per raccogliere l’uscita del metodo write(), si usa per creare un nuovo flusso di informazioni, il contenuto del nuovo docuemnto viene inserito con il metodo document.write().

document.close(): chiude un flusso di uscita e visualizza i dati. Se si dimentica di inserire il metodo close() il browser non interrompe mai l’animazione di caricamento.

Attributi e Proprietà

Ogni elemento HTML e caratterizzato da una serie di attributi.
<img src=…>
img è il tag ed src è un suo attributo.

In javascript gli elementi html corrispondono ad oggetti java e i loro attributi rappresentano le proprietà.
img à oggetto image
src à proprietà src

Per richiamare il valore delle proprietà di un oggetto si utilizza la notazione: oggetto.proprieta

Document.image.src

Riferimento agli oggetti

Per riferirsi ad un certo oggetto si fa riferimento alla sua posizione nel documento.

Partendo dal documento , si percorre la gerarchia degli oggetti che contiene.

Ogni volta che si incontra un elemento, si aggiunge all’espressione il nome dell’elemento seguita dal punto.

Esempio:
<body>
<form name=”mio_form”>
<input name=”campo1” type=”” value=””>
à document.mio_form.campo1
à document.mio_form.campo2

Percorsi qualificati

Per riferirsi alle proprietà e metodi dell’oggetto window non è necessario riferirsi all’oggetto window.
window.alert() = alert()

Per riferirsi alle proprietà e metodi dell’oggetto document è necessario riferirsi all’oggetto document.
document.mio_form.campo1

Oggetti multipli

Il riferimento a un oggetto del DOM è determinato dalla posizione dell’elemento corrispondente nella gerarchia degli elementi HTML.

Problema: in un documento sono presenti più di un’immagine, più di un link, più di un pulsante, ecc.

SOLUZIONI:

1.     Riferirmi a un insieme di oggetti dello stesso tipo come array. L’ordine di un elemento nel documento determina la sua posizione nell’array.
<body>
<img src=””> àdocument.images[0]
 <img src=””> àdocument.images[1]
<img src=””> àdocument.images[2]

2.     Riferirsi agli oggetti attraverso un nome. Nome è assegnato attraverso l’attributo name.
<body>
<img src=”” name=”img1”> àdocument.img1
 <img src=”” name=”img2”> > àdocument. Img2
<img src=”” name=”img3”> > àdocument. Img3

ALTRI METODI:

Usare gli identificatori per recuperare gli elementi con il metodo:
document.getElementBYyId()
restituisce un riferimento all’elemento con un certo identificatore.
<body>
<img src=”” id=”img1”>
document.getElementBYyId(“img1”)

Si possono recuperare gli elementi caratterizzati dallo stesso tag con document.getElementsByTagName(nome_TAG)
Viene restituito un array di tutti gli elementi del tag considerato, nell'ordine in cui compaiono nel codice HTML.
document.getElementsByTagName("img").item(0)

Oggetto Image

Per ogni immagine all’interno di un file HTML il browser crea un’istanza  di un oggetto image.

Proprietà:
document.images[0].src
document.images[0].name
document.images[0].width
document.images[0].height

Javascript - Dom Window

Oggetto window

Per raggiungere un oggetto della pagina e assegnarli un particolare valore è necessario indicare tutto il percorso da document.

Es per assegnare l’immagine pippo.jpg ad un immagine chiamata rollover:
document.rollover.src=”pippo.jpg”

Per scrivere la parola “ciao” in una casella di testo chiamata frase di un form chiamato modulo:
document.modulo.frase.value=”ciao”

Fornisce metodi e proprietà per manipolare il browser.

Metodi più usati:

·      Window.alert()

·      Window.prompt()

·      Window.confirm()

·      Window.open()

·      Window.close()

·      Window.print()

Metodo confirm()

Fa apparire una finestra di dialogo con un messaggio e da la possibilità di confermare o annullare.

<a href=”http://www.unito.it” onclick=”return(confirm(‘vuoi abbandonare la pagina?’))”>Link</a>

Metodo open()

window.open(‘url','nome finestra','caratteristiche finestra‘,’);

Primo:  indica un percorso.

Secondo: il nome della finestra.

Terzo: specifica forma, dimensione, posizione della finestra.

<img src=“pippo.jpg” onClick=“window.open(‘http://www.unito.it’,’nuova_fin’, ‘height=400,width=200,scrollbars=yes, menubar=no’)”;/>

E possibile creare una nuova finestra vuota e effettuare azioni su di essa. Bisogna memorizzare il riferimento del metodo open in una variabile.

var finestra= window.open(‘ ’,’nuova’,’width=200,height=200’);

finestra.document.write(“Questa e’ una nuova finestra!");

Metodo close()

Permette di chiudere la finestra su cui viene invocato.

Non ha parametri.

Funtion chiudi(){
finestra.close();}

Se è la finestra principale explorer chiede conferma e firefox non lo permette.

Metodo print()

Simula il pulsante stampa del browser.

<a href="#" onClick="window.print()";> stampa </a>

Le proprietà piu usate

window.status e window.defaultStatus Permettono di modificare il valore della barra di stato in basso.

window.opener restituisce un riferimento alla finestra che ha aperto quella corrente. Es. window.opener.close(); chiude finestra che ha aperto quella corrente.

window.closed restituisce un booleano che indica se una finestra è stata aperta o chiusa( chiusa = true).

window.location si riferisce ad un oggetto che contiene le info relative alla URL del documento correntemente visualizzato.
window.location.host
window.location.port
window.location.href
window.location.pathname
window.location.protocol
window può essere sostituito con una variabile che indica una finestra.

window.navigator contiene dettagli sulla verisone corrente del browser.
Proprietà più usate:
appVersion: versione del browser
userAgent: nome del browser
language: lingua del browser
plugins: array dei plugin installati sul sitema
platform: sistema operativo
cookieEnabled: specifica se i cookie sono accettati
Metodo più usato: javaEnabled() specifica se il browser ha abilitato javascript.

E possibile sfruttare il ciclo for…in che permette di conoscere un elenco di tutte le proprietà in  un dato oggetto. 

window.history contiene lista degli URL visitati nella sessione attuale del browser.
window.history.back()
window.history.forward()
window.history.go(n)

window.document

Javascript - Eventi

Interattività ed eventi

Attraverso il modello a oggetti del documento, è possibile associare l’esecuzione di un programma agli eventi che avvengono nell’interazione utente-browser.

Eventi generati dall’utente attraverso le proprie azioni.

Eventi generati dal browser(caricamento immagini, documento).

Elenco eventi

·      Abort: caricamento delle immagini interrotto

·      Blur: l’elemento ha perso il focus

·      Click: clic col tasto sinistro

·      Change: selezione e poi deselezione di una voce

·      ContextMenu: clic col tasto destro

·      DblClick: doppio click

·      Error: quando si verifica un errore al caricamento di un’immagine

·      Focus: focus su un elemento

·      KeyDown: l’utente preme un tasto

·      KeyUp: l’utente rilascia il tasto

·      KeyPress: l’utente preme e rilascia un tasto

·      Load: termina il caricamento di un documento o di una immagine

·      MouseDown: l’utente preme il pulsante del mouse

·      MouseUp: l’utente rilascia il pulsante del mouse

·      MouseOut: il mouse si sposta dall’elemento

·      MouseOver: il mouse va sopra l’elemento

·      Reset: l’utente preme il pulsante reset di una form

·      Resize: quando la finestra del browser viene ridimensionata

·      Submit: click su invio

·      Unload: il documento è tutto scaricato

Gestore eventi

Permettono di associare automaticamente il verificarsi di un evento  alla chiamata di un ‘istruzione o una funzione Javascript.

Dato un evento, si aggiunge il prefisso “on”:
onLoad, on MouseOver, ecc.

Gli eventi sono riferiti agli elementi html.

I gestori di eventi sono richiamati attraverso attributi html.

Associare istruzioni agli eventi

<a href=”http://www.unito.it” onclick=”alert(‘stai per accedere alla homepage di unito)”>Link</a>

Quando le istruzioni sono complesse è possibile far richiamare dai gestori delle funzioni dichiarate in precedenza.

<input type=”button” value=”Premi qui” onclick=”mia_funzione()”/>

Il gestore dell’evento richiama la funzione e, qualora la funzione restituisca un valore, esso viene passato all’evento.

<a href=”http://www.unito.it” onclick=”return(confirm(‘vuoi abbandonare la pagina?’))”>Link</a>

Se l’utente clicca “ok ”, return diventa true e l’evento viene eseguito.

Se l’utente clicca “annulla”, return diventa false e l’evento non viene eseguito.

Javascript - Oggetti built-in

Oggetto Date

Permette di gestire informazione relativa a data e ora.

Per creare un nuovo oggetto  di tipo Date:
var data = new Date();

Viene creato un oggetto che rappresenta il momento in cui lo script viene eseguito.
Anno, giorno, mese, ora, minuti, secondi, millisecondi.

Metodi dell’oggetto Date

·      getDate(); giorno numerico.

·      getMonth(); mese in forma numerica (gennaio=0).

·      getFullYear(); anno in 4 cifre.

·      getDay(); giorno della settimana in forma numerica(0=domenica).

·      getHours(); ora.

·      getMinutes(); minuti.

·      getSeconds(); secondi.

E possibile anche settare i contenuti:
setYear(); setMonth …

Oggetto Math

Si occupa di svolgere  mediante metodi e proprietà funzioni matematiche.

Metodi dell’oggetto Math

·      Math.min(); minore di 2 parametri.

·      Math.max(); maggiore di 2 parametri.

·      Math.random(); valore casuale tra 0 e 1.

·      Math.floor(); il parametro viene arrotondato per difetto all’intero inferiore.

·      Math.round(); il valore del parametro viene arrotondato al suo intero più vicino.

Oggetto String

Proprietà:
length; restituisce la lunghezza della stringa.

Metodi:

·      charAt(n); restituisce carattere in una posizione specifica.

·      indexOf(substr); restituisce la posizione della prima occorrenza di un carattere in una stringa.(-1 se non la trova).

·      lastIndexOf(substr) restituisce la posizione dell’ultima occorrenza di un carattere in una stringa.(-1 se non la trova).

·      Replace(stringa1,stringa2);sostituisce alcuni caratteri con altri.