пятница, 18 мая 2018 г.

Кликабельные новости. Каждая новость на отдельной странице + соц. кнопки от Яндекс.

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


С чем будем работать? Файлы /pages/_news.php и корневой .htaccess.
Цели модификации? Рассмотрим работу GET-параметра, немного пофильтруем и присобачим социальный блок от Яндекса с кнопками "поделиться".
Так же мы выстроим некоторую алгоритмизацию работы. Это необходимо для создания прямой логической цепи. Может показаться немного неудобным прыгать от одного файла к другому, но вы поймете так лучше. 

Что же, давайте для начала откроем файл _news.php.

1. Ищем строку:

<td align="left"><h3><?=$news["title"]; ?></h3></td>

Это строка отображения заголовка новости из выбранного массива. 
Заменяем ее на:

<td align="left"><h3><a href="/news/show/<?=$news["id"];?>"><?=$news["title"]; ?></a></h3></td>

Теперь, все заголовки новостей стали кликабельны. Можно посмотреть. Данный код будет генерировать ссылки вида: site.ru/news/show/id, где id - это реальный номер новости, например site.ru/news/show/20. Перейдя по ссылке - ничего не произойдет, только сервер начнет Вас ругать. Перейдем к следующему пункту, чтобы исправить это недоразумение.

2. Откроем корневой .htaccess. Найдем строку:

RewriteRule ^news(/?)+$ index.php?menu=news [L]

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

RewriteRule ^news/show/([0-9]+)(/?)+$ index.php?menu=news&show=$1 [L]
Для того, чтобы разобрать структуру настройки правил, следует заводить отдельный, долгий и нудный пост. Сравните, что добавилось. Мы расширили правило и сообщили серверу о том, что после news/ мы можем так же добавлять каталог show и цифровые значения для него от 0 до 9, без ограничения. Если настанет то время, когда у Вас будет миллион новостей, то вы так же с легкостью откроете ссылку вида site.ru/news/show/1000000 :)

Сохраните файл и откройте снова новости на сайте, перейдите по ссылке, кликнув по заголовку новостей. Открывая любую новость, Вы не увидите изменений. Будет открываться весь список новостей. Только будет меняться ссылка в адресной строке браузера. Настало время для использования GET-параметра. Будем ловить ссылку и по ней определять, какую новость будем показывать пользователю.

3. Открываем снова файл _news.php.
В нужном месте, в блоке PHP, например перед строчкой

$db->Query("SELECT * FROM db_news ORDER BY id DESC");

Напишем:

if(isset($_GET['show'])) {

}else {

Сразу же добавим в конце закрывающую скобку } сразу ниже строки:

}else echo "<center>Новостей нет :(</center>";

Ниже GET и будем кодить! :)
Для начала поясню, что мы сделали: Мы запустили условие проверки на установку (или использование) параметра GET с аргументом show (так как в ссылке именно после show мы должны прописывать цифровой id новости и получать необходимый текст).
Если у нас ссылка имеет вид site.ru/news/show/6, то в таком случае GET аргумент show должен принять значение 6. Давайте проверим? В фигурных скобках пишем:

$id=intval($_GET['news']);
echo "<br>".$id. "- выбранный id новостей";

Все получится так:

if(isset($_GET['show'])) {
   $id=intval($_GET['show']);
   echo "<br>".$id. "- выбранный id новостей";
}else {

При помощи intval() мы говорим скрипту о том, что готовы хранить в переменной только целочисленные значения. Например 1, 2, 5, 10 или 100. Символы, буквы и тд не пройдут. Вот так работает фильтрация! Без нее возможен взлом!

Ну что, проверяем? Откроем любую новость и посмотрим на результат.
Страница нам будет повторять цифру в конце ссылки и показывать сообщение на странице. Можно убрать теперь из кода строку:

echo "<br>".$id. "- выбранный id новостей";

Теперь мы храним в переменной $id номер новости. Осталось сделать выборку. Я думаю, что это будет легко :)

$db->Query("SELECT * from db_news WHERE id='$id'");
$news2=$db->FetchArray();

Таким образом мы получили массив нужной новости и храним все в массиве $news2.
Выводим результат:
echo $news2["title"]."(от ".date("d.m.Y",$news2["date_add"]).")<br><br>";
echo $news2["news"];

В итоге получаем:

if(isset($_GET['show'])) {
   $id=intval($_GET['show']);
   $db->Query("SELECT * from db_news WHERE id='$id'");
   $news2=$db->FetchArray();
   echo $news2["title"]."(от ".date("d.m.Y",$news2["date_add"]).")<br><br>";
   echo $news2["news"];
}else {

Я думаю, что осталось немного места и для бонуса от яндекса! Ну это уже по желанию! )))
Заходим по ссылке - https://tech.yandex.ru/share/ и настраиваем внешний вид, желаемые кнопки и тд. Предположим, что мы получили код такого вида:

<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
<script src="//yastatic.net/share2/share.js"></script>
<div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir"></div>

Теперь добавим этот код в страницу с новостью. Весь код будет выглядеть так:

if(isset($_GET['show'])) {
   $id=intval($_GET['show']);
   $db->Query("SELECT * from db_news WHERE id='$id'");
   $news2=$db->FetchArray();
   echo $news2["title"]."(от ".date("d.m.Y",$news2["date_add"]).")<br><br>";
   echo $news2["news"];
   echo '<br><br><script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
<script src="//yastatic.net/share2/share.js"></script>
<div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir"></div>';
}else {

Удалось? Напиши о своих результатах!


Комментариев нет:

Отправить комментарий