PHP - jQuery календарь и новости!

Опубликовано admin - пн, 12/12/2011 - 21:01

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

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

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

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

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

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

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

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

CREATE TABLE IF NOT EXISTS `news` (
  `id` mediumint(9) NOT NULL AUTO_INCREMENT,
  `name` text,
  `opisanie` text,
  `razdel` varchar(50) NOT NULL,
  `avtor` text,
  `count` int(10) NOT NULL,
  `comment` int(11) NOT NULL,
  `time` datetime NOT NULL,
  `arhiv` varchar(255) NOT NULL,
  `href` varchar(50) DEFAULT NULL,
  `si` varchar(255) NOT NULL,
  `bi` varchar(255) NOT NULL,
  `metka` varchar(255) NOT NULL,
  PRIMARY KEY (`id`),
  FULLTEXT KEY `statii` (`opisanie`,`name`,`razdel`,`avtor`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=0;

 

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

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

 

<?php

include_once "calendarClass.php";
$db = new Calendar();


//error_reporting(E_ALL);
$months=array(1 => "Январь",2 => "Февраль",3 => "Март",4 => "Апрель",5 => "Май",6 => "Июнь",7 => "Июль",8 => "Август",9 => "Сентябрь",10 => "Октябрь",11 => "Ноябрь",12 => "Декабрь");

$month = (isset($_GET['m'])) ? intval($_GET['m']) : date('m');
$year = (isset($_GET['y'])) ? intval($_GET['y']) : date('Y');
$day = (isset($_GET['d'])) ? intval($_GET['d']) : date('d');

$mktime=mktime(0,0,0,$month,1,$year);
$daysamount=date('t',$mktime)+1;
$weeks=floor($daysamount/7);
$firstday=date('w',$mktime)-1;

$dday=date('d');
$mmonth=date('n');

//Календарик :)
$sel_year='<select name="y" style="width:53">';
for($y=2008;$y<=date("Y");$y++) {
	$sel_y=($year == $y)?' selected ':'';
	$sel_year.="<option value='".$y."' ".$sel_y." >".$y."</option>";
}
$sel_year.='</select>';
$sel_month='<select name="m" style="width:85">';
for($m=1;$m<=12;$m++) {
	$sel=($db->check_date($month) == $m)?' selected ':'';
	$sel_month.="<option value='".$m."' ".$sel." >".$months[$m]."</option>";
}
$sel_month.='</select>';

$calendar='<div id="bodycalendar">
	<div id="center">
				 <h2>Календарь</h2>
				 <div id="c">
<table cellspacing="2" cellpadding="2" class="calendar_table">
<tr><td colspan="7"><form id="ajax-calendar" method="get" action="'.$_SERVER['PHP_SELF'].'">'.$sel_month.'&nbsp;'.$sel_year.'&nbsp;<input type="hidden" name="d" value="'.$day.'" /><input value="&raquo;" id="knopka" type="submit" style="width:15" /></form></td></tr>
<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">';

$db->sql_query("SET NAMES 'utf8'");
$db->sql_query("SET CHARACTER SET 'utf8'");
$result = $db->sql_query("SELECT * FROM statii WHERE MONTH(FROM_UNIXTIME(time))  = $mmonth AND YEAR(FROM_UNIXTIME(time)) = $year");

$romonth = array();
$rowday = array();
$newarr = array();
$i = 0;

while($str = $result->fetch_array(MYSQLI_ASSOC)) {


	$romonth[$i++] = (int)date('m',$str['time']);
	
	$rowday[$i++] = date('d',$str['time']);
}

//var_dump($newarr);

//echo in_array('2011-12-25 00:00:00',$newarr);
if($firstday == -1){$firstday=6;}
for($i=0;$i<$firstday;$i++) {$calendar.="<td> &nbsp; </td>";}

for($q=1;$q<$daysamount;$q++) { 
	if($mktime <= time()) {
		if($month == $mmonth && $dday < $q) {
			$lnk=$q;
		} else {
		if($q < 10) {
			$dd = (int)$q;
		}
		else {
			$dd = (int)$q;
		}
		
		
		if(in_array($dd,$rowday) & in_array($month,$romonth))
			{
			$lnk="<a class=\"isnews\" href='y=$year&m=$month&d=$q'>$q</a>";
			}
			else {
			$lnk="$q";
			}

		
			
		}
	} else {
		$lnk=$q;
	}
	if (($q+$firstday)%7==1){$calendar.="</tr><tr align='center'>";} 
	if($day == $q) {
		$calendar.="<td class='tooday'> <b>$lnk</b> </td>";
	} else {
		$calendar.="<td> $lnk </td>";
	}
}
$calendar.="</tr></table>
			</div>				

	</div>
	<div id=\"centerb\" style=\"width:350px;\"></div>
	<img id=\"loadpage\" style=\"display:none;\" src=\"ajax-loader.gif\" alt=\"Loading...\">
</div>
	";



echo $calendar;
?>

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

for($q=1;$q<$daysamount;$q++) { 
	if($mktime <= time()) {
		if($month == $mmonth && $dday < $q) {
			$lnk=$q;
		} else {
		if($q < 10) {
			$dd = (int)$q;
		}
		else {
			$dd = (int)$q;
		}
		
		
		if(in_array($dd,$rowday) & in_array($month,$romonth))
			{
			$lnk="<a class=\"isnews\" href='y=$year&m=$month&d=$q'>$q</a>";
			}
			else {
			$lnk="$q";
			}

		
			
		}
	} else {
		$lnk=$q;
	}
	if (($q+$firstday)%7==1){$calendar.="</tr><tr align='center'>";} 
	if($day == $q) {
		$calendar.="<td class='tooday'> <b>$lnk</b> </td>";
	} else {
		$calendar.="<td> $lnk </td>";
	}
}

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

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

while($str = $result->fetch_array(MYSQLI_ASSOC)) {


	$romonth[$i++] = (int)date('m',$str['time']);
	
	$rowday[$i++] = date('d',$str['time']);
}

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

<?php
include_once "config.php";

class Calendar {

private $mMysqli;
	 function __construct(){
		
	    $this->mMysqli = new mysqli(HOST, USER, PASSWORD, DATABASE); 
	 }
	 
	 public function sql_query($query){
		$this->mMysqli->query("SET NAMES 'utf8'");
		$this->mMysqli->query("SET CHARACTER SET 'utf8'");
		$result = $this->mMysqli->query($query);
		
		return $result;
	 }
	 public function sql_numrows($query){
		
		$result = $query->num_rows;
		
		return $result;
	 }
	 
	 function __detsruct(){
	 
		$this->mMysqli = close();
	 
	 }

	public function truncate_utf8($string, $max_length, $wordsafe = FALSE, $add_ellipsis = FALSE, $min_wordsafe_length = 1) {
	  $ellipsis = '';
	  $max_length = max($max_length, 0);
	  $min_wordsafe_length = max($min_wordsafe_length, 0);

	  if (strlen($string) <= $max_length) {
		// No truncation needed, so don't add ellipsis, just return.
		return $string;
	  }

	  if ($add_ellipsis) {
		// Truncate ellipsis in case $max_length is small.
		$ellipsis = substr('...', 0, $max_length);
		$max_length -= strlen($ellipsis);
		$max_length = max($max_length, 0);
	  }

	  if ($max_length <= $min_wordsafe_length) {
		// Do not attempt word-safe if lengths are bad.
		$wordsafe = FALSE;
	  }

	  if ($wordsafe) {
		$matches = array();
		// Find the last word boundary, if there is one within $min_wordsafe_length
		// to $max_length characters. preg_match() is always greedy, so it will
		// find the longest string possible.
		$found = preg_match('/^(.{' . $min_wordsafe_length . ',' . $max_length . '})[' . PREG_CLASS_UNICODE_WORD_BOUNDARY . ']/u', $string, $matches);
		if ($found) {
		  $string = $matches[1];

		}
		else {

		  //$string = substr($string, 0, $max_length);
		  $string = mb_substr($string, 0, $max_length, 'UTF-8'); 
		}
	  }
	  else {
		//$string = substr($string, 0, $max_length);
		$string = mb_substr($string, 0, $max_length, 'UTF-8'); 
		
	  }

	  if ($add_ellipsis) {
		$string .= $ellipsis;
	  }

	  return $string;
	}	 
}
?>

 

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

$(document).ready(function(){ 

	function loader(){
		
		 $('#loadpage').css({
			'display': 'block',
			'z-index': 6000,
			'background-color': '#fff',
			'padding': '10px',
			'font': 'bold 11px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif',
			'border': '1px solid #d8d8d8',
			'color': '#7d7c7d',
			'-webkit-box-shadow': '0 0 10px #f1f1f1',
			   '-moz-box-shadow': '0 0 10px #f1f1f1',
					'box-shadow': '0 0 10px #f1f1f1', 
			'-moz-border-radius': '6px',
				'-webkit-border-radius': '6px',
					'border-radius': '6px',
			'text-align': 'center'
		  })
		  .empty();  
		  
			var myel = $('#loadpage');
			
			myel.css('position','absolute');  
			myel.css('top', ($('#bodycalendar').height() - myel.height()) / 2 +'px');  
			myel.css('left', (( $('#bodycalendar').width() - myel.width()) / 2)-10 + 'px');

	}
	
	if (!$.isFunction($.fn.on)) {
		$('#ajax-calendar').live('submit',getCallendar);
	} else {
		$('body').on('submit','#ajax-calendar', getCallendar);
	}
	
	function getCallendar (){
		var s = $('#ajax-calendar').serialize();
		// 1 запрос - обновление календаря
		$.ajax({
		  
		   type: "GET",
		   data: s,
		   url: "calendar.php",
		   dataType: "html",
		   cache: "false",
		   beforeSend: function() {

			loader()
				
			$('#c').fadeOut();	
		   
		   },
		   success: function(result) {
			$('#loadpage').hide();
				$('#c').fadeIn(function(){
					$('#c').html(result);
					
				});	

		   }
		  });
				
		return false
	};

	if (!$.isFunction($.fn.on)) {
		$('#c a').live('click',getNews);
	} else {
		$('body').on('click','#c a',getNews);
	}
	

	
	function getNews(){
		var c = $(this).attr('href');
		   
	   
	// 2 запрос - загрузка новостей
		$.ajax({
		  
		   type: "GET",
		   data: c,
		   url: "ajaxc.php",
		   dataType: "html",
		   cache: "false",
		   beforeSend: function() {

			loader()
				
				
		   
		   },
		   success: function(result) {

			
			$("#centerb").fadeOut(2000,function(){
				$('#centerb').html(result);

				$('#centerb').fadeIn('slow');
				$('#loadpage').hide();
			});
			
		   }

		  });
				
		return false
	}
if(loadlastnews) {
$('#c a:last').trigger('click');
}
});

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

$('#ajax-calendar').live('submit',getCallendar);

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

if (!$.isFunction($.fn.on)) {
		$('#ajax-calendar').live('submit',getCallendar);
	} else {
		$('body').on('submit','#ajax-calendar', getCallendar);
	}

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

<?php
########### выод данных из таблицы ###########
require_once "calendarClass.php";

$factory = new Calendar();


$month = (isset($_GET['m'])) ? intval($_GET['m']) : date('n');
$year = (isset($_GET['y'])) ? intval($_GET['y']) : date('Y');
$day = (isset($_GET['d'])) ? intval($_GET['d']) : date('j');

function check_date($date){
	$date = ($date<10)?'0'.$date:$date;
	return $date;
}


if(isset($_GET['d']) && isset($_GET['m']) && isset($_GET['d'])){
		
	$today = check_date($year).'-'.check_date($month).'-'.$day;
}
else {
	$today = 'CURDATE()';
}

$news = '<ul>';
$where = "WHERE DATE(time) = '".$today."'";


		$result = $factory->sql_query("SELECT name,opisanie,razdel FROM news ".$where."");
		while (list($name, $opisanie,$razdel) = $result->fetch_row()){
			
			$news .= '<li><a href="">'.$factory->truncate_utf8($name,30,true,true,true).'</a></li>';
		}
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT' ); 
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . 'GMT'); 
header('Cache-Control: no-cache, must-revalidate'); 
header('Pragma: no-cache');
header('Content-Type: text/html; charset=UTF-8;');

echo $news.'</ul>';

?>

 

Взаимосвязанные материалы

# 1. Создание xls(excel) файлов с помощью Spreadsheet_Excel_Writer. (воскресенье, июня 3, 2018 - 16:17 ),

Продолжая обзор возможностей php при работе с excel документами, после того как в предыдущей статье ма завершили рассматривать чтение файлов excel с помощью пакета pear Spreadsheet_Excel_Reader, сл читать...

# 2. Как с помощью php перенести данные из xls(exel) в mysql?. (воскресенье, июня 3, 2018 - 16:13 ),

Порой для работы требуется извлекать данные из файлов xls в базу данных, что обычными средствами php не возможно. читать...

# 3. Рисуем графики на PHP (воскресенье, июня 3, 2018 - 11:47 ),
Графики на страницах с помощью PHP необходимы во многих случаях - для создания опросов и голосований, статистики. Иногда можно использовать Google Api для создания графиков, иногда PHP. Исходя из этого, мы рассмотрим сегодня примеры различных графиков на PHP и Javascript. читать...
# 4. jQuery Nivo Slider (вторник, января 17, 2012 - 21:29 ),

Nivo Slider обладает множеством настроек для создания эффектного рекламного ролика на сайте. читать...

# 5. PHP - jQuery календарь и новости! (понедельник, декабря 12, 2011 - 21:01 ),

Заказчики меня часто спрашивают сделать вывод новостей на jQuery. читать...

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