Your SlideShare is downloading. ×
0
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Aplicações Web com XML e AJAX
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Aplicações Web com XML e AJAX

1,913

Published on

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

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,913
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
75
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Arquitetura do Sacarweb 19/10/08 Congresso Nacional de PHP 11
  • 12. Arquitetura do AnaWeb 19/10/08 Congresso Nacional de PHP 12
  • 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. Sacarweb - Gráficos diversos 19/10/08 Congresso Nacional de PHP 14
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Trecho da classe DadosXml 19/10/08 Congresso Nacional de PHP 25
  • 26. 19/10/08 Congresso Nacional de PHP 26
  • 27. 19/10/08 Congresso Nacional de PHP 27
  • 28. XML-Schema para a seleção dos Exames 19/10/08 Congresso Nacional de PHP 28
  • 29. Documento XML com exames de uma instituição 19/10/08 Congresso Nacional de PHP 29
  • 30. Apresenta Exames Disponíveis 19/10/08 Congresso Nacional de PHP 30
  • 31. Resultado da Interface 19/10/08 Congresso Nacional de PHP 31
  • 32. Um XML-Schema para os metadados de cada exame 19/10/08 Congresso Nacional de PHP 32
  • 33. 19/10/08 Congresso Nacional de PHP 33
  • 34. RDF e XML de um exame 19/10/08 Congresso Nacional de PHP 34
  • 35. Um XML instanciado para os metadados dos exames 19/10/08 Congresso Nacional de PHP 35
  • 36. 19/10/08 Congresso Nacional de PHP 36
  • 37. Usando XSL para apresentação de documento XML – exemplo dos metadados dos exames 19/10/08 Congresso Nacional de PHP 37
  • 38. Usando XSL para apresentação de XML 19/10/08 Congresso Nacional de PHP 38
  • 39. Referenciando o XSL na página dados_exame.php 19/10/08 Congresso Nacional de PHP 39
  • 40. Interface com a apresentação dos metadados de um exame 19/10/08 Congresso Nacional de PHP 40
  • 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. 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. 19/10/08 Congresso Nacional de PHP 43
  • 44. 19/10/08 Congresso Nacional de PHP 44
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Usando Ajax no SacarWeb 19/10/08 Congresso Nacional de PHP 54
  • 55. Especificação de filtro dinâmico - Sacarweb 19/10/08 Congresso Nacional de PHP 55
  • 56. Resultado da aplicação do filtro dinâmico - Sacarweb 19/10/08 Congresso Nacional de PHP 56
  • 57. 19/10/08 Congresso Nacional de PHP 57
  • 58. 19/10/08 Congresso Nacional de PHP 58
  • 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. Interface - AlfaWeb 19/10/08 Congresso Nacional de PHP 60
  • 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. O script Server-side (PHP) 19/10/08 Congresso Nacional de PHP 62
  • 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. 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. 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. Perguntas???? Contato: angelica@uel.br 19/10/08 Congresso Nacional de PHP 66
  • 67. 19/10/08 Congresso Nacional de PHP 67

×