Как сделать опрос на сайте на php

Обновлено: 05.07.2024

Опрос AJAX

Обучение использованию PHP и AJAX очень эффективно для всех, кто обрабатывает данные, поскольку комбинация этих двух систем позволяет отправлять информацию из браузера на сервер и обратно. Он может помочь вам в выполнении различных задач, таких как создание системы опроса AJAX. Формы, созданные таким образом, довольно легкие и удобные в использовании. Благодаря функциям AJAX любая система голосования PHP может отображать результаты без перезагрузки всей веб-страницы.

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

Вам пока нравятся PHP и AJAX?

Первый шаг: HTML-файл

Мы подготовим HTML с двумя вариантами ответа на один вопрос. После того, как выбор сделан, система голосования AJAX отображает результаты без перезагрузки страницы.

Когда пользователь выбирает один из вариантов, выполняется функция getVote(). Функция запускается событием onclick.

Давайте посмотрим на сценарий опроса PHP, чтобы разобраться, как это работает:

Самым простым решением было бы использование MySQL, но не у всех наших посетителей он имеется на хостинге, либо у некоторых хостеров доступен за дополнительную плату.

Самым важным моментом при создании своего собственного скрипта для голосования, как нам кажется, является то, что скриптом должен учитываться только один голос с одного IP адреса для каждого голосования. Следующим важным моментом является защита файла результатов от записи в момент, пока с файлом работает другой процесс (особенно актуально для сайтов с высокой посещаемостью).

Меня зовут Егор, я Full-stack разработчик в Leader-ID. В этой статье я хочу поделиться простым рецептом по созданию красивого и удобного веб-опросника наподобие тех, что делает Meduza. Он умеет показывать статистику после ответа на отдельные вопросы, подсчитывать общий балл, выдавать комментарии, выгружать данные для анализа и шарить результаты в соцсети. Для реализации этой задачи я выбрал Django, DRF, Python и базу данных PostgreSQL.

Все детали — под катом.

Спустя час разглядывания кирпичной кладки ~~(залипательное занятие, однако)~~ появился первый результат в виде готовых моделей, которые спустя десять минут были описаны в Джанге.

Если ты начинающий, то советую пройти Djnago tutorial, там как раз описывается пошаговое создание опроса. И вдогонку DRF tutorial, чтобы окончательно погрузиться в тему.

Итак, в проекте я использовал:

Django 3.0.3. Для бэкенда;
django-rest-framework. Для создания rest-api;
Python;
PostgreSQL в качестве БД;
Front-end — Nuxt.js, Axios, Element-UI.

Теперь по шагам

pip install Django — устанавливаем библиотеку.

django-admin startproject core — создаем проект на джанге.

cd core — переходим в директорию с проектом.

python manage.py startapp polls — добавляем приложение опроса.

Далее описываем модели в models.py в polls и создаем сериалайзер для DRF.

Затем пишем две вьюшки DRF в views.py, которые отдают все вопросы с вариантами и принимают все ответы от пользователя.

Теперь описываем ссылки в urls.py:

Добавляем модели в admin.py:

Следующим шагом добавляем в settings.py (в директории core) в INSTALLED_APPS наше приложение polls. И выполняем команды запуска:

python manage.py makemigrations — создаем миграцию для созданных моделей
python manage.py migrate — выполняем миграцию в БД
python manage.py createsuperuser — создаем суперюзера (админа)
python manage.py runserver — запускаем сервер

В итоге структура БД получилась вот такой:

Теперь подключаем фронт.

Добавляем плюшки

Во-первых, мне было необходимо периодически выгружать данные. Для этого я просто добавил management command.

Во-вторых, хорошо бы еще реализовать шаринг результатов опроса в социальные сети. ОК. Пилим функционал, который позволит поделиться картинкой с баллами ВКонтакте и Facebook.

Генерим сто вариантов картинок, отражающих баллы, для ВК и Facebook отдельно (разные разрешения). Теперь подключаем передачу ссылки на картинку в социальном компоненте фронтенд части. С ВКонтаке все оказалось просто: передаем параметр image с прямым URL-адресом нужной. А вот с Facebook пришлось повозиться. Оказалось, что они не принимают медиа по API, и если я передавал image или picture с URL картинки, то в посте показывалось большое пустое поле. Как потом оказалось, берет он картинку из метаинфы (og:image) самого сайта, которым поделились (передаем в ссылке параметр u). А ее, ко всему прочему, нужно было динамично менять. Мне не хотелось делать лишних редиректов и механик на бэке, и я решил переделать SPA (single page app) на SSR (server-side render) на фронте, чтобы в зависимости от запроса менялся url картинки с баллом в head-meta до запуска JavaScript в браузере. Благо, взятый за основу фреймворк Nuxt.js позволяет сделать это простым переключением режима. Теперь осталось набросать client-only теги и добавить логику смены head от наличия query балла.

Дополнительно на сервере понадобилось запустить daemon сервис, чтобы отдавать сформированные страницы, а статику оставить так же nginxу. Все, профит!

Оживляем опросник

Для того, чтобы поддерживать уровень интереса участников в процессе заполнения опроса, я добавил динамический показ статистики к каждому отдельному вопросу. Ответив на вопрос, пользователь видит, как ответили другие. Иногда человеку бывает непонятно, зачем ему задают эти вопросы. Поэтому я дополнил каждый вопрос забавными пояснениями. Ну и самый главный трюк по оживлению моего опросника провернули дизайнеры нашей компании.

Сегодня рассмотрим скрипт голосования на сайте, используя Ajax для записи результатов в базу данных через обработчик.

index.html - Наша html-разметка блока с голосованием
style.css - стили, для внешнего вида и фиксированного позиционирования
script.js - наша js скрипты и ajax запрос
obrab.php - обработчик, получает результат голосование и записывает его в базу данных

Разметка HTML и стили

Здесь мы просто создаём нашу форму и подключаем нужные нам скрипты

Создали общию разметку, подключили стили и библиотеки jquery и jquery.easing - для красивого эффекта появления и изчезновения нашей формы.

В стилях ничего сложного, главное прошу заметить, что изначально формы голосования не будет видно (т.к. поднято на -450px вверх), в дальнейшем мы через jquery будем опускать её.

Script.js - js скрипты и ajax запрос

Функционал такой: Пользователь заходит на сайт, выскакивает форма, он голосует, затем выполняется ajax-запрос, записывается кука и форма пропадает.

Куки используются для того, чтобы пользователям каждый раз не появлялась форма, то есть форма появляется для тех, у кого нет кук, потом они голосуют, кука записывается. И в следующий раз, когда пользователи зайдут на сайт или перейдут на другую страницу, они не увидят форму.

Описание: (по строчкам)

Обработчик формы obrab.php и база данных

В обработчике мы получаем результаты голосования и записываем результат в базу данных.

Первые четыре переменные служат для подключения к базе данных. Потом идёт проверка на POST, записываем результат в переменную val, подключаемся к базе и выполняем запрос по одному полю (с результатом) и закрываем соединение.

Читайте также: