Как да направите сериен календар с fullCalendar
Като много хора обичам да гледам американски телевизионни предавания като House, Big Bang Theory и т.н. В момента повечето представления са в средата на сезона.
Понеже излизат в различни дни и ги гледам предимно през уикендите, през седмицата трябва да качвам свежи епизоди на винта. Как да следите кой сериал е пуснат и струва ли си да го търсите в тракерите, ако гледате 5 сериала, а жена ви има още 3?
Подготовка
И така, какво ще правим?
- Ще експортираме графика за издаване и информацията за сериала в XML от сървъра tvrage.com
- Анализирайте с PHP
- Съхранявайте в MySQL
- Дисплей с прекрасен плъгин за jQuery - fullCalendar
Таблицата tv_shows за сериали. СЪЗДАВАНЕ НА ТАБЛИЦА, АКО НЕ СЪЩЕСТВУВА `tv_shows` ( `sid` int(10) NOT NULL, `rusname` varchar(255) NOT NULL, `engname` varchar(255) NOT NULL, `totalseasons` tinyint(4) NOT NULL, `time` time NOT NULL, текстът на `описание` НЕ е NULL, `img` varchar(255) НЕ е NULL, текстът на `link` НЕ е NULL, УНИКАЛЕН КЛЮЧ `sid` (`sid`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8;
Таблицата tv_episodes за отделни епизоди. СЪЗДАВАНЕ НА ТАБЛИЦА, АКО НЕ СЪЩЕСТВУВА `tv_episodes` ( `sid` int(10) NOT NULL, `seasonnum` tinyint(4) NOT NULL, `epnum` tinyint(4) NOT NULL, `airdate` date NOT NULL, `title` varchar(255) NOT NULL, `link` varchar(255) NOT NULL, УНИКАЛЕН КЛЮЧ `sid` (`sid`,`seasonnum`,`epnum`), КЛЮЧ `sid_2` (`sid`,`airdate`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8;
Поискайте данни от tvrage.com
Сайтът tvrage.com има страхотна възможност за запитване на информация за телевизионни предавания. Базата данни за тях е просто огромна, хиляда елемента. Можете да прочетете тук.
За удобство на работа ще издадем клас на php. Нуждаем се също от чудесен клас за парсване на XML.
Файл tvshows.php: клас tvShows
var $url = 'http://services.tvrage.com/feeds/'; //Url за събиране на информация
var $db_shows = 'tv_shows'; // Таблица за сериали var $db_episodes = 'tv_episodes'; // Таблица за епизоди var $db_calendar = 'calendar'; // Таблица за събития в календара (ще го направим по-късно)
/* Списък със серии и техните > Етикетът showid ще съдържа желаното число */ var $shows = array( 'House' => 3908, 'The Big Bang Theory' => 8511, 'Lie to Me' => 19295, 'Dexter' => 7926, 'How I Met Your Mother' =& gt; 3918, 'Fringe' =>18388, 'Castle' =>19267, 'Bones' =>2870, 'The Walking Dead' =>25056, 'The Mentalist' =>18967, 'Cougar Town' =>226 26, 'Ловци на митове' => 4605 );
// Първи метод: извличане на информация от интернет и поставяне на ВСИЧКИ серии от дадените серии в таблица функция getFeed()
изискват 'xml2array.php'; // Свържете xml класа за анализ
// Преминете поредицата и поискайте информация от сървъра по техния ID foreach ($this->показва като $sid) $feed = file_get_contents($this->url.'episode_list.php?s > $xml = xml2array($feed, 0); // Анализ на отговора $name = $xml['Show']['name']; $totalseason s = $xml['Show']['totalseasons']; $episodes = $xml['Show']['Episodelist']['Season']; if (count($episodes) == 1)
mysql_query("ВМЪКНЕТЕ ИГНОРИРАНЕ В `$this->db_shows` (`sid`, `engname`, `totalseasons`) СТОЙНОСТИ ('$sid', '$name', '$totalseasons') НА АКТУАЛИЗАЦИЯ НА ДУБЛИРАН КЛЮЧ `totalseasons` = '$totalseasons'"); /* Тъй като всички епизоди се съхраняват в базата данни на tvrage под поредни номера, се оказва House сезон 7, епизод 156, и аз съм по-доволен да видя7-ми сезон, 8-ми епизод - ръчно преброяваме сериала и го нулираме при новия сезон За тези, които не се нуждаят от него, премахнете $i и в mysql заявката го променете на $v[epnum] */ $i = 1; foreach ($епизоди като $tmp) $ep = $tmp['епизод']; foreach ($ep като $v) mysql_query("ВМЪКНЕТЕ ИГНОРИРАНЕ В `$this->db_episodes` (`sid`,`seasonnum`,`epnum`,`airdate`,`title`,`link`) СТОЙНОСТИ ('$sid', '$i', '$v[seasonnum]', '$v[airdate] ', \"$v[заглавие]\", '$v[връзка]') "); > $i++; > > > >
Проверяваме. $tv = нови tvShows; $tv->getFeed();
Сериалите и епизодите трябва да се появяват в таблиците. Сега трябва да отидете в таблицата tv_shows и да добавите българските заглавия на сериалите, описание, време на излизане, път до снимката, както и линкове за изтегляне. Всичко това не е необходимо, но ние се опитваме за себе си, нали? Трябва да го направите красиво.
Сега да преминем към втората фаза.
За да покажем серията, ще използваме много хубав jQuery плъгин - fullCalendar. И за създаване на подсказки - плъгин Qtip.
Ясно е, че трябва да включите jquery, преди да използвате плъгини.
Създаваме празен html файл и там пишем каквото искаме. Основното нещо е да включите jquery и fullcalendar, както и да предпишете div с > Поставете цялото управление на календара в отделен файл calendar.js $(document).ready(function() $('#calendar').fullCalendar( < // прилагане на fullCalendar към #calendar заглавния елемент: < ляво: 'предишен,следващ днес', център: 'title', дясно: 'месец,дневен редСедмица,дневен ден ' >, isRTL: невярно, firstDay: 1, monthNames: ['януари','февруари','март','април','май','юни','юли','август','септември','октомври','ноември','декември'], monthNamesShor t: ['Ян','П Сев','Мар','Апр','Май','Юни','Юли','Август','Септември','Окт','Ноем','Дек'], имена на дни:['Неделя','Понеделник','Вторник','Сряда','Четвъртък','Петък','Събота'], dayNamesShort: ['Неделя','Пон','Вт','Сряда','Чет','Пет','Съб'], buttonText: предишен: ' ◄ ', следващ: ' ► ', предишна година: ' > ', today: 'днес', month: 'month', week: 'week', day: 'day' >, dayClick: function(date, allDay, jsEvent, view) if (allDay) $('#calendar').fullCalendar('gotoDate', date); $('#calendar').fullCalendar('changeView', 'agendaWeek'); $('#calendar').fullCalendar('refetchEvents'); > else var date2 = date.getTime(); /* Тук можете да вмъкнете своя собствена функция, за да създадете ново събитие. Това не се отнася за сериали - следователно editEvent('new', '0', date2); е забранено. */ > >, allDayText: 'Цял ден', columnFormat: , titleFormat: ">, defaultView: 'month', axisFormat: 'HH:mm', timeFormat: '>, eventRender: function(event, element) element.qtip( content: position: >, предаване: вярно, соло: вярно, стил: >, покажи: , ефект: >, скрий: , ефект: > >);
>, събития: 'http://domain.com/test/tvshows.php?action=getEvents' // Адрес, където получаваме масива със събития за календара >);
>); Няма да описвам всички пълни настройки на календара - има доста от тях и всички те са добре описани на началната страница на проекта. Мога само да кажа, че кодът по-горе е резултат от дълго бърникане по календара и е подходящ за почти всяка ситуация и проект. Само два елемента трябва да бъдат променени:
> 2. Параметър, който казва къде да получите масив с данни за събития в календара. събития: 'http://domain.com/test/tvshows.php?action=getEvents' Повече подробности тук
За да обобщим. Имаме клас, който ще извлича информация от tvrage.com. Има календаркойто иска от този клас информация за събития в календара и има подсказка за всяка серия, която също се изисква от tvshows.php.
Следователно в класа tvshows.php липсват поне 3 метода: 1. Превръщане на списък от серии в събития в календара. 2. Изпратете запитване към базата данни за събития в календара и генерирайте масив със събития за fullCalendar. 3. Направете заявка в базата данни за подробна информация за епизода и генерирайте html с отговора, за да го вмъкнете в подсказката qTip.
Календарни събития и оставащи методи
За да съхранявате събития в календара, има смисъл да създадете нова таблица в календара. СЪЗДАВАНЕ НА ТАБЛИЦА, АКО НЕ СЪЩЕСТВУВА `calendar` ( `id` int(10) NOT NULL auto_increment, `title` varchar(255) collate utf8_unicode_ci NOT NULL, `start` datetime NOT NULL, `end` datetime NOT NULL, `description` text collate u tf8_unicode_ci NOT NULL, ` allday` tinyint(1) NOT NULL, `done` tinyint(1) NOT NULL по подразбиране '0', PRIMARY KEY (`id`), UNIQUE KEY `title` (`title`,`start`,`end`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLL ATE=utf8_unicode_ci;
Също така трябва да добавим нови методи към tvshows.php. Има доста много код и той нарушава хабратопика, така че вижте пълния tvshows.php в прикачения архив.
Сега, когато всичко е готово, обяснявам как работи за най-малките. Потребителят отваря уеб страница, в която вижда календар, влиза в сървъра при стартиране, получава данни за събития и ги изобразява върху себе си. Когато се щракне върху събитие, се прави ajax заявка към сървъра и в подсказката се зарежда разширена информация за събитието (в нашия случай за епизод от сериала). Това е всичко. Цялата работа на сървъра се извършва от tvshows.php, цялото потребителско взаимодействие е calendar.js.
Всички компоненти са безплатниможе да се използва навсякъде. Календарът работи чудесно като плановик за събития, рождени дни и др. Вярно, това е тема за друга статия.
Ето какво трябва да получим:
И ето как изглежда в жив проект на webstartpage.ru, въпреки че функционалността на календара е значително разширена там:
Е, прикачвам резултатите от цялото това писане, което трябва да се разопакова на сървъра, в тестовата папка и да проверя хост променливата във файла calendar.js, както и настройката за връзка с базата данни в tvshows.php
Архивът съдържа всички скриптове, плъгини, картинки за серии и опростен css дизайн, които са използвани в тази тема.
Hardcore conf в C++. Каним само професионалисти.
Написа добър текст - получи покана.
Предварителната модерация работи в Sandbox: преди публикуване всички материали преминават през грижовните лъчи на НЛО.
С голяма вероятност те няма да преминат предварителна модерация: