Aplicações Web com XML e AJAX

Congresso Nacional de PHP

Aplicações Web usando PHP + XML + AJAX

Maria Angelica de Oliveira [email protected]

Universidade Estadual de Londrina19 de outubro de 2008

http://www.conaphp.com.br

mailto:[email protected]

19/10/08 Congresso Nacional de PHP 2

Agenda● Um pouco de História - Por quê PHP● Aplicações em Desenvolvimento● PHP + XML

– O que é – Quando e por quê nas aplicações desenvolvidas– Como foi usado

● PHP + AJAX● Considerações finais


Um pouco de históriaPor quê PHP

● 2001 – aplicação Web para fins educacionais com recursos para cálculos matemáticos

● Migração de aplicações desktop para Web● 2005 – Necessidade de adaptação de

conteúdo de acordo com perfil de usuário● 2006/2007 – Necessidade de agilizar geração

de relatórios, mediante diferentes aplicações de filtros.


Palavras-Chave● Conteúdo dinâmico: tudo que pode ser alterado

deve ser feito através do usuário (se possível)● Adaptação ao usuário: apresentações e

conteúdos apropriados ao perfil do usuário● Internacionalização: preparar aplicação para

múltiplos idiomas.● Legibilidade e Manutenibilidade: padrões de

programação PHP (PHPCodingStandard, documentação (PHPDOC) Uso de padrões (W3C).


Laboratório de Pesquisa● Espaço para explorar soluções (precisava de

um ambiente robusto e flexível)● Web – como atividade fim e como atividade

meio (gerenciamento das atividades)● Software livre e opensource – desperta o

interesse e permite avançar sobre o que já se tem feito...

● Necessidade de usuário não tem limite ● Idéias para explorar novas soluções também


Ponha-se no lugar do usuário

● Usuário quer facilidade de operação, rapidez, inclusão de novas funcionalidades (pra ontem...)

● É bom experimentar um pouco de cada papel:– Projetista de software– Usuário– Programador – Testador ...


Agenda● Um pouco de História - Por quê PHP

Aplicações em Desenvolvimento● PHP + XML




Aplicações em desenvolvimento

● Modificações em Software opensource – Claroline (Learning Manager System)– Nourau (Biblioteca Digital)

● Desenvolvimento de Software– Área Educacional – Anaweb– Área da Saúde – SacarWeb– Administração de Escola de Natação – AlfaWeb


Breve apresentação dasaplicações

● Todas aplicações usam LAMP (Linux + Apache + MySQL + PHP)

● Claroline – Sistema gerenciador de cursos● SacarWeb: Sistema para controle de Avaliação

Cardiorespiratória ● AnaWeb: Sistema para auxílio no ensino de

Computação Numérica e Algébrica pela Web● AlfaWeb: Sistema para controle administrativo

de Escola de Natação


SacarWeb

● Possui diferentes níveis de usuários– Administrador local (responsável por uma unidade

clínica)– Colaborador (introduz os dados no sistema)– Especialista da área médica

● O sistema oferece uma vasta gama de exames– Nem todos usuários usam todos

● Perfil do usuário (administrador local) – idioma, exames de seu interesse


Arquitetura do Sacarweb


Arquitetura do AnaWeb


Sacarweb - Composição dos módulos

● Algumas Classes PHP Desenvolvidas

● Grafico (usa as classes JPGRAPH e JPGRAPH_LINE)● Tradução – Para auxiliar na geração de conteúdo

multidioma● Utilitários - possui métodos para converter formato de

data, notação decimal, horas em minutos, minutos em horas, remoção de caracteres estranhos em nomes de arquivos, etc)

● Páginas (PHP+HTML)● JavaScripts


Sacarweb - Gráficos diversos


Agenda● Um pouco de História - Por quê PHP● Aplicações em Desenvolvimento

PHP + XML – O que é – Quando e por quê nas aplicações desenvolvidas– Como foi usado



PHP + XML

● PHP – linguagem de programação● XML (eXtended Markup Language) é uma

linguagem de marcação – permite a livre criação e uso de tags.

● Podem ser usadas em conjunto para desenvolvimento de aplicações web, facilitando a separação de estrutura, conteúdo e apresentação.


Estrutura – Conteúdo - Apresentação

● Estrutura ou gramática – definida por DTD (.dtd) ou XML-Schema (.xsd)

● Apresentação – define-se o quê apresentar e como através de um arquivo XSL

● Conteúdo: documento XML. ● A gramática a ser obedecida deve ser

referenciada no arquivo de documento XML e validada no programa que acessa XML


Como PHP manipula arquivos XML

● XML é um documento que representa uma estrutura hierárquica.

● DOM (Document Object Model) é um modelo para representar um documento XML – É também uma API com funções que permitem

manipular a árvore que representa um XML disponível para diferentes linguagens de programação.


DOM

● Classe DOMDocument ● Métodos:

– Load – carrega um documento XML– CreateElement– AppendChild (Insere um nó filho na árvore do

documento XML)– CreateTextNode– SchemaValidate


PHP + XML

● Em PHP, um documento XML pode ser validado através do método SchemaValidate aplicado a um objeto DOMDocument

● A forma de apresentação pode ser especificada no programa PHP



– O que é Quando e por quê nas aplicações desenvolvidas

– Exemplo de uso no SacarWeb● PHP + AJAX● Considerações finais


PHP + XML nas aplicações

● SacarWeb – Para adaptar interface

a ser apresentada– Para agregar

metadados aos recursos

– Para facilitar geração multiidioma

● AnaWeb– Para geração de

problemas exemplos– Para aplicação de um

questionário de avaliação


PHP + XML - SACARWEB● Usando XML para gerar interfaces adaptadas

• O sistema oferece uma vasta gama de exames, mas o usuário só vai usar uma parte

● Usando XML para agregar metadados aos recursos– Usuário da área médica: como vou ter garantia que as

análises fornecidas pelo sistema coincide com as que eu faço?

● Usando XML para manipular vocabulário para geração de páginas multiidiomas– Arquivos de idiomas facilitam a criação de páginas multi-

idiomas. Tradutor pode não ter conhecimento técnico necessário para entender os arquivos


PHP+ XML no Sacarweb● Exemplo da Classe DadosXml

– Criada para Definir um arquivo XML com os exames de interesse de um determinado usuário

● Possui os métodos– Monta Documento– Carrega Documento – chama o método

schemavalidate para validar um documento XML de acordo com um XML-schema


Trecho da classe DadosXml




XML-Schema para a seleção dos Exames


Documento XML com exames de uma instituição


Apresenta Exames Disponíveis


Resultado da Interface


Um XML-Schema para os metadados de cada exame



RDF e XML de um exame


Um XML instanciado para os metadados dos exames



Usando XSL para apresentação de documento XML – exemplo dos metadados dos exames


Usando XSL para apresentação de XML


Referenciando o XSL na página dados_exame.php


Interface com a apresentação dos metadados de um exame


Uma classe para auxiliar na geração de conteúdo

multiidioma● Classe tradução

– Atributos: idioma, arquivo, xml– Métodos: construtor da classe

● Localiza o XML● Recupera a sentença● Retorna todas as traduções para a sentença● Retorna todas as sentenças do arquivo XML● Insere uma nova sentença● Altera uma sentença existente no arquivo XML● Remove uma sentença do arquivo XML

– Usa o schema definido em translation.xsd


Exemplo de um arquivo XML para tradução de termos específicos da área médica e o respectivo

XML-SCHEMA)






PHP + AJAX● Considerações finais


AJAX

● Asynchronous JavaScript and XML● Não é uma nova linguagem de programação● Técnica para criar aplicações web mais

ágeis e mais interativas.● Ajax está baseado nos seguintes padrões

Web– * JavaScript– * XML– * HTML– * CSS


JavaScript Convencional x com uso de AJAX

● JavaScript convencional- – para obter qualquer informação de um arquivo ou

bd no servidor, ou enviar informação do usuário para servidor – deve-se fazer um form HTML e GET/POST para o servidor.

– Após submissão, usuário precisa esperar pela resposta do servidor e então uma nova página será carregada com os resultados.

– Como o servidor retorna uma nova página a cada “submit” dado pelo usuário, aplicações Web convencionais tendem a ficar mais lentas.


JavaScript Convencional x com uso de AJAX

● Usando AJAX, JavaScript se comunica diretamente com o servidor, através do objeto JavaScript XMLHttpRequest

● Com uma requisição HTTP uma página web pode fazer uma requisição para o servidor web e ter a resposta sem recarregar a página.

● A requisição de páginas dos scripts e o envio de dados para o servidor ficam em background.


XMLHttpRequest

● JavaScript comunica-se com o servidor através do objeto XMLHttpRequest

● Usando o objeto XMLHttpRequest , é possível atualizar uma página com dados do servidor, após a página ter sido carregada.


Propriedades importantes do objeto XMLHttpRequest

● onreadystatechange – Contém a função que recebe os dados do servidor

● readyState – 0 Requisição ainda não iniciada– 1 Requisição iniciada– 2 Requisição enviada– 3 Requisição em processamento. – 4 Requisição concluída.

● ResponseText ( o dado enviado pelo servidor pode ser recuperado por esta propriedade)–


function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp;}

Criando o objeto XMLHttpRequest de acordo com o browser


AJAX – Enviando uma requisição ao servidor HTTP

● Os métodos Open e Send● Open (3 argumentos)

● get/post● URL do script do lado servidor● Especifica se requisição deve ser manipulada

assincronamente (true/false) ● xmlHttp.open(“GET”, “url do script server side”,true)

● Send() - envia requisição para o servidor– xmlHttp.send(null)


Ações no javascript c/ AJAX

● Chama GetXmlHttpObject para criar um objeto XmlHttp

● Define a URL onde está a página PHP para enviar ao servidor + um parâmetro com a opção selecionada● Executa o conteúdo de

xmlHttp.onreadystatechange=function ()quando XmlHttp.readyState=4

● Abre o XmlHttp com a url dada -XmlHttp.open● Envia uma requisição HTTP para o servidor

xmlHttp.send(null)


Usando Ajax no SacarWeb


Especificação de filtro dinâmico - Sacarweb


Resultado da aplicação do filtro dinâmico - Sacarweb




Usando AJAX no ALFA-WEB

● Em que situação ● O script client side (JavaScript)

–Atualiza horário● O script server side (PHP)


Interface - AlfaWeb


function atualizaHorario(opcao, contador) {

xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Seu navegador nao suporta AJAX!"); return; } var url="seleciona_horario_diasemana.php?diasemana="+opcao.value; xmlHttp.onreadystatechange=function () { if(xmlHttp.readyState==4) { var objetoA = eval("document.cadastroAlunos.horario"+contador); var objetoB = eval("document.cadastroAlunos.professor"+contador); objetoA.innerHTML = xmlHttp.responseText;// recupera dados do servidor objetoB.innerHTML = ""; } } xmlHttp.open("GET",url,true); xmlHttp.send(null);}


O script Server-side (PHP)




● PHP + AJAXConsiderações finais


Considerações Finais

● Software OpenSource ● PHP - Flexibilidade – Robustez - ● PHP + XML - oportunidade para personalizar

aplicações e agregar semântica ao conteúdo● PHP + AJAX – agilizar consultas● Projetos em andamento:

– Mecanismo de comunicação de erros/anormalidades por parte do usuário no SacarWeb


URL's úteis● Claroline (www.claroline.net)● Sacarweb (www.protem.dc.uel.br/sacarweb)● Anaweb (www.protem.dc.uel.br/anaweb)● W3C (www.w3.org)● PHPDOC (www.phpdoc.org)● PHPCodingStandard

(http://www.dagbladet.no/development/phpcodingstandard/)

● Tutorial – (www.w3schools.com)

http://www.claroline.net/

http://www.protem.dc.uel.br/sacarweb

http://www.protem.dc.uel.br/anaweb

http://www.phpdoc.org/


Perguntas????

Contato: [email protected]


Technology

Aplicações Web com XML e AJAX