Auf einen Blick
Ziel ist es hier mit php ein Haushaltsbuch bzw. eine Einkaufsliste zu erstellen, die Du selbst erweitern kannst. Die Liste wird mit php programmiert und greift auf eine mysql-Datenbank zu. Um zu starten, solltest Du einen Webspace haben, auf den du zugreifen kannst und auf dem auch mysql und php laufen. Ich verwende Befehle, die auch nicht zwingend die neuesten Versionen erfordern, aber php sollte ab der Version 5 vorhanden sein.
Ideale Versionen
- PHP: Version 5, idealerweise ab 5.2 aufwärts
- MYSQL: Ab Version 4.1 aufwärts
Wenn du etwas Fit bist in php und mysql, ist das kein großes Problem. Klar, gibt es fertige Lösungen, aber eine Einkaufsliste mit php und mysql ist ein guter Einstieg, um die Sprachen zu lernen.
Teil 2: Erstellen der Datenbank
Die Datenbank
Zunächst muss die passende Datenbank und darin die Tabelle erstellt werden. Bei eurem Webhoster werdet Ihr einen Bereich haben, in dem Ihr eine Datenbank anlegen könnt. Den Benutzernamen, das Passwort und den Datenbanknamen benötigt Ihr dann für den Zugriff in MySQL.
Tabelle automatisch erstellen
Im Script selber biete ich die Möglichkeit, die Tabelle automatisch anzulegen. Dann brauchst Du das Script nur aufzurufen und es prüft, ob die Tabelle vorhanden ist. Wenn nicht, wird diese angelegt.
Folgenden Codeabschnitt speichert Ihr einfach in der einkaufsliste.php, die Ihr in das Stammverzeichnis eures Servers stellt.
<?php
# Datenbankverbindung aufbauen
#################################################################
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "Datenbank";
$tabelle = "Einkaufsliste";
# Verbindung aufbauen
#################################################################
$db = new mysqli($servername, $username, $password, $dbname);
# Verbindung prüfen
####################
if ($db->connect_error) {
die("Verbindung fehlgeschlagen: " . $conn->connect_error."<br>");
}else{
# Verbindung hat funktioniert.
# Jetzt prüfen, ob die Tabelle vorhanden ist
#########################################################
$result = $db->query("SELECT table_name FROM INFORMATION_SCHEMA.TABLES WHERE table_name = '".$tabelle."'");
if (mysqli_num_rows($result) == 0) {
echo "Tabelle ist nicht da.<br>";
# Die Tabelle erstellen, falls noch nicht vorhanden
###############################################################
$sql = "
CREATE TABLE `$tabelle` (
`ListeID` INT( 10 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`checked` TINYINT( 1 ) NOT NULL ,
`Name` VARCHAR( 100 ) NULL ,
`Kategorie` VARCHAR( 100 ) NOT NULL) ENGINE = MYISAM ;
";
if ($db->query($sql) === TRUE) {
echo "Tabelle $tabelle erfolgreich angelegt<br>";
} else {
echo "Tabelle $tabelle konnte nicht angelegt werden: " .$conn->error."<br>";
}
}
}
?>Teil 3: Aufbau der Einkaufsliste
Die Vorbereitungen
Nachdem das Script schon mal mit der Datenbank umgehen kann, gehen wir nun an die eigentliche Funktionalität. Zunächst werden wir Funktionen bauen, um die Einträge zuzufügen und zu löschen. Ändern lasse ich bewusst außen vor. Die Einträge sind meist so kurz, dass man diese auch schnell löschen und wieder anlegen kann. Die Ändern-Funktion kommt dann später dazu.
Die Eingabemaske
Zunächst hängen wir an unsere einkaufsliste.php aus dem letzten Teil eine HTML-Form an, mit der wir einen Eintrag in der Datenbank erzeugen können.
<div>
<form action='einkaufsliste.php?action=einfuegen' method=post >
<label for="Eintrag">Eintrag</label>
<input type='text' value='' id="Eintrag" name='Eintrag' id='Eintrag'>
<label for="kategorie">Kategorie</label>
<select id="kategorie" name="kategorie">
<option value="Lebensmittel">Lebensmittel</option>
<option value="Auto">Auto</option>
<option value="Drogerie">Drogerie</option>
<option value="Freizeit">Freizeit</option>
<option value="Gesundheit">Gesundheit</option>
<option value="Sonstiges">Sonstiges</option>
</select>
<br><input type=submit value='buchen' class='button button1'></form>
</div>
<hr>In der Form rufen wir die gleiche Datei auf und übergeben einen Parameter, welche Aktion ausgeführt werden soll. Parameter werden durch das Fragezeichen von der Datei getrennt. Alle weiteren Parameter würden dann mit dem & angehängt.
<form action='einkaufsliste.php?action=einfuegen' method=post>
Anschließend wird das Formular aufgebaut. Zusätzlich habe ich für die Kategorien einige Vorgaben gemacht. Das ließe sich natürlich auch schön in einer zusätzlichen Tabelle festhalten, aber der Einfachheit halber hier per Dropdown.
Um eigene Kategorien zuzufügen, hier eine Zeile vor das </select> packen:
<option value="Kategorie_Neu">Kategorie_Neu</option>Den Eintrag in die Datenbank einfügen
Nun müssen wir noch den Code einbauen, damit unsere Eingabe auch in die Datenbank übernommen wird. Das geschieht mit ein paar Zeilen:
<?php
if($_GET["action"]=="einfuegen"){
$result = $db->query("INSERT INTO $tabelle ( `checked`,`Name`, `Kategorie`) VALUES ('false','".$_POST["Eintrag"]."','".$_POST["kategorie"]."')");
}
?>Erstelle jetzt mal ein paar Einträge, damit unser Einkaufszettel dann auch gefüllt ist.
Der Aufbau der Einkaufsliste
Natürlich nutzt das Ganze recht wenig, wenn die Artikel nicht angezeigt werden, also gehts an den Aufbau der Einkaufsliste. Dazu brauchen wir folgenden Code:
<h2>Einkaufsliste</h2>
<table id='Tabelle'>
<thead>
<tr><th>Gewählt</th><th>Eintrag</th><th>Kategorie</th><th>Aktion</th></tr>
</thead>
<?php
$abfrage = "SELECT * FROM $tabelle ORDER BY checked asc,Kategorie asc";
$ergebnis = $db->query($abfrage);
while($row = mysqli_fetch_object($ergebnis)){
if($row->checked==1){$Auswahl = 0; $Ausgewaehlt="checked";} else {$Auswahl = 1;$Ausgewaehlt="";}
echo "<tr style='height:50px;'><td><label class=EingabeFeld><input type=checkbox $Ausgewaehlt onclick='location.href=".'"einkaufsliste.php?action=auswahlNach der Überschrift bauen wir eine Tabelle auf. Die Daten aus der Datenbank holen wir mit einer while-Schleife. Dabei Sortieren wir mit ORDER BY checked asc,Kategorie asc zunächst nach ausgewählt oder nicht und anschließend nach Kategorie. So sind alle nicht ausgewählten / zu kaufenden Artikel oben und dort gruppiert.
Mit der Zeile if($row->checked==1){$Auswahl = 0; $Ausgewaehlt=“checked“;} else {$Auswahl = 1;$Ausgewaehlt=““;} prüfen wir, ob der Eintrag ausgewählt ist oder nicht und geben den Wert „checked“ in die Variable $Ausgewaehlt, damit die checkbox dann auch den Haken bekommt.
Die Auswahl
Wenn ein Eintrag ausgewählt wurde, also in der Spalte Gewählt angeklickt wurde, muss er auch entsprechend aktualisiert werden. Folgenden Code also noch einfügen:
<?php if($_GET["action"]=="auswahl"){
$result = $db->query("UPDATE $tabelle set checked='".$_GET["Auswahl"]."' WHERE ListeID=".$_GET["ListeID"]);
}
?>Datenbankeintrag löschen
Den Löschen-Button „DEL“ haben wir ja schon – also muss da noch die Funktionalität hinter. Packe folgenden Code hinter den Block zum Einfügen. Hier beide zusammen
<?php
if($_GET["action"]=="einfuegen"){
$result = $db->query("INSERT INTO $tabelle ( `checked`,`Name`, `Kategorie`) VALUES ('false','".$_POST["Eintrag"]."','".$_POST["kategorie"]."')");
}
if($_GET["action"]=="loeschen"){
$result = $db->query("DELETE FROM $tabelle WHERE ListeID=".$_GET["ListeID"]);
}
?>Teil 4: Design der Einkaufsliste
Header
Nachdem die Funktionalität schon in den Grundzügen vorhanden ist, werden wir uns nun darum kümmern, dass das Ganze auch noch ein wenig schöner aussieht.
Dazu werden wir zunächst ein paar Zeilen in den Header packen müssen, also ganz an den Anfang unserer einkaufsliste.php noch über das <?php
<html lang="de-DE">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="einkauf.ico" type="image/x-icon"/>Als Erstes werden wir den HTML-Kopf für HTML5 und die passende Sprache bilden. Danach beginnt mit <head> der HTML-Kopf. Darin geben wir zunächst mit dem meta-Tag viewport an, dass dieses Datei auch responsiv nutzbar ist und alles in den sichtbaren Bereich gehört und auf die Bildschirmbreite des Gerätes gedehnt wird width=device-width gefolgt vom Zoom-Level initial-scale=1.0
Darunter fügen wir eine Zeile ein, um im Browser ein Icon für die Lesezeichen anzuzeigen. Das Bild einkauf.ico ist ein einfaches kleines Bitmap in der Größe 64×64 Pixel, welches in .ico umbenannt wird und im gleichen Verzeichnis auf der Server liegen muss, wie die einkaufsliste.php.
Der Style
Damit Buttons, Tabelle und Co auch schön formatiert werden, bauen wir nun die Styles für das Design der Einkaufsliste in PHP ein. Klar sollte man diese Einstellungen eigentlich in eine extra Datei legen, aber ich möchte hier alles in einer Datei zeigen, also fügt folgendes direkt nach dem obigen Code hinzu:
<style>
.button{cursor:pointer;display:inline-block;font-size:16px;margin:4px 2px;text-decoration:none}
.button1{box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
input[type=submit]{background-color:#6BC500;border:none;border-radius:4px;box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);color:white;cursor:pointer;display:inline-block;font-size:16px;margin:4px 2px;padding:14px 20px;text-align:center;text-decoration:none;transition-duration:0.4s;width:100%;-webkit-transition-duration:0.4s}
input[type=submit]:hover{background-color:#5AB300}
input[type=text],[type=date],[type=number],select{border:1px solid #ccc;border-radius:4px;box-sizing:border-box;display:inline-block;margin:10px 0;padding:12px 20px;width:100%}
div{background-color:#F2F2F2;border-radius:5px;padding:20px}
#Tabelle td{border:1px solid #CFCFCF;padding:10px}
#Tabelle th{background-color:#6BC500;border:1px solid #CFCFCF;color:white;padding:10px;padding-bottom:12px;padding-top:12px;text-align:left}
#Tabelle tr:nth-child(even){background-color:#eee}
#Tabelle tr:nth-child(even){background-color:#ccc}
#Tabelle tr:hover{background-color:#6BC500}
#Tabelle{border-collapse:collapse;font-family:Arial,Helvetica,sans-serif;margin-top:20px;width:100%}
.Auswahl{background-color:#eee;height:25px;left:0;position:absolute;top:0;width:25px}
.EingabeFeld{cursor:pointer;display:block;font-size:22px;margin-bottom:12px;padding-left:35px;position:relative;user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none}
.EingabeFeld input{cursor:pointer;opacity:0;position:absolute} .EingabeFeld input:checked ~ .Auswahl{background-color:#6BC500}
.EingabeFeld input:checked ~ .Auswahl:after{display:block}
.EingabeFeld:hover input ~ .Auswahl{background-color:#ccc}
</style>
</head>
<body>Ans Ende der Datei packen wir dann für den ordentlichen Abschluß noch ein </body></html>
Natürlich kann die Liste und die Eingabe optisch noch schöner und mit Grafiken aufwendiger gestaltet werden, aber wenn Du die Liste wirklich für Deinen Einkauf nutzen möchtest, sollte darauf verzichtet werden, um im Supermarkt nicht plötzlich bei einer Edge-Verbindung genervt zwischen den Regalen sitzen zu müssen…
HINWEIS
Letztendlich ist hier die Liste praktisch fertig. In den folgenden Teilen werden optionale Features zugefügt und einige kleine Änderungen und Verbesserungen gezeigt. Die Liste selbst kannst Du so aber schon einsetzen.
Teil 5: Weitere Funktionen
Filter
Da nun die Grundfunktionen stehen, können wir uns an zusätzliche Features machen. Eines davon wäre z.B. ein Filter nach der Kategorie.
Dafür erstellen wir zunächst ein Stück css-Code, den wir oben in den <style></style> Teil einfügen:
#kategorie_filter{ background-color:#6BC500;border:0px solid #CFCFCF;color:white;padding:10px;padding-bottom:12px;padding-top:12px;text-align:left;font-size:18px;font-weight:bold; }Dann müssen wir den Teil der Tabellenüberschrift ändern, der die Kategorie zeigt. Also aus
<th>Eintrag</th>wird
<th>
<select id="kategorie_filter" name="kategorie_filter" onchange="location.href='einkaufsliste.php?action=filter&filter=this.value'">
<option value="Alle">Alle</option>
<option value="Lebensmittel">Lebensmittel</option>
<option value="Auto">Auto</option>
<option value="Drogerie">Drogerie</option>
<option value="Freizeit">Freizeit</option>
<option value="Gesundheit">Gesundheit</option>
<option value="Sonstiges">Sonstiges</option>
</select>
Damit haben wir im Tabellenheader eine Auswahlliste mit den entsprechenden Kategorien.
Es fehlt also nur noch die passende Filterfunktion. Dazu ändern wir folgenden Code
$abfrage = "SELECT * FROM $tabelle ORDER BY checked asc,Kategorie asc";Diesen mit folgenden Zeilen ersetzen:
if($_GET["action"]=="filter"){
if($_GET["filter"]<>"Alle")
$abfrage = "SELECT * FROM $tabelle WHERE Kategorie='".$_GET["filter"]."' ORDER BY checked asc,Kategorie asc";
else
$abfrage = "SELECT * FROM $tabelle ORDER BY checked asc,Kategorie asc";
echo "<script>document.getElementById('kategorie_filter').value='".$_GET["filter"]."'</script>";
}else{
$abfrage = "SELECT * FROM $tabelle ORDER BY checked asc,Kategorie asc";
}Damit wird zunächst geprüft, ob überhaupt ein Filter gesetzt wurde und wenn ja, ob Alle oder eine bestimmte Kategorie ausgewählt wurde. Wenn nicht, wird dem Select kein Filter (WHERE) zugewiesen.
Anschließend soll natürlich die entsprechende Auswahl auch in der Tabellenüberschrift der Spalte zu sehen sein. Hier fügen wir ein kleines Javascript ein, welches die Auswahl einträgt.
echo „document.getElementById(‚kategorie_filter‘).value='“.$_GET[„filter“].“‚“;
