Aplicações Web com XML e AJAX

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Favorites, Groups & Events

    Aplicações Web com XML e AJAX - Presentation 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(\"Msxml2.XMLHTTP\"); } catch (e) { xmlHttp=new ActiveXObject(\"Microsoft.XMLHTTP\"); } } 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 (\"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 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

    + manuellemosmanuellemos, 2 years ago

    custom

    1433 views, 0 favs, 0 embeds more stats

    Palestra dada por Maria Angelica Brunetto no CONAPH more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1433
      • 1433 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 0
    • Downloads 35
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories