Anzeige
Tutorialbeschreibung

To-do-Liste mit PHP und MySQL

To-do-Liste mit PHP und MySQL

In diesem Tutorial werde ich euch zeigen, wie ihr eine To-do-Liste erstellt. Ziel ist es, Aufgaben hinzuzufügen, als erledigt zu kennzeichnen und zu löschen. HTML-Vorkenntnisse und einige PHP-Vorkenntnisse sollten vorhanden sein.


Unser Endergebnis soll in etwa so aussehen:

EndergebnisBilder



Im Großen und Ganzen arbeiten wir folgende Schritte ab:

1. Datenbank für To-do-Liste einrichten
2. Datenbank-Zugriff regeln
3. Aufgaben hinzufügen
4. Aufgaben als erledigt kennzeichnen
5. Aufgaben löschen

Die CSS-Dinge werde ich auslassen, jedoch die Bilder (Hintergrund, Erledigt, Unerledigt, Löschen) zur Verfügung stellen. Sollte jemand die CSS-Codes haben wollen, gibt es ja immer noch die Download-Datei.


 

Schritt 1

Zunächst widmen wir uns der Datenbank. Ihr braucht also einen PHP- und MySQL-fähigen Server.

Ich erarbeite das gesamte Projekt offline mit Xampp. Im Grunde brauchen wir nur eine Tabelle mit 4 Feldern. Ein ID-Feld, um die Aufgaben eindeutig zu identifizieren, ein Titel-Feld, um der Aufgabe eine Bezeichnung zu geben, ein Prioritäten-Feld und ein Feld, in dem wir deutlich machen, ob die Aufgabe erledigt oder unerledigt ist. Folgender Code im phpMyAdmin eingegeben erzeugt exakt die Tabelle, die ich für meine To-do-Liste benutzt habe.

CREATE TABLE IF NOT EXISTS `01todo` (
  `id` int(20) NOT NULL AUTO_INCREMENT,
  `afgb` varchar(255) NOT NULL,
  `prrtt` int(1) NOT NULL DEFAULT '3',
  `erldgt` enum('0','1') NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=15 ;

Eure Tabelle sollte dann in etwa so aussehen:

MySQL-TabelleBilder



Wenn ihr soweit seid, können wir zum nächsten Schritt kommen.


 

Schritt 2

Als Nächstes werden wir uns darum kümmern, dass wir eine Verbindung von unserem PHP-Script zu unserer Datenbank bekommen.

Erstellt eine neue leere Datei. Speichert sie als db.php mit folgendem Inhalt ab:

<?php
	$db_link = mysql_connect ("localhost", "BENUTZER", "PASSWORT");
	
	$db_sel = mysql_select_db("DATENBANKNAME")
   or die("Auswahl der Datenbank fehlgeschlagen");
?>

In Zeile 2 müsst ihr eure Benutzerdaten für den Zugriff auf eure Datenbank angeben. In Zeile 4 den Namen eurer Datenbank. Wenn ihr das erledigt habt, können wir zur Eingabemaske für neue Aufgaben kommen.


Schritt 3

Legt eine neue Datei mit HTML-Grundgerüst an. Speichert sie als todo.php ab. Ganz nach oben in die erste Zeile kommt die Anbindung zur Datenbank durch folgenden Code:

<?php
	include("db.php");
?>

Dieser Code bindet (include) die db.php (die sich im gleichen Ordner wie die todo.php befinden muss) in die todo.php ein. Wir packen unsere Eingabemaske in eine Tabelle. Meine Tabelle besteht aus 3 Zeilen und 2 Spalten, wobei in Zeile 1 und 3 die 2 Spalten zusammengefasst wurden. Meine Tabelle sieht so aus:

<form action="todo.php" method="post" name="tdlst">
<table width="750px" align="center" border="1" style="border-collapse: collapse;">
 <tr>
  <th colspan="2">Neuen Eintrag hinzuf&uuml;gen</th>
 </tr>
 <tr>
  <td><input name="afgb" type="text" value="Bitte neue Aufgabe eingeben..." /></td>
  <td width="1%"><select name="prrtt" title="Priorit&auml;t">
  					<option>1</option>
  					<option>2</option>
  					<option selected="selected">3</option>
  					<option>4</option>
  					<option>5</option>
                 </select></td>
 </tr>
 <tr>
  <td align="center" colspan="2"><input type="submit" name="sbmt" value="Abschicken" /></td>
 </tr>
</table>
</form>

Wie ihr sehen könnt, habe ich um meine Tabelle ein Formular angelegt, eine Kopfzeile bestimmt (<th></th>) und bereits die einzelnen Zellen ausgefüllt.

Also noch mal kurz zusammengefasst: Ihr braucht eine Tabelle mit einem Input-Feld, einem Dropdown-Feld und einem Button.

Damit ihr weiterhin exakt diesem Tutorial folgen könnt, solltet ihr folgende Benennung beibehalten:

• Input-Feld: afgb
• Dropdown-Feld: prrtt
• Button: sbmt

Ihr habt alles soweit? Gut, na dann kommt jetzt das erste Stückchen PHP.


Schritt 4

In dem ersten Teil PHP wollen wir dafür sorgen, dass wir etwas in unsere Datenbank eintragen können. Folgender Code kommt unter den <form>-Tag.

<?php
	if(isset($_REQUEST["sbmt"])) {
		$dbi = mysql_query("INSERT INTO 01todo (`id`,`afgb`,`prrtt`,`erldgt`) VALUES (NULL,'".$_REQUEST["afgb"]."','".$_REQUEST["prrtt"]."','0')");
		if($dbi == true) {
			echo "<b><i>Der Eintrag wurde erfolgreich hinzugefügt!</i></b>";
		}
	}
?>

 
Damit ihr auch wisst, was ihr hier überhaupt macht, erklär ich euch den Code:

if(isset($_REQUEST["sbmt"])) fragt, ob die durch das Formular übergebene Variable sbmt existiert. Der Code in der nächsten Zeile (hinter $dbi) trägt unsere Daten in die Tabelle ein. Wenn dieser Code abgearbeitet ist, wird mit if($dbi == true) abgefragt, ob das Eintragen erfolgreich war.

Wenn ihr soweit seid, kommen wir zum nächsten Schritt.


Schritt 5

In diesem Schritt wollen wir uns um die Ausgabe der Einträge kümmern. Legt euch eine Tabelle mit 3 Spalten und 2 Zeilen an. Die 2 Zeilen dienen dem Zweck, die erledigten und unerledigten Aufgaben zu trennen. Folgender Code gibt uns die Aufgaben sortiert nach Priorität aus:

<table width="750px" align="center" border="1" style="border-collapse: collapse;"><?php
	$dbc = mysql_query("SELECT * FROM 01todo WHERE `erldgt`='0' ORDER BY prrtt DESC");
	while($row = mysql_fetch_array($dbc)) {
?>
 <tr>
  <td width="1"><a href="todo.php?erldgt=1&id=<?php echo $row["id"];?>"><img src="unerledigt.png" width="25" height="25" border="0" title="unerledigt" /></a></td>
  <td width="1"><a href="todo.php?del=true&id=<?php echo $row["id"];?>"><img src="loeschen.png" width="25" height="25" border="0" title="l&ouml;schen" /></a></td>
  <td><strong><?php
	echo $row["afgb"];
?></strong></td>
 </tr>
<?php
	}
	$dbc = mysql_query("SELECT * FROM 01todo WHERE `erldgt`='1' ORDER BY prrtt DESC");
	while($row = mysql_fetch_array($dbc)) {
?>
 <tr>
  <td width="1"><img src="erledigt.png" width="25" height="25" border="0" title="erledigt" /></td>
  <td width="1"><a href="todo.php?del=true&id=<?php echo $row["id"];?>"><img src="loeschen.png" width="25" height="25" border="0" title="l&ouml;schen" /></a></td>
  <td><strong><?php
	echo $row["afgb"];
?></strong></td>
 </tr>
<?php
	}
?>
</table>

Mit SELECT * FROM 01todo greifen wir auf die Datenbank zu. Mit der Frage WHERE `erldgt`='0' fragen wir, nach den unerledigten, mit 1 nach den erledigten Aufgaben. ORDER BY prrtt DESC sortiert die Einträge absteigend (größte nach kleinste) nach Priorität.

Der restliche Code ist selbsterklärend. In den ersten beiden Spalten stehen zwei Grafiken mit zwei links verbunden. Um den darauf folgenden Code kümmern wir uns in Schritt 6.


Schritt 6

Wie gerade eben schon gesagt, kümmern uns jetzt um den Code, der uns erlaubt, eine Aufgabe als erledigt zu kennzeichnen bzw. zu löschen. Wir erinnern uns an den Code, der Aufgaben eintragen kann. Unter diesen setzen wir folgenden Code:

<?php
	if(isset($_REQUEST["erldgt"])) {
		$dbu = mysql_query("UPDATE 01todo SET  `erldgt` =  '1' WHERE `id` = '".$_REQUEST["id"]."'");
		if($dbu == true) {
			echo "<b><i>Der Eintrag wurde erfolgreich als erledigt gekennzeichnet!</i></b>";
		}
	}
	
	if(isset($_REQUEST["del"])) {
		$dbd = mysql_query("DELETE FROM 01todo WHERE `id` = '".$_REQUEST["id"]."'");
		if($dbd == true) {
			echo "<b><i>Der Eintrag wurde erfolgreich als erledigt gekennzeichnet!</i></b>";
		}
	}
?>

 
if(isset()) fragt wieder, ob die Variable existiert, was sie nur tut, wenn jemand auf einen der Buttons geklickt hat.

Mit UPDATE sagen wir, dass wir etwas in der Tabelle 01todo ändern wollen. Mit Set sagen wir, was wir ändern wollen. Wir wollen nämlich erldgt auf 1 setzen. Und damit wir nur eine Zeile verändern, fragen wir mit WHERE id nach der passenden Aufgabe.

Der Delete-Befehl ist noch einfacher aufgebaut. Wir sagen einfach, dass wir von der Tabelle 01todo den Eintrag mit der übergebenen ID löschen wollen.

Ihr habt das alles? Wenn ihr das Ganze jetzt aufruft, sollten keine Fehler auftreten. Sollten dennoch irgendwelche Fehler auftreten, dann könnt ihr euer Script mit dem von mir zur Verfügung gestellten vergleichen.

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Multimedianerin
  • 18.01.2017 - 13:19

Danke für das Tutorial, jetzt habe ich schonmal etwas Ahnung wie ich mit PHP auf eine Datenbank zugreifen kann etc.

Portrait von schraubergott
  • 15.04.2013 - 21:28

Dank für das Tutorial sehr informativ

Portrait von MDWasp
  • 03.09.2012 - 10:34

mysql_query("INSERT INTO 01todo (`id`,`afgb`,`prrtt`,`erldgt`) VALUES (NULL,'".$_REQUEST["afgb"]."','".$_REQUEST["prrtt"]."','0')");

Willkommen in deiner Datenbank.
Du packst hier Request Daten unüberprüft in eine Query, unter Umständen könnte dadurch dein ganzer Datenbankserver übernommen werden.

Definitiv die Request Variablen auf unzulässige Zeichen überprüfen (Regex, mysql_real_esape_string)

MFG

Portrait von TechMac
  • 06.08.2012 - 20:42

Richtig gutes Tutorial. Und sehr nützlich.

Portrait von InterMedia
  • 19.05.2012 - 10:51

In jedem Falle sehr informativ und lesenwert. Vorallem das anlegen neuer Aufgaben macht verständlich, wie man Datensätze pflegen und ergänzen kann.

Portrait von browse
  • 11.04.2012 - 15:07

Vielen Dank für das Tut mit den Erklärungen. Habe dadurch nun in etwa eine Ahnung erhalten wie ich via PHP Daten in eine DB schreiben kann und wieder raus holen.

x
×
×