Share
Cu câteva luni în urmă, ați învățat cum să creați un sistem de editare la fața locului. Astăzi, vom face lucrurile un pas mai departe, pe măsură ce vom crea un backend simplu, care va permite site-ul nostru să tine minte schimbările pe care le-am făcut.
Cu toată buzunarul în jurul Web 2.0, ușurința în utilizare este acum mult mai importantă ca niciodată. A fi capabil de a edita un anumit conținut fără a fi nevoie să meargă la o altă pagină este ceva ce o mulțime de utilizatori doresc cu adevărat. O mulțime de nume mari folosesc deja acest model pentru a avea un efect mare. Dacă ați folosit Flickr, probabil ați văzut acest lucru în acțiune.
Astăzi, vom îmbunătăți versiunea anterioară: eliminarea unor erori, adăugarea unor caracteristici și, mai important, salvarea tuturor datelor într-o bază de date actuală pentru reținere. Interesat? Să începem imediat!
În primul rând, avem nevoie de o bază de date pentru a trage informațiile și, atunci când este necesar, actualizați datele pe care le deține. De dragul acestui exercițiu, permiteți-ne să configurați un tabel cu unele date aleatorii.
Am avut deja o bază de date numită la loc cu o masă numită date pe serverul meu de dezvoltare. Pentru utilizarea noastră vom adăuga un alt tabel.
Prefer de obicei folosirea phpMyAdmin pentru rularea interogărilor mele SQL. Faceți clic pe fila SQL și inserați în următoarea interogare:
Accentsconagua
CREATE TABLE Dacă nu există "inplace" ('field' varchar (120) NOT NULL, textul 'value' NOT NULL, KEY PRIMARY ('field')) ENGINE = MyISAM; INSERT INTO "(" domeniu "," valoare ") VALUES (" nume "," am Siddharth ")," pasiune " ), ('work', 'write for Net Tuts'), ('url', 'poate fi gasit la www.ssiddharth.com'), ('punch', 'nu te va dezamagi nici nu te lasa :) ), ("proiectare", "obțineți aprobarea de proiectare de la Yusuf"), ("factură", "trimite o factură lui Drew" discutați cu Harnish despre idei noi), ("debug", "site-ul Check Aditya pentru redarea erorilor"), ("întâlniți", "întâlniți cu Clintson pentru a discuta un nou proiect"); 
Dacă totul a funcționat așa cum ar trebui, ar trebui să obțineți următorul ecran:
O privire mai atentă la masă:
Din moment ce am vrut în mod explicit să păstrez simplitatea demo-ului și să adaug doar persoanele din spate solicitate, eu țin structura mesei foarte simplu. Simțiți-vă libertatea de a le modifica și de a le extinde în proiectele dvs..
Acum, când tabelul de eșantioane a fost creat și pre-populat cu câteva date de testare, putem trece la sfârșitul spate real.
Deoarece vom accesa adeseori baza de date fie pentru a citi date, fie pentru a actualiza datele pe care le conține, este prudent să creați un fișier de configurare care să dețină datele relevante. Creați un fișier numit db.php și lipiți următoarele în ea.
Nimic special aici. Definiți toate detaliile relevante, conectați-vă la gazdă utilizând combinația de nume de utilizator / parolă dată și apoi selectați baza de date relevantă pentru manipulare pe drum.
Editorul se ocupă de citirea din baza de date și de transmiterea datelor într-un format specific, astfel încât este ușor să trimitem detalii relevante înapoi la server, informând ce înregistrare să actualizeze. Vom vorbi despre asta mai mult într-o secundă.
Codul nu se modifică semnificativ față de codul HTML static numai din versiunea anterioară. Cu toate acestea, trebuie să facem dinamica datelor. Deci, în codul HTML original, aceasta:
se înlocuiește cu următorul text:
'$ Rand [ 'valoare'].'„; ?>
'$ Rand [ 'valoare'].'„; ?>
Din moment ce tabela este mică, vom selecta totul de la masă, însă vom cere să se întoarcă doar primele 6 elemente. În continuare, am doar să repet și printez Li elemente. Luați notă de faptul că fiecare Li elementele devin sale id atributul setat la numele câmpului pe care îi obține valoarea de la. Acesta va fi folosit mai târziu în datele trimise înapoi la server pentru a indica care înregistrare trebuie să fie actualizată.
Sunt conștient că expunerea denumirii câmpului ca aceasta ar putea reprezenta o amenințare la adresa securității, ci într-un mediu bine garantat, nu cred că acest lucru va instiga la orice necaz. De altfel, ați putea folosi doar aliasuri aici și faceți o căutare inversă pe partea de server. Lăsați sucurile creative să curgă acolo. Pentru o demonstrație foarte directă, părea mai degrabă o suprasolicitare.
De asemenea, nu uitați să includeți db.php fișierul pe care l-am creat mai devreme editorului. Această linie va avea grijă de asta.
După efectuarea editărilor, nu uitați să salvați fișierul cu un .php extensie.
Operatorul este locul în care pagina postulează detaliile. Acest lucru are grijă de verificarea faptului că datele au fost efectiv trimise la pagină și, dacă este cazul, dezinfectă datele trimise și apoi actualizează valorile relevante.
Creați un fișier numit handler.php și lipiți în următoarele:
O aventură destul de simplă. Permiteți-mi să explic fiecare pas în detaliu.
Deoarece va trebui să manipulăm baza de date, vom include în primul rând db.php fișier creat mai devreme.
Apoi, verificăm dacă ambele variabile cerute, camp- valoare care ne indică câmpul de actualizare și valoare - valoarea la care trebuie să actualizați, sunt trimise ca variabile POST către manipulant. Dacă da, putem trece la lucrarea reală. Dacă nu, nu se întâmplă nimic.
Odată, am verificat că variabilele au fost trimise, putem continua dezinfectarea datelor pentru inserarea în baza de date. Pentru a ne păstra cât mai simplu posibil, vom folosi mysql_real_escape_string funcția de a dezinstala datele noastre. Această funcție scapă de caracterele speciale prezente în șirul dat. Dacă este trecut într-un dezinfectat, codul nostru este supus atacurilor de tip SQL.
Acum, că ne-am asigurat că datele sunt în siguranță, putem actualiza înregistrarea relevantă. Presupun că această parte nu are nevoie de explicații, deoarece este foarte simplu SQL. În termeni laic, în la loc tabel, schimbare câmpuri valoare corespunzătoare pentru valoare.
Dacă totul merge conform planului, returnați o valoare de 1 care vor fi capturate de scriptul nostru pentru a determina rezultatul tranzacției, astfel încât să poată proceda în consecință. Voi elabora mai târziu mai jos. Vă rugăm să rețineți că în acest caz, am doar să raportez dacă încercarea a reușit sau a eșuat. În proiectul dvs., poate doriți să reveniți la informații mult mai detaliate în cazul apariției unei erori. Nu vă limitați la implementarea mea extrem de simplă.
Acum, când a fost construit capătul din spate, este timpul să editați partea frontală a proiectului pentru al permite să comunice cu serverul. Vom analiza, de asemenea, implementarea unei noi caracteristici pe parcurs.
Una dintre plângerile versiunii vechi a fost coruperea datelor când anumite acțiuni au fost efectuate într-o anumită ordine. Acest lucru sa datorat nevoii mele extreme de simplitate și concisitate care, în cele din urmă, m-au determinat să ignor acel scenariu specific. Cu toate acestea, o vom rectifica astăzi.
Presupun că aveți vechiul cod JavaScript în apropiere pentru a compara și edita.
Prima versiune a utilizat variabilele globale pentru a păstra datele originale, ceea ce a condus la rezultate neașteptate în anumite cazuri. O vom rectifica mai întâi.
Cel mai simplu mod de a rectifica acest lucru ar fi să adăugați o intrare ascunsă lângă intrarea originală și să o utilizați ca tampon. Din moment ce este creat și distrus în zbor și este specific numai acelui element, putem edita / salva / arunca cât mai multe elemente posibil cât mai mult timp posibil fără să sufere.
Bătrânii replaceHTML funcția se actualizează la:
funcția replaceHTML () var buffer = $ (acest) .html () .replace (/ "/ g," "); $ (acest) .addClass ("noPad") .html ("") .html (" Salvați modificările Renunțați la modificări ") .unbind ('dblclick', replaceHTML); Nu este o editare mare aici. Mai întâi vom crea o variabilă internă numită tampon pentru a păstra valoarea inițială. Apoi, purjăm conținutul HTML al elementului părinte și injectăm propriul. În plus față de fragmentul original, adăugăm o casetă de text ascunsă care păstrează valoarea inițială. Nimic altceva nu este schimbat aici.
Repetarea anterioară a legat funcții similare, dar separate pentru fiecare dintre legăturile funcționale. Le vom uni.
funcția de manipulare a funcțiilor () var selector; dacă $ (this) .hasClass ("btnSave")) selector = "editBox" altceva selector = "buffer" $ (this) .parent () .html ) .children ("." + selector) .val ()) .removeClass ("noPad editHover") .bind ("dblclick", înlocuireHTML); return false; În loc să folosim funcții anonime ca ultima oară, vom folosi o funcție normală. Vom schimba numai părți mici ale funcției, pentru al face să se ocupe de cererile de salvare și de aruncare.
Mai întâi declarăm o variabilă numită selector care deține selectorul de utilizat în timpul actualizării Li element. casetei de editare este clasa atribuită caseta de text vizibilă și tampon este clasa atribuită casetei de text ascunse care deține valoarea inițială.
Deoarece unificăm gestionarea evenimentelor, trebuie să verificăm ce link a fost făcut clic. Mai întâi vedem dacă link-ul pe care dați clic are o clasă de btnSave. Dacă da, atunci utilizatorul dorește să salveze editările și astfel atribuim valoarea lui casetei de editare la selector variabil. Dacă nu, tampon este atribuit.
Restul handler-ului rămân aceleași ca vechea versiune, cu excepția faptului că selectorul este injectat dinamic pe baza acțiunii, în loc să fie codat greu în funcție. Dacă pari pierdut aici, uită-te la prima parte a seriei pentru a înțelege ce face ultimul bloc. În esență, vom injecta valoarea selectată a casetei de text în părinte Li element și rebrand procesorul inițial al evenimentului.
Nu uitați să actualizați gestionarea evenimentelor pentru fiecare legătură. Următorul singur liner are grijă de acest lucru:
$ (".btnSave, .btnDiscard") live ("faceți clic pe", handler); Dacă vă întrebați de ce am folosit Trăi funcționează aici, vă rugăm să consultați articolul anterior.
Odată cu eliminarea tuturor bug-urilor și a codului general în general, putem începe să lucrăm la implementarea funcționalității reale.
Înainte de a putea trimite datele serverului, trebuie să găsim o modalitate de a trimite detalii relevante înapoi la server. În acest caz, avem nevoie de 2 detalii pentru a face o editare reușită.
Prima parte este destul de simplă, deoarece avem o casetă de text reală care ține cont de valorile care trebuie trimise la server. A doua parte are nevoie de puțină muncă.
În timp ce creați editorul, rețineți că am folosit ID-ul principal al tabelului ca id atributele fiecăruia Li element? O vom folosi aici. Vom crea doar o altă casetă de text ascunsă care va păstra valoarea care poate fi postată înapoi la server.
funcția replaceHTML () var buffer = $ (acest) .html () .replace (/ "/ g," "); $ (acest) .addClass ("noPad") .html ("") .html (" Salvați modificările Renunțați la modificări ") .unbind ('dblclick', replaceHTML); replaceHTML funcția trebuie să fie actualizată ca atare. Singura diferență este adăugarea de casetă de text ascunsă cu numele camp. Folosim jQuery attr pentru a accesa funcția Li Elementul ID al elementului și îl folosiți ca valoare a casetei de text.
Apoi, la implementarea AJAX. Vom folosi standardul jQuery ajax funcționează aici.
funcția handler () // Codul anterior dacă ($ (this) .hasClass ("btnSave")) var selector = "editBox"; var str = $ (acest) .siblings ("form") serialize (); $ .ajax (tip: "POST", async: false, timeout: 100, url: "handler.php", date: str, succes: functie (msg) code = msg; dacă (code == 1) alert ("Succes"); altceva alert ("Failure"); // Restul codului Deoarece nu trebuie decât să trimitem datele către server atunci când utilizatorul a făcut clic pe link-ul relevant, încapsulăm tot codul din dacă blocul pe care l-am creat mai devreme pentru a verifica ce link a fost făcut clic.
Eu folosesc ajax deoarece mi se pare cel mai robust. În primul rând, serializez datele pe care le deține formularul părinte, astfel încât acesta să poată fi postat pe server. Apoi, apelez ajax funcția de setare a tuturor detaliilor relevante, după cum este necesar, care include tipul de solicitare de efectuat - POST și adresa URL la care trebuie să postați. De asemenea, specificăm că datele pe care le-am serializat mai devreme ar trebui trimise la server.
De obicei, ai folosi încorporatul succes și eroare apelurile de apel pentru a face modificări suplimentare, dar am ales să nu fac acest lucru aici. În schimb, captulez doar textul trimis de server. Dacă returnează 1, o valoare pe care am configurat-o pentru a reveni dacă totul sa întâmplat corect, îl avertizăm pe utilizator să îl informeze.
Alertele sunt o modalitate destul de rudimentară de a actualiza utilizatorul cu starea acțiunii. În acest sens, vom elimina sistemul de alertă și, în schimb, vom pune în aplicare o simplă bara de stare în partea de jos care să reflecte aceste schimbări.
Nu avem nevoie de ceva special aici. Avem nevoie doar de o simplă div element pe care îl putem manipula. Vom trebui să adăugăm asta direct în editor.
Luați notă de id atribut. O vom folosi ulterior.
În interesul reutilizării codului, vom crea o funcție de ajutor care actualizează bara de stare după cum este necesar.
funcția UI (stare) var status = ; status.Ready = "Ready"; status.Post = "Salvarea datelor dvs. Vă rugăm să așteptați ..."; status.Success = "Succes! Modificările dvs. au fost salvate."; status.Failure = "Încercările de salvare a datelor au eșuat. Reîncercați."; var fundal = ; background.Ready = "# E8F3FF"; background.Post = "# FAD054"; background.Success = "# B6FF6C"; background.Failure = "# FF5353"; $ (status status)) animați (opacity: 0, 200, function () $ ("# status"). animați (opacity: 1, 200)); Funcția pe care am denumit-o, UI, ia ca parametru starea bara de stare. În interiorul funcției, vom crea două obiecte: stare deține textul relevant și fundal pastreaza culorile de fundal ale barei de stare.
Am putea doar să actualizăm direct textul și culoarea de fundal a barei de stare, dar aici, la Net Tuts, nu suntem așa. :)
Vom folosi jQuery anima pentru a anima grațios bara de stare. În primul rând, ne animăm opacitatea la zero. Apoi, actualizăm culoarea textului și a fundalului și apoi animăm-o înapoi la vizibilitate completă.
Luați notă de faptul că logica utilizată pentru a actualiza valorile este inclusă într-o funcție anonimă și a trecut ca apel invers la animația originală. În acest fel, bara va anima opacitatea zero și apoi totul va fi actualizat. Dacă animațiile sunt înlănțuite, culorile textului și a fundalului vor fi actualizate imediat după pornirea animației inițiale, ceea ce duce la un efect foarte deranjant.
Adăugarea la interfața de utilizare și actualizarea barei de stare acum este o bucată de prăjitură. În loc de alertele pe care le-am folosit mai devreme, trebuie să folosim UI funcţie.
Blocul anterior care a reușit apelul ajax poate fi acum înlocuit de:
dacă (code == 1) UI ("Succes"); altceva UI ("Failure"); De asemenea, nu uitați să adăugați UI ( "Ready"); când pagina se încarcă astfel încât utilizatorul să știe că sistemul este pregătit pentru manipulare și UI ( "post"); când datele sunt postate pe server.
Când adăugați propriile stări în bara de sarcini, țineți seama în mod special de faptul că șirul pe care îl trimitem ca parametru al funcției este direcționat direct către proprietatea obiectului.
Ultimul lucru la care trebuie să ne uităm este faptul că, dacă încercarea de salvare a datelor a eșuat, textul actualizat este încă păstrat. Acest lucru pare contrar intuitiv. Dacă încercarea de salvare a datelor nu reușește, trebuie să vă asigurați că textul original este plasat înapoi, astfel încât utilizatorul să știe că datele nu au fost salvate.
Pentru a remedia acest lucru, va trebui să schimbăm selector variabilă în cazul în care întâlnim o eroare.
dacă (code == 1) UI ("Succes"); selector = "editBox"; altceva UI ("Failure"); selector = "tampon"; Dacă valoarea a fost editată cu succes, vom modifica valoarea variabilei relevante casetei de editare. Dar dacă încercarea sa încheiat cu un eșec, trebuie să înlocuim noua valoare cu valoarea veche. Așa că noi alocăm tampon la variabila astfel încât valoarea să revină la valoarea inițială.
Și acolo aveți. Cum să adăugați o funcționalitate prietenoasă utilizatorilor la proiectele dvs. Sperăm că ați găsit acest tutorial interesant și acest lucru a fost util pentru dvs. Simțiți-vă liber să reutilizați acest cod în altă parte în proiectele dvs. și faceți clic aici dacă întâmpinați dificultăți.
Rețineți că acest sistem a fost conceput cu intenția primară de a învăța tehnicile asociate cu acest lucru, nu ca un sistem de producție conceput să intre în sistemele existente. Aceasta este mai mult o temelie pe care o încurajez pe oameni să se bazeze și să se îmbunătățească.
Întrebări? Ce lucruri frumoase de spus? Critici? Activați secțiunea de comentarii și lasă-mă un comentariu. Codificare fericită!
Știați că puteți câștiga până la 600 USD pentru a scrie un tutorial PLUS și / sau pentru noi? Căutăm tutoriale detaliate și bine scrise despre HTML, CSS, PHP și JavaScript. Dacă sunteți în măsură, contactați Jeffrey la [email protected].
Rețineți că o compensație reală va depinde de calitatea tutorialului final și a scenariului.
