Создайте корзину с PHP и MySQL

() translation by (you can also view the original English article)

В этом еженедельном уроке screencast + мы научимся создавать собственную корзину покупок с PHP и MySQL. Вы увидите, что всё не так сложно, как кажется.

Предварительный просмотр скринкастов

Шаг 1

Начнём со структуры папок:

Структура

reset.css - вы можете получить по this ссылке
style.css - наш css файл для стиля HTML макета
connection.php - файл для соединения с базой данных
index.php - шаблон корзины покупок
cart.php - файл, который меняет продукты в корзине (добавлять, удалять)
products.php - страница списка продуктов

Шаг 2

Начнем с разметки html, а затем её оформления. Откройте index.php и скопируйте/вставьте код:

 
<!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>

Как вы видите, наша страница имеет две колонки: основной столбец и sidebar. Теперь пройдём в CSS. Откройте файл style.css и пропишите код:

 
	 
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; 
	}

Вот как теперь выглядит наша страница продуктов:

Полный скринкаст

Шаг 3

Прежде чем перейти к части PHP/MySQL, нам нужно создать базу данных. Откройте phpMyadmin и выполните следующие действия:

Перейдите на вкладку Privileges, нажмите кнопку добавления нового пользователя и настройте: Username: tutorial; Host: localhost; Password: supersecretpassword. Теперь убедитесь, что установлены Global privileges; затем переходите к следующему шагу.
Создайте новую базу данных под названием tutorials.
Создайте новую таблицу products и установите количество полей 4. Теперь заполните эти поля так: id_integer - убедитесь, что он установлен в INT и пометьте его как PRIMARY (также установите его в auto_increment); name - будет VARCHAR длиной 100; description - VARCHAR длиной 250; price - значение DECIMAL (2,6)
Заполните таблицу несколькими примерами продуктов.

Для экономии времени я экспортировал свою таблицу, чтобы вы просто запустили следующий запрос:

 
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');

Шаг 4

До извлечения данных из базы данных я сделаю index.php шаблон для списка продуктов и корзины. Поэтому добавьте следующий код в начало страницы index.php:

 
<?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() - для дальнейшего использования; это позволит нам использовать сеансы (очень важно, чтобы session_start был написан прежде, чем другие данные будут отправлены в браузер).
Во второй строке мы укажем connection.php, который установит соединение с базой данных (мы рассмотрим это в секунду). И ещё одно: разница между include и require заключается в том, что если вы используете require и файл не может быть найден, выполнение скрипта закончится. Если вы используете "include", скрипт продолжит работать.
Вместо копирования всего html-кода (ссылка на css, на js) для каждого файла на вашем сайте, можете просто сделать их все относительно одного файла. Сначала я проверяю, есть ли переменная GET, называемая "page set". Если нет, я создаю новую переменную _pages. Указывая сначала переменную GET, называемую pages, я хочу убедиться, что файл, который я собираюсь включить, является допустимой страницей.

Для этого нам нужно включить файл; добавьте эту строку в index.php между div с id "main":

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

Теперь у нас полный index.php:

 
	<?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>

Давайте создадим соединение с MySQL. Откройте connections.php и пропишите следующее:

 
	<?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."); 
 
?>

Шаг 5

Пропишем разметку для страницы продуктов. Откройте её и введите следующее:

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>

Давайте посмотрим на страницу:

Как видите, это довольно уродливо. Давайте добавим этот CSS.

 
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: другое дело:

Выглядит намного лучше, не так ли? Внизу указан полный код style.css:

 
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; 
	}

Шаг 6

Прежде чем извлечь продукт из базы данных, давайте удалим последние две строки из нашей таблицы (были нужны только для того, чтобы увидеть, как она будет выглядеть). Удалить это:

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>

Отлично! Теперь в том месте, где были строки таблицы, введите следующий код PHP:

 
	<?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 
		 
	} 
 
?>

Итак, сначала мы используем SELECT для извлечения продуктов, затем перебираем каждую строку из базы данных и переводим её на страницу в строке таблицы.
Вы видите, что anchor ссылается на ту же страницу (когда пользователь выбирает продукт, добавляя в корзину/сеанс). Мы передаём некоторые дополнительные переменные, такие как id продукта.

Если вы укажете одну из ссылок для добавления в корзину, увидите в нижней части страницы, что id передан.

Шаг 7

Давайте сделаем anchor работу, добавив следующий код в начало нашей страницы:

 
<?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!"; 
				 
			} 
			 
		} 
		 
	} 
 
?>

Если переменная GET, называемая action, установлена и её значение равно ADD, мы выполняем код.
Мы удостоверяемся, что id, прошедший через переменную GET, является целым числом
Если id продукта находится в корзине SESSION, мы просто увеличиваем его количество на 1
Если id не находится в сеансе, нам нужно убедиться, что id, прошедший через переменную GET, существует в базе данных. Если да, мы берем цену и создаём сессию. Если это не так, мы устанавливаем переменную с именем message, которая будет содержать нашу ошибку.

Проверим, установлена ли эта переменная сообщения и вызовите её на страницу (введите этот код под заголовком страницы H1):

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

Вот полная страница products.php.

 
<?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>

Вот сообщение об ошибке, если id недействителен

Шаг 8

Вернёмся к index.php и пропишем sidebar. Добавьте следующий код:

 
	<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>"; 
			 
		} 
	 
	?>

Сначала проверим, установлен ли сеанс корзины. Если нет, мы выводим сообщение, предупреждая пользователя о том, что корзина пуста.
Затем создаём mysql SELECT, но мы выбираем только те продукты, которые присутствуют в этом сеансе. Для этого используем функцию foreach. Итак, мы проходим цикл и добавляем идентификатор продукта в SELECT. Затем мы используем функцию substr для удаления последней запятой из SELECT.
В конце выводим данные в браузер.

Посмотрите на картинку снизу:

Поскольку index.php является шаблоном для всех файлов, sidebar также будет виден в cart.php. Разве это не круто ?!

Шаг 9

Наконец, откройте cart.php и введите код:

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

Он похож на код из index.php и products.php, поэтому я не буду объяснять всё снова. Вы заметили, что количество теперь отображается не в форме, а в поле ввода (чтобы мы могли изменять количество). Кроме того, таблица заключена в form tag. Чтобы получить общую стоимость элементов, мы умножаем количество конкретного продукта (из сеанса) id на его цену. Это повторяется в каждом цикле.

ПРИМЕЧАНИЕ: input - это массив, key - это id продукта, а quantity - значение количества.

Шаг 10

Наконец, нам нужно заставить форму работать. Поэтому добавьте этот код в начало страницы cart.php.

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

Сначала проверяем, была ли предоставлена форма. Если была и значение ввода было равно нулю, мы отменяем этот сеанс.
Если было любое другое значение, вместо него мы указываем количество.

Вот заполненный 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>

Надеюсь, урок вам понравился. Если появятся вопросы, посмотрите более подробный видеоурок!