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

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