Share
For denne ukens Tuts + Premium opplæring, jobber vi med mange forskjellige teknologier. Til slutt skal vi bygge en oppgaveliste som lar deg, eller brukeren, lage, oppdatere og slette elementer asynkront. For å utføre vår oppgave, bruker vi PHP og jQuery's AJAX-funksjoner. Jeg tror du finner ut at det ikke er helt så vanskelig som du kanskje tenkte. Jeg skal vise deg nøyaktig hvordan!
Denne opplæringen inneholder en screencast tilgjengelig for Tuts + Premium medlemmer.
Som du kan forestille deg, kan vi ikke lagre, slette og oppdatere poster i et statisk miljø. Så må vi opprette en MySQL-database som lagrer informasjonen.
Hvis du bruker PHPMyAdmin, får du tilgang til kontrollpanelet ved å gå til http: // localhost / phpmyadmin.
I tekstboksen "Opprett ny database" skriver du "db" og klikker "Create". Deretter må du opprette et bord. Skriv "todo" og "3" for "antall felt".
Vi må nå legge til de riktige kolonnene.
Pass på at alternativene til hvert felt samsvarer med de som vises i følgende bilde.
Nå som vi har opprettet vår database, la oss raskt legge til noen testrader. Klikk på din "db" database; velg deretter "Bla gjennom". Du kommer til en skjerm som viser innholdet i hver rad i databasen. Tydeligvis er denne delen tom nå. Velg "Sett inn" og legg til noen få kolonner. Skriv hva du ønsker her.
Selv om det ikke er nødvendig på noen måte, finner jeg at det er lettest å administrere mine funksjoner når de grupperes i en klasse. Med tanke på dette, vil vi nå opprette en "Db" -klasse som inneholder flere funksjoner.
Åpne kodeditoren din, og lag en ny fil kalt "db.php". Innenfor dette blanke dokumentet, lim inn i følgende linjer med kode.
Accentsconagua
klasse Db private $ mysql; funksjon __construct () $ this-> mysql = new mysqli ('localhost', 'root', 'yourPassword', 'db') eller dø ('problem'); // sluttklasse For å opprette en ny klasse bruker vi syntaxen demonstrert nedenfor.
klassen 'myClass'
Ved å bruke kun koden ovenfor har vi opprettet en ny klasse. Det gjør ikke noe enda ennå, men det er en klasse likevel!
Metoden __construct () (class talk for "function") er kjent som en "magisk metode". Det vil løpe umiddelbart etter at en klasse er instantiated. Vi skal bruke denne metoden for å gjøre vår første tilkobling til MySQL-databasen.
funksjon __construct () $ this-> mysql = new mysqli ('localhost', 'root', 'yourPassword', 'db') eller dø ('problem'); Hvis du ikke er kjent med OOP, kan det være litt skremmende først. Heldigvis er det ikke så vanskelig å forstå. Vi vil at vår mysql-tilkobling skal være tilgjengelig for alle metodene i vår klasse. Tatt i betraktning dette, ville det ikke være lurt å lagre $ mysql-variabelen i en bestemt funksjon. I stedet bør det være en klasse eiendom.
privat $ mysql;
Innenfor en metode kan vi ikke bare få tilgang til eiendommen vår ved å skrive "$ mysql". Vi må først referere til objektet.
$ Dette-> mysql
Husk å ta oppmerksom på det faktum at når vi får tilgang til en eiendom, kan vi forlate dollarskiltet.
Det er å foretrekke å bruke mysql forbedret (mysqli) i stedet for den tradisjonelle mysql_connect-metoden når du kobler til en database. Ikke bare er det raskere, men det tillater oss også å bruke en OOP-tilnærming.
Når du oppretter en ny forekomst av mysqli-klassen, må vi passere i fire parametere.
Det burde gjøre det for nå. Vi kommer tilbake til vår klasse i løpet av denne opplæringen for å legge til nye metoder. Bare husk når vi lager en ny forekomst av denne klassen ...
krever 'db.php'; $ db = ny Db ();
... vi åpner automatisk en forbindelse til vår database, takket være __construct () magiske metoden.
Nå må vi lage vår oppslag for hjemmesiden. Legg til en ny side i løsningen, og lagre den som "index.php". Deretter limer du inn i følgende.
Min To-Do List Min gjøremålsliste
- Å gjøre
......
I hodet til dokumentet refererer jeg Googles CDN for å få tilgang til jQuery. Dette er lett den foretrukne metoden når du bruker jQuery. Deretter refererer jeg til en "scripts.js" -fil som vi skal lage senere i denne opplæringen.
La oss raskt vurdere hva hver div er for.
Dette er ikke en CSS-opplæring, per se. Du kan lese stilarket jeg har brukt. Det er i nedlastingspakken. Hvis du vil ha en dypere anmeldelse, kan du se på screencast.
Nå som vi har koblet til databasen, og har opprettet vår markup / CSS, la oss skrive noen kode som henter databaserammerne.
Innenfor "todo" div, legg inn følgende.
mysql-> spør ($ query); hvis ($ results-> num_rows) while ($ row = $ results-> fetch_object ()) $ title = $ row-> title; $ description = $ row-> beskrivelse; $ id = $ rad-> id; ekko ''; $ data = <<'; // ende mens annet echo "$ Tittel $ beskrivelse
D EEOD; ekko $ data; ekko 'Det er null elementer. Legg til en nå!
";?>
Forhåpentligvis gjorde alt det fornuftig. På dette punktet bør du ha noe som følger:
Vi vil også at brukeren skal kunne legge inn nye poster. La oss lage et skjema som vil tillate dette.
Legg til ny post
Dette er ditt standard "run-of-the-mill" -skjema. Vi har lagt til innganger for en tittel og beskrivelse. Når send-knappen klikkes, blir informasjonen som er oppgitt, lagt til "addItem.php". La oss lage den siden nå.
Opprett et nytt dokument, og lagre det som "addItem.php". Lim inn i følgende kode:
mysql-> forberede ($ spørring)) $ stmt-> bind_param ('ss', $ _POST ['title'], $ _POST ['description']); $ Stmt-> utføre (); header ("location: index.php"); dø annet ($ db-> mysql-> feil); 
Ved hjelp av jQuery's AJAX-muligheter, la oss tillate brukeren å oppdatere hvert element uten en tilbakeringing. Opprett en ny fil i en "js" -mappe, og ring den til "scripts.js". Husk at vi allerede har referert til denne filen i vårt oppslag.
$ (funksjon () $ ('. editEntry'). klikk (funksjon () var $ this = $ (dette); var oldText = $ this.parent () .foreldre (). finn ('p'). tekst (); var id = $ this.parent () .forelder (). finn ('# id') .val (); $ this.parent () .forelder (). finn ('p'). tom ) .append (''); $ ('. newDescription'). blur (funksjon () var newText = $ (dette) .val (); $ .ajax (type: 'POST', url: 'updateEntry.php', data: 'description = '+ newText +' & id = '+ id, suksess: funksjon (resultater) $ this.parent () .foreldre () .finner (' p ') .tøm () .append (newText);); ); returner falsk; ); ); Hvis du kommer tilbake til vårt oppslag på index.php, ser du:
D E
$ ('. editEntry'). klikk (funksjon () Ved hjelp av jQuery, må vi lytte etter når ankermerket med en klasse "editEntry" er klikket.
var $ dette = $ (dette);
Deretter caches vi $ (dette) - som refererer til ankermerket som ble klikket.
var oldText = $ this.parent () .forelder (). finn ('p'). tekst (); Vi må lagre den opprinnelige beskrivelsen. Vi forteller ankeretiketten for å finne foreldre div, og søk etter p-taggen - som huser beskrivelsesteksten. Vi tar tak i denne verdien ved å bruke "tekst ()".
var id = $ this.parent () .forelder (). finn ('# id') .val (); For å oppdatere den riktige raden i vår database, trenger jeg å vite hva den bestemte radens ID er. Hvis du henviser til koden din, ser du et skjult inntastingsfelt som inneholder denne verdien.
Igjen, bruker vi "finne" for å få tilgang til denne skjulte inngangen, og deretter ta tak i verdien.
$ This.parent (). Foreldre (). Finne ( 'p'). Tom (). Append (''); Nå må vi la brukeren legge inn en ny beskrivelse. Det er derfor de klikket på "Edit Entry", er det ikke !? Vi finner beskrivelsen P-tag, tøm den, og legg deretter til et tekstområde. Vi bruker "tomt ()" for å sikre at vi slipper av hele teksten; det er ikke nødvendig lenger. Verdien av denne teksten vil være lik oldText - som en bekvemmelighet.
$ ('. newDescription'). uskarphet (funksjon () Finn denne nye tekstområdet, og når brukeren forlater tekstboksen, kjør en funksjon.
var newText = $ (dette) .val ();
Ta tak i den nye teksten som brukerne kommer inn i denne teksten.
$ .ajax (type: 'POST', URL: 'updateEntry.php', data: 'description =' + newText + '& id =' + id, suksess: funksjon (resultater) $ this.parent () .find ('p'). tom () .append (newText);); Ring .ajax-funksjonen, og send inn noen få parametre. Typen vil være "POST". Nettadressen til tilgang er "updateEntry.php". Dataene som skal sendes til denne siden, er nyteksten som brukeren skrev inn, og den unike id fra den raden i databasen. Når oppdateringen er utført, kjør du en funksjon, og oppdater den gamle teksten med den nye teksten!
returner falsk;
Retur falsk for å sikre at klikk på ankermerket ikke leder brukeren andre steder.
Husk at vi har kalt vår "UpdateEntry" PHP-side med jQuery, men vi har ikke faktisk opprettet det! La oss gjøre det nå. Opprett en ny side kalt "updateEntry.php" og lim inn i følgende.
update_by_id ($ _ POST ['id'], $ _POST ['beskrivelse']); ?>
Som tidligere refererer vi vår db-klasse, og vi instanser det. Deretter lager vi en ny variabel, kalt $ respons, og gjør det lik det som returneres fra "update_by_id ()" -metoden. Vi har ikke laget denne metoden enda ennå. Nå er det en god tid å gjøre det.
Gå tilbake til db.php-siden din, og legg til en ny metode nederst.
funksjon update_by_id ($ id, $ description) $ query = "UPDATE todo SET beskrivelse =? HVOR id =? LIMIT 1"; hvis ($ stmt = $ this-> mysql-> forbereder ($ spørring)) $ stmt-> bind_param ('si', $ description, $ id); $ Stmt-> utføre (); returnere "god jobb! Oppdatert '; Denne metoden aksepterer to parametere: id, og beskrivelse av elementet. Så, når vi kaller denne metoden, må vi huske å passere i disse to parametrene! Vi begynner med å lage vår forespørsel: Oppdater "todo" -tabellen og endre beskrivelsen til det som er sendt inn - men bare oppdater raden der id er lik parameteren passert i.
Som forrige gang bruker vi utarbeidede uttalelser for å oppdatere databasen vår. Det er den sikreste måten! Forbered forespørselen, bind parametrene (streng og heltall, eller 'si'), og utfør. Vi returnerer en generisk streng, men det er egentlig ikke nødvendig i det hele tatt. Nå skal vår oppdatering fungere perfekt!
La oss også lage en fin asynkron måte for brukeren å slette oppføringer. Når de klikker på sletteknappen for et element, vil vi forsvinne div-delen og oppdatere databasen for å gjenspeile slettingen. Åpne javascriptfilen din og legg til følgende:
// Slett ankermerke klikket $ ('a.deleteEntryAnchor'). Klikk (funksjon () var thisparam = $ (dette); thisparam.parent () .forelder (). Finn ('p'). Wait ... '); $ .ajax (type:' GET ', url: thisparam.attr (' href '), suksess: funksjon (resultater) thisparam.parent (). Parent (). FadeOut ;) return false;); $ ('a.deleteEntryAnchor'). klikk (funksjon () Når ankermerket med en klasse "deleteEntryAnchor" klikkes, kjør en funksjon.
var thisparam = $ (dette);
Cache $ (dette) som thisparam.
thisparam.parent (). parent (). find ('p'). tekst ('Vennligst vent ...'); Endre teksten i beskrivelsen til "Vennligst vent". Vi må gjøre dette for å gi brukeren tilbakemelding, bare hvis det tar lengre tid enn forventet.
$ .ajax (type: 'GET', url: thisparam.attr ('href'), suksess: funksjon (resultater) thisparam.parent () .forelder () .fadeOut ('slow');) På samme måte som forrige gang passerer vi i noen få parametere som får tilgang til "delete.php". I stedet for å kryptere siden i url-verdien, får jeg tilgang til attr ('href') - som tilsvarer 'delete.php? Id = $ id'.
D
Vi trenger ikke en "DATA" parameter, fordi all relevant informasjon er innenfor URL-spørringen. Når slettingen er utført, finner vi foreldrenes ".item" div, og visner det sakte.
Vi har kalt vår slettingsside med jQuery, men vi har ikke opprettet PHP ennå. Opprett din nye side og legg til følgende kode.
delete_by_id ($ _ GET [ 'id']); header ("Location: index.php"); Du bør være vant til disse prosedyrene nå. Opprett en ny forekomst av vår klasse, og ring "delete_by_id" metoden. Når det er fullført, kan du omdirigere brukeren tilbake til "index.php". Som du kanskje har gjettet, må vi lage en ny metode i vår db-klasse. Gå tilbake til db.php og legg til den nye funksjonen.
funksjon delete_by_id ($ id) $ query = "DELETE fra todo WHERE id = $ id"; $ result = $ this-> mysql-> spørring ($ spørring) eller dø ("det var et problem, mann."); hvis ($ resultat) returnere 'yay!'; Denne metoden vil akseptere en parameter - id. Husk: For å oppdatere en rad, må vi kjenne den radens unike id. Ellers vil det oppdatere hver rad. Vi sletter alle rader fra bordet, hvor id er lik det som er sendt inn. Da hver rad har sitt eget unike id, blir bare en påvirket. Deretter sender vi denne søket til vårt mysql-objekt. Nok en gang er avkastningen unødvendig; det er bare for moro skyld.
Vi har fullført alt vårt PHP-arbeid! Det siste trinnet er å legge til litt jQuery for å få alt til å fungere litt bedre. Øverst på Javascript-filen din, like etter method.ready, legg til følgende kode:
// Ikke vis fanen addNewEntry når siden laster. $ ('# addNewEntry'). css ('skjerm', 'ingen'); // Vi bruker jQuery til å lage våre faner. Hvis Javascript er deaktivert, vil de ikke fungere. Tatt i betraktning // dette, bør vi legge til våre faner, slik at de ikke vil vises hvis deaktivert. $ ( '# Tabs'). Append ('Jeg har kommentert hvert trinn ganske bra. Så, jeg vil avstå fra å gjenta meg selv. Din siste scripts.js-fil skal se slik ut.
$ (funksjon () // Ikke vis fanen addNewEntry når siden lastes. $ ('# addNewEntry'). css ('display', 'none'); // Vi bruker jQuery til å lage våre faner Hvis Javascript er deaktivert, vil de ikke fungere. Vurderer // dette, bør vi legge til våre faner, slik at de ikke vises hvis deaktivert. $ ('# Tabs'). Append ('Vi kan ikke kalle det en dag ennå! Det morsomme Internet Explorer 6 forårsaker noen problemer med oppsettet.
Selv om vi kanskje vil, kan vi ikke ignorere nettleseren ennå. Heldigvis finner du at de fleste IE6-problemene kan løses ganske enkelt. Først må vi importere et skript som vil fikse vårt alfa gjennomsiktighetsproblem. Dean Martin har en fantastisk Javascript-fil som bringer IE6 opp til standarder som er kompatible. Bare ved å legge til "-trans" til slutten av våre 24-biters png filnavn, kan vi løse problemet vårt. Husk å besøke bildemappen, og rediger navnene.
Googles CDN kommer til redning igjen ved å tilby en vertsversjon av IE7-skriptet. Det løser vår gjennomsiktighetsproblem, men vi har fortsatt noen flere quirks.
Merk at vi i vår betingede erklæring også importerte en "ie.css" -fil. Lag den filen akkurat nå, og lim inn i følgende:
kropp margin: 0; polstring: 0; #tabs høyde: 100%; #main height: 100%; #main div.item bredde: 100%; overløp: skjult; stilling: relativ;
Du vil oppdage at legge til "posisjon: relativ", "overløp: skjult" og "høyde: 100%" vil fikse 90% av dine IE6-problemer. Nå fungerer vårt layout perfekt i alle nettleserne!
Det var mye å dekke her. Forhåpentligvis forklarte jeg meg selv grundig nok. Hvis ikke, det er det tilhørende skjermbildet for! Husk å se gjennom det for å fjerne eventuelle uklare områder. Hvis du fortsatt har spørsmål, bare spør meg! Takk så mye for å lese.
