Scriptcaser

Form de Configuração Poderoso no Scriptcase

Muitos assim como eu já precisaram fazer uma página de configuração no scriptcase para armazenar dados que são comuns a várias aplicações, tais como: logo da empresa, configuração do serviço de envio de e-mails, templates de relatórios etc.

Muitos assim como eu criaram uma aplicação form e salvaram toda as informações em uma única linha da tabela configurações. E se salvaram muitos informações perceberam que (pelo menos no MySQL e no MariaDB) chega um momento que estoura a linha e você não consegue salvar mais nada.

A solução que encontrei foi armazenar cada campo em uma linha na tabela e dar um GET nos dados que eu queria através de uma function.

Na primeira vez que eu salvava era ótimo, tudo era armazenado no banco de dados, mas quando eu acessava a aplicação form só conseguia acessar a primeira linha do banco, ou senão tinha que usar uma aplicação search para selecionar a configuração que eu queria editar. Isso funciona, mas o problema é que é muito trabalhoso.

Inspecionando o DOM das aplicações do scriptcase percebi que existia um padrão (foi assim que consegui integrar o Google Maps aos campos do form do scriptcase), e a partir daí comecei a desenvolver um scriptcase que resolveria por fim o meu problema: ter um formulário de configurações escalável.

Portanto, mãos a obra!

Ao invés do form você criará uma aplicação control, no meu caso criei a config_geral (para ficar melhor visualmente, separei minhas configurações em várias aplicações, por tópicos: config_geral, config_email, config_sms, etc.)

Primeiro é criar os campos que você irá armazenar os dados de configuração, no caso uso sempre um prefixo para identificar melhor qual configuração estou armazenado, geral_, path_, img_ e por aí vai.

Bom, agora iremos criar a tabela que armazenará toda as configurações do sistema.

CREATE TABLE IF NOT EXISTS `banco_de_dados`.`config` (
  `chave` VARCHAR(100) NOT NULL,
  `valor` TEXT NULL,
  `seletor` VARCHAR(20) NULL,
  `app` VARCHAR(20) NULL,
  `ts_insert` TIMESTAMP NULL DEFAULT CURRENT_TIMESTAMP(),
  `ts_update` TIMESTAMP NULL ON UPDATE CURRENT_TIMESTAMP(),
  PRIMARY KEY (`chave`),
  UNIQUE INDEX `chave_UNIQUE` (`chave` ASC))
ENGINE = InnoDB

O chave armazenará o nome do campo, o valor por si só já diz o que armazenará, o seletor armazenará o tipo de campo de configuração (texto, rádio, checkbox, tinymce, etc.) e o app que armazenará o nome do formulário control a que aquele campo está vinculado.

Os campos ts_insert e ts_update são somente de log de inserção e atualização, os valores deles são gerados pelo próprio banco.

O próximo passo é criar a function que armazenará os campos no banco de dados.

Em bibliotecas internas crie a function storeConfig, que receberá os campos chave, valor, seletor e app.

<?php
function storeConfig($key, $value, $selector, $app) {
    $check_sql = "call sp_get_config_by_key('$key')";
    sc_lookup(rs, $check_sql);

    if (!isset({rs[0][0]})) //INSERT MODE
    {
	try {
	    sc_exec_sql("call sp_insert_config('$key', '$value', '$selector', '$app')");
	}
	catch (Exception $e) {
	    $e->getMessage();	
        }
    }

    else //UPDATE MODE
    {
	try {
	    sc_exec_sql("call sp_update_config('$key', '$value', '$selector', '$app')");		
	}
	catch (Exception $e) {
	    $e->getMessage();	
	}
    }
}
?>

Veja que o script na macro sc_exec_sql executa duas stored procedures, sp_insert_config e sp_update_config, serão elas as responsáveis por inserir e atualizar a linha na tabela.

CREATE PROCEDURE `sp_insert_config` (IN _chave VARCHAR(100), IN _valor TEXT, IN _seletor VARCHAR(20), IN _app VARCHAR(20))
BEGIN
	INSERT INTO config (chave, valor, seletor, app) VALUES (_chave, _valor, _seletor, _app);
END
CREATE PROCEDURE `sp_update_config` (IN _chave VARCHAR(100), IN _valor text, IN _seletor varchar(20), IN _app varchar(20))
BEGIN
UPDATE config SET valor = _valor, seletor = _seletor, app = _app WHERE chave = _chave;
END

Se você usa MySQL ou MariaDB como eu, stored procedures e views otimizam o seu código e evitam retrabalho, vale a pena estudar.

Voltando do form control, no evento onValidateSuccess execute a function storeConfig campo por campo, como no meu exemplo abaixo.

Se você fez tudo até aqui, inseriu informações no formulário e clicou salvar, verificou que na próxima vez que você abre o formulário as informações não estão mais lá.

Precisaremos de um pouco de javascript para resolver esse problema. Em bibliotecas externas criaremos o arquivo loadconfig.js e inseriremos o código abaixo.

function loadConfig(item) {
    let chave = item.chave,
	selector = item.seletor,
	value = item.valor;

    if (selector == 'text' || selector == 'number' || selector == "image")
        $("[name='" + chave + "']").val(value);
    else if (selector == "radio")
	$("[name='" + chave + "'][value='" + value + "']").prop('checked', true);
    else if (selector == 'check') {
        let input = value;
	let lines = input.split(',');
	$.each(lines, function(index, value) {
	    $("[name='" + chave + "[]'][value='" + value + "']").prop('checked', true);
	});
    }
    else if (selector == 'textfield')
        $("[name='" + chave + "']").val(value);
    else if (selector == 'tinymce') {
        let content = $("#id_read_off_" + chave).contents().find("iframe");
	content.contents().find("body").html(value);
    }
}

Como pode observar, o script está em jQuery, porém não há necessidade de se incluir o script pois, à exceção do blank, nas aplicações scriptcase ele já é carregado nativamente.

Agora no evento onLoad da aplicação carregue o script criado utilizando a macro sc_url_library.

Para puxar as informações do banco e popular os campos precisaremos fazer um fetch em javascript para a nossa API. Caso não saiba como criar uma API em scriptcase, fiz um post falando sobre isso.

Ainda no evento onLoad cole o seguinte código.

fetch('<?php echo sc_url_library("prj", "api", "config/listbyapp.php?app=");?>' + 'geral')
    .then(res => res.json())
    .then(data => data.map(obj => loadConfig(obj)))
    .catch(error => console.log(error));

Onde você vê “geral” é a diretiva utilizada para retornar somente os dados do form control config_geral.

Compile e execute o código e você verá a mágica acontecer, responderá da mesma forma que o GIF animado abaixo.

Para pegar essa informação em qualquer aplicação você vai criar uma function em bibliotecas internas, no meu caso chamei de getConfig.

<?php
function getConfig($key) {
	$check_sql = "SELECT valor"
   		   . " FROM config"
   		   . " WHERE chave = '" . $key . "'";
	sc_lookup(rs, $check_sql);
	if (isset({rs[0][0]})) { 
		return {rs[0][0]};
	}
}
?>

Ex: Se eu quero obter o nome da empresa eu vou usar getConfig(‘gera_nomeempresa’), onde geral_nomeempresa é a minha chave.

Gostou? Então comente, se inscreva na minha newsletter e saiba assim que novos posts saírem do forno.

scriptcaser

4 comments

Newsletter

Se inscreva na nossa newsletter
Se increva hoje na nossa lista de e-mail para receber atualizações, tutoriais e ofertas especiais!

Respeitarei sua privacidade. Seu e-mail nunca será compartilhado.