{"id":3551,"date":"2016-05-31T17:00:35","date_gmt":"2016-05-31T13:00:35","guid":{"rendered":"http:\/\/dhtmlx.com\/blog\/?p=3551"},"modified":"2025-03-28T19:42:22","modified_gmt":"2025-03-28T16:42:22","slug":"integrating-gantt-php-using-rest-api-slim-mysql","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/integrating-gantt-php-using-rest-api-slim-mysql\/","title":{"rendered":"Integrating Gantt with PHP using REST API, Slim and MySQL"},"content":{"rendered":"

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

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.<\/p>\n

Specially for working with frameworks Gantt provides a simplified protocol for CRUD operations which can be easily integrated with REST API on the server.<\/p>\n

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

\"download<\/a><\/p>\n

Initializing the project<\/h4>\n

Running ahead of time, you may find a ready demo on GitHub<\/a>. To learn how it works, follow the tutorial.<\/p>\n

So, to begin with, we need to initialize our project. For this, let’s complete the following steps:<\/p>\n

Step 1. Creating a project<\/strong><\/p>\n

Instead of creating an application from scratch, we’ll import Slim boilerplate project Slim-Skeleton<\/a>.<\/p>\n

It can be easily installed with the help of composer using the following command:<\/p>\n

php composer.<\/span>phar create-<\/span>project slim\/<\/span>slim-<\/span>skeleton gantt-<\/span>rest-<\/span>php<\/div><\/div>\n

or<\/p>\n

composer create-<\/span>project slim\/<\/span>slim-<\/span>skeleton gantt-<\/span>rest-<\/span>php<\/div><\/div>\n

if you have composer installed globally.<\/p>\n

Then we should check if it works fine and run the PHP built-in webserver. Go to the app folder and run webserver:<\/p>\n

cd gantt-<\/span>rest-<\/span>php
\nphp -<\/span>S 0.<\/span>0.<\/span>0.<\/span>0:<\/span>8080<\/span> -<\/span>t public<\/span> public<\/span>\/<\/span>index.<\/span>php<\/div><\/div>\n

Now open http:\/\/127.0.0.1:8080<\/em> in a browser. You should see the default Slim page.<\/p>\n

\"slim<\/p>\n

Step 2. Download DHTMLX Gantt <\/strong><\/p>\n

Download the Gantt Chart<\/a> and unzip the archive’s content to the “public” folder. The resulting structure of folders should look as follows:<\/p>\n

\"2_orig\"<\/p>\n

Alternatively, you can install it from Bower by running the next command:<\/p>\n

bower install gantt<\/div><\/div>\n

Or from NPM with the help of the command below:<\/p>\n

npm install dhtmlx-gantt<\/div><\/div>\n

Step 3. Initializing Gantt and dataProcessor and setting connection between them<\/strong><\/p>\n

Open templates\/index.phtml and replace its content with the following one:<\/p>\n

<!DOCTYPE html><\/span>
\n<html<\/span>><\/span>
\n<head<\/span>><\/span>
\n    <meta<\/span> http-equiv<\/span>=<\/span>"Content-type"<\/span> content<\/span>=<\/span>"text\/html; charset=utf-8"<\/span>><\/span>
\n<\/<\/span>head<\/span>><\/span>
\n    <script<\/span> src<\/span>=<\/span>".\/codebase\/sources\/dhtmlxgantt.js"<\/span> type<\/span>=<\/span>"text\/javascript"<\/span> charset<\/span>=<\/span>"utf-8"<\/span>><\/<\/span>script<\/span>><\/span>
\n    <link<\/span> rel<\/span>=<\/span>"stylesheet"<\/span> href<\/span>=<\/span>".\/codebase\/dhtmlxgantt.css"<\/span> type<\/span>=<\/span>"text\/css"<\/span> charset<\/span>=<\/span>"utf-8"<\/span>><\/span>
\n    <style<\/span> type<\/span>=<\/span>"text\/css"<\/span>><\/span>
\n        html, body{ height:100%; padding:0px; margin:0px; overflow: hidden;}
\n    <\/<\/span>style<\/span>><\/span>
\n<body<\/span>><\/span>
\n    <div<\/span> id<\/span>=<\/span>"gantt_here"<\/span> style<\/span>=<\/span>'width:100%; height:100%;'<\/span>><\/<\/span>div<\/span>><\/span>
\n    <script<\/span> type<\/span>=<\/span>"text\/javascript"<\/span>><\/span>
\n        gantt.config.xml_date = "%Y-%m-%d %H:%i:%s";
\n        gantt.init("gantt_here");
\n        gantt.load("\/data");
\n
\n        var dp = new gantt.dataProcessor("\/data");
\n        dp.init(gantt);
\n        dp.setTransactionMode("REST");
\n    <\/<\/span>script<\/span>><\/span>
\n<\/<\/span>body<\/span>><\/span>
\n<\/<\/span>html<\/span>><\/span><\/div><\/div>\n

In the above code we have done the following:<\/p>\n