×
Закрытие
8
×

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

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

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

Статья сборника Как установить графический редактор GIMP

Перейти к статье

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

    Содержание


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

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


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

    • "Марка автомобиля" - ;
    • "Год выпуска" - ;
    • "Страховая компания" - id="marka" name="marka" required>

    • • • •

    • type="text" id="model" name="model" required>

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

  • class="righting-button">

  • type="submit" name="righting-button" value="Отправить">

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

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

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

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

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

    Но в действительности, количество элементов в используемых здесь контейнерах .

    PHP-код такого скрипта приведен в следующей таблице. Его следует добавить в элемент id="marka" name="marka" required>

  • $table = "avto";

  • $data_bd = getAll($table);

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

  • $marka = $data_bd[$i]["marka"];

  • print "";

  • }

  • ?>

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

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

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

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

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

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

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

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

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


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

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

    Ниже показан один из вариантов, который формирует в контейнере с именем "year" элемент с содержимым, соответствующим индексу "i" (поз.3).

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

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

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

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

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

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

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


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

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

    • "Вид заказа" - ;
    • "Цена со скидкой" - ;
    1. class="righting">

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

    3. type="text" id="center-price" name="center-price" value="0р.">

    4. type="text" id="discount-price" name="discount-price" value="0р.">

    Рис.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", при котором при каждом изменении элемента устанавливаются определенные значения атрибутов "value".

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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


    Комментарии


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

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