How to display data on view page using Tab structure in yii2?

SoftwareAccount · November 15, 2018, 11:54am

I am using yii2 basic application template. I have employee table and CRUD. In my view page I have displayed the Employee profile where the employees records such as Personal, contact, educational, work-experience, dependents, job and bank details on single page.

I want the information to be represented using Tab structure. (meaning there will be tabs such as Personal, Contact, Educational, Work Experience, Dependents, etc on view page. So if user clicks on Personal tab, then only personal details will be displayed and so on).

How to accomplish this using some extensions or any other means?

softark · November 15, 2018, 12:54pm

One of the standard solutions is to use yii2-bootstrap extension or yii2-jui extension. They both have “TABS” widget that can be used in your Yii2 project.

yiisoft/yii2-bootstrap The Twitter Bootstrap extension for the Yii framework
https://www.yiiframework.com/extension/yiisoft/yii2-bootstrap

yiisoft/yii2-jui The Jquery UI extension for the Yii framework
https://www.yiiframework.com/extension/yiisoft/yii2-jui

yii2-bootstrap is already included in the basic template, so you can try it out right now.

SoftwareAccount · November 15, 2018, 1:10pm

Yes I have gone through the one in yii2-bootstrap. But how to show the records from database table using this extension.

Can you explain in detail?

softark · November 15, 2018, 1:59pm

yiisoft/yii2-bootstrap - API Documentation > Class yii\bootstrap\Tabs
https://www.yiiframework.com/extension/yiisoft/yii2-bootstrap/doc/api/2.1/yii-bootstrap-tabs

Start something like the following:

    $tab1content = "This is a fixed text.";
    $tab2content = DetailView::widget([
        'model' => $model,
        'attributes' => [
            'no',
            'name',
            'short_name',
            ...
        ]
    ]);
    $tab3content = DetailView::widget([
        'model' => $model2,
        'attributes' => [
            'xxx',
            'yyy',
            'zzz',
            ...
        ]
    ]);

    echo Tabs::widget([
        'items' => [
            [
                'label' => 'One',
                'content' => $tab1content,
                'active' => true
            ],
            [
                'label' => 'Two',
                'content' => $tab2content,
            ],
            [
                'label' => 'Three',
                'content' => $tab3content,
            ],
        ]
    ]);

There’s nothing special in it.

SoftwareAccount · November 17, 2018, 11:14am

Hi, I use the yii\jui\Tabs to display data in tab structure. However I have employee, empeducation, empworkexp, empdependents, empbank tables. These are all different models containing details of employees education, work-experience, dependents and bank details. The relationship is as One employee has many education details, work experience details, dependents details and bank details. In such way I have database designed.

I have attached the images of my view page.

Here everything appears on oone single page whereas I want to display the same pattern using Tab structure where tabs would be
Personal - showing personal details
education - showing employees education details (coming from different model)
work experience - showing employees past work experience details (coming from different model),
and so on.


For eg: The code snippet for displaying total educations details of employee is as follows 


<b><font size="3">Educational Details</font></b>

<hr style="color: blue;
background-color: blue;
height: 5px;">

<div class="table-responsive">
<div class="container">

<table class="table table-bordered ">
    <thead>
      <tr bgcolor='#B8B8B8'>
        <th>Institution</th>
        <th>University</th>
		<th>Year of Passing</th>
		<th>Stream</th>
		<th>Educational Level</th>
		<th>Percentage</th>
      </tr>
    </thead>
    <tbody>

<?php

$emp = Employee::findOne($model->EmpId);

$empeducation= $emp->employeeeducations;

foreach($empeducation as $empeducations)
{
  
      echo "<tr>";

      echo "<td><b>".$empeducations['Institution']."</b></td>";
	  echo "<td><b>".$empeducations['University']."</b></td>";
	  echo "<td><b>".$empeducations['YearOfPassing']."</b></td>";
	  echo "<td><b>".$empeducations['Stream']."</b></td>";
	  echo "<td><b>".$empeducations['EducationalLevel']."</b></td>";
	  echo "<td><b>".$empeducations['Percentage']."</b></td>";
	  	echo "</tr>";
   

}


</tbody>
  </table>
</div>
</div> 

?>

How to accomplish such using tab structure?

softark · November 17, 2018, 1:34pm

You can use view blocks to organize the tabs.

<?php $this->beginBlock('bank'); ?>
...content of bank details ...
<?php $this->endBlock(); ?>

<?php $this->beginBlock('education'); ?>
...content of educatinal details...
<?php $this->endBlock(); ?> 

...

<?php echo Tabs::Widget([
        'items' => [
            [
                'label' => 'Bank Detais',
                'content' => $this->blocks['bank'],
                'active' => true,
            ],
            [
                'label' => 'Educational Details',
                'content' => $this->blocks['education'],
            ],
            ...
        ]
    ]); ?>

So if you could display all the data in one page, then you could also display them using tabs.

Guide > Views > Using Blocks
https://www.yiiframework.com/doc/guide/2.0/en/structure-views#using-blocks

SoftwareAccount · November 20, 2018, 11:32am

Hi,
It is working.

I have created 8 tabs on my view page as follows:

Personal
Contact
Education
Work Experience
Dependents
Job
Bank
Training

Here the content to be displayed in 8th tab doesn’t appears in the tab but get displayed on the view page and not in the tab. So whichever tab I open , the content gets displayed out of the tab area .

I have attached the images below, where in image file named image.png shows the content of tab 8 (Training) displayed outside the tab area.

And also the second image, file named image_view.png shows the content of tab 8 displayed at the bottom.

I want the content of tab 8 should be displayed only in tab 8. How to accomplish this?

Similarly in second image where Bank details are displayed, the header of the table is going outside of the tab? How to resolve this?

Below is the code of my view page:

<?php

use yii\helpers\Html;
use yii\widgets\DetailView;
use app\models\Employee;
use yii\jui\Tabs;


/* @var $this yii\web\View */
/* @var $model app\models\Employee */
echo Html::a('<span class="glyphicon glyphicon-list"></span> List', ['index'], ['class' => 'btn btn-primary']);
$this->title = $model->EmpId;
$this->params['breadcrumbs'][] = ['label' => 'Employees', 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;
?>
<p>


<?php $this->beginBlock('personal'); ?>



<div class="row">
<div class="col-sm-8">
<b><?= (Html::img('@web/uploadedimages/'.$model->Photo, ['width'=>'100', 'height'=>'100'])) ?>&nbsp;&nbsp;&nbsp;</b>


</div>
</div>

<br>
<div class="row">
<div class="col-sm-3">
<b>Employee</b>
</div>
<div class="col-sm-3">
<b>
   	<?php

		$emp = Employee::findOne($model->EmpId);

		echo Html::encode($emp->FirstName)." ".Html::encode($emp->MiddleName)." ".Html::encode($emp->LastName);
		?>
	</b>
</div>
</div>


<br>

<div class="row">
<div class="col-sm-3">
<b>	Date of Birth</b>
</div>
<div class="col-sm-3">
<b>
   	<?php

		$emp = Employee::findOne($model->EmpId);

		echo $emp->DOB;
		?>
	</b>
</div>
</div>


<br>

<div class="row">
<div class="col-sm-3">
<b>	Gender</b>
</div>
<div class="col-sm-3">
<b>
   	<?php

		$emp = Employee::findOne($model->EmpId);

		echo $emp->Gender;
		?>
	</b>
</div>
</div>


<br>

<div class="row">
<div class="col-sm-3">
<b>	Marital Status</b>
</div>
<div class="col-sm-3">
<b>
   	<?php

		$emp = Employee::findOne($model->EmpId);

		echo $emp->MaritalStatus;
		?>
	</b>
</div>
</div>


<br>

<div class="row">
<div class="col-sm-3">
<b>PAN Number</b>
</div>
<div class="col-sm-3">
<b>
   	<?php

		$emp = Employee::findOne($model->EmpId);

		echo $emp->PANNumber;
		?>
	</b>
</div>
</div>
<br>

<div class="row">
<div class="col-sm-3">
<b>	Aadhar Card No</b>
</div>
<div class="col-sm-3">
<b>
   	<?php

		$emp = Employee::findOne($model->EmpId);

		echo $emp->AadharCardNo;
		?>
	</b>
</div>
</div>

<br>
<div class="row">
<div class="col-sm-3">
<b>Username</b>
</div>
<div class="col-sm-3">
<b>
<?php

$emp = Employee::findOne($model->EmpId);

echo $emp->username;
?>

</b>
</div>
</div>
<br>


<div class="row">
<div class="col-sm-3">
<b>Password</b>
</div>
<div class="col-sm-3">
<b>
<?php

$emp = Employee::findOne($model->EmpId);

echo $emp->password;
?>

</b>
</div>
</div>
<br>


<div class="row">
<div class="col-sm-3">
<b>Login Status</b>
</div>
<div class="col-sm-3">
<b>
<?php

$emp = Employee::findOne($model->EmpId);

echo $emp->LoginStatus;
?>

</b>
</div>
</div>
<br>





<?php $this->endBlock(); ?> 


<?php $this->beginBlock('contact'); ?>


<div class="row">
<div class="col-sm-3">
<b>Address</b>
</div>
<div class="col-sm-5">
<b>
<?php

		$emp = Employee::findOne($model->EmpId);

		echo $emp->AddressStreet1." ".$emp->AddressStreet2." ".$emp->City." - ".$emp->Pincode." , ".$emp->State." , ".$emp->Country;
		?>
</b>
</div>
</div>
<br>


<div class="row">
<div class="col-sm-3">
<b>Work Telephone</b>
</div>
<div class="col-sm-5">
<b>
<?php

		$emp = Employee::findOne($model->EmpId);

		echo $emp->HomeTelephone;
		?>
</b>
</div>
</div>
<br>

<div class="row">
<div class="col-sm-3">
<b>Home Telephone</b>
</div>
<div class="col-sm-5">
<b>
<?php

		$emp = Employee::findOne($model->EmpId);

		echo $emp->WorkTelephone
		?>
</b>
</div>
</div>
<br>



<div class="row">
<div class="col-sm-3">
<b>Mobile</b>
</div>
<div class="col-sm-5">
<b>
<?php

$emp = Employee::findOne($model->EmpId);

$empmobile= $emp->employeemobiles;

foreach($empmobile as $empmobiles)
{
   
   echo $empmobiles['Mobile']." , ";

}
?>

</b>
</div>
</div>
<br>

<div class="row">
<div class="col-sm-3">
<b>Email</b>
</div>
<div class="col-sm-5">
<b>
<?php

$emp = Employee::findOne($model->EmpId);

echo $emp->Email;
?>

</b>
</div>
</div>
<br>



<div class="row">
<div class="col-sm-3">
<b>Reference Person 1</b>
</div>
<div class="col-sm-5">
<b>
<?php

$emp = Employee::findOne($model->EmpId);

echo $emp->ReferencePerson1." - ".$emp->ReferenceContact1;
?>

</b>
</div>
</div>
<br>

<div class="row">
<div class="col-sm-3">
<b>Reference Person 2</b>
</div>
<div class="col-sm-5">
<b>
<?php

$emp = Employee::findOne($model->EmpId);

echo $emp->ReferencePerson2." - ".$emp->ReferenceContact2;
?>

</b>
</div>
</div>
<br>




<?php $this->endBlock(); ?> 






<?php $this->beginBlock('education'); ?>

<div class="table-responsive">
<div class="container">

<table class="table table-bordered ">
    <thead>
      <tr bgcolor='#B8B8B8'>
        <th>Institution</th>
        <th>University</th>
		<th>Year of Passing</th>
		<th>Stream</th>
		<th>Educational Level</th>
		<th>Percentage</th>
      </tr>
    </thead>
    <tbody>

<?php

$emp = Employee::findOne($model->EmpId);

$empeducation= $emp->employeeeducations;

foreach($empeducation as $empeducations)
{
  
      echo "<tr>";

      echo "<td><b>".$empeducations['Institution']."</b></td>";
	  echo "<td><b>".$empeducations['University']."</b></td>";
	  echo "<td><b>".$empeducations['YearOfPassing']."</b></td>";
	  echo "<td><b>".$empeducations['Stream']."</b></td>";
	  echo "<td><b>".$empeducations['EducationalLevel']."</b></td>";
	  echo "<td><b>".$empeducations['Percentage']."</b></td>";
	  	echo "</tr>";
   

}

?>

</tbody>
  </table>
</div>
</div>


<?php $this->endBlock(); ?> 


<?php $this->beginBlock('workexprience'); ?>

<div class="table-responsive">
<div class="container">

<table class="table table-bordered">
    <thead>
      <tr bgcolor='#B8B8B8'>
        <th>Organization</th>
<th>Job Title</th>
<th>Job Description</th>
<th>From Date</th>
<th>To Date</th>
<th>Years of Experience</th>
      </tr>
    </thead>
    <tbody>

<?php

$emp = Employee::findOne($model->EmpId);

$empworkexp= $emp->employeeworkexperiences;

foreach($empworkexp as $empworkexps)
{
  
   echo "<tr>";
   
   echo "<td><b>".$empworkexps['Organization']."</b></td>";
   echo "<td><b>".$empworkexps['JobTitle']."</b></td>";
   echo "<td><b>".$empworkexps['JobDescription']."</b></td>";
   echo "<td><b>".$empworkexps['FromDate']."</b></td>";
   echo "<td><b>".$empworkexps['ToDate']."</b></td>";
   echo "<td><b>".$empworkexps['YearsOfExperience']."</b></td>";
   	echo "</tr>";
   
   
  
}

?>

</tbody>
  </table>
</div>
</div>







<?php $this->endBlock(); ?> 


<?php $this->beginBlock('dependents'); ?>

<div class="table-responsive">
<div class="container">

<table class="table table-bordered">
    <thead>
      <tr bgcolor='#B8B8B8'>
        <th>Name</th>
<th>Relationship</th>
<th>Date of Birth</th>
<th>Occupation</th>
      </tr>
    </thead>
    <tbody>
<?php

$emp = Employee::findOne($model->EmpId);

$empdependents= $emp->employeedependents;

foreach($empdependents as $empdependents1)
{
  
      echo "<tr>";
	  echo "<td><b>".$empdependents1['Name']."</b></td>";
	  echo "<td><b>".$empdependents1['Relationship']."</b></td>";
	  echo "<td><b>".$empdependents1['DateOfBirth']."</b></td>";
	  echo "<td><b>".$empdependents1['Occupation']."</b></td>";
	  	echo "</tr>";

}

?>

</tbody>
  </table>
</div>
</div>





<?php $this->endBlock(); ?> 


<?php $this->beginBlock('job'); ?>

<div class="table-responsive">
<div class="container">

<table class="table table-bordered">
    <thead>
      <tr bgcolor='#B8B8B8'>
        <th>Designation</th>
<th>Employment Status</th>
<th>Joined Date</th>
<th>Department</th>
<th>Salary</th>
      </tr>
    </thead>
    <tbody>
<?php

$emp = Employee::findOne($model->EmpId);

$empjob= $emp->employeejobs;

foreach($empjob as $empjobs)
{
  
      echo "<tr>";
	  echo "<td><b>".$empjobs['Job_Title']."</b></td>";
	  echo "<td><b>".$empjobs['EmploymentStatus']."</b></td>";
	  echo "<td><b>".$empjobs['JoinedDate']."</b></td>";
	  echo "<td><b>".$empjobs['Department']."</b></td>";
	  echo "<td><b>".$empjobs['Salary']."</b></td>";
	  	echo "</tr>";

}

?>

</tbody>
  </table>
</div>
</div>






<?php $this->endBlock(); ?> 


<?php $this->beginBlock('bank'); ?>

<div class="container">

<table class="table table-bordered">
    <thead>
      <tr bgcolor='#B8B8B8'>
			<th>Bank</th>
<th>Branch</th>
<th>IFSC Code</th>
<th>Account Number</th>
      </tr>
    </thead>
    <tbody>


<?php

$emp = Employee::findOne($model->EmpId);

$empbank = $emp->employeebanks;

foreach($empbank as $empbanks)
{
  
   echo "<tr>";
   echo "<td><b>".$empbanks['BankName']."</b></td>";
   echo "<td><b>".$empbanks['Branch']."</b></td>";
   echo "<td><b>".$empbanks['IFSCCode']."</b></td>";
   echo "<td><b>".$empbanks['AccountNumber']."</b></td>";
   	echo "</tr>";



}

?>

</tbody>
  </table>
</div>
</div>


<?php $this->endBlock(); ?> 



<?php $this->beginBlock('training'); ?>


<b>hello</b>

<?php $this->endBlock(); ?> 


<?php echo Tabs::Widget([
        'items' => [
            [
                'label' => 'Personal',
                'content' => $this->blocks['personal'],
                'active' => true,
            ],
			[
                'label' => 'Contact',
                'content' => $this->blocks['contact'],
            ],
            [
                'label' => 'Education',
                'content' => $this->blocks['education'],
            ],
			[
                'label' => 'Work Experience',
                'content' => $this->blocks['workexprience'],
            ],
			[
                'label' => 'Dependents',
                'content' => $this->blocks['dependents'],
            ],
            [
                'label' => 'Job',
                'content' => $this->blocks['job'],
            ],
			 [
                'label' => 'Bank',
                'content' => $this->blocks['bank'],
            ],
			[
                'label' => 'Training',
                'content' => $this->blocks['training'],
            ],
			
            
        ]
    ]); 
	
	
	?>

softark · November 20, 2018, 12:04pm

Check the html code of ‘bank’ block. It has an extra closing tag of '</div>' that doesn’t have a corresponding opening '<div>' tag.

When you have a mismatch in the opening and closing tags in your html, browsers will not report an error but somehow manage to insert a missing tag somewhere in order to render the page … sometimes in a way that you didn’t expect.

This kind of problem happens time to time when you are writing code. And the best thing you can do to prevent it is using a good editor (or IDE) that is intelligent enough to tell you the mismatch. In fact, I’ve discovered the extra '</div>' by reading your code into my PHPStorm editor.

SoftwareAccount · November 20, 2018, 1:03pm

Yes correct. it is working.