Реализация вывода древовидных комментарий на нашем блоге

 

Всем привет! Добро пожаловать на Блог RS! Прошу прощение, что задержался с написанием поста, восстанавливал копию движка по материалам на блоге. Сегодня мы с Вами реализуем вывод древовидных комментарий. Способ реализации идентичен с способом реализации древовидного меню. Но будут кое какие новые нюансы, правда не в этом посте, я разделю описания скорее всего на три статьи, ибо нам придется отдельно поговорить о кнопке "Ответить", она реализуется с помощью плагина jquery, думаю Вам будет полезно про этот плагин знать!

 

 

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

 

Предисловие

 

Этот пост, как и 99% постов на моем блоге, является частью цикла статей, которому по сути и посвящен данный блог, "Создать блог нуля". Так как данная статья лишь часть глобальной темы, то отдельно она может показаться Вам совершенно бесполезной.

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

Если Вам интересен материал данного блога то подпишитесь на RSS ленту блога через ридер, или же по почте

 

Цель

 

  • Так как мы будем сегодня писать лишь вывод комментариев, то для начала нам понадобится создать колонку в базе данных, в таблице comm. Колонка будет иметь то же назначение, что и колонка podmenu в реализации древовидного меню
  • Далее нам понадобится переписать шаблон comm.html
  • После чего перепишем функцию comm(). Введем многомерный массив, вместо прямого вывода из базы данных
  • Понадобится написать новую функцию messCOMM(). Она будет складывать из элементов массива html код комментариев.

На этом мы пока тормознем, в следующем посте реализуем кнопку "Ответить", а уже после обработчик. Тема чувствительна к мелочам, поэтому не будем торопиться.

Как я говорил, покажу Вам как выглядят комментарии, вот скрин:

результат

Как видите ответ на комментарий сдвигается чуть вправо образуя "Дерево"

 

Новая колонка в таблице comm

 

Заходим в структуру таблицы, создаем новую колонку после колонке blog:

 новая колонка comm

Далее для того чтобы тестить наше "дерево" нам понадобится два комментария, один из которых должен являться ответом для другого. Этого можно добиться поместив в новую колонку comm, id от другого комментария:

перенос id в колонку comm

 

Редактируем шаблон comm.html

 

Тут ничего сложного, нам по сути необходимо добавить два новых код-слова

<div class="comm" style="margin-left:[_style]px;text-align:left;">
<img src="http://www.gravatar.com/avatar/[_email]?s=40&d=http://rsblog.ru/img/no_ava.jpg&r=G" align="left" style="margin-right:5px;border:1px solid #dcdcdc;">
<div style="font-size:10px;">[_author] ( [_date_b] ) пишет:</div>
[_text]
</div>
[_podcomm]

 

Функция comm() в comm.php

 

Так получилось, что эта функция состоит из двух под функций. Одна собирает данные из базы данных, другая подключает форму. Давать Вам лиш часть функции comm() будет не правельно, нагляднее полный код, поэтому я поделил визуально функцию на две части, та часть, что отвечает за подключение формы не изменилась!

function comm($blog,$error)//функция вывода комментариев
{
$result_index = mysql_query("SELECT * FROM comm WHERE blog='$blog' ORDER BY id");//Выводим из базы данных все записи где blog равен ID поста
$myrow_index = mysql_fetch_array($result_index);
if($myrow_index != "")//Проверяем есть ли в базе данных записи
{//Если есть...
$sm_read = file("templates/comm.html");//...подключаем шаблон
$sm_read = implode("",$sm_read);//функция file() возвращаем массив, поэтому склеиваем его
$i = 0;
do//Цикл do while
{
$commMASS[$i] = array($myrow_index[id],//0
$myrow_index[author],//1
$myrow_index[email],//2
$myrow_index[site],//3
$myrow_index[text],//4
$myrow_index[date_comm],//5
$myrow_index[blog],//6
$myrow_index[comm]);//7
$i++;
}
while($myrow_index = mysql_fetch_array($result_index));

$comm = messCOMM(0,$commMASS,$sm_read,0);//функция формирования сообщений
}
else $comm = "<p align='center'>Комментариев нет, Вы будите первым =)</p>";//Если записей нет, то вывести это сообщение

//-------------------------------------------------
//--------------------------ФОРМА------------------
//-------------------------------------------------

$form = file("templates/comm_form.html");//подключаем шаблон с формой
$form = implode("",$form);//функция file() возвращаем массив, поэтому склеиваем его

//Вывод ошибки
if($error != "")//если есть ошибки
{
$error = explode("|",$error);//превращаем строку в массив
$echoERROR .= "<p style='color:red;margin:0px;'>Обнаружены следующие ошибки:</p>";//заголовок
for($i=0;isset($error[$i]);$i++)//цикл формирующий список ошибок
{
if($error[$i] != "")$echoERROR .= "<p style='color:red;margin:0px;'>>$error[$i]</p>";//ошибки
}
$form = str_replace("[_error]",$echoERROR,$form);//вывод ошибок на экран
}
else $form = str_replace("[_error]","",$form);//если ошибок нет, то удаляем код-слово
//Вывод ошибки

//капча
include ("moduls/capcha.php");
$cods = capcha();
for($i=0;$i<4;$i++)
{
$form = str_replace("[_code".$i."]",$cods[$i][1],$form);//вставляем 4 кода в форму
$form = str_replace("[_img".$i."]",$cods[$i][3],$form);//вставляем 4 изображения в форму
if($cods[$i][5] == "true")$form = str_replace("[_q]",$cods[$i][4],$form);//вклеиваем вопрос в форму
}
//капча


$form = str_replace("[_id]",$blog,$form);//вклеиваем id cтатьи в форму
$comm .= $form;
return $comm;//Выводим с генерированный html код
}

Рассматриваем только первую часть функции. Изменения следующие:

  • Вместо прямого вывода данных из базы, мы их сначала заносим в многомерный массив $commMASS
  • После цикла do while следует вызов функции messCOMM(). код которой ниже. Хочу что бы Вы обратили внимание на стартовые параметры
$comm = messCOMM(0,$commMASS,$sm_read,0);//функция формирования сообщений
  • 0 - Главные комментарии в колонке comm имеют нулевое значение
  • $commMASS - Массив хранящий все комментарии для выбранного поста
  • $sm_read - копия шаблона
  • 0 - Уровень вложенности. Необходим для расчета отступа для код-слова [_style]. Так же не позволяет создавать бесконечную ветвь. Уровень вложенности комментариев не будет превышать 10! ( Реализация такого ограничения будет описано не в этом посте )

 

Функция messCOMM() в comm.php

 

Дам Вам полный код этой функции, насчет пояснения, даже не знаю что сказать =))) там не так уж много новых, не понятных для Вас, строк =)

function messCOMM($mess,$commMASS,$temp,$BC)//Функция формирования html кода пунктов
{
for($i=0;isset($commMASS[$i]);$i++)
{
if($commMASS[$i][7] == $mess)
{
$edd_tamp = $temp;//Так как на придется править шаблон,
//то лучше его сохранить в отдельную переменную, иначе нам придется
//пользоваться функцией file() чаще чем 1 раз, а это нагрузка на сервер

//Замены идентификаторов на переменные из базы данных
//узнаем пустая ли пеерменная которая хранит адрес сайта
if($commMASS[$i][3] != "")$author = "<a href='".$commMASS[$i][3]."' rel='nofollow'>".$commMASS[$i][1]."</a>";//если не пустая формируем ссылку
else $author = $commMASS[$i][1];//есл пустая, то просто сохраняем автора в переменной
$style = $BC * 10;//расчет отступа от левого края в пикселях

$edd_tamp = str_replace("[_style]",$style,$edd_tamp);//отступ от края, что бы был вид "дерева"
$edd_tamp = str_replace("[_text]",$commMASS[$i][4],$edd_tamp);//Текст
$edd_tamp = str_replace("[_author]",$author,$edd_tamp);//Автор статьи
$edd_tamp = str_replace("[_date_b]",$commMASS[$i][5],$edd_tamp);//Дата размещения
$edd_tamp = str_replace("[_email]",md5($commMASS[$i][2]),$edd_tamp);//закодированный email

if($BC < 10)//максимальное количество вложенности комм 10
{
$newBC = $BC + 1;//увеличиваем уровень вложенности
$podcomm = messCOMM($commMASS[$i][0],$commMASS,$temp,$newBC);//перезапускаем функцию с новыми параметрами
}
else $podcomm = "";//принудительно вставляем пустоту в переменную, в которой должны хранится ответы на комм

$edd_tamp = str_replace("[_podcomm]",$podcomm,$edd_tamp);//заменяем код слово на ответ к комментарию
$comm .= $edd_tamp;// Склеиваем весь с генерированный код в одну переменную
}
}
if(!isset($comm))return "";//если небыло сформирован html код то выводим пустоту
else return $comm;//выводим html код
}

Наверное стоит лишь поведать смысл этой функции. Она отыскивает в массиве комментарии, у которых колонка comm равна идентификатору проверяемого комментария. Далее идет старая схема, генерация ссылки, подмена код-слов на значения переменных, и вывод всего этого дела в переменную, которая в последствие появится на экране пользователя. Вот наш результат:

результат

 

Заключение

 

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

Если Вам понравился мой блог, то подпишитесь на RSS ленту блога через ридер, или же по почте

Если у Вас есть какие вопросы, то пользуйтесь формой ниже!

Всего Вам наилучшего! У меня все!

Исходник

________

P.S.: Ищите хороший веб хостинг? Для более эффективного поиска нужной Вам площадки пользуйтесь ТОП списками, типа этого - web hosting

 

Возможно Вам будут интересны следующие заметки

Комментарии (6)

Ваше имя *
Сайт
Ваш E-mail *
Ваше сообщение *
 
мой милый , 19 Марта 2012 г. 12:44 пишет:
Гость
Сделай документацию по движку.... А то ради двух строк кода по блогу рыскать, проще своё что-то придумать!
Rio-Shaman, 19 Марта 2012 г. 17:30 пишет:
Автор
Не вижу смысла, есть пост где вывешены ссылки на совершенно все посты, по порядку их написания. Если Вы умеете придумывать свое, то наврятли найдете на блоге что-то, для себя, интересное, тут материал больше для тех кто программированию только учится...
Ответ для пользователя: мой милый
Дмитрий, 20 Марта 2012 г. 23:41 пишет:
Читатель
Я конечно подозревал, что так древовидные комментарии делаются(из переменной в таблице берётся значение), у меня так под категории делаются. Но вот как осуществить не мог додуматься.
Спасибо! Помогли.
Сергей, 09 Июня 2012 г. 15:35 пишет:
Гость
спасибо
Иван, 17 Октября 2012 г. 03:16 пишет:
Читатель
Хороший урок, благодарю
Виктор, 13 Февраля 2014 г. 19:41 пишет:
Гость
А как вывести на главной старице, сколько комментариев к записи, как у вас?