{"id":3187,"date":"2016-01-21T11:00:42","date_gmt":"2016-01-21T07:00:42","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=3187"},"modified":"2023-05-05T13:27:26","modified_gmt":"2023-05-05T10:27:26","slug":"using-dhtmlxgantt-with-laravel","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/using-dhtmlxgantt-with-laravel\/","title":{"rendered":"Using dhtmlxGantt with Laravel Framework [Tutorial]"},"content":{"rendered":"

Our developers always try to provide you with the possibility to use our components in different ways. In this article, we’ll talk about dhtmlxGantt<\/a>. We’ll learn how to use this component with the Laravel<\/a> framework. Laravel is a free, open-source PHP web application framework. Laravel was created for the development of web applications following the model\u2013view\u2013controller (MVC) architectural pattern.<\/p>\n

Download dhtmlxGantt and start using it with Laravel<\/a><\/strong><\/p>\n

\"laravel+gantt-img\"<\/p>\n

It will be a step-by-step guide intended both for developers who have already been familiar with Laravel and those of you who only starts working with it.
\n<\/p>\n

Installing Laravel<\/b><\/h2>\n

\nWe’ll use Composer<\/a> to install Laravel. It’s a dependency manager for PHP that allows you add required packages to your projects in a fast and easy way. Usually, you can find it in your Linux repository. In another case, you can download installation files from its home page.<\/p>\n

To learn how you can install Laravel, you can follow this installation guide<\/a>. Here’s one of the available opportunities. First of all, we need to create a folder for our project and download the Laravel packages. Run in your terminal:<\/p>\n

composer create-project  laravel\/laravel --prefer-dist dhtmlxGantt<\/div><\/div>\n

This code will create the dhtmlxGantt<\/em> folder and load the Laravel files along with its dependencies into it.<\/p>\n

Now we need to add dhtmlxConnector<\/a> to our project. It’s a helper server-side library that enables access to external data sources and backend systems. To do so, enter the working directory and add the required package using Composer:<\/p>\n

cd dhtmlxGantt
\ncomposer require dhtmlx\/connector-php<\/div><\/div>\n

One more thing before getting started. Download the dhtmlxGantt package<\/a> and unpack its content within the public\/dhtmlxGantt<\/em> directory.<\/p>\n

That’s it. Preparations are finished, and we can continue creating the Gantt chart.<\/p>\n

Create a Data Source<\/b><\/h2>\n

\nAs an example, let’s use a previously created database. Here’s the direct link<\/a> to a zip archive that contains the project that you can use as an example of how different DHTMLX components can work with Laravel. Inside you can find an SQL dump file named dhtmlx_samples.sql<\/em>. Let’s use it to create a local database copy. In case of MySQL you should run the client:<\/p>\n

mysql -<\/span>u root -<\/span>p<\/div><\/div>\n

Now you can create a new database and import the data from the dump file:<\/p>\n

CREATE DATABASE gantt;
\nUSE gantt;
\n \\. \/path\/to\/file\/dhtmlx_samples.sql<\/div><\/div>\n

Done. The database is created. Our next step is to create a the Gantt chart itself.<\/p>\n

Create the Gantt Chart<\/b><\/h2>\n

\nAs it was said before, Laravel follows the MVC architectural pattern. Since MVC means Model-View-Controller, the process of creation will consist of three main stages.<\/p>\n

Create a Model<\/b><\/h3>\n

<\/p>\n

To access the data we need to specify the appropriate model class. You should create two files within the app directory of your project.<\/p>\n

The first one is GanttTask.php<\/em>:<\/p>\n

<?php<\/span>
\nnamespace<\/span> App;<\/span>
\nuse<\/span> Illuminate\\Database\\Eloquent\\Model;<\/span>
\n
\nclass<\/span> GanttTask extends<\/span> Model
\n{<\/span>
\n    protected<\/span> $table<\/span> =<\/span> "gantt_tasks"<\/span>;<\/span>
\n    public<\/span> $primaryKey<\/span> =<\/span> "id"<\/span>;<\/span>
\n    public<\/span> $timestamps<\/span> =<\/span> false<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

And here’s the second one, GanttLink.php<\/em>:<\/p>\n

<?php<\/span>
\nnamespace<\/span> App;<\/span>
\nuse<\/span> Illuminate\\Database\\Eloquent\\Model;<\/span>
\n
\nclass<\/span> GanttLink extends<\/span> Model
\n{<\/span>
\n    protected<\/span> $table<\/span> =<\/span> "gantt_links"<\/span>;<\/span>
\n    public<\/span> $primaryKey<\/span> =<\/span> "id"<\/span>;<\/span>
\n    public<\/span> $timestamps<\/span> =<\/span> false<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

Create the View Object<\/b><\/h3>\n

<\/p>\n

Create a new file with name gantt.php<\/em> within the resources\/views<\/em> directory of your project. Then and add the following code:<\/p>\n

<!DOCTYPE html><\/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    <script<\/span> src<\/span>=<\/span>"dhtmlxGantt\/codebase\/dhtmlxgantt.js"<\/span>><\/<\/span>script<\/span>><\/span>
\n    <link<\/span> rel<\/span>=<\/span>"stylesheet"<\/span> href<\/span>=<\/span>"dhtmlxGantt\/codebase\/dhtmlxgantt.css"<\/span>><\/span>
\n<\/<\/span>head<\/span>><\/span>
\n
\n<body<\/span>><\/span>
\n    <div<\/span> id<\/span>=<\/span>"gantt_here"<\/span> style<\/span>=<\/span>'width:100%; height:250px;'<\/span>><\/<\/span>div<\/span>><\/span>
\n    <script<\/span> type<\/span>=<\/span>"text\/javascript"<\/span>><\/span>
\n        \/* chart configuration and initialization *\/
\n        gantt.config.xml_date = "%Y-%m-%d %H:%i:%s";
\n        gantt.config.step = 1;
\n        gantt.config.scale_unit= "day";
\n        gantt.init("gantt_here", new Date(2010,7,1), new Date(2010,8,1));
\n        \/* refers to the 'data' action that we will create in the next substep *\/
\n        gantt.load(".\/gantt_data", "xml");
\n        \/* refers to the 'data' action as well *\/
\n        var dp = new gantt.dataProcessor(".\/gantt_data");
\n        dp.init(gantt);
\n    <\/<\/span>script<\/span>><\/span>
\n<\/<\/span>body<\/span>><\/span><\/div><\/div>\n

Create the Controller<\/b><\/h3>\n

<\/p>\n

Now, let’s configure the Controller object. Before we go any further, let’s take a look at how GanttConnector works. Here’s an example:<\/p>\n

$connector<\/span> =<\/span> new<\/span> GanttConnector(<\/span>null<\/span>,<\/span> "PHPLaravel"<\/span>)<\/span>;<\/span>
\n$connector<\/span>-><\/span>render_links<\/span>(<\/span>new<\/span> $modelName<\/span>,<\/span> $id<\/span>,<\/span> $links<\/span>)<\/span>;<\/span>
\n$connector<\/span>-><\/span>render_table<\/span>(<\/span>new<\/span> $modelName<\/span>,<\/span> $id<\/span>,<\/span> $tasks<\/span>)<\/span>;<\/span><\/div><\/div>\n

The GanttConnector<\/strong> constructor takes 2 parameters: null<\/strong> means that we want to use a model, not a database; PHPLaravel<\/strong> – the module for working with PHP.<\/p>\n

The render_links<\/strong> method configures connector, retrieves data from a table with links and takes three parameters: the method creating a model for links, the name of the link id, and a comma-separated list of rendered links.<\/p>\n

The render_table<\/strong> method configures connector and retrieves data from a table with tasks. It takes three parameters as well: the method creating a model for tasks, the name of the task id, and a comma separated list of rendered tasks.<\/p>\n

To configure the Controller object you should create a new file named GanttController.php<\/em> within the app\/Http\/Controllers<\/em> folder:<\/p>\n

<?php<\/span>
\nnamespace<\/span> App\\Http\\Controllers;<\/span>
\nuse<\/span> App\\GanttTask;<\/span>
\nuse<\/span> App\\GanttLink;<\/span>
\nuse<\/span> Dhtmlx\\Connector\\GanttConnector;<\/span>
\n
\nclass<\/span> GanttController extends<\/span> Controller
\n{<\/span>
\n    public<\/span> function<\/span> data(<\/span>)<\/span> {<\/span>
\n        $connector<\/span> =<\/span> new<\/span> GanttConnector(<\/span>null<\/span>,<\/span> "PHPLaravel"<\/span>)<\/span>;<\/span>
\n        $connector<\/span>-><\/span>render_links<\/span>(<\/span>new<\/span> GanttLink(<\/span>)<\/span>,<\/span> "id"<\/span>,<\/span> "source,target,type"<\/span>)<\/span>;<\/span>
\n        $connector<\/span>-><\/span>render_table<\/span>(<\/span>new<\/span> GanttTask(<\/span>)<\/span>,<\/span>"id"<\/span>,<\/span>"start_date,duration,text,progress,parent"<\/span>)<\/span>;<\/span>
\n        }<\/span>
\n}<\/span><\/div><\/div>\n

Final Steps: Environment, Routes, and CSRF Protection<\/b><\/h2>\n

There are three final steps left before you can test your application. Let’s start from the environment configuration. The .env<\/em> file that resides in the root folder of your project will be used for that purpose. All that we need is to configure the database. Here are the four lines that we are interested in:<\/p>\n

DB_HOST=localhost
\nDB_DATABASE=gantt
\nDB_USERNAME=root
\nDB_PASSWORD=yourpassword<\/div><\/div>\n

You should define the hostname, name of the database that we’ve created earlier, username, and a password to allow Laravel use the data from a database.<\/p>\n

The next step is to define the routes. Open the app\/Http\/routes.php<\/em> file. Here’s the default routes configuration that you’ll find there:<\/p>\n

Route::<\/span>get<\/span>(<\/span>'\/'<\/span>,<\/span> function<\/span> (<\/span>)<\/span> {<\/span>
\n    return<\/span> view(<\/span>'welcome'<\/span>)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Here’s what it means, in a nutshell. When you open the root folder of your website in a browser, the GET request will be performed. As a result, the welcome<\/em> page from the resources\/views<\/em> folder will be returned. In fact, the name of this file is welcome.blade.php<\/em> but Laravel disregards file extensions. What we need to do is to tell Laravel that the previously created view, gantt.php<\/em>, should be returned. The other step is to use GanttController.php<\/em> to save and load data. All you need to do is to replace the existing route with the following:<\/p>\n

Route::<\/span>get<\/span>(<\/span>'\/'<\/span>,<\/span> function<\/span> (<\/span>)<\/span> {<\/span>
\n    return<\/span> view(<\/span>'gantt'<\/span>)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span>
\n
\nRoute::<\/span>match<\/span>(<\/span>[<\/span>'get'<\/span>,<\/span> 'post'<\/span>]<\/span>,<\/span> '\/gantt_data'<\/span>,<\/span> "GanttController@data"<\/span>)<\/span>;<\/span><\/div><\/div>\n

One more step before we can run the project. Laravel protects your application from cross-site request forgeries by generating a CSRF \u201ctoken\u201d for each active user session managed by the application. You can read more about the mechanisms of protection on this page if you want, but what we need to do now is to exclude one particular URI from CSRF protection. The one that triggered when created data is supposed to be saved. We need to add a proper value to the $except property in this file app\/Http\/Middleware\/VerifyCsrfToken.php<\/em>:<\/p>\n

protected<\/span> $except<\/span> =<\/span> [<\/span>
\n    'gantt_data'<\/span>
\n]<\/span>;<\/span><\/div><\/div>\n

That’s it! Now we can test the application.<\/p>\n

Running the Application<\/b><\/h2>\n

\nOpen the root directory of your project and run:<\/p>\n

php artisan serve<\/div><\/div>\n

Here’s the typical output:<\/p>\n

Laravel development server started on http:\/\/localhost:8000\/<\/div><\/div>\n

Open http:\/\/localhost:8000\/ in your browser and you’ll see the working Gantt chart:<\/p>\n

\"Gantt<\/p>\n

Here are the tasks from the database dump file that we’ve imported earlier. You can edit them or create your own, using the \u201c+\u201d button.<\/p>\n

That’s all. We hope you have enjoyed the tutorial. The final application logic was not the goal of this article, but the interface built here is a good start for creating a fully-functional web application. <\/p>\n","protected":false},"excerpt":{"rendered":"

Our developers always try to provide you with the possibility to use our components in different ways. In this article, we’ll talk about dhtmlxGantt. We’ll learn how to use …<\/p>\n","protected":false},"author":2,"featured_media":3802,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1,38],"tags":[33,20,14,60,46],"class_list":["post-3187","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","category-visible","tag-all-posts","tag-gantt","tag-tips","tag-integrations-gantt","tag-laravel"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=3187"}],"version-history":[{"count":2,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3187\/revisions"}],"predecessor-version":[{"id":8860,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3187\/revisions\/8860"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3802"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=3187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=3187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=3187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}