Share
Qualche mese fa hai imparato come creare un sistema di editing sul posto. Oggi faremo un ulteriore passo avanti mentre creiamo un semplice back-end che consentirà al nostro sito Web di ricorda i cambiamenti che abbiamo fatto.
Con tutto il ronzio del Web 2.0, la facilità d'uso è ora molto più importante che mai. Essere in grado di modificare alcuni contenuti senza dover andare su un'altra pagina è qualcosa che molti utenti desiderano davvero. Molti grandi nomi stanno già utilizzando questo modello con grande effetto. Se hai usato Flickr, probabilmente lo hai visto in azione.
Oggi miglioreremo la versione precedente: eliminando alcuni bug, aggiungendo alcune funzionalità e, soprattutto, salvando tutti i dati in un vero database per la conservazione. Interessato? Iniziamo subito!
Per prima cosa, abbiamo bisogno di un database per estrarre le informazioni da e poi, quando richiesto, aggiornare i dati che contiene. Per il piacere di questo esercizio, impostiamo una tabella con alcuni dati casuali.
Ho già un database chiamato a posto con un tavolo chiamato dati sul mio server di sviluppo. Per il nostro utilizzo aggiungeremo un altro tavolo.
Generalmente preferisco usare phpMyAdmin per eseguire le mie query SQL. Fare clic sulla scheda SQL e incollare la seguente query:
Accentsconagua
CREATE TABLE SE NON ESISTE 'inplace' ('campo' varchar (120) NOT NULL, 'valore' testo NOT NULL, PRIMARY KEY ('campo')) ENGINE = MyISAM; INSERISCI IN "inplace" ("field", "value") VALUES ("name", "am Siddharth"), ("passion", "ama lavorare con il web"), ("profession", "am a freelancer" ), ('lavoro', 'scrivi per Net Tuts'), ('url', 'può essere trovato su www.ssiddharth.com'), ('punch', 'non ti deluderà mai o non ti arrenderò :) '), (' design ',' Ottieni approvazione disegno da Yusuf '), (' fattura ',' Invia una fattura a Drew '), (' ricerca ',' Inizia la ricerca sul progetto di Pallav '), (' discutere ',' Parlare con Harnish di nuove idee '), (' debug ',' Controlla il sito di Aditya per il rendering dei bug '), (' incontra ',' Incontra Clintson per discutere il nuovo progetto '); 
Se tutto ha funzionato come dovrebbe, dovresti ottenere la seguente schermata:
Uno sguardo più da vicino al tavolo:
Dal momento che volevo esplicitamente mantenere la semplicità della demo e aggiungere solo le persone di back-end richieste, mantengo la struttura della tabella molto semplice. Sentiti libero di modificarlo ed estenderlo nei tuoi progetti.
Ora che la tabella di esempio è stata creata e pre popolata con alcuni dati di test, possiamo passare al back-end reale.
Dal momento che accediamo al database spesso per leggere i dati o aggiornare i dati che contiene, è prudente creare un file di configurazione che contenga i dati rilevanti. Crea un file chiamato db.php e incollare quanto segue in esso.
Niente di speciale qui. Definiamo tutti i dettagli rilevanti, connettiamo l'host utilizzando la combinazione nome utente / password specificata e quindi selezioniamo il database pertinente per la manipolazione lungo la strada.
L'editor si occupa della lettura dal database e dell'output dei dati in un formato specifico, quindi è facile per noi inviare i dettagli rilevanti al server informando quale record aggiornare. Ne parleremo più in un secondo.
Il codice non cambia in modo significativo dal codice HTML statico solo dalla versione precedente. Tuttavia, è necessario rendere dinamici i dati. Quindi nel codice HTML originale, questo:
è sostituito da:
'$ Row [ 'valore'].''; ?>
'$ Row [ 'valore'].''; ?>
Dato che la tabella è piccola, selezioneremo tutto dalla tabella ma chiediamo di restituire solo i primi 6 elementi. Successivamente, ho solo scorrere e stampare il Li elementi. Prendi nota speciale del fatto che ciascuno Li elementi ottiene il suo id attributo impostato sul nome del campo da cui ottiene il valore. Questo verrà utilizzato successivamente nei dati inviati al server per indicare quale record deve essere aggiornato.
Sono consapevole che esporre il nome del campo in questo modo potrebbe rappresentare una minaccia per la sicurezza, ma in un ambiente adeguatamente protetto, non credo che questo causerà problemi. Altrimenti potresti semplicemente usare alias qui e fare una ricerca inversa sul lato server. Lascia che i tuoi succhi creativi scorrano lì. Per una demo molto semplice, sembrava piuttosto eccessivo.
Inoltre, non dimenticare di includere il db.php file che abbiamo creato in precedenza per l'editor. Questa linea si prenderà cura di questo.
Dopo aver apportato le modifiche, ricorda di salvare il file con a .php estensione.
Il gestore è dove la pagina pubblica i dettagli. Questo si occupa di controllare se i dati sono stati effettivamente inviati alla pagina, e in caso affermativo, disinfetta i dati inviati e quindi aggiorna i valori pertinenti.
Crea un file chiamato handler.php e incollare quanto segue:
Un affare piuttosto semplice. Lascia che ti spieghi ogni passaggio in dettaglio.
Dato che avremo bisogno di manipolare il database, per prima cosa includeremo il db.php file che abbiamo creato in precedenza.
Successivamente, controlliamo se entrambe le nostre variabili richieste, campo- valore che ci dice quale campo aggiornare e valore - il valore da aggiornare a, viene inviato come variabili POST al gestore. Se è così, possiamo procedere al lavoro reale. In caso contrario, non succede nulla.
Una volta, abbiamo verificato che le variabili sono state inviate, possiamo continuare a disinfettare i dati per l'inserimento nel database. Per mantenerlo il più semplice possibile, useremo il mysql_real_escape_string funzione per disinfettare i nostri dati. Questa funzione sfugge ai caratteri speciali presenti nella stringa passata. Se passati in condizioni non igienizzate, il nostro codice è soggetto ad attacchi SQL injection.
Ora che ci siamo assicurati che i dati siano sicuri, possiamo aggiornare il record pertinente. Presumo che questa parte non abbia bisogno di spiegazioni dato che è un SQL molto semplice. In parole povere, nel a posto tavolo, cambia campo di valore corrispondente a valore.
Se tutto procede secondo i piani, restituire un valore di 1 che verrà catturato dal nostro script per determinare l'esito della transazione in modo che possa procedere di conseguenza. Elaborerò più avanti di seguito. Si prega di notare che in questo caso, riferisco semplicemente se il tentativo è riuscito o meno. Nel tuo progetto, potresti voler restituire informazioni molto più dettagliate in caso si verifichi un errore. Non sei limitato alla mia implementazione estremamente semplice.
Ora che il back-end è stato costruito, è il momento di modificare la parte front-end del progetto per consentirne la comunicazione con il server. Vedremo anche l'implementazione di una nuova funzionalità lungo il percorso.
Uno dei reclami della vecchia versione era la corruzione dei dati quando alcune azioni venivano eseguite in un ordine specifico. Ciò era dovuto al mio estremo bisogno di semplicità e concisione che alla fine mi ha portato a trascurare quello specifico scenario. Non di meno, lo rettificheremo oggi.
Suppongo che tu abbia il vecchio codice JavaScript nelle vicinanze da confrontare e modificare.
La prima versione utilizzava variabili globali per contenere i dati originali che in alcuni casi davano risultati imprevisti. Rettificheremo prima questo.
Il modo più semplice per rettificare questo è semplicemente aggiungere un input nascosto accanto all'input originale e usarlo come buffer. Dal momento che è stato creato e distrutto al volo ed è specifico solo per quell'elemento, possiamo modificare / salvare / scartare quanti più elementi possibili il maggior tempo possibile senza alcun inconveniente.
La vecchia replaceHTML la funzione si aggiorna a:
function replaceHTML () var buffer = $ (this) .html () .replace (/ "/ g," ""); $ (this) .addClass ("noPad") .html ("") .html (" Salva le modifiche Elimina le modifiche ") .unbind ('dblclick', replaceHTML); Non è un grosso edit qui. Per prima cosa creiamo una variabile interna chiamata buffer per mantenere il valore originale. Quindi eliminiamo il contenuto HTML dell'elemento genitore e inseriamo il nostro. Oltre allo snippet originale, aggiungiamo una casella di testo nascosta che mantiene il valore originale. Nient'altro è cambiato qui.
L'iterazione precedente associava funzioni simili ma separate per ciascuno dei collegamenti funzionali. Li uniremo qui.
function handler () var selector; if ($ (this) .hasClass ("btnSave")) selector = "editBox" else selector = "buffer" $ (this) .parent () .html ($ (this) .siblings ("form" ) .children ("." + selector) .val ()) .removeClass ("noPad editHover") .bind ("dblclick", replaceHTML); restituisce falso; Invece di utilizzare funzioni anonime come l'ultima volta, useremo una funzione normale. Modificheremo solo piccole parti della funzione per far sì che gestisca sia le richieste di salvataggio che quelle di eliminazione.
Prima dichiariamo una variabile chiamata selettore che detiene il selettore da utilizzare durante l'aggiornamento del Li elementi. editbox la classe è assegnata alla casella di testo visibile e buffer è la classe assegnata alla casella di testo nascosta che contiene il valore originale.
Dal momento che stiamo unificando i gestori di eventi, dobbiamo controllare quale link è stato cliccato. Per prima cosa vediamo se il link cliccato ha una classe di btnSave. Se è così, l'utente vuole salvare le modifiche e quindi assegniamo il valore di editbox al selettore variabile. Altrimenti, buffer è assegnato.
Il resto del gestore rimane lo stesso della versione precedente, tranne per il fatto che il selettore viene iniettato dinamicamente in base all'azione anziché essere codificato nella funzione. Se ti sembra perso qui, guarda la prima parte della serie per capire cosa fa l'ultimo blocco. In sostanza, inseriamo il valore della casella di testo selezionata nel genitore Li elemento e rebind il gestore di eventi originale.
Non dimenticare di aggiornare i gestori di eventi per ciascun link. Il seguente un rivestimento si prende cura di questo:
$ (". btnSave, .btnDiscard"). live ("clic", gestore); Se ti stai chiedendo perché ho usato il vivere funzione qui, si prega di fare riferimento al precedente articolo.
Con tutti i bug schiacciati e il codice in generale un po 'più stretto, possiamo iniziare a lavorare sull'implementazione della funzionalità attuale.
Prima di poter inviare i dati al server, dobbiamo trovare un modo per inviare i dettagli rilevanti al server. In questo caso, abbiamo bisogno di 2 dettagli per fare una modifica con successo.
La prima parte è piuttosto semplice poiché abbiamo una casella di testo che contiene i valori da inviare al server. La seconda parte ha bisogno di un po 'di lavoro.
Mentre crei l'editor, ricorda che abbiamo usato l'ID principale del tavolo come id attributi a ciascuno Li elemento? Ce ne serviremo qui. Creeremo solo un'altra casella di testo nascosta che manterrà il valore che può essere quindi postato sul server.
function replaceHTML () var buffer = $ (this) .html () .replace (/ "/ g," ""); $ (this) .addClass ("noPad") .html ("") .html (" Salva le modifiche Elimina le modifiche ") .unbind ('dblclick', replaceHTML); Il replaceHTML la funzione deve essere aggiornata in questo modo. L'unica differenza è l'aggiunta di una casella di testo nascosta con il nome campo. Usiamo jQuery attr funzione per accedere al Li l'attributo ID dell'elemento e lo usa come valore della casella di testo.
Quindi sull'implementazione AJAX. Useremo lo standard di jQuery ajax funzione qui.
function handler () // Codice precedente if ($ (this) .hasClass ("btnSave")) var selector = "editBox"; var str = $ (this) .siblings ("form"). serialize (); $ .ajax (tipo: "POST", async: false, timeout: 100, url: "handler.php", data: str, success: function (msg) code = msg;,); if (code == 1) alert ("Success"); else alert ("Failure"); // Resto del codice Poiché abbiamo solo bisogno di inviare i dati al server quando l'utente ha fatto clic sul link pertinente, incapsuliamo tutto il codice all'interno del Se blocco creato in precedenza per verificare quale link è stato cliccato.
Mi avvalgo del ajax funzione poiché trovo che sia il più robusto. Per prima cosa, serializzo i dati conservati dal modulo genitore in modo che possa essere pubblicato sul server. Successivamente, chiamo il ajax funzione che imposta tutti i dettagli rilevanti secondo necessità, incluso il tipo di richiesta da effettuare - INVIARE e l'URL per pubblicare. Specifichiamo anche che i dati serializzati in precedenza devono essere inviati al server.
Di solito, dovresti usare l'in-built successo e errore callback per apportare ulteriori modifiche ma ho scelto di non farlo qui. Invece, sto solo catturando il testo inviato dal server. Se restituisce 1, un valore che abbiamo configurato il nostro gestore per restituire se tutto è successo correttamente, avvisiamo l'utente di farglielo sapere.
Gli avvisi sono un modo piuttosto rudimentale per aggiornare l'utente con lo stato dell'azione. Con questo in mente, elimineremo il sistema di allerta e implementeremo invece una semplice barra di stato nella parte inferiore che riflette questi cambiamenti.
Non abbiamo bisogno di nulla di speciale qui. Abbiamo solo bisogno di un semplice div elemento che possiamo manipolare. Dovremo aggiungere questo direttamente nell'editor.
Prendi nota del id attributo. Lo useremo più tardi.
Nell'interesse della riusabilità del codice, creeremo una funzione di supporto che aggiorna la barra di stato secondo necessità.
funzione UI (stato) var status = ; status.Ready = "Pronto"; status.Post = "Salvataggio dei dati. Attendere ..."; status.Success = "Successo! Le tue modifiche sono state salvate."; status.Failure = "Tentativi di salvataggio dei dati falliti. Per favore riprova."; var background = ; background.Ready = "# E8F3FF"; background.Post = "# FAD054"; background.Success = "# B6FF6C"; background.Failure = "# FF5353"; $ ("# status"). animate (opacity: 0, 200, function () $ ("# status"). html (stato [stato]). css (background: background [stato]). animato (opacità: 1, 200)); La funzione, che abbiamo chiamato, UI, prende lo stato della barra di stato come parametro. All'interno della funzione, creiamo due oggetti: stato detiene il testo pertinente e sfondo contiene i colori di sfondo della barra di stato.
Potremmo semplicemente aggiornare direttamente il testo e il colore di sfondo della barra di stato, ma qui su Net Tuts non è così che rotoliamo. :)
Faremo uso di jQuery animare funzione per animare con garbo la barra di stato. Innanzitutto, animiamo la sua opacità a zero. Successivamente, aggiorniamo il suo testo e il colore di sfondo e quindi lo animiamo alla piena visibilità.
Prendete nota in particolare del fatto che la logica utilizzata per aggiornare i valori è racchiusa all'interno di una funzione anonima e passata come richiamata all'animazione originale. In questo modo la barra si animerà a zero opacità e quindi tutto verrà aggiornato. Se le animazioni sono concatenate, i colori del testo e dello sfondo verranno aggiornati subito dopo l'inizio dell'animazione iniziale che porta a un effetto molto fastidioso.
Aggiungerlo all'interfaccia utente e aggiornare la barra di stato ora è un gioco da ragazzi. Invece degli avvisi che abbiamo usato in precedenza, dobbiamo usare il UI funzione.
Il blocco precedente che è riuscito alla chiamata ajax può ora essere sostituito da:
if (code == 1) UI ("Success"); else UI ("Failure"); Inoltre, non dimenticare di aggiungere UI ( "Ready"); quando la pagina viene caricata, l'utente sa che il sistema è pronto per la manipolazione e UI ( "Post"); quando i dati vengono inviati al server.
Quando si aggiungono i propri stati alla barra delle attività, prestare particolare attenzione al fatto che la stringa che inviamo come parametro alla funzione mappa direttamente alla proprietà dell'oggetto.
L'ultima cosa che dobbiamo guardare è il fatto che se il tentativo di salvare i dati fallisce, il testo aggiornato viene comunque mantenuto. Questo sembra piuttosto contro intuitivo. Se il tentativo di salvare i dati fallisce, dobbiamo assicurarci che il testo originale sia riposto in modo che l'utente sappia che i dati non sono stati salvati.
Per rettificare questo, dovremo cambiare il selettore variabile nel caso in cui si verifichi un errore.
if (code == 1) UI ("Success"); selector = "editBox"; else UI ("Failure"); selector = "buffer"; Se il valore è stato modificato correttamente, cambiamo il valore della variabile pertinente in editbox. Ma se il tentativo si è concluso con un fallimento, dobbiamo sostituire il nuovo valore con il vecchio valore. Quindi assegniamo buffer alla variabile in modo tale che il valore tornerà al suo valore originale.
E il gioco è fatto. Come aggiungere una funzionalità user friendly ai tuoi progetti. Spero che tu abbia trovato questo tutorial interessante e questo ti è stato utile. Sentitevi liberi di riutilizzare questo codice altrove nei vostri progetti e suonare qui se vi trovate in difficoltà.
Si prega di tenere presente che questo sistema è stato progettato con l'intenzione primaria di insegnare le tecniche associate a questo, non come un sistema di produzione progettato per inserirsi nei sistemi esistenti. Questo è più di un fondamento che incoraggio le persone a sviluppare e migliorare.
Domande? Belle cose da dire? Critiche? Colpisci la sezione dei commenti e lasciami un commento. Buona programmazione!
Sapevi che puoi guadagnare fino a $ 600 per scrivere un tutorial PLUS e / o screencast per noi? Stiamo cercando tutorial dettagliati e ben scritti su HTML, CSS, PHP e JavaScript. Se sei dell'abilità, contatta Jeffrey a [email protected].
Si prega di notare che il risarcimento effettivo dipenderà dalla qualità del tutorial finale e screencast.
