Aplicações Web com XML e AJAX

Congresso Nacional de PHP

Aplicações Web usando PHP + XML + AJAX

Maria Angelica de Oliveira Camargo-Brunettoangelica@uel.br

Universidade Estadual de Londrina19 de outubro de 2008

http://www.conaphp.com.br

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

19/10/08 Congresso Nacional de PHP 3

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.

19/10/08 Congresso Nacional de PHP 4

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

19/10/08 Congresso Nacional de PHP 5

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

19/10/08 Congresso Nacional de PHP 6

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 ...

19/10/08 Congresso Nacional de PHP 7

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

19/10/08 Congresso Nacional de PHP 8

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

19/10/08 Congresso Nacional de PHP 9

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

19/10/08 Congresso Nacional de PHP 10

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

19/10/08 Congresso Nacional de PHP 11

Arquitetura do Sacarweb

19/10/08 Congresso Nacional de PHP 12

Arquitetura do AnaWeb

19/10/08 Congresso Nacional de PHP 13

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

19/10/08 Congresso Nacional de PHP 14

Sacarweb - Gráficos diversos

19/10/08 Congresso Nacional de PHP 15

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

19/10/08 Congresso Nacional de PHP 16

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.

19/10/08 Congresso Nacional de PHP 17

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

19/10/08 Congresso Nacional de PHP 18

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.

19/10/08 Congresso Nacional de PHP 19

DOM

● Classe DOMDocument ● Métodos:

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

documento XML)– CreateTextNode– SchemaValidate

19/10/08 Congresso Nacional de PHP 20

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

19/10/08 Congresso Nacional de PHP 21

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

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

19/10/08 Congresso Nacional de PHP 22

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

19/10/08 Congresso Nacional de PHP 23

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

19/10/08 Congresso Nacional de PHP 24

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

19/10/08 Congresso Nacional de PHP 25

Trecho da classe DadosXml

19/10/08 Congresso Nacional de PHP 26

19/10/08 Congresso Nacional de PHP 27

19/10/08 Congresso Nacional de PHP 28

XML-Schema para a seleção dos Exames

19/10/08 Congresso Nacional de PHP 29

Documento XML com exames de uma instituição

19/10/08 Congresso Nacional de PHP 30

Apresenta Exames Disponíveis

19/10/08 Congresso Nacional de PHP 31

Resultado da Interface

19/10/08 Congresso Nacional de PHP 32

Um XML-Schema para os metadados de cada exame

19/10/08 Congresso Nacional de PHP 33

19/10/08 Congresso Nacional de PHP 34

RDF e XML de um exame

19/10/08 Congresso Nacional de PHP 35

Um XML instanciado para os metadados dos exames

19/10/08 Congresso Nacional de PHP 36

19/10/08 Congresso Nacional de PHP 37

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

19/10/08 Congresso Nacional de PHP 38

Usando XSL para apresentação de XML

19/10/08 Congresso Nacional de PHP 39

Referenciando o XSL na página dados_exame.php

19/10/08 Congresso Nacional de PHP 40

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

19/10/08 Congresso Nacional de PHP 41

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

19/10/08 Congresso Nacional de PHP 42

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

XML-SCHEMA)

19/10/08 Congresso Nacional de PHP 43

19/10/08 Congresso Nacional de PHP 44

19/10/08 Congresso Nacional de PHP 45

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

19/10/08 Congresso Nacional de PHP 46

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

19/10/08 Congresso Nacional de PHP 47

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.

19/10/08 Congresso Nacional de PHP 48

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.

19/10/08 Congresso Nacional de PHP 49

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.

19/10/08 Congresso Nacional de PHP 50

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

19/10/08 Congresso Nacional de PHP 51

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

19/10/08 Congresso Nacional de PHP 52

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)

19/10/08 Congresso Nacional de PHP 53

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)

19/10/08 Congresso Nacional de PHP 54

Usando Ajax no SacarWeb

19/10/08 Congresso Nacional de PHP 55

Especificação de filtro dinâmico - Sacarweb

19/10/08 Congresso Nacional de PHP 56

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

19/10/08 Congresso Nacional de PHP 57

19/10/08 Congresso Nacional de PHP 58

19/10/08 Congresso Nacional de PHP 59

Usando AJAX no ALFA-WEB

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

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

19/10/08 Congresso Nacional de PHP 60

Interface - AlfaWeb

19/10/08 Congresso Nacional de PHP 61

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

19/10/08 Congresso Nacional de PHP 62

O script Server-side (PHP)

19/10/08 Congresso Nacional de PHP 63

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 + AJAXConsiderações finais

19/10/08 Congresso Nacional de PHP 64

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

19/10/08 Congresso Nacional de PHP 65

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)

19/10/08 Congresso Nacional de PHP 66

Perguntas????

Contato: angelica@uel.br

19/10/08 Congresso Nacional de PHP 67