Skip to content
Generate Slim Router path URLs using Javascript.
Branch: master
Clone or download
Latest commit d5b5d34 Dec 23, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
example code style fixes Dec 23, 2017
src code style fixes Dec 23, 2017
tests
.gitignore
LICENSE
README.md
composer.json
composer.lock

README.md

Slim Router JS

Generate Slim Router path URLs using Javascript.

This package provides Javascript code to generate URLs for named routes in Slim Framework using Javascript:

var url = Slim.Router.pathFor('hello', {'name': 'World'});

The Slim.Router object provides the methods pathFor() and relativePathFor() which work the same as the Slim\Router::pathFor() and Slim\Router:relativePathFor() methods in PHP.

Installation

Install the package using composer:

composer require llvdl/slim-router-js

Then add a route to generate the Javascript code for the Slim.Router object:

$app = new \Slim\App();

// Add router javascript
$app->get('/router.js', function($req, $res, $args) {
    $routerJs = new \Llvdl\Slim\RouterJs($this->router);
    return $routerJs->getRouterJavascriptResponse();
});

Note: router.js is considered as a static file by the PHP built-in webserver. Either use a router script, or use a pattern without an extension, for example '/router`. See the PHP documentation for more information.

Finally, in the HTML file, import the router.js file:

<html>
  <head>
    <script src="/router.js"></script>
  </head>
</html>

Usage

To make a route available in Slim.Router in javascript, add a name to it:

$app->get('/hello/{name}', function($req, $res) {
  // ...
})->setName('hello');

Note: routes without a name are not available to Slim.Router in javascript.

In the HTML document, import router.js. The URL for the named route can then be generated using Slim.Router.pathFor:

<html>
  <head>
    <script src="/router.js"></script>
  </head>
  <body>
    <input id="name" type="text"/>
    <button id="submit-button">Go</button>
    <script>
      document.getElementById('submit-button').on('click', function() {
        var name = document.getElementById('name').value;
        var url = Slim.Router.pathFor('hello', {name: name});
        alert(url);
      });
    </script>
  </body>
</html>

See the example/ folder in this repository for an example script.

RouterJs methods:

RouterJs is the PHP class that generates the Javascript code. It provides the following methods:

  • __constructor(\Slim\Router $router, bool $minified): constructor

    By default a minified javascript is returned. Set $minified to false for non-minified javascript code.

  • getRouterJavascriptResponse(): Slim\Response

    Returns a HTTP response for use in an action

  • getRouterJavascript(): string

    Generates the javascript code

Slim.Router methods

The Slim.Router object provides the following methods:

  • pathFor(name, data, queryParams)
  • relativePathFor(name, data, queryParams)

These method work as the Slim\Router::pathFor() and Slim\Router::relativePathFor() methods in PHP.

Tests

The repository contains PHPUnit tests for the PHP code. To run these:

phpunit -c app/phpunit.xml

There are no automatic tests for the javascript code. It has been manually tested, and found to be working, using the example code in the following browsers:

  • Chrome and Chromium
  • Firefox
  • Microsoft Edge
  • Microsoft Internet Explorer 11

Todo

This section lists some future functional improvements that can be made:

  • Filter exposed routes, for example by route argument

  • Caching

    Note that middleware can be used to cache the response.

  • Allow for inclusing in a Javascript bundler, for example Webpack

You can’t perform that action at this time.