При работе над сайтом у меня возникла необходимость в системе оценки статей, при этом она должна была быть легкой и простой. От пятибальной было решено отказаться сразу, и была выбрана система «Нравится/Не нравится». К сожалению быстрый поиск ничего подобного не нашел, и поэтому было решено писать модуль с нуля.С чего начать?
Начало модуль берет из учебного примера Hello world! Найти его не составит труда, качаем и распаковываем в папку. Так как модуль будет работать с базой данных, а стандартная таблица рейтинга нам не подходит, то создадим собственную.
- id — главное поле с автоинкрементом
- nid — уникальное поле хранящее id материала
- like — список id пользователей кому понравилась новость
- dislike — список id пользователей кому не понравилась новость
- rate — общий рейтинг новости
Итак с базой данных разобрались, теперь приступим к самому модулю. Педполагаю что вы уже знаете что такое AJAX, для чего он нужен. Так как в Joomla не предусмотрена возможность использования AJAX модулями то мы восмользуемся фичей которую предлагает Тушов Леонид, а именно создадим файл через который и будут идти все запросы. В результате у нас теперь 2 файла в папке модуля: ajax.php и mod_likerating (он же Hello World!). Теперь пишем для них xml файл инсталлятор и устанавливаем.
<?xml version="1.0" encoding="utf-8"?>
<install type="module" version="1.5.0">
<name>JLikeRating</name>
<author>StyleT</author>
<version>1.0</version>
<description>Модуль голосования для Joomla созданный по принципу нравится/не нравится</description>
<files>
<filename module="mod_likerating">mod_likerating.php</filename>
<filename module="mod_likerating">ajax.php</filename>
</files>
<params>
<param name="suffix" type="text" default="" label="Суффикс класса модуля" description="Позволяет присвоить суффикс классу модуля" />
</params>
</install>
Пишем код модуля
Проверяем вывод модуля и идем дальше. Так как модуль будет выводится в полной версии новости, то выводить мы его будем must have плагином Modules Anywhere с обязательно включенными параметрами Enable parameter overriding, Ignore module state и Enable in components.
К сожалению модуль не знает id открытого в данный момент материала, поэтому мы его передадим в виде параметра используя функцию Parameter overriding плагина Modules Anywhere:
{module 65|newsid=<?php echo $this->article->id; ?>} 65 это id нашего модуля полученный после установки.
Итого код модуля у нас стал вот таким:
<?php
defined('_JEXEC') or die('Restricted access');
$db = JFactory::getDBO();//Подключили БД
$user = JFactory::getUser();//Данные пользователя
$suffix = $params->get("suffix");//Суффикс класса модуля
$newsid = $params->get("newsid");//Получили id новости
if (JRequest::getVar('voteresult')) {
//Работа с AJAX
echo 'hello from AJAX\n'.JRequest::getVar('voteresult');
}
else{
//Вывод кода модуля
?>
<script type="text/javascript">
function myAJAXSendRequest(voteres) {
new Request({
method: 'get',
url: '/modules/mod_likerating/ajax.php',
data: { 'voteresult' : voteres},
onSuccess: function(responseText) {
alert(responseText);},
onFailure: function() {
alert('failed');}
}).send();
}
window.addEvent('domready', function() {//Вешаем события на кнопки
$('likerating-like').addEvent('click', function(e) {myAJAXSendRequest('like');});
$('likerating-dislike').addEvent('click', function(e) {myAJAXSendRequest('dislike');});
});
</script>
<DIV class="likerating<?php echo $suffix; ?>">
<button class="like" type="button" id="likerating-like" >
<span class="label">Нравится</span>
</button><button class="dislike" type="button" id="likerating-dislike">
<span class="label">Не нравится</span>
</button>
</div>
<?php } ?>Все получилось? Работает? Отлично, теперь разберем этот код по шагам:
1. Плагин Modules Anywhere вызывает модуль и передает ему id новости.
2. Модуль подключает классы и получает параметры.
3. Код «if (JRequest::getVar('voteresult'))» дает false так как ajax запроса не было.
4. Вывод модуля пользователю.
5. Пользователь жмет кнопку Нравится
6. Параметры указанные в data класса Request передаются на указанный url
7. Вызванный ajax.php вызывает модуль
8. Код «if (JRequest::getVar('voteresult'))» и выполнется только часть обработки ajax, сервер отвечает
9. Вызывается onSuccess и обрабатывается ответ сервера.
10. Все это без перезагрузки страницы
Важно отметить что сейчас мы передаем данные в текстовом формате, тогда как new Request.JSON уже работает с форматом JSON что предпочтительнее если принимаем несколько переменных.
Пишем собственно голосование
Итак ниже я привожу полный код модуля голосования для которого все и затевалось.
<?php
defined('_JEXEC') or die('Restricted access');
$db = JFactory::getDBO();//Подключили БД
$user = JFactory::getUser();//Данные пользователя
$suffix = $params->get("suffix");//Суффикс класса модуля
$newsid = $params->get("newsid");//Получили id новости
if (JRequest::getVar('voteresult')) { //Если true работаем с ajax
$voteres= JRequest::getVar('voteresult');//Как пользователь проголосовал
$voted= JRequest::getVar('voted');//Голосовал ли он ранее, и если да, то как 0-нет 1-нравилось 2-не нравилось
$newsid= JRequest::getVar('newsid');//Получили id новости так как плагин Modules Anywhere нас уже не вызывал
$query="UPDATE `#__likerating_news` SET ";
if($voteres=='like')
{
switch($voted)
{
case 1:
$query.="`like`=(SELECT REPLACE(`like`,',".$user->id."','')), `rate`=`rate`-'1'";
$answer= 0;
break;
case 2:
$query.="`like`=(SELECT CONCAT_WS(',', `like`, '".$user->id."')), `rate`=`rate`+'2', `dislike`=(SELECT REPLACE(`dislike`,',".$user->id."',''))";
$answer= 1;
break;
case 0:
$query.="`like`=(SELECT CONCAT_WS(',', `like`, '".$user->id."')), `rate`=`rate`+'1'";
$answer= 1;
break;
}
}else if($voteres=='dislike')
{
switch($voted)
{
case 1:
$query.="`dislike`=(SELECT CONCAT_WS(',', `dislike`, '".$user->id."')), `rate`=`rate`-'2', `like`=(SELECT REPLACE(`like`,',".$user->id."',''))";
$answer= 2;
break;
case 2:
$query.="`dislike`=(SELECT REPLACE(`dislike`,',".$user->id."','')), `rate`=`rate`+'1'";
$answer= 0;
break;
case 0:
$query.="`dislike`=(SELECT CONCAT_WS(',', `dislike`, '".$user->id."')), `rate`=`rate`-'1'";
$answer= 2;
break;
}
}
$query.=" WHERE `nid`='".$newsid."'";
$db->setQuery($query);
$result = $db->loadResult();
echo $answer;
}
else{//Если AJAX запроса не было
//Создаем строку в таблице для новости если она ещё не была создана
$db->setQuery("INSERT INTO #__likerating_news (`nid`, `like`, `dislike`, `rate`) VALUES ('".$newsid."', '0', '0', '0')");
$result = $db->loadResult();
//Голосовал уже или нет? Тут можно сделать более рационально
$db->setQuery("SELECT `like`, `dislike` FROM `#__likerating_news` WHERE `nid`='".$newsid."'");
$result = $db->loadRow();
if(strpos("t".$result[0], $user->id))
$voted= '1';
else if(strpos("t".$result[1], $user->id))
$voted= '2';
else
$voted= '0';
?>
<script type="text/javascript">
var voted= '<?php echo $voted; ?>';//Чтобы не пересчитывать храним переменные в JS
var newsid= '<?php echo $newsid; ?>';//Плагин будет вызываться из ajax.php и нам нужно вручную передать параметр
function myAJAXSendRequest(voteres) {
new Request({
method: 'get',
url: '/modules/mod_likerating/ajax.php',
data: { 'voteresult' : voteres , 'voted' : voted, 'newsid' : newsid},
onSuccess: function(responseText) {
voted= responseText;
if(voted==0){//Смена картинки в кнопке
$('likeratingimg-like').setStyle('background-position', '0px -38px');
$('likeratingimg-dislike').setStyle('background-position', '0px 0px');
}else if(voted==1){
$('likeratingimg-like').setStyle('background-position', '0px -58px');
$('likeratingimg-dislike').setStyle('background-position', '0px 0px');
}else{
$('likeratingimg-like').setStyle('background-position', '0px -38px');
$('likeratingimg-dislike').setStyle('background-position', '0px -19px');
}
//alert(voted);
},
onFailure: function() {//При неудаче выводим сообщение
alert('failed');
}
}).send();
}
window.addEvent('domready', function() {//Вешаем события на кнопки
$('likerating-like').addEvent('click', function(e) {myAJAXSendRequest('like');});
$('likerating-dislike').addEvent('click', function(e) {myAJAXSendRequest('dislike');});
});
</script>
<DIV class="likerating<?php echo $suffix; ?>">
<button class="like" type="button" id="likerating-like" >
<img id="likeratingimg-like" class="hand-image" style="<?php if($voted== '1'){echo 'background-position: 0px -58px;';}?>" src="/modules/mod_likerating/images/pixel.gif">
<span class="label">Нравится</span>
</button><button class="dislike" type="button" id="likerating-dislike">
<img id="likeratingimg-dislike" class="hand-image" style="<?php if($voted== '2'){echo 'background-position: 0px -19px;';}?>" src="/modules/mod_likerating/images/pixel.gif">
</button>
</div>
<?php } ?>
Предполагается что background картинки состоит из спрайта который указан в CSS стиле, а вот написать собственно CSS и будет вашим заданием.
Важно и то что ajax.php трогать не надо вообще, просто ложим его в папку модуля и кидаем на него ajax запросы.
Все наверно заметили что ячейка rated базы данных заполняется и учитывается, но вот значение из неё никуда не идет, да, это так, но никто не мешает вам её использовать.
Результат
Вот что в конечном итоге вышло у меня, функциональность полностью аналогична подобным кнопкам на YouTube, каюсь, временное оформление тоже оттуда. Если кому то потребуется, могу выслать архив с файлами, сейчас времени мало, стучать в Skype
У меня ничего не работает, что делать?
Ниже приведен список полезных ссылок по данной теме:
Временно.НЕТ
Class: Request
My SQL String Functions
Basic AJAX Requests Using MooTools 1.2
От автора
Это мой первый топик на хабре, и надеюсь не последний. Возможно тут сильно подробно всё расписано, однако подробных описаний довольно мало и возникают трудности с которыми сталкивался в свое время и я, думаю эта статья поможет новичку сэкономить пару часов жизни.
