Особистий блог Blohher'a

Читай Blohher брат

Реклама Google
Популярність сайта і якісний пошук

Вывод комментариев и формы комментирования

В этой статье посмотрим как выводятся комментарии и форма для комментирования.

Сначала посмотрим что пишется в функции вывода в контроллере

$idThis = $R['idAll'];
$D['commentAddUrl'] = site_url("$this->ccnm/ajaxCommentAdd/$idThis");
$onPage = safeInt($this->Sets->read('commentsOnPageUsr'));
$resultArray = $this->data->aGetComments($idThis, $onPage, $start);
if (!is_array($resultArray)) $D['comments'] = 'no comments';
else
{
    $D['commentsCount'] = $resultArray['numRows'];
    $D['begin'] = $resultArray['begin'];
    $D['comments'] = $resultArray['comments'];
    $this->load->library('pagination');
    $config['cur_page'] = $start;
    $config['base_url'] = site_url("$this->ccnm/".__FUNCTION__."/$category/$date/$huu");
    $config['total_rows'] = $resultArray['numRows'];
    $config['per_page'] = $onPage;
    $config['full_tag_open'] = '<div class="element_div"><div class="for-pg"><div class="forumpaginator-links">';
    $config['full_tag_close'] = '</div></div></div>';
    $config['first_link'] = '   ';
    $config['last_link'] = '   ';
    $config['next_link'] = '   ';
    $config['prev_link'] = '   ';
    $config['cur_tag_open'] = '<span class="current">';
    $config['cur_tag_close'] = '</span>';
    $config['first_tag_open'] = '<div class="stepbacktenbutton">';
    $config['first_tag_close'] = '</div>';
    $config['last_tag_open'] = '<div class="stepfwdtenbutton">';
    $config['last_tag_close'] = '</div>';
    $config['next_tag_open'] = '<div class="nextbutton">';
    $config['next_tag_close'] = '</div>';
    $config['prev_tag_open'] = '<div class="prevbutton">';
    $config['prev_tag_close'] = '</div>';
    $config['num_tag_open'] = '<div class="numbered">';
    $config['num_tag_close'] = '</div>';
    $this->pagination->initialize($config);
    $D['paging'] = $this->pagination->create_links();
}
if ($D['comment']) $this->load->view('site/body-mater-form',$D);

sa

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

<!-- comments -->
<?php
if (!is_string($comments))
{
    $counter = 0;
    for ($i=1; $i<15; $i++) $a14[] = $i; //vd($a14);
    shuffle($a14);
    echo "<div class=""pushBlock""><div class=""margined""><h1>Комментарии к материалу ($commentsCount)</h1>";
    foreach ($comments as $row)
    {
        $pattDow = 'l';
        $pattMonth = 'M';
        $pattDay = 'j';
        $pattYear = 'Y';
        $phpdate = strtotime($row->date);
        $day = date($pattDay, $phpdate);
        $mon = getRusDate(date($pattMonth, $phpdate));
        $year = date($pattYear, $phpdate);
        $time = substr($row->time, 0, 5);
        $tdate = "$day $mon $year в $time ";
        $hash = md5(strtolower(trim($row->email)));
        $counter++;
        if ($counter >= 14)
        {
            $counter = 0;
            shuffle($a14);
        }
        $boo = site_url("_/avatars/$a14[$counter].jpg");
        $grava = 'http://www.gravatar.com/avatar/'.$hash.'/?d='.$boo;
        $text = $row->text;
        $begin++;
        echo'<a name="'.$row->id_com.'"></a>
<div class="comentsout">
<div class="comimage">
<div><img alt="" src="'.$grava.'" height="100" width="100" /></div>
</div>
<div class="cominner">
<div class="comtitle">
<span id="name_'.$begin.'" class="name">'.$row->name.'</span> комментирует материал '.$tdate.'<a href="#'.$row->id_com.'">#'.$begin.'</a>
</div>
<div class="comtext">'.$text.'</div>
<div class="combuttons">
<a id="answer_'.$begin.'" class="buttonSmall" href="#ciform">Ответить</a>
</div>
</div>
<div style="clear: both;"></div>
</div>
        ';
    }
    echo '</div></div>';
    echo $paging;
}

?>
<!-- comments -->

Теперь вывод формы, код HTML

<!-- com form -->
<div id="commentForm" class="pushBlock">
<div class="margined">
<h1>Добавьте свой комментарий</h1>
<div id="formHolder">
<?php
$attributes = array('name' => 'formItself', 'id' => 'formItself');
echo form_open(site_url(), $attributes);
?>
<div class="widthplus">
<span>Имя (ник):</span>
<input id="name" class="F FInput required" minlength="2" name="name" type="text" size="20" />
<label for="name">Например: Иван Петрович</label>
</div>
<div id="hiddenEmail" class="widthplus" style="display: none">
<span>E-Mail:</span>
<input id="email" class="F FInput required email" name="email" type="text" size="20" />
<label for="email">E-Mail будет скрыт</label>
</div>
<div class="widthtext">
<span>Текст комментария:</span>
<textarea id="text" class="F FArea required" name="text"></textarea>
<label for="text">Пишите русскими буквами, не пишите очень короткие комментарии</label>
</div>
<div class="formButton" >
<div id="servMes"></div>
<a class="buttonBig" href="#">Отправить</a>
</div>
</form>
</div>
</div>
</div>
<!-- com form -->

А вот сопровождающий форму код JavaScript

<script type="text/javascript">
special = ' &nbsp &nbsp &nbsp  \u21e0';
bName = 'Поле имени пустое!'+special;
bName2 = 'Поле имени меньше 2-х символов!'+special;
bEmail = 'Электронный адрес введен неправильно!'+special;
bEmail2 = 'Введите ваш электронный адрес!'+special;
bText = 'Введите ваш комментарий!'+special;
function prepareAjaxAddComment()
{
    notify('Подождите пожалуйста...');
    window.setTimeout(ajaxAddComment, 700);
}
function ajaxAddComment()
{
    $.cookie("name", $("#name").attr("value"), { expires: 7000, path: '/' });
    $.cookie("email", $("#email").attr("value"), { expires: 7000, path: '/' });
    var formId = '#formItself';
    var actshn = '<?php echo $commentAddUrl ?>';
    $.ajax({
    type: "POST",
    url: actshn,
    data: $(formId).serialize(),
    timeout: 9000,
    success: function(data){
        p = tryEval('(' + data + ')');
        if(p===false)
        {
            notify('Вероятно на сервере случилась ошибка!');
            return false;
        }
        if (typeof(p['error']) != 'undefined')
        {
            if (p['error'] == 'FORM_FAIL') notify('Вы ввели не все данные в форму или же они не правильные');
            if (p['error'] == 'DUPLICATION') notify('Повторный комментарий');
        }
        if (typeof(p['operation']) != 'undefined')
        {
            if (p['operation'] == 'ADD_OK')
            {
                $('textarea#text').val('');
                notify('В базу добавлено. Перезагружаю страницу...');
                window.setTimeout('window.location.reload()', 2500);
            }
            if (p['operation'] == 'SPAM')
            {
                notify('Ваше сообщение попадает под фильтр спама.');
            }
            if (p['operation'] == 'TOO_FAST')
            {
                notify('Комментарий НЕ ОТПРАВЛЕНО! Подождите '+p['time_left']+' секунд');
            }
            if (p['operation'] == 'IP_BAN')
            {
                $("#commentForm").find(":submit").attr('value','');
                notify('Ваше сообщение попадает под фильтр спама.');
                location.href=p['bad_site'];
            }
        }
    },
    error: function(s, e){
        Log(parseAjaxError(s, e));
        notify('У вас проблемы с интернетом');
    }
});
}
notifyCloseTimer = 0;
function notify(text)
{
    window.clearTimeout(notifyCloseTimer);
    var nf = $('#servMes');
    nf.fadeOut("slow", function(){
        nf.html(text);
        nf.fadeIn("slow");
        notifyCloseTimer = window.setTimeout('$("#servMes").fadeOut("slow");', 9000);
    });
}
$(document).ready(function()
{
    $('.buttonBig').click(function(){
        if ($('#hiddenEmail').css('display') == 'none')
        {
            if ($('#name').val() != '') $('#hiddenEmail').slideDown("slow");
            window.setTimeout('$("#formItself").doitbitch()', 1000);
        }
        else $("#formItself").doitbitch();
        return false;
    });
    var namecook = $.cookie("name");
    if(namecook != '') $('#hiddenEmail').slideDown("fast");
     $("#name").attr("value",namecook);
    $("#email").attr("value",$.cookie("email"));
    var theid = "#name";
    $(theid).bind("focus", function(event){
        $(theid).addClass("fhover");
    });
    $(theid).bind("blur", function(event){
        $(theid).removeClass("fhover");
    });
    var theid1 = "#mail";
    $(theid1).bind("focus", function(event){
        $(theid1).addClass("fhover");
    });
    $(theid1).bind("blur", function(event){
        $(theid1).removeClass("fhover");
    });
    var theid2 = "#text";
    $(theid2).bind("focus", function(event){
        $(theid2).addClass("fhover");
    });
    $(theid2).bind("blur", function(event){
        $(theid2).removeClass("fhover");
    });
    vdd = $("#formItself").validate({
        invalidHandler: function(e, validator) {
        },
        onkeyup: false,
        submitHandler: prepareAjaxAddComment,
        messages: {
            name: {
                required: bName,
                minlength: bName2
            },
            text: {
                required: bText
            },
            email: {
                email: bEmail,
                required: bEmail2
            }
        },
        debug:false
    });
    // now add hidden field
    $('<input>').attr({
        type: 'hidden',
        id: 'theme_title',
        name: 'theme_title',
        value: '<?php echo cleanTextForJS($title) ?>'
    }).appendTo('#formItself');
    // init answer button
    $('.buttonSmall').click(function(){
        var thisid = $(this).attr('id');
        var splited = thisid.split('_');
        var numid = splited[1];
        var name = $('#name_'+numid).text();
        name = "Ответ для: "+name+" (#"+numid+")\n";
        $("#text").attr("value", $('#text').val()+name);
    })
});
</script>

Для полной комплектации приведу еще и CSS код, сопровождающий форму комментирования.

p.h1 {
padding: 0 0 10px 0px;
font-size: 20px;
text-align: center;
}
#formHolder label {
    color: #555555;
    display: block;
    font-family: Arial;
    font-size: 11px;
    font-style: italic;
}
#formHolder label.error {
    color: #800000;
    display: block;
    font-family: Arial;
    font-size: 12px;
}
#formHolder span {
    color: #000000;
    display: block;
    font-family: Arial;
    font-size: 15px;
    padding-left: 1px;
}
.widthplus {
    height: 70px;
    width: 350px;
}
.widthtext {
    height: 165px;
}
.F {
    background-color: #e9e9ff;
    border-color: #004276;
    border-radius: 2px 2px 2px 2px;
    border-style: solid;
    border-width: 1px;
    font-family: Arial;
    font-size: 14px;
}
.FInput {
    font-size: 14px;
    height: 24px;
    line-height: 20px;
    margin-top: 4px;
    padding-left: 10px;
    width: 100%;
}
.FArea {
    height: 100px;
    line-height: 1.3em;
    margin: 4px 0;
    padding: 3px;
    width: 485px;
}
.F:hover {
    background-color: #c6dcff;
}
.fhover {
    background-color: #c6dcff;
}
.formButton {
    margin: 20px 25px 0 5px;
    text-align: right;
}
a.buttonBig {
  background: none repeat scroll 0 0 #003399;
  border: 1px solid #004276;
  border-radius: 3px 3px 3px 3px;
  color: white;
  font-size: 14px;
  padding: 6px 12px;
  text-decoration: none;
}
#servMes {
  display: inline;
  font-size: 13px;
  margin: 20px 25px 0 5px;
}
/*pigination*/
.for-pg {
width: auto;
height: 30px;
}
.forumpaginator-links div {
background-color: wheat;
border: 1px solid #555555;
color: black;
display: block;
float: left;
height: 21px;
line-height: 15px;
margin: 0 1px;
text-align: center;
text-decoration: none;
}
.forumpaginator-links div:hover {
border: 1px solid #E87676;
color: #003399;
}
.forumpaginator-links div a {
display: block;
height: 100%;
width: 100%;
}
.forumpaginator-links span.current {
border: 1px solid #555555;
color: black;
display: block;
float: left;
height: 15px;
margin: 0 1px;
padding: 3px 2px;
width: 7px;
}
.forumpaginator-info {
background: none repeat scroll 0 0 transparent;
color: #000000;
float: left;
font-size: 10px;
line-height: 1em;
padding: 12px 4px 4px;
text-decoration: none;
text-indent: 4px;
}
.forumpaginator-links {

}
.forumpaginator-links div {
margin: 0 1px;
}
div.nextbutton {
background: url("usrsrc/arrow_right.png") no-repeat scroll center center #555555;
display: block;
}
div.prevbutton {
background: url("usrsrc/arrow_left.png") no-repeat scroll center center #555555;
display: block;
}
div.stepfwdtenbutton {
background: url("usrsrc/arrow_stepfwdten.png") no-repeat scroll center center #555555;
display: block;
}
div.stepbacktenbutton {
background: url("usrsrc/arrow_stepbackten.png") no-repeat scroll center center #555555;
display: block;
}
div.nextbutton, div.prevbutton {
width: 12px;
}
div.stepbacktenbutton, div.stepfwdtenbutton {
width: 16px;
}
div.numbered a {
color: black;
line-height: 21px;
text-align: center;
text-decoration: none;
width: 12px;
}
 

Залишити коментар

Нік
 
E-mail
 
Сайт
 
Текст
 

 
Blohher - Блог розробника сайтів