{"id":2393,"date":"2014-08-06T12:00:13","date_gmt":"2014-08-06T08:00:13","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2393"},"modified":"2023-05-05T13:59:16","modified_gmt":"2023-05-05T10:59:16","slug":"dhtmlxgantt-with-nodejs","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlxgantt-with-nodejs\/","title":{"rendered":"Using dhtmlxGantt together with Node.js"},"content":{"rendered":"

If you follow our tutorials, you have already known how to use dhtmlxScheduler<\/a> and dhtmlxGrid<\/a> with Node.js, a flexible JavaScript platform.<\/p>\n

This time we will deal with dhtmlxGantt with Node.js.<\/p>\n

<\/br>
\n\"dhtmlxGantt
\n<\/br><\/p>\n

You can download the full archive with the final solution from github<\/a>. <\/p>\n

Step 1 – Creating a simple Node.js site<\/strong><\/p>\n

Fortunately, Node.js has a set of ready to use solutions. And we don\u2019t have to write everything from scratch, we will use the ready modules. Express<\/a> as a web-framework and node-mysql<\/a> – to work with MySQL. Also, as we are working with dates we need a lib to convert dates to string and back. For this purpose we will need date-format-lite<\/a> <\/p>\n

First of all, let\u2019s create a directory – \u201cgantt-node\u201d, for example, – and install the necessary libraries into it by running the next command: <\/p>\n

mkdir gantt-node
\ncd gantt-node
\nnpm install express
\nnpm install mongoskin
\nnpm install date-format-lite<\/div><\/div>\n

Then we proceed with preparing database – we need to create tables as described here –https:\/\/docs.dhtmlx.com\/gantt\/desktop__howtostart_nodejs.html#step3preparingadatabase<\/a><\/p>\n

<\/p>\n

The next step is a creation of the base of our app – \u201capp.js\u201d file in the \u201cscheduler-node\u201d directory – with the following content:<\/p>\n

var<\/span> express =<\/span> require(<\/span>'express'<\/span>)<\/span>;<\/span>
\nvar<\/span> path =<\/span> require(<\/span>'path'<\/span>)<\/span>;<\/span>
\n
\n\/\/connect to the MySQL<\/span>
\nvar<\/span> mysql      =<\/span> require(<\/span>'mysql'<\/span>)<\/span>;<\/span>
\nvar<\/span> db =<\/span> mysql.createConnection<\/span>(<\/span>{<\/span>
\n  host     :<\/span> 'localhost'<\/span>,<\/span>
\n  user     :<\/span> 'sampleDB'<\/span>,<\/span>
\n  password :<\/span> 'sampleDB'<\/span>,<\/span>
\n  database :<\/span> 'sampleDB'<\/span>
\n}<\/span>)<\/span>;<\/span>
\n
\n\/\/enable date conversion helpers<\/span>
\nrequire(<\/span>"date-format-lite"<\/span>)<\/span>
\n
\n\/\/create express app, use public folder for static files<\/span>
\nvar<\/span> app =<\/span> express(<\/span>)<\/span>;<\/span>
\napp.use<\/span>(<\/span>express.static<\/span>(<\/span>path.join<\/span>(<\/span>__dirname,<\/span> 'public'<\/span>)<\/span>)<\/span>)<\/span>;<\/span>
\n
\n\/\/is necessary for parsing POST request<\/span>
\napp.use<\/span>(<\/span>express.bodyParser<\/span>(<\/span>)<\/span>)<\/span>;<\/span>
\n
\napp.listen<\/span>(<\/span>3000<\/span>)<\/span>;<\/span><\/div><\/div>\n

Don\u2019t forget to change the DB parameters to those you need.<\/p>\n

Due to Express, the whole app fit into a couple of lines. It doesn\u2019t execute anything extraordinary and just serves static files from the \u201cpublic\u201d directory.<\/p>\n

Create \u201cpublic\u201d directory and unpack the folder \u201ccodebase\u201d from the Gantt\u2019s package into it. The whole files\u2019 structure should look as follows:<\/p>\n

<\/br>
\n\"unpack_gantt\"
\n<\/br><\/p>\n

In the \u201cpublic\u201d directory let\u2019s create \u201cindex.html\u201d file – the main page where we\u2019ll place a calendar.<\/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<\/<\/span>head<\/span>><\/span>
\n    <script<\/span> src<\/span>=<\/span>".\/codebase\/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 dataProcessor("\/data");
\n        dp.init(gantt);
\n        dp.setTransactionMode("POST", false);
\n    <\/<\/span>script<\/span>><\/span>
\n<\/<\/span>body<\/span>><\/span><\/div><\/div>\n

So, there is no need in more HTML code for the Gantt. There are two includes for js and css files of Gantt. After it code to init gantt comes. Code contains instructions for data loading and data saving, for which we still don’t have a server side code, we will add it later.<\/p>\n

To see whether the app works right, we may start the node.js server and open https:\/\/localhost:3000 address in a browser. If everything is done correctly, we will see an empty gantt. To start nodejs server, run “nodejs app.js” command.<\/p>\n

<\/br>
\n\"dhtmlxgantt-empty\"
\n<\/br>
\nStep 2 – Loading events<\/strong><\/p>\n

We\u2019ll start with loading some random data in the database:<\/p>\n

INSERT INTO `gantt_tasks` VALUES (<\/span>'1'<\/span>,<\/span> 'Project #1'<\/span>,<\/span> '2013-04-01 00:00:00'<\/span>,<\/span> '5'<\/span>,<\/span> '0.8'<\/span>,<\/span> '20'<\/span>,<\/span> '0'<\/span>)<\/span>;<\/span>
\nINSERT INTO `gantt_tasks` VALUES (<\/span>'2'<\/span>,<\/span> 'Task #1'<\/span>,<\/span> '2013-04-06 00:00:00'<\/span>,<\/span> '4'<\/span>,<\/span> '0.5'<\/span>,<\/span> '10'<\/span>,<\/span> '1'<\/span>)<\/span>;<\/span>
\nINSERT INTO `gantt_tasks` VALUES (<\/span>'3'<\/span>,<\/span> 'Task #2'<\/span>,<\/span> '2013-04-05 00:00:00'<\/span>,<\/span> '6'<\/span>,<\/span> '0.7'<\/span>,<\/span> '20'<\/span>,<\/span> '1'<\/span>)<\/span>;<\/span>
\nINSERT INTO `gantt_tasks` VALUES (<\/span>'4'<\/span>,<\/span> 'Task #3'<\/span>,<\/span> '2013-04-07 00:00:00'<\/span>,<\/span> '2'<\/span>,<\/span> '0'<\/span>,<\/span> '30'<\/span>,<\/span> '1'<\/span>)<\/span>;<\/span>
\nINSERT INTO `gantt_tasks` VALUES (<\/span>'5'<\/span>,<\/span> 'Task #1.1'<\/span>,<\/span> '2013-04-05 00:00:00'<\/span>,<\/span> '5'<\/span>,<\/span> '0.34'<\/span>,<\/span> '10'<\/span>,<\/span> '2'<\/span>)<\/span>;<\/span>
\nINSERT INTO `gantt_tasks` VALUES (<\/span>'6'<\/span>,<\/span> 'Task #1.2'<\/span>,<\/span> '2013-04-11 13:22:17'<\/span>,<\/span> '4'<\/span>,<\/span> '0.491477'<\/span>,<\/span> '20'<\/span>,<\/span> '2'<\/span>)<\/span>;<\/span>
\nINSERT INTO `gantt_tasks` VALUES (<\/span>'7'<\/span>,<\/span> 'Task #2.1'<\/span>,<\/span> '2013-04-07 00:00:00'<\/span>,<\/span> '5'<\/span>,<\/span> '0.2'<\/span>,<\/span> '10'<\/span>,<\/span> '3'<\/span>)<\/span>;<\/span>
\nINSERT INTO `gantt_tasks` VALUES (<\/span>'8'<\/span>,<\/span> 'Task #2.2'<\/span>,<\/span> '2013-04-06 00:00:00'<\/span>,<\/span> '4'<\/span>,<\/span> '0.9'<\/span>,<\/span> '20'<\/span>,<\/span> '3'<\/span>)<\/span>;<\/span><\/div><\/div>\n

after that we can add a handler for data loading in app.js<\/p>\n

app.get<\/span>(<\/span>'\/data'<\/span>,<\/span> function<\/span>(<\/span>req,<\/span> res)<\/span>{<\/span>
\n    db.query<\/span>(<\/span>"SELECT * FROM gantt_tasks"<\/span>,<\/span> function<\/span>(<\/span>err,<\/span> rows)<\/span>{<\/span>
\n        if<\/span> (<\/span>err)<\/span> console.log<\/span>(<\/span>err)<\/span>;<\/span>
\n        db.query<\/span>(<\/span>"SELECT * FROM gantt_links"<\/span>,<\/span> function<\/span>(<\/span>err,<\/span> links)<\/span>{<\/span>
\n            if<\/span> (<\/span>err)<\/span> console.log<\/span>(<\/span>err)<\/span>;<\/span>
\n
\n            for<\/span> (<\/span>var<\/span> i =<\/span> 0<\/span>;<\/span> i <<\/span> rows.length<\/span>;<\/span> i++<\/span>)<\/span>{<\/span>
\n                rows[<\/span>i]<\/span>.start_date<\/span> =<\/span> rows[<\/span>i]<\/span>.start_date<\/span>.format<\/span>(<\/span>"YYYY-MM-DD"<\/span>)<\/span>;<\/span>
\n                rows[<\/span>i]<\/span>.open<\/span> =<\/span> true<\/span>;<\/span>
\n            }<\/span>
\n
\n
\n            res.send<\/span>(<\/span>{<\/span> data:<\/span>rows,<\/span> collections:<\/span> {<\/span> links :<\/span> links }<\/span> }<\/span>)<\/span>;<\/span>
\n        }<\/span>)<\/span>;<\/span>
\n    }<\/span>)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

\u201c\/data” handler will be used to load data into the gantt. Here we select all records from tasks and links table, and send them to the client-side as json structure.<\/p>\n

NOTE: before sending the records we convert start_date parameter to the string in Year-month-day format. Also, we have set “open” property for each item. It will force gantt to have all branches opened after data loading. <\/p>\n

After restarting the server and opening in browser http:\/\/localhost:3000 – there will be our gantt with tasks inside. <\/p>\n

<\/br>
\n\"dhtmlxGantt-with-data\"
\n<\/br>
\nStep 3 – Adding \/ deleting \/ editing <\/strong><\/p>\n

Let\u2019s go to the server code and add one more handler to app.js:<\/p>\n

app.post<\/span>(<\/span>'\/data'<\/span>,<\/span> function<\/span>(<\/span>req,<\/span> res)<\/span>{<\/span>
\n    var<\/span> data =<\/span> req.body<\/span>;<\/span>
\n    var<\/span> mode =<\/span> data[<\/span>"!nativeeditor_status"<\/span>]<\/span>;<\/span>
\n    var<\/span> sid =<\/span> data.id<\/span>;<\/span>
\n    var<\/span> tid =<\/span> sid;<\/span>
\n
\n
\n    function<\/span> update_response(<\/span>err,<\/span> result)<\/span>{<\/span>
\n        if<\/span> (<\/span>err)<\/span>{<\/span>
\n            console.log<\/span>(<\/span>err)<\/span>;<\/span>
\n            mode =<\/span> "error"<\/span>;<\/span>
\n        }<\/span>
\n
\n        else<\/span> if<\/span> (<\/span>mode ==<\/span> "inserted"<\/span>)<\/span>
\n            tid =<\/span> result.insertId<\/span>;<\/span>
\n
\n        res.setHeader<\/span>(<\/span>"Content-Type"<\/span>,<\/span>"text\/xml"<\/span>)<\/span>;<\/span>
\n        res.send<\/span>(<\/span>"<data><action type='"<\/span>+<\/span>mode+<\/span>"' sid='"<\/span>+<\/span>sid+<\/span>"' tid='"<\/span>+<\/span>tid+<\/span>"'\/><\/data>"<\/span>)<\/span>;<\/span>
\n    }<\/span>
\n
\n    if<\/span> (<\/span>req.query<\/span>.gantt_mode<\/span> ==<\/span> "links"<\/span>)<\/span>{<\/span>
\n        \/\/save links<\/span>
\n        if<\/span> (<\/span>mode ==<\/span> "deleted"<\/span>)<\/span>
\n            db.query<\/span>(<\/span>"DELETE FROM gantt_links WHERE id = ?"<\/span>,<\/span> [<\/span>sid]<\/span>,<\/span> update_response)<\/span>;<\/span>
\n        else<\/span> {<\/span>
\n            var<\/span> source  =<\/span> data.source<\/span>;<\/span>
\n            var<\/span> target  =<\/span> data.target<\/span>;<\/span>
\n            var<\/span> type    =<\/span> data.type<\/span>;<\/span>
\n
\n            if<\/span> (<\/span>mode ==<\/span> "inserted"<\/span>)<\/span>
\n                db.query<\/span>(<\/span>"INSERT INTO gantt_links(source, target, type) VALUES (?,?,?)"<\/span>,<\/span>
\n                    [<\/span>source,<\/span> target,<\/span> type]<\/span>,<\/span>
\n                    update_response)<\/span>;<\/span>
\n            else<\/span>
\n                res.send<\/span>(<\/span>"Not supported operation"<\/span>)<\/span>;<\/span>
\n        }<\/span>
\n
\n
\n    }<\/span> else<\/span> {<\/span>
\n        \/\/save data<\/span>
\n        if<\/span> (<\/span>mode ==<\/span> "deleted"<\/span>)<\/span>
\n            db.query<\/span>(<\/span>"DELETE FROM gantt_tasks WHERE id = ?"<\/span>,<\/span> [<\/span>sid]<\/span>,<\/span> update_response)<\/span>;<\/span>
\n        else<\/span> {<\/span>
\n            var<\/span> text        =<\/span> data.text<\/span>;<\/span>
\n            var<\/span> start_date  =<\/span> data.start_date<\/span>.date<\/span>(<\/span>"YYYY-MM-DD"<\/span>)<\/span>;<\/span>
\n            var<\/span> duration    =<\/span> data.duration<\/span>;<\/span>
\n            var<\/span> progress    =<\/span> data.progress<\/span>;<\/span>
\n            var<\/span> parent      =<\/span> data.parent<\/span>;<\/span>
\n
\n            if<\/span> (<\/span>mode ==<\/span> "updated"<\/span>)<\/span>
\n                db.query<\/span>(<\/span>"UPDATE gantt_tasks SET text = ?, start_date = ?, duration = ?, progress = ?, parent = ? WHERE id = ?"<\/span>,<\/span>
\n                    [<\/span>text,<\/span> start_date,<\/span> duration,<\/span> progress,<\/span> parent,<\/span> sid]<\/span>,<\/span>
\n                    update_response)<\/span>;<\/span>
\n            else<\/span> if<\/span> (<\/span>mode ==<\/span> "inserted"<\/span>)<\/span>
\n                db.query<\/span>(<\/span>"INSERT INTO gantt_tasks(text, start_date, duration, progress, parent) VALUES (?,?,?,?,?)"<\/span>,<\/span>
\n                    [<\/span>text,<\/span> start_date,<\/span> duration,<\/span> progress,<\/span> parent]<\/span>,<\/span>
\n                    update_response)<\/span>;<\/span>
\n            else<\/span>
\n                res.send<\/span>(<\/span>"Not supported operation"<\/span>)<\/span>;<\/span>
\n        }<\/span>
\n    }<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Here we use “app.post”, as all saving operations use POST queries. The first part of the code shows the type of operation and removes all the technical parameters from an incoming query to get an object that can be saved in the database.<\/p>\n

Then, according to the operation type, we carry out the necessary sql query. We have two major blocks – data operations for tasks and data operations for links. In each block we have separate sql code for each type of operation (adding\/saving\/deleting). As the operations with database are asynchronous, we pass the specified earlier callback function “update_response” as the last parameter. The client side expects to get the confirmation of saving operation or an error message – this is what the \u201cupdate_response\u201d function is responsible for. It generates an XML response in the necessary format and sends it to the client side. (Details of the format you may learn from the documentation ). If we add a new record, this function also includes ID, generated by MySQL for the new record, into the response to update the element’s id on the client’s side, too.<\/p>\n

If we restart the server and open http:\/\/localhost:3000 in browser again, we’ll get a gantt with tasks. Clicking on “Add ” button will add new task to the gantt. Double-clicking or dragging the task will allow modifying the task properties or deleting the task. The cool feature is the availability of all the changes even after reloading the page as they\u2019re automatically saved in database.<\/p>\n

What is the result?<\/strong><\/p>\n

The server solution is quite simple and can be easily customized. It won’t be difficult to add validation or some kind of data formatting before loading. As Node.js allows using JavaScript on server side, we use the same concepts on both client side and server side, which definitely makes result code more compact and stable. But it also stands to mention that dhtmlxGantt is flexible enough, and integration with any other server side platform will not require much of coding.<\/p>\n","protected":false},"excerpt":{"rendered":"

If you follow our tutorials, you have already known how to use dhtmlxScheduler and dhtmlxGrid with Node.js, a flexible JavaScript platform. This time we will deal with dhtmlxGantt with …<\/p>\n","protected":false},"author":2,"featured_media":3800,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,1],"tags":[33,20,14,39],"class_list":["post-2393","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-uncategorized","tag-all-posts","tag-gantt","tag-tips","tag-nodejs"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2393","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=2393"}],"version-history":[{"count":1,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2393\/revisions"}],"predecessor-version":[{"id":8775,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2393\/revisions\/8775"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3800"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=2393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=2393"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=2393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}