PHP DHX - Gerador XML de Interface para DHTMLX - Parte I
Trabalhando diariamente com DHTMLX, eu criei o módulo DHX em Perl para alimentar os componentes do DHTMLX com XML, ainda não disponibilizei o módulo em Perl porque ainda falta documentar. Mas como sou programador PHP, surgiu a ideia de criar a versão do DHX em PHP, então criei a classe PHP DHX. Para fazer download da versão DHX em PHP acesse os links: http://www.phpclasses.org/dhx e https://github.com/lucas1/PHP-DHX.
A cada artigo que postar, irei falar de um dos componentes do DHTMLX. Nessa primeiro artigo sobre o PHP DHX, vou mostrar como configurar e alimentar o componente dhtmlxScheduler. Para fazer download do dhtmlxScheduler acesse o link: http://www.dhtmlx.com/x/download/regular/dhtmlxScheduler.zip
css
|____style.css
dhtmlx
|____dhtmlxScheduler
|____codebase
|_____dhtmlxscheduler.css
|_____dhtmlxscheduler.js
dhx
|____DHX.php
|____Scheduler.php
js
|____scheduler.js
banco.sql
conexao.php
load.php
save.php
scheduler.html
Essa Hierarquia de diretório será usado nos próximos artigos.
Será usado para posicionar o componente dhtmlxLayout na tela inteira, é opcional nesse artigo, mas será obrigatório nos próximos artigos
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}Contem as configurações do Scheduler
var Scheduler = new function(){
this.Start = function(){
var d = new Date();
var dia = d.getDate();
var mes = d.getMonth();
var ano = d.getFullYear();
scheduler.config.multi_day = true;
scheduler.config.xml_date="%Y-%m-%d %H:%i:%s";
scheduler.init('scheduler',new Date(ano,mes,dia),"week");
scheduler.load('load.php');
var dp = new dataProcessor("save.php");
dp.init(scheduler);
}
};scheduler.config.xml_date formato da data e hora que é retornado no XML do arquivo load.php
scheduler.init primeiro parâmetro div scheduler, segundo parâmetro data atual, terceiro parâmetro define o padrão de abertura da scheduler "dia", "semana", "mês", nesse artigo estou usando week de "semana", se você quiser que "dia" seja padrão coloque day e se quiser que "mês" seja padrão coloque month.
scheduler.load carrega o arquivo load.php que retorna o XML com os eventos salvos no banco de dados
dp.init envia qualquer modificação para o arquivo save.php em formato POST
Tabela MySQL onde serão salvos os eventos
CREATE TABLE scheduler (
sch_id INT NOT NULL AUTO_INCREMENT,
sch_texto TEXT NOT NULL,
sch_inicial TIMESTAMP NOT NULL,
sch_final TIMESTAMP NOT NULL,
PRIMARY KEY(sch_id)
);Configurações básicas para conexão no banco de dados MySQL
<?php
// dados de conexao
$host = 'localhost';
$usuario = 'nome_do_usuario';
$senha = 'senha_do_usuario';
$banco = 'nome_do_banco';
mysql_connect($host, $usuario, $senha);
mysql_select_db($banco);Seleciona os eventos salvos no banco de dados e gera o XML para alimentar o dhtmlxScheduler
<?php
// include
include_once 'dhx/DHX.php';
include_once 'conexao.php';
// selecionar dados
$sel = mysql_query("SELECT * FROM scheduler");
// Scheduler do DHX
$scheduler = new Scheduler;
while($row = mysql_fetch_object($sel)){
$scheduler->event(
array(
"id" => $row->sch_id,
"text" => $row->sch_texto,
"start_date" => $row->sch_inicial,
"end_date" => $row->sch_final
)
);
}
$scheduler->header();
echo $scheduler->result();Insere, Altera e Deleta os eventos do banco de dados e retorna o XML de callback
<?php
// include
include_once 'dhx/DHX.php';
include_once 'conexao.php';
// post
$ids = $_POST['ids'];
$id = $_POST[$ids . '_id'];
$texto = $_POST[$ids . '_text'];
$inicial = $_POST[$ids . '_start_date'];
$final = $_POST[$ids . '_end_date'];
$status = $_POST[$ids . '_!nativeeditor_status'];
// variaveis
$sid = $id;
$tid = $id;
// adicionar
if($status == 'inserted'){
mysql_query("INSERT INTO scheduler (sch_texto, sch_inicial, sch_final)
VALUES ('$texto', '$inicial', '$final')");
$tid = mysql_insert_id();
}
// alterar
if($status == 'updated'){
mysql_query("UPDATE scheduler SET
sch_texto = '$texto',
sch_inicial = '$inicial',
sch_final = '$final'
WHERE sch_id = '$id'");
}
// deletar
if($status == 'deleted'){
mysql_query("DELETE FROM scheduler WHERE sch_id = '$id'");
}
// DataProcessor DHX
$dataprocessor = new DataProcessor;
$dataprocessor->action(
array(
"type" => $status,
"sid" => $sid,
"tid" => $tid
)
);
$dataprocessor->header();
echo $dataprocessor->result();Arquivo html que inclui os arquivos css, javascript e algumas divs padrões do dhtmlxScheduler
<!DOCTYPE html>
<html>
<head>
<title>Scheduler</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="dhtmlx/dhtmlxScheduler/codebase/dhtmlxscheduler.css" />
<script type="text/javascript" src="dhtmlx/dhtmlxScheduler/codebase/dhtmlxscheduler.js"></script>
<script type="text/javascript" src="js/scheduler.js"></script>
<script type="text/javascript">
window.onload = function(){
Scheduler.Start();
};
</script>
</head>
<body>
<div id="scheduler" class="dhx_cal_container" style="width:100%; height:100%;">
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>
</div>
</body>
</html>
Nesse artigo mostrei como rodar o componente dhtmlxScheduler usando a classe PHP DHX.
Demais configuração sobre DHTMLX leia a documentação no link http://docs.dhtmlx.com/doku.php
Demais configuração sobre PHP DHX leia a documentação no link https://github.com/lucas1/PHP-DHX
Para fazer download dos arquivos desse artigo acesse o link http://www.lucas1.com.br/parte_1.zip
Espero ter ajudado :)
Lucas Tiago de Moraes