Как сделать свой рейтинг

Звездный рейтинг или как сделать свой рейтинг, это может быть рейтинг статьи, либо голосования, либо просто кнопку оценить, поставить оценку. И чтобы это было просто и понятно! И без базы данных.

И в последний момент решили добавить немного декорирования – сделаем рейтинг звездным, ведь вам бы это понравилось!?

Наша страница стала довольно большой, поэтому нам нужна навигация по странице:

Подробно о "звездном рейтинге"

1. Звездный рейтинг 1 + видео.
2. Рейтинг - вариант № 2.
3. Тестирование и установка звездного рейтинга 2.
4. Рейтинг - вариант № 3 - модифицированный.
5. Тестирование и установка звездного рейтинга 3
6. Пример работы скрипта рейтинга со звездами
7. P.S
8. Скоро - Рейтинг в виде звезд css
9. Скачать

Звездный рейтинг 1 + видео.

Архив из видео - это будет папка № 1 в архиве.

Начнем с предыстории, как-то я искал себе простую голосовалку и из того, что я нашёл это был непонятный скрипт, который фиг настроишь, к нему нужно подключать непонятное количество файлов, их нужно было создавать руками + нужна отдельная папка, чтобы эти файлы не перепутались, и на той странице, где её нужно было поставить, приходилось её открыть, вставить код, закрыть страницу, кинуть её на сервер – согласитесь, что это даже написанное занимает много времени, а если у вас 1000 страниц!?

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




Рейтинг - вариант № 2.

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

Давайте вкратце опишем:

Как будет работать рейтинг!?

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

1.

Самое главное в таком коде –это защита от повторного голосования.

Защита от повторного голосования.

Сразу скажу, что защититься от повторного голосования у вас никак не получится, это нужно создавать громоздкую структуру, вводить в этот алгоритм регистрацию и множество других элементов, и все равно – это никак не поможет. Тот человек, который захочет проголосовать больше чем один раз, все равно найдет возможность — это сделать. Поэтому, мы этим не будем заниматься.

Мы проверим пользователя по ip и создадим для него собственные куки.

Напишите, как вы считаете, для такого простого кода и для этой задачи этого достаточно или нет!? И чтобы вы ещё добавили!?

2.

Будет создаваться автоматически файл txt, в который будем записывать оценку + ip.

3.

Будем получать данные из этого файла в строку, складывать оценки, делить на количество строк.

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

Описание работы голосования – рейтинга.

Давайте, чтобы было побыстрее, не будем разбивать весь код на куски, а начнем с самого верха и будем опускаться вниз и описывать так весь код

Получим ip пользователя:

$ip = $_SERVER["REMOTE_ADDR"];

Отредактировано - 29/06/2018

Путь до файла..

Много проблем возникает с расположением файла:

Строка номер 6 в архиве номер 1(в варианте номер два - мы сделали немного по другому...)

Файл будет создаваться с таким же названием лишь в другой папке…

$page = $_SERVER["DOCUMENT_ROOT"]."/Здесь_путь_до_папки/".$end;

Вы его можете придумать самостоятельно! Здесь нужно слова «Здесь_путь_до_папки» - заменить на папку, которая будет находиться в корневой папке сайта . Если папки две, то будет путь

Первая_папка/вторая_папка/

Получаем содержимое нашего файла:

$text = @file_get_contents($page);

Ну и далее проверяем, нажата ли кнопка

if($_POST['buttom']) {

Проверяем существуют ли куки

if (isset($_COOKIE['_ym_dw'])) {

Если существует, то выводим:

echo "Вы уже проголосовали"; }

Если не существуют

else {

Создаем метку времени с микросекундами, удалим пробел внутри. Это будет уникальный ид.

$metka = microtime(); $metka = str_replace(' ','',$metka);

Создадим с этим числом наши куки на год - time

setcookie("_ym_dw", $metka ,time()+31556926);

Проверим есть ли аипи в нашем тексте

$res_ip = @mb_stripos($text, $ip , 0,"UTF-8");

Если нет, то ..

if ($res_ip == FALSE) {

Создаем переменную, в которой будет находится наша оценка и айпи с разделителем «::».

$otsenka = $_POST['otsenka']."::".$ip."\n";
$f_out = fopen($page,"a+"); //Открываем страницу для записи, записываем в конец файла.
fwrite($f_out, $otsenka); // записываем на страницу с добелённым содержанием

Далее понятно надеюсь без пояснений…

fclose($f_out);
if(fwrite == FALSE)
{
echo 'Не получилось записать';
}
else
{
echo 'Запись прошла';
}
}
else
{
echo "C данным ip вы не можете проголосовать";
}
}
}

Надо уточнить, что данный код должен находиться вверху страницы иначе куки будут выдавать ошибку.

И далее нам осталось вывести наши данные в том месте, где и нужно...

Откроем наш файл, получим оценку в цикле, сложим её и поделим на количество строк.

if(@file($page) == TRUE)

{

$ar = file("$page");

$count ="";

foreach ($ar as $coun)

{

$count = $count + $coun;

}

$result = count($ar);

$sredniya_otsenka = $count/$result;

echo $sredniya_otsenka;

}

О звездном рейтинге.

Цифры и оценка выводом числа – это конечно хорошо, но было бы интереснее вывести эту оценку звездами! Ну, что же, давайте добавим немного декора…

Как это будет работать!?

Берем картинку, например, вот эту, здесь ширина 200px.



Картинку надо поставить на задний фон дива, а вот уже с шириной дива нужно играть…

Сверху мы получили среднюю оценку, при условии, что оценка 5, то, чтобы получить 200px нам нужно 5 умножить на 40.

Создадим переменную, которая будет плясать от средней оценки и добавим туда пиксели…

$width = ($sredniya_otsenka * 40).'px';

Ну и див будет у нас такой:

<div style="width:'.$width.'; height: 50px; background:url(1.png)" title="Оценка статьи '.$sredniya_otsenka.'"></div>



Тестирование и установка звездного рейтинга 2.

20.12.2019.

Добавлено автоматическое создание пути:

Папка 2, файл reyting_2.php, строка 7:

$page = __DIR__."/".md5($end).'.dat';

Данный скрипт, готов к работе, можно скрипт с формой добавить на все страницы сайта, если путь остается - __DIR__ - то файл с оценкой(.dat) будет сохраняться в папке где находится сама страница со скриптом иначе можно указать путь до определенной папки на сервере, все файлы с оценками будут складываться в одну папку

Открываем папку №2 ((архив)) со вторым вариантом рейтинга! В этой папке 2 файла,



кидаем в папку, открываем в браузере, вы должны увидеть такую картину:



Нажимаем проголосовать:

Живой пример рейтинг 2
В чем отличие с рейтингом №3

Это вообще первый рейтинг, который я написал самостоятельно, использовал функцию fopen очень неудобная, с ней еще чего дофига нужно - намного проще вариант file_get_contents .

Используется всего одна картинка.

Немного подправил код, но основное 99% оставил, как было.




Рейтинг - вариант № 3 - модифицированный.

Тестирование и установка звездного рейтинга 3
И пример работы скрипта


1. строчка – запускаем сессию – сессия будет дополнительным ограничителем…

2. строчка ip немного изменённая - в каждую строчку записывается оценка + через разделитель ip.

3. новый вариант создания файла – возьмем весь путь вашей страницы, на которой располагается рейтинг и пропустим её через функцию md5 и путь и файл будет выглядеть таким образом – для примера наша тестовая страница.

https://dwweb.ru/__a-data/__all_for_scripts/__examples/php/svoy_reyting/da5dfbb5d8fe4aa7cf2848f7f64c6418.txt

Не обязательно делать так – это просто вариант, если такой вариант не нравится возьмите создание пути из варианта номер 1. Либо придумайте самостоятельно!

4.Получаем данные из нашего файла.

5.Добавили уникальную сессию – почему!? Не у всех включены куки, поэтому нам помогут сессии! Для каждой страницы с рейтингом будет создаваться уникальная сессия со своим номером, которая будет зависеть от пути к вашему файлу…

7 + 9. Проверяем поля... отправили... или не отправили...

12.Точно такая же история с куками – в отличии от первого варианта – куки тоже будут уникальными только для этой страницы!

Как происходит подсчет рейтинга!?

48. Файл с рейтингом разделяется на строки и заносится в массив

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

Все остальное практически без изменений, что и вариант номер 2. Только немного скомпоновали код и чуть подправили!

Подводные камни...

Ip – будет записан в файл и будет существовать до конца существования файла. Вероятность, что второй человек, получит через неострое время, такой- же ip – ничтожна…, но все же есть такая вероятность!

Если вас это беспокоит, то можно сделать так:

Проверка передаваемых данных в рейтинге

Добавлено 14/07/2018

Я как-то совсем упустил необходимость проверки вводимых данных, даже и объяснить никак не могу… в общем забыл и забыл! Но, поскольку –это живые скрипты, который я сам использую, то время от времени - происходит какое-то просветление и мозг подсказывает то, что ты забыл проверить!

Итак!

Если вы скачали рейтинг, то увидели три варианта рейтинга! Третьим вариантом я как раз и пользуюсь!

Добавлено:

$otsenka =   strip_tags($_POST['otsenka']);

Смысл данной проверки – что посылаемые данные должны состоять из одного символа ! Если это не так, то выводим сообщение + сразу все запишем сессии, куки, айпи – чтобы он не смог вообще никак проголосовать..

if(!$otsenka[1]) 

{

//весь исполнительный поместили сюда..

}

else

{

$answer_otsenka = 'Ах ты озорник!';    

$_SESSION[md5($_SERVER['REQUEST_URI'])] = md5($_SERVER['REQUEST_URI']);

setcookie (md5($_SERVER['REQUEST_URI']), md5($_SERVER['REQUEST_URI']), time()+365*24*60*60);

}




Тестирование и установка звездного рейтинга 3

24.12.2019/

Проходит некоторое время и мы забываем, как это работает и работает ли вообще!

Проверим работоспособность скрипта в папке под номером 3.

Открываем папку номер 3 или третий вариант звездного рейтинга, и перемещаем все содержимое папки в свою папку, в которой и будем тестировать данный рейтинг.

Слева мы видим, три файла, справа видим 4 файла - этот файл уже результат голосования в нашем рейтинге...



Ну и внешний вид, ничем не отчается от приведенного рабочего примера.





Пример работы скрипта рейтинга со звездами

1). Из первого пункта нет смысла делать пример... это версия для видео, основная часть из рейтинга №3!

Рабочий,живой пример рейтинга № 2. 2). Живой пример рейтинг 2
Рабочий,живой пример рейтинга № 3. 3). Живой пример рейтинга № 3


P.S.

Проходит какое-то время и начинаешь забывать, что здесь такое происходит!

Итого, после разборок 20.12.2019

Всего три рейтинга, разбросали по пунктам!

1). В первом пункте в видео рассказывается о рейтинге, предпоследняя модификация скрипта. Это папка №1 в папке с архивом.

2). Второй вариант - это самый первый звездный рейтинг, который я написал.

живой пример из пункта 2


3). Третий, уже модифицированный - последний вариант! Чем отличается третий от первого!? Единственная разница - это в написании пути, в первом варианте он фиксированный, т.е. файл с данными записывается в определенный файл(это сделано для примера), а в третьем варианте - название файла будет создаваться в зависимости от адреса страницы, где будет находится скрипт с рейтингом!

живой пример из пункта 3


Очередная ревизия(скоро) 20.02.2021

Вроде бы только вчера я редактировал эту страницу, а прошло 2 года...

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

Какие планы!?

Добавим несколько вариантов создания звездного рейтинга с помощью css. Пример смотри ниже.

+ сохранение данных php + javascript

Рейтинг в виде звезд css

Контента еще нет...

Скачать все варианты рейтинга со звездами