Carregando dados usando AJAX

Corpo do texto:

Neste artigo vou explicar como podemos usar ajax + mysql e zope. Vamos criar exemplo escola, aonde teremos 3 turmas, com alguns professores e vários alunos em cada turma. Ao seleciona uma turma aparecerá a lista de professores e alunos daquela turma.

Siga os passos:

1 - Criar as tabelas
O primeiro passo é verificarmos se o nosso MySql está rodando. Se estiver rodando vamos acessar o prompt do MySql e criar a nossa base de dados. Para acessar abra um terminal, faça o login como root e digte a seguinte linha:

mysql

Caso o seu banco de dados possu uma senha, os sistema vai te requistar. Mais como a nossa instalação do nosso mysql é padrão, por default ele não possui senha para root.

Criando uma base de dados:

create database escola;

Acessando a nossa base de dados:

use escola;

Criando a tabela de turmas:

CREATE TABLE turmas (codigo integer auto_increment,nome varchar(50), 
descricao varchar(50),primary key(codigo)) type=innodb;

Criando a tabela de professores, aonde ela possui uma chave estrangeira para a tablea de turmas, para referenciar em qual turma ele ministra aula:

CREATE TABLE professores (codigo integer auto_increment,
nome varchar(50),turma integer,materia varchar(50),
primary key(codigo),foreign key(turma) references turmas (codigo))
type=innodb;

Criando a tabela de alunos aonde ela possui uma chave estrangeira para a tablea de turmas, para referenciar em qual turma ele assiste aula:

CREATE TABLE alunos (codigo integer auto_increment,
nome varchar(50),turma integer,primary key(codigo),
foreign key(turma) references turmas (codigo)) type=innodb;

2- Inserir uma carga Inicial
Inserindo alguns dados para que possamos realizarmos nossos teste:

INSERT INTO turmas (nome,descricao) VALUES ('Direito','Turma de Direito');
INSERT INTO turmas (nome,descricao) VALUES ('Psicologia','Turma de Psicologia');
INSERT INTO turmas (nome,descricao) VALUES ('Matematica','Turma de Matematica');

INSERT INTO professores (nome,turma) VALUES ('Jose Ferreira',1);
INSERT INTO professores (nome,turma) VALUES ('Maria das Dores',2);
INSERT INTO professores (nome,turma) VALUES ('Pierre de Fermat',3);

INSERT INTO alunos (nome,turma) VALUES ('Adália',1);
INSERT INTO alunos (nome,turma) VALUES ('Adalina',1);
INSERT INTO alunos (nome,turma) VALUES ('Adaline',1);
INSERT INTO alunos (nome,turma) VALUES ('Adalton',1);
INSERT INTO alunos (nome,turma) VALUES ('Adalmir',1);

INSERT INTO alunos (nome,turma) VALUES ('Kammille',2);
INSERT INTO alunos (nome,turma) VALUES ('Kananda',2);
INSERT INTO alunos (nome,turma) VALUES ('Karen',2);
INSERT INTO alunos (nome,turma) VALUES ('Karim',2);
INSERT INTO alunos (nome,turma) VALUES ('Karina',2);

INSERT INTO alunos (nome,turma) VALUES ('Zoroastro',3);
INSERT INTO alunos (nome,turma) VALUES ('Zózima',3);
INSERT INTO alunos (nome,turma) VALUES ('Zuleica',3);
INSERT INTO alunos (nome,turma) VALUES ('Zulmira ',3);

3 - Criar Z MySQL Database Connection

Agora nós vamos criar a nossa conexão do zope com a nossa base dados. Vá até a ZMI e adicione um Z MySQL Database Connection.

No campo Connect immediately coloque as informações sobre o seu banco neste artigo a linha ficará assim: financeiro root.
A sintaxe deste comando é a seguinte: database user password. Caso não tenha acontecido nenhum erro, sua conexão foi criada com sucesso.

4 - Criar a página inicial
Esta página vai se chamar relatorio_turma, aonde ao selecionarmos um tuma o sistema vai nos retornar os professores e alunos daquela turma.

O primeiro passo é criar o nosso page_template com o nome sitado logo acima e como o código abaixo:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
      lang="en"
      metal:use-macro="here/main_template/macros/master"
      i18n:domain="Plone">
<body>
    <div metal:fill-slot="main">

	<script src="prototype.js" type="text/javascript"></script>

        <script src="script_relatorio.js" type="text/javascript"></script>

        <form action=""
              name="relatorio"
              tal:define="results python:context.listaTurmas()">
            Turma:
            <select name="turma" onchange="ajaxRelatorio(this);">
                <option value="0">--- Selecione a turma ---</option>
                <tal:items tal:repeat="item results">
                    <option value=""
                            tal:attributes="value python:item[0]"
                            tal:content="python:item[1]">turma</option>
                </tal:items>
            </select>

            <div id="resultado_professores"></div>

            <div id="resultado_alunos"></div>

        </form>
    </div>
</body>
</html>

Baixe aqui o arquivo é prototype.js e coloque no contexto aonde você esta desenvolvendo a aplicação.

5 - Criar o script de busca de turmas
Neste passo vamos criar o script que vai retorna todas as turmas da nossa base de dados escola, este script foi invocado no page_template detalhado logo acima e ele deve se chamar listaTurmas:

consulta = context.select_turmas().dictionaries()

lista = []

for i in consulta:
    lista.append((i['codigo'],i['nome']))

return tuple(lista)

6 - Criar o script de busca de professores
Neste passo vamos criar o script que vai retorna os professores da turma passada por parametro, este script será invocado no page_template tabela_professores que será detalhado nos passos seguintes, este script deve se chamar listaProfessores, não se esqueça que este script recebe um parametro:

consulta = context.select_professores(turma=turma).dictionaries()

lista = []

for i in consulta:
    lista.append((i['codigo'],i['nome']))

return tuple(lista)

7 - Criar o script de busca de alunos
Neste passo vamos criar o script que vai retorna os alunos da turma passada por parametro, este script será invocado no page_template tabela_alunos que será detalhado nos passos seguintes, este script deve se chamar listaAlunos, não se esqueça que este script recebe um parametro:

consulta = context.select_alunos(turma=turma).dictionaries()

lista = []

for i in consulta:
    lista.append((i['codigo'],i['nome']))

return tuple(lista)

8 - Criar os nossos ZSqls
Neste ponto vamos criar as nossas buscas, o primeiro a ser criado é a busca de turmas, que não recebe nenhum parametro.

Então na sua Zmi adicione um ZSQL Method com o nome de select_turmas e com o código abaixo:

SELECT codigo,nome FROM turmas
ORDER BY nome;

Em seguida crie outro ZSQL Method com o nome de select_professores, este zsql recebe um parametro chamado turma, para que ele possa filtrar somente os professores daquela determinada turma:

SELECT codigo,nome FROM professores
WHERE codigo = <dtml-sqlvar turma type="int">
ORDER BY nome;

Em seguida crie outro ZSQL Method com o nome de select_alunos, este zsql recebe um parametro chamado turma, para que ele possa filtrar somente os alunos daquela determinada turma:

SELECT codigo,nome FROM alunos
WHERE codigo = <dtml-sqlvar turma type="int">
ORDER BY nome;

9 - Criar a nossa função Javascript
Neste ponto iremos criar a nossa função Javascript, esta função será invocada no nosso page_template relatorio_turma no evendo onchange do nosso formulario. Crie um arquivo chamado script_relatorio.js, neste arquivo é que vão conter as funções para caregar as páginas, observe o código:

function ajaxProfessores(turma) {
    var url = 'tabela_professores';
    var params = 'turma='+turma.value;
    var m = new Ajax.Updater({success: 'resultado_professores'}, url, {method: 'get', parameters: params, onFailure: mostraErro});
}

function ajaxAlunos(turma) {
    var url = 'tabela_alunos';
    var params = 'turma='+turma.value;
    var m = new Ajax.Updater({success: 'resultado_alunos'}, url, {method: 'get', parameters: params, onFailure: mostraErro});
}

function ajaxRelatorio(turma) {
    ajaxProfessores(turma);
    ajaxAlunos(turma);
}

mostraErro = function(r) {
    alert('Erro na conexão com a base de dados.');
}

10 - Criar a página de retorno de professores
Esta página será carregada quando a turma for selecionada:

<div id="professores"
     tal:define="turma python:request.get('turma', None);
                 listaProfessores python:context.listaProfessores(turma);">
    <h1>Professores</h1>
    <table border="1">
        <TD>código</TD><TD>nome</TD></TR>
        <tal:loop repeat="prof listaProfessores">
            <span tal:define="codigo python:prof[1];
                              nome python:prof[0]">
            <TD tal:content="codigo">codigo</TD>
            <TD tal:content="nome">nome</TD></TR>
        </tal:loop>
    </table>
</div>

9 - Criar a página de retorno de alunos
Esta página será carregada quando a turma for selecionada:

<div id="alunos"
     tal:define="turma python:request.get('turma', None);
                 listaAlunos python:context.listaAlunos(turma);">
    <h1>Alunos</h1>
    <table border="1">
        <TD>código</TD><TD>nome</TD></TR>
        <tal:loop repeat="aluno listaAlunos">
            <span tal:define="codigo python:aluno[1];
                              nome python:aluno[0]">
            <TD tal:content="codigo">codigo</TD>
            <TD tal:content="nome">nome</TD></TR>
        </tal:loop>
    </table>
</div>

10 - Conclusão
Neste artigo temos um exemplo de como se aplicar ajax + banco de dados relacional ao seu portal Plone, este é um pequeno exemplo daonde temos embasamento para cria diversa tipos de aplicações usando ajax.

Para testar, basta acessar a pagina relatorio_turma no seu Browser.

LM - Seu Canal de Infomacao PZP

Seções

Ferramentas Pessoais

Carregando dados usando AJAX