Erstellen Sie einen Einkaufswagen mit PHP und MySQL

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:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
   
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<link rel="stylesheet" href="css/reset.css" /> 
	<link rel="stylesheet" href="css/style.css" /> 
	 
	<title>Shopping cart</title> 
 
</head> 
 
<body> 
	 
	<div id="container"> 
 
		<div id="main"> 
			 
		</div><!--end main--> 
		 
		<div id="sidebar"> 
			 
		</div><!--end sidebar--> 
 
	</div><!--end container--> 
 
</body> 
</html>

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:

 
	 
body { 
	font-family: Verdana; 
	font-size: 12px; 
	color: #444; 
} 
 
 
#container { 
	width: 700px; 
	margin: 150px auto; 
	background-color: #eee; 
	overflow: hidden; /* Set overflow: hidden to clear the floats on #main and #sidebar */ 
	padding: 15px; 
} 
 
	#main { 
		width: 490px; 
		float: left; 
	} 
 
	#sidebar { 
		width: 200px; 
		float: left; 
	}

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:

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.
Erstellen Sie eine neue Datenbank namens Tutorials.
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
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:

 
CREATE TABLE IF NOT EXISTS `products` ( 
  `id_product` int(11) NOT NULL AUTO_INCREMENT, 
  `name` varchar(100) NOT NULL, 
  `description` varchar(250) NOT NULL, 
  `price` decimal(6,2) NOT NULL, 
  PRIMARY KEY (`id_product`) 
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ; 
 
INSERT INTO `products` (`id_product`, `name`, `description`, `price`) VALUES 
(1, 'Product 1', 'Some random description', '15.00'), 
(2, 'Product 2', 'Some random description', '20.00'), 
(3, 'Product 3', 'Some random description', '50.00'), 
(4, 'Product 4', 'Some random description', '55.00'), 
(5, 'Product 5', 'Some random description', '54.00'), 
(6, 'Product 6', 'Some random description', '34.00');

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:

 
<?php 
	session_start(); 
	require("includes/connection.php"); 
	if(isset($_GET['page'])){ 
		 
		$pages=array("products", "cart"); 
		 
		if(in_array($_GET['page'], $pages)) { 
			 
			$_page=$_GET['page']; 
			 
		}else{ 
			 
			$_page="products"; 
			 
		} 
		 
	}else{ 
		 
		$_page="products"; 
		 
	} 
?>

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).
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.
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:

1
2	<?php require($_page.".php"); ?>

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

 
	<?php 
	session_start(); 
	require("includes/connection.php"); 
	if(isset($_GET['page'])){ 
		 
		$pages=array("products", "cart"); 
		 
		if(in_array($_GET['page'], $pages)) { 
			 
			$_page=$_GET['page']; 
			 
		}else{ 
			 
			$_page="products"; 
			 
		} 
		 
	}else{ 
		 
		$_page="products"; 
		 
	} 
 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
	 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<link rel="stylesheet" href="css/reset.css" /> 
	<link rel="stylesheet" href="css/style.css" /> 
	 
 
	<title>Shopping Cart</title> 
 
 
</head> 
 
<body> 
	 
	<div id="container"> 
 
		<div id="main"> 
			 
			<?php require($_page.".php"); ?> 
 
		</div><!--end of main--> 
		 
		<div id="sidebar"> 
			 
		</div><!--end of sidebar--> 
 
	</div><!--end container--> 
 
</body> 
</html>

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

 
	<?php 
 
	$server="localhost"; 
	$user="tutorial"; 
	$pass="supersecretpassword"; 
	$db="tutorials"; 
	 
	// connect to mysql 
	 
	mysql_connect($server, $user, $pass) or die("Sorry, can't connect to the mysql."); 
	 
	// select the db 
	 
	mysql_select_db($db) or die("Sorry, can't select the database."); 
 
?>

Schritt 5

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

1
2	<h1>Product List</h1>
3	<table>
4	<tr>
5	<th>Name</th>
6	<th>Description</th>
7	<th>Price</th>
8	<th>Action</th>
9	</tr>
10	<tr>
11	<td>Product 1</td>
12	<td>Some random description</td>
13	<td>15 $</th>
14	<td><a href="#">Add to cart</a></td>
15	</tr>
16	<tr>
17	<td>Product 2</td>
18	<td>Some random description</td>
19	<td>25 $</th>
20	<td><a href="#">Add to cart</a></td>
21	</tr>
22	</table>

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.

 
a {color: #48577D; text-decoration: none;} 
 
a:hover {text-decoration: underline;} 
 
h1, h2 {margin-bottom: 15px} 
 
h1 {font-size: 18px;} 
h2 {font-size: 16px} 
	#main table { 
			width: 480px; 
		} 
		 
			#main table th { 
				padding: 10px; 
				background-color: #48577D; 
				color: #fff; 
				text-align: left; 
			} 
			 
			#main table td { 
				padding: 5px; 
			} 
			#main table tr { 
				background-color: #d3dcf2; 
			}

Okay, lass uns jetzt nochmal schauen:

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

 
body { 
	font-family: Verdana; 
	font-size: 12px; 
	color: #444; 
} 
 
a {color: #48577D; text-decoration: none;} 
 
a:hover {text-decoration: underline;} 
 
h1, h2 {margin-bottom: 15px} 
 
h1 {font-size: 18px;} 
h2 {font-size: 16px} 
 
#container { 
	width: 700px; 
	margin: 150px auto; 
	background-color: #eee; 
	padding:15px; 
	overflow: hidden; 
} 
 
	#main { 
		width: 490px; 
		float: left; 
	} 
	 
		#main table { 
			width: 480px; 
		} 
		 
			#main table th { 
				padding: 10px; 
				background-color: #48577D; 
				color: #fff; 
				text-align: left; 
			} 
			 
			#main table td { 
				padding: 5px; 
			} 
			 
			#main table tr { 
				background-color: #d3dcf2; 
			} 
	 
	#sidebar { 
		width: 200px; 
		float: left; 
	}

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:

1
2	<tr>
3	<td>Product 1</td>
4	<td>Some random description</td>
5	<td>15 $</th>
6	<td><a href="#">Add to cart</a></td>
7	</tr>
8	<tr>
9	<td>Product 2</td>
10	<td>Some random description</td>
11	<td>25 $</th>
12	<td><a href="#">Add to cart</a></td>
13	</tr>

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

 
	<?php 
 
	$sql="SELECT * FROM products ORDER BY name ASC"; 
	$query=mysql_query($sql); 
	 
	while ($row=mysql_fetch_array($query)) { 
		 
?> 
		<tr> 
		    <td><?php echo $row['name'] ?></td> 
		    <td><?php echo $row['description'] ?></td> 
		    <td><?php echo $row['price'] ?>$</td> 
		    <td><a href="index.php?page=products&action=add&id=<?php echo $row['id_product'] ?>">Add to cart</a></td> 
		</tr> 
<?php 
		 
	} 
 
?>

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.
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:

 
<?php 
 
	if(isset($_GET['action']) && $_GET['action']=="add"){ 
		 
		$id=intval($_GET['id']); 
		 
		if(isset($_SESSION['cart'][$id])){ 
			 
			$_SESSION['cart'][$id]['quantity']++; 
			 
		}else{ 
			 
			$sql_s="SELECT * FROM products 
				WHERE id_product={$id}"; 
			$query_s=mysql_query($sql_s); 
			if(mysql_num_rows($query_s)!=0){ 
				$row_s=mysql_fetch_array($query_s); 
				 
				$_SESSION['cart'][$row_s['id_product']]=array( 
						"quantity" => 1, 
						"price" => $row_s['price'] 
					); 
				 
				 
			}else{ 
				 
				$message="This product id it's invalid!"; 
				 
			} 
			 
		} 
		 
	} 
 
?>

Wenn die GET-Variable namens action gesetzt ist und ihr Wert ADD ist, führen wir den Code aus.
Wir stellen sicher, dass die ID, die die Variable GET durchlaufen hat, eine ganze Zahl ist
Wenn die ID des Produkts in der Warenkorb-SESSION ist, erhöhen wir einfach die Menge um 1
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):

 
		<?php 
		if(isset($message)){ 
			echo "<h2>$message</h2>"; 
		} 
	?>

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

 
<?php 
 
	if(isset($_GET['action']) && $_GET['action']=="add"){ 
		 
		$id=intval($_GET['id']); 
		 
		if(isset($_SESSION['cart'][$id])){ 
			 
			$_SESSION['cart'][$id]['quantity']++; 
			 
		}else{ 
			 
			$sql_s="SELECT * FROM products 
				WHERE id_product={$id}"; 
			$query_s=mysql_query($sql_s); 
			if(mysql_num_rows($query_s)!=0){ 
				$row_s=mysql_fetch_array($query_s); 
				 
				$_SESSION['cart'][$row_s['id_product']]=array( 
						"quantity" => 1, 
						"price" => $row_s['price'] 
					); 
				 
				 
			}else{ 
				 
				$message="This product id it's invalid!"; 
				 
			} 
			 
		} 
		 
	} 
 
?> 
	<h1>Product List</h1> 
	<?php 
		if(isset($message)){ 
			echo "<h2>$message</h2>"; 
		} 
	?> 
	<table> 
		<tr> 
			<th>Name</th> 
			<th>Description</th> 
			<th>Price</th> 
			<th>Action</th> 
		</tr> 
		 
		<?php 
		 
			$sql="SELECT * FROM products ORDER BY name ASC"; 
			$query=mysql_query($sql); 
			 
			while ($row=mysql_fetch_array($query)) { 
				 
		?> 
			<tr> 
			    <td><?php echo $row['name'] ?></td> 
			    <td><?php echo $row['description'] ?></td> 
			    <td><?php echo $row['price'] ?>$</td> 
			    <td><a href="index.php?page=products&action=add&id=<?php echo $row['id_product'] ?>">Add to cart</a></td> 
			</tr> 
		<?php 
				 
			} 
		 
		?> 
		 
	</table>

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:

 
	<h1>Cart</h1> 
	<?php 
	 
		if(isset($_SESSION['cart'])){ 
			 
			$sql="SELECT * FROM products WHERE id_product IN ("; 
			 
			foreach($_SESSION['cart'] as $id => $value) { 
				$sql.=$id.","; 
			} 
			 
			$sql=substr($sql, 0, -1).") ORDER BY name ASC"; 
			$query=mysql_query($sql); 
			while($row=mysql_fetch_array($query)){ 
				 
			?> 
				<p><?php echo $row['name'] ?> x <?php echo $_SESSION['cart'][$row['id_product']]['quantity'] ?></p> 
			<?php 
				 
			} 
		?> 
			<hr /> 
			<a href="index.php?page=cart">Go to cart</a> 
		<?php 
			 
		}else{ 
			 
			echo "<p>Your Cart is empty. Please add some products.</p>"; 
			 
		} 
	 
	?>

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.
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.
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:

 
<h1>View cart</h1> 
<a href="index.php?page=products">Go back to products page</a> 
<form method="post" action="index.php?page=cart"> 
     
	<table> 
	     
		<tr> 
		    <th>Name</th> 
		    <th>Quantity</th> 
		    <th>Price</th> 
		    <th>Items Price</th> 
		</tr> 
		 
		<?php 
		 
			$sql="SELECT * FROM products WHERE id_product IN ("; 
					 
					foreach($_SESSION['cart'] as $id => $value) { 
						$sql.=$id.","; 
					} 
					 
					$sql=substr($sql, 0, -1).") ORDER BY name ASC"; 
					$query=mysql_query($sql); 
					$totalprice=0; 
					while($row=mysql_fetch_array($query)){ 
						$subtotal=$_SESSION['cart'][$row['id_product']]['quantity']*$row['price']; 
						$totalprice+=$subtotal; 
					?> 
						<tr> 
						    <td><?php echo $row['name'] ?></td> 
						    <td><input type="text" name="quantity[<?php echo $row['id_product'] ?>]" size="5" value="<?php echo $_SESSION['cart'][$row['id_product']]['quantity'] ?>" /></td> 
						    <td><?php echo $row['price'] ?>$</td> 
						    <td><?php echo $_SESSION['cart'][$row['id_product']]['quantity']*$row['price'] ?>$</td> 
						</tr> 
					<?php 
						 
					} 
		?> 
					<tr> 
					    <td colspan="4">Total Price: <?php echo $totalprice ?></td> 
					</tr> 
		 
	</table> 
	<br /> 
	<button type="submit" name="submit">Update Cart</button> 
</form> 
<br /> 
<p>To remove an item, set it's quantity to 0. </p>

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.

 
if(isset($_POST['submit'])){ 
 
foreach($_POST['quantity'] as $key => $val) { 
	if($val==0) { 
		unset($_SESSION['cart'][$key]); 
	}else{ 
		$_SESSION['cart'][$key]['quantity']=$val; 
	} 
} 
 
}

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

Hier ist die komplette cart.php

 
	<?php 
 
	if(isset($_POST['submit'])){ 
		 
		foreach($_POST['quantity'] as $key => $val) { 
			if($val==0) { 
				unset($_SESSION['cart'][$key]); 
			}else{ 
				$_SESSION['cart'][$key]['quantity']=$val; 
			} 
		} 
		 
	} 
 
?> 
 
<h1>View cart</h1> 
<a href="index.php?page=products">Go back to the products page.</a> 
<form method="post" action="index.php?page=cart"> 
     
	<table> 
	     
		<tr> 
		    <th>Name</th> 
		    <th>Quantity</th> 
		    <th>Price</th> 
		    <th>Items Price</th> 
		</tr> 
		 
		<?php 
		 
			$sql="SELECT * FROM products WHERE id_product IN ("; 
					 
					foreach($_SESSION['cart'] as $id => $value) { 
						$sql.=$id.","; 
					} 
					 
					$sql=substr($sql, 0, -1).") ORDER BY name ASC"; 
					$query=mysql_query($sql); 
					$totalprice=0; 
					while($row=mysql_fetch_array($query)){ 
						$subtotal=$_SESSION['cart'][$row['id_product']]['quantity']*$row['price']; 
						$totalprice+=$subtotal; 
					?> 
						<tr> 
						    <td><?php echo $row['name'] ?></td> 
						    <td><input type="text" name="quantity[<?php echo $row['id_product'] ?>]" size="5" value="<?php echo $_SESSION['cart'][$row['id_product']]['quantity'] ?>" /></td> 
						    <td><?php echo $row['price'] ?>$</td> 
						    <td><?php echo $_SESSION['cart'][$row['id_product']]['quantity']*$row['price'] ?>$</td> 
						</tr> 
					<?php 
						 
					} 
		?> 
					<tr> 
					    <td colspan="4">Total Price: <?php echo $totalprice ?></td> 
					</tr> 
		 
	</table> 
	<br /> 
	<button type="submit" name="submit">Update Cart</button> 
</form> 
<br /> 
<p>To remove an item set its quantity to 0. </p>

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