В этом уроке «Скринкаст +» на этой неделе мы научим вас, как создать собственную корзину для покупок с помощью PHP и MySQL. Как вы обнаружите, это не так сложно, как вы могли подумать.
Премиум Варианты
Если вы ищете быстрое, готовое решение, на Envato Market вы можете выбрать более 50 сценариев корзины покупок PHP . Вот быстрый взгляд на некоторые из них.
1. LivelyCart — JQuery PHP Store / Магазин
Это простая в использовании, настраиваемая корзина покупок на основе PHP / MySQL. Он оснащен двумя вариантами оплаты через PayPal и Отправить заказ по электронной почте . Вы можете использовать оба или один.
2. Универсальный цифровой магазин
Universal Digital Shop — это мощный скрипт, который позволяет продавать цифровые продукты прямо на вашем сайте. Он обрабатывает платежи через несколько платежных шлюзов (PayPal, Payza / AlertPay, Skrill / Moneybookers, Authorize.Net, InterKassa, EgoPay, Perfect Money, BitPay, Blockchain.info и Stripe) и может быть легко интегрирован в любую веб-страницу.
С этим виджетом вам не нужно устанавливать сложные корзины покупок и создавать их дизайн в соответствии с вашим сайтом. Universal Digital Shop — это самый простой способ распространения цифровых продуктов и монетизации сайта.
3. Терминал оплаты Stripe
Этот скрипт позволяет вам иметь быстрый и простой терминал для оплаты кредитной картой для ваших клиентов, обрабатываемый stripe.com.
Установка и настройка скрипта занимает не более 5 минут (однако вам необходимо иметь SSL и учетную запись stripe.com).
4. Корзина AJAX для сайтов HTML с заказами и счетами
Symbiotic — AJAX Cart — это мощная система, которая может быть интегрирована в новые / старые HTML-сайты для расширения их функциональности в качестве корзины. Вам не нужно использовать OpenCart или любую другую корзину для вашего сайта электронной коммерции. Вы можете создать свой собственный сайт электронной коммерции за несколько минут, используя эту систему корзины.
5. Наймите эксперта в Envato Studio
Используете ли вы конкретную CMS, такую как WordPress или Magento, или просто хотите создать сайт электронной коммерции с корзиной для покупок, созданной с нуля, в Envato Studio есть множество опытных разработчиков, которые помогут вам по разумной цене. Так что, если вы застряли, отправляйтесь туда за помощью, которая вам нужна.
Это лишь небольшая подборка корзин для покупок на PHP, доступных на Envato Market. Если эти варианты не решают вашу проблему или вы предпочитаете делать это самостоятельно, давайте перейдем к процессу создания вашей собственной корзины покупок с помощью PHP и MySQL.
Предварительный просмотр экрана
Шаг 1
Давайте начнем с рассмотрения структуры папок:
Структура
- reset.css — сброс можно получить по этой ссылке
- style.css — наш собственный CSS-файл, который мы будем использовать для стилизации нашей HTML-разметки
- connection.php — файл, который сделает соединение с нашей базой данных
- index.php — шаблон для нашей корзины
- cart.php — файл, в котором можно будет поменять наши товары из корзины (добавить, удалить)
- products.php — страница со списком товаров
Шаг 2
Мы начнем с написания HTML-разметки, а затем стилизуем ее. Так что откройте index.php и скопируйте / вставьте код ниже:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!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>
|
Как видите, наша страница имеет два столбца: основной столбец и боковую панель. Давайте перейдем к CSS. Откройте файл style.css и введите следующий код:
|
1
2
|
body { font-family: Verdana;
|
Вот как должна выглядеть страница нашей продукции:
Полный скринкаст
Шаг 3
Прежде чем мы перейдем к части PHP / MySQL, нам нужно создать базу данных. Так что откройте phpMyadmin и выполните следующие действия:
- Перейдите на вкладку « Права », нажмите кнопку «Добавить нового пользователя» и используйте следующие настройки: Имя пользователя : учебник; Host : localhost; Пароль : суперсекретный пароль ;. Теперь убедитесь, что глобальные привилегии установлены; затем перейдите к следующему шагу.
- Создайте новую базу данных под названием учебники .
- Создайте новую таблицу с именем products и установите количество полей равным 4. Теперь заполните эти поля, чтобы у вас было: id_integer — убедитесь, что для него установлено значение INT, и пометьте его как PRIMARY (также установите для него значение auto_increment); name — сделать его VARCHAR длиной 100; описание — VARCHAR длиной 250; цена — убедитесь, что она установлена в DECIMAL (2,6)
- Наполните свой стол некоторыми примерами продуктов
Чтобы сэкономить время, я экспортировал свою таблицу продуктов, чтобы вы могли просто выполнить следующий запрос:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
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 :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<?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 с именем «набор страниц». Если это не так, я создаю новую переменную с именем _pages . Если сначала задается переменная GET с именем pages, я хочу убедиться, что файл, который я собираюсь включить, является допустимой страницей.
Чтобы это работало, нам нужно включить файл; добавьте эту строку в index.php между div с идентификатором «main»:
|
1
|
<?php require($_page.».php»);
|
Теперь вот полный index.php, который мы имеем сейчас:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<?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 и введите следующее:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
<?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
Теперь пришло время написать разметку для страницы продуктов. Итак, откройте его и введите следующее:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
<h1>Product List</h1>
<table>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th>Action</th>
</tr>
<tr>
<td>Product 1</td>
<td>Some random description</td>
<td>15 $</th>
<td><a href=»#»>Add to cart</a></td>
</tr>
<tr>
<td>Product 2</td>
<td>Some random description</td>
<td>25 $</th>
<td><a href=»#»>Add to cart</a></td>
</tr>
</table>
|
Давайте посмотрим на страницу:
Как видите, это довольно некрасиво. Итак, давайте добавим этот CSS-стиль.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
a {color: #48577D;
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;
}
|
Хорошо, давайте посмотрим еще раз:
Выглядит намного лучше, тебе не кажется? Ниже у вас есть полный код style.css :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
body {
font-family: Verdana;
font-size: 12px;
color: #444;
}
a {color: #48577D;
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
Прежде чем извлечь продукт из базы данных, давайте удалим последние 2 строки таблицы из нашей таблицы (мы использовали ее только для того, чтобы посмотреть, как будет выглядеть наша таблица). Удали это:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<tr>
<td>Product 1</td>
<td>Some random description</td>
<td>15 $</th>
<td><a href=»#»>Add to cart</a></td>
</tr>
<tr>
<td>Product 2</td>
<td>Some random description</td>
<td>25 $</th>
<td><a href=»#»>Add to cart</a></td>
</tr>
|
Большой! Теперь там, где были строки таблицы, введите следующий код PHP:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<?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 для извлечения продуктов, затем зацикливаем каждую строку из базы данных и выводим ее на страницу в строке таблицы.
- Вы можете видеть, что привязка ссылается на одну и ту же страницу (когда пользователь щелкает привязку, продукт, который он добавил в корзину / сеанс). Мы просто передаем некоторые дополнительные переменные, такие как идентификатор продукта.
Если вы наведите указатель мыши на одну из ссылок «Добавить в корзину», в нижней части страницы вы увидите, что передан идентификатор продукта.
Шаг 7
Давайте сделаем этот якорь работоспособным, добавив следующий код вверху нашей страницы:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<?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, мы выполняем код.
- Мы уверены, что идентификатор, передаваемый через переменную GET, является целым числом
- Если идентификатор продукта находится в корзине СЕССИИ, мы просто увеличиваем его количество на 1
- Если идентификатор не находится в сеансе, мы должны убедиться, что идентификатор, переданный через переменную GET, существует в базе данных. Если это так, мы берем цену и создаем ее сессию. Если это не так, мы устанавливаем переменную с именем message, которая будет содержать нашу ошибку.
Давайте проверим, установлена ли эта переменная сообщения, и отобразим ее на странице (введите этот код под заголовком страницы H1):
|
1
2
3
4
5
|
<?php
if(isset($message)){
echo «<h2>$message</h2>»;
}
?>
|
Здесь вы можете увидеть полную страницу products.php .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<?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>
|
Вот сообщение об ошибке, если идентификатор продукта является недействительным
Шаг 8
Давайте вернемся к index.php и создадим боковую панель. Добавьте следующий код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<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 является шаблоном для всех файлов, боковая панель будет видна и в файле cart.php . Разве это не круто ?!
Шаг 9
Наконец, откройте cart.php и начните с ввода следующего кода:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<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, поэтому я не буду все объяснять снова. Вы должны заметить, что вместо отображения количества в форме, теперь оно отображается в поле ввода (чтобы мы могли изменить количество). Также таблица оборачивается тегом формы. Чтобы получить общую стоимость товаров, мы умножаем количество идентификатора конкретного продукта (из сеанса) на его цену. Это делается в каждом цикле.
ПРИМЕЧАНИЕ . Входные данные — это массив, ключ — это идентификатор продукта, а количество — это величина количества.
Шаг 10
Последний шаг, который нам нужно сделать, — заставить форму работать. Поэтому добавьте этот код в начало страницы cart.php.
|
01
02
03
04
05
06
07
08
09
10
11
|
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
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<?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>
|
Я надеюсь, вам понравился этот урок. Если у вас есть какие-либо вопросы, обязательно посмотрите более подробный видеоурок!