Share
Voor de tutorial Tuts + Premium van deze week werken we met veel verschillende technologieën. Uiteindelijk zullen we een takenlijst maken waarmee u, of uw gebruiker, items asynchroon kunt maken, bijwerken en verwijderen. Om onze taak te volbrengen, zullen we de AJAX-mogelijkheden van PHP en jQuery gebruiken. Ik denk dat je zult merken dat het niet zo moeilijk is als je in eerste instantie denkt. Ik zal je precies laten zien hoe!
Deze tutorial bevat een screencast die beschikbaar is voor leden van Tuts + Premium.
Zoals u zich kunt voorstellen, kunnen we geen records in een statische omgeving opslaan, verwijderen en bijwerken. We moeten dus een MySQL-database maken waarin de informatie wordt opgeslagen.
Als u PHPMyAdmin gebruikt, gaat u naar het configuratiescherm door naar http: // localhost / phpmyadmin te gaan.
Typ "db" in het tekstvak "Nieuwe database maken" en klik op "Maken". Vervolgens moet u een tabel maken. Typ 'todo' en '3' voor 'aantal velden'.
We moeten nu de juiste kolommen toevoegen.
Zorg ervoor dat de opties van elk veld overeenkomen met de opties in de volgende afbeelding.
Nu we onze database hebben gemaakt, kunnen we snel enkele testrijen toevoegen. Klik op uw "db" -database; kies vervolgens "Bladeren". U wordt naar een scherm gebracht met de inhoud van elke rij in uw database. Het is duidelijk dat deze sectie op dit moment leeg is. Kies "Invoegen" en voeg een paar kolommen toe. Typ wat je maar wilt hier.
Hoewel dit op geen enkele manier vereist is, vind ik dat het het gemakkelijkst is om mijn functies te beheren wanneer ik ze in een klas groepeer. Daarom zullen we nu een "Db" -klasse maken die verschillende functies zal bevatten.
Open uw code-editor naar keuze en maak een nieuw bestand aan met de naam "db.php". Plak in dit lege document de volgende regels code in.
Accentsconagua
klasse Db private $ mysql; function __construct () $ this-> mysql = new mysqli ('localhost', 'root', 'yourPassword', 'db') of die ('probleem'); // eindklasse Om een nieuwe klasse te maken, gebruiken we de onderstaande syntaxis.
class 'myClass'
Met alleen de bovenstaande code hebben we met succes een nieuwe klasse gemaakt. Het doet nog niets, maar het is toch een klasse!
De __construct () methode (class talk for "function") staat bekend als een "magische methode". Het zal onmiddellijk worden uitgevoerd nadat een klasse is geïnstantieerd. We gaan deze methode gebruiken om onze eerste verbinding met de MySQL database tot stand te brengen.
function __construct () $ this-> mysql = new mysqli ('localhost', 'root', 'yourPassword', 'db') of die ('probleem'); Als u niet bekend bent met OOP, kan het in eerste instantie enigszins ontmoedigend zijn. Gelukkig is het niet zo moeilijk om te begrijpen. We willen dat onze mysql-verbinding beschikbaar is voor alle methoden in onze klas. Dit in overweging nemend, zou het geen goed idee zijn om de $ mysql-variabele in een specifieke functie op te slaan. In plaats daarvan moet het een klasse-eigenschap zijn.
privé $ mysql;
Binnen een methode kunnen we niet alleen toegang krijgen tot ons eigendom door te typen, "$ mysql". We moeten eerst naar het object verwijzen.
$ This-> mysql
Let op het feit dat we bij het betreden van een woning het dollarteken kunnen laten staan.
Het verdient de voorkeur om mysql improved (mysqli) te gebruiken in plaats van de traditionele mysql_connect-methode bij het verbinden met een database. Niet alleen is het sneller, het stelt ons ook in staat om een OOP-benadering te gebruiken.
Bij het maken van een nieuw exemplaar van de mysqli-klasse moeten we vier parameters doorgeven.
Dat zou het voorlopig moeten doen. In de loop van deze tutorial komen we terug naar onze les om nieuwe methoden toe te voegen. Onthoud gewoon dat wanneer we een nieuw exemplaar van deze klasse maken ...
vereisen 'db.php'; $ db = nieuwe Db ();
... we openen automatisch een verbinding met onze database, dankzij de __construct () magische methode.
Nu moeten we onze opmaak voor de startpagina maken. Voeg een nieuwe pagina toe aan uw oplossing en sla deze op als "index.php". Plak vervolgens het volgende.
Mijn takenlijst Mijn takenlijst
- Te doen
......
In de kop van ons document verwijs ik naar het CDN van Google voor toegang tot jQuery. Dit is gemakkelijk de voorkeursmethode bij het gebruik van jQuery. Vervolgens verwijs ik naar een 'scripts.js' bestand dat we later in deze tutorial zullen maken.
Laten we snel bekijken waar elke div voor is.
Dit is geen zelfstudie via CSS. U bent vrij om de stylesheet te bekijken die ik heb gebruikt. Het zit in de downloadbundel. Als je een diepere beoordeling wilt, bekijk dan de screencast.
Nu we verbinding hebben gemaakt met de database en onze markup / CSS hebben gemaakt, laten we wat code schrijven die de databaserijen zal ophalen.
Voer de volgende tekst in de "todo" -div in.
mysql-> vraag ($ vraag); if ($ results-> num_rows) while ($ row = $ results-> fetch_object ()) $ title = $ row-> title; $ description = $ row-> description; $ id = $ row-> id; echo ''; $ data = <<'; // end while else echo "$ Titel $ beschrijving
D EEOD; echo $ data; echo 'Er zijn nul items. Voeg er nu een toe!
";?>
Hopelijk was dat allemaal logisch. Op dit moment zou u ongeveer het volgende moeten hebben:
We willen ook dat de gebruiker de mogelijkheid heeft om nieuwe records in te voegen. Laten we een formulier maken dat dit mogelijk maakt.
Nieuwe invoer toevoegen
Dit is uw standaard 'standaard' formulier. We hebben ingangen voor een titel en beschrijving toegevoegd. Wanneer op de knop Verzenden wordt geklikt, wordt de ingevoerde informatie gepost naar "addItem.php". Laten we die pagina nu maken.
Maak een nieuw document en sla het op als "addItem.php". Plak in de volgende code:
mysql-> prepare ($ query)) $ stmt-> bind_param ('ss', $ _POST ['title'], $ _POST ['description']); $ Stmt-> execute (); header ("location: index.php"); anders sterven ($ db-> mysql-> error); 
Met de AJAX-mogelijkheden van jQuery laten we de gebruiker elk item bijwerken zonder een postback. Maak een nieuw bestand in een "js" -map en noem het "scripts.js". Houd er rekening mee dat we dit bestand al in onze markup hebben verwezen.
$ (function () $ ('. editEntry'). klik (functie () var $ this = $ (this); var oldText = $ this.parent (). parent (). find ('p'). text (); var id = $ this.parent (). parent (). find ('# id'). val (); $ this.parent (). parent (). find ('p'). empty ( ) .append (''); $ ('. newDescription'). blur (function () var newText = $ (this) .val (); $ .ajax (type: 'POST', url: 'updateEntry.php', data: 'description = '+ newText +' & id = '+ id, succes: functie (resultaten) $ this.ouder (). parent (). find (' p '). empty (). append (newText);); ); return false; ); ); Als u terugkeert naar onze markup op index.php, ziet u:
D E
$ ('. editEntry'). klik (functie () Met jQuery moeten we luisteren wanneer op de ankertag met een klasse "editEntry" wordt geklikt.
var $ this = $ (this);
Vervolgens cachen we $ (dit) - wat verwijst naar de ankertag waarop is geklikt.
var oldText = $ this.parent (). parent (). find ('p'). text (); We moeten de originele beschrijving opslaan. We vertellen de ankertag om de bovenliggende div te vinden en zoeken naar de p-tag, waarin de beschrijvende tekst staat. We pakken die waarde met behulp van "text ()".
var id = $ this.parent (). parent (). find ('# id'). val (); Om de juiste rij in onze database bij te werken, moet ik weten wat de id van die specifieke rij is. Als u teruggaat naar uw code, ziet u een verborgen invoerveld met deze waarde.
Nogmaals gebruiken we "find" om toegang te krijgen tot deze verborgen invoer en dan de waarde ervan te pakken.
$ This.parent (). Ouder (). Vinden ( 'p'). Leeg (). Toevoegen (''); Nu moeten we de gebruiker toestaan een nieuwe beschrijving in te voeren. Dat is de reden waarom ze klikten op "Entry bewerken", is het niet? We vinden de beschrijving van de P-tag, legen deze en voegen een tekstgebied toe. We gebruiken "leeg ()" om ervoor te zorgen dat we alle tekst kwijtraken; het is niet meer nodig. De waarde van dit tekstgebied is voor het gemak gelijk aan de oude tekst.
$ ('. newDescription'). blur (function () Zoek dit nieuwe tekstgebied en voer een functie uit wanneer de gebruiker het tekstvak verlaat.
var newText = $ (this) .val ();
Leg de nieuwe tekst vast die de gebruikers in dit tekstgebied invoeren.
$ .ajax (type: 'POST', url: 'updateEntry.php', data: 'description =' + newText + '& id =' + id, success: function (results) $ this.parent (). parent (). vind ('p'). empty (). append (newText);); Roep de .ajax-functie op en geef een paar parameters door. Het type is "POST". De url om toegang te krijgen is "updateEntry.php". De gegevens die moeten worden doorgegeven aan deze pagina zijn de nieuwe tekst die de gebruiker heeft ingevoerd en de unieke id van die rij in de database. Wanneer de update is uitgevoerd, voert u een functie uit en werkt u de oude tekst bij met de nieuwe tekst!
return false;
Retourneer false om ervoor te zorgen dat klikken op de ankertag de gebruiker niet elders leidt.
Vergeet niet dat we onze 'updateEntry' PHP-pagina met jQuery hebben genoemd, maar we hebben deze niet echt gemaakt! Laten we dat nu doen. Maak een nieuwe pagina met de naam "updateEntry.php" en plak het volgende.
update_by_id ($ _ POST ['id'], $ _POST ['description']); ?>
Net als voorheen verwijzen we naar onze db-klasse en maken we die vervolgens. Vervolgens maken we een nieuwe variabele aan, $ response genaamd, en maken deze gelijk aan wat wordt geretourneerd door de "update_by_id ()" - methode. We hebben deze methode nog niet gemaakt. Dit is een goed moment om dit te doen.
Keer terug naar je db.php-pagina en voeg onderaan een nieuwe methode toe.
functie update_by_id ($ id, $ description) $ query = "UPDATE todo SET description =? WHITE id =? LIMIT 1"; if ($ stmt = $ this-> mysql-> prepare ($ query)) $ stmt-> bind_param ('si', $ description, $ id); $ Stmt-> execute (); terug 'goed gedaan! Bijgewerkt '; Deze methode accepteert twee parameters: de id en de beschrijving van het item. Dus, als we deze methode noemen, moeten we onthouden om die twee parameters door te geven! We beginnen met het maken van onze query: werk de "todo" -tabel bij en wijzig de beschrijving in alles wat wordt doorgegeven - maar werk alleen de rij bij waarbij het ID gelijk is aan de geparametreerde parameter.
Net als de vorige keer gebruiken we voorbereide instructies om onze database bij te werken. Het is de veiligste manier! Bereid onze vraag voor, bind de parameters (string en integer, of 'si') en voer uit. We geven een generieke tekenreeks terug, maar deze is helemaal niet nodig. Nu zou onze update perfect moeten werken!
Laten we ook een aardige asynchrone manier creëren waarop de gebruiker vermeldingen kan verwijderen. Wanneer ze op de verwijderknop voor een item klikken, vervagen we de div-out en werken we de database bij met de verwijdering. Open uw JavaScript-bestand en voeg het volgende toe:
// Verwijder anchor-tag geklikt $ ('a.deleteEntryAnchor'). Klik (functie () var thisparam = $ (this); thisparam.parent (). Parent (). Find ('p'). Text ('Please Wacht ... '); $ .ajax (type:' GET ', url: thisparam.attr (' href '), succes: functie (resultaten) thisparam.parent (). Parent (). FadeOut (' slow ') ;) return false;); $ ('a.deleteEntryAnchor'). klik (functie () Wanneer op het ankertag met een klasse van "deleteEntryAnchor" wordt geklikt, voert u een functie uit.
var thisparam = $ (this);
Cache $ (this) as thisparam.
thisparam.parent (). parent (). find ('p'). tekst ('Even geduld ...'); Verander de tekst van de beschrijving in "Please Wait". We moeten dit doen om de gebruiker feedback te geven, voor het geval het langer duurt dan verwacht.
$ .ajax (type: 'GET', url: thisparam.attr ('href'), success: function (results) thisparam.parent (). parent (). fadeOut ('slow');) Net als de vorige keer geven we een paar parameters door die toegang hebben tot "delete.php". In plaats van de pagina hard te coderen in de waarde van de URL, krijg ik toegang tot attr ('href') - wat gelijk is aan 'delete.php? Id = $ id'.
D
We hebben geen "DATA" -parameter nodig, omdat alle relevante informatie binnen de querystring van de url valt. Nadat de verwijdering met succes is uitgevoerd, vinden we de bovenliggende '.item' div en vervagen deze langzaam.
We hebben onze verwijderpagina met jQuery genoemd, maar we hebben de PHP nog niet gemaakt. Maak je nieuwe pagina en voeg de volgende code toe.
delete_by_id ($ _ GET [ 'id']); header ("Locatie: index.php"); Je zou nu aan deze procedures gewend moeten zijn. Maak een nieuw exemplaar van onze klasse en noem de methode "delete_by_id". Zodra dat is voltooid, stuurt u de gebruiker terug naar 'index.php'. Zoals je misschien al geraden hebt, moeten we een nieuwe methode maken binnen onze db-klasse. Ga terug naar db.php en voeg je nieuwe functie toe.
function delete_by_id ($ id) $ query = "DELETE from to WHERE id = $ id"; $ result = $ this-> mysql-> query ($ query) of dood ("er was een probleem, man."); als ($ resultaat) 'ja' retourneert; Deze methode accepteert één parameter - de id. Let op: om een rij bij te werken, MOETEN we de unieke ID van die rij weten. Anders wordt elke rij bijgewerkt. We verwijderen alle rijen uit de tabel, waarbij de ID gelijk is aan wat wordt doorgegeven. Omdat elke rij zijn eigen unieke ID heeft, is er maar één beïnvloed. Vervolgens geven we deze query door aan ons mysql-object. Nogmaals, het rendement is niet nodig; het is gewoon voor de lol.
We hebben al ons PHP-werk voltooid! De laatste stap is om een beetje jQuery toe te voegen om alles net iets beter te laten werken. Bovenaan je Javascript-bestand, voeg net na de document.ready-methode de volgende code toe:
// Geef het tabblad addNewEntry niet weer wanneer de pagina wordt geladen. $ ('# addNewEntry'). css ('display', 'none'); // We gebruiken jQuery om onze tabbladen te maken. Als Javascript is uitgeschakeld, werken ze niet. Als we dit in overweging nemen, moeten we onze tabbladen toevoegen, zodat ze niet worden weergegeven als ze zijn uitgeschakeld. $ ( '# Tabs'). Toevoegen ('Ik heb elke stap redelijk goed becommentarieerd. Dus, ik zal mezelf niet herhalen. Uw uiteindelijke scripts.js-bestand zou er als volgt uit moeten zien.
$ (function () // Het tabblad addNewEntry niet weergeven wanneer de pagina wordt geladen. $ ('# addNewEntry'). css ('display', 'none'); // We gebruiken jQuery om onze tabbladen te maken Als Javascript is uitgeschakeld, werken ze niet. Als we dit in overweging nemen, moeten we onze tabbladen toevoegen, zodat ze niet worden weergegeven als ze zijn uitgeschakeld. $ ('# Tabs').We kunnen het nog geen dag noemen! Die leuke 'ole Internet Explorer 6 zorgt voor een paar layoutproblemen.
Hoewel we het misschien leuk vinden, kunnen we deze browser nog niet negeren. Gelukkig zul je merken dat de meeste IE6-problemen vrij eenvoudig kunnen worden opgelost. Ten eerste moeten we een script importeren dat ons probleem met alpha-transparantie oplost. Dean Martin heeft een fantastisch Javascript-bestand dat IE6 voldoet aan de standaarden. Eenvoudig door "-trans" toe te voegen aan het einde van onze 24-bits png-bestandsnamen, kunnen we ons probleem oplossen. Zorg ervoor dat u de afbeeldingenmap bezoekt en de namen bewerkt.
Het CDN van Google komt weer tot de redding door een gehoste versie van het IE7-script aan te bieden. Dat lost ons transparantieprobleem op, maar we hebben nog een paar eigenaardigheden.
Merk op dat we in onze voorwaardelijke verklaring ook een "ie.css" -bestand importeerden. Maak dat bestand nu meteen en plak het volgende in:
body marge: 0; opvulling: 0; #tabs height: 100%; #main height: 100%; #main div.item width: 100%; overloop verborgen; positie: relatief;
U zult merken dat het toevoegen van "positie: relatief", "overloop: verborgen" en "hoogte: 100%" 90% van uw IE6-problemen zal oplossen. Nu werkt onze lay-out perfect in alle browsers!
Er was VEEL om hier te dekken. Hopelijk heb ik mezelf grondig genoeg uitgelegd. Zo nee, daar is de bijbehorende screencast voor! Zorg ervoor dat u deze bekijkt om wazige gebieden te verwijderen. Als je nog vragen hebt, vraag het me gewoon! Heel erg bedankt voor het lezen.
