-
emilio
Junior Member
-
Posts: 29
Threads: 8
Joined: Jun 2017
Reputation:
0
Hello,
a simply question: " is a bad practice creating views and forms using HTML5 and Bootstrap?".
In other worlds: "Should I use Form Class, Input Class and Validation Form Class"?
Tank You in advance?
-
Pertti
Senior Member
-
Posts: 365
Threads: 5
Joined: May 2015
Reputation:
32
It really depends what you are working on.
If you have to create forms every now and then or you have very weird layouts for forms, doing it direct in HTML5/BStrap is perfectly fine.
However, on flip side, I'm working on issue management portal, and we add and change forms quite often, but they are usually very similar from visual point of view.
So I ended up writing little form library that takes configuration, like input label, input name, type, if it's optional or required etc, and that library then produces that HTML for me - not just input tags, but whole divs and labels around it.
Saves some time if you have validation rules in models, for example, but you want to quickly mirror some of these on front end as JS checks, much easier than having to add this manually in every single time something changes. Plus it's so easy to forget to change front end if back end rules change, so less places to change is always better.
But using HTML is perfectly acceptable and quick way to get things started.
-
emilio
Junior Member
-
Posts: 29
Threads: 8
Joined: Jun 2017
Reputation:
0
(11-01-2018, 01:17 AM)Pertti Wrote: It really depends what you are working on.
If you have to create forms every now and then or you have very weird layouts for forms, doing it direct in HTML5/BStrap is perfectly fine.
However, on flip side, I'm working on issue management portal, and we add and change forms quite often, but they are usually very similar from visual point of view.
So I ended up writing little form library that takes configuration, like input label, input name, type, if it's optional or required etc, and that library then produces that HTML for me - not just input tags, but whole divs and labels around it.
Saves some time if you have validation rules in models, for example, but you want to quickly mirror some of these on front end as JS checks, much easier than having to add this manually in every single time something changes. Plus it's so easy to forget to change front end if back end rules change, so less places to change is always better.
But using HTML is perfectly acceptable and quick way to get things started.
Thank You
-
jreklund
Administrator
-
Posts: 1,408
Threads: 3
Joined: Aug 2017
Reputation:
42
I'm always using Form Class, Input Class and Form Validation for new code. And for legacy I'm using Form Class and Input Class/$_POST. But my goal are to port everything to Form Validation.
For static pages like "Creating documents", where users can't add/delete e.g. <input> I'm writing it like form_input();
PHP Code: <div class="form-group"> <?php echo form_label(lang('documents_description'),'documents_description'); ?> <p class="help-block"><?php echo lang('documents_description_help'); ?></p> <?php echo form_textarea(array( 'name' => 'documents_description', 'value' => set_value('documents_description'), 'class' => 'form-control', 'rows' => '3', )); ?> </div>
For forms that users can manipulate I have created a form_generator helper, so that I can reuse it.
PHP Code: <?php defined('BASEPATH') OR exit('No direct script access allowed');
if ( ! function_exists('forms_generator')) { /** * Form Generator Helper * Using Codeigniter Form Helper */ function forms_generator($type = NULL, $id = NULL, $name = NULL, $description = NULL, $options = array(), $selected = array(), $settings = NULL, $odd_even = 'even', $header = TRUE, $question = NULL, $form_name = 'form_') { if( ! in_array($type, array('table')) && $settings !== NULL ) { $settings = json_decode($settings); if(json_last_error() !== JSON_ERROR_NONE) return NULL; } if( is_object($settings) && isset($settings->required) && $settings->required === 1 ) $odd_even .= ' required'; switch($type) { case 'input': if($header) echo '<div class="form-group '.$odd_even.'">'; $data = array( 'name' => $form_name . $id, 'id' => $form_name . $id, 'value' => set_value($form_name . $id,$selected), 'class' => 'form-control' ); if( is_object($settings) && isset($settings->required) && $settings->required === 1 ) $data['required'] = 'required'; if($header) echo form_label($name,$form_name . $id); if($header && $description) echo '<p class="help-block">' . nl2br(html_escape($description)) . '</p>'; echo form_input($data); if($header) echo '</div>'; break; case 'date': if($header) echo '<div class="form-group date '.$odd_even.'">'; $data = array( 'name' => $form_name . $id, 'id' => $form_name . $id, 'value' => set_value($form_name . $id,$selected), 'class' => 'form-control datepicker' ); if( is_object($settings) && isset($settings->required) && $settings->required === 1 ) $data['required'] = 'required'; if($header) echo form_label($name,$form_name . $id); if($header && $description) echo '<p class="help-block">' . nl2br(html_escape($description)) . '</p>'; echo form_input($data); if($header) echo '</div>'; break; case 'text': case 'text_wysiwyg': if($header) echo '<div class="form-group '.$odd_even.'">'; $data = array( 'name' => $form_name . $id, 'id' => $form_name . $id, 'value' => set_value($form_name . $id,$selected,FALSE), 'class' => 'form-control' ); if( is_object($settings) && isset($settings->required) && $settings->required === 1 ) $data['required'] = 'required'; if($header) echo form_label($name,$form_name . $id); if($header && $description) echo '<p class="help-block">' . nl2br(html_escape($description)) . '</p>'; echo form_textarea($data); if($header) echo '</div>'; break; case 'radio': if( !empty($options) ) { if($header) echo '<div class="form-group '.$odd_even.'">'; if($header) echo form_label($name,$form_name . $id); if($header && $description) echo '<p class="help-block">' . nl2br(html_escape($description)) . '</p>'; $strlen_array = strlen_array($options, 'name'); $group_class = $strlen_array > 40 ? 'form-group-sub' : 'form-group-sub-inline'; $group_class = $strlen_array > 100 ? 'form-group-sub-col' : $group_class; echo '<div class="'. $group_class .'">'; foreach($options as $option_id => $option): $data = array( 'name' => $form_name . $id, 'class' => $form_name . $id, 'value' => $option_id, 'checked' => set_radio($form_name . $id, $option->option_id, $option_id === $selected) ); if( is_object($settings) && isset($settings->required) && $settings->required === 1 ) $data['required'] = 'required'; ?> <div class="radio"> <label> <?php echo form_radio($data) . $option->name . ' '; ?> </label> </div> <?php endforeach; if($header) echo '</div></div>'; else echo '</div>'; } break; case 'checkbox': if( !empty($options) ) { if($header) echo '<div class="form-group '.$odd_even.'">'; if($header) echo form_label($name,$form_name . $id); if($header && $description) echo '<p class="help-block">' . nl2br(html_escape($description)) . '</p>'; $strlen_array = strlen_array($options, 'name'); $group_class = $strlen_array > 40 ? 'form-group-sub' : 'form-group-sub-inline'; $group_class = $strlen_array > 100 ? 'form-group-sub-col' : $group_class; $selected = json_decode($selected); if(json_last_error() !== JSON_ERROR_NONE) { $selected = array(); } if( empty($selected) ) { $selected = array(); } echo '<div class="'. $group_class .'">'; foreach($options as $option_id => $option): $data = array( 'name' => $form_name . $id . '[]', 'class' => $form_name . $id, 'value' => $option_id, 'checked' => set_radio($form_name . $id, $option->option_id, in_array($option_id, $selected)) ); if( is_object($settings) && isset($settings->required) && $settings->required === 1 ) $data['required'] = 'required'; ?> <div class="checkbox"> <label> <?php echo form_checkbox($data) . $option->name . ' '; ?> </label> </div> <?php endforeach; if($header) echo '</div></div>'; else echo '</div>'; } break; case 'dropdown': if( !empty($options) ) { if($header) echo '<div class="form-group '.$odd_even.'">'; if($header) echo form_label($name,$form_name . $id); if($header && $description) echo '<p class="help-block">' . nl2br(html_escape($description)) . '</p>'; if($header) $dropdown = array(NULL => '-- '. $name . ' --'); else $dropdown = array(NULL => NULL); foreach($options as $option) { $dropdown[$option->option_id] = $option->name; } $data = array( 'class' => 'form-control' ); if( is_object($settings) && isset($settings->required) && $settings->required === 1 ) $data['required'] = 'required'; echo form_dropdown($form_name . $id, $dropdown, set_value($form_name . $id,$selected), $data); if($header) echo '</div>'; } break; case 'heading': echo '<div class="form-group '.$odd_even.'">'; echo form_label($name,$form_name . $id); if($description) echo '<p class="help-block">' . nl2br(html_escape($description)) . '</p>'; echo '</div>'; break; case 'table': $settings = json_decode($settings); if(json_last_error() === JSON_ERROR_NONE) { echo '<div class="form-group form-group-table">'; echo form_label($name,$form_name . $id); if($description) echo '<p class="help-block">' . nl2br(html_escape($description)) . '</p>'; echo '<table class="table table-bordered table-striped table-hover">'; if( !empty($settings->header) ) { echo '<thead><tr>'; foreach($settings->header as $h) { echo '<th>' . html_escape($h) . '</th>'; } echo '</tr></thead>'; } if( !empty($settings->body) ) { foreach($settings->body as $ii => $body) { echo '<tr>'; foreach($body as $i => $b) { if($i == 0) { echo '<td>' . html_escape($b) . '</td>'; } else { $count = count($settings->body[$ii]); $local_count = $i + 1; if( $local_count == $count && $count != $settings->cols) { $colspan = $settings->cols - $count + 1; echo '<td colspan="'. $colspan .'">'; } else { echo '<td>'; } if( isset($question[$id][$b]) ) { $sub = $question[$id][$b]; $o_sub = isset($options[$sub->question_id]) ? $options[$sub->question_id] : array(); $s_sub = isset($selected[$sub->question_id]) ? $selected[$sub->question_id] : ''; forms_generator($sub->field, $sub->question_id, $sub->name, $sub->description, $o_sub, $s_sub, $sub->settings, $odd_even, FALSE); } echo '</td>'; } } echo '</tr>'; } } echo '</table>'; echo '</div>'; } break; default: break; } } }
if ( ! function_exists('forms_search_generator')) { function forms_search_generator($type = NULL, $id = NULL, $name = NULL, $description = NULL, $options = array(), $selected = array(), $settings = NULL, $odd_even = 'even', $header = TRUE, $question = NULL, $form_name = 'search_') { switch($type) { case 'input': case 'text': case 'text_wysiwyg': if($header) echo '<div class="form-group '.$odd_even.'">'; $data = array( 'name' => $form_name . $type . '_' . $id, 'id' => $form_name . $type . '_' . $id, 'value' => set_value($form_name . $type . '_' . $id,$selected), 'class' => 'form-control', 'placeholder' => $name, ); if($header) echo form_label($name,$form_name . $type . '_' . $id); if($header && $description) echo '<p class="help-block">' . nl2br(html_escape($description)) . '</p>'; echo form_input($data); if($header) echo '</div>'; break; case 'date': if( empty($selected['first']) ) $selected_first = NULL; else $selected_first = $selected['first']; if( empty($selected['last']) ) $selected_last = NULL; else $selected_last = $selected['last']; if($header) echo '<div class="form-group date '.$odd_even.'">'; $data_from = array( 'name' => $form_name . $type . '_first_' . $id, 'id' => $form_name . $type . '_first_' . $id, 'value' => set_value($form_name . $type . '_first_' . $id,$selected_first), 'class' => 'form-control datepicker', 'placeholder' => lang('from'), ); $data_to = array( 'name' => $form_name . $type . '_last_' . $id, 'id' => $form_name . $type . '_last_' . $id, 'value' => set_value($form_name . $type . '_last_' . $id,$selected_last), 'class' => 'form-control datepicker', 'placeholder' => lang('to'), ); if($header) echo form_label($name,$form_name . $id); if($header && $description) echo '<p class="help-block">' . nl2br(html_escape($description)) . '</p>'; echo form_input($data_from); echo form_input($data_to); if($header) echo '</div>'; break; case 'radio': case 'dropdown': case 'checkbox': if( !empty($options) ) { if($header) echo '<div class="form-group '.$odd_even.'">'; if($header) echo form_label($name,$form_name . $type . '_' . $id); if($header && $description) echo '<p class="help-block">' . nl2br(html_escape($description)) . '</p>'; if($header) $dropdown = array(NULL => '-- '. $name . ' --'); else $dropdown = array(NULL => NULL); foreach($options as $option) { $dropdown[$option->option_id] = $option->name; } echo form_dropdown($form_name . $type . '_' . $id, $dropdown, set_value($form_name . $type . '_' . $id,$selected),array( 'class' => 'form-control' )); if($header) echo '</div>'; } break; default: break; } } }
if ( ! function_exists('forms_view')) { function forms_view($type = NULL, $id = NULL, $name = NULL, $description = NULL, $options = array(), $selected = array(), $settings = NULL, $odd_even = 'even', $header = TRUE) { switch($type) { case 'input': case 'text_wysiwyg': case 'date': if($header) echo '<div class="form-group '.$odd_even.'">'; if($header) echo '<strong>' . $name . '</strong>'; if($header && $description) echo '<p class="help-block">' . nl2br(html_escape($description)) . '</p>'; echo $selected; if($header) echo '</div>'; break; case 'text': if($header) echo '<div class="form-group '.$odd_even.'">'; if($header) echo '<strong>' . $name . '</strong>'; if($header && $description) echo '<p class="help-block">' . nl2br(html_escape($description)) . '</p>'; echo nl2br($selected); if($header) echo '</div>'; break; case 'dropdown': case 'radio': if($header) echo '<div class="form-group '.$odd_even.'">'; if($header) echo '<strong>' . $name . '</strong>'; if($header && $description) echo '<p class="help-block">' . nl2br(html_escape($description)) . '</p>'; echo isset($options[$selected]) ? $options[$selected]->name : NULL; if($header) echo '</div>'; break; } return NULL; } }
if ( ! function_exists('forms_value')) { function forms_value($type = NULL, $options = array(), $selected = array()) { switch($type) { case 'input': case 'text': case 'text_wysiwyg': case 'date': return $selected; break; case 'dropdown': case 'radio': return isset($options[$selected]) ? $options[$selected]->name : NULL; break; } return NULL; } }
if ( ! function_exists('strlen_array')) { function strlen_array( $array = array(), $name = NULL ) { $count = 0; if( !isset($name) OR empty($array) ) return $count; $first = array_values($array)[0]; if( !is_object($first) OR !isset($first->{$name}) ) return $count; foreach($array as $a) { $count += strlen($a->$name); } return $count; } }
And how you use it.
PHP Code: $odd_even = 'odd'; if( !empty($questions) && isset($page_current) ): if( !empty($page_current->description) ) echo '<div class="form-group-description">' . nl2br(html_escape($page_current->description)) . '</div>'; if( isset($questions[0]) ): foreach($questions[0] as $question): $odd_even = $odd_even === 'even' ? 'odd' : 'even'; $o = isset($options[$question->question_id]) ? $options[$question->question_id] : array(); $s = isset($selected[$question->question_id]) ? $selected[$question->question_id] : ''; $q = $question; if( in_array($question->field, array('table')) ) { $o = $options; $s = $selected; $q = $questions; $odd_even = 'even'; } forms_generator($question->field, $question->question_id, $question->name, $question->description, $o, $s, $question->settings, $odd_even, TRUE, $q); if( isset($questions[$question->question_id]) && !in_array($question->field, array('table')) ): foreach($questions[$question->question_id] as $sub): $o_sub = isset($options[$sub->question_id]) ? $options[$sub->question_id] : array(); $s_sub = isset($selected[$sub->question_id]) ? $selected[$sub->question_id] : ''; forms_generator($sub->field, $sub->question_id, $sub->name, $sub->description, $o_sub, $s_sub, $sub->settings, $odd_even); endforeach; endif; endforeach; endif; else: echo $form->description; endif;
|