Формы обратной связи


Формы в Web программировании служат для передачи данных пользователя Веб - серверу.
В каждой форме могут находиться следующие элементы управления:

Ремонт компьютеров | Спутниковые антенны
                             Web-дизайн

 

Главная Статьи Для веб мастеров Формы обратной связи

19.02.2011

Формы обратной связи

Web формы

Формы в Web программировании служат для передачи данных пользователя Веб - серверу. В каждой форме могут находиться следующие элементы управления:

 

текстовое поле

скрытое поле

флажок

кнопка – переключатель

меню переходов

поле рисунка или файла

кнопка

 

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

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

Формы обратной связи


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

форма обратной связи

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

Создание формы для комментариев без знаний языка PHP

1. Создаём форму для ввода данных
2. Создание базы данных
3. Подключение базы данных к web странице
4. Вывод данных из таблицы базы
5. Связь полей формы с базой данных (запись данных в таблицу)


Создать  форму для оставления комментариев возможно с помощью программы web редактора Adobe Dreamweaver, при этом нам не потребуется написание кода на PHP.  Dreamweaver всё сделает сам.

Приступим. Для начала определимся, что нам для этого понадобиться:

 

Принцип работы формы для комментариев, следующий: 
на web странице "index.php" создаётся форма для отправки данных, введённых пользователем, на web сервер. Программа обработчик извлекает данные из формы и заносит их в специально созданную нами таблицу в базе данных, которая так же расположена на сервере. Далее при помощи всё той же серверной программы мы извлечём необходимые нам запись из таблицы и вставим их на веб странице "index.php" в определённое место. 
Теперь попробуем всё это реализовать на практике без знаний языка PHP.

 


Создаём форму для ввода данных

И так открываем Adobe Dreamweaver CS3 и создадим файл "index.php".

index.php

Создаём форму с текстовыми полями ( для ввода пользователем данных ) и кнопкой ( для отправки данных на сервер).

 

 

Создаём форму с текстовыми полями ( для ввода пользователем данных ) и кнопкой ( для отправки данных на сервер).

 

Форма

 

       

 

Текстовые поля

 

       

 

       

 

       

 

В свойствах можно указать ширину и высоту поля

 

       

 

Кнопка

 

       

 

надпись в кнопке "submit" можно исправить в коде

 

       

 

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

 

форма для ввода данных
открываем в браузере. Всё OK!

форма ввода данных

Теперь пользователь может оставить своё имя, почтовый адрес, URL своего сайта (если есть) и само сообщение.
И нажать кнопку для отправки данных.

 

Создание базы данных

 

Для создания таблицы базы данных воспользуемся компонентом ДЕНВЕРА phpMyAdmin ( http://localhost/Tools/phpMyAdmin/ ). 
PHPMyAdmin является программой "визуального" управления базами данных. Данная программа написана на PHP и служит для наглядного вывода содержимого базы данных, а так же для простого и понятного управления ею. Используя, интерфейс данной программы Вы сможете создавать новые базы, импортировать данные, редактировать данные, изменять свойства полей в базе данных, и многое другое...

Данная программа мультиязычна, имеется в ней и интерфейс с русским языком, как в кодировке Кириллица Windows так и в KOI8.
Если локальный сервер установлен правильно, то должна открыться домашняя страница  phpMyAdmin.

phpMyAdmin

Интерфейс может быть на английском, для русификации скачайте архив с инструкцией phpmyadmin_rus

И так приступим непосредственно к созданию:

 

Вводим название базы данных в соответствующее поле и жмём «создать».

 

       

 

Вводим имя таблицы «tabl01» ( имена таблицы и базы можете придумать свои) и указываем количество полей в данной таблице
    (Имя, Mail, Сайт, Сообщение, id и дата) всего шесть. Жмём OK и приступаем к заполнению свойств полей. 

 

       

Определяем свойства полей таблицы.


Общий вид указания типа данных:


Числа

Префикс INT [UNSIGNED]

Необязательный флаг UNSIGNED задает, что будет создано поле для хранения без знаковых чисел (больших или равных 0). 

TINYINT   Может хранить числа от -128 до 127

SMALLINT               Диапазон от -32 768 до 32 767

MEDIUMINT             Диапазон от -8 388 608 до 8 388 607

INT          Диапазон от -2 147 483 648 до 2 147 483 647

BIGINT    Диапазон от -9 223 372 036 854 775 808 до 9 223 372 036 854 775 807


Строки

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

Для начала ознакомимся с типом строки, которая может хранить не более length символов, где length принадлежит диапазону от 1 до 255.

VARCHAR (length) [BINARY]

При занесении некоторого значения в поле такого типа из него автоматически вырезаются концевые пробелы. Если указан флаг BINARY, то при запросе SELECT строка будет сравниваться с учетом регистра. VARCHAR Может хранить не более 255 символов.

TINYTEXT               Может хранить не более 255 символов.

TEXT       Может хранить не более 65 535 символов.

MEDIUMTEXT         Может хранить не более 16 777 215 символов.

LONGTEXT             Может хранить не более 4 294 967 295 символов.

Чаще всего применяется тип TEXT, но если вы не уверены, что данные не будут превышать 65 536 символов, используйте LONGTEXT.


Дата и время

MySQL поддерживает несколько типов полей, специально приспособленных для хранения дат и времени в различных форматах. DATE              Дата в формате ГГГГ-ММ-ДД

TIME        Время в формате ЧЧ:ММ:СС

DATETIME              Дата и время в формате ГГГГ-ММ-ДД ЧЧ:ММ:СС

TIMESTAMP            Дата и время в формате timestamp.

В нашем случаи id (порядковый номер сообщения) – целое число присваиваем ему значение INT.
Поля name, site, mail являются строковыми – присваиваем им значение VARCHAR.
Полю text выставим значение TEXT.
Date являются календарным – присваиваем значение TIMESTAMP, а в столбце «по умолчанию» выставляем CURRENT_TIMESTAMP (чтобы время и дата создания комментария определялись автоматически).



NULL — специальный тип данных, обозначающий отсутствие информации. Отмечаем галочкой поля не обязательные для заполнения mail и site.

Атрибут AUTO_INCREMENT  использоваться для генерации уникального идентификатора для новых строк – отмечаем для поля id.

Длина/значения – количество символов в строке.

свойства полей таблицы

Таблица готова. Жмём сохранить и попробуем заполнить одно поле. Для этого перейдём на вкладку «вставить».

готовая таблица

Поле id заполнять не нужно, а  дату и  время выставляем текущее. Жмём OK.

заполнение таблицы

Для того, чтобы ограничить доступ к базе данным перейдите на вкладку «привилегии». Здесь можно создать нового пользователя, задать пароль и выставить соответствующие права на управление данными базы. По умолчанию для пользователя "root" пароль не задан.

ограничение доступа к базе данным

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

 Например: вывести в определённое место web страницы.

 

Подключение базы данных к web странице

 

Но для начала необходимо подключить базу данных к web форме на странице "index.php". Сделаем это при помощи всё той же программы Adobe Dreamweaver.

вкладка баз данных

Открываем web страницу "index.php" и переходим на вкладку «базы данных» Ctrl+Shift+F10

подключение базы данных

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

подключение MySQL

Выбираем «Подключение MySQL»

создаём подключение

Имя подключения – придумайте любое.
Сервер MySQL – так как наша база данных находится на нашем же локальном компьютере, указываем «localhost».
Имя пользователя – root (задано по умолчанию).
Пароль – для пользователя "root" не задан.
Выбираем созданную нами базу данных.

В данной версии программы Adobe Dreamweaver кнопка OK не работает (глюк), поэтому оставляем курсор в поле «база данных» и жмём «Enter» на клавиатуре (на предупреждение о пароле можно не обращать внимание) .

Если всё правильно - в панели «Базы данных» отобразиться «db01»

база db01

Развернув «db01» мы увидим таблицу и поля.

успешное подключение


Вывод данных из таблицы базы

 

Следующий шаг – это создание набора записей из нашей таблицы (Recordset). Для этого переходим на следующую вкладку «Привязки» и жмём «плюсик»

набора записей (Recordset)

Если у Вас другое окно переключите на простой вид

нажать простой

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

выбираем подключение db01

В результате мы создали набор записей из нашей таблицы

набор записей из нашей таблицы

Теперь возвращаемся к файлу "index.php" в Adobe Dreamweaver CS3.
Создаём  таблицу для вывода записей из базы данных и перетаскиваем записи в соответствующие поля таблицы.

Перетаскиваем записи в соответствующие поля таблицы

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

повторяющаяся область


Связь полей формы с базой данных (запись данных в таблицу)

 

Осталось соединить поля формы с полями таблицы базы данных. Открываем вкладку «Поведения сервера» и создаём новое поведение «вставить запись» (запись будет вставляться из web формы в базу данных).

новое поведение «вставить запись»

Выбираем подключение «db01» и видим следующее:
поле таблицы базы данных «date» не получает значение из формы, т.к. это значение будет подставляться автоматически сервером;
поле «name» получает значение из «name»;
поле «site» получает значение из «site»;
поле «mail» получает значение из «mail»;
поле «text» не получает значение из формы, т.к. полю для сообщения в форме, Dreamweaver присвоил имя «messeng», что бы это исправить можно их(поля) переименовать или задать полю «text» значение поля «messeng».

задать полю «text» значение поля «messeng»

Так же здесь необходимо указать файл "index.php" в поле «После вставки перейти к:».

Вот и всё, надеюсь, ни чего не пропустил. Если, что пишите в комментариях.

P.S. Прежде, чем открывать, созданную web страницу на тестовом сервере, не забудьте туда отправить файл подключения к базе данных, который был любезно создан программой Adobe Dreamweaver CS3.

файл подключения к базе

Желаем Всем удачи в создании интерактивных web ресурсов.



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

Seo анализ сайта Яндекс цитирования
© 2010-2017 «ITnotebook»
Ремонт компьютеров, Web дизайн, Спутниковые антенны



скачать программы бесплатно