Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP

Erstellen Sie einen Einkaufswagen mit PHP und MySQL

by
Difficulty:AdvancedLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Für das Screencast + Tutorial dieser Woche werden wir Ihnen beibringen, wie Sie Ihren eigenen Einkaufswagen mit PHP und MySQL erstellen. Wie Sie feststellen werden, ist es nicht ganz so schwierig, wie Sie vielleicht gedacht haben.


Screencast Vorschau



Schritt 1

Sehen wir uns zunächst die Ordnerstruktur an:


Struktur

  • reset.css - Sie können den Reset von diesem Link erhalten
  • style.css - unsere eigene CSS-Datei, mit der wir Ihr HTML-Markup formatieren werden
  • connection.php - die Datei, die unsere Datenbankverbindung herstellt
  • index.php - die Vorlage für unseren Warenkorb
  • cart.php - die Datei, wo wir unsere Produkte aus dem Warenkorb ändern können (hinzufügen, entfernen)
  • products.php - die Produktliste

Schritt 2

Wir beginnen damit, das HTML-Markup zu schreiben und es dann zu formatieren. So öffnen Sie index.php und kopieren / fügen Sie den folgenden Code ein:

Wie Sie sehen können, hat unsere Seite zwei Spalten: die Hauptspalte und die Seitenleiste. Gehen wir zum CSS über. Öffnen Sie die Datei style.css und geben Sie den folgenden Code ein:

So sollte unsere Produktseite jetzt aussehen:



Voller Screencast



Schritt 3

Bevor wir uns dem PHP / MySQL-Teil zuwenden, müssen wir die Datenbank erstellen. Also öffne phpMyadmin und folge diesen Schritten:

  1. Wechseln Sie zur Registerkarte Berechtigungen, klicken Sie auf die Schaltfläche zum Hinzufügen eines neuen Benutzers und verwenden Sie die folgenden Einstellungen: Username: tutorial; Host: localhost; Password: supersecretpassword;. Stellen Sie jetzt sicher, dass die globalen Berechtigungen festgelegt sind; Fahren Sie dann mit dem nächsten Schritt fort.
  2. Erstellen Sie eine neue Datenbank namens Tutorials.
  3. Erstellen Sie eine neue Tabelle mit dem Namen products, und legen Sie die Anzahl der Felder auf 4 fest. Füllen Sie nun diese Felder so aus, dass Sie Folgendes haben: id_integer - stellen Sie sicher, dass es auf INT gesetzt ist und markieren Sie es als PRIMARY (setzen Sie es auch auf auto_increment); name - mach es VARCHAR mit einer Länge von 100; description - VARCHAR mit einer Länge von 250; price - stellen Sie sicher, dass es auf DECIMAL (2,6) eingestellt ist
  4. Füllen Sie Ihre Tabelle mit einigen Beispielprodukten auf

Um etwas Zeit zu sparen, habe ich meine Produkttabelle exportiert, sodass Sie einfach die folgende Abfrage ausführen können:





Schritt 4

Bevor wir zum Extrahieren von Daten aus der Datenbank übergehen, mache ich meine index.php zu einer Vorlage für die Produktliste und den Einkaufswagen. Fügen Sie also den folgenden Code oben auf der Seite index.php hinzu:

  1. session_start() - dies ist für den späteren Gebrauch; Es erlaubt uns, Sitzungen zu benutzen (es ist wichtig, dass der session_start geschrieben wird, bevor irgendwelche anderen Daten an den Browser gesendet werden).
  2. In der zweiten Zeile schließen wir die connection.php ein, die die Verbindung zur Datenbank herstellt (wir werden uns in einer Sekunde damit beschäftigen). Eine weitere Sache: Der Unterschied zwischen include und require besteht darin, dass die Skriptausführung beendet wird, wenn Sie require verwenden und die Datei nicht gefunden werden kann. Wenn Sie "include" verwenden, wird das Skript weiterhin funktionieren.
  3. Anstatt den gesamten HTML-Code (den Link zum css, zum js) für jede Datei in Ihrer Site zu kopieren, könnten Sie sie alle relativ zu einer einzigen Datei machen. Zuerst überprüfe ich, ob es eine GET-Variable namens "page set" gibt. Wenn nicht, erstelle ich eine neue Variable namens _pages. Wenn die GET-Variable namens pages zuerst gesetzt wird, möchte ich sicherstellen, dass es sich bei der Datei, die ich einfügen werde, um eine gültige Seite handelt.

Damit dies funktioniert, müssen wir die Datei einschließen. Fügen Sie diese Zeile der index.php zwischen dem div mit der ID "main" hinzu:

Jetzt ist hier die komplette index.php, die wir jetzt haben:


Lassen Sie uns die Verbindung zu MySQL herstellen. Öffnen Sie connections.php und geben Sie Folgendes ein:


Schritt 5

Jetzt ist es an der Zeit, das Markup für die Produktseite zu schreiben. Also mach weiter und tippe folgendes ein:

Werfen wir einen Blick auf die Seite:


Wie Sie sehen können, ist es ziemlich hässlich. Lassen Sie uns das nun durch Hinzufügen dieses zusätzlichen CSS gestalten.

Okay, lass uns jetzt nochmal schauen:


Sieht viel besser aus, meinst du nicht? Im Folgenden finden Sie den vollständigen style.css-Code:


Schritt 6

Bevor wir das Produkt aus der Datenbank extrahieren, entfernen wir die letzten 2 Tabellenzeilen aus unserer Tabelle (wir haben es nur verwendet, um zu sehen, wie unsere Tabelle aussehen wird). Entferne das:

Groß! Jetzt an der Stelle, wo die Tabellenzeilen waren, geben Sie den folgenden PHP-Code ein:

  1. Also, zuerst verwenden wir SELECT, um die Produkte abzurufen, dann durchlaufen wir jede Zeile aus der Datenbank und geben sie auf die Seite in einer Tabellenzeile zurück.
  2. Sie können sehen, dass der Anker mit derselben Seite verknüpft ist (wenn der Benutzer auf den Anker klickt, das Produkt, das er dem Einkaufswagen / der Sitzung hinzugefügt hat). Wir übergeben nur einige zusätzliche Variablen wie die ID des Produkts.

Wenn Sie einen der Links zum Hinzufügen in den Einkaufswagen anzeigen, sehen Sie unten auf der Seite, dass die ID des Produkts übergeben wurde.



Schritt 7

Lassen Sie uns diesen Anker arbeiten, indem Sie den folgenden Code oben auf unserer Seite hinzufügen:

  1. Wenn die GET-Variable namens action gesetzt ist und ihr Wert ADD ist, führen wir den Code aus.
  2. Wir stellen sicher, dass die ID, die die Variable GET durchlaufen hat, eine ganze Zahl ist
  3. Wenn die ID des Produkts in der Warenkorb-SESSION ist, erhöhen wir einfach die Menge um 1
  4. Wenn die ID nicht in der Sitzung vorhanden ist, müssen wir sicherstellen, dass die ID, die die Variable GET durchlaufen hat, in der Datenbank vorhanden ist. Wenn dies der Fall ist, greifen wir den Preis und erstellen seine Sitzung. Ist dies nicht der Fall, setzen wir eine Variable namens message, die unseren Fehler enthält.

Lassen Sie uns prüfen, ob diese Nachrichtenvariable gesetzt ist und sie auf die Seite zurückgeben (geben Sie diesen Code unter dem H1-Seitentitel ein):

Hier können Sie die komplette products.php Seite sehen.

Hier ist die Fehlermeldung, wenn die ID des Produkts ungültig ist



Schritt 8

Lass uns zur index.php zurückkehren und die Sidebar erstellen. Fügen Sie den folgenden Code hinzu:

  1. Zuerst prüfen wir, ob der Sitzungswagen eingestellt ist. Ist dies nicht der Fall, zeigen wir die Nachricht an und weisen den Benutzer darauf hin, dass der Einkaufswagen leer ist.
  2. Als nächstes machen wir einen mysql SELECT, aber wir wählen nur die Produkte aus, die auch in der Sitzung existieren. Um dies zu erreichen, verwenden wir die foreach-Funktion. Wir durchlaufen also die Sitzung und fügen die Produkt-ID zu SELECT hinzu. Als nächstes verwenden wir die Funktion substr, um das letzte Komma aus SELECT zu entfernen.
  3. Am Ende geben wir die Daten an den Browser aus.

Schauen Sie sich die Bilder an:



Da die index.php eine Vorlage für alle Dateien ist, ist die Seitenleiste auch in der cart.php sichtbar. Ist das nicht cool ?!


Schritt 9

Öffnen Sie schließlich cart.php und geben Sie den folgenden Code ein:

Der Code ist ähnlich dem von index.php und products.php, also werde ich nicht alles nochmal erklären. Sie sollten feststellen, dass die Menge nicht in einem Formular angezeigt wird, sondern jetzt in einem Eingabefeld angezeigt wird (damit wir die Menge ändern können). Auch die Tabelle ist in ein Formular-Tag eingebunden. Um den Gesamtpreis der Artikel zu erhalten, multiplizieren wir die Menge des spezifischen Produkts (aus der Sitzung) mit dem Preis. Dies wird in jeder Schleife durchgeführt.

HINWEIS: Die Eingabe ist ein Array, der Schlüssel ist die ID des Produkts und die Menge ist der Mengenwert.



Schritt 10

Der letzte Schritt, den wir machen müssen, besteht darin, das Formular zum Laufen zu bringen. Fügen Sie diesen Code also oben auf der Seite cart.php hinzu.

  1. Zuerst prüfen wir, ob das Formular gesendet wurde. Wenn es übergeben wurde und der Wert der Eingabe Null war, wird diese Sitzung deaktiviert.
  2. Wenn der Wert ein anderer Wert ist, setzen wir stattdessen die Menge auf diesen Wert.

Hier ist die komplette cart.php


Ich hoffe, dir hat dieses Tutorial gefallen. Wenn Sie irgendwelche Fragen haben, sehen Sie sich unbedingt das ausführliche Video-Tutorial an!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.