How to use Hotwire with codeigniter?

Question

How to use Hotwire with codeigniter?

154 Views Asked by Santo Doni Romadhoni At 04 August 2023 at 03:08

Initially, I was intrigued by livewire when I saw someone using livewire. But it turns out that after I checked, livewire can only run on Laravel. Meanwhile, I myself have only used code igniter. Then, I looked for an alternative and it came across me with hotwire. I've been reading about hotwire, but I haven't found a single guide to using it in code igniter. Is it possible to use hotwire in Code Igniter 3? if possible, how? Can you give me an example?

Original Q&A

There are 1 best solutions below

**borisano** · Answer 1 · 2023-09-12T10:39:09.560000

Yes, it is possible to use Hotwire in CodeIgniter 3. However, there is no official guide available yet, but that does not mean you can't do it!

Install the Turbo and Stimulus packages:

composer require hotwired/turbo
composer require hotwired/stimulus

Create a new controller and action for your Hotwire component. For example:

class Home extends CI_Controller
{
    public function index()
    {
        $this->load->view('home');
    }
}

Create a new view file for your Hotwire component. For example:

<html>
<head>
    <title>Hotwire Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stimulus/2.9.0/stimulus.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stimulus-loading/1.1.2/stimulus-loading.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>Hotwire Demo</h1>
        <input type="text" data-target="my-input">
        <p data-target="my-output"></p>
    </div>
    <script>
        $(document).on('turbolinks:load', function() {
            new StimulusReflex('my-input', {
                action: function(event) {
                    const output = document.querySelector('[data-target="my-output"]');
                    output.textContent = event.target.value;
                }
            });
        });
    </script>
</body>
</html>

In your controller action, add the following code to initialize Turbo:

$this->turbo->init();

You should now be able to use Hotwire. Here is an example of a simple Hotwire component that updates the value of a <p> element when the value of an input element changes:

<input type="text" data-target="my-input">
<p data-target="my-output"></p>

The data-target attribute specifies the name of the Stimulus controller that will handle the event. In this case, the controller is called my-input.

The StimulusReflex constructor takes two arguments: the name of the controller and an object that defines the actions that the controller will handle. In this case, the action is called action and it takes an event object as its argument.

The event object contains information about the event that triggered the action, such as the name of the element that was clicked and the value of the input element.

In this example, the action function simply updates the value of the

element with the value of the input element.

I hope this helps!

How to use Hotwire with codeigniter?

There are 1 best solutions below

Related Questions in PHP

Related Questions in CODEIGNITER

Related Questions in HOTWIRE

Trending Questions

Popular # Hahtags

Popular Questions