FAQs
Wie kann ich eine eigene Einkaufsliste programmieren
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.
Auf einen Blick
- IDEALE VERSIONEN
- TEIL 2: ERSTELLEN DER DATENBANK
- DIE DATENBANK
- TABELLE AUTOMATISCH ERSTELLEN
- AUFBAU DER EINKAUFSLISTE
- DIE VORBEREITUNGEN
- DIE EINGABEMASKE
- DEN EINTRAG IN DIE DATENBANK EINFÜGEN
- DER AUFBAU DER EINKAUFSLISTE
- DIE AUSWAHL
- DATENBANKEINTRAG LÖSCHEN
- TEIL 4: DESIGN DER EINKAUFSLISTE
- HEADER
- DER STYLE
- TEIL 5: WEITERE FUNKTIONEN
- FILTER
IDEALE VERSIONEN
- PHP: Version 5, idealerweise ab 5.2 aufwärts
- MYSQL: Ab Version 4.1 aufwärts
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>";
}
}
}
?>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 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)){
switch($row->Kategorie){
case "Auto": $Kategorie = '<i class="fa fa-automobile"></i>';break;
case "Freizeit": $Kategorie = '<i class="fa fa-bicycle"></i>';break;
case "Gesundheit": $Kategorie = '<i class="fa fa-medkit"></i>';break;
case "Versicherungen": $Kategorie = '<i class="fa fa-hospital-o"></i>';break;
case "Kommunikation": $Kategorie = '<i class="fa fa-phone"></i>';break;
case "Drogerie": $Kategorie = '<i class="fa fa-bath" aria-hidden="true"></i>';break;
case "Sonstiges": $Kategorie = '<i class="fa fa-area-chart"></i>';break;
case "Lebensmittel": $Kategorie = '<i class="fa fa-cutlery"></i>';break;
default: $Kategorie=$row->Kategorie;
}
#echo $row->checked;
if($row->checked==1){$Auswahl = 0; $Ausgewaehlt="checked";} else {$Auswahl = 1;$Ausgewaehlt="";}
echo "<tr style='height:50px;'><td><label class=container><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 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.
![Einkaufsliste & Haushaltsbuch mit php & mysql](assets/img/blog/einkaufsliste-haushaltsbuch-mit-php-mysql-2.webp")
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