Часто на різних сайтах ми бачимо блоки з опитуванням громадської думки. Як зробити подібний скрипт, для проведення голосування на своєму сайті, та ще й таким чином, щоб при виборі потрібного пункту сторінка не здійснювалося перевантаження його цілком, а змінювався лише блок з опитуванням і відразу показував результати. Про це і піде мова в даній статті.
Важливо!
Для того, щоб приклад працював коректно, необхідно:
1. Всі файли повинні бути записані в кодуванні UTF-8.
2. Скрипти повинні виконуватися на веб-сервері, а не запускатися в браузері, як файл.
Завантажити приклад можна тут. 3,1 Кб
Приклад складається з 5 різних файлів, розглянемо кожен з них окремо.
Служить для з'єднання з базою даних, для створення необхідної таблиці і для заповнення її прикладом нашого голосування.
У нашому випадку база даних складається з однієї таблиці з трьома полями:
id - ідентифікатор запису;
title - назва запису;
votes - кількість голосів, відданих за цей запис.
Спочатку таблиця заповнюється такими значеннями:
Запис, для якої поле votes має значення NULL - вважаємо назвою опитування, яке міститься в поле title.
Містить опис двох функцій, що застосовуються нами в програмі.
Функція drawForm () відображає форму для голосування.
Функція drawResults () відображає результати голосування.
Дані для побудови форми і виведення результатів беруться з бази даних.
Основний файл скрипта голосування. Тут ми розглянемо його основну частину. Як ми бачимо - тіло документа складається з контейнера contentBody.
При завантаженні цієї сторінки ми спершу перевіряємо, чи було вже вироблено голосування. Перевірку здійснюємо через змінну cookie, оскільки це є найбільш простим випадком. Якщо голосування вироблено не було, то ми виводимо в контейнер contentBody форму для голосування. Якщо ж користувач уже голосував - виводимо результати пошуку.
Програмний код цього файлу виконується тоді, коли користувач робить голосування. У цей момент ми створюємо змінну cookie, для того, щоб виключити повторне голосування, зберігаємо результат голосування в базу даних і відображаємо результати.
Оскільки, виконання цього файлу викликається через AJAX функцію showContent (), то перезавантаження всієї сторінки не відбувається і результати виконання файлу поміщаються в контейнер contentBody.