Share
For noen måneder siden lærte du hvordan du oppretter et redigeringssystem på stedet. I dag tar vi ting et skritt videre, da vi lager en enkel backend, som gjør at nettstedet vårt kan huske endringene som vi har gjort.
Med all buzz rundt Web 2.0 er brukervennlighet nå mye viktigere enn noensinne. Å kunne redigere noe innhold uten å måtte gå til en annen side, er noe mange brukere virkelig ønsker. Mange store navn bruker allerede dette mønsteret til stor effekt. Hvis du har brukt Flickr, har du sannsynligvis sett dette i aksjon.
I dag skal vi forbedre den tidligere versjonen: luke ut noen feil, legge til noen funksjoner, og enda viktigere, lagre alle dataene til en faktisk database for oppbevaring. Interessert? La oss komme i gang med en gang!
Først opp, vi trenger en database for å trekke inn informasjonen fra og deretter, når nødvendig, oppdatere dataene den inneholder. For denne øvelsens skyld, la oss sette opp et bord med noen tilfeldige data.
Jeg har allerede hatt en database som heter på plass med et bord kalt data på min utviklingsserver. For vår bruk legger vi til en annen tabell.
Jeg foretrekker vanligvis å bruke phpMyAdmin for å kjøre mine SQL-spørringer. Klikk på SQL-fanen og lim inn i følgende spørring:
Accentsconagua
CREATE TABLE IF NOT EXISTS 'inplace' ('field' varchar (120) IKKE NULL, 'verdi' tekst IKKE NULL, PRIMAR NØKKEL ('felt')) MOTOR = MyISAM; INSERT INTO 'inplace' ('feltet', 'verdi') VÆRDIER ('navn', 's Siddharth'), ('lidenskap', 'kjærlighet med å jobbe med nettet'), 'yrke' ), ('work', 'write for Net Tuts'), ('url', 'finner du på www.ssiddharth.com'), ('punch', 'vil aldri la deg ned eller gi deg opp :) '), (' design ',' Få design godkjenning fra Yusuf '), (' faktura ',' Send en faktura til Drew '), (' forskning ',' Start forskning på Pallav \ 's prosjekt'), diskutér ',' Snakk med Harnish om nye ideer '), (' debug ',' Sjekk Aditya's nettsted for gjengivelse av feil '), (' møt ',' Meet with Clintson for å diskutere nytt prosjekt '); 
Hvis alt fungerte som det skulle du skulle få følgende skjerm:
En nærmere titt på bordet:
Siden jeg eksplisitt ønsket å beholde enkelheten i demoen og bare legge til bakenden, spurte jeg om bordstrukturen veldig enkelt. Du er velkommen til å endre og utvide den i prosjektene dine.
Nå som prøvebordet er opprettet og forhåndsbefolket med noen testdata, kan vi gå videre til den faktiske bakenden.
Siden vi får tilgang til databasen, ofte enten for å lese data eller for å oppdatere dataene den inneholder, er det forsiktig å lage en config-fil som inneholder de aktuelle dataene. Opprett en fil som heter db.php og lim inn følgende i den.
Ikke noe spesielt her. Vi definerer alle relevante detaljer, kobler til verten ved hjelp av det oppgitte brukernavnet / passordkombinasjonen, og velg deretter den relevante databasen for manipulering nedover veien.
Redaktøren tar seg av å lese fra databasen og utdataene i et bestemt format, slik at det er enkelt for oss å sende relevante detaljer tilbake til serveren, og informere om hvilken post som skal oppdateres. Vi snakker om det mer om et sekund.
Koden endres ikke vesentlig fra den statiske HTML-bare-koden fra den tidligere versjonen. Vi må imidlertid gjøre data dynamisk. Så i den opprinnelige HTML-koden, dette:
er erstattet av:
'$ Rad [ 'verdi'].''; ?>
'$ Rad [ 'verdi'].''; ?>
Siden bordet er lite, velger vi bare alt fra bordet, men ber om å returnere bare de første 6 elementene. Deretter slår jeg bare gjennom og skriver ut li elementer. Vær spesielt oppmerksom på at hver li elementene får sin id attributt satt til navnet på feltet det får sin verdi fra. Dette vil bli brukt senere i dataene sendt tilbake til serveren for å angi hvilken post som skal oppdateres.
Jeg er klar over å utstede feltets navn som dette kan utgjøre en sikkerhetsrisiko, men på et sikkert sikret miljø tror jeg ikke dette vil skape noen problemer. Ellers kan du bare bruke alias her og gjøre en omvendt oppslag på server siden. La dine kreative juicer flyte der. For en veldig rett fremad demonstrasjon, virket det litt overkill.
Også, ikke glem å inkludere db.php fil vi opprettet tidligere til redaktøren. Denne linjen vil ta vare på det.
Når du har gjort endringene, husk å lagre filen med en .php forlengelse.
Handleren er hvor siden innleggene detaljene til. Dette tar seg av å kontrollere om data faktisk ble sendt til siden, og i så fall sanitiserer de sendte dataene og oppdaterer deretter de aktuelle verdiene.
Opprett en fil som heter handler.php og lim inn i følgende:
En ganske enkel affære. La meg forklare hvert trinn i detalj.
Siden vi må manipulere databasen, inkluderer vi først db.php fil vi opprettet tidligere.
Deretter sjekker vi om både våre nødvendige variabler, felt- verdi som forteller oss hvilket felt å oppdatere og verdi - Verdien som skal oppdateres til, sendes som POST-variabler til handleren. I så fall kan vi fortsette til det aktuelle arbeidet. Hvis ikke, skjer ingenting.
En gang har vi bekreftet at variablene ble sendt, vi kan fortsette å sanitere dataene for innsetting i databasen. For å holde det så enkelt som mulig, bruker vi mysql_real_escape_string Fungerer for å rense våre data. Denne funksjonen unngår spesialtegnene som er tilstede i den overførte strengen. Hvis passet i un sanitized, er vår kode underlagt SQL-injeksjonsangrep.
Nå som vi har sørget for at dataene er trygge, kan vi oppdatere den aktuelle posten. Jeg antar at denne delen trenger ingen forklaring siden det er veldig enkelt SQL. På lekmannens vilkår, i på plass bord, endre Enger tilsvarende verdi til verdi.
Hvis alt går videre i henhold til planen, returner du en verdi på 1 som vil bli fanget av vårt skript for å bestemme utfallet av transaksjonen, slik at den kan fortsette tilsvarende. Jeg vil utdype mer senere. Vær oppmerksom på at jeg i dette tilfellet bare rapporterer om forsøket lyktes eller feilet. I prosjektet ditt vil du kanskje returnere mye mer detaljert info i tilfelle en feil oppstår. Du er ikke begrenset til min ekstremt enkle implementering.
Nå da bakenden er konstruert, er det på tide å redigere frontendelen av prosjektet for å la det kommunisere med serveren. Vi vil også se på å implementere en ny funksjon underveis.
En av klagerne i den gamle versjonen var data korrupsjon når visse handlinger ble utført i en bestemt rekkefølge. Dette skyldtes mitt ekstreme behov for enkelhet og konsis som i siste instans førte meg til å overse det bestemte scenariet. Ikke desto mindre vil vi rette oss på det i dag.
Jeg antar at du har den gamle JavaScript-koden i nærheten for å sammenligne med og redigere.
Den første versjonen brukte globale variabler til å holde de opprinnelige dataene som førte til uventede resultater i visse tilfeller. Vi løser dette først.
Den enkleste måten å rette opp på dette ville være å bare legge til en skjult inngang ved siden av den opprinnelige inngangen og bruke den som en buffer. Siden det er opprettet og ødelagt på fluen og er spesifikt for det elementet alene, kan vi redigere / lagre / kaste bort så mange elementer som mulig så mange tid som mulig uten noen hikke.
Den gamle replaceHTML funksjonen blir oppdatert til:
funksjon erstatteHTML () var buffer = $ (dette) .html () .replace (/ "/ g," ""); $ (dette) .addClass ("noPad") .html ("") .html (" Lagre endringer Kast bort endringer ") .unbind ('dblclick', replaceHTML); Ikke en stor redigering her. Først oppretter vi en intern variabel som heter buffer for å holde den opprinnelige verdien. Vi renser deretter HTML-innholdet i foreldreelementet og injiserer vårt eget. I tillegg til den originale utklippsfilen legger vi til en skjult tekstboks som beholder den opprinnelige verdien. Ingenting annet endres her.
Den tidligere iterasjonen binder liknende, men separate funksjoner for hver av de funksjonelle koblingene. Vi forener dem her.
funksjonshåndterer () varvelger; hvis ($ (dette) .hasClass ("btnSave")) selector = "editBox" annet selector = "buffer" $ (dette) .parent () .html ($ ) .children ("." + selector) .val ()) .removeClass ("noPad editHover") .bind ("dblclick", replaceHTML); returner falsk; I stedet for å bruke anonyme funksjoner som forrige gang, skal vi bruke en vanlig funksjon. Vi skal bare redigere små deler av funksjonen slik at den kan håndtere både lagre og kaste bort forespørsler.
Vi erklærer først en variabel som heter velger som holder selgeren å bruke mens du oppdaterer li elementer. redigeringsboksen er klassen tilordnet den synlige tekstboksen og buffer er klassen tilordnet den skjulte tekstboksen som inneholder den opprinnelige verdien.
Siden vi forener hendelsesbehandlerne, må vi sjekke hvilken kobling som ble klikket. Vi ser først om den klikkte lenken har en klasse av btnSave. I så fall vil brukeren lagre endringene, og vi tilordner verdien av redigeringsboksen til velger variabel. Hvis ikke, buffer er tildelt.
Resten av handleren forblir den samme som den gamle versjonen bortsett fra at selgeren injiseres dynamisk basert på handlingen i stedet for at den er hardkodet inn i funksjonen. Hvis du synes å være tapt her, se på den første delen av serien for å forstå hva den siste blokken gjør. I hovedsak injiserer vi den valgte tekstboksenes verdi i overordnet li element og bind den opprinnelige hendelseshåndtereren.
Ikke glem å oppdatere hendelsesbehandlerne for hver kobling. Følgende en liner tar vare på det:
$ (".btnSave, .btnDiscard"). live ("klikk", handler); Hvis du lurer på hvorfor jeg brukte bo funksjon her, vennligst se den tidligere artikkelen.
Med alle bugs squashed ut og koden generelt strammet opp litt, kan vi begynne å jobbe med å implementere den faktiske funksjonaliteten.
Før vi kan sende dataene til serveren, må vi finne en måte å sende relevante opplysninger tilbake til serveren. I dette tilfellet trenger vi 2 detaljer for å gjøre en vellykket redigering.
Den første delen er ganske enkel fordi vi har en faktisk tekstboks som holder verdiene som skal sendes til serveren. Den andre delen trenger litt arbeid.
Mens du lager redaktøren, husk at vi brukte tabellens primære ID som id attributter til hver li element? Vi skal gjøre bruk av det her. Vi lager bare en annen skjult tekstboks som holder verdien som kan sendes tilbake til serveren.
funksjon erstatteHTML () var buffer = $ (dette) .html () .replace (/ "/ g," ""); $ (dette) .addClass ("noPad") .html ("") .html (" Lagre endringer Kast bort endringer ") .unbind ('dblclick', replaceHTML); De replaceHTML funksjonen må oppdateres slik. Den eneste forskjellen er tillegg av skjult tekstboks med navnet felt. Vi bruker jQuery's attr funksjon for å få tilgang til li elementets ID-attributt og bruk det som tekstboksens verdi.
På AJAX-implementeringen da. Vi skal bruke jQuery's standard ajax funksjon her.
funksjonshåndterer () // Forrige kode hvis ($ (dette) .hasClass ("btnSave")) varselector = "editBox"; var str = $ (dette) .siblings ("form"). serialize (); $ .ajax (type: "POST", asynk: falsk, timeout: 100, url: "handler.php", data: str, suksess: funksjon (msg) code = msg;,); hvis (kode == 1) alarm ("suksess"); ellers alert ("Failure"); // Resten av koden Siden vi bare trenger å sende dataene til serveren når brukeren har klikket på den aktuelle lenken, inkapslerer vi all koden i hvis blokkere vi opprettet tidligere for å sjekke hvilken kobling som ble klikket.
Jeg benytter seg av ajax funksjon siden jeg synes det er den mest robuste. Først opp serierer jeg dataene foreldreformen holder, slik at den kan bli lagt ut på serveren. Deretter kaller jeg ajax funksjonen innstiller alle relevante detaljer etter behov, som inkluderer typen forespørsel som skal gjøres - POST og nettadressen som skal legges til. Vi spesifiserer også at dataene vi serialiserte tidligere skulle sendes til serveren.
Vanligvis vil du bruke det innebygde suksess og feil tilbakeringinger for å gjøre ytterligere endringer, men jeg har valgt å ikke gjøre det her. I stedet tar jeg bare teksten som sendes tilbake av serveren. Hvis den returnerer 1, en verdi vi konfigurerte vår håndterer å returnere hvis alt skjedde riktig, vi varsler brukeren om å gi ham beskjed.
Advarsler er en ganske rudimentær måte å oppdatere brukeren med statusen til handlingen. Med det i tankene skal vi skrape varselsystemet og i stedet implementere en enkel statuslinje nederst som reflekterer disse endringene.
Vi trenger ikke noe spesielt her. Vi trenger bare en enkel div element som vi kan manipulere. Vi må bare legge til det direkte i redaktøren.
Legg merke til id Egenskap. Vi bruker det senere.
For å gjenbrukes av kode, oppretter vi en hjelpefunksjon som oppdaterer statuslinjen etter behov.
funksjon brukergrensesnitt (tilstand) var status = ; status.Ready = "Klar"; status.Post = "Lagre data. Vennligst vent ..."; status.Success = "Suksess! Dine endringer har blitt lagret."; status.Failure = "Forsøk på å lagre data mislyktes. Prøv igjen."; var bakgrunn = ; background.Ready = "# E8F3FF"; background.Post = "# FAD054"; background.Success = "# B6FF6C"; background.Failure = "# FF5353"; $ ("# status"). animate (opacity: 0, 200, funksjon () $ ("# status"). html (status [state]). css (bakgrunn: bakgrunn [state]). animere (opacity: 1, 200)); Funksjonen, som vi har kalt, UI, tar statuslinjens status som parameter. Innenfor funksjonen oppretter vi to objekter: status holder den aktuelle teksten og bakgrunn har bakgrunnsfarger på statuslinjen.
Vi kunne bare oppdatere statuslinjens tekst og bakgrunnsfarge, men her på Net Tuts, det er ikke slik vi ruller. :)
Vi skal gjøre bruk av jQuery's animere fungere for å grasiøst animere statuslinjen. Først, vi animerer dens opasitet til null. Deretter oppdaterer vi tekst og bakgrunnsfarge, og deretter animerer den tilbake til full synlighet.
Vær spesielt oppmerksom på at logikken som brukes til å oppdatere verdiene, er vedlagt i en anonym funksjon og bestått som tilbakering til den opprinnelige animasjonen. På denne måten vil baren animere til null opacitet og deretter oppdateres alt. Hvis animasjonene er koblet, oppdateres teksten og bakgrunnsfargene like etter at den første animasjonen starter, noe som fører til en svært ødeleggende effekt.
Legge til den i brukergrensesnittet og oppdatere statuslinjen er nå et stykke kake. I stedet for varslene vi brukte tidligere, må vi bruke UI funksjon.
Den tidligere blokken som lyktes ajax-anropet, kan nå erstattes av:
hvis (kode == 1) brukergrensesnitt ("suksess"); else UI ("Failure"); Også, ikke glem å legge til UI ( "Ready"); når siden lastes slik at brukeren vet at systemet er klar for manipulering og UI ( "Post"); når dataene blir lagt ut på serveren.
Når du legger til dine egne stater i oppgavelinjen, legg spesielt merke til at strengen vi sender som parameteren til funksjonen, karter direkte til objektets eiendom.
Det siste vi må se på er at hvis forsøket på å lagre dataene mislyktes, blir den oppdaterte teksten fortsatt beholdt. Dette virker ganske counter intuitivt. Hvis forsøket på å lagre dataene mislykkes, må vi sørge for at den opprinnelige teksten er plassert tilbake, slik at brukeren vet at dataene ikke er lagret.
For å rette opp dette, må vi endre velger variabel dersom vi opplever en feil.
hvis (kode == 1) brukergrensesnitt ("suksess"); selector = "editBox"; else UI ("Failure"); selector = "buffer"; Hvis verdien ble redigert, endrer vi den relevante variabelenes verdi til redigeringsboksen. Men hvis forsøket endte i feil, må vi bytte ut den nye verdien med den gamle verdien. Så tildeler vi buffer til variabelen slik at verdien vil gå tilbake til sin opprinnelige verdi.
Og der har du det. Hvordan legge til en brukervennlig funksjonalitet for dine prosjekter. Forhåpentligvis har du funnet denne opplæringen interessant, og dette har vært nyttig for deg. Du er velkommen til å bruke denne koden på andre steder i prosjektene dine og chime her hvis du har problemer.
Vær oppmerksom på at dette systemet ble designet med den primære hensikten å lære teknikkene knyttet til dette, ikke som et produksjonssystem som er utformet for å falle inn i eksisterende systemer. Dette er mer et fundament som jeg oppfordrer folk til å bygge på og forbedre.
Spørsmål? Hyggelige ting å si? Kritikk? Treff kommentar delen og la meg en kommentar. Glad koding!
Visste du at du kan tjene opp til $ 600 for å skrive en PLUS-opplæring og / eller screencast for oss? Vi leter etter dybde og velskrevne opplæringsprogrammer om HTML, CSS, PHP og JavaScript. Hvis du er i stand til å kontakte Jeffrey på [email protected].
Vær oppmerksom på at faktisk kompensasjon vil være avhengig av kvaliteten på den endelige opplæringen og screencast.
