Скрипт новостной ленты php. Cвоя новостная лента на PHP

Я нагуглил за вас. Я долго искал плагин, который позволит мне быстро и без проблем, без гигантских объемов кода и хитрых премудростей сделать такой простой эффект. И я нашел его и очень рад этому. Фактически, этот пост я пишу еще и для себя, как закладку, чтобы заглянуть сюда когда в следующий раз потребуется сделать галерею изображений с автоскроллом.

Пишем html для ленты изображений

Тут классика. Используем список ul и оборачиваем его в div. На этот див мы будем натравливать плагин, так что ему нужен идентификатор. В моем случае это класс.

• 
• 
• 
• 
• 
• 
• 
• 

Важно чтобы изображения были одного размера. Иначе будет смотреться не так эффектно. Поэтому придется напрячься и обработать их.

Готовим JavaScript для карусели изображений

Нужно подключить jQuery. Как это сделать, думаю, все знают. А еще нужно подключить библиотеку jcarousel Lite. Она все и делает.

После загрузки страницы, нужно натравить плагин на нашу ленту изображений и произойдет чудо!

$(function() { $(".mycarousel").jCarouselLite({ auto: 2000, speed: 1000, circular: true, visible: 4 }); });

Это все! Реально. Больше ничего не нужно. Не нужно подключать и настраивать темы. Не нужно делать какие-то контролы и писать дополнительный код. У вас есть стандартный код списка изображений и единственный вызов плагина с параметрами. Это так, как должно быть. Я в восторге, если честно.

О возможных параметрах и их значениях можно прочитать в оригинале на страничке плагина . Ну а я вкратце переведу вам что зачем.

Возможные параметры галереи

btnPrev - идентификатор, определяющий кнопку "Назад". Это нужно если вы делаете управление прокруткой с помощью кнопок.

btnNext - идентификатор для кнопки "Вперед".

btnGo - вы можете сделать переход по номерам элементов. При клике на какой-то элемент, карусель должна быть проскроллена на определенный итем. Подробнее написано в документации.

mouseWheel - true/false значение, определяющее будет ли карусель прокручиваться от скролла мышки. Требует плагин mousewheel.

auto - true/false значение, определяющее будет ли лента крутиться сама.

speed - скорость прокрутки в милисекундах.

easing - эффект прокрутки. Можно сделать эффект подпрыгивания. Требует плагина easing.

vertical - может нужно, чтобы картинки крутились вертикально?

circular - будет ли лента останавливаться по достижении последней картинки или будет крутиться по кругу?

visible - сколько элементов видно

start - с какого элемента начинать

scroll - по сколько элементов прокручивается

beforeStart - callBack функция, вызывающаяся до начала анимации

afterEnd - callBack функция, вызывающаяся в конце анимации

Что объединяет все информационные сайты? Что обязательно присутствует на главной странице? Если вы подумали о новостях, то оказались правы! Сегодня мы с вами разберемся как раз в том, как сделать собственную новостную ленту с админкой и защитой на php. Заранее скажу, что дело это совсем не сложное, но и не двухминутное, так что запаситесь всем, что вам нужно (пивом, колой, соком, чипсами...) и вперед! Для начала продумаем структуру новостной ленты. Безусловно, мы будем использовать mysql, а как же без него! В mysql-базе, которую назовем mynews, будут храниться данные. Какие? Cейчас объясню. Разместим в базе mynews таблицу под названием news. А в таблице - вот что:

News_id - MediumInt длина 9 AutoIncrement, это будет primary key.
Ntext - текст новости, тип Text.
Ntitle - заголовок новости, тип varchar, длина 255
Ndate - это дата, varchar, длина 255
Nuser - а это имя автора новости, varchar, длина 255.

Как все это создать? Почитайте предыдущие тексты на этом сайте, там есть вся необходимая информация. А от себя могу посоветовать отличную, очень удобную программу Mysql-Front, в которой все таблицы создаются визуально. Но идем дальше. Теперь разберемся в том, какие скрипты нужно написать. Я предлагаю написать следующие: admin.php, сreatenews.php (этот скрипт и будет создавать новость), tnews.php (будет отображать новость). Можно было написать скрипт и для удаления новостей, но это вы сможете сделать и сами после выполнения упражнения. Итак, начнем. Для начала напишем скрипт createnews.php. В нем пока будет мало понятного, но все станет на свои места после того, как вы посмотрите на листинг admin.php.

Листинг 1. Createnews.php

"". addslashes ($ ntitle)."" // эта строка нужна для того, чтобы в заголовке правильно отображались кавычки.

Как видите, вместо mysql-даты используется varchar, так проще. Теперь, чтобы все в рассмотренном скрипте встало на свои места, нужно написать админку. Напишем.

Листинг 2. Admin.php

Добавление новостей Добавление новостей Заголовок новости:
Ваше имя:
Текст

Очевидно, используется простая html форма. Так зачем же создавать php-скрипт? Затем, что мы совершенно не подумали о безопасности. Безопасность админки можно обеспечить, запретив доступ случайным пользователям, не знающим логин и пароль. Злоумышленник сможет узнать пароль только тогда (и не раньше), когда получит доступ к скрипту, т.е. к директории. Измените admin.php следующим образом:

Листинг 3. Модифицированный admin.php

Добавление новостей Добавление новостей Заголовок новости:
Ваше имя:
Текст

Давайте разберемся в написанном скрипте. В самом начале двум переменным присваиваются текущие логин и пароль, затем осуществляется проверка введенных. Если введенные данные содержат " (пусто), или не равны тем, что хранятся в переменных, выводится печальная для ][акера надпись "Неверное имя пользователя или пароль". В противном случае выводится "Авторизация прошла успешно" и идет html -код. В самом конце описана форма ввода.

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

Листинг 4. tnews.php:

На что здесь следует обратить внимание? Во-первых, на запрос

$request = "SELECT ntext , ntitle , ndate , nuser FROM news ORDER BY ndate DESC LIMIT 15";

Здесь написано вот что: выводить новости, отсортированные по дате, причем на странице показывать только 15 первых новостей. Функция mysql _ fetch _ array ($ result) возвращает массив, который записывается в переменную $ row . Для тех, кто не знает, что такое & nbsp, говорю: это свободное пространство. Все, что осталось сделать - вставить tnews в некоторую готовую страничку, например вот так:

Include("./tnews.php")

Вот и все, что я хотел рассказать. Если появятся вопросы, задавайте их смело на нашем .

Обычно процесс разработки динамической ленты новостей требует использования языка разработки внутренних интерфейсов. Очевидно, все может оказаться очень простым, если вы знакомы с Rails или PHP, но мы хотели бы представить вам метод отображения RSS-ленты с использованием jQuery. Проблема заключается в том, как осуществить доступ к ajax-запросам с внешнего сервера, а затем конвертировать эту XML-информацию в нечто такое, что было бы просто прочесть.

Мы сконцентрируемся на Feed API от Google, работать с которым гораздо проще, чем кажется. Здесь есть несколько возможностей, позволяющих обыграть некоторые опции и получить доступ к другим шаблонам. Нам нужно лишь отобразить первую страницу записей в ленте в виде заголовок+URL. Как только вы заставите этот скрипт работать, вы сможете без труда оформить внешний вид, и даже частично включить в ленту новостей контент. Ниже вы можете ознакомиться с демо, чтобы понять, над чем мы сегодня будем работать.

Приступаем

Первый этап заключается в разработке базового документа с интегрированной jQuery-библиотекой. Мы воспользуемся несколькими функциями, приведенными в Stack Overflow, которые помогут нам добиться работоспособности RSS-ленты. Обычно, при написании веб-приложения вроде этого, вам нужно осуществлять доступ к кросс-доменному парсингу посредством языка разработки внутренних интерфейсов. Для веб-разработчиков проблему обычно решает язык PHP.

Так как здесь мы используем Feed API, он и займет место скрипта на серверной стороне. Таким образом, все можно будет считывать посредством jQuery Ajax, а затем конвертировать в JSON, что будет гораздо проще парсить. Давайте взглянем на шапку нашего документа, которая включает jQuery, а также кастомный скрипт parser.js.

Automated jQuery RSS Feed Demo

Преимущество нашего кода заключается в том, что мы можем заполнять все при помощи javascript. Все внутренние RSS-элементы на страницы будут вписаны в HTML, но они не будут отображены в исходном коде документа. Весь контент будет публиковаться динамически, и вы сможете быстро редактировать источники ленты, которые можно менять при каждом обновлении страницы.

Automated jQuery RSS Feed Listing

Это и есть все содержимое тела документа. Каждый класс.feedcontainer используется для применения одних и тех же стилей к заголовкам и ссылкам. ID-имена указываются при помощи jQuery, и таким образом у нас есть возможность запускать собственные RSS-функции, а затем извлекать новый контент при помощи метода.html().

RSS-парсинг в jQuery

Мы можем пропустить большую часть CSS-стилей, так как они очень просты. Взгляните на нашу таблицу стилей, если вам хочется увидеть, как реализуется выравнивание. Но давайте перейдем к parser.js, где у нас можно видеть две функции, одна из которых специфическим образом отвечает за конверсию RSS-JSON. Другая отвечает за то, чтобы атрибут “title” в RSS-ленте автоматически выводился в верхнем регистре.

Function parseRSS(url, container) { $.ajax({ url: document.location.protocol + "//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=" + encodeURIComponent(url), dataType: "json", success: function(data) { //console.log(data.responseData.feed); $(container).html(""+capitaliseFirstLetter(data.responseData.feed.title)+""); $.each(data.responseData.feed.entries, function(key, value){ var thehtml = ""+value.title+""; $(container).append(thehtml); }); } }); }

Такая функция parseRSS() была приведена в похожем вопросе к Stack Overflow, и она представляет собой отличное решение, которое работает только с jQuery. Нам по прежнему нужен будет сервер, так как метод.ajax() не может происходить без HTTP-потока. Но вам не потребуется поддержка каких-либо других языков разработки внутренних интерфейсов. В целом, мы можем доверить Google работу с этим ресурсом, так как он незаменим для разработчиков.

Код функции довольно прост и понятен, если вы знакомы с.ajax(). Сперва мы вносим в запрос URL, который представляет собой ссылку на удаленный Google Feed API. Нам нужно, чтобы dataType был выставлен на JSON, и после успешного ajax-запроса мы можем запустить новую функцию для отображения HTML-содержимого. Обратите внимание на то, что параметр, который мы вносим, называется data, и он содержит в себе JSON-ответ.

Цикл Response

Обратите также внимание на то, что мы оставили комментарий у кода console.log(data.responseData.feed) на случай, если вы захотите отобразить результат всего содержимого JSON. Вы можете показать нечто более, чем просто заголовок и URL. Но мы специально привели пример таким образом. У вас есть возможность добавлять и другой контент по собственному усмотрению, прямо при помощи данной функции.

Внутри функции успешного ajax-запроса мы встроили цикл.each(), который проходит по пунктом внутри ленты. Учтите, что доступ к этому массиву может быть осуществлен из data.responseData.feed.entries, который мы преобразуем в пару ключ-значение. Здесь все очень просто, так как нам нужна всего лишь одна переменная string для содержания HTML. Затем, при помощи jQuery .append(), весь контент добавляется на страницу.

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

Function capitaliseFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); }

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

Подытожим

RSS-ленты сегодня до сих пор остаются очень популярными среди веб-разработчиков, так как представляют собой отличный метод передачи данных между веб-сайтами. Это позволяет интернет-маркетологам без труда публиковать обновления в Twitter или Facebook прямо с сайта посредством RSS-рассылки. Мы рекомендуем вам скачать исходный код нашего примера, и внимательно его изучить. Вдобавок, вы можете понять, сможете ли вы использовать подобный функционал в собственных сайтах и проектах.

Исходники в архиве.

У вас есть сайт или просто личная страничка? Мы поможем сделать их интереснее!

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

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

Это просто!

Настройка и установка кода займет не более 5 минут.

Для установки наших новостей на свой сайт вам не нужно иметь свой сервер, знать PHP/Perl, MySQL/MS SQL/PostgreSQL — как правило, хватает минимального знакомства с HTML и CSS! Не стоит волноваться даже, если в HTML и CSS вы не сильны — можете просто выбрать уже готовый вариант ленты новостей, останется просто скопировать и вставить код. При необходимости мы поможем вам сделать и это. Смело задавайте вопросы, пишите о своих предложениях и пожеланиях: (ICQ) 75932371 или (e-mail) info@сайт

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

Как это работает?

Все очень просто — сейчас, прямо тут, по шагам, вы настроете новостную ленту (выбирете тематику, количество новостей и пр.), затем выберете вариант отображения, настроете (при желании) дизайн по своему вкусу, проверите внешний вид своей ленты новостей и — ура! — осталось просто скопировать код на свою страничку.

Итак, пошагали!

Шаг 1. Настройте ленту новостей

Собирать новости	Авто Технологии Web Культура Музыка Кино Спорт Финансы СПб Россия В мире Политика Из жизни Оружие
В ленте не более	5 10 15 последних новостей
В каждом анонсе показывать
Вариант отображения	стандартный альтернативный, без рейтинга как в Twitter, светлый как в Twitter, темный, с проявляющейся датой (кроме IE) карбон, с проявляющейся датой (кроме IE) свой собственный Структура DOM новостной ленты для создания собственного стиля: div#nn_news
Кодировка русских символов	UTF-8 Windows-1251

Шаг 2. Получите коды для размещения и проверьте внешний вид

В соответствии с вашими настройками был создан код, который вы уже можете встроить в свою страничку — и новости уже у вас!

Если же вы чувствуете в себе силы, обладаете некоторыми знаниями HTML и CSS (или просто любите поэкспериментировать) — можете изменять содержимое этих окон вручную и сразу смотреть — как видоизменилась ваша новостная лента:

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

Код вызова — установите его туда, где будет выводится новостная лента:

Важно: откроется новое окно, в котором вы увидете, как будет выглядеть ваша новостная лента!

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

Wikipedia

На многих сайтах можно увидеть кнопки или , что означает, что на этом сайте доступна лента новостей в формате RSS. Читателям сайта такой сервис удобен, поскольку при помощи Rss-агрегаторов, например, Yandex.Lenta или Kanban.ru можно собрать собственную новостную ленту и читать новости с разных сайтов в одном месте или получать их на свой e-mail при помощи сервиса Rss2Email . Подробнее об RSS читайте, например, в Компьтерре .

В этой статье речь пойдет не об использовании RSS-лент и агрегаторов, а о том, как быстро сделать новостную ленту на сайте при помощи программы RSS.PHP и MySql.

Начальные условия

Итак, у вас есть сайт, на котором есть поддержка PHP и работает база данных MySql (кстати, очень распространенное сочетание). Из базы, в которой хранятся тексты вашего блога или анонсы новостей и будем получать данные для нашей ленты. Лента будет строиться динамически, непосредственно при запросе, так что нужен только соответствующий скрипт. Вы можете написать его сами, но можете взять уже готовый

Немного теории

Для начала немного теории. Для нашей ленты будем использовать формат RSS 2.0, для тех кому интересно, направляю к описанию формата, который вы найдете . А мы будем использовать не все элементы, а только те, без которых действительно не обойтись:

Элемент	Описание
title	Заголовок канала.
link	Ссылка на главную страницу сайта.
description	Описание канала.
language	Язык, на котором написан канал. Например, ru - русский
copyright	Копирайт
managingEditor	Электронная почта редактора канала.
webMaster	Электронная почта веб-мастера.
pubDate	Дата публикации информации в канале.
lastBuildDate	Время последнего изменения канала.
category	Определяет категорию, к которой принадлежит канал.
Item	Собственно содержимое канала. Должен быть хотя бы один элемент.

Item

Элемент	Описание
title	Заголовок
link	Ссылка на полный текст
description	Аннотация
category	Категория
pubDate	Дата публикации статьи. Некоторые агрегаторы не будут отображать статью, если указанная дата еще не настала. Но далеко не все.

Поскольку RSS - это подмножество XML, то мы должны получить в итоге примерно следующее: Если будете что-то менять в скрипте, то проверяйте его на соответствие стандарту на сервисах Feed Validator или RSS Validator
Запуск программы

Программа состоит из следующих файлов: rss.php - файл запуска, rss.inc - включаемый файл с описанием класса, conn.inc - файл с описанием параметров соединения с базой данных.

Для запуска программы измените данные о соединении с БД в файле conn.inс, измените параметры ленты в файле rss.php и спишите в любой удобный каталог на Вашем web сервере, хоть в корневой. Не забудьте проверить структуру данных базы MySql, для программы можно использовать например, такую:

CREATE TABLE BLOG (ID int(11) NOT NULL default "0", title varchar(50) default NULL, description text default NULL, link varchar(200) default NULL, date date default NULL, category varchar(100) NOT NULL default "", ab varchar(10) NOT NULL default "", PRIMARY KEY (ID)) TYPE=MyISAM;

после этого у вас будет лента с адресом

Что дальше?

А теперь не забудьте поставить на видном месте кнопку , и добавить в страницы вашего сайта код между тегами :
, чтобы браузеры понимали, что у вас есть лента. И, конечно же, зарегистрировать ленту в поисковой машине, например, http://blogs.yandex.ru/add.xml и в каталоге http://blogs.yandex.ru/add-catalogue.xml

Бесплатно скачать программу для создания RSS-ленты, Rss.php (3 Кб) можно