Reading Time: 4 minutes

425 Views

CodeIgniter 4 introduces the concept of components, encapsulated packages containing reusable and standalone functionalities, aiding in modular development and code organization. Leveraging components in CodeIgniter 4 allows developers to streamline their applications by utilizing pre-built functionalities and enhancing code reusability.

In this tutorial, we’ll see the practical implementation of CodeIgniter 4 components. These components encapsulate various features, enabling developers to use them as standalone modules.

Let’s get started.

CodeIgniter 4 Installation

To create a CodeIgniter 4 setup run this given command into your shell or terminal. Please make sure composer should be installed.

composer create-project codeigniter4/appstarter codeigniter-4

Assuming you have successfully installed application into your local system.

Steps to Create and Use Custom Component

In CodeIgniter 4, components can be considered as reusable elements or modules that encapsulate specific functionality and can be easily reused across your application. These could be libraries, helpers, or other modules you create.

Let’s create a simple example of a custom component,

Creating a Custom Component

We’ll create a Calculator component that performs addition and multiplication operations.

>> Step #1: Create a Component File

Create a new file called Calculator.php in your app/Components directory,

Open file and write this complete code into it,

// app/Components/Calculator.php

namespace App\Components;

class Calculator
{
    public function add($a, $b)
    {
        return $a + $b;
    }

    public function multiply($a, $b)
    {
        return $a * $b;
    }
}

>> Step #2: Loading Components

Ensure that you’ve configured Composer to autoload your app directory. If not, modify your composer.json file to include the following in the autoload section,

"autoload": {
    "psr-4": {
        "App\\": "app/"
    }
}

Then, run composer dump-autoload to autoload the app directory.

>> Step #3: Using the Component in Controller

Now, let’s use the Calculator component in a controller to perform some operations.

// app/Controllers/Home.php

namespace App\Controllers;

use App\Components\Calculator;

class Home extends BaseController
{
    public function index()
    {
        $calculator = new Calculator();

        $resultAddition = $calculator->add(5, 3); // Perform addition
        $resultMultiplication = $calculator->multiply(4, 2); // Perform multiplication

        // Pass the results to the view
        return view('welcome_message', [
            'resultAddition' => $resultAddition,
            'resultMultiplication' => $resultMultiplication
        ]);
    }
}

The Home controller’s index() method, which uses the Calculator component to perform calculations.

>> Step #4: Displaying Results in a View

Create a view file to display the results,

<!-- app/Views/welcome_message.php -->

<!DOCTYPE html>
<html>
<head>
    <title>Calculator Results</title>
</head>
<body>
    <h1>Calculator Results</h1>
    <p>Addition Result: <?= $resultAddition ?></p>
    <p>Multiplication Result: <?= $resultMultiplication ?></p>
</body>
</html>

That’s it.

We hope this article helped you to learn about How to Use CodeIgniter Components Example Tutorial in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.