×

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

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

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

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

    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.

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



Статья 1 сборника
2018-06-28

Создаем формы HTML

  • В общем о формах HTML
  • форма онлайн заказа
  • форма регистрации
  • Форма авторизации
  • форма обратной связи

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

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

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

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

Причем здесь также будут затронуты и вопросы работы с базой данных MySQL. Так как применение форм в наших примерах будет неразрывно связано с их взаимодействием с таблицами БД. В которых будут сохраняться введённые пользователями данные, используемые в дальнейшем сервером при обработке запросов.


Статья 2 сборника
2018-07-12

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

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

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

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

  1. ввод данных об автомобиле (марка автомобиля, модель, год выпуска, последние 6 цифр VIN, страховая компания);
  2. выбор способа маркировки и определение стоимости (вид заказа, цена сервис-центра, цена со скидкой);
  3. И посмотрим, как для получения возможных опций полей, с помощью PHP можно совместить работу формы с информацией, хранящейся в базе данных MySQL.

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

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

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


Статья 3 сборника
2018-07-21

Стилизуем элементы формы с помощью CSS

  • Добавляем в форму дополнительные HTML-элементы
  • Оформляем внешний вид полей формы
  • Формируем размер и отступы полей для минимального разрешения экрана 320px
  • Формируем по 2 элемента в ряду при увеличении разрешения
  • Увеличиваем количество элементов в ряду до 3-х при значительном увеличении ширины экрана
  • Исходные файлы сайта

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

В прошлой статье мы создали форму онлайн заказа. А сегодня с помощью CSS займемся стилизацией ее полей.

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

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

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


Статья 4 сборника
2018-08-15

Создаем форму регистрации

  • Формируем элементы формы регистрации
  • Проверяем валидацию формы на стороне клиента
  • Исходные файлы сайта

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

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

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

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

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

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


Статья 5 сборника
2018-08-29

Проверяем правильность ввода пароля

  • Проверяем правильность ввода пароля при заполнении полей
  • Выполняем валидацию пароля при отправке формы
  • Исходные файлы сайта

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

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

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

В предыдущей статье, используя регулярное выражение в атрибуте pattern, мы уже обеспечили корректность ввода для поля "Пароль" в соответствии с шаблоном. Который допускает ввод только цифр и букв латинского алфавита в количестве не менее 6-ти.

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

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

На втором этапе будет осуществляться валидация пароля в момент отправки формы. И в случае несоответствия, форма будет блокироваться с выводом сообщения об ошибке.


Статья 6 сборника
2018-09-14

Получаем и проверяем данные из формы в PHP

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

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

В предыдущих статьях мы подготовили форму оформления заказа используя инструменты проверки корректности ввода данных на стороне клиента. Для этого сначала использовали встроенные возможности HTML5, а затем для проверки ввода пароля дополнительно создали скрипты JavaScript.

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

Однако, только одной такой проверки на стороне клиента будет недостаточно. Требуется также выполнять валидацию формы и на стороне сервера. Это обусловлено в первую очередь соображениями безопасности от действий злоумышленников.

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

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

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

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

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