Yii PHP framework: создаём игровой сайт. Часть 7. Работа с JavaScript и страницы игр.

Сегодня мы разберем каким образом реализована поддержка JS библиотек в фреймворке Yii и создадим страницы с подробным описанием игр.

Прежде всего, пару слов о том, как будут использоваться JS библиотеки в данном примере. Для каждой игры есть несколько заранее подготовленных скриншотов, которые нам нужно показать на страницы с подробным описанием игры. Сами картинки находятся на сайте партнерки, а в нашей базе данных сохранены ссылки на них, но это не принципиально. Для нас главное правильно создать теги img.

Разместить на странице игры полноразмерные скриншоты не получится, т.к. они слишком большие, поэтому мы покажем их миниатюры. А при клике на любую из миниатюр будет открываться галерея с полноразмерными скриншотами. Для создания галереи используем библиотеку jQuery и плагин jQuery Lightbox.

jQuery идет в комплекте с фреймворком, а Lightbox нужно скачать.

Теперь разберём принцип подключения.

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

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

Создание таких проверок выльется в довольно объемный кусок кода, но фреймворк позволяет легко решить эти проблемы.

Он предоставляет нам объект CClientScript, который содержит все необходимые методы для работы со статическими файлами.

В нашем случае необходимо.

1) Скачать плагин jQuery Lightbox и сохранить его в папке js/. Получится такая структура папок:

js/
	lightbox/
		css/
		js/
		images/
index.php

2) Настроить плагин. Для этого создаём файл js/init_lightbox.js

$(function() {
	$("#screenshots a").lightBox({
		imageLoading   : "/js/lightbox/images/lightbox-ico-loading.gif"
		,imageBtnClose : "/js/lightbox/images/lightbox-btn-close.gif"
		,imageBtnPrev  : "/js/lightbox/images/lightbox-btn-prev.gif"
		,imageBtnNext  : "/js/lightbox/images/lightbox-btn-next.gif"
		,imageBlank    : "/js/lightbox/images/lightbox-blank.gif"
	});
});

Как видите, вся настройка заключается только в указании правильных путей к картинкам плагина.

3) Подключить скрипты и CSS файлы. Рассмотрим метод actionShow, который создаёт страницу с подробным описанием игры.

public function actionShow()
{
	$cs = Yii::app()->clientScript;
	//подключаем jquery, которая идет в комплекте с фреймворком
	$cs->registerCoreScript('jquery');
	//подключаем lightbox
	$cs->registerScriptFile(Yii::app()->request->baseUrl.'/js/lightbox/js/jquery.lightbox-0.5.min.js', CClientScript::POS_END);
	$cs->registerScriptFile(Yii::app()->request->baseUrl.'/js/init_lightbox.js' ,CClientScript::POS_END);
	$cs->registerCssFile(Yii::app()->request->baseUrl.'/js/lightbox/css/jquery.lightbox-0.5.css');
	//показываем форму
	$this->render('show',array('model'=>$this->loadGames()));
}

Прежде всего, мы получаем объект CClientScript (строка 3). Используя его мы можем подключать файлы.

Для подключения библиотек, которые идут в дистрибутиве фреймворка используется метод registerCoreScript. При этом нужно указать только название библиотеки.

Файлы библиотек находятся в папке framework/web/js/source. Для того, чтобы посетители могли получить к ним доступ, Yii копирует их в папку assets/.

Примечание. Для корректной работы фреймоворка у PHP скриптов должен быть доступ для записи в папки assets и protected/runtime.

В результате, перед тегом title появится соответствующий тег script. При повторном вызове registerCoreScript('jquery') не произойдет ничего. Фреймворк определит, что эта библиотека уже подключена.

Остальные JS файлы подключаем с помощью метода registerScriptFile. При этом нужно указать адрес файла. Тут удобно использовать атрибут Yii::app()->request->baseUrl, который возвращает адрес сайта.

Во втором параметре можно указать в какую часть страницы будет вставлен тег script. По умолчанию он вставляется перед тегом title. CClientScript::POS_END означает, что script будет вставлен в конец страницы, перед </body>.

Принцип подключения CSS файлов точно такой же, только используется метод registerCssFile.

Чтобы закончить формирование страницы, мы загружаем данные игры из базы (метод loadGames) и передаём их в представление.

Рассмотрим метод loadGames

public function loadGames($id=null)
{
	if($this->_model===null)
	{
		if($id!==null || isset($_GET['id']))
			$this->_model=Games::model()->findbyPk($id!==null ? $id : $_GET['id']);
			$this->_model->g_types = $this->_decodeTypes($this->_model->g_type);
		if($this->_model===null)
			throw new CHttpException(404,'The requested page does not exist.');
	}
	return $this->_model;
}

Тут всё достаточно просто. Id игры может быть передан либо в параметре метода, либо в параметре GET запроса.

Поиск осуществляется с помощью метода findbyPk модели. Затем мы выполняем расшифровку поля с типами игр (подробно эта процедура описана в предыдущей части).

Если игры с данным id не существует, то метод возвращает 404-ую ошибку.

Представление целиком приводить я не буду, покажу только код, который формирует скриншоты.

<div id="screenshots">
<?php
foreach ($game->ygs_screenshots as $screenshot) {
	echo CHtml::link(CHtml::image($screenshot->s_thumbnail), $screenshot->s_image);
}
?>
</div><!-- screenshots -->

Обратите внимание. В данном случае используется так называемая «ленивая загрузка» (lazy loading). Т.е. в представление мы передали только данные, полученные из таблицы ygs_games. Ссылки на скриншоты находятся в таблице ygs_screenshots. Причем, в модели мы указали связи между этими таблицами (метод relations), поэтому фреймворк знает, как их получить. И при первом обращении к свойству ygs_screenshots выполняет соответствующий запрос к БД.

Ссылки на изображения и сами теги img формируются с помощью методов link и image класса CHtml.

Напоминаю, что вы можете в любой момент скачать архив с исходниками этого примера.

Source

Если у вас возникли вопросы, замечания или просто советы, пишите, постараюсь ответить 😉

Все разделы цикла.

Yii PHP framework: создаём игровой сайт. Часть 7. Работа с JavaScript и страницы игр.

IDE для PHP разработчиков

Популярное

Разделы