Дмитрий Приходько - PHP. Разработка модуля комментариев для сайта

*/

.aopensays {

color: #6f6f6f;

}

.aopensays:hover {

color: #497270;

}

.aaddsays {

color: #6f6f6f;

}

.aaddsays:hover {

color: #53918e;

}

.areply {

color: #6b5344;

}

.areply:hover {

color: #53918e;

}

.notaddsays {

color: #6b5344;

}

.notaddsays:hover {

color: #f25c05;

}

/* из test */

/*.................Ответы................... */

.block_reply {

margin-left: 3%;

position: relative;

/* background:green; */

}

.wrap_reply_form {

position: relative;

/* background: orange; */

}

.reply_form {

/* border: 1px solid green; */

padding: 1%;

background: white;

float: none;

margin-right: 1%;

display: flow-root;

}

.reply_delete_button {

background: whitesmoke;

margin-right: 1%;

padding: 3px;

border-radius: 4px;

float: right;

}

.avareply {

margin: 3px 10px;

border-right: 1px solid #cacaca;

padding: 0 5px;

width: 40px;

height: auto;

}

.topreply {

padding: 2px 12px;

border-bottom: 1px solid #cacaca;

border-radius: 5px;

}

.wrapsayform {

position: relative;

border: 1px solid lightgray;

border-radius: 4px;

margin: 2% 0;

z-index: 0;

clear: both;

/* background:Градиент */

/* background: linear-gradient(45deg, #3e84bf 25%, transparent 25%, transparent 75%, #292929 75%),

linear-gradient(45deg, #292929 25%, transparent 25%, transparent 75%, #292929 75%) 0.1875em 0.1875em,

radial-gradient(at 50% 0, #484847, #090909);

background-size: 0.375em 0.375em, 0.375em 0.375em, 100% 100%; */

/* В линейку */

/* background-color: #FFFFEF;

background-image:

linear-gradient(90deg, transparent 98px, #ED82AD 98px, #ED82AD 100px, transparent 100px),

linear-gradient(#eee 1px, transparent 0px),

linear-gradient(90deg, #eee 1px, transparent 0px);

background-size:100% 100%, 20px 20px, 20px 20px;

background-position: 0 0, -1px -1px, -1px 1px; */

}

.sayform {

background: white;

margin: 1%;

padding: 0;

border-radius: 5px;

border: 1px solid lightgray;

}

.topprintcomment {

padding: 0 10px;

border-bottom: 1px solid #cacaca;

margin-left: 15px;

}

.wrapreplyform {

display: flow-root;

background: whitesmoke;

margin-right: 1%;

}

.idreplynum {

float: left;

color: brown;

padding: 5px 15px;

}

h3.user {

margin: 0 1em 0 1em;

padding: 0 0 5px 0;

color: cadetblue;

font-weight: normal;

position: relative;

text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);

font-size: 24px;

line-height: 40px;

font-family: "Carrois Gothic", sans-serif;

border-bottom: 1px dashed cadetblue;

}

h4.user {

margin: 0 1em 0 1em;

padding: 0 0 5px 0;

color: cadetblue;

font-weight: normal;

position: relative;

text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);

font-size: 24px;

line-height: 40px;

font-family: "Carrois Gothic", sans-serif;

border-bottom: 1px dashed cadetblue;

}

h4.formname {

margin: 0 1em 0 1em;

padding: 0 0 5px 0;

color: cadetblue;

font-weight: normal;

position: relative;

text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);

font-size: 24px;

line-height: 40px;

font-family: "Carrois Gothic", sans-serif;

border-bottom: 1px dashed cadetblue;

}

h5.user {

margin: 0 1em 0 1em;

padding: 0 0 5px 0;

color: cadetblue;

font-weight: normal;

position: relative;

text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);

font-size: 24px;

line-height: 40px;

font-family: "Carrois Gothic", sans-serif;

border-bottom: 1px dashed cadetblue;

}

h1.user {

margin: 1em 1em 0.75em 1em;

padding: 0 0 5px 0;

color: #6b5344;

font-weight: normal;

position: relative;

text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);

font-size: 36px;

line-height: 40px;

font-family: "Carrois Gothic", sans-serif;

border-bottom: 1px dashed #7e6d4c;

}

h2.user {

margin: 1em 1em 0.75em 1em;

padding: 0 0 5px 0;

color: #6b5344;

font-weight: normal;

position: relative;

text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);

font-size: 36px;

line-height: 40px;

font-family: "Carrois Gothic", sans-serif;

border-bottom: 1px dashed #7e6d4c;

}

.addusers {

margin: 1%;

}

Стили в дальнейшем, можно настроить как угодно.

42. Установка модуля на сайт

Модуль готов. Приступаем к практической его установке. Ищем подходящий шаблон. Мне понравился выбор шаблонов на сайте Эрика Байгузина [5]. Один из выложенных на нем шаблонов я и решил использовать. Это шаблон EUCLID. Ссылка:

https://bayguzin.ru/main/shablonyi/shablonyi-dlya-bloga/kachestvennyj-sovremennyj-dizajn-bloga.-minimalistichnyj-prostoj-chitabelnyj.html

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

1. Скачиваем шаблон.

2. Размещаем шаблон на сервере (хостинге). В нашем случае размещаем в папке C:\OSPanel\domains\. Задаем (или используем зарегистрированное) имя сайта.

В данном случае я назвал сайт euclid.com.

3. Вкладываем в корень сайта папку chat.

4. Проверяем наличие в корне сайта файла .htaccess:

• Если он отсутствует, переносим наш файл .htaccess из папки chat в корень сайта.

• Если присутствует, копируем в него содержимое нашего файла .htaccess.

5. Выбираем страницу, на которой будут размещаться комментарии. Смотрим содержимое сайта. Как видно из рис. 21 сайт небольшой, состоит из трех HTML страниц about, blog, index, папки со стилями CSS и папки с Javascript. Файл .htaccess отсутствовал, поэтому на скриншоте файл .htaccess из папки chat.

Рис. 21. Содержимое сайта euclid.com.

Внимание! Если запускаете модуль на хостинге пропишите действующие параметры подключения к СУБД и БД в файлах: dsn.php и createbase.php

Давайте начнем с главной страницы. Открываем файл index.html сайта в редакторе. Контроллер 1 будет располагаться в самом начале документа. Запускаем сайт определяемся с местами, где у нас будут располагаться кнопки --">