Внимание! Сайт переехал на новый домен sayt-sozdat.ru. Пожалуйста, обновите страницы закладок с новыми URL
×
Закрытие
8
×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

Устанавливаем графический редактор GIMP

  1. Выбор графического редактора
  2. Устанавливаем программу GIMP
  3. Устанавливаем Руководство пользователя

Здравствуйте уважаемый посетитель!

При создании и развитии сайта не обойтись без графического редактора. Этот инструмент необходим для формирования и обработки различных графических элементов, без которых сайт попросту не сможет существовать. Поэтому в наборе инструментов вебмастера графический редактор занимает важнейшее место.

В статье Устанавливаем бесплатный графический редактор GIMP речь пойдет о бесплатной программе GIMP, которая позволяет в полной мере решать вопросы по созданию элементов дизайна веб-страниц. И будет показано, как ее установить на локальный компьютер.

Кроме того здесь можно будет посмотреть, как в этот редактор добавить встроенное "Руководство пользователя", а также приведен бесплатный видеокурс, где можно поближе с ним познакомиться.

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

Cайт на практическом примере

Текущее состояние создаваемого сайта

Здесь можно посмотреть текущее состояние сайта, создаваемого в рамках цикла статей Самописный сайт с нуля своими руками.

Исходные файлы данного сайта можно скачать из прилагаемых к статьям дополнительных материалов.

Вы здесь: Главная → Сборник статей → Формы → Создать форму онлайн заказа


Автор: / Дата:

Создать форму онлайн заказа

Создаем форму онлайн заказа

Здравствуйте уважаемый посетитель!

Сегодня, используя соответствующие элементы, создадим форму онлайн заказа, в которой будут выполняться следующие действия:

  • ввод данных об автомобиле (марка автомобиля, модель, год выпуска, последние 6 цифр VIN, страховая компания);
  • выбор способа маркировки и определение стоимости (вид заказа, цена сервис-центра, цена со скидкой);

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

Такое формирование элементов позволит существенно уменьшить объем HTML-кода формы. А также даст возможность в дальнейшем, в случае необходимости, менять их значения без какого-либо вмешательства в HTML-код страницы. Внося нужные изменения только в соответствующие таблицы базы данных.

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

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

Содержание


  • Формируем поля ввода данных об автомобиле
  • Создаем для элементов формы таблицы БД MySQL
  • С помощью PHP формируем списки полей Марка автомобиля и Страховая компания
  • С помощью скрипта JavaScript формируем список поля Год выпуска
  • Формируем поля выбора заказа и определения цены
  • Применяем скрипт JavaScript для установки значений в полях Цена сервис-центра и Цена со скидкой
  • Исходные файлы сайта

Формируем поля ввода данных об автомобиле


В разделе формы онлайн заказа, предназначенном для ввода данных об автомобиле в нашем случае следует предусмотреть пять полей, состоящих из элементов:

  • "Марка автомобиля" - <select>;
  • "Модель" - <input>;
  • "Год выпуска" - <select>;
  • "Последние 6 цифр VIN" - <input>;
  • "Страховая компания" - <select>.

При этом данные в двух полях предполагается водить вручную ("Модель", "Последние 6 цифр VIN"), а в остальных ("Марка автомобиля", "Год выпуска", "Страховая компания") выбирать подходящие варианты из раскрывающихся списков.

Ниже приведен такой фрагмент формы для страницы "Получить скидку". Этот код следует вставить в шаблон файла "poluchit-skidku.php", находящегося в папке "articles" корневого каталога.

  1. <div class="article">

  2. <h1 id="metka_0">Оnline заявка на получение скидки при установке противоугонных систем автомобиля</h1>

  3. <div class="chapter">

  4. <h2 id="metka_1">Форма заказа</h2>

  5. <hr>

  6. <form name="righting" action="#" method="post">

  7. <div class="righting">

  8. <h3>Данные об автомобиле</h3>

  9. <label for="marka">Марка автомобиля:</label>

  10. <select id="marka" name="marka" required>

  11. <option selected></option>

  12. <option>Acura</option>

  13. <option>Alfa romeo</option>

  14. • • •

  15. <option>КАМАЗ</option>

  16. </select>

  17. <label for="model">Модель:</label>

  18. <input type="text" id="model" name="model" required>

  19. <label for="year">Год выпуска:</label>

  20. <select id="year" name="year" required>

  21. <option selected></option>

  22. <option>2018</option>

  23. <option>2017</option>

  24. • • •

  25. <option>1990</option>

  26. </select>

  27. <label for="vin">Последние 6 цифр VIN:</label>

  28. <input type="text" id="vin" name="vin" title="Должно быть только 6 последних цифр VIN-кода" required>

  29. <label for="insurance">Страховая компания:</label>

  30. <select id="insurance" name="insurance" required>

  31. <option selected></option>

  32. <option>ERGO</option>

  33. <option>Liberty</option>

  34. • • •

  35. <option>Югория</option>

  36. </select>

  37. </div>

  38. <div class="righting-button">

  39. <input type="submit" name="righting-button" value="Отправить">

  40. </div>

  41. </form>

  42. </div>

  43. </div>

Рис.1 HTML-код для элементов поля ввода данных об автомобиле

Если теперь открыть вкладку "Получить скидку", то можно увидеть созданную форму. При этом следует обратить внимание на то, что как ранее было отмечено, на этот момент все ее элементы будут принимать вид по умолчанию без какого-либо дополнительного оформления.

Для увеличения / уменьшения размера изображения кликните по картинке
Вид по умолчанию формы с полями ввода данных об автомобиле

Рис.2 Вид по умолчанию формы с полями ввода данных об автомобиле

Кстати, скриншот сделан при раскрытом списке поля "Страховая компания". Который на данный момент содержит всего три пункта.

Но в действительности, количество элементов <oρtion> в используемых здесь контейнерах <select>, должно быть значительно больше. Например, только перечень автомобилей в поле "Марка автомобиля" насчитывает более ста пунктов.

И конечно, если при формировании полей указывать все возможные варианты, то общий объем HTML-кода будет чрезмерно перегружен однотипными элементами <oρtion>.

А кроме того, в случае необходимости в дальнейшем внесения каких-либо дополнений или изменений в перечень опций, потребуется всякий раз менять соответствующий код страницы. Что, конечно, не очень неудобно.

Поэтому в подобных случаях для формирования таких элементов целесообразно использовать информацию, предварительно записанную в базу данных. В данном случае, это касается полей "Марка автомобиля" и "Страховая компания".

А кроме этого, при определенном типе полей, возможно использовать дополнительные скрипы "JavaScript". Для этой формы вполне уместно это применить для поля "Год выпуска". Элементы которого достаточно просто можно сформировать из последовательности, образованной соответствующим скриптом.

Создаем для элементов формы таблицы БД MySQL


Для того, чтобы формировать пункты списка <oρtion> с помощью БД MySQL, вначале необходимо создать соответствующие таблицы и внести в них нужные данные.

Ранее, в статье Создаем таблицы MySQL c помощью phpMyAdmin, SQL-команд и в PHP довольно подробно рассматривались способы создания таблиц. Поэтому здесь повторяться не будем, а приведем лишь окончательный вид сформированных таблиц под наши задачи.

Что касается их содержимого, то в качестве данных лучше использовать информацию, предоставляемую партнером. В данном случае воспользуемся агентским разделом компании Юнион Системс.

скриншот 34

Теперь создадим таблицу для поля "Марка автомобиля" с перечнем возможных вариантов. Скриншот фрагмента такой таблицы с именем "avto", сделанный с помощью веб-приложения "phpMyAdmin", приведен ниже.

Для увеличения / уменьшения размера изображения кликните по картинке
Скриншот фрагмента таблицы Марка автомобиля

Рис.3 Скриншот фрагмента таблицы "Марка автомобиля"

Как видно, это простейшая таблица, состоящая всего из двух полей: индекса и наименования марок автомобилей.

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

Ниже приведен скриншот таблицы с именем "insurance", сделанный аналогичным образом в "phpMyAdmin".

Для увеличения / уменьшения размера изображения кликните по картинке
Скриншот фрагмента таблицы Страховая компания

Рис.4 Скриншот фрагмента таблицы "Страховая компания"

Таким образом мы получили нужные для формирования полей таблицы БД MySQL и теперь можно перейти к составлению PHP-скрипов (таблицы можно скачать из прилагаемых дополнительных материалов).

С помощью PHP формируем списки полей Марка автомобиля и Страховая компания


Сначала, создадим скрипт, который из данных таблицы "avto" будет формировать элементы поля "Марка автомобиля".

По сути, он будет представлять цикл, в котором поочередно будут извлекаться записи таблицы "avto", а затем добавляться в качестве значений во вновь создаваемые элементы <oρtion> контейнера <select>.

PHP-код такого скрипта приведен в следующей таблице. Его следует добавить в элемент <select> поля "Марка автомобиля"

  1. <select id="marka" name="marka" required>

  2. <option selected></option>

  3. <?php

  4. $table = "avto";

  5. $data_bd = getAll($table);

  6. for ($i = 0; $i < count($data_bd); $i++) {

  7. $marka = $data_bd[$i]["marka"];

  8. print "<option value=\"$marka\">$marka</option>";

  9. }

  10. ?>

  11. </select>

Рис.5 PHP-код для формирования поля "Марка автомобиля"

Если сравнить данный фрагмент формы с первоначальным вариантом, изображенным на рис. 1, то можно обратить внимание, что этот скрипт заменил временно созданные элементы <oρtion> (поз.12÷15, рис.1).

И таким образом при загрузке страницы в поле "Марка автомобиля" будут добавлены все элементы <oρtion>, соответствующие перечню марок автомобилей таблицы базы данных "avto".

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

  1. <select id="insurance" name="insurance" required>

  2. <option selected></option>

  3. <?php

  4. $table = "insurance";

  5. $data_bd = getAll($table);

  6. for ($i = 0; $i < count($data_bd); $i++) {

  7. $insurance = $data_bd[$i]["name"];

  8. print "<option value=\"$insurance\">$insurance</option>";

  9. }

  10. ?>

  11. </select>

Рис.6 PHP-код для формирования поля "Страховая компания"

Если после этих дополнений обновить страницу и открыть раскрывающиеся списки, то можно увидеть появления в них всех пунктов, имеющихся в таблицах БД MySQL. На следующем скриншоте показан пример раскрытого списка поля "Страховая компания".

Для увеличения / уменьшения размера изображения кликните по картинке
Дополненная форма с раскрытым списком Страховая компания

Рис.7 Дополненная форма с раскрытым списком "Страховая компания"

С помощью скрипта JavaScript формируем список поля Год выпуска


В предыдущем разделе с помощью таблиц БД MySQL мы упростили HTML-код полей "Марка автомобиля" и "Страховая компания". А теперь сделаем это для поля "Год выпуска". Но теперь для этого воспользуемся скриптом "JavaScript".

Особенность этого поля состоит в том, что его пункты представляют собой последовательность чисел от 1990 до 2018. Что позволяет составить такой список с помощью несложного JavaScript-скрипта.

Ниже показан один из вариантов, который формирует в контейнере <select> все соответствующие этому полю элементы <oρtion>.

  1. //---------Формирование поля "Год выпуска"----------

  2. for (var i = 2018; i >= 1990; i--) {

  3. $("select[name='year']").append('<option value="' + i + '">' + i + '</option>');

  4. }

Рис.8 JavaScript-код для формирования поля "Год выпуска"

Как видно, этот код состоит всего лишь из трех строк, представляющий конструкцию цикла for с индексом "i", перебирающим значения в обратном порядке от 2018 до 1990.

Причем в тело цикла включена функция библиотеки jQuery ".append()", которая каждый раз при выполнении цикла добавляет в конец выбранного контейнера <select> с именем "year" элемент <oρtion> с содержимым, соответствующим индексу "i" (поз.3).

И таким образом, после выполнения скрипта, поле "Год выпуска" будет содержать все необходимые пункты списка от 2018 до 1990.

Что же касается тех элементов <oρtion>, которые были ранее включены в HTML-код (поз.22÷25, рис.1), то их следует удалить. Так как в этом случае они будут лишними.

После добавления полученного кода в файл "functions.js" папки "js" проверим результат. Для этого, обновим страницу и раскроем поле "Год выпуска", как показано на скриншоте.

Для увеличения / уменьшения размера изображения кликните по картинке
Проверка работы скрипта для поля Год выпуска

Рис.9 Проверка работы скрипта для поля "Год выпуска"

Как видно, используя этот скрипт нет необходимости прописывать для данного поля множество однотипных элементов <oρtion>. Что позволяет существенно уменьшить в создаваемой форме объем исходного HTML-кода.

Формируем поля выбора заказа и определения цены


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

Сначала для этой части формы составим HTML-код, учитывая, что в этом разделе предусматривается три поля, состоящие из элементов:

  • "Вид заказа" - <select>;
  • "Цена сервис-центра" - <input>;
  • "Цена со скидкой" - <input>;
  1. <div class="righting">

  2. <h3>Выбор способа маркировки и определение стоимости</h3>

  3. <label for="order">Вид заказа:</label>

  4. <select id="order" name="order" required>

  5. <option value="0" selected></option>

  6. <option value="1">Набор для самостоятельной маркировки</option>

  7. <option value="2">Противоугонная маркировка специалистом в сервис-центре</option>

  8. <option value="3">Маркировка с индивидуальным дизайном</option>

  9. </select>

  10. <label for="center-price">Цена сервис-центра:</label>

  11. <input type="text" id="center-price" name="center-price" value="0р.">

  12. <label for="discount-price">Цена со скидкой:</label>

  13. <input type="text" id="discount-price" name="discount-price" value="0р.">

  14. </div>

Рис.10 HTML-код полей способа маркировки и определения стоимости

Здесь следует обратить внимание на атрибут "value" со значением "0р.", присутствующий в элементах полей "Цена сервис-центра" и "Цена со скидкой". Что обеспечивает в исходном состоянии после загрузки страницы, до момента пока не сделан выбор вида заказа, отображение в этих полях нулевого значения.

После того, как этот HTML-код добавить к ранее созданному, и обновить страницу, то можно увидеть общий вид формы онлайн заказа.

Для увеличения / уменьшения размера изображения кликните по картинке
Общий вид формы онлайн заказа

Рис.11 Общий вид формы онлайн заказа

На скриншоте видно, что на данный момент при выборе вида заказа цена в полях "Цена сервис-центра" и "Цена со скидкой" не изменяется и остается в исходном состоянии в "0р".

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

Применяем скрипт JavaScript для установки значений в полях Цена сервис-центра и Цена со скидкой


Данный скрипт по выводу цены должен отслеживать изменение в поле "Вид заказа" и устанавливать соответствующие значения в полях "Цена сервис-центра" и "Цена со скидкой".

Это несложно сделать используя функции библиотеки jQuery, как показано в следующей таблице.

  1. //---------Формирование полей "Цена сервис-центра" и "Цена со скидкой"------------

  2. $("select[name='order']").change(function() {

  3. var order = $(this).val();

  4. if (order == '0') {

  5. $("input[name='center-price']").val('0p.');

  6. $("input[name='discount-price']").val('0p.');

  7. }

  8. if (order == '1') {

  9. $("input[name='center-price']").val('700p.');

  10. $("input[name='discount-price']").val('500p.');

  11. }

  12. if (order == '2') {

  13. $("input[name='center-price']").val('2000p.');

  14. $("input[name='discount-price']").val('1500p.');

  15. }

  16. if (order == '3') {

  17. $("input[name='center-price']").val('3000p.');

  18. $("input[name='discount-price']").val('2550p.');

  19. }

  20. });

Рис.12 JavaScript-код для вывода цены в полях "Цена сервис-центра" и "Цена со скидкой"

Здесь в строке 2 установлен обработчик события ".change", при котором при каждом изменении элемента <select>, сначала переменной "order" присваивается текущее значение его атрибута "value" (поз.3)., а затем в зависимости от состояния "order" в элементах <input> устанавливаются определенные значения атрибутов "value".

И таким образом в случае, если переменная "order" равна "0" (поз.4), то в элементах <input> с именем "center-price" и "discount-price" значение атрибутов "value" изменяется на "0р." (поз.5,6).

При "1" (поз.8) - в элементе <input> с именем "center-price" значение "value" становится равным "700p." (поз.9), а с именем "discount-price" - "700p." (поз.10). В остальных случаях, аналогичным образом.

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

Можно, конечно, его еще оптимизировать, составив отдельную функцию по формированию в выбранных элементах значений атрибутов "value". Но для данного вопроса по созданию форм, наверное, приведенный вариант вполне уместен. Осталось, только проверить его работу.

Для этого обновим страницу и выберем один из способов маркировке в поле "Вид заказа".

Для увеличения / уменьшения размера изображения кликните по картинке
Отображение цены после выбора вида заказа

Рис.13 Отображение цены после выбора вида заказа

Как видно, теперь при выборе вида заказа стала автоматически отображаться как полная цена сервис-центра, так и со скидкой.

Таким образом мы создали все поля формы онлайн заказа. А в следующей статье займемся стилизацией внешнего вида созданных полей. Причем сделаем это, как и с остальными элементами сайта, с учетом резиновой верстки.

Исходные файлы сайта


Знак папкиИсходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:

  • Файлы каталога www
  • Таблицы базы данных MySQL

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

С уважением, Николай Гришин


Комментарии


Если у Вас возникли вопросы, или есть какие-либо пожелания по представлению материала, либо заметили какие-нибудь ошибки, а быть может просто хотите выразить свое мнение, пожалуйста, оставьте свои комментарии. Такая обратная связь очень важна для возможности учета мнения посетителей.

Буду Вам за это очень признателен!