Editor XML

Realizzare, in modo semplice ed intuitivo, un editor di file di testo XML

Premessa

In questo tutorial realizzeremo in modo semplice ed intuitivo un editor di file di testo XML e non in modo da poter modificare le pagine del nostro sito in Flash. Infatti possiamo notare on line che i maggiori siti Flash utilizzano delle procedure per aggiornare i contenuti in modo dinamico senza dover ricorrere all’apertura del file sorgente per modificare l’animazione.

Facciamo un esempio pratico e immaginiamo il nostro sito in Flash con le sue sezioni standard: chi sono, cosa faccio,contatti e news. Su chi sono ci saranno le nostre informazioni o più semplicemente il nostro curriculum vitae, su cosa faccio ci saranno una serie di link sui nostri lavori sul web, su contatti le informazioni per farci contattare e su news le news relative al nostro sito e ai nostri lavori. Immaginiamo ora di dover apportare delle modifiche alle nostre sezioni perché nel frattempo abbiamo concluso dei nuovi lavori e dei corsi su Flash e vogliamo quindi aggiornare le informazioni on line relative al nostro curriculum e ai lavori svolti.

Se utilizzassimo Flash in modo statico ed obsoleto molto probabilmente apriremo nuovamente tutti i file FLA per apportare le modifiche sui sorgenti e quindi esportare nuovamente il filmato e sovrascriverlo on line tramite FTP. Ma poiché non abbiamo intenzione di ripetere mille volte queste operazioni noiosissime abbiamo pensato bene di strutturare il nostro sito modo più dinamico utilizzando dei file di testo esterni e modificando questi direttamente on line tramite un’area dedicata dalla quale è possibile aprire, modificare e salvare le nostre informazioni memorizzate sui file di testo.

Ecco il perché di questo tutorial: un editor di file di testo in Flash che utilizza uno script ASP e uno PHP. In questo tutorial abbiamo inserito anche un campo per una password (che è memorizzata su un file di testo pw.pw) per dare l’idea che l’area che stiamo andando a realizzare dovrà logicamente essere un’area protetta dove potrà accedere solo l’amministratore del sito stesso. 

Nel Tutorial precedente abbiamo creato un sistema dinamico per la visualizzazione delle news tramite l’utilizzo di un file XML. Questo Tutorial può essere collegato al precedente e utilizzato per modificare e aggiornare il file XML delle news direttamente on line.

Struttura dell’editor

Come abbiamo accennato il nostro editor di file di testo/XML sarà così composto:

  • interfaccia Flash 
  • script PHP per il salvataggio dei file
  • script ASP per l’apertura e la lettura dei file
  • file PW.pw per la memorizzazione della password
  • file di testo/XML che compongono le sezioni del nostro sito (per semplicità useremo solo il file news.xml)

L’interfaccia Flash è così composta: 

  • ci sarà un campo di testo dinamico chiamato “testoxml” dove verrà visualizzato appunto il testo caricato dai nostri file di testo/XML 
  • una barra di scroll associata al campo di testo dinamico “testoxml”
  • un menu che indica i file disponibili per essere aperti e modificati (nel nostro esempio “news”)
  • un campo di testo di input per l’inserimento della password
  • un campo di testo dinamico associato ad un pulsante “save” per salvare il file appena modificato

Vediamo ora il codice Action Script da utilizzare per i vari componenti:

Alla barra di scroll associamo il seguente codice:

onClipEvent (load) 
{
x_iniz = _x
y_iniz = _y
}

onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
gotoAndStop(2);
drag = true;
startDrag (“”, false, x_iniz+1 , y_iniz, x_iniz+1, (y_iniz+_root.barra._height) – _height);
}
}
onClipEvent (mouseUp) {
_root.box.gotoAndStop(1);
stopDrag ();
drag = false;
}
onClipEvent (enterFrame) {
prop = Math.floor(1+((_y- _root.barra._y)*_root.testoxml.maxscroll)/(_root.barra._height – _height));
if (drag) {
_root.testoxml.scroll = prop;
}
}

inoltre definiamo sulla root sul primo fotogramma la seguente funzione:

function RipBarra(){
_root.testoxml=”caricamento…”;
_root.box._x=_root.box.x_iniz
_root.box._y=_root.box.y_iniz
_root.box.gotoAndStop(1);
_root.testoxml.scroll = 1;
}

Questa funzione verrà richiamata (come vedremo in seguito) ogni volta che verrà aperto un file nuovo e serve per ripristinare lo scroll nella posizione iniziale.

Associamo il seguente codice al tasto “Save”:

on (release) {
attenzione = ” CONNESSIONE…”;
loadVariablesNum (“salva.php”, 0, “POST”);
}

Associamo al tasto “news” del menu il codice:

on (release) {
_root.RipBarra();
filexml = “news.xml”;
loadVariablesNum (“leggitutto.asp”, 0, “POST”);
}

Script PHP / ASP e funzionamento

Forse avrete già capito come funziona il nostro editor, e ad ogni modo procediamo per passi. Appena aperta la pagina contenente il nostro filmato clicchiamo sul file che abbiamo intenzione di modificare e/o aggiornare. Nel nostro caso abbiamo solo il file “news” nel nostro menu. Il codice Action Script 

on (release) {
_root.RipBarra();
filexml = “news.xml”;
loadVariablesNum (“leggitutto.asp”, 0, “POST”);
}

non fa altro che riposizionare la barra di scroll e richiamare lo script ASP che come abbiamo già detto è lo script che carica sul nostro editor le informazioni memorizzate nel file in questione. In questo caso la variabile “filexml” viene settata su “news.xml” che come potete notare è appunto il nome del file dal quale lo script ASP deve leggere le informazioni. 

Vediamo nei dettagli lo script ASP:

<%
Dim strLinea, FileObject, Instream, strFile, intTipo, nome
‘la variabile filexml viene passata da flash e indica il nome del file da aprire
nome = Request(“filexml”)

‘Response.Write “<br>file: ” & nome
strFile = Server.MapPath(nome)
intTipo = 1 ‘ lettura

‘ creo l’oggetto
set FileObject = Server.CreateObject(“Scripting.FileystemObject”)

‘ apro il file
Set InStream = FileObject.OpenTextFile(strFile, intTipo, true)

‘ leggo tutte le linee
strLinea = InStream.ReadAll()

‘la variabile testoxml corrisponde al testo dinamico del file flash
‘utilizziamo url encode per interpretare correttamente i caratteri
‘speciali come ad esempio la e-commerciale
Response.Write (“testoxml=” & Server.URLEncode(strLinea))

‘invio messaggio di corretta apertura del file 
Response.Write (“&attenzione=CARICATO”)

‘ libero risorse
InStream.Close

Set InStream = Nothing
‘ Creo una Copia del File

‘creo copia di backup del file txt o xml salvandolo come *.txt.bak o *.xml.bak
if ( Right(nome,3) = “txt” Or Right(nome,3) = “xml” ) then
Set FileObject = Server.CreateObject(“Scripting.FileystemObject”)
FileObject.CopyFile Server.MapPath(nome), Server.MapPath(nome&”.bak”), true
end if

Set FileObject = Nothing
%>

Abbiamo potuto notare che il nostro script ASP non si limita solamente ad aprire il file TXT o XML in questione ma ne esegue anche una copia di back up rinominando questo file col suo nome originale aggiungendo in coda .bak. Facciamo un esempio: se apriamo un file che si chiama “chisono.txt” lo script ASP crea un file di back up chiamato “chisono.txt.bak” mentre se apriamo, come nell’esempio sopra, il file “news.xml” il file di back up che varrà creato si chiamerà “news.xml.bak”. Questa operazione è indispensabile per evitare perdite accidentali di informazioni dovute ai più svariati inconvenienti che potrebbero verificarsi. In questo modo se dovessimo sbagliare qualche operazione possiamo sempre recuperare il nostro file originale.

Nell’esempio usiamo come estensione dei file TXT o XML ma possiamo utilizzare qualunque estensione desideriamo e modificare lo script a nostro piacimento.

Abbiamo quindi aperto il file “news.xml” dove ci sono i dati relativi alle news del nostro sito in formato XML. Supponiamo di dover aggiungere una notizia o di modificarne una esistente. Dopo aver effettuato la modifica dobbiamo salvare il nuovo file.  Inseriamo quindi la password sul campo “password” (la password è “enrico” ed è memorizzata sul file PW.pw) e clicchiamo sul tasto “SAVE”.

Il tasto “SAVE” ha associato questo codice:

on (release) {
attenzione = ” CONNESSIONE…”;
loadVariablesNum (“salva.php”, 0, “POST”);
}

che richiama lo script “salva.php”. Vediamo lo script:

<?
$data=””;
$fp = fopen (“pw.pw”, “r”);
while($buff=fgets($fp,4096)) {
$data.=$buff;
}
fclose($fp);

$testoxml = stripslashes($testoxml );

if($data==$password) {
$fp = fopen ($filexml, “w”);
fputs($fp,$testoxml);
fclose($fp);
echo “attenzione= DATI SALVATI!”;
}
else
echo “attenzione= ERRORE!”;
?>

Lo script PHP apre il file PW.pw (dove c’è memorizzata la password “enrico”) e verifica che la password inviata dalla variabile Flash sia uguale a quella memorizzata sul file, dopo di che se la password non è corretta restituisce un messaggio di errore altrimenti apre il file TXT o XML identificato dalla variabile “filexml” e vi memorizza le informazioni all’interno della variabile “testoxml” che altro non è che il testo del file che abbiamo aggiornato/modificato e restituisce il messaggio “Dati salvati”. Abbiamo quindi concluso la nostra operazione.

Conclusioni e sicurezza

Come si è già accennato bisogna fare in modo che questa area del sito sia protetta per evitare che altri utenti possano accedervi modificando le informazioni del nostro sito. Il sistema utilizzato in questo tutorial con una password memorizzata su un file di testo non è sufficiente a garantire una protezione verso queste intrusioni. Si invita quindi l’utente che utilizzerà questo tutorial per il proprio sito ad effettuare le modifiche che riterrà opportune per ottenere la massima protezione delle informazioni memorizzate nei propri file. Allo stesso modo sarà cura dell’utente aggiungere le voci al menu in base alle sezioni e ai file di testo (txt o XML) che vorrà modificare.

In questo Tutorial è stato utilizzato un solo file di testo “news.xml” che viene utilizzato nel precedente Tutorial sulla realizzazione di un filmato per le news.

I Video di HTML.it

Device e domotica! #dilloalfuturo

Per il futuro mi aspetto da Microsoft l’integrazione di tutti device e più domotica