У цьому щотижневому уроці screencast + ми навчимося створювати власну кошик з PHP і MySQL. Ви побачите, що все не так складно, як здається.
Почнемо зі структури папок:
- reset.css - ви можете отримати за this посиланням
- style.css - наш css файл для стилю HTML макета
- connection.php - файл для з'єднання з базою даних
- index.php - шаблон кошика покупок
- cart.php - файл, який змінює продукти в кошику (додавати, видаляти)
- products.php - сторінка списку продуктів
Почнемо з розмітки html, а потім її оформлення. Відкрийте index.php і скопіюйте / вставте код:
Як ви бачите, наша сторінка має дві колонки: основний стовпець і sidebar. Тепер пройдемо в CSS. Відкрийте файл style.css і пропишіть код:
Ось як тепер виглядає наша сторінка продуктів:
повний скрінкасти
Перш ніж перейти до частини 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)
- Заповніть таблицю декількома прикладами продуктів.
Для економії часу я експортував свою таблицю, щоб ви просто запустили наступний запит:
До отримання даних з бази даних я зроблю index.php шаблон для списку продуктів і кошики. Тому додайте наступний код в початок сторінки index.php.
Для цього нам потрібно включити файл; додайте цей рядок в index.php між div з id "main":
Тепер у нас повний index.php.
Давайте створимо з'єднання з MySQL. Відкрийте connections.php і пропишіть наступне:
Пропишемо розмітку для сторінки продуктів. Відкрийте її і введіть наступне:
Давайте подивимося на сторінку:
Як бачите, це досить потворно. Давайте додамо цей CSS.
Okay: інша справа:
Виглядає набагато краще, чи не так? Внизу вказаний повний код style.css.
Перш ніж отримати продукт з бази даних, давайте видалимо останні два рядки з нашої таблиці (були потрібні тільки для того, щоб побачити, як вона буде виглядати). Видалити це:
Відмінно! Тепер в тому місці, де були рядки таблиці, введіть наступний код PHP:
- Отже, спочатку ми використовуємо SELECT для отримання продуктів, потім перебираємо кожен рядок з бази даних і переводимо її на сторінку в рядку таблиці.
- Ви бачите, що anchor посилається на ту ж сторінку (коли користувач вибирає продукт, додаючи в кошик / сеанс). Ми передаємо деякі додаткові змінні, такі як id продукту.
Якщо ви вкажете одну з посилань для додавання в корзину, побачите в нижній частині сторінки, що id переданий.
Давайте зробимо anchor роботу, додавши наступний код в початок нашої сторінки:
- Якщо змінна GET, звана action, встановлена і її значення дорівнює ADD, ми виконуємо код.
- Ми переконуємося, що id, що пройшов через змінну GET, є цілим числом
- Якщо id продукту знаходиться в кошику SESSION, ми просто збільшуємо його кількість на 1
- Якщо id не перебуває у сеансі, нам потрібно переконатися, що id, що пройшов через змінну GET, існує в базі даних. Якщо так, ми беремо ціну і створюємо сесію. Якщо це не так, ми встановлюємо змінну з ім'ям message, яка буде містити нашу помилку.
Перевіримо, чи встановлена ця змінна повідомлення і викличте її на сторінку (введіть цей код під заголовком сторінки H1):
Ось повна сторінка products.php.
Ось повідомлення про помилку, якщо id недійсний
Повернемося до index.php і пропишемо sidebar. Додайте наступний код:
- Спочатку перевіримо, чи встановлений сеанс кошики. Якщо немає, ми виводимо повідомлення, попереджаючи користувача про те, що кошик порожній.
- Потім створюємо mysql SELECT, але ми вибираємо тільки ті продукти, які присутні в цьому сеансі. Для цього використовуємо функцію foreach. Отже, ми проходимо цикл і додаємо ідентифікатор продукту в SELECT. Потім ми використовуємо функцію substr для видалення останньої коми з SELECT.
- В кінці виводимо дані в браузер.
Подивіться на картинку знизу:
Оскільки index.php є шаблоном для всіх файлів, sidebar також буде видно в cart.php. Хіба це не круто.
Нарешті, відкрийте cart.php і введіть код:
Він схожий на код з index.php і products.php, тому я не буду пояснювати все знову. Ви помітили, що кількість тепер відображається не в формі, а в поле введення (щоб ми могли змінювати кількість). Крім того, таблиця укладена в form tag. Щоб отримати загальну вартість елементів, ми множимо кількість конкретного продукту (з сеансу) id на його ціну. Це повторюється в кожному циклі.
ПРИМІТКА: input - це масив, key - це id продукту, а quantity - значення кількості.
Нарешті, нам потрібно змусити форму працювати. Тому додайте цей код в початок сторінки cart.php.
- Спочатку перевіряємо, чи була надана форма. Якщо була і значення введення дорівнювало нулю, ми скасовуємо цей сеанс.
- Якщо було будь-яке інше значення, замість нього ми вказуємо кількість.
Ось заповнений cart.php
