Beranda>Kode sumber ASP>Kategori lainnya
Unduh

kue-htmx

Integrasi CakePHP untuk htmx.

Versi CakePHP yang Didukung >= 4.x dan 5.x.

Menginstal Menggunakan Komposer

cd ke root folder aplikasi Anda (tempat file composer.json berada) dan jalankan perintah berikut: 

 composer require zunnu/cake-htmx

Kemudian muat plugin dengan menggunakan konsol CakePHP: 

 ./bin/cake plugin load CakeHtmx

Untuk menginstal htmx silakan telusuri dokumentasinya

Penggunaan

Fungsionalitas utama saat ini dibungkus dalam komponen Htmx. Untuk memuat komponen, Anda perlu memodifikasi src/Controller/AppController.php dan memuat komponen Htmx di fungsi initialize() 

 $ this -> loadComponent ( ' CakeHtmx.Htmx ' );

Meminta

Anda dapat menggunakan detektor untuk memeriksa apakah permintaannya adalah Htmx. 

 $ this -> getRequest ()-> is ( ' htmx ' )  // Always true if the request is performed by Htmx
$ this -> getRequest ()-> is ( ' boosted ' ) // Indicates that the request is via an element using hx-boost
$ this -> getRequest ()-> is ( ' historyRestoreRequest ' ) // True if the request is for history restoration after a miss in the local history cache

Dengan menggunakan komponen ini Anda dapat memeriksa detail yang lebih spesifik tentang permintaan tersebut. 

 $ this -> Htmx -> getCurrentUrl ();  // The current URL of the browser
$ this -> Htmx -> getPromptResponse (); // The user response to an hx-prompt
$ this -> Htmx -> getTarget (); // The id of the target element if it exists
$ this -> Htmx -> getTriggerName (); // The name of the triggered element if it exists
$ this -> Htmx -> getTriggerId (); // The id of the triggered element if it exists

Tanggapan

  • redirect

Htmx dapat memicu pengalihan sisi klien ketika menerima respons dengan header HX-Redirect . 

 $ this -> Htmx -> redirect ( ' /somewhere-else ' );
  • clientRefresh

Htmx akan memicu pemuatan ulang halaman ketika menerima respons dengan header HX-Refresh . clientRefresh adalah respons khusus yang memungkinkan Anda mengirim respons seperti itu. Tidak diperlukan argumen, karena Htmx mengabaikan konten apa pun. 

 $ this -> Htmx -> clientRefresh ();
  • stopPolling

Saat menggunakan pemicu polling, Htmx akan menghentikan polling ketika menemukan respons dengan kode status HTTP khusus 286. stopPolling adalah respons khusus dengan kode status tersebut. 

 $ this -> Htmx -> stopPolling ();

Lihat dokumentasi untuk semua header tersisa yang tersedia. 

 $ this -> Htmx -> location ( $ location ) // Allows you to do a client-side redirect that does not do a full page reload
$ this -> Htmx -> pushUrl ( $ url ) // pushes a new url into the history stack
$ this -> Htmx -> replaceUrl ( $ url ) // replaces the current URL in the location bar
$ this -> Htmx -> reswap ( $ option ) // Allows you to specify how the response will be swapped
$ this -> Htmx -> retarget ( $ selector ); // A CSS selector that updates the target of the content update to a different element on the page

Selain itu, Anda dapat memicu peristiwa sisi klien menggunakan metode addTrigger . 

 $ this -> Htmx
    -> addTrigger ( ' myEvent ' )
    -> addTriggerAfterSettle ( ' myEventAfterSettle ' )
    -> addTriggerAfterSwap ( ' myEventAfterSwap ' );

Jika Anda ingin meneruskan detail bersama dengan acara tersebut, Anda dapat menggunakan argumen kedua untuk mengirim isi. Ini mendukung string atau array. 

 $ this -> Htmx -> addTrigger ( ' myEvent ' , ' Hello from myEvent ' )
-> addTriggerAfterSettle ( ' showMessage ' , [
    ' level ' => ' info ' ,
    ' message ' => ' Here is a Message '
]);

Anda dapat memanggil metode tersebut beberapa kali jika ingin memicu beberapa peristiwa. 

 $ this -> Htmx
    -> addTrigger ( ' trigger1 ' , ' A Message ' )
    -> addTrigger ( ' trigger2 ' , ' Another Message ' )

tanda CSRF

Untuk menambahkan token CSRF ke semua permintaan Anda, tambahkan kode di bawah ini ke tata letak Anda. 

document.body.addEventListener( ' htmx:configRequest ' , (event) => {
    event.detail.headers[ ' X-CSRF-Token ' ] = " <?= $ this -> getRequest ()->getAttribute('csrfToken') ?> " ;
})

Rendering blok dan OOB Swap

Fungsi setBlock() memungkinkan Anda merender blok tertentu sambil menghapus blok lain yang mungkin dirender. Ini sangat berguna ketika Anda hanya perlu memperbarui sebagian dari tampilan Anda. 

 $ this -> Htmx -> setBlock ( ' userTable ' );

Fungsi addBlock() memungkinkan Anda menambahkan blok tertentu ke daftar blok yang harus dirender. 

 $ this -> Htmx -> addBlock ( ' userTable ' );

Fungsi addBlocks() memungkinkan Anda menambahkan beberapa blok ke daftar blok yang harus dirender 

 $ this -> Htmx -> addBlocks ([ ' userTable ' , ' pagination ' ]);

Tukar OOB

Htmx mendukung pembaruan beberapa target dengan mengembalikan beberapa respons parsial dengan hx-swap-oop . Lihat contoh Users index search functionality with pagination update Catatan jika Anda bekerja dengan tabel seperti pada contoh. Anda mungkin perlu menambahkan 

 < script type = "text/javascript" >
    htmx.config.useTemplateFragments = true;
</ script >

Di templat atau tata letak Anda.

Contoh

Fungsi pencarian indeks pengguna

Dalam contoh ini, kami akan menerapkan fungsi pencarian untuk indeks pengguna menggunakan Htmx untuk memfilter hasil secara dinamis. Kami akan membungkus badan tabel kami di dalam viewBlock yang disebut usersTable . Saat halaman dimuat, kami akan merender viewBlock usersTable . 

 // Template/Users/index.php

<?= $ this -> Form -> control ( ' search ' , [
    ' label ' => false , 
    ' placeholder ' => __ ( ' Search ' ),
    ' type ' => ' text ' , 
    ' required ' => false , 
    ' class ' => ' form-control input-text search ' ,
    ' value ' => ! empty ( $ search ) ? $ search : '' ,
    ' hx-get ' => $ this -> Url -> build ([ ' controller ' => ' Users ' , ' action ' => ' index ' ]),
    ' hx-trigger ' => " keyup changed delay:200ms " ,
    ' hx-target ' => " #search-results " ,
    ' templates ' => [
        ' inputContainer ' => ' <div class="col-10 col-md-6 col-lg-5">{{content}}</div> '
    ]
]); ?>

<table id="usersTable" class="table table-hover table-white-bordered">
    <thead>
        <tr>
            <th scope="col"> <?= ' id ' ?> </th>
            <th scope="col"> <?= ' Name ' ?> </th>
            <th scope="col"> <?= ' Email ' ?> </th>
            <th scope="col"> <?= ' Modified ' ?> </th>
            <th scope="col"> <?= ' Created ' ?> </th>
            <th scope="col" class="actions"> <?= ' Actions ' ?> </th>
        </tr>
    </thead>
    
    <tbody id="search-results">
        <?php $ this -> start ( ' usersTable ' ); ?>
            <?php foreach ( $ users as $ user ): ?>
                <tr>
                    <td> <?= $ user -> id ?> </td>
                    <td> <?= h ( $ user -> name ) ?> </td>
                    <td> <?= h ( $ user -> email ) ?> </td>
                    <td> <?= $ user -> modified ?> </td>
                    <td> <?= $ user -> created ?> </td>
                    <td class="actions">
                        <?= $ this -> Html -> link ( ' Edit ' ,
                            [
                                ' action ' => ' edit ' ,
                                $ user -> id
                            ],
                            [
                                ' escape ' => false
                            ]
                        ); ?>
                        <?= $ this -> Form -> postLink ( ' Delete ' ,
                            [
                                ' action ' => ' delete ' ,
                                $ user -> id
                            ],
                            [
                                ' confirm ' => __ ( ' Are you sure you want to delete user {0}? ' , $ user -> email ),
                                ' escape ' => false
                            ]
                        ); ?>
                    </td>
                </tr>
            <?php endforeach ; ?>
        <?php $ this -> end (); ?>

        <?php echo $ this -> fetch ( ' usersTable ' ); ?>
    </tbody>
</table>

Di pengontrol luar kami akan memeriksa apakah permintaannya adalah Htmx dan jika demikian maka kami hanya akan merender viewBlock usersTable . 

 // src/Controller/UsersController.php

public function index ()
{
    $ search = null ;
    $ query = $ this -> Users -> find ( ' all ' );

    if ( $ this -> request -> is ( ' get ' )) {
        if (! empty ( $ this -> request -> getQueryParams ())) {
            $ data = $ this -> request -> getQueryParams ();

            if ( isset ( $ data [ ' search ' ])) {
                $ data = $ data [ ' search ' ];
                $ conditions = [
                    ' OR ' => [
                        ' Users.id ' => ( int ) $ data ,
                        ' Users.name LIKE ' => ' % ' . $ data . ' % ' ,
                        ' Users.email LIKE ' => ' % ' . $ data . ' % ' ,
                    ],
                ];
                $ query = $ query -> where ([ $ conditions ]);
                $ search = $ data ;
            }
        }
    }

    $ users = $ query -> toArray ();
    $ this -> set ( compact ( ' users ' , ' search ' ));

    if ( $ this -> getRequest ()-> is ( ' htmx ' )) {
        $ this -> viewBuilder ()-> disableAutoLayout ();

        // we will only render the usersTable viewblock
        $ this -> Htmx -> setBlock ( ' usersTable ' );
    }
}

Fungsi pencarian indeks pengguna dengan pembaruan pagination

Dalam contoh ini, kami akan menerapkan fungsi pencarian dinamis untuk indeks pengguna menggunakan Htmx. Ini akan memungkinkan kami memfilter hasil secara real-time dan memperbarui penomoran halaman sesuai dengan itu. Kami akan membungkus badan tabel kami di dalam viewBlock yang disebut usersTable dan blok pagination ke pagination . Saat halaman dimuat, kami akan merender viewBlock usersTable dan pagination . 

 // Template/Users/index.php

<?= $ this -> Form -> control ( ' search ' , [
    ' label ' => false , 
    ' placeholder ' => __ ( ' Search ' ),
    ' type ' => ' text ' , 
    ' required ' => false , 
    ' class ' => ' form-control input-text search ' ,
    ' value ' => ! empty ( $ search ) ? $ search : '' ,
    ' hx-get ' => $ this -> Url -> build ([ ' controller ' => ' Users ' , ' action ' => ' index ' ]),
    ' hx-trigger ' => ' keyup changed delay:200ms ' ,
    ' hx-target ' => ' #search-results ' ,
    ' hx-push-url ' => ' true ' ,
    ' templates ' => [
        ' inputContainer ' => ' <div class="col-10 col-md-6 col-lg-5">{{content}}</div> '
    ]
]); ?>

<table id="usersTable" class="table table-hover table-white-bordered">
    <thead>
        <tr>
            <th scope="col"> <?= ' id ' ?> </th>
            <th scope="col"> <?= ' Name ' ?> </th>
            <th scope="col"> <?= ' Email ' ?> </th>
            <th scope="col"> <?= ' Modified ' ?> </th>
            <th scope="col"> <?= ' Created ' ?> </th>
            <th scope="col" class="actions"> <?= ' Actions ' ?> </th>
        </tr>
    </thead>
    
    <tbody id="search-results">
        <?php $ this -> start ( ' usersTable ' ); ?>
            <?php foreach ( $ users as $ user ): ?>
                <tr>
                    <td> <?= $ user -> id ?> </td>
                    <td> <?= h ( $ user -> name ) ?> </td>
                    <td> <?= h ( $ user -> email ) ?> </td>
                    <td> <?= $ user -> modified ?> </td>
                    <td> <?= $ user -> created ?> </td>
                    <td class="actions">
                        <?= $ this -> Html -> link ( ' Edit ' ,
                            [
                                ' action ' => ' edit ' ,
                                $ user -> id
                            ],
                            [
                                ' escape ' => false
                            ]
                        ); ?>
                        <?= $ this -> Form -> postLink ( ' Delete ' ,
                            [
                                ' action ' => ' delete ' ,
                                $ user -> id
                            ],
                            [
                                ' confirm ' => __ ( ' Are you sure you want to delete user {0}? ' , $ user -> email ),
                                ' escape ' => false
                            ]
                        ); ?>
                    </td>
                </tr>
            <?php endforeach ; ?>
        <?php $ this -> end (); ?>

        <?php echo $ this -> fetch ( ' usersTable ' ); ?>
    </tbody>
</table>

// pagination
<?php $ this -> start ( ' pagination ' ); ?>
    <nav aria-label="Page navigation" id="pagination">
        <ul class="pagination justify-content-center">
            <?php $ this -> Paginator -> setTemplates ([
                ' prevActive ' => ' <li class="page-item pagination-previous"><a class="page-link" hx-get="{{url}}" hx-target="#search-results" hx-push-url="true" href="#">{{text}}</a></li> ' ,
                ' prevDisabled ' => ' <li class="page-item disabled pagination-previous"><a class="page-link" hx-get="{{url}}" hx-target="#search-results" hx-push-url="true" href="#">{{text}}</a></li> ' ,
                ' number ' => ' <li class="page-item"><a class="page-link" hx-get="{{url}}" hx-target="#search-results" hx-push-url="true" href="#">{{text}}</a></li> ' ,
                ' current ' => ' <li class="page-item active"><a class="page-link" hx-get="{{url}}" hx-target="#search-results" hx-push-url="true" href="#">{{text}}</a></li> ' ,
                ' nextActive ' => ' <li class="page-item pagination-next"><a class="page-link" hx-get="{{url}}" hx-target="#search-results" hx-push-url="true" href="#">{{text}}</a></li> ' ,
                ' nextDisabled ' => ' <li class="page-item disabled pagination-next"><a class="page-link" hx-get="{{url}}" hx-target="#search-results" hx-push-url="true" href="#">{{text}}</a></li> ' ,
                ' first ' => ' <li class="page-item pagination-next"><a class="page-link" hx-get="{{url}}" hx-target="#search-results" hx-push-url="true" href="#">{{text}}</a></li> ' ,
                ' last ' => ' <li class="page-item pagination-next"><a class="page-link" hx-get="{{url}}" hx-target="#search-results" hx-push-url="true" href="#">{{text}}</a></li> ' ,
            ]); ?>
            <?= $ this -> Paginator -> first ( ' <i class="fas fa-angles-left"></i> ' , [ ' escape ' => false ]) ?>
            <?= $ this -> Paginator -> prev ( ' <i class="fas fa-chevron-left"></i> ' , [ ' escape ' => false ]) ?>
            <?= $ this -> Paginator -> numbers ([ ' first ' => 1 , ' last ' => 1 , ' modulus ' => 3 ]) ?>
            <?= $ this -> Paginator -> next ( ' <i class="fas fa-chevron-right"></i> ' , [ ' escape ' => false ]) ?>
            <?= $ this -> Paginator -> last ( ' <i class="fas fa-angles-right"></i> ' , [ ' escape ' => false ]) ?>
        </ul>
    </nav>
<?php $ this -> end (); ?>

<?= $ this -> fetch ( ' pagination ' ); ?>

Di pengontrol luar kami akan memeriksa apakah permintaannya adalah Htmx dan jika demikian maka kami hanya akan merender viewBlock usersTable . 

 // src/Controller/UsersController.php

public function index ()
{
    $ search = null ;
    $ query = $ this -> Users -> find ( ' all ' );

    if ( $ this -> request -> is ( ' get ' )) {
        if (! empty ( $ this -> request -> getQueryParams ())) {
            $ data = $ this -> request -> getQueryParams ();

            if ( isset ( $ data [ ' search ' ])) {
                $ data = $ data [ ' search ' ];
                $ conditions = [
                    ' OR ' => [
                        ' Users.id ' => ( int ) $ data ,
                        ' Users.name LIKE ' => ' % ' . $ data . ' % ' ,
                        ' Users.email LIKE ' => ' % ' . $ data . ' % ' ,
                    ],
                ];
                $ query = $ query -> where ([ $ conditions ]);
                $ search = $ data ;
            }
        }
    }

    $ this -> paginate [ ' limit ' ] = 200 ;
    $ users = $ this -> paginate ( $ query );
    $ this -> set ( compact ( ' users ' , ' search ' ));

    if ( $ this -> getRequest ()-> is ( ' htmx ' )) {
        $ this -> viewBuilder ()-> disableAutoLayout ();

        // render users table and pagination blocks
        $ this -> Htmx -> addBlock ( ' usersTable ' )-> addBlock ( ' pagination ' );
    }
}

Lisensi

Berlisensi di bawah Lisensi MIT.

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua