Создаем контактную форму с использованием Bootstrap, PHP и AJAX
Структура файлов и папок
Мы создадим корневой каталог и добавим в него следующие файлы и папки:
Нам нужно будет подключить некоторые front-end библиотеки:
С учетом этих библиотек структура файлов будет выглядеть следующим образом:
Создание формы
Откройте файл index.html и скопируйте в него следующую базовую структуру AJAX формы обратной связи :
Без борьбы не бывает победы
Дальше нужно вставить следующий код внутри тегов :
Типографика
Класс form-control применяется для каждого элемента ввода, чтобы он занимал всю ширину контейнера ( ширина 100% ). Этот класс также добавляет различные стили, которые позволяют создать легко читаемый элемент формы ( большой размер, четкие края и т.д. ).
После этих столбцов мы включаем тело сообщения. Мы оборачиваем его в form-group и применяем те же стили, что и для меток и для текстовых полей.
Призыв к действию
После кнопки мы включили div с идентификатором #msgSubmit и применили следующие классы: « h3 text-center hidden «. Класс h3 помогает создать больший заголовок, text-center устанавливает выравнивание текста по центру, а hidden — задает display: none и visible: hidden :
Добавление функционала отправки данных
Откройте файл scripts.js и скопируйте в него следующий код:
event.preventDeafult() останавливает отправку данных формы при обновлении страницы без выбора действия в форме. И в конце этот код запрашивает функцию submitForm(); :
Далее мы создаем функцию submitForm(); следующим образом:
Три инициированные переменные захватывают значения каждого из полей ввода формы и передают их переменной JavaScript для использования в дальнейшем.
Подключение к функции PHP Mail
Наводим блеск
Теперь мы сконцентрируемся на обеспечении обратной связи с пользователем с помощью различных дополнительных функций, которые можно включить. В частности, мы рассмотрим обратную связь формы с помощью обработки ошибок, как на стороне клиента, так и на стороне сервера.
Также для валидации формы мы используем некоторые инструменты:
Структура проекта теперь должна выглядеть следующим образом:
Валидация формы
Давайте начнем с установки валидатора после ввода данных формы обратной связи AJAX PHP. Перейдите в файл scripts.js и отредактируйте первый фрагмент кода, который вызывает функцию SubmitForm() после того, как данные формы отправлены.
Его нужно изменить следующим образом:
Этот новый фрагмент кода проверяет, нашел ли Bootstrap Validator проблемы и остановил ли работу кода. Если нет, мы продолжаем выполнение действий в стандартном режиме. Нам все еще нужно исключить действие по умолчанию ( перезагрузку страницы без заполнения формы ) из сценария представления данных формы.
Теперь, если мы нажмем кнопку отправки данных формы, не заполнив все поля, пустые будут выделяться красным цветом:
Внутри каждой form-group под полем ввода данных нужно разместить следующий HTML-код :
Теперь при повторной отправке данных AJAX JQuery формы будет выводиться сообщение об ошибке, если поля формы не были заполнены: “ Please fill in this field. ”. Добавив data-атрибут для вводимых данных под названием “ data-error ”, можно включить пользовательское сообщение об ошибке.
Добавление анимации обратной связи
Мы добавили функционал для индикации незаполненных полей формы. Но было бы неплохо добавить в форму дополнительную анимацию и несколько сообщений, которые дадут пользователю знать, что происходит. В настоящее время при успешной отправке данных формы появляется сообщение « Message Submitted! «, но как насчет ошибок?
Чтобы задействовать существующий код, мы изменим существующее сообщение об успешной отправке данных. Первым делом удалим текст « Message Submitted! » из HTML-разметки и оставим пустой div :
Теперь нужно создать новую функцию для обработки статуса сообщения. Добавьте эту функцию в нижнюю часть файла scripts.js :
Теперь, если вы не заполнили все поля, будет выводиться сообщение об ошибке “ Did you fill in the form properly? »
Последний шаг для этой новой функции submitMSG — вызвать ее, когда данные формы отправлены успешно. Обновите функцию formSuccess() следующим образом:
Встряхнемся
Давайте добавим ко всей форме анимацию ошибки, универсальная анимация “ тряски ” должна подойти!
Создайте сразу после функции formSuccess() новую и назовите ее formError() :
Теперь, когда пользователь попытается отправить данные формы, не заполнив все поля, она будет трястись, чтобы он понял, что что-то не так.
Больше валидации
Валидация на стороне клиента — это хорошо, но любой пользователь может отключить ее и отправить форму с пустыми полями, отредактировав код в браузере. Необходимо создать сервис валидации на стороне сервера.
И последний этап — нужно принять новое сообщение в AJAX и вывести его в форме. Нам нужно обновить объект AJAX в файле scripts.js следующим образом:
Заключение
Дайте знать, что вы думаете по данной теме материала в комментариях. Мы крайне благодарны вам за ваши комментарии, подписки, лайки, дизлайки, отклики!
Создание Bootstrap контактной формы с использованием PHP и AJAX
В этой инструкции я собираюсь пошагово рассказать о том, как создать рабочую контактную форму, с использованием самого популярного фреймворка для фронт-энда Bootstrap в комбинации с AJAX и PHP. Также здесь мы рассмотрим некоторые дополнительные возможности, как например, некоторые причудливые CSS-анимации с помощью листа стилей animate.css, последующую проверку формы через Javascript и улучшение общего впечатления конечных пользователей с помощью асинхронного контента.
На момент написания самой свежей версией фреймворка был Bootstrap 3.3.5 и стоит отметить, что в данной инструкции будет использоваться обычная сборка с двенадцатью колонками. В процессе чтения этой инструкции убедитесь, что используете самые последние фрагменты и части кода, как это показано в документации к Bootstrap.
Примерная структура файлов и папок
Первым делом, мы создаем корневую директорию и помещаем в нее следующие файлы и папки:
Нам будет нужно добавить несколько фронт-энд библиотек, которые нам помогут, так что не стесняемся и качаем (или добавляем внешние ссылки на следующие из них:
Предположим, что мы их скачали в локальное хранилище и положили в папку проекта, файловая структура нашего проекта теперь будет выглядеть так:
Задание Основ Формы
Открываем index.html, копируем следующую базовую структуру HTML:
Это наш базовый HTML шаблон, на основе которого мы будем создавать содержимое формы. Вы можете видеть, что мы связали все необходимые файлы CSS и JavaScript (обратите внимание, что для этого конкретного примера нам не нужен bootstrap.js). Мы включили метатег viewport для облегчения работы с медиа запросами в Bootstrap. JavaScript был прописан в нижней части файла, чтобы сначала загрузилась основная часть формы.
Кто не рискует, тот не пьет шампанское
Создавая элементы формы мы можем скопировать/вставить или написать следующий код в тегах :
Типографика
Bootstrap позволяет вам использовать классы заголовков H1-H6. Эти классы помогают нам использовать строчные элементы без добавления дополнительных отступов или создания блочных элементов. Мы применили класс H4 к меткам, быстро увеличив их размер и сделав их более понятными.
Класс form-control применяемый к каждому полю ввода, позволяет ему охватывать всю длину контейнера (100%). Он также добавляет различные стили, улучшающие читаемость текста (увеличивая высоту текста, добавляя рамку и т.д.).
После этих столбцов мы добавляем текстовое поле сообщения. Опять же, мы заключаем это внутри класса form-group и применяем похожие стили к нашей метке и текстовому полю, как мы это делали раньше.
Призыв к действию
И наконец, мы добавляем кнопку. В Bootstrap имеется несколько классов для разных кнопок с различными цветами и состояниями. Мы решили использовать кнопку «успех» ( btn-success ), которая по умолчанию имеет зеленый цвет. Кроме того, нам необходимо добавить класс btn для сброса стандартных стилей кнопки (граница, отступы, выравнивание текста, насыщенность шрифта). Мы применили класс btn-lg который увеличивает кнопку и наконец класс pull-right для выравнивания кнопки по правому краю.
Добавляем функцию отправки
Как вы можете видеть это в своем браузере, мы создали основу Bootstrap формы. Но пока она абсолютно ничего не делает. Следующим шагом будет создание функции, которая принимает входные данные пользователей и отправляет их асинхронно в наш класс PHP mailer.
Откройте scripts.js и скопируйте следующий код:
submitForm();
Затем мы создадим функцию submitForm(); :
Три переменные содержат значения всех входных данных из формы и присваивают их переменной JavaScript, которая будет использована позднее.
Подключаем PHP функцию mail
Нам осталось написать PHP скрипт для получения данных и отправки нашей информации с помощью встроенной php функции mail. Откройте process.php и добавьте следующий код:
Данный результат будет возвращен в AJAX объект и обработан обратно на стороне клиента. Красота AJAX заключается в том, что все это выполняется асинхронно на клиентской стороне, позволяя клиенту пользоваться сайтом во время отправки сообщения.
Идеальный порядок
Рассмотрев основную структуру и функциональные возможности нашей формы в первой половине этого урока, мы теперь поговорим о том, как обеспечить обратную связь с пользователями с помощью различных дополнительных функций, которые мы можем добавить. В частности, мы рассмотрим форму обратной связи через обработку ошибок, как на стороне клиента, так и на стороне сервера.
Еще раз, для валидации формы мы будем использовать некоторые инструменты. К ним относятся:
Добавьте их также в проект, как мы делали ранее с Bootstrap и jQuery. Эти инструменты помогут обеспечить обратную связь с пользователем при отправке формы. Существует множество инструментов и фреймворков для проверки форм (включая встроенный HTML5 валидатор), но я использовал «Bootstrap Validator», так как он прекрасно интегрируется с нашей текущей формой.
Теперь структура проекта должна выглядеть примерно так:
Проверка нашей формы
Теперь код выглядит так:
Этот новый фрагмент кода проверяет, нашел ли Bootstrap Validator какие-то ошибки и остановил процесс. Если это не так, мы продолжим. Нам все равно нужно предотвратить действие по умолчанию (обновление страницы) при успешной отправке формы, поэтому сохраним это.
Теперь, при нажатии на кнопку отправки формы, когда она не заполнена полностью, сработает проверка правильности заполнения формы и поля будут выделены красным цветом, показывая, что нужно вводить, это просто!
В процессе добавления этой проверки мы удалили или запретили нативную HTML5 проверку. Можно улучшить нашу валидацию, включив сообщения об ошибках. В Bootstrap Validator есть отличная функция, позволяющая довольно легко отображать сообщения об ошибках возле каждого поля ввода. Чтобы добавить ее, необходимо написать дополнительный HTML-код.
В каждой form-group под полями ввода необходимо разместить следующий html-код:
Например, вот дополнительный блок div, добавленный к полям Name и E-mail:
Теперь при повторной отправке формы, если поля оставлены пустыми, по умолчанию, должно появляться сообщение об ошибке “Please fill in this field.”. Добавив атрибут “data-error” к полю ввода, вы можете добавить пользовательское сообщение об ошибке. Например:
Существует целый ряд других функций, таких как шаблоны регулярных выражений, которые можно применить к валидатору Bootstrap. Вы можете увидеть больше на Github.
Добавляем анимацию
Наша клиентская валидация выглядит очень хорошо; у нас есть изящная подсветка пустых полей красным цветом. Однако было бы неплохо добавить в форму дополнительную анимацию и добавить дополнительные сообщения, позволяющие пользователю знать, что происходит. В настоящее время у нас есть сообщение «Message Submitted!», которое появляется при успешной отправке, но как насчет сообщения об ошибке?
Мы изменим наш код, чтобы он стал более универсальным, изменим успешное сообщение так, чтобы оно принимало и сообщения об ошибках.
Прежде всего, давайте удалим текст “Message Submitted!” из HTML-кода и просто оставим пустой блок div:
Теперь нам необходимо создать новую функцию для обработки статуса сообщения. Добавьте эту функцию в конец сценария scripts.js
Эта функция принимает два аргумента. valid будет булева [логическая] переменная: если это истина тогда показывается успешное сообщение, если ложь то показывается сообщение об ошибке. msg содержит сообщение для отображения в блоке div.
Примечание: мы используем некоторые классы animate.css. Класс tada применит анимацию при успешной отправке сообщения.
При отправке формы с пустыми полями должно появиться сообщение об ошибке “Did you fill in the form properly?»
Встряска
Еще одна анимация, верно? Давайте добавим еще одну анимацию для всей формы при сообщении об ошибке, анимационное «дрожание» должно выглядеть очень хорошо!
Создайте новую функцию сразу после formSuccess() и назовите ее formError()
Теперь, когда мы отправляем пустую форму, она будет дрожать, чтобы пользователь знал, что что-то пошло не так.
Дополнительная проверка
Вся эта проверка на стороне клиента выглядит отлично, однако любой пользователь может отключить эти меры и отправить форму с пустыми полями, отредактировав код в своем браузере. Поэтому стоит добавить валидацию на стороне сервера, чтобы записать все, что проскользнуло.
Заключение
Перейдите на Github, чтобы посмотреть на весь код, который мы написали!
Теперь наша форма обеспечивает обратную связь с пользователями и показывает, какие поля заполнены неправильно или пустые. В форме мы предоставили контекстные сообщения, основанные на статусе возвращенного значения из PHP файла и реализовали дополнительный уровень проверки на стороне сервера, вылавливая тех пользователей, которые захотели обойти front-end валидацию.
В целом теперь у вас на руках очень живая форма, готовая к стилизации и интеграции с вашим веб-сайтом. Надеюсь, вам понравился этот урок, пожалуйста, оставляйте любые вопросы и соображения в комментариях ниже!
ASP.NET MVC Урок 7. Bootstrap, jQuery, Ajax
Цель урока: Определить правила работы с html, js и css файлами. Bootstrap и дополнительный css. Структура js-файлов. Использование jQuery, основные моменты, изучение селекторов, событий и др. addClass, removeClass, attr, data, динамическое создание dom-объекта, ajax.
Наконец мы приступаем к более детальному изучению клиентской части, которая уже в меньшей степени связана с asp.net mvc, но всё равно важна для веб-разработки.
Twitter Bootstrap и css
Twitter Bootstrap – это css-фреймворк. Т.е. набор инструментов для создания блоков, кнопок, меток, форм и навигации. Наше приложение мы будем основывать на этом фрейморке.
Добавим в BundleConfig bootstap и уберем оттуда jquery.UI (App_Start/BundleConfig.cs):
Важно помнить про порядок приоритета задания стилей:
Структура html-страницы.
Подключим стили и js файлы к основному layout файлу (/Areas/Default/Views/Shared/_Layout.cshtml):
В начале файла объявляется, что он будет включен в Layout:
Видно, что body заехал под панель навигации. В нашем файле переопределяем body (/Content/Site.css):
Так как мы использовали классы для формы bootstap ранее, то регистрация у нас выглядит теперь так:
Поправим выбор даты рождения, добавим классы в Html.DropDownList() (/Areas/Default/Views/User/Register.cshtml):
Так как вероятно, мы еще где-то будем использовать эту конструкцию по выбору даты (хотя не факт), то это более общее, чем частное (которое относится именно к регистрации) (/Content/Site.css):
Структура js файлов
Переходим к описанию js файлов. Мы используем jquery как основной фреймворк по работе с клиентской частью кода. Один наш пользовательский js файл (назовем его /Scripts/common.js) будет вызываться всегда. В него будут добавлены те функции, которые будут присутствовать на любой странице. Остальные js-файлы будут вызываться опционально.
Чтобы не путаться создадим 2 папки «admin» и «default» в /Scripts.
Все файлы будут иметь уникальные имена, которые будут записаны в SmallCase формате, и будут относиться к определенной странице (в основном). Например: user-register.js – файл, который будет включен в страницу User/Register.cshtml:
Эта секция выведется в том месте, где описана в _Layout.cshtml (/Areas/Default/Views/Shared/_Layout.cshtml):
В /App_Start/BundleConfig.cs тем временем добавим описание:
Все пользовательские js классы, за исключением плагинов, будут иметь следующую структуру:
Минификация ресурсных файлов
И его использование в html:
Конечно, при загрузке контентных иконок или изображений данный способ не применим.
Для css и js применяется минификация файла, т.е. убираются пробелы и разделители и используются более краткие локальные переменные. Файл или изначально подготавливается минифицированным как для jquery библиотеки или минифицируется на сервере.
Для включения минификации необходимо в Web.config файле изменить директиву compilation:
Или напрямую включить в /App_Start/BundleConfig.cs:
Проверим: 
До оптимизации 527 КБ
После оптимизации 251 КБ
Т.е. больше, чем в 2 раза. На самом деле эта величина может быть как меньше, так и больше, в зависимости от того, какие ресурсы мы грузим. Если есть кеширование, то страница при дальнейшей работе загружает только незначительную часть новых файлов.
Установка jQuery
Изначально jquery уже установлен, но если фреймворк обновился, а это делается часто, то очевидно, что необходимо обновить его:
Install-Package JQuery
Осторожно используйте эту команду в IE, так как когда консоль не открыта, то выдает ошибку.
Селекторы и обход
JQuery – это инструмент, который помогает нам разрабатывать клиентский код под разные браузеры. К тому же является простой и логичной библиотекой.
В основе всего лежит селектор. Селектор позволяет выбрать множество элементов, находящихся в DOM (document object model) и произвести над ними действия, такие как: назначить обработчик события, изменить местопложение, изменить атрибуты, удалить выбранные элементы, добавить в выбранные элементы текст или html, создать объект.
Основное правило пишется как:
$([“правило селектора”][, область выбора])
События
Для обработки событий мы назначаем события на элементы селектора. Например:
Надо помнить, что события не распространяются на вновь созданные элементы, хотя и подпадающие под выбор селектора, который выполнялся ранее. Но если мы, по второму разу проинициализируем, то на элементах, где уже была назначена обработка события, это событие будет выполняться дважды.
Для задания постоянной глобальной обработки нужно использовать следующую конструкцию:
Атрибуты и значения
Основные манипуляции
Рассмотрим основную и главную функцию (в 99% случаев я обходился только ею).
При этом надо помнить, что при передаче множества одинаковых значений чекбоксов нужно устанавливать параметр
traditional : true
beforeSend. Событие, генерирующеся перед непосредственно отправкой формы.
success. Событие, которое обозначает, что всё хорошо и в data содержится результат выполнения
error. Событие, которое возникает, если ответ от сервера был отличный от 200 OK.
Ajax-login форма.
Куча теории, пора бы и к практике переходить. Создадим вторую форму входа, которая будет способствовать быстрому входу на сайте. При клике на «Вход» мы переходим не на страницу Входа, вместо нее выскакивает попапокошко с предложением ввести логин прямо сейчас. При ошибочном вводе, форма выдает предупреждение. Обычную форму по адресу /Login оставляем, она нам понадобится.
Попап формы могут использоваться часто, так что будем считать это стандартной процедурой – вызвать Popup по адресу такому-то. Так как попап – всегда один, то создадим для него контейнер в _Layout.cshtml (/Areas/Default/Views/Shared/_Layout.cshtml):
Добавим функциональность в common.js (/Scripts/common.js):
Так как Вход у нас на каждой странице, то следущую функциональность добавляем тоже в common.js:
Добавим в контроллере обработчик (/Areas/Default/Controller/LoginController.cs):
Он полностью аналогичен Index, только будет вызываться другой View – «Ajax», создадим его (/Areas/Default/Views/Login/Ajax.cshtml):
Обратите внимание на id формы LoginForm и id кнопки LoginButton
Изменим вызов в UserLogin.cshtml (/Areas/Default/Views/Home/UserLogin.cshtml):
Для этого сделаем хитрость. В /Areas/Default/Views/Shared/ добавим _Ok.cshtml, суть которого — перезагружать страницу:
При удачном входе мы загружаем этот View. При добавлении в дерево DOM в строке