Integrating Gantt with PHP using REST API, Slim and MySQL

If you’re starting a new project in PHP, you’d probably won’t build it from scratch but will use some framework instead.

Whether you use Laravel, Symfony, CodeIgniter or any other framework, each of them provides its own means for implementing data access layer. Having such resources at hand, you may want to step aside from our traditional approach with dhtmlxConnector which may look like a ‘black box’ to the rest of the project. You’d rather choose to build data access with tools your framework provides in order to keep everything under your control.

Specially for working with frameworks Gantt provides a simplified protocol for CRUD operations which can be easily integrated with REST API on the server.

To illustrate this possibility, we’ll create a web application using the Slim framework and REST API on the server side. MySQL will serve as a data storage. Let’s start our work.

In the above code we read all the tasks and links from database and set them to an object ($result). Also we specified the “open” property to define that the tasks tree should be open by default.

Finally, we sent the $result object to the client side as JSON.

If you open http://127.0.0.1:8080/ now, you should see gantt with data added at the previous stage (see Step 5 for data details).

Updating data on the server

To make our application complete, we need to add the most important functionality – the one that will allow sending changes made on the client side to the server. For this we have added a couple of code lines in the index.html file:

For each action on the client (adding, changing or removing data in the chart) dataProcessor will send an AJAX request. This request will contain all necessary data to save changes on the server. Since dataProcessor is used in the REST mode, it will send the corresponding HTTP verbs for different operations. The details for CRUD requests are given in the documentation.

So, let’s proceed with adding into the index.php file all the URLs and handlers we need:

Since Gantt operates with two kinds of entities – tasks and links – we need two sets of routes,

We have introduced two sets of routes: “/data/task” – for requests connected to operations with tasks and “/data/link” for requests related to operations with links.

There are also three types of requests are specified: POST – to add a new item into the database, PUT – to update an existing record and DELETE – to delete a record.

On each action a JSON object with the type of the performed operation will come. The response for the insert action will also include the id of the new record in the database that will be applied on the client side. If the operation failed, the “error” type should be returned.

Well, everything is ready for now. Let’s run our application, open http://127.0.0.1:8080 and enjoy a nice Gantt chart we’ve just created.

That’s it. You may find a ready demo on GitHub. We’ve tried to make our tutorial easy to reproduce and understand. There are other captivating materials are waiting ahead. Stay tuned!