PHPackages                             codekanzlei/cake-frontend-bridge - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Framework](/categories/framework)
4. /
5. codekanzlei/cake-frontend-bridge

ActiveCakephp-plugin[Framework](/categories/framework)

codekanzlei/cake-frontend-bridge
================================

Frontend Bridge CakePHP 3

v3.0.4(5y ago)573.4k↓39.2%3[6 issues](https://github.com/scherersoftware/cake-frontend-bridge/issues)[1 PRs](https://github.com/scherersoftware/cake-frontend-bridge/pulls)7MITJavaScriptPHP >=7.1

Since Jan 12Pushed 1y ago3 watchersCompare

[ Source](https://github.com/scherersoftware/cake-frontend-bridge)[ Packagist](https://packagist.org/packages/codekanzlei/cake-frontend-bridge)[ RSS](/packages/codekanzlei-cake-frontend-bridge/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (5)Versions (72)Used By (7)

[![CakePHP 3 Notifications Plugin](https://raw.githubusercontent.com/scherersoftware/cake-frontend-bridge/master/cake-frontend-bridge.png)](https://raw.githubusercontent.com/scherersoftware/cake-frontend-bridge/master/cake-frontend-bridge.png)[![License](https://camo.githubusercontent.com/55c0218c8f8009f06ad4ddae837ddd05301481fcf0dff8e0ed9dadda8780713e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE.txt)

A CakePHP 3 plugin that allows the creation of JavaScript Controllers for Controller-actions. Code-generation via the shell is possible as well.

Dependencies
------------

[](#dependencies)

- [Twitter Bootstrap 3.x](http://getbootstrap.com/)
- [jQuery](https://jquery.com/)

Installation
------------

[](#installation)

#### 1. require the plugin in `composer.json`

[](#1-require-the-plugin-in-composerjson)

```
"require": {
	"codekanzlei/cake-frontend-bridge": "dev-master",
}

```

#### 2. Include the plugin using composer

[](#2-include-the-plugin-using-composer)

Open a terminal in your project-folder and run

```
$ composer update

```

#### 3. Load the plugin in `config/bootstrap.php`

[](#3-load-the-plugin-in-configbootstrapphp)

```
Plugin::load('FrontendBridge', ['bootstrap' => true, 'routes' => true, 'autoload' => true]);

```

#### 4. Create additional files

[](#4-create-additional-files)

Create the following files and set them up using the given code.

- `app_controller.js`

    **path:**`/webroot/js/app/`

    **template code:**

    ```
     Frontend.AppController = Frontend.Controller.extend({
         baseComponents: [],
         _initialize: function() {
             this.startup();
         }
     });

    ```

#### 5. Configure `AppController.php`

[](#5-configure-appcontrollerphp)

In your `src/Controller/AppController.php`, insert the following pieces of code to setup the Frontend Bridge plugin.

**Traits:**

```
use \FrontendBridge\Lib\FrontendBridgeTrait;

```

**$helpers:**

```
'FrontendBridge' => ['className' => 'FrontendBridge.FrontendBridge'],

```

**$components:**

```
'FrontendBridge.FrontendBridge',

```

#### 6. Load the scripts

[](#6-load-the-scripts)

Inside your `` section add the following code to load all needed .js controllers:

```

```

In development add `$this->FrontendBridge->addAllControllers();` into the if block to load without exceptions all .js controllers

#### 7. Add Main Content Classes

[](#7-add-main-content-classes)

Inside your `Layout\default.ctp` add the following line. Inside the div should be your content.

```
>
    ...

    ...

```

Also add this to other layout files, if you're using them.

Bake JS Controllers
-------------------

[](#bake-js-controllers)

You can bake JS Controllers for your controller actions by using the bake shell. Just pass the controller name and the camelized action name.

```
bin/cake bake js_controller Posts addPost

```

This command will create the JavaScript-controller file and if necessary the directory structure for it.

You can also bake JS controllers into your plugins by using the `--plugin` option.

Code Examples
-------------

[](#code-examples)

Use the following example code snippets to get a better understanding of the FrontendBridge Plugin and its useful features. Note that you might need to include further Plugins for these.

### 1.) Access view variables in js\_controller

[](#1-access-view-variables-in-js_controller)

Use the following basic setup to pass data from the Backend to the Frontend via FrontendBridge.

- **YourController.php** (CakeController)

    ```
     action() {
     	$this->FrontendBridge->setJson(
     		'varName',
     		'this is sample text');
     }

    ```
- **action.ctp** (Cake View file)

    ```
     display content of json var

    ```
- **action\_controller.js** (FrontendBridge JS-Controller)

    ```
     startup: function() {
     	var varName = this.getVar('varName');
     	$('findMe').text(varName);
     }

    ```

Be sure to play close attention to the naming convention, especially regarding the `action_controller.js`. Following the example shown above, its exact path should be `/webroot/js/app/controllers/your/action_controller.js`

The data you passed from the Controller to the Frontend in the variable `varName` should now be rendered in the view.

### 2.) Use modal dialog windows for editing forms

[](#2-use-modal-dialog-windows-for-editing-forms)

This example uses the following additional Plugins:

- [friendsofcake bootstrap UI](https://github.com/FriendsOfCake/bootstrap-ui) recommended for conveniently creating Form-Elements
- [scherersoftware cake-cktools](https://github.com/scherersoftware/cake-cktools) recommended for powerful buttons

Use the following basic setup to use a modal view element as an edit form that passes the change-request data to the Backend via FrontendBridge. For this example, we will use a basic Users-Model as well as a modal form-element, embedded in the regular view page for a User-Entity to edit and save some of its attributes.

- **UsersController.php** (CakeController)

    ```
     public function editModal ($id = null) {
     	$user = $this->Users->get($id);
     	if ($this->request->is(['patch', 'post', 'put'])) {
     		$user = $this->Users->patchEntity($user, $this->request->data);
     		if ($this->Users->save($user)) {
     			// prevent redirecting or reloading of the current page
     		    $this->FrontendBridge->setJson('success', true);
     		}
     	}
     	$this->set(compact('user'));
     }

    ```
- **view.ctp** (regular Cake View file; edit\_modal.ctp in front of it)

    ```
     // CkTools button

    ```
- **edit\_modal.ctp** (View file which will be the content of the modal form)

    ```

     		×

     	            // [further input fields]

     	        	// FormEnd (save) button generated using CkTools

    ```
- **edit\_modal\_controller.js** (FrontendBridge JS-Controller)

    ```
     startup: function() {
     	//  add an EventListener to element with class 'modal-form'
     	this.$('.modal-form').on('click', function(e) {
     		// callback function when Listener is triggered
             e.preventDefault();
             App.Main.Dialog.loadDialog($(e.currentTarget).attr('href'), {
                 modalTitle: 'Modal title',
                 preventHistory: false
             });
         });
     }

    ```

### 3.) Generate custom AJAX requests

[](#3-generate-custom-ajax-requests)

Use the following setup to generate custom AJAX requests. Using FrontendBridge's 'request' action, we will pass JSON data from the Backend to the Frontend.

- **YourController.php** (CakeController)

    ```
     public function getJsonData()
     {
         $code = ApiReturnCode::SUCCESS;
         return $this->Api->response($code, [
             'foo' => 'bar',
             'more' => 'json-data'
         ]); // JSON data which will be logged in your browser console
     }

    ```
- **index.ctp** (Cake View file)

    ```
     Get JSON data

    ```
- **index\_controller.js** (FrontendBridge JS-Controller)

    ```
     App.Controllers.YourIndexController = Frontend.AppController.extend({
     	startup: function() {
     		this.$('.ajax-json-demo').click(function() {
                 var url = {
                     controller: 'Your',
                     action: 'getJsonData'
                 };
                 // if postData is null, a GET request will be made
                 var postData = null;
                 App.Main.request(url, postData, function (response) {
                     alert('Response Code ' + response.code + ' - see console for details');
                     console.log(response.data);
                 });
             }.bind(this));
     	}
     });

    ```

### 4.) Load content dynamically using AJAX

[](#4-load-content-dynamically-using-ajax)

Use the following setup to make custom HTML requests via AJAX. Using FrontendBridge's `loadJsonAction` and `request`, we will implement a very basic livesearch.

This example assumes a Table called `Users` with a field `username` in your database.

- **SearchController.php** (CakeController)

    ```
     public function index() {
     	// renders index.ctp
     }

     public function search() {
         $users = null;
         if ($this->request->is(['patch', 'post', 'put']) && !empty($this->request->data['search'])) {
         	// search UsersTable for entities that contain
         	// request->data['search'] in field 'username'
             $users = TableRegistry::get('Users')->find()
                 ->where(['username LIKE' => '%' . $this->request->data['search'] . '%'])
                 ->all();
         }
         $this->set(compact('users'));
     }

    ```
- **index.ctp** (Cake View file)

    ```

    ```
- **search.ctp** (Cake View file)

    ```

     	no results to display

    ```
- **index\_controller.js** (FrontendBridge JS-Controller)

    ```
     App.Controllers.SearchIndexController = Frontend.AppController.extend({
         startup: function() {
         	// set KeyUp-EventListener to field with id 'search' in index.ctp
             this.$('#search').keyup(this._search.bind(this));
         },

         // called at eatch keyup-event in 'search'
         _search: function() {
             var $renderTarget = this.$('.results');
             var url = {
                 controller: 'Search',
                 action: 'search'
             }

             // create a custom AJAX request with the user input included in the post-data
             App.Main.loadJsonAction(url, {
                 data: {
                     search: this.$('#search').val()
                 },
                 target: $renderTarget, // render the HTML into this selector
             });
         }
     });

    ```

Functionality Overview
----------------------

[](#functionality-overview)

- **loadJsonAction**

    Allows dynamically loading content in the view using AJAX according to user interaction. Uses `request`.
- **request**

    Allows generating custom AJAX requests. Also supports FormData (except IE <= 9) as request data.

###  Health Score

38

—

LowBetter than 85% of packages

Maintenance8

Infrequent updates — may be unmaintained

Popularity35

Limited adoption so far

Community25

Small or concentrated contributor base

Maturity73

Established project with proven stability

 Bus Factor1

Top contributor holds 52.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~52 days

Recently: every ~420 days

Total

68

Last Release

630d ago

Major Versions

v1.4.14 → v2.0.0-rc12017-08-18

v2.0.0-rc5 → v3.0.0-rc12019-06-04

v3.0.3 → v4.0.0-rc12019-11-29

v3.0.4-alpha → v4.x-dev2024-08-27

PHP version history (3 changes)v1.4.0PHP ~7.1

v4.0.0-rc1PHP >=7.2.0

v3.0.4PHP >=7.1

### Community

Maintainers

![](https://www.gravatar.com/avatar/7005ae518cf40495e5e8bbf91ae64379e5a853a62c2e35bcdc7ead11e6014ea2?d=identicon)[robertscherer](/maintainers/robertscherer)

![](https://www.gravatar.com/avatar/d0b3fb0817571a9d93cae13183799e0b255c5e028de7141e9979ab72b406d8ad?d=identicon)[felixkempf](/maintainers/felixkempf)

---

Top Contributors

[![robertschererc](https://avatars.githubusercontent.com/u/203977391?v=4)](https://github.com/robertschererc "robertschererc (48 commits)")[![felixkempf](https://avatars.githubusercontent.com/u/8512231?v=4)](https://github.com/felixkempf "felixkempf (18 commits)")[![jonathan-neugber](https://avatars.githubusercontent.com/u/17924468?v=4)](https://github.com/jonathan-neugber "jonathan-neugber (13 commits)")[![cleptric](https://avatars.githubusercontent.com/u/6617432?v=4)](https://github.com/cleptric "cleptric (7 commits)")[![iamqqv](https://avatars.githubusercontent.com/u/11193619?v=4)](https://github.com/iamqqv "iamqqv (4 commits)")[![stmeyer](https://avatars.githubusercontent.com/u/10654545?v=4)](https://github.com/stmeyer "stmeyer (1 commits)")

###  Code Quality

Static AnalysisPHPStan

Type Coverage Yes

### Embed Badge

![Health badge](/badges/codekanzlei-cake-frontend-bridge/health.svg)

```
[![Health](https://phpackages.com/badges/codekanzlei-cake-frontend-bridge/health.svg)](https://phpackages.com/packages/codekanzlei-cake-frontend-bridge)
```

###  Alternatives

[cakephp/debug_kit

CakePHP Debug Kit

86514.0M138](/packages/cakephp-debug-kit)[cakephp/bake

Bake plugin for CakePHP

11211.2M158](/packages/cakephp-bake)[friendsofcake/bootstrap-ui

Bootstrap front-end framework support for CakePHP

3492.1M32](/packages/friendsofcake-bootstrap-ui)[cakephp/app

CakePHP skeleton app

3831.7M1](/packages/cakephp-app)[dereuromark/cakephp-ide-helper

CakePHP IdeHelper Plugin to improve auto-completion

1862.1M27](/packages/dereuromark-cakephp-ide-helper)[cakephp/localized

CakePHP Localized Plugin

218595.6k5](/packages/cakephp-localized)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)