Download the PHP package codekanzlei/cake-frontend-bridge without Composer
On this page you can find all versions of the php package codekanzlei/cake-frontend-bridge. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package cake-frontend-bridge
A CakePHP 3 plugin that allows the creation of JavaScript Controllers for Controller-actions. Code-generation via the shell is possible as well.
Dependencies
Installation
1. require the plugin in composer.json
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
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:
5. Configure AppController.php
In your src/Controller/AppController.php
, insert the following pieces of code to setup the Frontend Bridge plugin.
Traits:
$helpers:
$components:
6. Load the scripts
Inside your section add the following code to load all needed .js controllers:
In development add into the if block to load without exceptions all .js controllers
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
You can bake JS Controllers for your controller actions by using the bake shell. Just pass the controller name and the camelized action name.
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
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
Use the following basic setup to pass data from the Backend to the Frontend via FrontendBridge.
-
YourController.php (CakeController)
-
action.ctp (Cake View file)
- action_controller.js (FrontendBridge JS-Controller)
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
This example uses the following additional Plugins:
- friendsofcake bootstrap UI recommended for conveniently creating Form-Elements
- 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)
-
view.ctp (regular Cake View file; edit_modal.ctp in front of it)
-
edit_modal.ctp (View file which will be the content of the modal form)
- edit_modal_controller.js (FrontendBridge JS-Controller)
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)
-
index.ctp (Cake View file)
- index_controller.js (FrontendBridge JS-Controller)
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)
-
index.ctp (Cake View file)
-
search.ctp (Cake View file)
- index_controller.js (FrontendBridge JS-Controller)
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.