Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
Скрипт опроса на PHP и MySQL с использованием Ajax и админкой
|
|
Размер: 56,3 Мб. Длительность: 23 мин. 33 сек. |
В этом видеоуроке мы с вами рассмотрим установку на сайт опроса "Smart PHP Poll".
Он использует базу данных и технологию Ajax для отображения результатов голосования без перезагрузки страницы.
Данный опрос легко интегрируется в любую страницу сайта и обладает гибко настраиваемым внешним видом.
Управление опросами осуществляется через удобную админ-панель. Оттуда вы можете создавать, редактировать и удалять опросы, смотреть статистику и настраивать их внешний вид на сайте.
Исходный скрипт был мной немного доработан, в частности исправлены проблемы с кодировками и произведена локализация интерфейса.
Вы можете просмотреть этот урок прямо сейчас, либо скачать его себе на компьютер по ссылке выше.
Под видео вы найдете сокращенную текстовую версию для этого видеоурока.
Краткий обзор урока (все подробности смотрите в видео):
Будем действовать по небольшому плану, который вы найдете чуть ниже. Итак, начинаем:
Подготовительный этап - создаем на локальном компьютере хост, с которым будем работать. Если вы хотите работать сразу с "живым" сервером - то пожалуйста, данный этап можете пропустить.
1. Указываем в файле conf.php данные для подключения к базе данных
- Хост: localhost (обычно)
- Имя базы данных: smartphppoll (создадим ее чуть позже)
- Пользователь, подключающийся к базе данных: root (по умолчанию; в вашем случае указывайте нужного пользователя)
- Пароль для подключения к базе данных: '' (отсутствует по умолчанию для пользователя root; в вашем случае указывайте нужный пароль)
<?php // Хост (обычно localhost) $db_host = "localhost"; // Имя базы данных $db_name = "smartphppoll"; // Логин для подключения к базе данных $database_user = "root"; // Пароль для подключения к базе данных $database_pass = "";
2. Загружаем файлы на сервер
Берем папку с дополнительными материалами и закачиваем содержимое папки smart_php_poll на сервер.
Вдобавок к этому, закидываем в ту же папку файл poll.php (страница, в которую мы будем интегрировать опрос), файл .htaccess (для изменения кодировки веб-сервера в Денвере на UTF-8) и папку styles (в ней лежат стили для страницы poll.php).
3. Создаем в phpmyadmin базу данных с именем smartphppoll
При создании базы выставляем везде кодировку utf8_unicode_ci.
4. Выполняем со вкладки SQL запрос из приложенного SQL-файла (или импортируем его через вкладку import)
Из папки с дополнительными материалами берем файл base.sql, копируем все его содержимое и вставляем в специальное поле для выполнения SQL-запроса к базе smartphppoll.
5. После успешного выполнения запроса проверяем содержимое базы данных и убеждаемся, что все ок
После получения сообщения об успешном выполнении запроса просмотрите таблицы на предмет того, чтобы данные отображались корректно (в частности, чтобы кириллические символы выглядели как надо).
6. Обращаемся к файлу admin.php через браузер и логинимся (логин по умолчанию: admin, пароль по умолчанию: password)
7. Создаем новый опрос в админ-панели и получаем его ID.
На первом шаге нам надо указать название опроса и количество вариантов ответа. На следующем шаге нужно указать эти самые варианты ответа.
После завершения создания запроса вы получите соответствующее сообщение и ID созданного опроса:
8. Используем ID опроса для его вывода на страницу
Для того, чтобы вывести опрос на странице, в нужном месте вставьте следующий код:
<script type="text/javascript" src="ajax.js"></script>
<div id="text"></div>
<script type="text/javascript">
getpoll('ID_опроса');
</script>
Вместо ID_опроса нужно подставить числовой идентификатор опроса, который вы хотите вывести на экран.
Примечание: данный код будет работать в том случае, если страница с опросом находится на том же уровне, что и сам опрос.
Если страница с опросом находится вне папки с опросом, то нужно указать полный путь до файла ajax.js и также поменять пути на полные в самом файле ajax.js.
9. И еще напоследок один момент
Если вы хотите, чтобы опрос появлялся плавно и после голосования результаты появлялись с эффектом, то можно сделать так:
- кладем в папку js библиотеку jquery (в доп. материалах она уже находится там);
- в файле с опросом подключаем эту библиотеку наряду с файлом ajax.js;
- теперь в файле ajax.js в функции handleResponse мы можем закомментировать или удалить строку:
document.getElementById("text").innerHTML = response;
и вместо нее написать, например, так:
$('#text').hide().fadeIn(1500).html(response);
Так мы сначала мгновенно скрываем блок с опросом, а затем заставляем его медленно появиться за полторы секунды. Вместо hide и fadeIn вы можете использовать другие функции jQuery аналогичного назначения.
Все. На этом установку скрипта опроса можно считать завершенной. Теперь в вашем распоряжении скрипт, который позволяет создавать, редактировать и удалять опросы, изменять их внешний вид и смотреть статистику из админки.
При желании вы можете его немного доработать под свои нужды, модифицировав файлы скрипта.
Если краткий обзор вам не до конца понятен, то изучите полную версию урока в видеоформате на этой странице выше.
Удачи вам и успехов!
Дмитрий Науменко.
P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая PHP, JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
