How to applying html/css on php loop functions

Question

I've been doing admin panel for property listing page using php,codeigniter, Html, CSS & Javascript using Bootstrap.

I'm done with basic design and function for my admin panel. But this time I want to explore more because my layout is not user friendly.

Example I want to list a property so I have a lot of fields to fill-up. In my layout since I have a lot of fields I need to do scroll page.Check my sample screenshot

As you can see my scroll bar is too long. So I'm thinking that I should use nav-tabs or like form wizard to save space for my page.

Anyone can have tutorial/tips on how to make formwizard or nav-tabs if you use foreach/if else function for your fields?

On my foreach I have CATEGORY and Fields. So on each field have a parent. Example:

Facts (CATEGORY)

-Purpose (Fields)

-Property type (Fields)

-Description (Fields)

Building Info (CATEGORY)

-Building Name(Fields)

-Amenities(Fields)

Reference Code:

<?php foreach($options as $key_option=>$val_option):?>                                          
    <?php
    $required_text = '';
    $required_notice = '';
    if($val_option->is_required == 1)
    {
        $required_text = 'required';
        $required_notice = '*';
    }

    $max_length_text = '';
    if($val_option->max_length > 0)
    {
        $max_length_text = 'maxlength="'.$val_option->max_length.'"';
    }

    ?>

    <?php if($val_option->type == 'CATEGORY'):?>
    <hr />
    <h5><?php echo $val_option->option?> <span class="checkbox-visible"><?php echo form_checkbox('option'.$val_option->id.'_'.$key, '   true', set_value('option'.$val_option->id.'_'.$key, isset($estate->{'option'.$val_option->id.'_'.$key})?$estate->{'option'.$val_option->id.'_'.$key}:''), 'id="inputOption_'.$key.'_'.$val_option->id.'"')?> <?php echo lang_check('Hidden on preview page'); ?></span></h5>
    <hr />
    <?php elseif($val_option->type == 'INPUTBOX' || $val_option->type == 'DECIMAL' || $val_option->type == 'INTEGER'):?>
        <div class="form-group <?php echo (!$val_option->is_frontend && $this->session->userdata('type') == 'AGENT_LIMITED'?' hidden':'') ?>">
            <label class="col-lg-3 control-label"><?php echo $required_notice.$val_option->option?> <?php if(!empty($options_lang[$key][$key_option]->hint)):?><i class="icon-question-sign hint" data-hint="<?php echo $options_lang[$key][$key_option]->hint;?>"></i><?php endif;?></label>
          <div class="<?php echo empty($options_lang[$key][$key_option]->prefix)&&empty($options_lang[$key][$key_option]->suffix)?'col-lg-9':'col-lg-6'; ?>">
            <?php echo form_input('option'.$val_option->id.'_'.$key, set_value('option'.$val_option->id.'_'.$key, isset($estate->{'option'.$val_option->id.'_'.$key})?$estate->{'option'.$val_option->id.'_'.$key}:''), 'class="form-control '.$val_option->type.'" id="inputOption_'.$key.'_'.$val_option->id.'" placeholder="'.$val_option->option.'" '.$required_text.' '.$max_length_text)?>
          </div>
          <?php if(!empty($options_lang[$key][$key_option]->prefix) || !empty($options_lang[$key][$key_option]->suffix)): ?>
          <div class="col-lg-3">
            <?php echo $options_lang[$key][$key_option]->prefix.$options_lang[$key][$key_option]->suffix?>
          </div>
          <?php endif; ?>
        </div>
    <?php elseif($val_option->type == 'DROPDOWN'):?>
        <div class="form-group <?php echo (!$val_option->is_frontend && $this->session->userdata('type') == 'AGENT_LIMITED'?' hidden':'') ?>">
          <label class="col-lg-3 control-label"><?php echo $required_notice.$val_option->option?>  <?php if(!empty($options_lang[$key][$key_option]->hint)):?><i class="icon-question-sign hint" data-hint="<?php echo $options_lang[$key][$key_option]->hint;?>"></i><?php endif;?></label>
          <div class="col-lg-9">
            <?php
            if(isset($options_lang[$key][$key_option]))
                $drop_options = array_combine(explode(',',check_combine_set(isset($options_lang[$key])?$options_lang[$key][$key_option]->values:'', $val_option->values, '')),explode(',',check_combine_set($val_option->values, isset($options_lang[$key])?$options_lang[$key][$key_option]->values:'', '')));
            else
                $drop_options = array();

            // If you don't want translation to admin interface langauge uncomment this 1 line below:
            // $drop_options = array_combine(explode(',', $options_lang[$key][$key_option]->values), explode(',', $options_lang[$key][$key_option]->values));

            $drop_selected = set_value('option'.$val_option->id.'_'.$key, isset($estate->{'option'.$val_option->id.'_'.$key})?$estate->{'option'.$val_option->id.'_'.$key}:'');

            echo form_dropdown('option'.$val_option->id.'_'.$key, $drop_options, $drop_selected, 'class="form-control" id="inputOption_'.$key.'_'.$val_option->id.'" placeholder="'.$val_option->option.'" '.$required_text)

            ?>
            <?php //=form_dropdown('option'.$val_option->id.'_'.$key, explode(',', $options_lang[$key][$key_option]->values), set_value('option'.$val_option->id.'_'.$key, isset($estate->{'option'.$val_option->id.'_'.$key})?$estate->{'option'.$val_option->id.'_'.$key}:''), 'class="form-control" id="inputOption_'.$val_option->id.'" placeholder="'.$val_option->option.'"')?>
          </div>
        </div>

Just make a div start and end in the foreach so each category gets its own div and assign it a name/ID based on the category name. Then make a separate foreach above the main one to just generate the nav tabs. Js will take care of the rest — Alex
– Alex, Commented Dec 10, 2017 at 13:51

Alex · Accepted Answer · 2017-12-11 16:50:39Z

1

You can just use bootstrap tabs and then do something like this:

    <script type="text/javascript">
        $(document).ready(function () {
            // this will default the first tab to be shown
            $('#myTab a:first').tab('show');
        });
    </script>
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <?php foreach ($options as $key_option => $val_option): ?>
            <?php $item = str_replace(' ', '_', strtolower($val_option->option)); ?>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#<?php echo $item; ?>" role="tab" aria-controls="<?php echo $item; ?>"><?php echo $val_option->option; ?></a>
            </li>
        <?php endforeach; ?>
    </ul>
    <div class="tab-content" id="myTabContent">
        <?php foreach ($options as $key_option => $val_option): ?>
            <?php $item = str_replace(' ', '_', strtolower($val_option->option)); ?>
            <div class="tab-pane fade" id="<?php echo $item; ?>" role="tabpanel">
                <?php //echo $val_option->content; // or whatever?>
            </div>
        <?php endforeach; ?>
    </div>

You need to include the following:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">

Bootstrap 4 requires popper js to work!

edited Dec 11, 2017 at 16:50

answered Dec 10, 2017 at 14:43

Alex

9,2958 gold badges43 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Carlvic Lim Over a year ago

I follow your suggestion and I have title tabs but I having problem on showing content on each tabs when I click tabs it shows nothing.

Alex Over a year ago

You probably forgot to include popper.js. Check my updated answer, made a few other mods too.

Carlvic Lim Over a year ago

Great answer, but we forgot the if else statement where we can identify which is a mytab(Categories) and mytabcontent(fields). But this answer works fine with the different approach.

Alex Over a year ago

you mean a tab within a tab? i sort of missed that part. to be honest from a ux perspective that seems weird. i'd suggest just keeping it like facts, primary info, unit info as tabs and have the different fields within that.

Carlvic Lim Over a year ago

Hmm. I have a front page like this imgur.com/a/10UWD but i do this manually without using a loop or foreach. Then I notice my listing page i.sstatic.net/qmRey.png is not good for a user who list/register because you will scroll too much.Then I'm thinking that I will do it like my front page but I having applying it on foreach. Or if you have any suggestion for better ux for my listing page?

|

Collectives™ on Stack Overflow

How to applying html/css on php loop functions

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related