Форум Сайтостроение Веб-строительство

jQuickForm = генератор форм на PHP (jQuery + HTML_QuickForm2)

Groove
На сайте с 22.02.2007
Offline
41
Groove
3362

Доброго времени суток, %username%!

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

Начну с главного:

Какие задачи ставились перед этой сборкой

1) Построение сложных форм БЕЗ написания шаблонов, в 90% случаев достаточно того стиля оформления, который когда то был один раз проработан и переезжает из проекта в проект.

2) Возможность управления внешних видом формы путем изменения правил CSS.

3) Возможность управления правилами проверки (валидация форм) в одном месте, при этом чтобы автоматически строились правила проверки на javascript (клиентская валидация) и на PHP (серверная валидация).

4) Валидная верстка, по возможности, с использованием минимально необходимого div-ов

5) Вызовы методов цепочкой, чтобы отсутствовала необходимость держать в голове список параметров, их очередность и прочее, чем должно заниматься IDE $el->setLabel($label)->setComment($comment); 6) Возможность быстрого созданию любого виджета из комплекта, например jQueryUI

7) Желание сделать мир хоть немного лучше! :)

Зачем еще один построитель форм?

Ну во-первых, чтобы предложить вам продукт готовый к использованию, было перерыто много источников, скачали весь интернет и попробовали на локалхосте, я задавал вопрос на хабре (http://habrahabr.ru/qa/492/) и на PHPClub (http://phpclub.ru/talk/showthread.php?s=&threadid=120483&rand=28).

Причем, если внимательно присмотреться к тем сообщениям, то изначально я планировал использовать zforms.ru, в итоге долгих раздумий и «ковыряний» во внутренностях пришел к тому, что лучше доработать сами HTML_QuickForm2, чем пытаться создавать на их основе подобие zforms.

Во-вторых, ничего нового изобретать не пришлось, зато пришлось подружить два великолепных фреймворка jQuery + HTML_QuickForm2

Что из этого получилось — судить вам!

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

Для новичков же — высоким порогом порой является отсутствие конкретных примеров, снабженных детальными комментариями, а также гремучая смесь PHP+HTML, в которой черт ногу сломит.

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

В итоге получилось следующее:

1) форма генерируется при помощи HTML_QuickForm2

2) правила валидации, привязанные им же к этой форме, работают как на стороне сервера, так и на стороне клиента

3) доработан сам пакет таким образом, чтобы исключить/перекрыть все магические методы. Это сделано для того, чтобы существенно сэкономить время разработчика, ведь ему уже не приходится держать в голове все параметры, необходимые для создания типового элемента типа

$form->addSelect('name', array('label' => 'My select', 'options' => $options), array('style' => 'color:red'));

По возможности старался делать так, чтобы все методы можно было вызывать с четко именованными параметрами цепочками типа:

$form->addSelect('name')->setLabel('My select')->loadOptions($options);

4) добавлены некоторые виджеты из jQuery UI и другие плагины (различные виды autocomplete, datapicker, jWysiwyg)

5) есть даже мастер-форма со страничками, перелистывающаяся при помощи кнопок вперед/назад

http://jquickform.ru/?page=elements_page

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

6) Элементы можно группировать практически с неограниченной вложенностью

7) Встроен нейтральный стиль оформления формы по-умолчанию, который, думаю, удовлетворит большинство прямо «из коробки», но изменить внешний вид формы можно будет не влезая ни в шаблоны, ни в PHP-код.

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

Приятных выходных! :)

Вдогонку хотел бы еще раз выразить признательность одному из авторов HTML_QuickForm2 — Борзову Алексею (Sad Spirit) за оперативную помощь и исчерпывающие комментарии. Спасибо, Алексей!

P.S.: рабочие примеры можно посмотреть на сайте проекта:

например http://jquickform.ru/?page=elements_text

http://jquickform.ru/?page=elements_page

http://jquickform.ru/?page=groups_checkbox

и т.д.

P.P.S.: забыл сказать еще одну важную вещь для новичков: скачав jQuickForm по ссылке http://code.google.com/p/jquickform/downloads/list и распаковав его в /home/ вы получите возможность запустить тот же самый сайт безо всяких надстроек в своем любимом Denwer-е

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

Свои предложения и замечания можете отправлять мне в личку или писать в этом топике.

Анонс на хабре: http://habrahabr.ru/blogs/php/104834/

Анонс на пхпклубе: http://phpclub.ru/talk/showthread.php?s=&threadid=120582&rand=0

jQuickForm = генератор форм на PHP (jQuery + HTML_QuickForm2) (http://jquickform.ru/) | iBegun.ru - цены в Бегуне (http://ibegun.ru/)
S
На сайте с 23.05.2004
Offline
315
Stek
#1

Сразу же:

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

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

3. с fieldset очень уж замороченный код. Скажем так, не читабельный.

Это просто подпись.
Яндекс запустил набор сервисов В Яндекс Картах заиграла 17 советов по использованию
Groove
На сайте с 22.02.2007
Offline
41
Groove
#2
Stek:
Сразу же:

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

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

3. с fieldset очень уж замороченный код. Скажем так, не читабельный.

1. Аплоад пока не стал делать. он из коробки есть, а SWF Uploader пожалуй сделаю.

2. Действительно, пишут что появился $('#editor').wysiwyg('destroy');

3. В примерах? Или в сгенерированном HTML?

По-моему с отступами достаточно понятно получается что во что вложено, разве нет? 


<?

    $form = new jQuickForm('simple');

        $fieldset = $form->insertFieldset('Пример вставки <a href="http://code.google.com/p/jwysiwyg/">jWysiwyg</a>');

            $fieldset->insertJwysiwyg('comment')

                ->setLabel('Расширенный комментарий')

                ->setCols(70)->setRows(5)

                ->setComment('Введите текст и еще его нужно обязательно красиво оформить!');



?>

Спасибо за отзыв

Google Ads подтвердил проблему Партнеры Яндекс.Маркета смогут отвечать Google Meet появится в
rtyug
На сайте с 13.05.2009
Offline
263
rtyug
#3

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

1) проверить валдность введенного на js...

2) если есть ошибка, то поле отобразить красным цветом или фиолетовым

я люблю использовать jQuery UI (или другие диалоговые окна), чтобы отображалась форма в диалоговм окне...

2,а) .. там же есть в интерете примеры с плагинами, их много

3) именно отображение, есть вот jqTransform

4) если интеренсо, вот http://www.x0.org.ua/view_content/79 я написал класс CRUD, а SQL запрос в нем в абстракции...

Спалил тему: Pokerstars вывод WMZ, etc на VISA 0% или SWIFT + Конверт USD/GBP,etc (net profit $0,5 млрд) (https://minfin.com.ua/blogs/94589307/115366/) Monobank - 50₴ на счет при рег. тут (https://clck.ru/DLX4r) | Номер SIP АТС Москва 7(495) - 0Ꝑ, 8(800) - 800Ꝑ/0Ꝑ (http://goo.gl/XOrCSn)
Яндекс дал объяснения касательно Турбо-страницы для магазинов получили Мегамаркет запустил «Продвижение в
Groove
На сайте с 22.02.2007
Offline
41
Groove
#4
rtyug:
да, у jquery есть много разных плагинов для красивого отображения ввода форм....

1) проверить валдность введенного на js...
2) если есть ошибка, то поле отобразить красным цветом или фиолетовым
я люблю использовать jQuery UI (или другие диалоговые окна), чтобы отображалась форма в диалоговм окне...
2,а) .. там же есть в интерете примеры с плагинами, их много
3) именно отображение, есть вот jqTransform
4) если интеренсо, вот http://www.x0.org.ua/view_content/79 я написал класс CRUD, а SQL запрос в нем в абстракции...

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

Да и наличие всего этого по отдельности радует конечно. но рутину не убирает, из проекта в проект идет все это либо в шаблонах. либо в коде.

Да и jqTransform к jQuickForm прикрепляется одной строчкой, только опять же задача проекта совсем не в этом.

И, извините, но CRUD тут вообще из другой оперы, тем более на перле

Google запустил новый инструмент Александр Люстик - советы Пять фишек поисковой аналитики,
S
На сайте с 23.05.2004
Offline
315
Stek
#5 

$fieldset = $form->insertFieldset('Fieldset 1');
            $fieldset11 = $fieldset->insertFieldset('Fieldset 1.1');
                $fieldset111 = $fieldset11->insertFieldset('Fieldset 1.1.1');
                    $fieldset111->insertInputText('t1')->setLabel('test 1');
                $fieldset112 = $fieldset11->insertFieldset('Fieldset 1.1.2');
                    $fieldset112->insertInputText('t2')->setLabel('test 2');
            $fieldset12 = $fieldset->insertFieldset('Fieldset 1.2');
                $fieldset121 = $fieldset12->insertFieldset('Fieldset 1.2.1');
                    $fieldset121->insertInputText('t2')->setLabel('test 3');
                $fieldset122 = $fieldset12->insertFieldset('Fieldset 1.2.2');
                    $fieldset122->insertInputText('t2')->setLabel('test 4');

для меня не читабельно совершенно, куча объектов создается.

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


	$api->Form->fieldset('start', 'linking instruction', 'class="legend"');
		$api->Form->text('Link text', 'href_name', @$content_info['href_name'], '', '80%', '255', 'Text for link on page.');
		$api->Form->text('Link title', 'href_alt', @$content_info['href_alt'], '', '80%', '255', 'Title text for link');	
	$api->Form->fieldset('end');
	
	$api->Form->fieldset('start', 'Page content', 'class="legend"');
		$api->Form->textarea('Description', 'page_short_text', $content_info['page_short_text'], '', '80', 7, '', 'class="textArea"', '', true);
		$api->Form->textarea('Content', 'page_long_text', $content_info['page_long_text'], '', '80', 7, '', 'class="textArea"', '', true);
	$api->Form->fieldset('end');
Groove
На сайте с 22.02.2007
Offline
41
Groove
#6
Stek:
$fieldset = $form->insertFieldset('Fieldset 1');

            $fieldset11 = $fieldset->insertFieldset('Fieldset 1.1');

                $fieldset111 = $fieldset11->insertFieldset('Fieldset 1.1.1');

                    $fieldset111->insertInputText('t1')->setLabel('test 1');

                $fieldset112 = $fieldset11->insertFieldset('Fieldset 1.1.2');

                    $fieldset112->insertInputText('t2')->setLabel('test 2');

            $fieldset12 = $fieldset->insertFieldset('Fieldset 1.2');

                $fieldset121 = $fieldset12->insertFieldset('Fieldset 1.2.1');

                    $fieldset121->insertInputText('t2')->setLabel('test 3');

                $fieldset122 = $fieldset12->insertFieldset('Fieldset 1.2.2');

                    $fieldset122->insertInputText('t2')->setLabel('test 4');

для меня не читабельно совершенно, куча объектов создается.

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

	$api->Form->fieldset('start', 'linking instruction', 'class="legend"');

		$api->Form->text('Link text', 'href_name', @$content_info['href_name'], '', '80%', '255', 'Text for link on page.');

		$api->Form->text('Link title', 'href_alt', @$content_info['href_alt'], '', '80%', '255', 'Title text for link');	

	$api->Form->fieldset('end');

	

	$api->Form->fieldset('start', 'Page content', 'class="legend"');

		$api->Form->textarea('Description', 'page_short_text', $content_info['page_short_text'], '', '80', 7, '', 'class="textArea"', '', true);

		$api->Form->textarea('Content', 'page_long_text', $content_info['page_long_text'], '', '80', 7, '', 'class="textArea"', '', true);

	$api->Form->fieldset('end');

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

значит Вам это не нужно.

Когда будете делать сложные формы, которые потребуют сложные проверки на сервере и клиенте - попробуйте этот генератор форм.

Я с первой его версией был 4 года, нарадоваться не мог, единственно, что не устраивало - то, то нельзя было в группы полей вкладывать другие поля. Сейчас можно все!

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

В общем, хочу сказать, что я не зря так настойчиво рекомендую всем QuickForm!

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

Евгений Шевченко «За что NetPromoter 2010: доклад Александра Дистанционный работник мечта работодателя!

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий