В этом еженедельном уроке screencast + мы научимся создавать собственную корзину покупок с PHP и MySQL. Вы увидите, что всё не так сложно, как кажется.
Предварительный просмотр скринкастов Шаг 1Начнём со структуры папок:
Структура
Начнем с разметки html, а затем её оформления. Откройте index.php и скопируйте/вставьте код:
Shopping cart
Как вы видите, наша страница имеет две колонки: основной столбец и 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; }
Вот как теперь выглядит наша страница продуктов:
Прежде чем перейти к части PHP/MySQL, нам нужно создать базу данных. Откройте phpMyadmin и выполните следующие действия:
Для экономии времени я экспортировал свою таблицу, чтобы вы просто запустили следующий запрос:
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");
До извлечения данных из базы данных я сделаю index.php шаблон для списка продуктов и корзины. Поэтому добавьте следующий код в начало страницы index.php :
Для этого нам нужно включить файл; добавьте эту строку в index.php между div с id "main":
Теперь у нас полный index.php :
Shopping Cart
Давайте создадим соединение с MySQL. Откройте connections.php и пропишите следующее:
Шаг 5
Пропишем разметку для страницы продуктов. Откройте её и введите следующее:
Product List
Product 1 | Some random description | 15 $ | Add to cart |
Product 2 | Some random description | 25 $ | Add to cart |
Давайте посмотрим на страницу:
Как видите, это довольно уродливо. Давайте добавим этот 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Прежде чем извлечь продукт из базы данных, давайте удалим последние две строки из нашей таблицы (были нужны только для того, чтобы увидеть, как она будет выглядеть). Удалить это:
Отлично! Теперь в том месте, где были строки таблицы, введите следующий код PHP:
x
Go to cartПосмотрите на картинку снизу:
Поскольку index.php является шаблоном для всех файлов, sidebar также будет виден в cart.php . Разве это не круто?!
Шаг 9Наконец, откройте cart.php и введите код:
View cart Go back to products page