За последние 24 часа нас посетили 17153 программиста и 1607 роботов. Сейчас ищут 1217 программистов ...

Зона комментариев

Тема в разделе "PHP для новичков", создана пользователем Oogily, 13 мар 2020.

  1. Oogily

    Oogily Активный пользователь

    С нами с:
    25 авг 2009
    Сообщения:
    33
    Симпатии:
    1
    Добрый день! Есть страница, на которой нужно вывести комментарии. Выводит так:
    (картинка 1 во вложении)
    А хотелось бы так:
    (картинка 2 во вложении)
    В общем, задача заключается в сворачивании "ответов" в один спойлер (не каждый в своём, а все в одном),
    ещё, если не затруднит, можете посоветовать другой спойлер, не <details>
    Код:
    (!!! много букв !!!)
    PHP:
    1. <!-- PHP SETTINGS BEGIN -->
    2.  
    3.  
    4. <?php
    5. $time=time();
    7.  
    8. $db=mysqli_connect("localhost","id12877352_qwerty","qwerty","id12877352_commets") or die();
    9. $res=mysqli_query($db,"set names utf8");
    10.  
    11. $mess_url='https://3forum.000webhostapp.com/index.php';
    12.  
    13. //получаем id текущей темы
    14. $res=mysqli_query($db,"SELECT id FROM таблица WHERE file_name='".$mess_url."'");
    15. $res=mysqli_fetch_array($res);
    16. $theme_id=0;
    17.  
    18. if (isset($_POST["contr_cod"])){    //отправлен комментарий
    19. $mess_login=htmlspecialchars($_POST["mess_login"]);
    20. $user_text=htmlspecialchars($_POST["user_text"]);
    21. if (md5($_POST["contr_cod"])==$_POST["prov_summa"]){    //код правильный
    22.   if ($mess_login!='' and $user_text!=''){
    23.    if (is_numeric($_POST["parent_id"]) and is_numeric($_POST["f_parent"]))
    24.     $res=mysqli_query($db,"insert into comment
    25.    (parent_id, first_parent, date, theme_id, login, message)
    26.    values ('".$_POST["parent_id"]."','".$_POST["f_parent"]."',
    27.    '".$time."','".$theme_id."','".$mess_login."','".$user_text."')");
    28.    else $res=mysqli_query($db,"insert into comment (date, theme_id, login, message)
    29.   values ('".$time."','".$theme_id."','".$mess_login."','".$user_text."')");
    30.     $_SESSION["send"]="Комментарий принят!";
    31.     header("Location: index.php#last"); #exit;
    32.  }
    33.   else {
    34.    $_SESSION["send"]="Не все поля заполнены!";
    35.    header("Location: index.php#last"); #exit;
    36.  }
    37. }
    38. else {
    39.   $_SESSION["send"]="Неверный проверочный код!";
    40.   header("Location: index.php#last"); #exit;
    41. }
    42. }
    43.  
    44. if (isset($_SESSION["send"]) and $_SESSION["send"]!="") {    //вывод сообщения
    45.     echo '<script type="text/javascript">alert("'.$_SESSION["send"].'");</script>';
    46.     $_SESSION["send"]="";
    47. }
    48. ?>
    49.  
    50.  
    51. <!-- PHP SETTINGS END -->
    52.  
    53.  
    54. <!-- HTML BEGIN -->
    55.  
    56.  
    57. <html lang="ru">
    58. <head>
    59.     <meta charset="UTF-8">
    60.     <link rel="icon" href="images/favicon.ico">
    61.     <title>3 форум - </title>
    62.     <style type="text/css">
    63.         .header {
    64.             height: 120px;
    65.             background-color: green;
    66.             margin: 5px;
    67.             border: 2px solid #DFD;
    68.         }
    69.         .content {
    70.             background-color: green;
    71.             margin: 5px;
    72.         }
    73.         .footer {
    74.             background-color: green;
    75.             margin: 5px;
    76.         }
    77.         .add_comment {
    78.             display: table;
    79.             width: 580px;
    80.             border: 1px solid #000;
    81.             background-color: #6AF;
    82.         }
    83.         .close_hint, .open_hint {
    84.             float: right;
    85.             border: 1px solid #77A;
    86.             background: #6e6;
    87.             width: 100px;
    88.             text-align: center;
    89.             cursor: pointer;
    90.         }
    91.         .close_hint { margin: 5px; color: #F00; }
    92.             .comm_body { padding: 0 5px; background-color: #EEE; text-align:left; }
    93.             .comm_head { padding: 3px; border: 1px solid #77A; background-color: #DFD; }
    94.             .comm_minus { background: url('images/minus.png') no-repeat; }
    95.             .comm_plus { background: url('images/plus.png') no-repeat; }
    96.             .comm_minus, .comm_plus {
    97.             float: right;
    98.             width: 19px;
    99.             height: 18px;
    100.             cursor: pointer;
    101.         }
    102.         .comm_text { display: none; }
    103.         .sp_link { color: #F33; cursor: pointer; }
    104.         .strelka {
    105.             background: url(images/strelka.png) no-repeat;
    106.             border-left: 2px solid #000;
    107.         }
    108.         .strelka_2 { background: url(images/strelka_2.png) no-repeat; }
    109.         #hint { position: absolute; display: none; z-index: 100; }
    110.     </style>
    111.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    112.     <script type="text/javascript">
    113. //Добавление в форму отправки комментария значений id родительских комментариев
    114. function comm_on(p_id,first_p){
    115.     document.add_comment.parent_id.value=p_id;
    116.     document.add_comment.f_parent.value=first_p;
    117. }
    118.  
    119. $(document).ready(function(){
    120. //Показать скрытое под спойлером сообщение
    121. $(".sp_link").click(function(){
    122.     $(this).parent().children(".comm_text").toggle("normal");
    123. });
    124.  
    125. //Показать форму ответа на имеющийся комментарий
    126. $(".open_hint").click(function(){
    127.     $("#hint").animate({
    128.         top: $(this).offset().top + 25, left: $(document).width()/2 -
    129.         $("#hint").width()/2
    130.     }, 400).fadeIn(800);
    131. });
    132.  
    133. //Скрыть форму ответа на имеющийся комментарий
    134. $(".close_hint").click(function(){ $("#hint").fadeOut(1200); });
    135.  
    136. //Получение id оцененного комментария
    137. $(".comm_plus,.comm_minus").click(function(){
    138.     id_comm=$(this).parents(".comm_head").attr("id").substr(1);
    139. });
    140.  
    141. //Отправление оценки комментария в файл rating_comm.php
    142. $(".comm_plus").click(function(){
    143.     jQuery.post("rating_comm.php",{comm_id:id_comm,ocenka:1},rating_comm);
    144. });
    145. $(".comm_minus").click(function(){
    146.     jQuery.post("rating_comm.php",{comm_id:id_comm,ocenka:0},rating_comm);
    147. });
    148.  
    149. //Возврат рейтинга комментария и его обновление
    150. function rating_comm(data){
    151.     $("#rating_comm"+id_comm).fadeOut(800,function(){
    152.         $(this).html(data).fadeIn(800);
    153.     });
    154. }
    155. });
    156. </script>
    157. </head>
    158. <body background="images/bg.jpg">
    159.     <div class="header">
    160.         <h1>header</h1>
    161.     </div>
    162.     <div class="content">
    163.         <h1>content</h1>
    164.      
    165.      
    166.         <!-- COMMENTS AREA BEGIN -->
    167.      
    168.         <!-- COMMENTS LIST AREA BEGIN -->
    169. <?php
    170. function parents($up=0, $left=0) {    //Строим иерархическое дерево комментариев
    171. global $tag,$mess_url;
    172.  
    173. for ($i=0; $i<=count($tag[$up])-1; $i++) {
    174. //Можно выделять цветом указанные логины
    175. if ($tag[$up][$i][2]=='Admin') $tag[$up][$i][2]='<font color="#C00">Admin</font>';
    176. if ($tag[$up][$i][6]==0) $tag[$up][$i][6]=$tag[$up][$i][0];
    177. //Высчитываем рейтинг комментария
    178. $sum=$tag[$up][$i][4]-$tag[$up][$i][5];
    179. if ($up==0) echo '<div style="padding:5px 0 0 0;">';
    180. else {
    181.     if (count($tag[$up])-1!=$i)
    182.         echo '<div class="strelka" style="padding:5px 0 0 '.($left-2).'px;">'; #тут открываем комментарий со стрелкой влево
    183.    else echo '<div class="strelka_2" style="padding:5px 0 0 '.$left.'px;">'; #иначе тут открываем комментарий со вниз стрелкой влево
    184. }
    185. echo '<div class="comm_head" id="m'.$tag[$up][$i][0].'">';
    186. echo '<div style="float:left;"><b>'.$tag[$up][$i][2].'</b></div>';
    187. echo '<div class="comm_minus"></div>';
    188. echo '<div style="float:right; width:30px;" id="rating_comm'.$tag[$up][$i][0].'">';
    189. echo '<b>'.$sum.'</b></div><div class="comm_plus"></div>';
    190. echo '<a style="float:right; width:70px;" href="'.$mess_url.'#m';
    191. echo $tag[$up][$i][0].'"># '.$tag[$up][$i][0].'</a>';
    192. echo '<div style="float:right; width:170px;">';
    193. echo '('.date("H:i:s d.m.Y", $tag[$up][$i][3]).' г.)</div>';
    194. echo '<div style="clear:both;"></div></div>';
    195. echo '<div class="comm_body">';
    196. #if ($sum<0) echo '<u class="sp_link">Показать/скрыть</u><div class="comm_text">';
    197. echo '<div style="word-wrap:break-word;">';
    198. echo str_replace("<br />","<br>",nl2br($tag[$up][$i][1])).'</div>';
    199. echo '<div class="open_hint" onClick="comm_on('.$tag[$up][$i][0].',
    200.     '.$tag[$up][$i][6].')">Ответить</div><div style="clear:both;"></div></div>';
    201.  
    202. if (isset($tag[ $tag[$up][$i][0] ])) parents($tag[$up][$i][0],20); #ну а тут закрываем все стрелки
    203. echo '</div>';
    204. }
    205. }
    206.  
    207. $res=mysqli_query($db,"SELECT * FROM comment
    208.    WHERE theme_id='".$theme_id."' ORDER BY id"); #and moderation=1
    209. $number=mysqli_num_rows($res);
    210.  
    211. if ($number>0) {
    212. echo '<div style="border:1px solid #000000;padding:5px;text-align:center;">';
    213. echo '<b>Последние комментарии:</b><br>';
    214. while ($com=mysqli_fetch_assoc($res))
    215.     $tag[(int)$com["parent_id"]][] = array((int)$com["id"], $com["message"],
    216.     $com["login"], $com["date"], $com["plus"], $com["minus"], $com["first_parent"]);
    217. echo parents().'</div><br>';
    218. }
    219. ?>
    220.      
    221.         <!-- COMMENTS LIST AREA END -->
    222.      
    223. <?php
    224. $cod=rand(1,5); $cod2=rand(5,10);
    225. echo '<div id="last" align="center">';
    226. echo '<form method="POST" action="'.$mess_url.'#last" class="add_comment"';
    227. echo 'name="add_comment" id="hint"><div class="close_hint">Закрыть</div>';
    228. echo '<textarea cols="68" rows="5" name="user_text"></textarea>';
    229. echo '<div style="margin:5px; float:left;">';
    230. echo 'Имя: <input type="text" name="mess_login" maxlength="20" value=""></div>';
    231.  
    232. echo '<div style="margin:5px; float:right;">'.$cod.' + '.$cod2.' = ';
    233. echo '<input type="hidden" name="prov_summa" value="'.md5($cod+$cod2).'">';
    234. echo '<input type="hidden" name="parent_id" value="0">';
    235. echo '<input type="hidden" name="f_parent" value="0">';
    236. echo '<input type="text" name="contr_cod" maxlength="4" size="4">&nbsp;';
    237. echo '<input type="submit" value="Отправить"></div>';
    238. echo '</form>';
    239.  
    240. echo '<form method="POST" action="'.$mess_url.'#last" class="add_comment">';
    241. echo 'Добавить комментарий:';
    242. echo '<textarea cols="68" rows="5" name="user_text"></textarea>';
    243. echo '<div style="margin:5px; float:left;">';
    244. echo 'Имя: <input type="text" name="mess_login" maxlength="20" value=""></div>';
    245. echo '<div style="margin:5px; float:right;">'.$cod.' + '.$cod2.' = ';
    246. echo '<input type="hidden" name="prov_summa" value="'.md5($cod+$cod2).'">';
    247. echo '<input type="text" name="contr_cod" maxlength="4" size="4">&nbsp;';
    248. echo '<input type="submit" value="Отправить"></div>';
    249. echo '</form></div>';
    250. ?>
    251.      
    252.         <!-- COMMENTS AREA END -->
    253.      
    254.     </div>
    255.     <div class="footer">
    256.         <h1>footer</h1>
    257.     </div>
    258. </body>
    259. </html>
    260.  
    261.  
    262. <!-- HTML END -->
    Простите за немного зеленоватый оттенок и краткость содержания, страница в разработке. Заранее очень благодарен за подсказанное решение.
    картинка 1.PNG картинка 2.PNG
    Если будут нужны какие-либо другие элементы страницы, пишите, отправлю!
     
    #1 Oogily, 13 мар 2020
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)