Заказчики меня часто спрашивают сделать вывод новостей на jQuery. Поэтому я решил привести для всеобщего пользования все скрипты наиболее интересного вывода новостей на PHP jQuery и SQL.
Сразу же представляю Вам пример календаря новостей:
Пн | Вт | Ср | Чт | Пт | Сб | Вс |
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; |
Все файлы, которые мы будем использовать в выводе новостей должны быть в кодировке 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. |
Думаю у Вас не должно возникнуть трудностей в понимании работы календаря, основной код содержится в цикле, который выводит дни недели в таблицу:
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. |
Единственное затруднение, которое может у Вас возникнуть - это использование функции 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. |
Всё что мы сделали выше только 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. |
Аналогичным образом используется функция 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. |
Для того чтобы 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. |
1.1
Александр
А что пишет скрипт, базу с новостями установили(calendar.sql)? jQuery подключили?