Делаем корзину покупок с помощью Codeigniter и JQuery. Часть 1.

Добавить комментарий
Никита Киселев

Codeigniter это мощный и легкий php фреймворк с низким порогом вхождения, сделанный специально для WEB разработчиков, которые хотят писать четкий и красивый код.

Введение

Для написания этой статьи я использовал последнюю версию Codeigniter – 2.1.4 и JQuery версии 2.1.0.

Основные моменты перед началом работы:

Я использовал самую последнюю на момент написания статьи jQuery версии 2.1.0. Эта версия не поддерживает Internet Explorer 6,7,8. Ссылка на официальный сайт.

Хоть эта статья и для новичков, всё же подразумевается, что читатель уже имеет некоторые представления и познания в Codeigniterи модели MVC, а так же имеет уже настроеный веб сервер и установленный codeigniter.

По ходу статьи я буду ссылаться на официальную документацию Codeigniter и JQuery. Официальная документация хоть и на английском, я всё равно советую использовать именно её, т.к. там самая свежая информация. А английский язык всё равно придётся выучить, если Вы занялись программированием. Самое время начать =).

Перед разработкой корзины, скачайте Codeigniter с официального сайта.

Библиотеку jQuery скачивать не нужно, её мы возьмём из Google CDN. Многие советуют, как и я, подключать jQuery именно из CDN Google, потому что браузер пользователя один раз закеширует эту библиотеку из Google CDN, и дальше, зайдя на Ваш сайт, она уже скачиваться не будет. Следовательно, сайт будет грузиться немного быстрее.

Структура папок и подготовка к работе

Чтобы не запутаться в файлах и папках, создайте у себя такую же структуру папок как у меня. В корне проекта создайте папку assets, а в ней 3 папки: css, img и js. В них мы будем хранить файлы таблиц стилей, изображений и JS скриптов.

struktura-papok-proekta.png

В папке js создайте пустой файл cart.js. В этом файле будем писать код javascript. Так же, необходимо создать пустой файл styles.css в папке assets/css. В нём будут храниться основные стили.

Для сброса стандартных стилей браузера будем использовать reset.css. Создайте файл reset.css в папке assets/css и скопируйте туда стили из этой статьи: http://nikitakiselev.ru/post/102.

База данных

Из базы данных мы будем получать товары для интернет магазина. Итак, давайте создадим новую таблицу products с помощью PHPMyAdmin.

Чтобы не создавать таблицу вручную, просто скопируйте и выполните следующий SQL запрос:

CREATE TABLE IF NOT EXISTS `products` (
  `id` int(128) NOT NULL AUTO_INCREMENT,
  `name` varchar(128) NOT NULL,
  `price` varchar(32) NOT NULL,
  `image` varchar(128) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Таблица products имеет 4 поля:

  • id - уникальный индекс товара. Поле является инкрементным (т.е. увеличивается на 1 каждый раз при добавлении товара).
  • name - наименование товара. Текстовая строка с максимальной длиной 128 символов.
  • price - цена товара. Текстовая строка с максимальной длиной 32 символа.
  • image - имя файла с изображением товара. Так же является текстовой строкой с максимальной длиной 128 символов. Все файлы изображений будут храниться в папке /assets/img/.

Теперь добавим некоторые товары в таблицу, выполните следующий SQL запрос:

INSERT INTO `products` VALUES(1, 'MacBook Pro', '1199', 'macbookpro.jpg');
INSERT INTO `products` VALUES(2, 'MacBook Air', '1499', 'macbookair.jpg');
INSERT INTO `products` VALUES(3, 'MacBook', '999', 'macbook.jpg');

На этом подготовка базы данных завершена.

Настраиваем Codeigniter

Перед тем как использовать Codeigniter необходимо его настроить. Настройка Codeigniter несложная и сводится буквально к изменению нескольких строчек в конфигурационных файлах.

Откройте файл application/config/config.php, найдите и измените следующие опции:

$config['base_url'] = "http://example.com/";

Где http://example.com/ - адрес вашего сайта. Обратите внимание на то, что в конце адреса должен обязательно быть слеш (символ /).

$config['global_xss_filtering'] = FALSE;

Это глобальная фильтрация XSS атак. Некоторые советуют включить её, но я не советую, т.к. глобальная фильтрация значительно увеличивает нагрузку на сервер. Лучше фильтровать XSS там, где это нужно. Это и есть одно из преимуществ Codeigniter – использовать ресурсы фреймворка только там, где это нужно.

Т.к. далее мы будем подключать стандартную библиотеку Codeigniter для работы с корзиной покупок (Cart), необходимо изменить еще одну настройку:

$config['encryption_key'] = 'jd_srtv234';

Эта настройка относится к библиотеке Sessions, которую использует библиотека Cart. Мы указываем ключ, которым будет дополнительно шифроваться данные в сессии. Ключ можете вводить любой.

Теперь откройте файл application/config/database.php и введите информацию о используемой БД:

$db['default']['hostname'] = "localhost";
$db['default']['username'] = "root";
$db['default']['password'] = "";
$db['default']['database'] = "ci_cart";
$db['default']['dbdriver'] = "mysql";

Здесь ci_cart – это название базы данных (в ней мы создавали таблицу products). Если у Вас название БД другое, то измените это значение.

Теперь откройте файл application/config/routes.php и измените название контроллера по умолчанию на cart. Сам контроллер создадим в следующей статье. 

$route['default_controller'] = "cart";

Теперь хорошо бы изменить еще один конфигурационный файл Codeigniter - application/config/autoload.php. В нём хранятся настройки автозапуска библиотек, хелперов, моделей и т.д. Те модули, которые используются часто во всех контроллерах Codeigniter разумно помещать в автозагрузку.

Например, если приложение использует базу данных, то почему бы не поместить подключение к базе данных в автозагрузку, чтобы не задумываться больше об этом. Так же, в нашем случае, корзина покупок обязательна в интернет магазине, и её функции используются на сайте довольно часто – так поместим её в автозагрузку!

$autoload['libraries'] = array('cart', 'database', 'session'); 
$autoload['helper'] = array('url', 'form');

Итак, что мы добавили в автозагрузку.

Библиотеки:

  • database – Позволяет Вашему приложению подключаться к базе данных и использовать её функции.
  • cart – Встроенная в Codeigniterкорзина покупок. Подробнее
  • session - библиотека работает с сессиями. Сессии используются для хранения данных текущего пользователя. Мы их будет использовать для вывода сообщений пользователю. Подробнее

Помощники (хелперы):

  • url – позволяет получить доступ к функциям, которые помогают создавать и работать с URL ссылками. Подробнее.
  • form – Помогает создавать WEB формы и её элементы. Подробнее.

На этом первая часть закончена.

Читать Делаем корзину покупок с помощью Codeigniter и JQuery. Часть 2. Вы так же можете скачать исходный код этого урока.