Share
Für das Tuts + Premium-Tutorial dieser Woche arbeiten wir mit vielen verschiedenen Technologien. Letztendlich erstellen wir eine To-Do-Liste, mit der Sie oder Ihr Benutzer Elemente asynchron erstellen, aktualisieren und löschen können. Um unsere Aufgabe zu erfüllen, verwenden wir die AJAX-Funktionen von PHP und jQuery. Ich denke, Sie werden feststellen, dass es nicht ganz so schwer ist, wie Sie vielleicht denken. Ich zeige dir genau wie!
Dieses Tutorial enthält einen Screencast für Tuts + Premium-Mitglieder.
Wie Sie sich vorstellen können, können wir keine Datensätze in einer statischen Umgebung speichern, löschen und aktualisieren. Daher müssen wir eine MySql-Datenbank erstellen, in der die Informationen gespeichert werden.
Wenn Sie PHPMyAdmin verwenden, rufen Sie das Steuerungsfeld auf, indem Sie http: // localhost / phpmyadmin aufrufen.
Geben Sie im Textfeld "Neue Datenbank erstellen" "db" ein und klicken Sie auf "Erstellen". Als Nächstes müssen Sie eine Tabelle erstellen. Geben Sie "todo" und "3" für "Anzahl der Felder" ein..
Wir müssen jetzt die entsprechenden Spalten hinzufügen.
Stellen Sie sicher, dass die Optionen für jedes Feld mit den im folgenden Bild gezeigten übereinstimmen.
Nachdem wir unsere Datenbank erstellt haben, fügen wir schnell einige Testzeilen hinzu. Klicken Sie auf Ihre Datenbank "db". Wählen Sie dann "Durchsuchen". Sie gelangen auf einen Bildschirm, der den Inhalt jeder Zeile in Ihrer Datenbank auflistet. Offensichtlich ist dieser Abschnitt momentan leer. Wählen Sie "Einfügen" und fügen Sie einige Spalten hinzu. Geben Sie hier ein, was Sie möchten.
Obwohl dies keinesfalls erforderlich ist, finde ich, dass es am einfachsten ist, meine Funktionen zu verwalten, wenn sie in einer Klasse zusammengefasst werden. In Anbetracht dessen erstellen wir nun eine "Db" -Klasse, die mehrere Funktionen enthält.
Öffnen Sie den gewünschten Code-Editor und erstellen Sie eine neue Datei mit dem Namen "db.php". Fügen Sie in diesem leeren Dokument die folgenden Codezeilen ein.
Accentsconagua
class Db private $ mysql; function __construct () $ this-> mysql = neues mysqli ('localhost', 'root', 'yourPassword', 'db') oder die ('problem'); // Klasse beenden Um eine neue Klasse zu erstellen, verwenden wir die im Folgenden dargestellte Syntax.
Klasse 'myClass'
Nur mit dem obigen Code haben wir erfolgreich eine neue Klasse erstellt. Es macht noch nichts, aber es ist trotzdem eine Klasse!
Die __construct () -Methode (Klassengespräch für "Funktion") wird als "magische Methode" bezeichnet. Es wird sofort ausgeführt, nachdem eine Klasse instanziiert wurde. Wir werden diese Methode verwenden, um unsere erste Verbindung zur MySql-Datenbank herzustellen.
function __construct () $ this-> mysql = neues mysqli ('localhost', 'root', 'yourPassword', 'db') oder die ('problem'); Wenn Sie sich mit OOP nicht auskennen, kann dies zunächst etwas entmutigend sein. Zum Glück ist es nicht zu schwer zu begreifen. Wir möchten, dass unsere mysql-Verbindung für alle Methoden in unserer Klasse verfügbar ist. Aus diesem Grund wäre es nicht ratsam, die $ mysql -Variable in einer bestimmten Funktion zu speichern. Stattdessen sollte es eine Klasseneigenschaft sein.
private $ mysql;
Innerhalb einer Methode können wir nicht einfach auf unsere Eigenschaft zugreifen, indem Sie "$ mysql" eingeben. Wir müssen zuerst auf das Objekt verweisen.
$ this-> mysql
Beachten Sie, dass wir beim Zugriff auf eine Immobilie das Dollarzeichen weglassen können.
Wenn Sie eine Verbindung zu einer Datenbank herstellen, empfiehlt es sich, die verbesserte mysql-Methode (mysqli) anstelle der traditionellen mysql_connect-Methode zu verwenden. Dies ist nicht nur schneller, sondern ermöglicht auch die Verwendung eines OOP-Ansatzes.
Beim Erstellen einer neuen Instanz der mysqli-Klasse müssen wir vier Parameter übergeben.
Das sollte es jetzt tun. Im Verlauf dieses Tutorials kehren wir zu unserer Klasse zurück, um neue Methoden anzufügen. Denken Sie daran, wenn Sie eine neue Instanz dieser Klasse erstellen ...
erfordern 'db.php'; $ db = new Db ();
… Dank der magischen Methode __construct () öffnen wir automatisch eine Verbindung zu unserer Datenbank.
Nun müssen wir unser Markup für die Homepage erstellen. Fügen Sie Ihrer Lösung eine neue Seite hinzu und speichern Sie sie als "index.php". Als nächstes fügen Sie Folgendes ein.
Meine To-Do-Liste Meine To-Do-Liste
- Machen
……
Im Kopf unseres Dokuments verweise ich auf das CDN von Google, um auf jQuery zuzugreifen. Dies ist leicht die bevorzugte Methode, wenn Sie jQuery verwenden. Als Nächstes verweise ich auf eine Datei 'scripts.js', die wir später in diesem Lernprogramm erstellen werden.
Lassen Sie uns kurz überprüfen, wozu jedes div dient.
Dies ist kein CSS-Tutorial an sich. Sie können das von mir verwendete Stylesheet überprüfen. Es ist im Download-Bundle enthalten. Wenn Sie einen tieferen Überblick wünschen, schauen Sie sich den Screencast an.
Nachdem wir uns nun mit der Datenbank verbunden und unser Markup / CSS erstellt haben, schreiben wir etwas Code, der die Datenbankzeilen abruft.
Fügen Sie in das "todo" -Div folgendes ein.
mysql-> query ($ query); if ($ results-> num_rows) while ($ row = $ results-> fetch_object ()) $ title = $ row-> title; $ description = $ row-> description; $ id = $ row-> id; Echo ''; $ data = <<'; // end while else echo "$ Title $ beschreibung
D EEOD; echo $ data; Echo 'Es gibt null Artikel. Fügen Sie jetzt einen hinzu!
";?>
Hoffentlich machte das alles Sinn. Zu diesem Zeitpunkt sollten Sie etwa Folgendes haben:
Wir möchten auch, dass der Benutzer die Möglichkeit hat, neue Datensätze einzufügen. Lassen Sie uns ein Formular erstellen, das genau dies zulässt.
Neuen Eintrag hinzufügen
Dies ist Ihre Standardform. Wir haben Eingaben für einen Titel und eine Beschreibung hinzugefügt. Wenn Sie auf die Schaltfläche "Senden" klicken, werden die eingegebenen Informationen in "addItem.php" veröffentlicht. Lass uns diese Seite jetzt erstellen.
Erstellen Sie ein neues Dokument und speichern Sie es als "addItem.php". Fügen Sie im folgenden Code ein:
mysql-> prepare ($ query)) $ stmt-> bind_param ('ss', $ _POST ['title'], $ _POST ['description']); $ stmt-> execute (); header ("location: index.php"); else die ($ db-> mysql-> error); 
Mit den AJAX-Funktionen von jQuery können Sie dem Benutzer ermöglichen, jeden Artikel ohne Postback zu aktualisieren. Erstellen Sie eine neue Datei in einem Ordner "js" und nennen Sie sie "scripts.js". Denken Sie daran, dass wir diese Datei bereits in unserem Markup referenziert haben.
$ (function () $ ('. editEntry'). click (function () 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, success: function (results) $ this.parent (). parent (). find (' p '). empty (). append (newText);;) ); falsch zurückgeben; ); ); Wenn Sie zu unserem Markup auf index.php zurückkehren, sehen Sie Folgendes:
D E
$ ('. editEntry'). click (Funktion () Mit jQuery müssen wir darauf achten, wann auf das Ankertag mit der Klasse "editEntry" geklickt wird.
var $ this = $ (this);
Als Nächstes speichern wir $ (this) - was sich auf das Ankertag bezieht, auf das geklickt wurde.
var oldText = $ this.parent (). parent (). find ('p'). text (); Wir müssen die ursprüngliche Beschreibung speichern. Wir weisen das Anker-Tag an, das übergeordnete div zu finden, und suchen nach dem p-Tag, das den Beschreibungstext enthält. Wir greifen diesen Wert mit "text ()".
var id = $ this.parent (). parent (). find ('# id'). val (); Um die richtige Zeile in unserer Datenbank zu aktualisieren, muss ich wissen, was die ID dieser bestimmten Zeile ist. Wenn Sie auf Ihren Code zurückgreifen, wird ein ausgeblendetes Eingabefeld angezeigt, das diesen Wert enthält.
Wieder einmal verwenden wir "find", um auf diese versteckte Eingabe zuzugreifen, und greifen dann ihren Wert auf.
$ this.parent (). parent (). find ('p'). empty (). append (''); Nun müssen wir dem Benutzer erlauben, eine neue Beschreibung einzugeben. Deshalb haben sie auf "Eintrag bearbeiten" geklickt, nicht wahr? Wir finden das Beschriftungs-P-Tag, leeren es und fügen dann einen Textbereich hinzu. Wir verwenden "empty ()", um sicherzustellen, dass der gesamte Text entfernt wird. es ist nicht mehr nötig. Der Wert dieses Textbereichs entspricht dem oldText - der Einfachheit halber.
$ ('. newDescription'). blur (function () Suchen Sie dieses neue Textfeld und führen Sie eine Funktion aus, wenn der Benutzer das Textfeld verlässt.
var newText = $ (this) .val ();
Erfassen Sie den neuen Text, den die Benutzer in diesem Textbereich eingeben.
$ .ajax (Typ: 'POST', URL: 'updateEntry.php', Daten: 'description =' + newText + '& id =' + id, Erfolg: function (results) $ this.parent (). parent) () .find ('p'). empty (). append (newText);); Rufen Sie die .ajax-Funktion auf und übergeben Sie einige Parameter. Der Typ wird "POST" sein. Die zu verwendende URL lautet "updateEntry.php". Die Daten, die an diese Seite übergeben werden, sind der neue Text, den der Benutzer eingegeben hat, und die eindeutige ID dieser Zeile in der Datenbank. Wenn das Update erfolgreich durchgeführt wurde, führen Sie eine Funktion aus und aktualisieren Sie den alten Text mit dem neuen Text!
falsch zurückgeben;
Geben Sie false zurück, um sicherzustellen, dass durch Klicken auf das Ankertag der Benutzer nicht an eine andere Stelle geleitet wird.
Denken Sie daran, wir haben mit jQuery unsere PHP-Seite "updateEntry" aufgerufen, die wir jedoch noch nicht erstellt haben. Lass uns das jetzt machen. Erstellen Sie eine neue Seite mit dem Namen "updateEntry.php" und fügen Sie sie im Folgenden ein.
update_by_id ($ _ POST ['id'], $ _POST ['description']); ?>
Wie zuvor referenzieren wir unsere DB-Klasse und instanziieren sie dann. Als Nächstes erstellen wir eine neue Variable mit dem Namen $ response und machen sie gleich mit dem, was von der "update_by_id ()" -Methode zurückgegeben wird. Wir haben diese Methode noch nicht erstellt. Jetzt ist ein guter Zeitpunkt, dies zu tun.
Kehren Sie zu Ihrer db.php-Seite zurück und fügen Sie unten eine neue Methode hinzu.
Funktion update_by_id ($ id, $ description) $ query = "UPDATE todo SET description =? WHERE id =? LIMIT 1"; if ($ stmt = $ this-> mysql-> prepare ($ query)) $ stmt-> bind_param ('si', $ description, $ id); $ stmt-> execute (); Rückkehr 'gute Arbeit! Aktualisierte'; Diese Methode akzeptiert zwei Parameter: die ID und die Beschreibung des Elements. Wenn wir diese Methode aufrufen, müssen wir also daran denken, diese beiden Parameter zu übergeben! Wir beginnen mit der Erstellung unserer Abfrage: Aktualisieren Sie die "todo" -Tabelle und ändern Sie die Beschreibung in das, was übergeben wird. Aktualisieren Sie jedoch nur die Zeile, in der die ID dem übergebenen Parameter entspricht.
Wie beim letzten Mal verwenden wir vorbereitete Anweisungen, um unsere Datenbank zu aktualisieren. Es ist der sicherste Weg! Bereiten Sie unsere Abfrage vor, binden Sie die Parameter (Zeichenfolge und Ganzzahl oder 'si') und führen Sie sie aus. Wir geben eine generische Zeichenfolge zurück, die jedoch überhaupt nicht erforderlich ist. Nun sollte unser Update perfekt funktionieren!
Lassen Sie uns auch eine nette asynchrone Methode zum Löschen von Einträgen erstellen. Wenn sie für ein Element auf die Schaltfläche "Löschen" klicken, blenden wir das Div aus und aktualisieren die Datenbank, um die Löschung anzuzeigen. Öffnen Sie Ihre Javascript-Datei und fügen Sie Folgendes hinzu:
// Anker-Tag löschen, auf das auf $ geklickt wurde ('a.deleteEntryAnchor'). Click (function () var thisparam = $ (this); thisparam.parent (). Parent (). Find ('p'). Text ('Please Wait… '); $ .ajax (Typ:' GET ', URL: thisparam.attr (' href '), Erfolg: Funktion (Ergebnisse) thisparam.parent (). Parent (). FadeOut (' slow ') ; ) falsch zurückgeben; ); $ ('a.deleteEntryAnchor'). click (Funktion () Wenn auf das Ankertag mit der Klasse "deleteEntryAnchor" geklickt wird, führen Sie eine Funktion aus.
var thisparam = $ (this);
$ (This) als thisparam zwischenspeichern.
thisparam.parent (). parent (). find ('p'). text ('Bitte warten ...'); Ändern Sie den Text der Beschreibung in "Bitte warten". Wir müssen dies tun, um dem Benutzer etwas Feedback zu geben, nur für den Fall, dass es länger dauert als erwartet.
$ .ajax (Typ: 'GET', URL: thisparam.attr ('href'), Erfolg: Funktion (Ergebnisse) thisparam.parent (). parent (). fadeOut ('slow');) Genau wie beim letzten Mal übergeben wir einige Parameter, die auf "delete.php" zugreifen. Anstatt die Seite im Wert der URL fest zu kodieren, greife ich auf attr ('href') zu - was gleich 'delete.php? Id = $ id' ist..
D
Wir brauchen keinen "DATA" -Parameter, da sich alle entsprechenden Informationen in der Querzeichenfolge der URL befinden. Wenn der Löschvorgang erfolgreich durchgeführt wurde, finden wir das übergeordnete '.item' div und blenden es langsam aus.
Wir haben unsere Löschseite mit jQuery aufgerufen, aber PHP noch nicht erstellt. Erstellen Sie Ihre neue Seite und fügen Sie den folgenden Code hinzu.
delete_by_id ($ _ GET ['id']); header ("Location: index.php"); Sie sollten sich inzwischen an diese Verfahren gewöhnt haben. Erstellen Sie eine neue Instanz unserer Klasse und rufen Sie die Methode "delete_by_id" auf. Wenn dies erfolgreich abgeschlossen wurde, leiten Sie den Benutzer zurück zu "index.php". Wie Sie vielleicht schon vermutet haben, müssen wir eine neue Methode innerhalb unserer Klasse db erstellen. Kehren Sie zu db.php zurück und fügen Sie Ihre neue Funktion hinzu.
Funktion delete_by_id ($ id) $ query = "DELETE von todo WHERE id = $ id"; $ result = $ this-> mysql-> query ($ query) oder die ("es gab ein Problem, Mann."); if ($ result) Rückgabe 'yay!'; Diese Methode akzeptiert einen Parameter - die ID. Denken Sie daran: Um eine Zeile zu aktualisieren, MÜSSEN wir die eindeutige ID dieser Zeile kennen. Andernfalls wird jede Zeile aktualisiert. Wir löschen alle Zeilen aus der Tabelle, wobei die ID gleich der übergebenen ist. Da jede Zeile eine eigene eindeutige ID hat, ist nur eine davon betroffen. Als Nächstes übergeben wir diese Abfrage an unser Mysql-Objekt. Wieder ist die Rückkehr unnötig; es ist nur zum Spass.
Wir haben alle unsere PHP-Arbeit beendet! Der letzte Schritt besteht darin, ein wenig jQuery hinzuzufügen, damit alles noch ein bisschen besser funktioniert. Fügen Sie am oberen Rand Ihrer Javascript-Datei direkt nach der document.ready-Methode den folgenden Code ein:
// Die Registerkarte "AddNewEntry" nicht anzeigen, wenn die Seite geladen wird. $ ('# addNewEntry'). css ('display', 'none'); // Wir verwenden jQuery, um unsere Registerkarten zu erstellen. Wenn Javascript deaktiviert ist, funktionieren sie nicht. In Anbetracht dessen sollten wir unsere Registerkarten anhängen, damit sie bei Deaktivierung nicht angezeigt werden. $ ('# tabs'). anfügen ('Ich habe jeden Schritt ziemlich gut kommentiert. Also verzichte ich darauf, mich zu wiederholen. Ihre endgültige Datei scripts.js sollte so aussehen.
$ (function () // Zeigt die Registerkarte "addNewEntry" nicht an, wenn die Seite geladen wird. $ ('# addNewEntry'). css ('display', 'none'); // Wir verwenden jQuery zum Erstellen unserer Registerkarten Wenn Javascript deaktiviert ist, funktionieren sie nicht. In Anbetracht dessen sollten wir unsere Registerkarten anfügen, damit sie nicht angezeigt werden, wenn sie deaktiviert sind. $ ('# Tabs'). Append ('Wir können es noch keinen Tag nennen! Dieser Spaß 'ole Internet Explorer 6 verursacht einige Layoutprobleme.
Wir können diesen Browser zwar noch nicht ignorieren. Glücklicherweise können Sie feststellen, dass die meisten IE6-Probleme leicht behoben werden können. Zunächst müssen wir ein Skript importieren, das unser Alpha-Transparenzproblem behebt. Dean Martin hat eine fantastische Javascript-Datei, die IE6 an die Standards anpasst. Durch einfaches Hinzufügen von "-trans" am Ende unserer 24-Bit-Dateinamen können wir unser Problem beheben. Besuchen Sie unbedingt den Bilderordner und bearbeiten Sie die Namen.
Googles CDN wird durch die Bereitstellung einer gehosteten Version des IE7-Skripts erneut zur Rettung gebracht. Das behebt unser Transparenzproblem, aber wir haben noch ein paar Macken.
Beachten Sie, dass wir in unserer Bedingungsanweisung auch eine Datei "ie.css" importiert haben. Erstellen Sie diese Datei jetzt und fügen Sie Folgendes ein:
body margin: 0; Polsterung: 0; #tabs height: 100%; #main height: 100%; #main div.item width: 100%; Überlauf versteckt; Position: relativ;
Wenn Sie "position: relative", "overflow: hidden" und "height: 100%" hinzufügen, werden Sie 90% Ihrer IE6-Probleme beheben. Nun funktioniert unser Layout in allen Browsern einwandfrei!
Es gab eine Menge zu berichten. Hoffentlich erklärte ich mich gründlich genug. Wenn nicht, ist dies der zugehörige Screencast! Überprüfen Sie es unbedingt, um unscharfe Bereiche zu entfernen. Wenn Sie noch Fragen haben, fragen Sie mich einfach! Vielen Dank fürs Lesen.
