Урок 17. Новостная лента.

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

Детали

В нашем уроке будет рассмотрен пример с использованием БД MySQL . К каждой новости будет привязано изображение и установлен счётчик просмотров.

Функции, которые будут использованы в нашем примере:

1. Проектирование таблицы для хранения данных.
2. Работа с БД MySQL. Запись, редактирование, чтение и удаление.
3. Подсчет просмотров.

Скрипт новостной ленты

Прежде чем приступить к программированию, необходимо составить небольшое тех.задание, на основании которого будет работать наш скрипт.

Технические параметры скрипта:

1. На главной странице отображается максимально 3 новости;
2. У каждой новости есть дата появления на главной (т.е. новости могут быть внесены заранее);
3. Новость на главной отображается с изображением и неполным текстом; Рядом с каждой новостью стоит ссылка “Подробнее”;
4. При переходе по ссылке “Подробнее” отображается полная версия новости;
5. Рядом с каждой новостью на главной отображается число просмотров.

Начнем с проектирования таблицы. Новость имеет несколько параметров, которые необходимо хранить в БД:

1. id (INT) - идентификатор новости.
2. title (VARCHAR) - Заголовок новости;
3. news (TEXT) - Текст новости.
4. img_url (VARCHAR) – Адрес изображения привязанного к новости;
5. date_up (INT) - Дата появления новости.
6. views(INT) - количество просмотров.

SQL-запрос для создания таблицы.

CREATE TABLE `tnews` (
`id` INT( 5 ) NOT NULL AUTO_INCREMENT ,
`title` VARCHAR( 255 ) NOT NULL ,
`news` TEXT NOT NULL ,
`img_url` VARCHAR( 255 ) NOT NULL ,
`date_up` INT( 10 ) NOT NULL ,
`views` INT( 5 ) NOT NULL ,
PRIMARY KEY ( `id` )
) ENGINE = MYISAM

Таблицу создаем в любой БД, ее название будет tnews. Поля таблицы я расписал выше.

Панель управления новостями.

Чтобы новость появилась на странице, необходимо ее занести в базу данных, поэтому начнем с программирования панели управления.

admin.php

Данный скрипт позволит добавлять, редактировать, удалять новости. Как и в других примерах эта страничка будет максимально простой. Изначально мы будем видеть список новостей, рядом с которыми расположим служебные ссылки (редактирование[E] и удаление[D]). Наверху будет расположена ссылка для добавления новости.

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

Следующий фрагмент кода необходим для листинга существующих новостей с возможностью совершения различных действий над ними, т.е. добавление, удаление и редактирование.
Чтобы блок отобразился по умолчанию, будем проверять GET-переменную action. Если она ничего не содержит, то выводим фрагмент:

Чтобы получить список новостей, производим выборку из таблицы с новостями при помощи запроса Q1:

$q1= mysql_query(”SELECT id,title,date_up FROM tnews”);

Транскрипция запроса

$q1= mysql_query(”ВЫБРАТЬ id,title,date_up ИЗ tnews”);

Как видно из транскрипции происходит выборка данных из ячеек id, title и date_up, после этого разбираем результат запроса и выводим все данные при помощи цикла while. Внутри цикла мы показываем дату выхода новости (date_up), заголовок новости, который автоматически будет урезан до 35 символов функцией substr. Далее располагаются служебные ссылки редактирования и удаления. Прошу обратить внимание на то, как передаются параметры (action и id).

Следующий фрагмент кода покажет как будет добавлятся новость. Чтобы следующий блок отобразился, мы передаем по ссылке параметр GET , а точнее $_GET['action'] будет содержать new.

Внутри условия, которое проверяет переменную $_GET['action'], содержиться еще одно условие, отвечающее за обработку данных. Чтобы добавить какую либо новость, сначала при отсутсвии действий (переменная $_POST['do'] присвоенная кнопке пуста) отображаем форму для ввода данных – заголовок, дату появления, текст новости и изображение в формате jpeg.Обратите внимание, что у тега form атрибут action не пустует, в нем указываем ?action=new, чтобы после нажатия на кнопку информацию получил блок добавления новости.После заполнения всех полей и выбора изображения, мы нажимаем на кнопку тем самым присваивая $_POST['do'] значение. Далее работа передается блоку “исключения”. Полученные POST-данные отдаем функции clear() и переопределяем их. В итоге получаем “чистые” значения, которые готовы к записи в таблицу, но для начала отдаем массив $_FILES функции upload(). Не беспокойтесь, все функции мы рассмотрим дальше, сейчас же разбираемся с логикой. Если функция возращает значение TRUE, т.е. положительный результат, создаем уникальное имя для файла при помощи функции md5() и выполняем запрос $Q2:

$q2 = @mysql_query(”INSERT INTO tnews VALUES(NULL,’”.$title.”‘,’”.$text.”‘,’”.$img_url.”‘,’”.$date.”‘,’0′)”);

Транскрипция запроса:

$q2 = @mysql_query(”ВСТАВИТЬ В tnews ЗНАЧЕНИЯ(NULL,’”.$title.”‘,’”.$text.”‘,’”.$img_url.”‘,’”.$date.”‘,’0′)”);

Из транскрипции видно, что все данные через запятую мы вносим в таблицу tnews. Напоминаю что первое значение присваивается полю id и ничего не содержит, так как при создании таблицы мы указали этому полю auto_increment (автодобавление).Проверяем результат запроса $q2, если все ок – выводим сообщение echo ‘Новость добавлена. <br/><a href=”admin.php”>на главную</a>’; Ниже выводятся результаты исключений – сообщения об ошибках. Все, этот блок мы рассмотрели. Переходим к удалению новости.

Удаление новости.

Для удаления новости необходимо знать только один параметр – это идентификатор новости id.

Блок удаления будет работать, если action равно del, т.е. $_GET['action'] == ‘del’.

Для того чтобы удалить из таблицы данные создаем запрос $Q3:

$q3 = @mysql_query(”DELETE FROM tnews WHERE id=’”.$id.”‘”);

Транскрипция запроса:

$q3 = @mysql_query(”УДАЛИТЬ ИЗ tnews ГДЕ id=’”.$id.”‘”);

Легко понять, что в результате выполнения запроса мы удаляем ряд, у которого id равно значению $_GET['id'], предварительно прошедшего проверку и определенной в лице переменной $id. Если результат запроса существует , то “редиректим” пользователя при помощи функции header() на главную страницу панели управления.

Редактирование новости

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

Но для того чтобы этот блок заработал, необходимо задать переменной $_GET['action'] значение edit и идентификатор новости id.

Процесс редактирования достаточно запутанный. С одной стороны код похож на фрагмент добавления новости, но в то же время содержит отличия. Первое – это запрос на получение данных, которые уже содержатся в базе под определенным id. Рассмотрим запрос $Q4:

$q4 = @mysql_query(”SELECT * FROM tnews WHERE id=’”.$id.”‘”);

Транскрипция запроса:

$q4 = @mysql_query(”ВЫБРАТЬ * ИЗ tnews ГДЕ id=’”.$id.”‘”);

Я думаю комментарии излишни. Запрос достаточно простой, в результате которого получаем ряд значений соответствующих идентификатору id. Результат запроса преобразуем в массив при помощи функции mysql_fetch_array() . Далее полученные значения  подставляем в форму.  Так как дата в таблице хранится “склееная”, используем функцию substr() для вырезки необходимого куска из строчки ГГГГММДД и определяем их в переменные $d,$m,$y. Помимо всех текстовых и числовых данных не забываем выводить текущую картинку. После внесения изменений и нажатия на кнопку мы задаем $_POST['do'] значение, в следствии чего заставляем работать вторую часть блока редактирования новости. Тут начинается самое интересное =). Полученные данные мы “скармливаем” функции clear() и переопределяем их также как и в случае добавления новости. Спросите зачем? А я скажу Вам – надо). Не забываем собирать дату в одну строчку.

Далее следует два пути: первый это если массив $_FILES существует и функция upload() возвращает TRUE, второй это когда массив $_FILES не существует. В первом случае мы проверяем результат возвращенный функцией upload() и составляем запрос $Q5:

$q5 = mysql_query(”UPDATE tnews SET title=’”.$title.”‘,news=’”.$text.”‘,img_url=’”.md5(basename($_FILES['IMG']['name'])).”‘,date_up=’”.$date.”‘ WHERE id=’”.$id.”‘”);

Транскрипция запроса:

$q5 = mysql_query(”ОБНОВИТЬ tnews УСТАНОВИТЬ title=’”.$title.”‘,news=’”.$text.”‘,img_url=’”.md5(basename($_FILES['IMG']['name'])).”‘,date_up=’”.$date.”‘ ГДЕ id=’”.$id.”‘”);

С виду запрос выглядит длинным, но не содержит в себе каких то непонятных действий. В нем мы устанавливаем новые значения полям title,news,img_url,date_up полученные из формы ввода данных. Помимо исполнения запроса на изменения данных, мы удаляем старый файл в папке функцией unlink(). Во втором случае массив $_FILES не существует и функция upload() возвращает FALSE, вследствии чего срабатывает исключение и мы выполняем запрос $Q6:

$q6 = mysql_query(”UPDATE tnews SET title=’”.$title.”‘,news=’”.$text.”‘,date_up=’”.$date.”‘ WHERE id=’”.$id.”‘”);

Транскрипция запроса:

$q6 = mysql_query(”ОБНОВИТЬ tnews УСТАНОВИТЬ title=’”.$title.”‘,news=’”.$text.”‘,date_up=’”.$date.”‘ ГДЕ id=’”.$id.”‘”);

Хочу сказать, что это такой же запрос как и $Q5, единственная разница в том, что здесь не обновляется img_url, т.к. мы не меняли картинку, поэтому информация о изображении остается неизменной.

Результат обоих запросов проверяем, и если они содержат результат, то выводим соответствующее сообщение.

В итоге мы получаем небольшую панель управления, с минимальным набором функций, способную обеспечить оперативное управление новостями. “Черновой” вариант предоставлен на скриншоте ниже:

Давайте теперь обратимся к файлу с функциями.

Файл функций

Файл носит название functions.inc.php и подключается в самом начале файла admin.php. Содержит он в себе  вспомогательные функции, одна из которых чистит строки от всякой “нечисти”, а вторая по заданным параметром загружает картинку на сервер в указанную папку. Начнем с первой:

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

В теле функции содержиться условие, которое проверяет длину строки, т.е. если ничего не передали в функцию, она вернет значение FALSE, если же длина строки не равна нулю, то возвращаем “очищенную” строку.

Вторая функция помогает нам загружать картинку в папку.

С этой функцией частично мы встречались в этом уроке. Имя функции носит имя upload, в качестве аргументов передаем массив $_FILES, url-папки, в которую будут загружаться изображения и максимальный размер загружаемого файла в Кб, по умолчанию функции сообщается число 1024, т.е. 1 мб.
В  основе функции совершаются простые логические “проверки” и закачка файла в папку, предварительно закодированного функцией md5(). При не совпадении заданных параметров функция возвращает false. Как видите есть проверка на тип файла, он может быть только jpg. При необходимости можете поменять на другой mime-тип.

Самая сложная часть позади, теперь осталось разработать пользовательскую часть.

Файл конфигурации

Небольшой файл содержащий в себе настройки для подключения к базе данных и название папки папки, в которой хранятся изображения.

config.inc.php

Пользовательская часть.

Напоминаю вам что пользовательский скрипт отображает на странице 3 новости с картинками, заголовками и количество просмотров.

Сперва хочу вам показать как будут визуально выглядеть наши странички.

При нажатии ссылки “Подробнее” мы переходим на другую страницу, которая выглядит так:

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

Теперь давайте посмотрим как это все работает.

index.php

Т.к. мы используем html-шаблоны и небольшой список стилей, то наш код будет смешанным. Первоначально мы подключаем файл конфигурации, и только после этого подключаемся к базе и выбираем таблицу.

Заметьте, php-код закрывается, после него идет html+css:

Далее следует php-код, отвечающий за вывод списка новостей.

Данный блок будет работать если $_GET['id'] пуста. Для вывода новостей используем запрос $Q1:

$Q1 = mysql_query(”SELECT * FROM tnews WHERE date_up <=’”.date(’Ymd’).”‘ ORDER BY id DESC LIMIT 3 “);

Транскрипция запроса:

$Q1 = mysql_query(”ВЫБРАТЬ * ИЗ tnews ГДЕ date_up <=’”.date(’Ymd’).”‘ СОРТИРОВАТЬ ПО id DESC ПРЕДЕЛ 3 “);

Внутри запроса используется сравнение данных в поле date_up с текущей датой. Предположим у нас в базе есть 5 новостей с разными датами появления – 14,13,12,12,11 ноября. Если у нас текущая дата 13 число, то из базы будет выбрано 3 новости за 13,12,12 число, потому что установлен предел 3 записи.
Как происходит сравнение?
В поле date_up дата имеет формат 20081113,20081112,20081112 и тд. Т.е. дата появления является простым числом, которое мы можем сравнивать с текущей датой:
20081113<=20081113 – true
20081112<=20081113 – true
20081112<=20081113 – true
20081114<=20081113 – false, новость не попадет в выборку.

Также внутри запроса используется сортировка по id новости в порядке добавления.

После этого проверяем количество выбранных рядов функцией mysql_num_rows(). Если значение больше нуля, то запускаем цикл внутри которого вставляем HTML-шаблон.

Обратите внимание здесь опять был использован “разрыв” php-кода, а внутри html появились какие то странные строки – <?=$r['title'];?>.

Эти строчки отвечают за вывод информации, это один из способов вставки кода в шаблон. Строка приведенная выше отобразит заголовок новости в нужном нам месте. Знак равенства заменяет функцию echo. Далее все просто, снова открываем php-код и завершаем блок.Кому не особо понятен такой вариант можно поступить по старинке, использовать оператор echo и указать переменные в необходимых местах html-кода без разрыва кода:

Если мы переходим по ссылке “Подробнее”, то в этом случае задается GET переменная id, после этого работает следующий блок:

Внутри исключения чистим входящую переменную $_GET['id'] и переопределяем ее. Далее совершаем запрос в базу $Q2:

$Q2 = mysql_query(”SELECT * FROM tnews WHERE id=’”.$id.”‘”);

Траснкрипция запроса

$Q2 = mysql_query(”ВЫБРАТЬ * ИЗ tnews ГДЕ id=’”.$id.”‘”);

Как видно из запроса мы выбираем все данные из таблицы, где индетификатор соответствует id . Далее проверяем результат функцией mysql_num_rows(), если значение равно единице, то используем функцию mysql_fetch_array для получения массива $r.

После следует фрагмент html-кода, внутри которого используются вставки кода. После вывода новости необходимо добавить просмотр к новости. Для этого используем простенький запрос:

mysql_query(”UPDATE tnews SET views=views+1 WHERE id=’”.$id.”‘”);

Транскрипция запроса:

mysql_query(”ОБНОВИТЬ tnews УСТАНОВИТЬ views=views+1 ГДЕ id=’”.$id.”‘”);

Данный запрос добавляет единицу к существующему значению поля views таблицы tnews, где индетификатор соответсвует id.

Новостная лента.

Готовый пример можно посмотреть здесь
Скачать скрипт новостной ленты

Заключение

Главной особенностью скрипта является его простота для новичков. Данный скрипт можно доработать под свои нужды и дополнить необходимым функционалом. Отдельно хочу  сказать про дизайн. Был использован самодельный шаблон с небольшой интеграцией css. Ничего сложного я не стал придумывать. Если кто то желает помочь с дизайном и версткой – милости просим.
Если кому то необходимо, то можно дополнить скрипт архивом новостей. В целом же это достаточно интересный пример, на котором вы можете потренироваться и кое что для себя усвоить.

Подпишись на RSS, впереди много интересного.

73 Responses to “Урок 17. Новостная лента.”

Страницы: [8] 7 6 5 4 3 2 1 » Show All

1. 73
   Artem Says:
   Январь 24th, 2010 at 01:51

   друзья, а подскажите как указать путь к другой папке для загрузки.
   Например /images/news/

   Спасибо!

2. 72
   Метатроныч Says:
   Декабрь 17th, 2009 at 13:54

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

   Fatal error: Cannot redeclare clear() (previously declared in Z:\home\666.za\www\freshnews\functions.inc.php:9) in Z:\home\666.za\www\report\functions.inc.php on line 13

3. 71
   kupidon Says:
   Декабрь 2nd, 2009 at 01:33

   блин у админка не пашет типа код корявый((

Страницы: [8] 7 6 5 4 3 2 1 » Show All