От автора: в этом уроке мы продолжим работу с плагином jQuery Event Calendar, который позволяет легко организовать на сайте календарь событий. В предыдущем уроке мы поработали со всевозможными настройками календаря и вывели на страницу рабочий календарь событий. Однако, все события в этом календаре статичны, т.е. информация о них берется непосредственно со страницы календаря или из внешнего файла. Это не всегда удобно, хотелось бы хранить события в базе данных и получать их оттуда. Так мы сделаем работу нашего календаря событий динамичной.
Прежде чем мы приступим, дам ссылку на предыдущий урок по работе с плагином jQuery Event Calendar, если вы его еще не видели.
Итак, прежде всего создадим базу данных, в которой будем хранить информацию о событиях. Дамп таблицы вы найдете в исходниках к уроку.
Поскольку мы будем работать с программным кодом, нам необходимо изменить расширение стартового файла с index.html на index.php. Теперь создадим файл config.php рядом с файлом index.php, в котором пропишем подключение к БД:
|
1 2 |
@$db = mysqli_connect('localhost', 'root', '', 'test') or die('No connect to DB'); mysqli_set_charset($db, 'utf8') or die("Can't set sharset"); |
Далее создадим файл functions.php там же и подключим файлы config.php и functions.php в самом начале файла index.php:
|
1 2 3 4 5 |
<?php require_once 'config.php'; require_once 'functions.php'; ?> <!DOCTYPE html> |
В файле functions.php создадим функцию, которая получит необходимые данные из БД:
|
1 2 3 4 5 6 |
function get_events(){ global $db; $query = "SELECT * FROM events"; $res = mysqli_query($db, $query); return mysqli_fetch_all($res, MYSQLI_ASSOC); } |
В файле index.php вызовем функцию:
|
1 |
$events = get_events(); |
Можем распечатать массив $events, чтобы убедиться, что данные получены. Напишем еще одну функцию, которая будет преобразовывать данные из полученного массива в формат JSON, необходимый для работы календаря:
|
1 |
$events = get_json($events); |
И в настройках календаря укажем, что данные будут браться теперь не из внешнего файла, а из переменной. Соответственно, передадим данные из PHP в JS, присвоив переменной в JS значение переменной PHP:
|
1 2 3 |
var data = <?php echo $events; ?>; $('#eventCalendar').eventCalendar({ jsonData: data, |
Не забудьте закомментировать или удалить параметр eventsjson, который позволяет брать данные из внешнего файла. Если мы нигде не ошиблись, то теперь данные событий для календаря будут браться из БД.
На этом текущий урок завершен. Удачи и до новых встреч!
Комментарии (30)