• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
PHP
 

PHP

on

  • 4,482 views

 

Statistics

Views

Total Views
4,482
Views on SlideShare
4,479
Embed Views
3

Actions

Likes
0
Downloads
54
Comments
0

2 Embeds 3

http://www.slideshare.net 2
https://drive.jolicloud.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    PHP PHP Presentation Transcript

    • PHP & AJAX Brasília, DF 25 de Março de 2006 Universidade Católica de Brasília Adler Brediks Medrado http://adler.neshertech.net adler.medrado@x25.com.br www.x25.com.br
    • Conteúdo • Apresentando o AJAX • Conceitos similares • Como funciona o processo cliente-servidor • O Objeto XMLHttpRequest • Interagindo com o PHP • PHP AJAX Toolkits / Frameworks • Perguntas e respostas www.x25.com.br
    • Apresentando o AJAX Acrônimo para Asyncronous Javascript And XML. AJAX não é uma tecnologia e sim o uso em conjunto de diversas tecnologias como CSS, XHTML, DOM, Javascript e XMLHttpRequest. Permite enviar e receber dados de/para um servidor web como APACHE, IIS, etc, sem a necessidade de reload da página. www.x25.com.br
    • Apresentando o AJAX Pode ser utilizado em conjunto com diversas linguagens para desenvolvimento WEB, pois ele é executado do lado client. Não é tão complicado como parece (ou como algumas pessoas fazem parecer). O AJAX permite o desenvolvimento de aplicativos web interativos, por exemplo: Google Maps, Google Mail (GMAIL), Flickr e Google Suggest www.x25.com.br
    • Conceitos similares Javascript Remote Scripting: Técnica de desenvolvimento para criação de aplicações web usando uma combinação de XHTML, DOM e Javascript sem a necessidade de utilizar o objeto XMLHttpRequest XML-RPC: Protocolo para chamada remota de métodos codifica os dados em XML e utiliza o protocolo HTTP como mecanismo de transporte dos dados. Webservices – SOAP: Protocolo para intercâmbio de dados entre softwares. Os dados também são codificados em em formato XML Flash Remoting: Acesso a dados do servidor web utilizando FLASH www.x25.com.br
    • Como funciona o processo cliente-servidor Cliente Request Servidor Web (browser) Response (Apache, IIS, etc) DB PHP www.x25.com.br
    • O Objeto XMLHttpRequest Nativo do navegador web Compatível com qualquer versão atual dos navegadores web Criado originalmente pela Microsoft, disponível desde a versão 5.0 do navegador Internet Explorer, acessado via Jscript, VBScript e Javascript ( linguagens suportadas pelo browser). É um objeto ActiveX. Sendo posteriormente implementado de forma nativa para os navegadores Mozilla, Safari e Opera. www.x25.com.br
    • O Objeto XMLHttpRequest No Mozilla e Safari é instanciado da seguinte forma: var objAjax = new XMLHttpRequest(); Internet Explorer e Opera: objAjax = new ActiveXObject("Msxml2.XMLHTTP"); ou objAjax = new ActiveXObject("Microsoft.XMLHTTP"); Dependendo da versão do browser. www.x25.com.br
    • O Objeto XMLHttpRequest Após instanciado, pode-se utilizar as seguintes propriedades do objeto: onreadystatechange – manipulador dos eventos que monitora todas as mudanças de estado. O Valor atribuído a esta propriedade é sempre uma função. Dependendo da versão do DOM suportada pelo navegador, pode-se passar argumentos. ReadyState – Esta propriedade retorna o status do objeto. A propriedade é do tipo Number e os valores retornados são: www.x25.com.br
    • O Objeto XMLHttpRequest 0 - Unintialized. Valor padrão 1 – Open. O Método open() foi chamado com sucesso. 2 – Sent – O método send() foi chamado com sucesso mas ainda não foi retornado nenhum dado. 3 – Receiving – Dados foram recebidos mas ainda não foi completado. 4 – Loaded - A transferência de dados foi completada. responseText – propriedade do tipo string, que retorna os resultado como texto. resposeXML – retorna os dados em formato XML podendo ser manipulado usando DOM. Tipo de dados 'document' www.x25.com.br
    • O Objeto XMLHttpRequest status – esta propriedade retorna o código de status do servidor, ex: 404 para página não encontrada e 200 para OK. Tipo de dados Number statusText – Retorna o status em formato string O Objeto XMLHTTPRequest possui os seguintes métodos: abort() - Aborta a requisição atual. O método é void (sem retorno) getAllResponseHeaders() - Retorna a lista completa dos headers HTTP setados em formato de string. www.x25.com.br
    • O Objeto XMLHttpRequest open(method, uri, async, user, password) – Especifica o méto- do, URL e outros parâmetros opcionais de uma requisição. method – Forma de submissão dos dados ( GET ou POST ) uri – Este parâmetro pode ser uma URL absoluta ou relativa. O alvo deve residir no mesmo servidor web da página que o requisita. async – Especifica se a requisição deve ser assíncrona ou não. Tipo booleano. True ( opção padrão ) indica que o script deve continuar processando após o método send ser chamado sem esperar por uma resposta. False, indica que o script deve esperar www.x25.com.br por uma resposta para continuar.
    • O Objeto XMLHttpRequest user – Especifica um usuário password – Especifica uma senha. send(data) – Envia a requisição. O parâmetro data são os parâmetros passados para o script que fará o processamento. Obrigatório quando o method for POST. Quando for GET, deve- se passar null como parâmetro. setRequestHeader(header, value) – Informa valor a algum header http. www.x25.com.br
    • Interagindo com o PHP Mãos à obra!! Iremos implementar um pequeno exemplo de mural de recados bastante simples, mas que demostra com bastante clareza o funcionamento do AJAX. Utilizaremos um arquivo HTML chamado index.html, um arquivo PHP chamado manipulamural.php e uma classe PHP chamada Mural. Por questão de praticidade, iremos gravar algumas informações em um arquivo texto. O procedimento para gravação em um banco de dados é praticamente o mesmo. www.x25.com.br
    • Interagindo com o PHP (cont.) index.htm <html> <head><title>Mural de recados</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body bgcolor="#FFFFFF" text="#000000" link="#FF9966" vlink="#FF9966" alink="#FFCC99"> <form name="formulario" method="POST"> Autor: <input type="text" name="autor" id="autor"><br><br> Conteúdo: <textarea name="recado" id="recado" cols='40' rows='5'> </textarea><br /> <input type="button" name="submete" id="submete" value="gravar no mural" onClick="javascript:submeteMural();"><br> </form> <br> Mural: <div id="mural"> </div> </body> </html> www.x25.com.br
    • Interagindo com o PHP (cont.) Entre as tags <head> <script language=”javascript”></script></head> no arquivo index.htm, vamos incluir o seguinte código Javascript: var objAjax = null; function criaObjetoAjax() { if(window.XMLHttpRequest) { try { objeto = new XMLHttpRequest(); } catch(e) { objeto = false; } } else if(window.ActiveXObject) { try { objeto = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { objeto = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { objeto = false; } } } return objeto; } www.x25.com.br
    • Interagindo com o PHP (cont.) function verificaStatusMuralLeitura() { if (objAjax.readyState == 4) { if(objAjax.status == 200) { document.getElementById('mural').innerHTML = objAjax.responseText; } else { document.getElementById('mural').innerHTML = "Houve um erro ao recuperar os dados remotos: "+objAjax.statusText; } } } function verificaStatusMuralEscrita() { if (objAjax.readyState == 4) { if(objAjax.status == 200) { document.getElementById('mural').innerHTML = objAjax.responseText; } else { window.alert("Houve um erro ao recuperar os dados remotos: "+objAjax.statusText); } } } www.x25.com.br
    • Interagindo com o PHP (cont.) function lerMural() { objAjax = criaObjetoAjax(); url = "http://localhost/phpajax/manipulamural.php?op=ler"; objAjax.open("GET",url,true); objAjax.onreadystatechange=verificaStatusMuralLeitura; objAjax.send(null); } function submeteMural() { objAjax = criaObjetoAjax(); url = "http://localhost/phpajax/manipulamural.php"; autor = document.getElementById("autor").value; recado = document.getElementById("recado").value; objAjax.open("POST",url,true); objAjax.setRequestHeader('Content-Type','application/x-www-form- urlencoded'); objAjax.send('autor='+autor+"&recado="+recado+"&op=escrever"); objAjax.onreadystatechange=verificaStatusMuralEscrita; } lerMural(); // Recarrega a cada 10000 milissegundo (10 segundos) setInterval("lerMural()", 10000); www.x25.com.br
    • Interagindo com o PHP (cont.) mural.php (Classe Mural) <?php class Mural { private $arquivo; public function __construct() { $this->arquivo = "/opt/lampp/htdocs/phpajax/txt/mural.txt"; } public function lerMural() { $txt = ""; if ($conteudo = file($this->arquivo)) { foreach ($conteudo as $valor) { $dadosMural = explode("<sep>", $valor); $txt .= "<strong>Nome: </strong> {$dadosMural[0]}<br />"; $txt .= "<strong>Data: </strong> {$dadosMural[1]}<br />"; $txt .= "<strong>Recado: </strong> {$dadosMural[2]}<br />"; $txt .= "<p>"; } } else { $txt = "Erro ao abrir arquivo de dados"; } return $txt; } (Continua...) www.x25.com.br
    • Interagindo com o PHP (cont.) public function escreveMural($info) { $autor = $info["autor"]; $recado = $info["recado"]; $data = date("d/m/Y h:i:s"); $fh = fopen($this->arquivo, "a"); if ($fh) { $conteudo = "$autor<sep>"; $conteudo .= "$data<sep>"; $conteudo .= "$recadon"; if (fwrite($fh, $conteudo)) { print "Gravado com sucesso"; } else { print "Erro ao gravar os dados."; exit; } fclose($fh); } else { print 'Erro ao abrir arquivo. '; exit; } } } ?> www.x25.com.br
    • Interagindo com o PHP (cont.) manipulamural.php <?php include_once("/opt/lampp/htdocs/phpajax/classes/Mural.php"); /* * Instanciando classe */ $mural = new Mural(); /* * Verificando se a operação será realizada por GET ou POST */ $operacao = NULL; $operacao = $_POST['op'] ? $_POST['op'] : $_GET['op']; /* * Verifica qual operação será executada. leitura ou escrita */ if ($operacao == "ler") { $textoMural = $mural->lerMural(); print $textoMural." - ".date("d/m/Y h:i:s"); } else { $mural->escreveMural($_POST); } ?> www.x25.com.br
    • Interagindo com o PHP (cont.) Após todos estes arquivos serem criados, execute no seu servidor web o arquivo index.htm, da seguinte forma: (de acordo com a sua estrutura de diretórios no servidor web). http://localhost/phpajax/index.htm Ele deve trazer uma tela com um formulário, que é atualizada a cada dez segundos, trazendo os dados gravados no arquivo. Caso seja gravado algo através dos formulários, os dados são submetidos sem que a página index.htm dê um reload. Ou seja: Com AJAX, arquivos server-side devem gerar conteúdo e arquivos HTML mostram o conteúdo. (mas isso não é regra). www.x25.com.br
    • PHP AJAX Toolkits Frameworks Alguns toolkits PHP que implementam o AJAX: ● Sajax - http://modernmethod.com/sajax ● Xajax - http://www.xajaxproject.com ● Prototype - http://prototype.conio.net/ ● AjaxAgent - http://ajaxagent.org/ ● BackBase - http://www.backbase.com www.x25.com.br
    • PHP AJAX Toolkits Frameworks Segue abaixo exemplo de uso do xajax: <?php require_once("xajax.inc.php"); $xajax = new xajax(); $xajax->registerFunction("minhaFuncao"); function minhaFuncao($arg) { $objResponse = new xajaxResponse(); $objResponse->addAssign("AlgumElementId","innerHTML", $novoConteudo); return $objResponse->getXML(); } $xajax->processRequests(); ?> <html> <head><?php $xajax->printJavascript();?></head> <div id="AlgumElementoId"></div> <button onclick="xajax_minhaFuncao(argumento);"> </html> www.x25.com.br
    • Maiores informações ● X25 – Treinamentos – PHP com AJAX e Webservices (http://www.x25.com.br) ● Nesher Technologies – Consultoria (http://www.neshertech.net) ● Meu site pessoal (http://adler.neshertech.net) www.x25.com.br
    • Perguntas e respostas www.x25.com.br
    • Fim Obrigado pela oportunidade. Espero que o mini-curso tenha atendido às suas expectativas. www.x25.com.br