П ривет, ребята надеются дела идут хорошо, сегодня мы будем объяснять очень полезный учебник вместе с вами. На сегодняшнем уроке мы создадим простую контактную форму, используя angularJS и php.
Контактная форма представляет собой стандартную веб-страницу, которая доступна на каждом сайте. Это позволяет посетителям сайта связаться с владельцами сайтов или поставщиками услуг, которые отвечают за поддержание этого веб-сайта. Так что мы думаем, почему бы не создать простую контактную форму с помощью Angularjs и php, чтобы получать сообщения от веб-сайтов, читателей и/или пользователей.
Мы используем Angularjs для переднего плана и php на стороне сервера. Мы будем писать код на php, который принимает данные из Angular формы и отправляет по электронной почте администратору сайта. Создайте папку с именем “contact-form” в вашем веб-каталоге приложений и создайте образец оформления страницы HTML – index.html. Теперь скопируйте и вставьте, код ниже в файл index.html.
Демо - Простая контактная форма с помощью Angularjs и php Контактная форма с помощью angularjs и PHP Ваше имя Почта Сообщение Отправить
Php код для отправки электронной почтыСоздайте страницу contact.php и скопируйте вставить код, приведенный ниже. Ниже приведен php-код, который будет извлекать данные из angular формы и отправлять по электронной почте, по указанному адресу электронной почты.
< ?php $post_data = file_get_contents("php://input"); $data = json_decode($post_data); //Just to display the form values echo "Name: " . $data->name; echo "Email: " . $data->email; echo "Message: " . $data->message; // sned an email $to = $data->email; $subject = "Тестовое письмо сайт для тестирования angularjs контактной формы"; $message = $data->message; $headers = "From: " . $data->name .. "\r\n" .. "\r\n" . "X-Mailer: PHP/" . phpversion(); //функция PHP mail для отправки электронной почты на адрес электронной почты mail($to, $subject, $message, $headers); ?>
Нам понадобятся следующие страницы:
- Страница регистрации с формой для регистрации
- Страница активации аккаунта
- Страница восстановления пароля
- Страница сброса пароля
Форма входа на сайт будет размещаться на всех страницах сайта (например, в хедере).
Вот такую страницу регистрации мы хотим получить:
Здесь тип учетной записи будет определять, в какую группу мы зарегистрируем пользователя. Так же полем для идентификации (username) будет электронная почта.
Добавим на страницу вызов сниппета Register :
[[!Register? &submitVar=`register-btn` &activationResourceId=`27` &activationEmailTpl=`Email.Activation` &activationEmailSubject=`Вы зарегистрированы на сайте example.com` &placeholderPrefix=`reg.` &successMsg=`Спасибо за регистрацию. На вашу электронную почту [[!+reg.email]] отправлено письмо со ссылкой на активацию аккаунта. Пройдите по этой ссылке, чтобы завершить регистрацию. ` &usernameField=`email` &usergroupsField=`reg_type` &customValidators=`valueIn` &validate=`username:blank, reg_type:valueIn=^Readers;Writers;Idlers ^, fullname:required:minLength=^6^, password:required:minLength=^6^, password_confirm:password_confirm=^password^, email:required:email` ]] [[!+error.message:default=`[[!$Register.Form]]`]]
Обратите внимание, что все теги, касающиеся регистрации нужно обязательно вызывать некешированными. Такие же правила действуют при обработке форм сниппетом FormIt.
Разберем параметры вызова:
&submitVar=`register-btn` - указывает атрибут name тега input . То есть сниппет сработает, только если отправлена форма кнопкой с определенным именем.
&activationResourceId=`42` - забегая вперед, 42 – это идентификатор страницы, на которой мы будет активировать пользователя.
&activationEmailTpl=`Email.Activation` - чанк с письмом активации, о нем позже.
&placeholderPrefix=`reg.` - указывает, что все плейсхолдеры, за редким исключением (об этом дальше), которые создаются в данном сниппете, должны начинаться с «reg.».
&successMsg – сообщение, которое выведется при успешной отправке формы. Заметьте, что в нем можно указывать значения из формы и любые другие теги. Данное сообщение запишется в плейсхолдер [[!+error.message]]. Довольно странное название, да и в документации на данный момент ошибка. Там написано [[!+reg.error.message]], но из кода компонента следует, что это не так.
&usernameField=`email` - указывает, что в качестве имени пользователя будет использоваться поле email.
&usergroupsField=`reg_type` - определяет поле, устанавливающее группу, в которую будет добавлен новый пользователь.
&customValidators=`valueIn` - указывает дополнительные валидаторы, которые нужно создать вручную.
&validate – валидаторы задаются через запятую для каждого поля, а если требуется несколько валидаторов для одного поля, то они еще разделяются двоеточием. Разберем их отдельно:
username:blank – нехитрая ловушка для спама, означает, что поле username должно остаться пустое.
reg_type:valueIn=^Readers;Writers;Idlers^ - ограничиваем возможные группы тремя указанными. В изначальной поставке такого нет и злые хацкеры могут зарегиться, например, под группой Administrator (если вы ее не переименовали).
fullname:required:minLength=^6^ - поле fullname должно быть не пусто и содержать хотя бы 6 символов.
password:required:minLength=^6^ - аналогично для пароля.
password_confirm:password_confirm=^password^ - пароли должны совпадать.
email:required:email – электронная почта должна быть не пуста и являться собственно почтой.
Конструкция [[!+error.message:default=`[[!$Register.Form]]`]] выводит сообщение об успешной отправке формы или чанк формы, если вы только зашли на страницу или заполнили ее неправильно.
Создадим вышеупомянутый валидатор valueIn . Для этого создаем сниппет с названием valueIn и следующим кодом:
$valueIn = explode(";", $param);
return in_array($value, $valueIn);
Теперь требуется создать чанк Register.Form . В данном случае он будет следующим (используется Bootstrap 3):
Выберите тип учетной записи Чукча-Читатель Пейсатель Бездельник Представьтесь: [[!+reg.error.fullname:notempty=`[[!+reg.error.fullname]]`]] Электронная почта: [[!+reg.error.email:notempty=`[[!+reg.error.email]]`]] Пароль: [[!+reg.error.password:notempty=`[[!+reg.error.password]]`]] Повторите пароль: [[!+reg.error.password_confirm:notempty=`[[!+reg.error.password_confirm]]`]]
Все поля обязательны для заполнения
В этой форме замечу несколько вещей, касающихся MODX: