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

Владимир | | PHP, Web разработка, Yii.

yii game site 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

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

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

  1. Yii PHP framework: создаём игровой сайт. Часть 1. Постановка задачи.
  2. Yii PHP framework: создаём игровой сайт. Часть 2. База данных и установка фреймворка.
  3. Yii PHP framework: создаём игровой сайт. Часть 3. Аутентификация.
  4. Yii PHP framework: создаём игровой сайт. Часть 4. Работа с жанрами игр.
  5. Yii PHP framework: создаём игровой сайт. Часть 5. Импорт игр.
  6. Yii PHP framework: создаём игровой сайт. Часть 6. Формируем страницы игр и жанров.
  7. Yii PHP framework: создаём игровой сайт. Часть 7. Работа с JavaScript и страницы игр.
  8. Yii PHP framework: создаём игровой сайт. Часть 8. Создаём виджеты.
  9. Yii PHP framework: создаём игровой сайт. Часть 9. Поиск ошибок.
  10. Yii PHP framework: создаём игровой сайт. Часть 10. Панель управления.
  11. Yii PHP framework: создаём игровой сайт. Часть 11. Человекопонятные URL.
  12. Архив с исходниками
  • demo? всего-того что в 7 частях вместе, есть? 🙂

    • это 7 опубликованных частей + ещё как минимум 2 неопубликованных 🙂

  • demo? всего-того что в 7 частях вместе, есть? 🙂

    • это 7 опубликованных частей + ещё как минимум 2 неопубликованных 🙂

  • Евгений

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

    • Я вроде jQueryUI вообще в этом примере не использовал. Какой фрагмент кода вы имеете ввиду?

  • Евгений

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

    • Я вроде jQueryUI вообще в этом примере не использовал. Какой фрагмент кода вы имеете ввиду?

  • Большое спасибо, что не просто выкладываете решение задачи, но и подробно описываете, что делать. Мне это очень помогает. За архив с исходниками отдельное спасибо!

  • Большое спасибо, что не просто выкладываете решение задачи, но и подробно описываете, что делать. Мне это очень помогает. За архив с исходниками отдельное спасибо!

  • Jay

    POS_END нужно сменить на POS_HEAD 😉

  • Можно, но зачем? Я специально хотел, чтобы скрипты подключались в самом конце, поэтому и поставил POS_END.

  • Добрый день.
    Владимир подскажите пожалуйста как реализовать загрузку картинок на сервер с автоматическим ресайзом и передачей s_image & s_thumbnail в db.

  • Или лучше не хранить ссылки в db?

  • Загрузку файлов сделать несложно. Есть готовый пример.

    Для ресайза есть расширение. Я им не пользовался, но, судя по описанию, его использовать удобнее чем GD или ImageMagick напрямую.

  • В БД лучше хранить относительные ссылки на изображения. Тогда можно будет перенести сайт на другой домен и не менять адреса ссылок в базе.

  • Я думаю, стоило бы еще заметить, что .js/.css, относящиеся к каким-то конкретным модулям/компонентам удобно хранить вместе с ними (к примеру в protected/modules/myModule) и публиковать через Assets (но ни в коем случае не подключать напрямую)

  • Pingback: Особое программирование » Post Topic » Особенности подключения JS скриптов в WordPress()

  • alex

    подскажите пожалуйста как на странице с полным описанием игры поменять описание pageTitle? Т.е что бы в тайтле было не Show Games как сейчас а имя той игры на странице которой я нахожусь т.е значение $game->g_name

    • Добавьте в начале файла protectedviewsgamesshow.php

      $this->pageTitle = $model->g_name;

      • Roe-ru

        Здравствуйте, Владимир!
        Спасибо за демонстрацию работы c yii. Качественно!
        Возник вопрос,вы плагин Lightbox добавляете в /JS/
        а разве по умолчанию не генерируется папка /protected/extensions/
        Мне кажется она для разных расширений предназначена? Зачем создавать новую?

        • /protected/extensions/ — для php расширений. Вы не получите доступ к этим файлам напрямую через браузер.

          Если не хотите создавать /JS/, можете использовать встроенный механизм публикации ресурсов.

  • Vafl

    light box не работает….

  • Vafl

    хотя нет, работает. токо надо подключить jquery версии 1.4.2. вместо jquery от yii

    • Это обычные проблемы. Статья написана больше 2-х лет назад. И Yii, и jquery, и lightbox успели не один раз обновиться, поэтому если апгрейдите библиотеки, то какие-то проблемы будут.

  • Владимир, вижу вы везде используете === / !== null , полез в доки специально, есть is_null() в языке… есть каки-то нюансы по неиспользованию ее или это вопрос привычки просто?

    И да, присоединяюсь ко всем предыдущим отзывам — отличный мануал по Yii