Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

PHP DHX - Gerador XML de Interface para DHTMLX - Parte I

Descrição

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

Hierarquia do diretório

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.

Código e explicação de cada arquivo

style.css

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;
}

scheduler.js

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

banco.sql

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)
);

conexao.php

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);

load.php

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();

save.php

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();

scheduler.html

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">&nbsp;</div>
            <div class="dhx_cal_next_button">&nbsp;</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>

Resultado

Conclusão

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 :)

Autor

Lucas Tiago de Moraes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.