Advertisement
  1. Code
  2. PHP

Створюємо кошик на PHP та MySQL

by
Read Time:14 minsLanguages:

Ukrainian (українська мова) translation by Andy Yur (you can also view the original English article)

У цьому щотижневому уроці screencast + ми навчимося створювати власний кошик з PHP і MySQL. Ви побачите, що все не так складно, як здається.


Попередній перегляд скрінкасту



Крок 1

Почнемо з розгляду структури папки:


Структура

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

Крок 2

Почнемо з розмітки html, а потім її оформлення. Відкрийте index.php і скопіюйте / вставте наступний код:

Як ви бачите, наша сторінка має дві колонки: основний стовпець і sidebar. Тепер пройдемо в CSS. Відкрийте файл style.css і пропишіть наступний код:

Ось як повинна зараз виглядати сторінка продуктів:



Повний скрінкаст



Крок 3

Перш ніж перейти до частини PHP / MySQL, нам потрібно створити базу даних. Відкрийте phpMyadmin і виконайте наступні дії:

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

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





Крок 4

До отримання даних з бази даних я зроблю index.php шаблон для списку продуктів і кошики. Тому додайте наступний код в початок сторінки index.php:

  1. session_start () - для подальшого використання; це дозволить нам використовувати сеанси (дуже важливо, щоб session_start був написаний раніше, ніж інші дані будуть відправлені в браузер).
  2. У другому рядку ми вкажемо connection.php, який встановить з'єднання з базою даних (ми розглянемо це в секунду). І ще одне: різниця між include і require полягає в тому, що якщо ви використовуєте require і файл не може бути знайдений, виконання скрипта закінчиться. Якщо ви використовуєте "include", скрипт продовжить працювати.
  3. Замість копіювання всього html-коду (посилання на css, на js) для кожного файлу на вашому сайті, можете просто зробити їх все відносно одного файлу. Спочатку я перевіряю, чи є змінна GET, звана "page set". Якщо немає, я створюю нову змінну _pages. Вказуючи спочатку змінну GET, звану pages, я хочу переконатися, що файл, який я збираюся включити, є допустимою сторінкою.

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

Тепер ми маємо повний index.php:


Створимо з'єднання з MySQL. Відкрийте connections.php і пропишіть наступне:


Крок 5

Пропишемо розмітку для сторінки продуктів. Відкрийте її та пропишіть наступне:

Поглянемо на сторінку:


Як ви бачите, це жахливо. Тому добавимо в файл стилю CSS наступний код: 

Хорошо: тепер ми маємо інакший вигляд:


Виглядає набагато краще, чи не так? Внизу вказаний повний код style.css:


Крок 6

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

Відмінно! Тепер в тому місці, де були рядки таблиці, введіть наступний код PHP:

  1. Отже, спочатку ми використовуємо SELECT для отримання продуктів, потім перебираємо кожен рядок з бази даних і переводимо її на сторінку в рядку таблиці.
  2. Ви бачите, що anchor посилається на ту ж сторінку (коли користувач вибирає продукт, додаючи в кошик / сеанс). Ми передаємо деякі додаткові змінні, такі як id продукту.

Якщо ви вкажете одну з посилань для додавання в корзину, побачите в нижній частині сторінки, що id переданий.



Крок 7

Давайте зробимо anchor роботу, додавши наступний код в початок нашої сторінки:

  1. Якщо змінна GET, звана action, встановлена ​​і її значення дорівнює ADD, ми виконуємо код.
  2. Ми переконуємося, що id, що пройшов через змінну GET, є цілим числом
  3. Якщо id продукту знаходиться в кошику SESSION, ми просто збільшуємо його кількість на 1
  4. Якщо id не перебуває у сеансі, нам потрібно переконатися, що id, що пройшов через змінну GET, існує в базі даних. Якщо так, ми беремо ціну і створюємо сесію. Якщо це не так, ми встановлюємо змінну з ім'ям message, яка буде містити нашу помилку.

Перевіримо, чи встановлена ​​ця змінна повідомлення і викличте її на сторінку (введіть цей код під заголовком сторінки H1):

Тепер ви можете побачити повну сторінку products.php.

Це повідомлення помилки, якщо id продукту недійсний



Крок 8

Повернемося до index.php і пропишемо sidebar. Додайте наступний код:

  1. Спочатку перевіримо, чи встановлений сеанс кошику. Якщо немає, ми виводимо повідомлення, попереджаючи користувача про те, що кошик порожній.
  2. Потім створюємо mysql SELECT, але ми вибираємо тільки ті продукти, які присутні в цьому сеансі. Для цього використовуємо функцію foreach. Отже, ми проходимо цикл і додаємо ідентифікатор продукту в SELECT. Потім ми використовуємо функцію substr для видалення останньої коми з SELECT.
  3. В кінці виводимо дані в браузер.

Подивіться на картинку знизу:



Оскільки index.php є шаблоном для всіх файлів, sidebar також буде видно в cart.php. Хіба це не круто?!


Крок 9

Нарешті, відкрийте cart.php і введіть наступний код:

Він схожий на код з index.php і products.php, тому я не буду пояснювати все знову. Ви помітили, що кількість тепер відображається не в формі, а в поле введення (щоб ми могли змінювати кількість). Крім того, таблиця укладена в form tag. Щоб отримати загальну вартість елементів, ми множимо кількість конкретного продукту (з сеансу) id на його ціну. Це повторюється в кожному циклі.

ПРИМІТКА: input - це масив, key - це id продукту, а quantity - значення кількості.



Крок 10

Нарешті, нам потрібно змусити форму працювати. Тому додайте цей код в початок сторінки cart.php.

  1. Спочатку перевіряємо, чи була надана форма. Якщо була і значення введення дорівнювало нулю, ми скасовуємо цей сеанс.
  2. Якщо було будь-яке інше значення, замість нього ми вказуємо кількість.

Ось повний cart.php


Сподіваюся, урок вам сподобався. Якщо виникнуть запитання, подивіться більш докладний відеоурок!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.