CodeIgniter 4 provides a useful feature called `view_cell()` that helps developers create reusable components for their websites. When developing a website, we often need to display the same content or functionality on multiple pages, such as a website header, navigation menu, sidebar, footer, or latest news section. Instead of writing the same HTML and database queries repeatedly, we can use View Cells to create independent components and reuse them wherever required.
A View Cell works through a dedicated Cell class, which is responsible for preparing the data and passing it to a view for display. We can then insert this component into any page using the `view_cell()` function. This approach makes our code cleaner, easier to maintain, and more organized.
In this step-by-step tutorial, we will learn what View Cells are in CodeIgniter 4, how they work, how to create a Cell class, how to connect it with a view, and how to display reusable components on different pages. By the end of this tutorial, you will have a clear understanding of how to use `view_cell()` in your own CodeIgniter 4 projects.
Advantages of View Cells in CodeIgniter 4
CodeIgniter 4 View Cells provide several advantages when developing dynamic websites. They help developers organize their code, avoid repetition, and create reusable components. Understanding these advantages will help you decide when to use View Cells in your projects.
1. Code Reusability
View Cells allow you to create a component once and use it on multiple pages. For example, a website navigation menu or sidebar can be created as a View Cell and reused wherever required.
2. Avoid Code Duplication
Without View Cells, developers may need to write the same HTML and database queries in multiple views. View Cells help eliminate this repetition by keeping common functionality in a single place.
3. Easy Maintenance
When you need to modify a reusable component, you only need to update its Cell class or associated view. The changes can automatically appear wherever that component is used.
4. Separation of Logic and Presentation
View Cells allow you to separate data preparation from HTML presentation. The Cell class handles the required logic, while the view is responsible for displaying the content.
5. Simplified View Files
Using View Cells keeps your main view files clean and organized. Instead of including lengthy HTML or PHP logic, you can simply call the view_cell() function wherever the component is needed.
6. Dynamic Content Display
View Cells can retrieve data from a database or prepare dynamic content before displaying it. For example, you can create a component that displays the latest news, recent posts, or frequently updated information.
7. Improved Code Organization
View Cells help structure your application into smaller, independent components. This makes your CodeIgniter 4 project easier to understand, manage, and extend as it grows.
Conclusion
CodeIgniter 4 View Cells are a convenient way to build reusable and maintainable website components. They reduce code duplication, simplify maintenance, and improve the overall organization of your application. For developers working on dynamic websites, learning view_cell() is a useful step toward writing cleaner and more efficient CodeIgniter 4 code.
Example (https://maktabazaidbinthabit.com/)
I am using an online book-selling website as an example. In this application, book categories are loaded through a View Cell and automatically displayed on every page because they are used in the navigation menu.
Using a View Cell eliminates the need to fetch book categories separately in every page controller. This reduces code duplication, simplifies controller logic, and makes the application easier to maintain.
Step 1
Step 1
Create a folder Cells in app folder and create a file BookCategoryMenu.php. This file fetch category records from database and send to view bookcategorymenu.php
<?php
namespace App\Cells;
use Config\Database;
class BookCategoryMenu
{
public function getCategories(): string
{
$db = Database::connect();
$categories = $db->table('bookcategory')
->select('ID, CatName')
->where('RStatus', 1)
->orderBy('CatName', 'ASC')
->get()
->getResultArray();
return view('shared/bookcategorymenu', [
'categories' => $categories
]);
}
}
Step 2 :
bookcategorymenu.php wrap caregory into html coming from BookCategoryMenu.php from app/Cells folder. You can change html as per the your code base.
<li class="g-has-sub">
<a href="#showcase" class="g-link">Category <i class="g-caret"></i></a>
<ul class="g-sub">
<?php foreach (($categories ?? []) as $category): ?>
<li>
<a href="<?= site_url('category/' . $category['ID'] . '/' . esc($category['CatName']) ) ?>">
<?= esc($category['CatName']) ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</li>
Step 3 :
Finaly use this html into menu.php file and render it to main website menu
<?= view_cell('App\Cells\BookCategoryMenu::getCategories') ?>
.jpg)