Corso Joomla 1.5 - Installazione di Joomla 1.5

6.Procuriamoci tutto ciò che ci serve

•       un server linux con Apache e database MySQL(locale o remoto)

•       Una linea ADSL per la pubblicazione sul sito remoto

•       Il pacchetto per l’istallazione  di Joomla

•       Programma FTP per il trasferimento dei file di Joomla sul server

il pacchetto di istallazione di joomla è reperibile all’indirizzo joomla.it

Scaricare il programma FileZilla per il FTP.

7.Trasferimento FTP dei File per Joomla 1.5

Utilizzando FileZilla Trasferiamo l’istallazione di joomla e tutti i file che servono nel nostro server locale(di prova).

Prima di tutto doviamo impostare xampp.

Apriamo il pannello il suo pannello di controllo.Spuntiamo svc e avviamo il servizio.Andiamo sul browser : /localhost / e vediamo di nuovo la sicurezza e vediamo che ci dice che è insicuro.Torniamo sul nostro pannello di controllo e clicchiamo su admin nella riga FileZilla che ci permette di entrare all’interno del server come amministratori.Clicchiamo ok senza dover inserire nulla.

Cliacchiamo su edit e poi user.Rimuoviamo gli user e aggiungiamone uno nuovo e poi assegniamo una password.Poi dire a FileZilla a quale directory deve accedere all’interno del server.Clicchiamo su Shared Folder e andiamo ad aggiungere la cartella htdocs/joomla(nel caso non fosse ancora disponibile tornare a questo punto in un secondo momento,quando avremo copiato in ftp la cartella joomla) contenuta in xampp.e spuntiamo su Files anche write e delete e sotto Directories, create e delete.

Apriamo FileZilla : su host inseriamo l’indirizzo ip del nostro computer. E reperibile andando su esegui, digitando cmd e nella finestra che appare digitare ipconfig.Scriviamoci  l’indirizzo ip e poi lo inseriamo all’interno di filezilla, nell’host.Il nome utente è quello che abbiamo inserito nella configurazione del server FileZilla cosi come la password. Ora clicchiamo su connessione rapida e se tutto andato bene si aprirà la cartella htdocs.

Ora non ci resta che fare l’upload dell’intera cartella di joomla.E per comodità poi andiamo a rinominare il file con un nome piu corto.

7.La creazione del database per Joomla 1.5

Prima di istallare joomla bisogna essere sicuri di avre il database pronto per il nostro server locale xampp, invece per il server remoto , quindi su hosting acquistato non ci sono problemi perché assieme all’acquisto il provider ci fornisce i dati per l’accesso al database oppure ci fornisce l’accesso ad un pannello attraverso il quale possiamo crere il database che ci serve.

Nel browser digitiamo ..//localhost/phpmyadmin/ .Entriamo con nome utente root e la password che avevamo scelto in precedenza.Eccoci nel programma di gestione del database.La cosa importante è di andare a creare i privilegi di utente che dovrà gestire il database.Clicchiamo sul link privilegi.Siamo nella vista d’insieme dell’utente in cui vi sono già impostati dei privilegi.Ne aggiungiamo uno nuovo e inseriamo i dati : Nome Utente,l’host lasciamo qualsiasi,la password.Su databse per l’utente lasciamo None, E su privilegi globali selezioniamo tutti.Clicchiamo su esegui e il programma ci conferma che è stato aggiunto un nuovo utente.

Ritorniamo nell’home page del database e creiamo a questo punto un nuovo database.inseriamo un nome e proseguiamo. A questo punto non occorre fare altro,abbiamo il database aperto,abbiamo l’utente che potrà gestire il database possiamo passare all’istallazione di joomla per vedere se i dati sono corretti.

*Digitiamo sul browser: http://localhost/joomla/installation/index.php.

Nella fase Database: Configurazione base, inseriamo:

Tipo: Mysql | Nome host : localhost (aruba utilizza dei numeri,Dns)| nome utente: scelto nella creazione utente del db | password : scelta nella creazione utente del db | nome database : quello scelto nella creazione del db.Se ci fa proseguire tutti i dati sono corretti e quindi da ora l’istallazione e/o qualsiasi altra istallazione di script php è possibile.

8.Istallazione Fasi 1-4 di Joomla 1.5

*Le fasi non cambiano sia che vengano effettutate in locale che in remoto.

1.Selezioniamo la lingua

2.Controlli di pre-istallazione.Abbiamo tutto il report delle impostazioni del nostro server per il corretto funzionamento di joomla.Nella parte superiore tutti i parametri devono essere : OK.

In remoto nella parte superiore il configuration.php non è disponibile ma joomla ci fornisce la la soluzione.

3.Accettiamo la licenza

4. Database.Tipo: Mysql | Nome host : localhost (aruba utilizza dei numeri,Dns)| nome utente: root | password : scelta nella creazione utente mysql  | nome database : quello scelto nella creazione del db.Nel caso de remoto il provider ci fornisce tutti i dati per e.mail.

Se ci fa proseguire tutti i dati sono corretti e quindi da ora l’istallazione eo qualsiasi altra istallazione di script php è possibile.

9.Istallazione Fasi 5-7 di Joomla 1.5

5.Configurazion ftp. Consente di passare alle restrizioni che il server impongono alle cartelle per motivi di sicurezza che nn consente la scrittura di nuovi file quando questa richiesta provenga da un browser.Possiamo anche compilarla in un secondo momento entrando nell’area amministrativa.

Altrimenti Possiamo inserire i dati che abbiamo inserito già nel programma filezilla .

6.Inserimao un nuovo sito.Inseriamo la mail dell’amministratore del sito la sua password.Se è la prima volta che utilizziamo joomla installiamo i dati di esempio.

7.Conclusione.nel caso del remoto ci vengono dati le cose da copiare e incollare in un foglio configuration.php e poi in ftp andrà inserito nella cartella del nostro joomla. Nel caso del locale avremo finito.

Entriamo al lato amministratore inserendo nome utente: admin e password scelta in fase di installazione.Modificare il nome della cartella installation.

10.L’ambiente amministrativo(back-end) di Joomla 1.5

Quello che ci viene mostrato in anteprima è il sito già realmente funzionante e navigabile.Si puo raggiungere il lato amministrativo cliccando su amministratore nelle voci di menu oppure aggiungendo alla barra degli indirizii ../administrator  . Vicino al link anteprima nel back-and vi è la casella di posta in cui ci viene segnalato se vi sono e.mail per l’amministratore,inviati attraverso il sistema di messaggistica interno.Le due personcine indicano quanti utenti sono collegati,presenti sul sito.Il simbolo dopo ci permette di effettuare il logout. Nella parte destra oltre al messaggio di benvenuto che può essere personalizzato come meglio si desidera come vedremo in seguito.Cè il pannello utenti connessi.Gli articoli che sono stati maggiormente  letti in ordine di importanza.Gli articoli recenti che sono stati pubblicati dall’amministratore.Statistiche dei menu che ci fanno vedere il numero delle voci all’interno dei menu stessi.

11.Semplice modifica del messaggio di benvenuto di Joomla 1.5

Andiamo nel menu delle estensioni e carichiamo la voce gestione moduli.Questo pannello è diviso in due parti Sito | Administrator. IL sito è il Front-and, il lato visibile ai visitatori.A noi interessa ora il lato Administrator e ci vengono mostrati tutti i moduli che sono presenti nel lato amministrativo e ci vengono mostrate anche le posizioni.Entriamo nel modulo Benvenuto su joomla che è quello che vogliamo modificare.E immaginiamo di volere modificare il messaggio che ce  attualmente per metterne uno nostro personalizzato.Ci capiterà spesso di fare questo tipo di operazione per introdurre dei contenuti per effettuare degli esempi.La cosa da non fare è cancellare per mettere del testo ripetitivo e a casaccio che crea un effetto brutto, ma il sito  lorem ipsum che genere testo casuale che puo essere generato in paragrafi.Copiamolo e incolliamolo.L’aspetto finale  è estremamente importante,non tanto nel lato di back –and quanto dal sito quando dovremo inserire piu articoli e capire l’aspetto finale come si presenterà il sito.Se non introduciamo il testo in  modalità veritiera purtroppo non si capira assolutamente nulla.(www.lipsum.com). Poi si salva. L’utilità di quest’area è mettere alcune raccomandazioni e alcune istruzioni nel caso dovessimo consegnare il sito ad una azienda o altro.

Nel caso non servisse qualcuna delle etichette basta richiamare la gestione dei moduli e disabilitare cliccando sulla V verde.

Autore: Fabrizio Garis

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