gantt.init("gantt_here") command.
As a parameter, the method takes an HTML container where a Gantt chart will be placed.
~~~html title="myGantt.html"
gantt.parse(tasks) command after the gantt.init("gantt_here") line:
~~~js title="myGantt.html"
gantt.init("gantt_here");
gantt.parse (tasks);/*!*/
~~~
**Related sample**: [Basic initialization](https://docs.dhtmlx.com/gantt/samples/01_initialization/01_basic_init.html)
## Step 5. Creating a Database
:::note
Read this and further steps if you want to load data from a database instead of from an inline object.
:::
Then, we need to create a database with 2 tables to store tasks and dependencies.
sortorder is a property used only while loading data from a database. The property sets the index of a task among siblings.
Do the following:
Create a new database with the name - gantt.
Execute the following code to create 2 tables in it: gantt_tasks and gantt_links.
~~~sql
CREATE TABLE `gantt_links` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`source` int(11) NOT NULL,
`target` int(11) NOT NULL,
`type` varchar(1) NOT NULL,
PRIMARY KEY (`id`)
);
CREATE TABLE `gantt_tasks` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`text` varchar(255) NOT NULL,
`start_date` datetime NOT NULL,
`duration` int(11) NOT NULL DEFAULT 0,
`progress` float NOT NULL DEFAULT 0,
`sortorder` int(11) NOT NULL DEFAULT 0,
`parent` int(11) NOT NULL,
PRIMARY KEY (`id`)
);
~~~
To be able to save tasks in the database when some column has an empty value, add the following code to the **myGantt.html** file:
~~~js title="myGantt.html"
gantt.attachEvent("onBeforeTaskAdd", function(id,task){
task.sortorder = 0;
return true;
});
~~~
## Step 6. Loading Data from the Database
:::note
In the next 2 steps we will use the PHP platform to implement the server-client integration.
If you use another platform, please, read the article [](guides/loading.md) to know how to
implement the server script yourself.
:::
Then, we need to provide the ability to display data from the database in the chart. We'll do it with the [load](api/method/load.md) method, that takes the URL to the data source as a parameter.
In case of a database, it's a PHP file which realizes connection to the server side.
We will use the PHP platform and the dhtmlxConnector library,
as this is the easiest way to implement the server-side logic for dhtmlxGantt.
Do the following:
Create a PHP file in the 'dhtmlxGantt' folder and name it, for example, data.php.
Open the data.php file and add the following server-side code to it:
~~~php title="data.php"
render_links("gantt_links","id","source,target,type");
$gantt->render_table(
"gantt_tasks",
"id",
"start_date,duration,text,progress,sortorder,parent"
);
?>
~~~
Switch to the myGantt.html file and set the gantt.config.date_format property to "%Y-%m-%d %H:%i", to make the format of output data compatible with the format of dhtmlxGantt.
~~~js title="myGantt.html"
gantt.config.date_format = "%Y-%m-%d %H:%i";/*!*/
gantt.init("gantt_here");
~~~
Call the gantt.load('data.php') command to load data from the database to the Gantt chart.
~~~js title="myGantt.html"
gantt.config.date_format = "%Y-%m-%d %H:%i";
gantt.init("gantt_here");
gantt.load('data.php');//loads data to Gantt from the database /*!*/
~~~
### Mapping database columns
Please note that the order of columns in **$connector->render_table** is important. The first three columns in the columns list are mapped to *start_date/duration/text* or *start_date/end_date/text* properties of the
client-side task object respectively, no matter what column names you specify. The logic of mapping columns is described below.
The second column is mapped to *task.duration*, if you specify 'duration' in the configuration:
~~~js
$gantt->render_table("gantt_tasks","id","Start,duration,Name,progress,parent","");
~~~
or, using alias:
~~~js
$gantt->render_table("gantt_tasks","id","Start,Length(duration),Name,progress,parent","");
// JS: task.start_date, task.duration, task.text, task.progress, task.parent
~~~
If any other column name is set, the second column will be mapped to the *end_date* property:
~~~js
$gantt->render_table("gantt_tasks","id","Start,End,Name,progress,parent","");
// JS: task.start_date, task.end_date, task.text, task.progress, task.parent
~~~
#### Mapping other columns
All other columns will be mapped by their names without changes:
~~~js
$gantt->render_table("gantt_tasks","id","start_date,duration,text,custom,parent","");
// JS: task.start_date, task.duration, task.text, task.custom, task.parent
~~~
Aliases can be used for other columns as well:
~~~js
$gantt->render_table("gantt_tasks","id",
"start_date,duration,text,custom_column(customProperty),parent","");
// JS: task.start_date, task.duration, task.text, task.customProperty, task.parent
~~~
## Step 7. Updating Data in the Database
Then, we need to provide the ability to save the changes made in the Gantt chart to the database. For this purpose, we'll use the
[](api/method/dataprocessor.md) helper library. All we need to do is to initialize DataProcessor and
attach it to the dhtmlxGantt object.
Do the following:
Open the myGantt.html file and initialize dhtmlxDataProcessor with the dataProcessor("data.php") command.
Attach the dhtmlxDataProcessor object to the dhtmlxGantt object with the dp.init(gantt) command.
~~~js title="myGantt.html"
gantt.init("gantt_here");
gantt.load('data.php');
var dp="new" gantt.dataProcessor("data.php"); /*!*/
dp.init(gantt); /*!*/
~~~
## Logging errors
In case you've completed the above steps but something still is not working, enable logging in Gantt to detect an error.
First of all, make sure, that there are write permissions on the directory where the HTML file is located. Then add the following line into the **data.php** file:
~~~php title="data.php"
$gantt = new JSONGanttConnector($res);
$gantt->enable_log("log.txt"); /*!*/
~~~
After that, you can view logs in the **log.txt** file.
## What's Next?
That's all. A basic but functional Gantt chart that can load data from the database and save it back is ready.
Now you may configure and customize it to meet all your needs.
We recommend you to read these articles as your next step:
- [Configuration](guides/common-configuration.md)
- [Event handling](guides/handling-events.md)
- [Data loading](guides/loading.md)