Пара слов о программировании

Что такое CodeIgniter?

CodeIgniter это мощный и компактный php фреймворк, созданный для программистов, которым нужен небольшой и элегантный инструмент для создания полнофункциональных web-приложений. Если вы живете в современном мире, используете виртуальный хостинг, у вас есть дедлайны, и вы устали от огромных, неповоротливых и тщательно недокументированных фреймворков - CodeIgniter для вас!

В этой статье, я буду использовать последнюю стабильную версию CodeIgniter - 1.7.2. От читателя требуется небольшое понимание CodeIgniter и паттерна MVC. Итак, приступим!

Ресурсы

До того как мы начнем, вам необходимо скачать CodeIgniter и jQuery.

Или вы можете использовать хранилище от Гугла:

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript

Структура папок

Перед тем как мы начнем, я хотел бы создать структуру нашего приложения. Я предпочитаю выносить папки приложения за пределы системной папки; это не обязательно, но в будущем сделает процесс обновления более простым.

Так же необходимо создать папка assets, где мы будем хранить изображения, js скрипты, css и все остальное. Окончательная версия папок выглядит следующим образом:

Файл jquery-1.3.2.min.js и пустой файл core.js мы расположим внутри папки assets/js. В файле core.js будет находиться наш Javascript код. Так же создадим файл стилей. Пусть это будет core.css в папке assets/css.

База данных

Мы собираемся хранить нашу продукцию в базе данных, поэтому в создайте таблицу CI_Cart phpMyAdmin

После этого скопируйте и вставьте следующий SQL код...

CREATE TABLE `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=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Дальше, вставим данные в таблицу:

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');

Вот и все что необходимо сделать с нашей базой данных.

Шаг 1- настройка приложения

До того как использовать CodeIgniter, его надо настроить. Откройте application/config/config.php, и измените следующее:

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

Замените http://example.com на ваш адрес. Затем, взгляните на глобальную фильтрацию XSS, чуть ниже в этом файле.

$config['global_xss_filtering'] = FALSE;

Замените False на True, чтобы активировать фильтрацию при передаче данных через GET, POST или COOKIE. Затем, откройте application/config/database.php и введите настройки вашей базы данных.

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

Далее, откройте application/config/routes.php и измените контроллер по умолчанию на "cart":

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

Теперь, когда кто-либо зайдет на ваш сайт, класс cart будет загружен автоматически.

Осталось отредактировать один файл application/config/autoload.php - для автоматической загрузки компонентов:

/*
| -------------------------------------------------------------------
| Auto-load Libraries
| -------------------------------------------------------
| Этот класс лежит в папке system/libraries
| или в вашей папке system/application/libraries 
|
| Прототип
|
| $autoload['libraries'] = array('database', 'session', 'xmlrpc');
*/
$autoload['libraries'] = array('cart', 'database');		
/*
| -------------------------------------------------------------------
| Автоматическая загрузка хелперов
| -------------------------------------------------------------------
| Прототип:
|
| $autoload['helper'] = array('url', 'file');
*/
$autoload['helper'] = array('url', 'form');

Библиотеки

• database - дает вашему приложению возможность соединяться с базой данных и делает доступным класс database.
• cart - дает вам доступ к классу cart, подробнее.

Хелперы

• url - библиотека url предоставляет вам различные методы для создания и получения ссылок, подробнее
• form - эта библиотека помогает нам создавать формы,

Шаг 2 - контроллер Cart

Мы изменили контроллер по умолчанию на cart, но этот контролер еще не существует. И так, создадим новый файл application/controllers/cart.php и добавим базовый контролер.

<?php
class Cart extends Controller { // наш класс Cart наследуется от класса Controller
 
function Cart()
{
parent::Controller(); 
}
 
}
/* конец файла cart.php */
/* Расположение: ./application/controllers/cart.php */

Теперь создадим нашу функцию index. Она запуститься автоматически, когда будет запрошен класс cart.

function index()
{
$data['products'] = $this->cart_model->retrieve_products(); // Возвращаем массив со всеми продуктами
}

Что здесь происходит? вы можете заметить, что мы сохраняем результат полученный от cart_model в переменную "$data['products']". Если мы обновим страницу, будет ошибка, так как cart_model еще нет.

Шаг 3 - создание модели

Что такое модель?

Модель это php класс, предназначенный для работы с информацией в вашей базе данных. Например, вы используете CodeIgniter для управления блогом. В таком случае функциями вашей модели могут быть insert, update, и retrieve (вставка, обновление и удаление записей в блоге).

Модели создаются в папке application/models; давайте создадим файл нашей модели cart_model.php и немножко отредактируем его.

<?php
 
class Cart_model extends Model { // Наследуем класс Cart_model от класса Model 
 
}
 
/* конец файла cart_model.php */
/* Расположение: ./application/models/cart_model.php */

Это так просто; мы создали нашу модель. Заметьте, что мы унаследовали нашу модель от класса Model. Помните мы вызывали нашу модель из функции index() в контролере cart? Мы вызвали функцию retrieve_products, давайте создадим ее!

<?php
class Cart_model extends Model {
 
// функция возвращает массив с информацией о всех продуктах
function retrieve_products(){
$query = $this->db->get('products'); // выбрали таблицу products
return $query->result_array(); // вернули результат как массив
}
 
}
 
/* конец файла cart_model.php */
/* Расположение: ./application/models/cart_model.php */

Обновим страницу, и увидим следующее:

Мы создали нашу модель, хранящую функцию retrieve_products, вызываемую контролером cart, но мы забыли загрузить ее. Есть несколько способов загрузить модель, но в этой статье я буду делать это в конструкторе класса, т.е. в функции Cart в самом начале файла controllers/cart.php.

<?php
class Cart extends Controller { 
 
function Cart()
{
parent::Controller(); 
$this->load->model('cart_model'); // загрузили нашу модель cart_model 
}
 
}
/* конец файла cart.php */
/* Расположение: ./application/controllers/cart.php */

Теперь, давайте проверим вывод массива.

function index()
{
$data['products'] = $this->cart_model->retrieve_products(); 
print_r($data['products']); // выводим наш массив на экран, чтобы увидеть что все работает (Удалим эту строчку после тестирования)
}

Если все сделано верно, вы увидите в браузере следующее:

Array ( [0] => Array ( [id] => 1 [name] => MacBook Pro [price] => 1199 [image] => macbookpro.jpg )
[1] => Array ( [id] => 2 [name] => MacBook Air [price] => 1499 [image] => macbookair.jpg )
[2] => Array ( [id] => 3 [name] => MacBook [price] => 999 [image] => macbook.jpg ) )

Теперь, когда мы получили наш контент, отобразим его используя представление!

Шаг 4 - создаем представление

Что такое представление?

Представление это просто вебстраница, или ее фрагмент, например, шапка, подвал и т.д. Фактически, представления могут гибко встраивать другие представления (которые содержат еще представления и т.д.), если вам нужна такая иерархия. Представления никогда не вызываются напрямую, они должны быть загружены в контроллере. Вспомните, что в MVC фреймворке, контроллер отвечает за использование представлений.

Откройте папку application/views и создайте новый файл index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CodeIgniter корзина покупателя</title>
<link href="<?php echo base_url(); ?>assets/css/core.css" media="screen" rel="stylesheet" type="text/css" />
 
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/core.js"></script>
</head>
<body>
 
<div id="wrap">
 
<?php $this->view($content); ?>
 
</div>
 
</body>
</html>

Это основной шаблон. Как вы могли заметить, мы загружаем jQuery и таблицу стилей. Затем мы загружаем хелпер адресов, "base_url();", который возвращает адрес нашего приложения.

Так же загружаем представление, которое содержиться в переменной $content. Это позволяет нам динамически подгружать контент. Если мы присвоим '$content' 'demo', то будет загружено представление views/demo.php.

Шаг 5 - отправляем данные в наше представление

В третьем шаге, мы подготовили функцию index, и возвращаем все продукты из базы данных, но не отправляем данные в представление; итак откроем файл /application/controllers/cart.php

function index()
{
$data['products'] = $this->cart_model->retrieve_products(); 
 
$data['content'] = 'cart/products'; // выбираем файл с представлением для отображения наших продуктов
$this->load->view('index', $data); // отображаем страницу с определенным выше контентом
}

Как вы можете видеть, мы передаем переменную $content в 'cart/products'. Мы пока не сделали это представление, но сейчас займемся этим.

Создайте файл в application/views/cart и назовите его products.php. В этом файле мы отобразим файлы, которые мы получаем от нашей модели cart. Мы отобразим неотсортированный список наших продуктов.

<ul class="products">
<li></li>
</ul>

Поскольку данные о продуктах находяться в массиве, сделаем цикл и отобразим все продукты:

<ul class="products">
<?php foreach($products as $p): ?>
<li>
</li>
<?php endforeach;?>
</ul>

Теперь, когда мы делаем цикл, мы можем отобразить наши данные о продуктах.

<ul class="products">
<?php foreach($products as $p): ?>
<li>
<h3><?php echo $p['name']; ?></h3>
<img src="<?php echo base_url(); ?>assets/img/products/<?php echo $p['image']; ?>" alt="" />
<small>&euro;<?php echo $p['price']; ?></small>
<?php echo form_open('cart/add_cart_item'); ?>
<fieldset>
<label>Количество</label>
<?php echo form_input('quantity', '1', 'maxlength="2"'); ?>
<?php echo form_hidden('product_id', $p['id']); ?>
<?php echo form_submit('add', 'Добавить'); ?>
</fieldset>
<?php echo form_close(); ?>
</li>
<?php endforeach;?>
</ul>

Посмотрим что происходит в коде:

<h3><?php echo $p['name']; ?></h3>

Отображаем название продукта в h3.

<img src="<?php echo base_url(); ?>assets/img/products/<?php echo $p['image']; ?>" alt="" />

Здесь мы используем функцию base_url, которая возвращает адрес нашего приложения, и обращаемся к папке assets/img. Затем запрашиваем рисунок продукта из базы.

<small>&euro;<?php echo $p['price']; ?></small>

В теге small отображаем цену.

<?php echo form_open('cart/add_cart_item'); ?>
<fieldset>

Используем хелпер form для создания формы и установки action в "cart/add_cart_item".

<label>Количество</label>
<?php echo form_input('quantity', '1', 'maxlength="2"'); ?>
<?php echo form_hidden('product_id', $p['id']); ?>
<?php echo form_submit('add', 'Добавить'); ?>

В этой части пользователь может задать количество нужных ему товаров. Для создания input используется хелпер form_input, имя поле ввода "quantity" и значение по умолчанию - "1". Дополнительно указываем максимальную длину - 2 символа

Создаем скрытое поле - опять использую хелпер form и называем его "product_id".

Дальше, кнопка с именем "add" и подписью "Добавить"

</fieldset>
<?php echo form_close(); ?>

И, наконец, закрываем fieldset и form. Теперь, добавим CSS.

body{
font-family: "Lucida Sans";
font-size: 12px;
}
#wrap{
width: 1024px;
}
 
ul.products{
list-style-type: none;
width: 525px;
margin: 0;
padding: 0;
}
 
ul.products li{
background: #eeeeee;
border: 1px solid #d3d3d3;
padding: 5px;
width: 150px;
text-align: center;
float: left;
margin-right: 10px;
}
 
ul.products h3{
margin: 0;
padding: 0px 0px 5px 0px;
font-size: 14px;
}
 
ul.products small{
display: block;
}
 
 
ul.products form fieldset{
border: 0px;
}
 
ul.products form label{
font-size: 12px;
}
 
ul.products form input[type=text]{
width: 18px;
background: #FFF;
border: 1px solid #d3d3d3;
}

Я добавил три рисунка в assets/img/products, в соответствии с данными в базе.

продолжение следует...