jQuery+PHP: come automatizzare gli inserimenti nel database?
Abbiamo già affrontato la questione dei form diverse volte; tra i vari articoli, abbiamo visto come creare un plugin di jQuery per la validazione di formulari e come realizzare un modulo contatti in php.
In questo articolo, invece, utilizzeremo PHP e jQuery per creare un script che, all’invio di un form, crei la query sql in base ai suoi campi; poi, una volta pronta, la invii alla nostra pagina in php che si occuperà di inserirla nel database.
Questo script nasce più che altro per colmare una esigenza riscontrata col tempo; infatti, mi è capitato spesso, che nei panelli di amministrazione fatti ex-novo, da un sito all’altro cambiassero solo alcune voci nei form per inserire le news piuttosto che in quelli per inserire i prodotti.
Ciò significava dover ogni volta aprire i file per modificare le pagine che si occupavano di inserire le query nel database, ed aggiungere qualche voce nuova, oppure toglierla.
Per questo motivo ho creato un semplice e piccolissimo script che si occupasse di generare una query sql in maniera automatica a seconda del modulo che si sta inviando.
Non mi soffermerò in modo particolare sulla validazione dei dati inviati tramite il modulo, poichè sono argomenti che sono stati spiegati molto bene in articoli precedenti, come in questo: Web design elements: come validare i form con jQuery?
Preparazione della struttura
Per avere un’idea più chiara di ciò che andremo a fare in questo articolo, puoi cliccare sul seguente link per vedere lo script in funzione.
Per realizzare la nostra auto-query abbiamo bisogno dei seguenti file:
- savequery.php
il file che si occuperà di inserire la query nel database - site.js
il file che conterrà lo script per generare la query - index.html
la pagina statica nella quale risiederà il nostro form
Solitamente è necessario avere le idee ben chiare prima di procedere con la creazione di uno script/plugin, proviamo a scrivere due righe sul funzionamento del nostro:
- Il nostro script JavaScript viene eseguito all’invio del form.
- Vengono analizzati tutti gli input del form utilizzando un ciclo for.
- Viene creata una Query SQL.
- La Query SQL viene inviata ad un file php che si occuperà di eseguirla.
- L’utente visualizza un messaggio con l’esito dell’operazione.
Come puoi vedere, il lavoro da eseguire non è poi così tanto; iniziamo quindi con il vedere il codice del nostro script JavaScript:
$(document).ready(
function(){
$('form.autoquery')
.submit(
function(){
// codice da eseguire
return false;
}
);
}
);
Inseriamo tutto il codice all’interno del metodo ready() di jQuery, il quale esegue il suo contenuto, una volta caricato tutto il DOM.
All’interno puoi notare il metodo submit() applicato al selettore $(‘form.autoquery’); questo significa che il suo contenuto verrà eseguito all’invio di ogni form avente la classe “autoquery”.
All’interno del metodo submit() inseriremo tutto il contenuto per creare la nostra Query SQL , e prima della sua chiusura, inseriamo un return false, per evitare che il form venga inviato.
Andiamo avanti e vediamo il codice che andrà inserito all’interno del metodo submit().
[...]
var $elements = $('input:not([type=button], [type=submit], .exclude), textarea:not(.exclude), select:not(.exclude)',this),
$result = $('div#result'),
dbTable = $('input[name=db_table]').val(),
dbQuery = 'Insert Into '+dbTable+' Values(NULL,',
totInputs = $elements.length;
[...]
Procediamo con dichiarare, all’interno della nostra function, una serie di variabili che utilizzeremo durante lo script; vediamole una ad una:
- $elements
contiene un’oggetto; il selettore di jQuery, filtra tutti gli input, textarea e select che si trovano all’interno del formulario (che all’interno della function viene individuato dalla keyword this), viene inoltre utilizzato il selettore :not() che si occupa di fare un’ulteriore filtro: verranno esclusi dalla selezione gli input che hanno come type button e submit, ed inoltre verranno esclusi tutti gli input che hanno la classe exclude. - $result
contiene l’oggetto risultato dal seguente selettore di jQuery: $(‘div#result’), e cioè, il div che ha come id “result” e che verrà utilizzato in seguito per mostrare l’esito della query. - db_table
questa variabile contiene il valore dell’input che ha come nome “db_table”, e rappresenta il nome della tabella nel database nella quale inserire la query.
In questo caso utilizziamo il metodo val() di jQuery per ricavare il valore dell’input. - db_query
variabile che contiene la sintassi SQL della query da eseguire; questa variabile verrà modificata in seguito, all’interno del ciclo, in modo da ottenere come risultato finale, qualcosa del genere: “Insert Into nome_tabella Values(‘input_uno‘, ‘input_due‘, ‘input_tre‘) “ - totInputs
contiene il numero totale di elementi trovati all’interno dell’oggetto $elements; per ricavarli utilizziamo la proprietà JavaScript length, la quale ci restituisce il numero totale di elementi all’interno dell’oggetto. (in questo caso sarebbe stato possibile utilizzare anche il metodo size() di jQuery, ottenendo lo stesso identico risultato)
Una volta definite le variabile che utilizzeremo nel nostro script, possiamo procedere con il ciclo degli elementi, vediamo di seguito il codice utilizzato:
[...]
$elements
.each(
function(i){
var $this = $(this),
val = $this.val().replace(/'/g, "|||'");
// controllo se abbiamo già percorso tutti gli elementi, in tal caso ometto la virgola
if(i == totInputs - 1){
dbQuery += " '"+val+"'";
}else{
dbQuery += " '"+val+"',";
}
}
);
[...]
Nel precedente codice puoi notare che viene applicato il metodo each() di jQuery al selettore che abbiamo prima definito: $elements.
Il metodo each ci permettere di effettuare un ciclo degli elementi all’interno dell’oggetto $elements; come parametro della sua function, abbiamo specificato “i”, che indica il numero dell’attuale loop, partendo da 0, che viene aggiornato ad ogni esecuzione della funzione.
All’interno del metodo each() la keyword this (che funge da “puntatore”) viene attribuito all’elemento attuale.
Anche questa volta abbiamo definito due variabili, vediamole:
- $this
questa variabile è semplicemente un abbreviazione; contiene l’oggetto jQuery frutto del seguente selettore: $(this) - val
contiene il valore dell’elemento attuale ricavato dal metodo val(); puoi inoltre notare che al valore restituito da val() viene applicato il metodo replace() di JavaScript.
Il primo valore passato al metodo replace() è una regexp (in sostanza seleziona tutti gli apostrofi all’interno della stringa), mentre il secondo valore è quello che verrà utilizzato per sostituire tutte le occorrenze trovate dalla regexp
Le espressioni regolari sono un argomento abbastanza complicato, io ho semplificato il tutto in poche righe, per chi volesse approffondire l’argomento, lascio il seguente link: http://www.regular-expressions.info/javascript.html
Magari ti starai chiedendo per quale motivo stiamo facendo un replace di tutti gli apostrofi presenti all’interno del valore dell’input, il motivo è il seguente:
Supponiamo di avere la seguente stringa pronta da passare al nostro script PHP:
Insert Into users Values('Nome', 'Cognome', 'Testo')
Questa stringa, passata tramite il metodo POST al nostro script PHP viene così transformata:
Insert Into users Values(\'Nome\', \'Cognome\', \'Testo\')
A questo punto dovremmo utilizzare la funzione stripslashes() di PHP, la quale si occupa di togliere dalla stringa passata come argomento, tutti i backslash. Il risultato, quindi, sarebbe simile al seguente:
print stripslashes($_POST['query']); // Insert Into users Values('Nome', 'Cognome', 'Testo')
A questo punto potrebbe essere tutto a posto, ma rimane un piccolo problema ancora: se l’utente inserisce un’apostrofo all’interno di una stringa, anche da questo verrebbe tolto il backslash, e di conseguenza, eseguire la query con un apostrofo di troppo darebbe un errore di sintassi.
Per questo motivo, tramite il metodo replace() di JavaScript, sostituiamo tutti gli apostrofi (solo quelli inseriti dall’utente) con la stringa “|||'”.
NB: L’utilizzo delle tre Barre Verticali seguite da un apostrofo è una scelta personale, si potrebbe sostituire gli apostrofi con qualsiasi cosa.
Una volta eseguito il replace sui valori inseriti dall’utente, la query finale dovrebbe essere simile a questa:
Insert Into users Values('Nome', 'D|||'arco', 'Testo')
Una volta passata la stringa tramite POST allo script PHP, possiamo passarla come parametro alla funzione PHP stripslashes(), ed il suo risultato lo utilizziamo nella la funzione str_replace() di PHP nel seguente modo:
$query = str_replace("|||'", "\'", stripslashes($_POST['query']));
La funzione str_replace() funziona di base con 3 parametri : La stringa da cercare, la stringa da utilizzare per sostituirla e la stringa originale nella quale cercare.
Noi come stringa da cercare passiamo “|||'”, la sostituiamo con “\'”, e quindi con l’apostrofo ed il suo backslash davanti, e la stringa nella quale cercare è il risultato di stripslashes(stringa_ottenuta_tramite_post).
Il risultato finale è il seguente:
$query = str_replace("|||'", "\'", stripslashes($_POST['query']));
print $query; // Insert Into users Values('Nome', 'D\'arco', 'Testo')
La variabile $query contiene la sinstassi corretta per inserire una nuova riga nel nostro database.
nb: la funzione str_replace() accetta anche un 4° paramentro; quest’ultimo è un Integer che indica il numero massimo di occorrenze prima che la funzione si fermi.
Continuiamo con il nostro JavaScript
Ora che hai capito il perchè del metodo replace, possiamo procedere con il resto del nostro script in JavaScript.
Dopo la dichiarazione delle due variabili puoi notare un controllo tramite if/else:
[...]
// controllo se abbiamo già percorso tutti gli elementi, in tal caso ometto la virgola
if(i == totInputs - 1){
dbQuery += " '"+val+"'";
}else{
dbQuery += " '"+val+"',";
}
[...]
In questo passaggio, quello che viene fatto è accodare alla query (definita all’interno della variabile dbQuery) il valore dell’input corrente all’interno del ciclo.
Esaminiamo il seguente codice:
if(i == totInputs -1)
Supponiamo di avere 5 input, e di ciclarli; nel metodo each() di jQuery l’indice (rappresentato dalla variabile i) è un numerico che aumenta di uno ogni volta che si ripete il ciclo e che parte però da 0.
Quando il nostro indice è uguale ad il totale degli inputs, meno 1, vuol dire che siamo arrivati all’ultimo elemento da ciclare.
Questo controllo viene effettuato per capire se dobbiamo inserire il valore dell’input con una virgola, oppure, essendo arrivati alla fine della query, dobbiamo ometterla.
Una volta eseguito il ciclo for, utilizzando il metodo each() di jQuery, dobbiamo accodare un nuovo valore alla Query SQL: la parentesi di chiusura.
[...] dbQuery += ")"; [...]
La query è pronta, ora lasciamo fare a PHP
La nostra query è pronta per essere passata allo script PHP, il quale si occuperà di inserirla nel database (dopo aver effettuato le due operazioni che abbiamo visto prima).
Per farlo utilizzeremo il metodo $.post() di jQuery, il quale si occupa di inviare dei valori ad un’altra pagina tramite HTTP POST, il tutto in maniera asincrona.
Vediamo di seguito il codice per effettuare questa operazione:
// invio la query tramite post
$.post(
'./savequery.php',
{
ajxInsert: 'true',
query: dbQuery
},
function(response){
if(response == 'ok'){
$result.html('I dati sono stati salvati correttamente').slideDown();
}else{
$result.html('Problema durante il salvataggio dei dati nel db').slideDown();
}
}
);
Il primo parametro rappresenta la pagina di destinazione del HTTP POST, nel nostro caso è ‘./savequery.php’.
Il secondo parametro è invece un oggetto JavaScript il quale contiene una serie di proprietà/valori; la proprietà rappresenta il nome che poi ricaveremo tramite l’array $_POST di PHP.
Come puoi vedere, i valori che passiamo sono due: ajxInsert e query; il primo contiene una stringa di testo mentre il secondo contiene la nostra Query SQL.
Il terzo parametro è invece la funzione di callback, che viene chiamata quando il metodo riceve una risposta dalla pagina alla quale inviamo i nostri valori.
Puoi notare, inoltre, che come parametro della funzione di callback, abbiamo inserito la variabile “r”, quest’ultima contiene la risposta ottenuta dalla pagina di destinazione.
All’interno della funzione di callback facciamo un’ulteriore controllo: se la risposta della pagina è uguale ad “ok”, allora inserisco un messaggio di successo all’interno del div#result ($result), tramite il metodo html() di jQuery, e subito dopo utilizziamo il metodo slideDown() per mostrare il div.
Il metodo html(), quando riceve una stringa di testo come parametro, si occupa di inserirla in tutti gli elementi trovati dal selettore di jQuery; invece il metodo slideDown() mostra un div non visibile con una piccola animazione di slide verso il basso.
Per quanto riguarda lo script JavaScript, questo è tutto. Rivediamolo ora al completo.
$(document).ready(
function(){
$('form.autoquery')
.submit(
function(){
var $elements = $('input:not([type=button], [type=submit], .exclude), textarea:not(.exclude), select:not(.exclude)',this),
$result = $('div#result'),
dbTable = $('input[name=db_table]').val(),
dbQuery = 'Insert Into '+dbTable+' Values(NULL,',
totInputs = $elements.length;
// effettuo un ciclo su ogni input
$elements
.each(
function(i){
var $this = $(this),
val = $this.val().replace(/'/g, "|||'");
// controllo se abbiamo già percorso tutti gli elementi, in tal caso ometto la virgola
if(i == totInputs - 1){
dbQuery += " '"+val+"'";
}else{
dbQuery += " '"+val+"',";
}
}
);
// chiudo la query
dbQuery += ")";
// invio la query tramite post
$.post(
'./savequery.php',
{
ajxInsert: 'true',
query: dbQuery
},
function(response){
if(response == 'ok'){
$result.html('I dati sono stati salvati correttamente').slideDown();
}else{
$result.html('Problema durante il salvataggio dei dati nel db').slideDown();
}
}
);
return false;
}
);
}
);
Andiamo avanti, e lasciamo finire il lavoro a PHP
In questo articolo, come già anticipato, non tratteremo in modo particolare la sicurezza dello script oppure la validazione, quindi il codice PHP è veramente molto semplice, vediamolo:
<?php
if( isset($_POST['ajxInsert']) && isset($_POST['query']) ){
$query = str_replace("|||'", "\'", stripslashes($_POST['query']));
if( !mysql_query($query) ){
print 'ko';
}else{
print 'ok';
}
}
?>
Come puoi notare, il codice viene eseguito solamente se $_POST[‘ajxInsert’] e $_POST[‘query’] non sono NULL; per controllarlo utilizziamo la funzione isset() di PHP.
Superato questo passaggio, la nostra Query SQL viene ripulita da tutti i backslash non neccessari.
In seguito, se presenti, viene sostituita la stringa precedentemente inserita da noi (|||’) con un apostrofo ed un backslash, in modo che una volta eseguita la query, non ci siano errori di sintassi.
Fatto questo possiamo inserire i valori nel nostro database e stampare l’esito dell’operazione, in questo caso: “ok” se l’esito è positivo e “ko” se l’esito è negativo.
Conclusione ed ultime considerazioni
Se “messo in sicurezza” questo semplice script potrebbe farci risparmiare del tempo in alcune situazioni.
In che modo gestisci i forms nei tuoi pannelli di controllo ? E pensi che questo metodo potrebbe tornarti utile ?
L'autore
21 commenti
Trackback e pingback
-
Tweets that mention jQuery+PHP: come automatizzare gli inserimenti nel database? | Your Inspiration Web -- Topsy.com
[...] This post was mentioned on Twitter by MarioP. , Antonino Scarfì. Antonino Scarfì said: RT @YIW jQuery+PHP: come automatizzare… -
Olha
Одессе, Днепре недвижимость недвижимость киев ... Авто в... -
passare variabili da javascript a php
[...] [...]
Ma perchè? Che senso ha?
Vi seguo da un po’ e mi dispiace doverlo ammettere, ma questo è il metodo più assurdo e orribile di inviare un modulo che abbia mai visto.
Generare una query lato client per poi eseguirla lato server non ha alcun senso. Si può fare tutto benissimo lato server, con in più la validazione di ogni singolo campo.
Ma ti immagini che succederebbe se qualcuno ti inviasse in POST una query del tipo TRUNCATE table, visto che il nome della tabella è pure in chiaro?
Ciao Daniele, grazie per il tuo parere.
Come già scritto nell’articolo, questo script è destinato ad una parte riservata di un sito; sono d’accordo con te che fare un modulo di contatti ed inviare la query in questo modo è estremamente pericoloso e va contro ogni senso logico.
Inoltre, questo voleva essere una riproduzione in JavaScript, di qualcosa che, ho già visto implementare in diverse occasioni con PHP.
Il mio punto di vista è che se hai un piccolissimo pannello di controllo per un tuo cliente, questo metodo potrebbe anche tornare comodo.
Mi permetto una critica, spero di non offendere nessuno …
Questa è una tecnica davvero pericolosa, soprattutto se postata in quello che viene presentato come un tutorial per principianti. È pericolosa a prescindere del fatto che sia in un lato pubblico o privato del sito: la sicurezza di quello che viene scritto deve prescindere da qualunque asserzione sulla sicurezza di base dei sistemi su cui poggia.
Credo che la prima regola che debba essere insegnata a chiunque inizi a lavorare in dinamico sia di garantire assolutamente la sanità dei valori passati da browser a server: l’idea che ho leggendo l’articolo è che passare una query a mysql prendendola completamente da un parametro sia una cosa giusta. Non solo non lo è, ma è il perfetto esempio di ciò che non deve mai essere fatto.
Deve essere sempre chiaro quello che non è ovvio: qualunque parte di una transazione http in qualunque metodo, nomi dei campi, valori, headers – è banalmente modificabile ad ogni uso e consumo, quindi non deve mai essere considerata come affidabile, e tutto ciò che non è affidabile deve essere sempre controllato, reso indiretto e validato.
Di conseguenza, è vitale che il lato php di un sito non si fidi mai di quanto il lato web/js/ajax propone: come corollario, quando pensiamo alle form sui siti dobbiamo sempre ed esclusivamente controllare i valori dei campi dal lato php, mai dal lato js se non in ridondanza per questioni di efficienza. Questo include la correttezza degli indirizzi email come le date o l’esistenza di valori nelle stringhe: la coerenza del nostro database ce ne sarà grata.
Ciao Cristian, grazie per il tuo commento, e no, non offendi assolutamente nessuno, se non potessimo neanche scambiare i pareri tra di noi, non arriveremo da nessuna parte.
In sostanza, e per essere brevi, mi trovi completamente d’accordo con te, hai chiarito più che bene le questioni di sicurezza ed il perchè, comunque, una query sql NON DEVE essere generata via browser.
Ho trovato utile questo script in una particolare circostanza; detto questo, come scritto anche nell’articolo, anche se lo script fosse concettualmente corretto, non si potrebbe mai lanciare una query sql direttamente da un valore ricevuto via $_POST …. questo è poco ma sicuro :)
Certo, se il modulo è all’interno di un’area privata, il problema sicurezza non sussiste.
Ma la mia perplessità maggiore è vedere spiegato così prolissamente una tecnica fondamentalmente sbagliata in un blog seguito da tante persone, magari alle prime armi, che credono di trovare una soluzione concreta ai loro problemi!
Poi se lo vedi solo come esercizio con javascript, allora ok. Ma ricordiamoci che javascript e php hanno ruoli ben diversi nella programmazione web :)
sono d’accordo con te sul fatto che un utente alle prime armi potrebbe interpretare male lo scopo di quest’aricolo, infatti ho ribadito nell’articolo che lo script, così come presentato non è sicuro, e che si dovrebbe quindi, metterlo in sicurezza per poterlo sfruttare.
Addirittura si potrebbe utilizzare poi php per controllare che la query sia soltanto d’inserimento, o si potrebbe generare in JavaScript solamente la lista di valori, mentre l’insert vero e proprio potrebbe essere fatto da php
Ottimo ESERCIZIO, ma condivido l’idea di Daniele de Nobili.
E’ molto più sicuro passare i parametri del form, ed elaborare la query lato server direttamente, senza mostrare nomi delle tabelle e simili.
Già vedo poco sicuro il fatto di mostrare l’indirizzo e nome del file di risposta, ma ora sto prendendo coraggio. :P
Grazie ai commenti di Daniele, Cristian, Dan e ai chiarimenti aggiuntivi di Nicolas comunque adesso il lettore può farsi un’idea molto più chiara sulla questione sicurezza.
Mi è piaciuto molto il parere di Cristian che mi trova perfettamente d’accordo, perchè “rischiare” lato client quando si può ottenere tranquillamente lo stesso risultato lavorando in piena sicurezza lato server?
Credo che Nicolas abbia realizzato questo articolo più come un esercizio di stile per mettere le mani sul suo amato jquery che come pratica da seguire.
Però commentare con un po’ più di tatto penso non sarebbe una cattiva idea. Mi scuso per l’OT. :-P
Ma no dai, alla fin fine, ci stà !!!
Le Query SQL sono dati sensibili ed è corretto che vengano gestite lato server :D
Nicolas, ci starà anche, ma ci sono modi e modi per fare una critica. E io critico (per non usare altre parole) il modo in cui si sono fatte, perchè in questo caso è palese che a queste persone gli sta talmente a cuore il futuro dei principianti che vengono qua a rompere le le le… (non mi viene la parola). Avete scritto tanti articoli e non hanno mai commentato. Non capisco, erano in agguato pronti a trovare i pelo nel l’uovo? :D Che poi il pelo non c’è.
Vorrei sapere che risposte si aspettano sti tipi quando commentano in questo modo… e vi invidio perchè riuscite sempre a mantenere la calma e a trovare la risposta giusta. Io invece certi commenti li cestinerei e basta. Non ci perderei due secondi a trovare le parole giuste perchè basterebbe un semplice clic su “cancella”. Inserirei un bell’avvertimento del tipo: si fa uso di jQuery per disintegrare senza pietà i commenti ritenuti “fuffa” (sempre per non usare un’altra parola). :-P
Quello che è più pericoloso è il fatto che il tutto viene raccontato come la cosa più normale del mondo e magari chi è alle prime armi è portato pure a pensare che questa sia la prassi o addirittura una cosa da esperti.
Dovessi presentare una cosa del genere il mio capo mi mette a fare fotocopie per una settimana e mi riterrei pure fortunato :)
L’articolo è da esperti, ma poi alcuni commenti sono da… “a lavà a capa o’ciuccio si perde acqua e sapon!” ;)
Ciao Alan, prima di tutto grazie per il tuo commento.
Se si scrivessero articoli banali, e dedicati soltanto ai principianti, non si andrebbe poi molto lontano..
Scrivere un articolo su una tecnica giusta o sbagliata che sia, ci invita a riflettere.
Senza contare che, visto che ci sono veramente persone esperte, non si faticherebbe a trovare un modo per rendere sicuro questo script.
Detto questo, è ovvio (come già detto), che questa non è la prassi, infatti nell’articolo non si accenna minimamente a come inserire dei dati in un database, ma semplicemente ad uno script JavaScript che, se non ci serve o non riteniamo giusto o non è giusto usare in questo caso, sapere che possiamo farlo è un punto a nostro favore.
Spesso il problema è che non sappiamo bene fino dove possiamo spingerci e dove possiamo arrivare.
Sono dell’idea che non si possa scrivere sempre pensando: “e se lo legge qualcuno che non sa cos’è php? e se lo legge qualcuno che non sa cose JavaScript ???”
Io, non andrei mai a studiare un corso avanzato di JAVA senza conoscere la basi del linguaggio, (non è assolutamente questo il caso)!!!
Questa è la mia idea, del tutto criticabile :D
Grazie e Buona Giornata!!!
Bene… allora per noi che dobbiamo imparare che si fa?
MI PARE di capire che è stato lasciato troppo al jQuery e poco al Php.
Però è anche vero che un form che lavora “senza uscire dalla pagina” (almeno mi pare che non vi sia alcun ricaricamento) e ti restituisce subito l’esito dell’invio, tra l’altro con l’effettino slide, è una gran figata.
Qualcuno potrebbe scrivere, oltre a criticare, un articolo per chi, come me, non è ancora in grado di buttare giù il codice autonomamente?
Ciao righ e benvenuto su YIW!
Le critiche pervenute a questo articolo sono servite in qualche modo a mettere in evidenza l’argomento sicurezza (una community è anche questo) molto spesso tralasciato soprattutto da chi muove i primi passi.
Stiamo provvedendo a realizzare qualcosa in merito per chiarire ogni eventuale dubbio. Continua a seguirci.
…però, scusatemi, ma come faccio, allora, a risolvere questa richiesta di un mio cliente?
Sono su server linux-php 5.3-mysql.
In una pagina ho una lista di items che rappresentano gli eventi di un congresso, ognuna con una sua ora di inizio.
L’utente (che ha fatto gia il login), vedrà in ogni item dell’evento un simbolo “partecipa all’evento”.
Se clicca sul simbolo, devo:
– cambiare colore all’item dell’evento per evidenziare il fatto che ha scelto di parteciparvi (e lo faccio con il javascript – lato client);
– devo, però, anche segnarmi nel db (lato server) l’informazione codice_utente/codice_evento per tenere traccia della sua preferenza espressa.
Stessa cosa, ovviamente, se vuole cancellarsi.
Il tutto, e questo è il punto, deve avvenire senza il refresh della pagina.
Questa richiesta mi è stata giustificata (e ne condivido il senso) sostenendo che l’utente vede immediatamente cambiare colore all’item selezionato e quindi ritiene di aver gia “salvato” la sua preferenza senza dover premere alcun “salva” o vedere alcun refresh.
In sostanza, devo mettere un link che è gia definito nel momento in cui invio la pagina al client.
Sarà del tipo http://www.miosito.it/scividb.php?codice_utente=xxx&codice_evento=yy e ce ne sarà uno per ogni item.
Questo link, se premuto, non deve scatenare un submit di un form, ma spedire una chiamata asincrona ad un scrividb.php del server che riceve i parametri e fa la scrittura mentre l’utente rimane nella sua pagina.
Pareri?
Ps: Nicolas, fatti salvi gli avvertimenti sui rischi dell’utilizzo del codice, ti faccio i complimenti per la chiarezza didattica e ti ringrazio del tempo che ci dedichi.
Valerio
Ciao Valerio, grazie per i complimenti.
Per fare ciò che hai descritto devi utilizzare AJAX per passare i valori da aggiornare al tuo file.
Ci sono diversi articoli nel sito, che ti spiegano come utilizzare ajax.
In sostanza, al click sul link rilevi il codice utente ed il codice evento, e passi questi due parametri (solo i parametri) alla pagina scrividb.
Se ti dovesse servire maggiore supporto, non esitare a contattarci attraverso il Forum di Your Inspiration Web.
Buona serata ;)
Nicolas