Aplicações Web com XML e AJAX

2.060 visualizações

Publicada em

Palestra dada por Maria Angelica Brunetto no CONAPHP 2008 - Congresso Nacional de PHP que ocorreu em São Paulo nos dias 18 e 19 de Outubro dentro do CONISLI 2008

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
2.060
No SlideShare
0
A partir de incorporações
0
Número de incorporações
16
Ações
Compartilhamentos
0
Downloads
75
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aplicações Web com XML e AJAX

  1. 1. Congresso Nacional de PHP Aplicações Web usando PHP + XML + AJAX Maria Angelica de Oliveira Camargo-Brunetto angelica@uel.br Universidade Estadual de Londrina 19 de outubro de 2008 http://www.conaphp.com.br
  2. 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 2
  3. 3. Um pouco de história Por 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 3
  4. 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 4
  5. 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 5
  6. 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 6
  7. 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 7
  8. 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 8
  9. 9. Breve apresentação das aplicaçõ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 9
  10. 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 10
  11. 11. Arquitetura do Sacarweb 19/10/08 Congresso Nacional de PHP 11
  12. 12. Arquitetura do AnaWeb 19/10/08 Congresso Nacional de PHP 12
  13. 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 13
  14. 14. Sacarweb - Gráficos diversos 19/10/08 Congresso Nacional de PHP 14
  15. 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 15
  16. 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 16
  17. 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 17
  18. 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 18
  19. 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 19
  20. 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 20
  21. 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 21
  22. 22. PHP + XML nas aplicações ● SacarWeb ● AnaWeb – Para adaptar interface – Para geração de a ser apresentada problemas exemplos – Para agregar – Para aplicação de um metadados aos questionário de recursos avaliação – Para facilitar geração multiidioma 19/10/08 Congresso Nacional de PHP 22
  23. 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 23
  24. 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 24
  25. 25. Trecho da classe DadosXml 19/10/08 Congresso Nacional de PHP 25
  26. 26. 19/10/08 Congresso Nacional de PHP 26
  27. 27. 19/10/08 Congresso Nacional de PHP 27
  28. 28. XML-Schema para a seleção dos Exames 19/10/08 Congresso Nacional de PHP 28
  29. 29. Documento XML com exames de uma instituição 19/10/08 Congresso Nacional de PHP 29
  30. 30. Apresenta Exames Disponíveis 19/10/08 Congresso Nacional de PHP 30
  31. 31. Resultado da Interface 19/10/08 Congresso Nacional de PHP 31
  32. 32. Um XML-Schema para os metadados de cada exame 19/10/08 Congresso Nacional de PHP 32
  33. 33. 19/10/08 Congresso Nacional de PHP 33
  34. 34. RDF e XML de um exame 19/10/08 Congresso Nacional de PHP 34
  35. 35. Um XML instanciado para os metadados dos exames 19/10/08 Congresso Nacional de PHP 35
  36. 36. 19/10/08 Congresso Nacional de PHP 36
  37. 37. Usando XSL para apresentação de documento XML – exemplo dos metadados dos exames 19/10/08 Congresso Nacional de PHP 37
  38. 38. Usando XSL para apresentação de XML 19/10/08 Congresso Nacional de PHP 38
  39. 39. Referenciando o XSL na página dados_exame.php 19/10/08 Congresso Nacional de PHP 39
  40. 40. Interface com a apresentação dos metadados de um exame 19/10/08 Congresso Nacional de PHP 40
  41. 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 41
  42. 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 42
  43. 43. 19/10/08 Congresso Nacional de PHP 43
  44. 44. 19/10/08 Congresso Nacional de PHP 44
  45. 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 45
  46. 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 19/10/08 – * CSS Congresso Nacional de PHP 46
  47. 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 47
  48. 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 48
  49. 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 49
  50. 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 50
  51. 51. Criando o objeto XMLHttpRequest de acordo com o browser function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject(quot;Msxml2.XMLHTTPquot;); } catch (e) { xmlHttp=new ActiveXObject(quot;Microsoft.XMLHTTPquot;); } } return xmlHttp; 19/10/08 Congresso Nacional de PHP 51 }
  52. 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 52
  53. 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 53
  54. 54. Usando Ajax no SacarWeb 19/10/08 Congresso Nacional de PHP 54
  55. 55. Especificação de filtro dinâmico - Sacarweb 19/10/08 Congresso Nacional de PHP 55
  56. 56. Resultado da aplicação do filtro dinâmico - Sacarweb 19/10/08 Congresso Nacional de PHP 56
  57. 57. 19/10/08 Congresso Nacional de PHP 57
  58. 58. 19/10/08 Congresso Nacional de PHP 58
  59. 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 59
  60. 60. Interface - AlfaWeb 19/10/08 Congresso Nacional de PHP 60
  61. 61. function atualizaHorario(opcao, contador) { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert (quot;Seu navegador nao suporta AJAX!quot;); return; } var url=quot;seleciona_horario_diasemana.php? diasemana=quot;+opcao.value; xmlHttp.onreadystatechange=function () { if(xmlHttp.readyState==4) { var objetoA = eval(quot;document.cadastroAlunos.horarioquot;+contador); var objetoB = eval(quot;document.cadastroAlunos.professorquot;+contador); objetoA.innerHTML = xmlHttp.responseText;// recupera dados do servidor objetoB.innerHTML = quot;quot;; } } xmlHttp.open(quot;GETquot;,url,true); xmlHttp.send(null); } 19/10/08 Congresso Nacional de PHP 61
  62. 62. O script Server-side (PHP) 19/10/08 Congresso Nacional de PHP 62
  63. 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 + AJAX Considerações finais 19/10/08 Congresso Nacional de PHP 63
  64. 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 64
  65. 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/phpco dingstandard/) ● Tutorial – (www.w3schools.com) 19/10/08 Congresso Nacional de PHP 65
  66. 66. Perguntas???? Contato: angelica@uel.br 19/10/08 Congresso Nacional de PHP 66
  67. 67. 19/10/08 Congresso Nacional de PHP 67

×