jQuery Calendar — Календар подій. Урок 2

17

Від автора: у цьому уроці ми продовжимо роботу з плагіном jQuery Calendar, який дозволяє легко організувати на сайті календар подій. У попередньому уроці ми попрацювали зі всілякими налаштуваннями календаря і вивели на сторінку робочий календар подій. Однак, всі події в цьому календарі статичні, тобто інформація про них береться безпосередньо зі сторінки календаря або з зовнішнього файлу. Це не завжди зручно, хотілося б зберігати події в базі даних і отримувати їх звідти. Так ми зробимо роботу нашого календаря подій динамічною.

jQuery Calendar — Календар подій. Урок 2jQuery Calendar — Календар подій. Урок 2

Перш ніж ми приступимо, дам посилання на попередній урок по роботі з плагіном jQuery Calendar, якщо ви його ще не бачили.

Отже, насамперед створимо базу даних, в якій будемо зберігати інформацію про події. Дамп таблиці ви знайдете в исходниках до уроку.

Оскільки ми будемо працювати з програмним кодом, нам необхідно змінити розширення стартового файлу index.html на index.php. Тепер створимо файл config.php поряд з файлом index.php, в якому пропишемо підключення до БД:

@$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:

У файлі functions.php створимо функцію, яка отримає необхідні дані з БД:

function get_events(){
global $db;
$query = «SELECT * FROM events»;
$res = mysqli_query($db, $query);
return mysqli_fetch_all($res, MYSQLI_ASSOC);
}

У файлі index.php викличемо функцію:

$events = get_events();

Можемо надрукувати масив $events, щоб переконатися, що дані отримані. Напишемо ще одну функцію, яка перетворює дані з отриманого масиву в формат JSON, необхідний для роботи календаря:

$events = get_json($events);

І в налаштуваннях календаря зазначимо, що дані будуть братися тепер не з зовнішнього файлу, а з змінної. Відповідно, передамо дані з PHP, JS, присвоївши змінної в JS значення змінної PHP:

var data = ;
$(‘#eventCalendar’).eventCalendar({
jsonData: data,

Не забудьте закоментувати або видалити параметр eventsjson, який дозволяє брати дані з зовнішнього файлу. Якщо ми ніде не помилилися, то тепер дані подій календаря будуть братися з БД.

На цьому поточний урок завершено. Удачі і до нових зустрічей!