Dringende Auflistung PHP. Wie ich Diebstahl bekämpfte ... mit PHP

To-Do-Listen sind eine großartige Möglichkeit, den Überblick über Ihre täglichen Aufgaben zu behalten. In diesem Tutorial erstellen wir unsere eigene To-Do-Liste mit PHP, MySQL und AJAX. Für dieses Tutorial wird davon ausgegangen, dass Sie über grundlegende Kenntnisse in HTML, PHP, MySQL und JavaScript verfügen.

In diesem Tutorial werden wir die folgenden Dateien verwenden. Sie können sie über den untenstehenden Link herunterladen. Sie können gerne eine alternative Struktur verwenden, aber denken Sie daran, Ihre Dateipfade gegenüber denen im Beispielcode zu ändern.

Als Erstes müssen wir die Struktur für unsere Hauptindexseite festlegen ( index.php). Diese Anwendung wird nur eine Seite haben und wir werden AJAX verwenden, um Aufgaben hinzuzufügen und zu löschen. Öffne das index.php Datei und fügen Sie den folgenden Code hinzu.

Einfache To-Do-Liste

Hinweis: Aus Zeitgründen gehen wir in diesem Tutorial nicht auf das Styling ein. In den Quelldateien wurde eine CSS-Datei eingebunden.

Wir müssen eine MySQL-Datenbank zum Speichern unserer Aufgaben einrichten. Am einfachsten geht das über ein serverseitiges Tool namens phpMyAdmin. Die Tools sind auf den meisten Webhosts vorinstalliert und werden mit lokalen Entwicklungsdiensten wie WampServer und XAMPP gebündelt. Wir werden eine Tabelle mit dem Namen „Aufgaben“ und den folgenden Spalten in dieser Reihenfolge einrichten: „ID“, „Aufgabe“, „Datum“, „Uhrzeit“. Stellen Sie sicher, dass die ID-Spalte auf „Auto-Inkrementierung“ eingestellt ist (es sollte ein Kontrollkästchen mit der Bezeichnung „A_I“ vorhanden sein).

Nachdem wir die neue Tabelle erstellt haben, müssen wir unser Projekt mit der Datenbank verbinden. Offen connect.php und fügen Sie der Datei den folgenden Code hinzu. Stellen Sie sicher, dass Sie die Felder „Benutzername“, „Passwort“ und „Datenbankname“ durch Ihre Datenbankdetails ersetzen. Speichern Sie die Datei, wenn Sie fertig sind.

Den Kodex erklären
PHP verfügt über eine mysql_connect()-Funktion, die eine Verbindung zum MySQL-Server herstellt. Die Servervariable sollte auf „localhost“ gesetzt bleiben, es sei denn, Ihre Datenbank wird auf einem anderen Server gehostet als die Projektdateien. Ersetzen Sie in diesem Fall diesen Wert durch die IP-Adresse des MySQL-Servers. Sobald die Verbindung hergestellt wurde, wählt die Funktion mysql_select_db() eine bestimmte Datenbank vom Server aus.

Jetzt haben wir unsere erstellt connect.php Datei müssen wir sie zur Hauptindexdatei hinzufügen. Fügen Sie den folgenden Code hinzu index.php und speichern Sie die Änderung.

Einfache To-Do-Liste

Als nächstes möchten wir eine Möglichkeit schaffen, Elemente zu unserer To-Do-Liste hinzuzufügen. Dazu nutzen wir ein Formular und übermitteln die Ergebnisse an die Datenbank. Fügen Sie den folgenden Code hinzu index.php und speichern Sie die Änderung.

Einfache To-Do-Liste

Hinweis: Beachten Sie, dass das Formular keine Aktions- und Methodenattribute hat. Diese werden normalerweise verwendet, um Daten über eine Post- oder Get-Anfrage an eine andere Datei zu senden. Wir werden AJAX zum Absenden unseres Formulars verwenden, daher werden wir keines dieser Attribute definieren. Weitere Informationen zu AJAX finden Sie in diesem Artikel von W3Schools.

Offen index.php in Ihrem Webbrowser und werfen Sie einen Blick darauf. An dieser Stelle sollten Sie ein großes weißes Rechteck sehen, in dem die Aufgaben angezeigt werden, sowie ein Textfeld zum Hinzufügen neuer Elemente zur Liste.

Wir müssen eine Möglichkeit einrichten, dass das Formular mit der Datenbank kommuniziert. Senden wir mithilfe von jQuery unser neues Aufgabenelement über eine Post-Anfrage an die add-task.php Datei. Von dort aus wird unser Artikel formatiert und in der Datenbank gespeichert. Fügen Sie Folgendes hinzu index.php Datei direkt nach dem schließenden Tag.

Den Kodex erklären
Das obige Skript fängt den Textfeldwert beim Absenden des Formulars ab und sendet ihn an add-task.php mit der jQuery-Methode $.post(). Der add-task.php Die Datei sendet dann eine Bestätigung des neu hinzugefügten Elements zurück, sodass es der Liste hinzugefügt werden kann. Das Schöne ist, dass dies alles ohne Aktualisierung der Seite geschieht!

Jetzt sendet unser Formular das neue Aufgabenelement an add-task.php, müssen wir dieser Datei mitteilen, was mit den Informationen geschehen soll. Offen add-task.php und fügen Sie den folgenden Code hinzu. Denken Sie daran, die Datei zu speichern.