├── images
└── form_render_screen_shot.png
├── examples
├── address_form
│ ├── bootstrap_3_address_form.png
│ ├── README.md
│ └── bootstrap_3_address.php
└── credit_card_form
│ ├── bootstrap_3_credit_card_form.png
│ ├── README.md
│ └── bootstrap_3_credit_card
├── LICENSE
├── README.md
└── application
└── libraries
└── form_builder.php
/images/form_render_screen_shot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wallter/codeigniter_bootstrap_form_builder/HEAD/images/form_render_screen_shot.png
--------------------------------------------------------------------------------
/examples/address_form/bootstrap_3_address_form.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wallter/codeigniter_bootstrap_form_builder/HEAD/examples/address_form/bootstrap_3_address_form.png
--------------------------------------------------------------------------------
/examples/credit_card_form/bootstrap_3_credit_card_form.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wallter/codeigniter_bootstrap_form_builder/HEAD/examples/credit_card_form/bootstrap_3_credit_card_form.png
--------------------------------------------------------------------------------
/examples/credit_card_form/README.md:
--------------------------------------------------------------------------------
1 | Codeigniter Bootstrap 3 - Credit Card Form
2 | ======================
3 |
4 | Notes: I am using the select2 JavaScript plugin for the select box styling - get it here: http://ivaynberg.github.io/select2/
5 |
6 | Call this view like this:
7 |
8 |
9 | = $this->load->view('store/template/bootstrap_3_credit_card'); ?>
10 |
11 | 
12 |
--------------------------------------------------------------------------------
/examples/address_form/README.md:
--------------------------------------------------------------------------------
1 | Codeigniter Bootstrap 3 - Address Form
2 | ======================
3 |
4 | Notes: I am using the select2 JavaScript plugin for the select box styling - get it here: http://ivaynberg.github.io/select2/
5 |
6 | Call this view like this:
7 |
8 |
9 | $this->load->view('store/template/bootstrap_3_address', array('prefix' => 'shipping_')); ?>
10 |
11 | 
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2013 Tyler Wall
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/examples/credit_card_form/bootstrap_3_credit_card:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Bootstrap 3 Credit Card
4 | *
5 | * Impliments autocomplete standard.
6 | * IETF RFC3106: http://www.ietf.org/rfc/rfc3106.txt
7 | * Living HTML Standard: http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofill-field
8 | *
9 | * @pram string $input_span - this is a varable class that can be used to specify the width
10 | * class of the input fields to make the form fit in tighter spots
11 | *
12 | * -----------------------------
13 | * Call this view as folows:
14 | * echo $this->load->view('store/template/bootstrap_3_credit_card', array('input_span' => 'col-md-3');
15 | *
16 | */
17 |
18 | $input_span = (isset($input_span)) ? $input_span . ' ' : '';
19 |
20 | /* Begin building form */
21 |
22 | $yearRange = 10;
23 | $thisYear = date('Y');
24 | $startYear = ($thisYear + 10);
25 |
26 | $exp_year_options = array();
27 | foreach (range($thisYear, $startYear) as $year) {
28 | $exp_year_options[$year] = $year;
29 | }
30 |
31 | $form_options = array(
32 | array(
33 | 'id' => 'cc_owner',
34 | 'label' => 'Name',
35 | 'placeholder' => 'The Name on the Credit Card',
36 | 'class' => $input_span . 'required',
37 | 'required' => '',
38 | 'autocomplete' => 'cc-name',
39 | 'value' => isset($cc_owner) ? $cc_owner : ''
40 | ),
41 | array(
42 | 'id' => 'cc_type',
43 | 'label' => 'Card Type',
44 | 'type' => 'dropdown',
45 | 'options' => array(
46 | 'visa' => 'Visa',
47 | 'master card' => 'Master Card',
48 | 'discover' => 'Discover',
49 | 'american express' => 'American Express'
50 | ),
51 | 'autocomplete' => 'cc-type',
52 | 'class' => $input_span . 'required input-medium',
53 | 'required' => '',
54 | 'value' => isset($cc_type) ? $cc_type : ''
55 | ),
56 | array(
57 | 'id' => 'cc_number',
58 | 'label' => 'Card Number',
59 | 'autocomplete' => 'cc-number',
60 | 'class' => $input_span . 'required',
61 | 'required' => '',
62 | 'maxlength' => '19',
63 | 'minlength' => '12',
64 | 'pattern' => '(\d\s?){13,16}',
65 | 'value' => isset($cc_number) ? $cc_number : ''
66 | ),
67 | array(
68 | 'id' => 'experation_date',
69 | 'type' => 'combine',
70 | 'elements' => array(
71 | array(
72 | 'id' => 'cc_exp_month',
73 | 'label' => 'Expiration Date',
74 | 'autocomplete' => 'cc-exp-month',
75 | 'type' => 'dropdown',
76 | 'options' => array(
77 | '01' => '01 - Jan',
78 | '02' => '02 - Feb',
79 | '03' => '03 - Mar',
80 | '04' => '04 - Apr',
81 | '05' => '05 - May',
82 | '06' => '06 - June',
83 | '07' => '07 - July',
84 | '08' => '08 - Aug',
85 | '09' => '09 - Sept',
86 | '10' => '10 - Oct',
87 | '11' => '11 - Nov',
88 | '12' => '12 - Dec'
89 | ),
90 | 'class' => $input_span . 'required input-small',
91 | 'required' => '',
92 | 'data-items' => '4',
93 | 'pattern' => '\d{1,2}',
94 | 'style' => 'width: auto;',
95 | 'value' => (isset($cc_exp_month) ? $cc_exp_month : '')
96 | ),
97 | array(
98 | 'id' => 'cc_exp_year',
99 | 'label' => 'Expiration Date',
100 | 'autocomplete' => 'cc-exp-year',
101 | 'type' => 'dropdown',
102 | 'options' => $exp_year_options,
103 | 'class' => $input_span . 'required input-small',
104 | 'required' => '',
105 | 'data-items' => '4',
106 | 'pattern' => '\d{4}',
107 | 'style' => 'width: auto; margin-left: 5px;',
108 | 'value' => (isset($cc_exp_year) ? $cc_exp_year : '')
109 | )
110 | )
111 | ),
112 | array(
113 | 'id' => 'cc_cid',
114 | 'label' => 'CSC',
115 | 'autocomplete' => 'cc-csc',
116 | 'placeholder' => 'CSC',
117 | 'maxlength' => '4',
118 | 'minlength' => '3',
119 | 'class' => $input_span . 'required input-small',
120 | 'required' => '',
121 | 'style' => 'width: 3em;',
122 | 'pattern' => '\d+',
123 | 'value' => isset($cc_cid) ? $cc_cid : ''
124 | )
125 | );
126 | echo $this->form_builder->build_form_horizontal($form_options);
127 | ?>
128 |
129 |
--------------------------------------------------------------------------------
/examples/address_form/bootstrap_3_address.php:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Bootstrap 3 Address
4 | *
5 | * Impliments autocomplete standard.
6 | * IETF RFC3106: http://www.ietf.org/rfc/rfc3106.txt
7 | * Living HTML Standard: http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofill-field
8 | *
9 | * @pram string $pref - this is the prefix (i.e. 'shipping' or 'billing') for the items
10 | * - It is also used in the autocomplete
11 | * @pram string $input_span - this is a varable class that can be used to specify the width
12 | * class of the input fields to make the form fit in tighter spots
13 | *
14 | * -----------------------------
15 | * Call this view as folows:
16 | * echo $this->load->view('store/template/bootstrap_3_address', array('prefix' => 'shipping_'));
17 | *
18 | */
19 |
20 | /* ===== Checking if Var's were passed into the file ===== */
21 | $pref = (isset($prefix)) ? $prefix : '';
22 | $group_sufx = (isset($prefix) && !empty($prefix)) ? str_replace('_', '', $prefix) : uniqid();
23 | $input_span = (isset($input_span)) ? $input_span : '';
24 |
25 | /* ===== BEGIN FORM BUILDING ===== */
26 |
27 | $country_options = array();
28 | $zone_options = array();
29 | foreach ($this->store_service->get_countries() as $country) {
30 | $country_options[$country->id] = $country->name;
31 | }
32 | foreach ($this->store_service->get_zones_by_country((!empty($country_id) ? $country_id : '223')) as $zone) {
33 | $zone_options[$zone->id] = $zone->name;
34 | }
35 |
36 | $form_options = array(
37 | array(
38 | 'id' => $pref . 'first_name',
39 | 'autocomplete' => $group_sufx . ' given-name',
40 | 'placeholder' => 'First Name',
41 | 'label' => 'First Name',
42 | 'class' => $input_span,
43 | 'value' => !empty($first_name) ? $first_name : ''
44 | ),
45 | array(
46 | 'id' => $pref . 'last_name',
47 | 'autocomplete' => $group_sufx . ' family-name',
48 | 'placeholder' => 'Last Name',
49 | 'label' => 'Last Name',
50 | 'class' => $input_span,
51 | 'value' => !empty($last_name) ? $last_name : ''
52 | ),
53 | array(
54 | 'id' => $pref . 'phone',
55 | 'type' => 'tel',
56 | 'autocomplete' => $group_sufx . ' tel',
57 | 'placeholder' => 'Phone Number',
58 | 'label' => 'Phone',
59 | 'class' => $input_span,
60 | 'value' => !empty($phone) ? $phone : ''
61 | ),
62 | array(
63 | 'id' => $pref . 'email',
64 | 'type' => 'email',
65 | 'autocomplete' => $group_sufx . ' email',
66 | 'placeholder' => 'Email Address',
67 | 'label' => 'Email',
68 | 'class' => $input_span,
69 | 'value' => !empty($email) ? $email : ''
70 | ),
71 | array(
72 | 'id' => $pref . 'address1',
73 | 'autocomplete' => $group_sufx . ' address-line1',
74 | 'placeholder' => 'Address',
75 | 'label' => 'Address',
76 | 'class' => $input_span,
77 | 'value' => !empty($address1) ? $address1 : ''
78 | ),
79 | array(
80 | 'id' => $pref . 'address2',
81 | 'autocomplete' => $group_sufx . ' address-line2',
82 | 'placeholder' => 'Address 2nd line',
83 | 'label' => '',
84 | 'class' => $input_span,
85 | 'value' => !empty($address2) ? $address2 : ''
86 | ),
87 | array(
88 | 'id' => $pref . 'city',
89 | 'autocomplete' => $group_sufx . ' locality',
90 | 'placeholder' => 'City',
91 | 'label' => 'City',
92 | 'class' => $input_span,
93 | 'value' => !empty($city) ? $city : ''
94 | ),
95 | array(
96 | 'id' => $pref . 'country',
97 | 'label' => 'Country',
98 | 'autocomplete' => $group_sufx . ' country',
99 | 'class' => $input_span . ' input-medium',
100 | 'type' => 'dropdown',
101 | 'options' => $country_options,
102 | 'value' => (!empty($country_id)) ? $country_id : '223'
103 | ),
104 | array(
105 | 'id' => $pref . 'state',
106 | 'label' => 'State',
107 | 'autocomplete' => $group_sufx . ' region',
108 | 'class' => $input_span . ' input-medium',
109 | 'type' => 'dropdown',
110 | 'options' => $zone_options,
111 | 'value' => (!empty($state_id)) ? $state_id : 0
112 | ),
113 | array(
114 | 'id' => $pref . 'zip',
115 | 'label' => 'Zip Code',
116 | 'autocomplete' => $group_sufx . ' postal-code',
117 | 'placeholder' => 'Zip Code',
118 | 'class' => $input_span,
119 | 'value' => !empty($zip) ? $zip : ''
120 | ),
121 | );
122 | /* Testing to make bootstrap 2 compatable - NOT WORKING */
123 | //$this->form_builder->init(array(
124 | // 'default_control_label_class' => 'control-label',
125 | // 'default_input_container_class' => 'control-group',
126 | // 'default_form_control_class' => 'controls',
127 | // 'bootstrap_required_input_class' => ''
128 | //));
129 | echo $this->form_builder->build_form_horizontal($form_options);
130 | ?>
131 |
132 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Codeigniter Bootstrap 3 Form Builder
2 | ======================
3 |
4 | ### Do you want to write forms 60% faster?
5 | ### Or type 60% less?
6 | ### Are you using Codegniter and Bootstrap 3?
7 | ### Then this is the plugin for you!
8 |
9 | CodeIgniter library to build form's styled with Bootstrap 3.
10 | It's got 5 steps:
11 | * Load Libraries
12 | * Open Form
13 | * Echo out the output of your chosen function
14 | * Close your form
15 | * Enjoy Easy form building
16 |
17 |
18 | 1. Load Libraries
19 | ==============
20 |
21 | Load the Codeigniter form helper, then load the form_builder library.
22 |
23 | ```
24 | $this->load->helper('form');
25 | $this->load->library('form_builder');
26 | ```
27 |
28 | 2. Open Your form
29 | ==============
30 |
31 | ```
32 | = $this->form_builder->open_form(array('action' => '')); ?>
33 | ```
34 |
35 | 3. Echo out your form
36 | ==============
37 |
38 | ```
39 |
40 | /* Prepare variables */
41 | $defaults_object_or_array_from_db = NULL;
42 |
43 | $item = new stdClass;
44 | $item->id = 33;
45 | $item->description = '';
46 |
47 | $years = range(intval(date('Y')), intval(date('Y')) + 20);
48 | $months = array_map(function ($n) {
49 | return str_pad($n, 2, '0', STR_PAD_LEFT);
50 | }, range(1, 12));
51 |
52 | $exp_month_options = array_combine($months, $months);
53 | $cc_exp_month = '05';
54 |
55 | $exp_year_options = array_combine($years, $years);
56 | $cc_exp_year = intval(date('Y')) + 5;
57 |
58 | $input_span = 'pull-left ';
59 |
60 | /* Build form */
61 | echo $this->form_builder->build_form_horizontal(
62 | array(
63 | array(/* HIDDEN */
64 | 'id' => 'id',
65 | 'type' => 'hidden',
66 | 'value' => $item->id
67 | ),
68 | array(/* INPUT */
69 | 'id' => 'color',
70 | 'placeholder' => 'Item Color',
71 | 'input_addons' => array(
72 | 'pre' => 'color: #',
73 | 'post' => ';'
74 | ),
75 | 'help' => 'this is a help block'
76 | ),
77 | array(/* DROP DOWN */
78 | 'id' => 'published',
79 | 'type' => 'dropdown',
80 | 'options' => array(
81 | '1' => 'Published',
82 | '2' => 'Disabled'
83 | )
84 | ),
85 | array(/* TEXTAREA */
86 | 'id' => 'description',
87 | 'type' => 'textarea',
88 | 'class' => 'wysihtml5',
89 | 'placeholder' => 'Item Description (HTML or rich text)',
90 | 'value' => html_entity_decode($item->description)
91 | ),
92 | array(/* COMBINE */
93 | 'id' => 'expiration_date',
94 | 'type' => 'combine', /* use `combine` to put several input inside the same block */
95 | 'elements' => array(
96 | array(
97 | 'id' => 'cc_exp_month',
98 | 'label' => 'Expiration Date',
99 | 'autocomplete' => 'cc-exp-month',
100 | 'type' => 'dropdown',
101 | 'options' => $exp_month_options,
102 | 'class' => $input_span . 'required input-small',
103 | 'required' => '',
104 | 'data-items' => '4',
105 | 'pattern' => '\d{1,2}',
106 | 'style' => 'width: auto;',
107 | 'value' => (isset($cc_exp_month) ? $cc_exp_month : '')
108 | ),
109 | array(
110 | 'id' => 'cc_exp_year',
111 | 'label' => 'Expiration Date',
112 | 'autocomplete' => 'cc-exp-year',
113 | 'type' => 'dropdown',
114 | 'options' => $exp_year_options,
115 | 'class' => $input_span . 'required input-small',
116 | 'required' => '',
117 | 'data-items' => '4',
118 | 'pattern' => '\d{4}',
119 | 'style' => 'width: auto; margin-left: 5px;',
120 | 'value' => (isset($cc_exp_year) ? $cc_exp_year : '')
121 | )
122 | )
123 | ),
124 | array(/* DATE */
125 | 'id' => 'date',
126 | 'type' => 'date'
127 | ),
128 | array(/* CHECKBOX */
129 | 'id' => 'checkbox_group',
130 | 'label' => 'Checkboxes',
131 | 'type' => 'checkbox',
132 | 'options' => array(
133 | array(
134 | 'id' => 'checkbox1',
135 | 'value' => 1
136 | // If no label is set, the value will be used
137 | ),
138 | array(
139 | 'id' => 'checkbox2',
140 | 'value' => 2,
141 | 'label' => 'Two'
142 | )
143 | )
144 | ),
145 | array(/* RADIO */
146 | 'id' => 'radio_group',
147 | 'label' => 'Radio buttons',
148 | 'type' => 'radio',
149 | 'options' => array(
150 | array(
151 | 'id' => 'radio_button_yes',
152 | 'value' => 1,
153 | 'label' => 'Yes'
154 | ),
155 | array(
156 | 'id' => 'radio_button_no',
157 | 'value' => 0,
158 | 'label' => 'No'
159 | )
160 | )
161 | ),
162 | array(/* SUBMIT */
163 | 'id' => 'submit',
164 | 'type' => 'submit'
165 | )
166 | ), $defaults_object_or_array_from_db);
167 |
168 | echo $this->form_builder->close_form();
169 | ?>
170 | ```
171 |
172 | 4. Close The Form
173 | ==============
174 | ```
175 | = $this->form_builder->close_form(); ?>
176 | ```
177 |
178 | Produces:
179 | ==============
180 | ```
181 |
291 | ```
292 |
293 | 
294 |
--------------------------------------------------------------------------------
/application/libraries/form_builder.php:
--------------------------------------------------------------------------------
1 |
17 | * @version 0.9.4
18 | * @license http://opensource.org/licenses/MIT MIT licensed.
19 | */
20 | /*
21 | ===============================================================================================
22 | USAGE
23 | ===============================================================================================
24 |
25 | 1. Load codeigniter 'form' helper --- $this->load->helper('form');
26 | 2. Load this library --- $this->load->library('form_builder');
27 | 3. Open your form (include the approprate class and col-sm-* for formating
28 | 4. Echo out the output of the form_builder->build_*
29 | 5. Close your form (`echo $this->form_builder->close_form()`).
30 | 6. Enjoy easy forms
31 |
32 | -----------------------------------------------------------------------------------------------
33 |
34 | $this->load->helper('form'); ?>
35 | $this->load->library('form_builder'); ?>
36 |
37 |
38 | echo $this->form_builder->open_form(array('action' => site_url('/account/login')));
39 | echo $this->form_builder->build_form_horizontal(array(
40 | array(
41 | 'id' => 'email',
42 | 'placeholder' => 'Email',
43 | 'type' => 'email'
44 | ),
45 | array(
46 | 'id' => 'password',
47 | 'type' => 'password',
48 | 'placeholder' => 'Login Password'
49 | ),
50 | array(
51 | 'id' => 'submit',
52 | 'type' => 'submit',
53 | 'label' => 'Login'
54 | )
55 | ));
56 | echo $this->form_builder->close_form();
57 | ?>
58 | */
59 | class Form_builder {
60 |
61 | private $config = array(/* Config array - can be overrided by passing in array in ini() */
62 | 'default_input_type' => 'form_input',
63 | 'default_input_container_class' => 'form-group',
64 | 'bootstrap_required_input_class' => 'form-control',
65 | 'default_dropdown_class' => 'valid',
66 | 'default_control_label_class' => 'col-sm-2 control-label',
67 | 'default_no_label_class' => 'col-sm-offset-2',
68 | 'default_form_control_class' => 'col-sm-9',
69 | 'default_form_class' => 'form-horizontal col-sm-12',
70 | 'default_button_classes' => 'btn btn-primary',
71 | 'default_date_post_addon' => '', // For instance ''
72 | 'default_date_format' => 'Y-m-d',
73 | 'default_date_today_if_not_set' => FALSE,
74 | 'default_datepicker_class' => '', // For instance 'date-picker'
75 | 'empty_value_html' => '',
76 | 'use_testing_value' => true
77 | );
78 | private $func; /* Global function holder - used in switches */
79 | private $data_source; /* Global holder for the source of the data */
80 | private $elm_options; /* Global options holder */
81 | private $elm_options_help;
82 | private $print_string = ''; /* An output buffer */
83 |
84 | /**
85 | * @property array $input_addons
86 | * This is for adding input-groups and addons.
87 | * pre/post do not have to be inputed as arrays but will be turned into ones
88 | * so that we can handle multipal pre/post input addons.
89 | */
90 | private $input_addons = array(
91 | 'exists' => false, /* does the specific input have an addon? */
92 | 'pre' => array(), /* container for pre addons */
93 | 'pre_html' => '',
94 | 'post' => array(), /* container for post addons */
95 | 'post_html' => ''
96 | );
97 |
98 | function __construct($config = array()) {
99 | if (!empty($config)) {
100 | $this->init($config);
101 | } else {
102 | $this->func = $this->config['default_input_type'];
103 | }
104 | }
105 |
106 | function init($config = array()) {
107 | if (!empty($config)) {
108 | foreach ($config as $k => $v) {
109 | $this->config[$k] = $v;
110 | }
111 | $this->func = $this->config['default_input_type'];
112 | }
113 | }
114 |
115 | function get_config() {
116 | return $this->config;
117 | }
118 |
119 | function open_form($options) {
120 | //