AULA 6 IMPLEMENTAR TELA UTILIZANDO FRAMEWORK JEASYUI + PHP

Transcrição

1 AULA 6 IMPLEMENTAR TELA UTILIZANDO FRAMEWORK JEASYUI + PHP O que é EasyUI? easyui é um conjunto de plug-in de interface de usuário baseada em jquery. easyui fornece funcionalidade essencial para a construção, aplicações interativas, javascript modernos. usando easyui você não precisa escrever muitos código javascript, você geralmente definem interface de usuário escrevendo algumas marcações HTML. estrutura completa para página web HTML5. easyui economiza seu tempo e escalas durante o desenvolvimento de seus produtos. easyui é muito fácil, mas poderosa. Tutoriais e demonstrações estão prontos Lotes de tutoriais e aplicativos demos podem ajudá-lo a saber mais sobre este quadro. jquery EasyUI fornece tudo que você precisa para construir sua página web ou telas de aplicações comerciais. Estes tutoriais irá mostrar passo-a-passo como criar a sua aplicação. Para utilizar os códigos já prontos do Jeasyui, é necessário fazer o download da biblioteca. OBS: Fazendo o download da aula 6 (cadastro de cursos), a biblioteca estará junto, está na pasta easyui. Construir aplicativo CRUD com jquery EasyUI Tornou-se uma necessidade comum construções de aplicação web para coletar dados e gerenciá-lo corretamente. O CRUD nos permite gerar páginas para listar e editar registros de banco de dados. Este tutorial irá mostrar-lhe como implementar um DataGrid CRUD usando o framework jquery EasyUI. Usaremos seguintes plugins: datagrid: mostrar os dados da lista do usuário. O formato é de uma tabela (table) de diálogo: criar ou editar uma única informação do curso. formulário: usado para enviar dados de formulário. messager: mostrar algumas mensagens de operação. Funções semiprontas em javascript escritas em jeasyui 1

2 Passo 1: Prepare o banco de dados Vamos usar banco de dados Postgresql para armazenar informações do usuário. Criar banco de dados "academico" e tabela "cursos". CREATE DATABASE academico CREATE TABLE cursos ( ) codcurso integer PRIMARY KEY, nomecurso VARCHAR(40) NOT NULL OBS 1 : PODEM FAZER O DOWNLOAD DA AULA 6, ONDE TEMOS PRONTO O CADASTRO DE CURSOS FUNCIONANDO, JUNTAMENTE COM A BIBLIOTECA JEASYUI. OBS 2 : EM RELAÇÃO A CLASSE, SERÁ A MESMA QUE CONSTRUIMOS. E NO CASO DO PROGRAMA APP (CURSOS.APP.PHP), TERÁ APENAS UMA ALTERAÇÃO. Passo 2: Criar DataGrid para exibir informações dos cursos para o usuário Criação desta DataGrid não possui nenhum código javascript, a não ser a configuração da chamada da grid. A chamada do comandos para a montagem da GRID é o trecho class="easyui-datagrid" A propriedade url executa o programa PHP com o código que "monta" os dados para serem exibidos. 2

3 >>> Techo do programa cadcursos.php (grid) <table id="dg" title="cursos" class="easyui-datagrid" style="width:700px;height:360px" url="../app/curso.app.php?opcao=listar" toolbar="#toolbar" pagination="true" rownumbers="true" fitcolumns="true" singleselect="true"> <thead> <tr> </tr> </thead> </table> <th field="codcurso" width="30">código</th> <th field="nomecurso" width="100">nome do curso</th> Ao executar o comando url="../app/curso.app.php?opcao=listar", a opção Listar deverá retornar os dados em formato JSON. JSON (JavaScript Object Notation) é um formato de intercâmbio de dados leve. JSON é um formato de texto que é completamente independente do idioma, mas usa convenções que são familiares aos programadores do C-família de línguas, incluindo C, C ++, C #, Java, JavaScript, Perl, Python, e muitos outros. Estas propriedades fazem JSON uma linguagem de intercâmbio de dados ideal. JSON é construído em duas estruturas: Uma coleção de pares nome / valor. Em várias línguas, isto é percebido como um objeto, registro, struct, dicionário, tabela hash, lista com chave, ou matriz associativa. Uma lista ordenada de valores. Na maioria das linguagens, isso é realizado como uma matriz, vetor, lista ou sequência. Estes são estruturas de dados universais. Praticamente todas as linguagens de programação modernas apoiá-los de uma forma ou de outra. Faz sentido que um formato de dados que é intercambiável com linguagens de programação também basear-se estas estruturas. Exemplo : # Inicio do trecho curso.app.php # Incluindo a classe include '../classes/curso.class.php'; # Instanciando a classe $objeto = NEW Curso($_REQUEST['codcurso']); # Obtendo opção para executar alguma ação $opcao = $_REQUEST['opcao']; 3

4 if ($opcao == 'Listar') { # Variável $all recebendo dados retornados do método Listar $all = $objeto->listar(); # Abrindo resultado para a criação do Json # ( $result = array(); for ( $i=0; $i < sizeof($all); $i++ ) { # Criando array obtendo dados lidos da tabela $node['codcurso'] = $all[$i]['codcurso']; $node['nomecurso'] = $all[$i]['nomecurso']; # trata array como uma pilha, e adiciona as variáveis passadas # como argumentos no final de array. array_push($result,$node); # Retorna a string contendo a representação JSON # ( echo json_encode($result); O retorno da leitura acima, em formato json: [{"codcurso":"1","nomecurso":"adm111", {"codcurso":"18","nomecurso":"arquitetura 22", {"codcurso":"19", "nomecurso":"direito", {"codcurso":"21", "nomecurso":"engenharia CIVIL", {"codcurso":"8","nomecurso":"geografia"] Passo 3 : Implementando os botões Acima da grid, existe uma barra de tarefas com os seguintes botões: Novo Registro, Alterar Registro e Remover Registro. Esses botões deverão executar os opções Incluir, Alterar e Excluir do programa cursos.app.php através de funções javascript. Código HTML dos botões <div id="toolbar"> 4

5 <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="novo()">novo Registro</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="editar()">alterar Registro</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="cancelar()">remover Registro</a> </div> Algumas propriedades utilizadas: class="easyui-linkbutton" -> executa a classe do jeasyui para o desenho dos botões. iconcls="icon-add" -> Mostra um icone no botão Veja na pasta easyui/themes/icons para conhecer mais icones onclick -> chama a função javascript Passo 4: Escrever as funções JAVASCRIPT para executar o APP. -- O trecho está na tela cadcursos.php <!-- COMANDOS AJAX PARA EXECUTAR AS OPÇÕES DO FORMULÁRIO QUE ESTÃO NO APP --> <script type="text/javascript"> // FUNÇÕES PARA EXECUTAR OS COMANDOS EM PHP - ADAPTAR DE ACORDO COM A TELA var url; // Declarando variáveis que receberá a url do APP <!-- FUNÇÃO PARA INCLUIR NOVO REGISTRO. ABRE O FORMULÁRIO. --> function novo(){ $('#dlg').dialog('open').dialog('center').dialog('settitle','novo'); $('#fm').form('clear'); url = '../app/curso.app.php?opcao=incluir'; <!-- FUNÇÃO PARA ALTERAR REGISTRO. ABRE O FORMULÁRIO. --> function editar(){ var row = $('#dg').datagrid('getselected'); // Seleciona a linha que clicamos na grid if (row){ var codcurso = row.codcurso; // atribui a variáel o valor do campo codcurso 5

6 $('#dlg').dialog('open').dialog('center').dialog('settitle','editar'); $('#fm').form('load',row); url = '../app/curso.app.php?opcao=alterar&codcurso='+codcurso; <!-- FUNÇÃO PARA EXECUTAR COMANDO PARA GRAVAR REGISTRO (INCLUIR OU ALTERAR) --> function salvar(){ $('#fm').form('submit',{ ); url: url, onsubmit: function(){ window.location.href = 'cadcurso.php'; <!-- FUNÇÃO PARA EXECUTAR COMANDO PARA EXCLUIR REGISTRO --> function cancelar(){ var row = $('#dg').datagrid('getselected'); if (row){ ); $.messager.confirm('confirm','confirma cancelamento do registro?',function(r){ if (r){ $.post('../app/curso.app.php?opcao=cancelar',{codcurso:row.codcurso, function(result){ window.location.href = 'cadcurso.php';,'json'); // FIM DAS FUNÇÕES PARA EXECUTAR OS COMANDOS EM PHP - ADAPTAR DE ACORDO COM // A TELA OBS: O APP (CURSO.APP.PHP) É BASICAMENTE O MESMO. 6