The DHTMLX component library offers a pure JavaScript/CSS solution for building web interfaces. The advantage of developing with the client-side library is that you can use it with your favorite server-side technology. In this tutorial, we will explain how to use the DHTMLX UI components with one of the most popular PHP frameworks, Yii framework.
The tutorial describes how to integrate dhtmlxGrid and dhtmlxScheduler in a Yii application. You’ll learn how to bind the grid and the scheduler to the database and update data on the server when user makes changes on the client side.
The integration with Yii will be done through the dhtmlxConnector layer, which handles client-server data communication. This tutorial gives step-by-step instructions but it is assumed that you have the basic knowledge of the Yii framework and the DHTMLX library.
Download the files of the final demo and keep reading to learn how to use DHTMLX with the Yii framework.
Getting Started
Before continuing, make sure that you have Yii installed on your computer. If you don’t, refer to the installation guide to learn how to do it.
Download the packages:
In the root folder of your app, create a sub-folder with the name ‘DHTMLX’. Add the required JS/CSS files of dhtmlxConnector, dhtmlxGrid, dhtmlxScheduler, and dataProcessor (included in both dhtmlxGrid and dhtmlxScheduler packages) to the ‘DHTMLX’ folder, or simply copy the folder with the required files from the final demo package (find the download link above).
Thus, you have two folders in the root folder of your demo app: one with Yii files, and the other one with DHTMLX files:
In our demo Yii app, we use the events database. You can create a local copy of this database by importing the SQL dump file events.sql (find it in the root folder of the final package) or you can just use any available database. Note that if you use your own database, you will need to adapt the code examples by yourself.
20 comments » 