Форма подписки на рассылку средствами PHP

Подписка на рассылку средствами PHP — часть1

Форма подписки на рассылку средствами php
Кликните на изображение, чтобы проверить работу формы в действии.

Подписка на рассылку — полезный инструмент, способный превратить временных посетителей веб-ресурса в постоянные, поэтому предлагаю потренироваться в написании php скрипта, который вдохнет жизнь в html-форму подписки! Для начала составим техническое задание!

Техническое задание:

  • Сформировать таблицу в базе данных для хранения имен и email-адресов подписчиков.
  • Создать html-форму с полями для введения имени и email-адреса и кнопкой «Подписаться», при нажатии на которую данные из этих полей будут передаваться в php-скрипт.
  • Подготовить css файл cо стилевым оформлением формы подписки на рассылку.
  • Написать php-скрипт для соединения с базой данных.
  • Оформить вывод сообщения о результате работы php-скрипта на странице с формой.
  • Дополнить скрипт функцией проверки вводимых пользователем данных.

Первые 4 пункта ТЗ мы выполним в первой части статьи, 5 и 6 пункты разберем во второй части, которая вот-вот появится на свет :-).

Инструменты разработки: PHP, MySQLi, HTML, CSS

Приступим к поэтапной реализации нашей задачи!

Создаем таблицу в базе данных для хранения имен и email-адресов подписчиков:

Назовем новую таблицу «subscribe». Таблица будет содержать 3 поля:

1. id — для хранения идентификаторов пользователей. Это будет поле целочисленного типа INT. Для автоматического заполнения поля с id, зададим параметр auto increment (в phpMyAdmin для этого нужно поставить галочку в столбце A_I). Будем использовать id в качестве первичного ключа — primary key (для этого в phpMyAdmin в столбце «Индекс» выберем «PRIMARY»)

2. name — для хранения имен пользователей. Поле типа VARCHAR длиной до 55 символов, кодировка — utf8_general_ci.

3. email — для хранения email адресов пользователей. Поле типа VARCHAR длиной до 55 символов, кодировка — utf8_general_ci.

Создание таблицы в phpMyAdmin

Выполненный в MySql запрос для создания новой таблицы ‘subscribe’ в базе данных ‘имя_базы_данных’ выглядит следующим образом:

CREATE TABLE `имя_базы_данных`.`subscribe` ( `id` INT NOT NULL AUTO_INCREMENT , `name` VARCHAR(55) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL , `email` VARCHAR(55) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL , PRIMARY KEY (`id`)) ENGINE = InnoDB CHARSET=utf8 COLLATE utf8_general_ci;

После создания таблицы в базе данных самое время оформить html-страницу с формой подписки на рассылку!

Создаем html-файл с формой подписки:

В html файле «subscribe.html» создадим блок с идентификатором «subscribe_form», в котором будут размещены заголовок и форма. Подробные пояснения я расположу под кодом, а сейчас — внимание: весь html-код:

<html>
<head>
   <meta charset="utf-8">
   <link href="https://fonts.googleapis.com/css?family=Didact+Gothic&display=swap" rel="stylesheet">
   <link href="subscribe.css"  rel="stylesheet" type="text/css"/>
</head>
<body>
   <div id="subscribe_form">
      <h1 class="subscribe_label">Подписка на рассылку</h1>
      <form action="subscribe.php" method="post">
         <p>
            <input type="text" name="user_name" id="user_name" placeholder="Введите Ваше имя">
            <input type="text" name="email" id="email" placeholder="Введите Ваш e-mail"/>
         </p>
         <input type="submit" value="Подписаться" name="submit_form"/> 
      </form>
   </div>
</body>
</html>

Если у вас возникли вопросы по html-коду, предлагаю ознакомиться с подробными пояснениями:

ПОЯСНЕНИЯ ПО HTML-КОДУ: 1. В теге с помощью тегов мы подключили Google ширифт Didact и css-файл «subscribe.css», который мы совсем скоро создадим и наполним стилями: 
<head>
   <meta charset="utf-8">
   <link href="https://fonts.googleapis.com/css?family=Didact+Gothic&display=swap" rel="stylesheet"> /* Подключаем гугл шрифт */
   <link href="subscribe.css"  rel="stylesheet" type="text/css"/> /* Подключаем файл со стилями */
</head>

2. В <body> страницы мы разместили блок с идентификатором «subscribe_form», в котором будем размещать форму, а также заголовок h1:

<div id="subscribe_form">
    <h1 class="subscribe_label">Подписка на рассылку</h1>
   /* здесь будет располагаться форма */
</div>

3. Создадим пару тегов <form> </form> и расположим их в блоке <div id=»subscribe_form»>. В качестве параметра action зададим файл subscribe.php (action=»subscribe.php»), чтобы при нажатии на кнопку формы данные из этой формы передавались в файл subscribe.php. А передаваться данные будут методом post, поэтому в качестве второго параметра формы напишем method=»post»:

<div id="subscribe_form">
   <h1>Подписка на рассылку</h1>
   <form action="subscribe.php" method="post">
 
   </form>
</div>

4. Украсим нашу форму парой текстовых полей для написания имени и email-адреса пользователя. Обязательно зададим им параметры name, так как в php файле значения параметров name будут использоваться для доступа к элементам массива $POST:

<form action="subscribe.php" method="post">
   <p>
      <input type="text" name="user_name" id="user_name" placeholder="Введите Ваше имя">
      <input type="text" name="email" id="email" placeholder="Введите Ваш e-mail"/>
   </p>

Идентификаторы полей нам пригодятся в css-файле для задания стилей, а в параметре placeholder мы разместим текст, который будут видеть пользователи до заполнения текстовых полей.

5. Дополним форму кнопкой «Подписаться» c именем name=»submit_form»:

 <input type="submit" value="Подписаться" name="submit_form"/>

Создание css файла со стилевым решением формы для подписки:

Назовем файл со стилями «subscribe.css», именно этот файл мы подключали в html-файле. Чтобы получить форму подписки на рассылку, как на превью к статье, можно просто скопировать расположенные ниже стили css во вновь созданный файл. При желании вы всегда сможете отредактировать файл со стилями на свой вкус:

body {
    margin:0;
    padding:0;
    font-family: 'Didact Gothic', sans-serif;
    background-color:#fff;
}
#subscribe_form
{
    width: 100%;
    height: 360px;
    background-color: #546077;
    text-align: center;
    padding-top: 30px;
}
#subscribe_form h1
{
    color: #ffffff;
    font-size: 36px;
    font-weight: 600;
}
#subscribe_form input[type="text"]{
    font-size: 19px;
    height: 54px;
    margin-top: 20px;
    padding-left: 20px;
    border: 2px solid #828fa9;
    border-radius: 8px;
}
#subscribe_form #user_name
{
   width: 30%;
   max-width: 250px;
}
#subscribe_form #email
{
   margin-left: 5px;
   width: 50%;
   max-width: 350px;
}
#subscribe_form input[type="submit"]
{
    width: 100%;
    max-width: 250px;
    height: 64px;
    margin-top: 25px;
    background-color: #ffe586;     
    color: #4d4d4b;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    cursor: pointer;
    border: none;
    border-bottom: 4px solid #4c5568;
    border-top: 2px solid #fdde6d;
    border-radius: 30px;
    text-shadow: 16px 45px 16px #f6b53d;
    -moz-box-shadow: inset 0px 0px 63px 0px rgba(82,143,204,1);
    box-shadow: inset 0px 0px 36px 0px #f69b3d;
}

Php-скрипт для соединения с базой данных

Назовем файл для подключения к базе данных «config.php». Предлагаю использовать расширение mysqli. Подключение к БД будем осуществлять посредством объектно-ориентированного интерфейса: 

<?php
   $host = "localhost";
   $dbuser = "Ваше_имя_пользователя";
   $dbpassword = "Ваш_пароль";
   $dbname = "Имя_Вашей_БД";
   $mysqli = new mysqli($host, $dbuser, $dbpassword, $dbname);
   if ($mysqli->connect_error) {
      die('Ошибка подключения (' . $mysqli->connect_errno . ') '. 
      $mysqli->connect_error);
   }
?>

Php скрипт для записи данных из формы подписки на рассылку в базу данных

Для начала создадим файл «subscribe.php» и подключим созданный ранее файл «config.php». Затем проверим, пришли ли post-методом данные из html-формы. При наличии элементов в массиве $_POST[‘submit_form’], получаем переданные пользователем имя и email и формируем запрос в БД. Чтобы обезопасить инпуты от непоседливых хакеров, шастающих по сайтам в поиске новых жертв со списком SQL-инъекций, мы будем использовать подготавливаемые запросы. Хорошую англоязычную статью на тему подготавливаемых запросов я нашла здесь: https://websitebeaver.com/prepared-statements-in-php-mysqli-to-prevent-sql-injection. На русский язык она легко переводится с помощью браузера Google Chrome и клика по правой кнопки мыши. 

<?php
include("config.php");
if(isset($_POST['submit_form'])) 
{
   $name=$_POST["user_name"]; /* извлекаем имя пользователя из массива $_POST в переменную $name */
   $email=$_POST["email"]; /* извлекаем email пользователя из массива $_POST в переменную $email */
     $prepared = $mysqli->prepare("INSERT INTO subscribe (id, name, email) VALUES ( NULL, ? , ?);"); /* формируем запрос, в котором вместо параметров записаны символы вопросительного знака */
    $prepared->bind_param("ss",$name, $email); /* привязываем переменные имени и emaila параметрам запроса */
    if($prepared->execute()) /* если вопрос выполнен, сообщаем об успехе */
        echo "Поздравляем! Подписка успешно оформлена! ";
    else /*иначе - сообщаем об ошибке*/ 
        echo "Ошибка запроса";
    $prepared->close();
}
?>

Можно протестировать php скрипт и убедиться, что подписка на рассылку работает, что информация попадает в базу данных. Однако, помните: на данном этапе информация, которую вы сохраняются в таблицу не валидируется, то есть не проходит проверку на корректность введенных пользователем символов. Таким образом, таблица может пополниться пустыми строками, если пользователь нажмет на кнопку «Подписаться», не заполнив поля для ввода имени и email-адреса. Кроме того, в список подписанных на рассылку могут попасть уже присутствующие в таблице email-адреса. Поэтому для корректной работы формы необходимо дополнить наш скрипт функцией валидации, в которой мы будем проверять, что:

1. Все поля заполнены.

2. Поле с именем «name» содержит не менее 2х и не более 50 букв кириллицы или латинского алфавита.

3. Email-адрес, введенный пользователем, отсутствует в таблице базы данных.

4. Поле с именем «email» соответствует структуре логин@доменное-имя.доменная-зона. При этом логин, доменное имя и доменная зона содержат только цифры и буквы латинского алфавита. Длина поля «email» не должна превышать 50 символов и не может быть меньше 3 символов.

Функцию валидации мы напишем во второй части статьи. Кроме того, мы оформим вывод сообщений об об успешном осуществлении подписки, либо о неверно введенных пользователем данных прямо на странице с формой! Вторая часть статьи расположена по ссылке: ПОДПИСКА НА РАССЫЛКУ СРЕДСТВАМИ PHP – часть2.

Архив файлов с php, html и css кодом для формы подписки на рассылку можно скачать по ссылке: subscribe_form.zip. Не забудьте файле «config.php» поменять значения переменных на корректные для вашей базы данных!

5 комментариев

  1. Дававй вторую статью, ни где толком ничего подобного я не нашел ,жду!

  2. Делаю всё по инструкции, но получаю такую ошибку:
    Fatal error: Uncaught Error: Call to a member function bind_param() on boolean in C:\OpenServer\domains\test\subscribe.php:8 Stack trace: #0 {main} thrown in C:\OpenServer\domains\test\subscribe.php on line 8.
    Как её исправить?

    1. Автор

      Убедитесь, что в таблице ‘subscribe’ только 3 поля: ‘id’, ‘name’, ’email’. Подобная ошибка (с функцией bind_param()) говорит о невозможности выполнить запрос. Так как наш запрос имеет вид: «insert into subscribe values(»,?,?)», то мы передаем для загрузки в БД только 3 значения. Если в таблице ‘subscribe’ будет, например, 4 столбца, то запрос не исполнится, так как для 4го столбца мы ничего не передали. Чтобы исключить остальные возможные ошибки, предлагаю скачать файлы с кодом, размещенные в конце статьи, заменить значения переменных в файле «config.php» на корректные для вашей базы данных и протестировать форму еще раз.

  3. Как сделать, что бы меня не перекидывало на php страницу после успешной отправки?

Обсуждение закрыто.