Slyweb
На разработку сайта! Скидки 50%!

Календарь новостей на jQuery и PHP!

Заказчики меня часто спрашивают сделать вывод новостей на jQuery. Поэтому я решил привести для всеобщего пользования все скрипты наиболее интересного вывода новостей на PHP jQuery и SQL.

Возможности плагина

  • отображение ajax календаря;
  • вывод новостей из базы данных;
  • эффекты и анимация на jQuery;
  • возможность лёгкой установки и настройки

Сразу же представляю Вам пример календаря новостей:

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

Календарь

  
ПнВтСрЧтПтСбВс
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30

Кончно - те, кто не терпит и не хочет разбираться может скачать архив, со структурой указанной ниже, но я настоятельно рекоммендую прочитать всю статью, естественно не для снижения показателя отказов, а для экономии Вашего времени:

./
index.php
config.php
calendar.php
news.js
style.css
calendar.sql
ajaxc.php
ajax-loader.gif

Стурктура таблицы базы данных будет следующей, хотя Вы можете изменить под свои нужды:

  • Код
  • Чистый код
  1.CREATE TABLE IF NOT EXISTS `test` (
  2. `id` mediumint(9) NOT NULL AUTO_INCREMENT,
  3. `name` text,
  4. `opisanie` text,
  5. `razdel` varchar(50) NOT NULL,
  6. `avtor` text,
  7. `count` int(10) NOT NULL,
  8. `comment` int(11) NOT NULL,
  9. `time` datetime NOT NULL,
10. `arhiv` varchar(255) NOT NULL,
11. `href` varchar(50) DEFAULT NULL,
12. `si` varchar(255) NOT NULL,
13. `bi` varchar(255) NOT NULL,
14. `metka` varchar(255) NOT NULL,
15. PRIMARY KEY (`id`),
16. FULLTEXT KEY `statii` (`opisanie`,`name`,`razdel`,`avtor`)
17.) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=0;

        
Листинг 1.

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

Календарь будет на php, весь php календаря:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<?php
  2.require_once "calendarClass.php";
  3.$db = new Calendar();
  4.$months=array(1 => "Январь",2 => "Февраль",3 => "Март",4 => "Апрель",5 => "Май",6 => "Июнь",7 => "Июль",8 => "Август",9 => "Сентябрь",10 => "Октябрь",11 => "Ноябрь",12 => "Декабрь");
  5.$month = (isset($_GET['m'])) ? intval($_GET['m']) : date('n');
  6.$year = (isset($_GET['y'])) ? intval($_GET['y']) : date('Y');
  7.$day = (isset($_GET['d'])) ? intval($_GET['d']) : date('j');
  8.
  9.$mktime=mktime(0,0,0,$month,1,$year);
10.$daysamount=date('t',$mktime)+1;
11.$weeks=floor($daysamount/7);
12.$firstday=date('w',$mktime)-1;
13.$dday=date('d');
14.$mmonth=date('n');
15.//Календарик :)
16.$sel_year='<select name="y" style="width:53">';
17.for($y=2008;$y<=date("Y");$y++) {
18.    $sel_y=($year == $y)?' selected ':'';
19.    $sel_year.="<option value='".$y."' ".$sel_y." >".$y."</option>";
20.}
21.$sel_year.='</select>';
22.$sel_month='<select name="m" style="width:85">';
23.for($m=1;$m<=12;$m++) {
24.    $sel=(check_date($month) == $m)?' selected ':'';
25.    $sel_month.="<option value='".$m."' ".$sel." >".$months[$m]."</option>";
26.}
27.$sel_month.='</select>';
28.$calendar='
29.                 <div id="c">
30.<table cellspacing="2" cellpadding="2" class="calendar_table">
31.<tr><td colspan="7"><form id="ajax-calendar" method="get" action="'.$_SERVER['PHP_SELF'].'">'.$sel_month.' '.$sel_year.<input type="hidden" name="d" value="'.$day.'" /><input value="»" id="knopka" type="submit" style="width:15" /></form></td></tr>
32.<tr align="center"><td class="working_days"><b>Пн</b></td><td class="working_days"><b>Вт</b></td><td class="working_days"><b>Ср</b></td><td class="working_days"><b>Чт</b></td><td class="working_days"><b>Пт</b></td><td class="weekend"><b>Сб</b></td><td class="weekend"><b>Вс</b></td></tr><tr align="center">';
33.
34.$db->sql_query("SET NAMES 'utf8'");
35.$db->sql_query("SET CHARACTER SET 'utf8'");
36.$result = $db->sql_query("SELECT * FROM news WHERE MONTH(time) = $month AND YEAR(time) = $year");
37.
38.$newarr = array();
39.$i = 0;
40.while($str = $result->fetch_array(MYSQLI_ASSOC)) {
41.
42.
43.    $romonth[$i++] = (int)date('m',strtotime( $str['time']));
44.    
45.    $rowday[$i++] = date('d',strtotime( $str['time']));
46.}
47.
48.
49.//echo in_array('2011-12-25 00:00:00',$newarr);
50.
51.for($i=0;$i<$firstday;$i++) {$calendar.="<td>   </td>";}
52.for($q=1;$q<$daysamount;$q++) {
53.    if($mktime <= time()) {
54.        if($month == $mmonth && $dday < $q) {
55.            $lnk=$q;
56.        } else {
57.        if($q < 10) {
58.            $dd = (int)$q;
59.        }
60.        else {
61.            $dd = (int)$q;
62.        }
63.        
64.        
65.        if(in_array($dd,$rowday) & in_array($month,$romonth))
66.            {
67.            
68.            $lnk='<a class="'.$alltime.'" href="y='.$year.'&m='.$month.'&d='.$q.'">'.$q.'</a>';
69.            }
70.            else {
71.            $lnk="$q";
72.            }
73.
74.        
75.            
76.        }
77.    } else {
78.        $lnk=$q;
79.    }
80.    if (($q+$firstday)%7==1){$calendar.="</tr><tr align='center'>";}
81.    if($day == $q && $month == $mmonth) {
82.        $calendar.="<td class='tooday'> <b>$lnk</b> </td>";
83.    } else {
84.        $calendar.="<td> $lnk </td>";
85.    }
86.}
87.$calendar.="</tr></table>
88.            </div>                
89.
90.                    
91.            ";
92.function check_date($date){
93.    $date = ($date<10)?'0'.$date:$date;
94.    return $date;
95.}
96.header('Expires: Mon, 26 Jul 1997 05:00:00 GMT' );
97.header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . 'GMT');
98.header('Cache-Control: no-cache, must-revalidate');
99.header('Pragma: no-cache');
100.header('Content-Type: text/html; charset=utf-8;');
101.echo $calendar;
102.?>
103.

        
Листинг 2.(calendar.php)

Думаю у Вас не должно возникнуть трудностей в понимании работы календаря, основной код содержится в цикле, который выводит дни недели в таблицу:

  • Код
  • Чистый код
  • Копировать в буфер
  1.for($q=1;$q<$daysamount;$q++) {
  2.    if($mktime <= time()) {
  3.        if($month == $mmonth && $dday < $q) {
  4.            $lnk=$q;
  5.        } else {
  6.        if($q < 10) {
  7.            $dd = (int)$q;
  8.        }
  9.        else {
10.            $dd = (int)$q;
11.        }
12.        
13.        
14.        if(in_array($dd,$rowday) & in_array($month,$romonth))
15.            {
16.            
17.            $lnk='<a class="'.$alltime.'" href="y='.$year.'&m='.$month.'&d='.$q.'">'.$q.'</a>';
18.            }
19.            else {
20.            $lnk="$q";
21.            }
22.
23.        
24.            
25.        }
26.    } else {
27.        $lnk=$q;
28.    }
29.    if (($q+$firstday)%7==1){$calendar.="</tr><tr align='center'>";}
30.    if($day == $q && $month == $mmonth) {
31.        $calendar.="<td class='tooday'> <b>$lnk</b> </td>";
32.    } else {
33.        $calendar.="<td> $lnk </td>";
34.    }
35.}
36.

        
Листинг 3.

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

Для того чтобы получить все даты существующих новостей и проверить их с помощью функции in_array нам нужно собрать все даты в единый массив:

  • Код
  • Чистый код
  • Копировать в буфер
  1.$romonth = array();
  2.$rowday = array();
  3.$newarr = array();
  4.$i = 0;
  5.while($str = $result->fetch_array(MYSQLI_ASSOC)) {
  6.
  7.
  8.    $romonth[$i++] = (int)date('m',strtotime( $str['time']));
  9.    
10.    $rowday[$i++] = date('d',strtotime( $str['time']));
11.}
12.

        

Класс "Calendar" для работы с таблицами mysqli - часто пригождается для выполнения простых запросов, ничего сложного в нём нет(класс содержится в файле calendarClass.php в архиве с другими файлами к этой статье, скачать его можно ниже):

  • Код
  • Чистый код
  1.<?php
  2.include_once "config.php";
  3.
  4.class calendar {
  5.
  6.private $mMysqli;
  7. function __construct(){
  8.
  9. $this->mMysqli = new mysqli(HOST, USER, PASSWORD, DATABASE);
10. }
11.
12. public function sql_query($query){
13. $this->mMysqli->query("SET NAMES 'utf8'");
14. $this->mMysqli->query("SET CHARACTER SET 'utf8'");
15. $result = $this->mMysqli->query($query);
16.
17. return $result;
18. }
19. public function sql_numrows($query){
20.
21. $result = $query->num_rows;
22.
23. return $result;
24. }
25.
26. function __detsruct(){
27.
28. $this->mMysqli = close();
29.
30. }
31.}
32.?>
33.

        
Листинг 5.

Всё что мы сделали выше только php и html, сейчас перейдём к самому интересному - jQuery.

  • Код
  • Чистый код
  • Копировать в буфер
  1.$(document).ready(function(){
  2.
  3.    function loader(){
  4.        
  5.         $('#loadpage').css({
  6.            'display': 'block',
  7.            'z-index': 6000,
  8.            'background-color': '#fff',
  9.            'padding': '10px',
10.            'font': 'bold 11px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif',
11.            'border': '1px solid #d8d8d8',
12.            'color': '#7d7c7d',
13.            '-webkit-box-shadow': '0 0 10px #f1f1f1',
14.             '-moz-box-shadow': '0 0 10px #f1f1f1',
15.                    'box-shadow': '0 0 10px #f1f1f1',
16.            '-moz-border-radius': '6px',
17.                '-webkit-border-radius': '6px',
18.                    'border-radius': '6px',
19.            'text-align': 'center'
20.         })
21.         .empty();
22.        
23.            var myel = $('#loadpage');
24.            
25.            myel.css('position','absolute');
26.            myel.css('top', ($('#bodycalendar').height() - myel.height()) / 2 +'px');
27.            myel.css('left', (( $('#bodycalendar').width() - myel.width()) / 2)-10 + 'px');
28.
29.    }
30.    
31.    if (!$.isFunction($.fn.on)) {
32.        $('#ajax-calendar').live('submit',getCallendar);
33.    } else {
34.        $('body').on('submit','#ajax-calendar', getCallendar);
35.    }
36.    
37.    function getCallendar (){
38.        var s = $('#ajax-calendar').serialize();
39.        // 1 запрос - обновление календаря
40.        $.ajax({
41.        
42.         type: "GET",
43.         data: s,
44.         url: "calendar.php",
45.         dataType: "html",
46.         cache: "false",
47.         beforeSend: function() {
48.
49.            loader()
50.                
51.            $('#c').fadeOut();    
52.        
53.         },
54.         success: function(result) {
55.            $('#loadpage').hide();
56.                $('#c').fadeIn(function(){
57.                    $('#c').html(result);
58.                    
59.                });    
60.
61.         }
62.         });
63.                
64.        return false
65.    };
66.
67.    if (!$.isFunction($.fn.on)) {
68.        $('#c a').live('click',getNews);
69.    } else {
70.        $('body').on('click','#c a',getNews);
71.    }
72.    
73.
74.    
75.    function getNews(){
76.        var c = $(this).attr('href');
77.        
78.    
79.    // 2 запрос - загрузка новостей
80.        $.ajax({
81.        
82.         type: "GET",
83.         data: c,
84.         url: "ajaxc.php",
85.         dataType: "html",
86.         cache: "false",
87.         beforeSend: function() {
88.
89.            loader()
90.                
91.                
92.        
93.         },
94.         success: function(result) {
95.
96.            
97.            $("#centerb").fadeOut(2000,function(){
98.                $('#centerb').html(result);
99.
100.                $('#centerb').fadeIn('slow');
101.                $('#loadpage').hide();
102.            });
103.            
104.         }
105.
106.         });
107.                
108.        return false
109.    }
110.if(loadlastnews) {
111.$('#c a:last').trigger('click');
112.}
113.});
114.
115.

        

jQuery код содержит два ajax запроса. Первый - запрос на обновление самого календаря. Второй - для загрузки новостей. Функция loader() создаёт элемент индикатор загрузки, который центрируется в блоке. Для начала выполнения запросов я использую обработчик функцию «live», данная функция перехватывает события не только существующих элементов, но и вновь создаваемых в структуре DOM, пример функции live:

  • Код
  • Чистый код
  1.$('#ajax-calendar').live('submit',function(){
  2. var s = $('#ajax-calendar').serialize();
  3. // 1 запрос - обновление календаря
  4. $.ajax({
  5.
  6. type: "GET",
  7. data: s,
  8. url: "calendar.php",
  9. dataType: "html",
10. cache: "false",
11. beforeSend: function() {
12.
13. loader()
14.
15. $('#c').fadeOut();
16.
17. },
18. success: function(result) {
19. $('#c').fadeIn(function(){
20. $('#c').html(result);
21. $('#loadpage').hide();
22. });
23.
24. }
25. });
26.
27. return false
28. });
29.

        
Листинг 7.

Аналогичным образом используется функция live для запроса, осуществляющего загрузку новостей, с тем лишь отличием, что обработчик перехватывает событие "click":

  • Код
  • Чистый код
  1.$('#c a').live('click',function(){
  2. var c = $(this).attr('href');
  3.
  4.
  5. // 2 запрос - загрузка новостей
  6. $.ajax({
  7.
  8. type: "GET",
  9. data: c,
10. url: "ajaxc.php",
11. dataType: "html",
12. cache: "false",
13. beforeSend: function() {
14.
15. loader()
16.
17.
18.
19. },
20. success: function(result) {
21.
22.
23. $("#centerb").fadeOut(2000,function(){
24. $('#centerb').html(result);
25.
26. $('#centerb').fadeIn('slow');
27. $('#loadpage').hide();
28. });
29.
30. }
31.
32. });
33.
34. return false
35. });
36.

        
Листинг 8.

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

  • Код
  • Чистый код
  1.<?php
  2.########### выод данных из таблицы ###########
  3.require_once "calendar.php";
  4.
  5.$db = new calendar();
  6.
  7.
  8.$month = (isset($_GET['m'])) ? intval($_GET['m']) : date('n');
  9.$year = (isset($_GET['y'])) ? intval($_GET['y']) : date('Y');
10.$day = (isset($_GET['d'])) ? intval($_GET['d']) : date('j');
11.
12.function check_date($date){
13. $date = ($date<10)?'0'.$date:$date;
14. return $date;
15.}
16.
17.
18.if(isset($_GET['d']) && isset($_GET['m']) && isset($_GET['d'])){
19.
20. $today = check_date($year).'-'.check_date($month).'-'.$day.' 00:00:00';
21.}
22.else {
23. $today = 'CURDATE()';
24.}
25.
26.$news = '<ul>';
27.$where = "WHERE time = '".$today."'";
28.
29.
30. $result = $db->sql_query("SELECT name,opisanie,razdel FROM news ".$where."");
31. while (list($name, $opisanie,$razdel) = $result->fetch_row()){
32.
33. $news .= '<li><a href="">'.$name.'</a></li>';
34. }
35.header('Expires: Mon, 26 Jul 1997 05:00:00 GMT' );
36.header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . 'GMT');
37.header('Cache-Control: no-cache, must-revalidate');
38.header('Pragma: no-cache');
39.header('Content-Type: text/html; charset=windows-1251;');
40.
41.echo $news.'</ul>';
42.
43.?>
44.

        
Листинг 9.

Скачать архив файлов v 1.5.

Скачать архив файлов v 1.0.


Александр Ермаков