Building an API-first Web App with Gentics Mesh and the PHP Microframework Silex

Silex is a PHP microframework based on Symfony used to develop small web applications. In this example we use Silex and its basic routing engine with the Twig template engine to read and display the data we read from our API-First CMS Gentics Mesh. And since Mesh provides API Endpoints and manages all the data for us, we can focus on the frontend part. But it also provides us with the opportunity to swap out Silex for a more complex Framework anytime.

By Johannes Schüth on Jan 19, 2017

In this blogpost we would like to show you how easy it is to use Gentics Mesh in combination with Silex, a microframework for PHP.

Getting Ready

All needed dependencies were added to the composer.json. You can use the PHP Composer to download these.

The following steps are needed to set up the example:

The Example

Once set up you should be able to access the running Apache instance via http://localhost.

The example consists of a small website which lists various vehicles from our demo data. The vehicles are grouped into categories which can be browsed individually. The example also features a small breadcrumb and image handling via Gentics Mesh.

Walkthrough

The main logic of our example is located within the index.php file. Note: The example contains some PHP 7 features. You can also use older PHP versions if you remove the type information from the functions.

All Apache requests will be redirected to the index.php file using the .htaccess rules. The Silex route handler accepts these requests and processes them.

The Gentics Mesh webroot API makes it very easy to find contents for a corresponding web path. As such all request paths are passed along to this API in order to load the corresponding node.

In our example, a node can either be a node of type 'category', 'vehicle' or 'vehicleImage'. The schema type information of a node is used to switch between different pages. Loading a category node for example will result in the product list template to be rendered. A product node on the other hand will result in a product detail page.


Schemas used in the Demo Example of API-first CMS Gentics Mesh

We use the Twig template engine to render the templates. This template format is directly supported by Silex and very easy to set up.

In our example we make use of template inheritance which is a great way to structure the templates and reuse common parts.

The base.twig template contains the needed includes and definitions for the Twitter Bootstrap template.

By default a breadcrumb navigation is added to each page. We moved the code for the navigation into the navigation.twigfile. The Gentics Mesh Navigation Root API is used to load the needed breadcrumb information for the root level.

Hint: In our example only a single level is used and as such the navigation is not changing. In more complex examples the Navigation Root API can also be used to build up multi-level menus which can also be affected by user permissions.

The welcome.twig template just displays some information about the example for requests to the index page. (e.g.http://localhost/).

API-first CMS Gentics Mesh together with Twig templates

The productList.twig template is used to display categories. A category can contain multiple products. The template contains a simple loop which iterates over all products in order to display each one. The /api/v1/demo/nodes/:categoryUuid/childrenendpoint of Gentics Mesh is used here to load all products for a certain category.


Hint: All endpoints which return lists of items can be easily paged. If you plan to display much more items it would be good to also render a paging element.

The productDetail.twig template is finally used to display all product information on a single page. In this case it is sufficient to pass the resolved Node directly to the template. The needed files can thus be directly used. e.g.: {{ product.fields.description }}.

Finally the whole project can also be packaged into a single docker container using the provided Dockerfile. The apache rewrite module must be enabled in order to support the .htaccess redirection rules.

We hope this example was informative and showed you how easy it is to utilize Silex in combination with Gentics Mesh to build a small template based website.

Feel free to drop a comment if you have and questions or feedback about the shown implementation. 

Related articles

This is the first of a series of articles to show what's possible with our API-First CMS Gentics Mesh:


You can also find this example on Github: https://github.com/gentics/mesh-silex-example


Title photo by Lisa Zoe via unsplash

Make web development fun again!

Thanks for reading our blog! Try our API-first CMS Gentics Mesh for free!

Free Download