• Рубрики
  • Слайдер статей
  • Тест сайта
  • Подписка
  • Сайдбар
  • Прокрутка вверх
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

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

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

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

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

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

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

    1. Проверка при малых разрешениях экрана
    2. Проверка при больших разрешениях экрана
    3. Проверка на выделенном домене

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

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

    Для этого предусмотрена возможность оценивать его работу в двух вариантах: с использованием зеркала сайта на поддомене текущего ресурса и на реальном интернет-ресурсе, размещенном на выделенном домене "avtobezugona.ru.

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

    Второй вариант же просто показывает, как это выглядит в реальных условиях при работе в сети Интернет.

Самописный сайт своими руками!

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

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

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

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


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

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

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

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

  • ввод данных об автомобиле (марка автомобиля, модель, год выпуска, последние 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

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

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

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

Комментарии


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

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

comments powered by HyperComments