Plugin Category Show(WordPress) atualizado 0.2
Ajude a Combater o Spam! Clique aqui!
Houve mudanças no banco de dados na versão nova do WP, 2.3.x.
Então lancei a versão 0.2 que está funcionando no wordpress 2.3.x inclusive com a nova função para tags nos posts.
Você pode baixar aqui
wp_catshow0.2.tar.gz
wp_catshow0.2.zip
O Category Show exibe em formato de lista(<ul><li>) seus posts relacionados a categoria ou tag desejada.
Bastante útil para quem quer exibir seus tutoriais, artigos ou simplesmente seus posts de certa categoria.
Modo de uso
É mais fácil ainda usar.
No post seu, onde você quer listar sua(s) categorias é só usar essa sintaxe:
%.%wpcs-CATEGORIA%.%
só que sem o ponto(.) entre os %%. Coloquei se não ele lista as coisas hehe
O nome da categoria não pode ter acentos ou caracteres chatos. Caso sua categoria seja: “Olá tudo bom?“. Use assim:
%.%wpcs-ola tudo bom%.%
lembrando: sem o ponto entre os %%
Versão para WP 2.2.x:
Engatinhando com AJAX e PHP. Parte 3
Ajude a Combater o Spam! Clique aqui!
Depois de um bom tempo estou aqui novamente!
Eu recomendo todos que não viram as partes um e dois do tutorial, que as veja.
Engatinhando com AJAX e PHP. Parte 1
Engatinhando com AJAX e PHP. Parte 2
Nessa 3ª parte, vamos ver como usar Requisição POST.
Vamos para o que interessa!
Criando nosso formulário
Vamos criar um formulário normal.
index.htm
-
<script src="../Ajax.js" type="text/javascript"></script>
-
<script src="postAjax.js" type="text/javascript"></script>
-
<form action="postAjax.php" onsubmit="enviaReq(); return false">
-
-
Entre com suas informações
-
-
Seu nome:
-
<input name="nome" type="text" />
-
Sua Cidade:
-
<input name="cidade" type="text" />
-
<input value="OKA!" type="submit" />
-
</form>
Aqui estamos linkando nossa biblioteca para criar nosso objeto XMLHttp. Caso você não esteja entendendo essa parte, recomendo você ler os dois primeiros artigos.
A unica coisa que é novidade, é o onSubmit alí. Quer dizer que quando o formulário for submetido, vai ser rodado uma função javascript ao invez de enviar diretamente o formulário. Depois é dado um return false para ter certeza que a página não dê refresh.
Requisição POST
A requisição post precisa ser enviada no formato, pelo cabeçalho http:
nome1=valor1&nome2=valor2&...&nomeN=valorN
para isso vamos criar a função que gere esse formato para nós.
Vamos chama-la de criaReqStr()
-
function criaReqStr(oForm){
-
var aPostStr = new Array();
-
-
for(var i = 0; i < oForm.elements.length; i++){
-
var sValor = encodeURIComponent(oForm.elements[i].name);
-
sValor += "=";
-
sValor += encodeURIComponent(oForm.elements[i].value);
-
aPostStr.push(sValor);
-
}
-
return aPostStr.join("&");
-
}
Essa função está assumindo que lhe será informada o objeto do formulário, como argumento. Um array(aPostStr) é criado para guardar cada par de nome-valor. Depois, conforme o numero de elementos do formulário, é concatenado o par nome-valor à variável aPostStr. No final do loop, é retornado a informação dos pares nome-valor corretamente.
Você pode se perguntar: Porque usar esse join() no final sendo que eu posso concatenar tudo direto?
Realmente, seria o mais lógico. Mas cada concatenação, em web-browsers, é muito pesada para o processo, então quanto menos você concatenar melhor.
Fazendo a requisição
Para isso, vamos criar a função enviaReq(), que é bem parecida com a função para a requisição GET.
-
function enviaReq(){
-
var oForm = document.forms[0];
-
var sBody = criaReqStr(oForm);
-
-
var oXMLHttp = criaXMLHttp();
-
oXMLHttp.open("post", oForm.action, true);
-
oXMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-
-
oXMLHttp.onreadystatechange = function (){
-
if(oXMLHttp.readyState == 4)
-
exibeResult(oXMLHttp.responseText);
-
else
-
exibeResult("Ocorreu um erro: " + oXMLHttp.statusText);
-
};
-
oXMLHttp.send(sBody);
-
}
Primeiramente ela seta a referencia do form numa variável(oForm). Depois recebe a string dos pares nome-valor pela função criaReqStr(), lembram?
Em seguida é instanciado o objeto xmlhttp pela função criaXMLHttp().
Depois que está o “tchan” do negócio, no método open() o primeiro parâmetro é “post”, qual requisição queremos fazer. O segundo parâmetro é a página que iremos enviar a requisição, que no caso é o atributo action do formulário. O terceiro parâmetro é true em caso de querer que a requisição seja assíncrona.
Depois é setado um cabeçalho de que a informação está codificada(urlencode). Importante, porque a maioria das linguagens server-side verifica essa codificação para o parsing da informação
Depois é só exibir o resultado no nosso div#divStatus pela função exibeResult():
-
function exibeResult(sTxt){
-
var divStatus = document.getElementById("divStatus");
-
divStatus.innerHTML = sTxt;
-
}
Simples não?
Agora vamos para a parte mais fácil: O server-side.
Criando nosso arquivo PHP
Ele é super simples, muito igual ao no caso da requisição feita pelo método GET.
postAjax.php
-
<?php
-
-
$sNome = $_POST[‘nome’];
-
$sCidade = $_POST[‘cidade’];
-
-
$sStatus = ”;
-
-
/* Exemplo com Banco de Dados MySQL */
-
-
$sStatus = ‘Informação inserida corretamente do banco de dados.’;
-
else
-
$sStatus = ‘Erro ao inserir informações no banco de dados’;
-
-
echo $sStatus;
-
?>
Você percebeu que mudamos o cabeçalho do arquivo para texto normal, usando a função header(). Depois só recebemos as variáveis pelo array global $_POST[].
Inserimos no banco de dados, e em caso de sucesso exibe a mensagem de sucesso. Em caso de erro(banco de dados com problema), exibe a mensagem de erro.
Baixando o tutorial
Para maior proveito do tutorial, baixe o tutorial agora:
post-ajax-php.zip
post-ajax-php.tar.gz
Nessa parte 3 fui bem mais direto ao ponto, agora que todo mundo já sabe o básico de AJAX com PHP né? hehehe
Mas é isso aí. Nas próximas versões do tutorial, vamos ver como fazer um validador de formulário conversando com banco de dados.
Evento: Frameworks de Desenvolvimento com PHP
Ajude a Combater o Spam! Clique aqui!
Galera, tudo beleza?
Desculpe-me pelo tempo sem postar, é que esse ano estou muito ocupado no cursinho e está meio dificil. Mas voltar a postar, não com tanta intensidade.
Mas então, eu fui convidado a participar de um workshop sobre frameworks de php que vai ter em São Paulo(Capital). Estou muito feliz em poder participar desse evento!
Esse evento vai contar com participação de 3 palestrantes: Jhony M. Maseto vai falar sobre Symfony, Elton L. Minetto sobre CakePHP e eu sobrei com o Zend.
Mais informações sobre o evento: Site oficial e PHPBrasil.com.
Conto com a presença de vocês!
Zend Framework para um PHP mais poderoso
Ajude a Combater o Spam! Clique aqui!
Esse tutorial tem como objetivo mostrar para as pessoas que nunca viram nada sobre o ZF(Zend Framework) e estão querendo saber como ele funciona.
Quem já ouviu falar do Zend Framework? Resumidamente a Zend é uma empresa responsável pela manutenção e desenvolvimento do PHP.
A engine de orientação a objetos do php5 foi totalmente reescrita pelo pessoal da Zend.
Mas o que seria um framework?
O framework é um conjunto de classes com objetivo de reutilização de um design, provendo um guia para uma solução de arquitetura em um domínio específico de software. (Wikipedia)
Pode-se dizer que ele seria um conjunto de bibliotecas específicas.
Falando nossa lingua, o framework é um conjuntão de bibliotecas que ajuda em nosso trabalho do dia a dia, e nos trabalhos mais complicados também.
Esse artigo utiliza a versão 0.8 do framework. (dia 28/02/07)
[atualizado]
Versão atual: 1.0.2 (01/09/07)
[/atualizado]
Entendendo o Zend Framework
O Zend Framework segue o padrão MVC - Model View Controller. É um padrão de arquitetura onde separa o GUI, templates, etc(View) da lógica(Model) e do controle(Controller).
Então nele você pode usar a mesma lógica e/ou controle em diversas interfaçes com o usuário.
Usando o Zend Framework
- Faça download dele no site oficial: http://framework.zend.com/download
- Descompacte o arquivo em qualquer pasta. Exemplo: tar zxvf ZendFramework-1.0.2.tar.gz -C ~/
Agora vamos arrumar a estrutura de diretórios necessária para o correto funcionamento do ZF.

PS: a pasta ZF-tutorial fica dentro do DocumentRoot, que é onde fica suas páginas no servidor(padrão do apache: htdocs/ ou /var/www/).
No caso a pasta controllers, models e views estão dentro da pasta app(application, nome sugestivo). publico é onde vai suas outras coisas normais como imagens e css, js e assim por diante. E lib é a pasta onde vai ficar o ZF.
Entre na pasta onde você descompactou o arquivo tarball(.tar.gz), depois entre na pasta library e copie a pasta zend para a sua pasta lib(na ZF-tutorial) do seu sistema. Talvez você precise mudar(ou copiar) como root, aqui no exemplo vou usar sem o root.
-
cd ~/ZendFramework-1.0.1/library
-
cp -Rfv Zend/ documentRoot_do_apache/ZF-tutorial/lib/
Aí depois no diretório lib irá ter lib/Zend, certo?

Configurando o Apache
Primeira coisa que temos a fazer é abilitar o módulo rewrite do apache.
Edite o arquivo de configuração do apache, httpd.conf.
Descomente(tirando o #) a linha onde está escrito:
-
LoadModule rewrite_module modules/mod_rewrite.so
-
AddModule mod_rewrite.c
Defina o AccessFileName (pode ser no final do arquivo):
-
AccessFileName .htaccess
Setar a opção AllowOverride como All.
Trocar as linhas abaixo:
-
#<Directory />
-
# Options Indexes FollowSymLinks
-
# AllowOverride None
-
#</Directory>
por:
-
<directory>
-
Options FollowSymLinks Includes
-
AllowOverride All
-
</directory>
Criando o Bootstrapping
O controller do ZF, Zend_Controller, é feito para suportar websites com urls limpas.
Então, todas as requisições precisam ser feitas diretamente em um arquivo index.php, essa prática é conhecida como bootstrapping.
E para isso precisamos criar alguns arquivos .htaccess.
ZF-tutorial/.htaccess
-
RewriteEngine on
-
RewriteRule .* index.php
-
php_flag magic_quotes_gpc off
-
php_flag register_globals off
Essa RewriteRule quer dizer que para qualquer coisa escrita ele(apache) irá redirecionar para o index.php(que fica dentro do ZF-tutorial, calma que ainda vamos cria-lo). ![]()
Alí também setamos algumas configurações do PHP.ini. Essas configurações provavelmente já estão setadas como padrão, mas é bom ter certeza né. Elas só vão funcionar se estiver habilitado o mod_php no httpd.conf do apache.
Agora vamos setar nosso .htaccess na pasta público. Lá estará os arquivos JavaScript, CSS, imagens e assim por diante. Então vamos habilitar tudo por lá.
ZF-tutorial/publico/.htaccess
-
RewriteEngine off
Agora na pasta app e no lib não queremos que nenhum intruso acesse, porque lá estão nossos arquivos preciosos. ![]()
ZF-tutorial/app/.htaccess
-
deny from all
ZF-tutorial/lib/.htaccess
-
deny from all
Esse esquema de bootstrapping é recomendação dos desenvolvedores do ZF, ok? Motivo de segurança, sabe como é né.
Criando o nosso index.php(bootstrap file)
Agora vamos criar nossa index.php na pasta ZF-tutorial.
ZF-tutorial/index.php
-
<?php
-
error_reporting(E_ALL|E_STRICT); // para mostrar os erros, apenas nos testes(precisa estar setado no PHP.ini)
-
-
// Seta o timezone pra são paulo (>=PHP 5.1)
-
date_default_timezone_set(‘America/Sao_Paulo’);
-
-
/* Seta include path para o funcionamento correto do framework ***OBRIGATÓRIO*** */
-
.PATH_SEPARATOR.‘./app/models/’ //facilitar depois ao loadar as nossos modelos
-
-
/* Necessário para loadar qualquer outra classe do framework ***OBRIGATÓRIO*** */
-
include "Zend/Loader.php";
-
-
//loada o controller front
-
Zend_Loader::loadClass(‘Zend_Controller_Front’);
-
-
/*
-
Essa classe se encontra em Zend/Controller/Front.php
-
Pode ser loadado diretamente pelo nome se preferir
-
-
Para começar nós precisamos loadar primeiro o front controller
-
Ele faz um controle automático para detectar a base URL e fazer o redirecionamento correto
-
*/
-
$controlador = Zend_Controller_Front::getInstance();
-
$controlador->throwExceptions(true); // mostrar excessões(apenas para testes)
-
$controlador->setControllerDirectory(‘./app/controllers’); // seta diretório com nossos controllers
-
-
//Roda o sistema
-
$controlador->dispatch();
-
-
//sem fechar a tag php
Note que agente não fecha a tag php para nos previnir de erros usando o header(), no caso de espaços em branco adicionais depois do ?>.
Agora na pasta controllers vamos criar um IndexController.php. Esse controller vai entrar em ação sempre que o index for chamado.
Para entender como funciona, precisamos saber como o Zend_Controller_Front trabalha.
O ZF usa um sistema de Controllers(Controladores) e Actions(Ações). E isso é setado diretamente na url(lembra do bootstrapping?). Como?
Usando o nosso exemplo, no formato http://localhost/ZF-tutorial/index/teste o index é o Controller e o teste é o Action. Outro exemplo, http://localhost/ZF-tutorial/foo/bar o foo é o Controller e o bar é o Action.
E quando você não coloca nada? Exemplo, http://localhost/ZF-tutorial/ o Zend_Controller_Front considera como index o Controller e index a Action.
O que vem depois é parâmetro, mas isso é assunto pra depois
Vamos fazer nosso IndexController então
ZF-tutorial/app/controllers/IndexController.php
-
<?php
-
class IndexController extends Zend_Controller_Action
-
{
-
public function indexAction()
-
{
-
$this->view->titulo = ‘Primeiro Tutorial de Zend Framework’;
-
$this->view->detalhe = ‘Olá Mundo!’;
-
}
-
}
Atenção: Sempre o controller deve levar esse padrão NomeController.php e a classe com o mesmo nome do arquivo. A primeira letra sempre em maiúsculo e o resto minúsculo.
Já os Actions também deve levar esse padrão nomeAction(), sempre minúsculo.
Mas se você for rodar o sistema agora, vai perceber que vai dar uma excpetion gigantesca aí, certo?
Ela está falando que nós não temos o viewer para o index action do index controller.
Para criar, precisamos acessar a pasta scripts que está no ZF-tutorial/views/. Lá vamos criar uma pasta para cada Controller nosso, no nosso caso iremos criar uma pasta chamada index(por causa do IndexController). Todos os templates para o IndexController devem estar nessa pasta. O mais legal é que o nome do template leva o nome da action.
Calma, vou explicar: Por padrão cada action você pode ter um template ou não, mas se a action for tem um template para ela, então o template deve levar o mesmo nome da action. Por exemplo index.phtml(extenção do template) é o viewer do indexAction(), sacaram?
Na prática agora:
-
cd documentRoot_do_apache/ZF-tutorial/app/views/scripts
-
mkdir index
Agora nós temos que criar o index.phtml
ZF-tutorial/app/views/scripts/index/index.phtml
-
<html>
-
<head>
-
</head>
-
<body>
-
</body>
-
</html>
é recomendável que usemos o escape para escapar tags html.
Agora vamos testar nossa aplicação.
Acesse o http://localhost/ZF-tutorial e depois tente http://localhost/ZF-tutorial/index/index
Você vai perceber que deu no mesmo.
Tarefinha, de leve
Agora deixo uma tarefa para vocês: Criar um zfAction(), no IndexController, com seu respectivo viewer. Após criado, acessem http://localhost/ZF-tutorial/index/zf e vejam o que aconte!
Conclusões
Apesar desse tutorial mostrar de maneira simples como funciona o Zend Framework, podemos perceber como o Zend Frameowork é facil de usar e ao mesmo tempo é poderoso.
Para um maior aprendizado, irei postar um novo tutorial com muito mais recursos do ZF.
Por enquanto eu recomendo um tutorial muito bom(desenvolvedor do ZF), eu me baseei no tutorial dele, e tabmém usem bastante o manual.
Acesse a página de tutoriais do Zend Framework
Cya later!!
Engatinhando com AJAX e PHP. Parte 2
Ajude a Combater o Spam! Clique aqui!
Nesse tutorial vamos fazer nosso primeiro exemplo de AJAX + PHP.
Vamos usar primeiramente o XMLHttp GET Request.
Quem não viu ainda, a parte 1 do tutorial você encontra aqui mesmo.
[update 03/10/07]
Parte 1 do tutorial AJAX + PHP
Parte 3 do tutorial AJAX + PHP
[/update]
Bora lá!!
Criando o Objeto XMLHttp
Vamos mexer um pouco no JavaScript para criar a requisição.
-
function criaXMLHttp() {
-
if (typeof XMLHttpRequest != "undefined")
-
return new XMLHttpRequest();
-
else if (window.ActiveXObject){
-
var versoes = ["MSXML2.XMLHttp.5.0",
-
"MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0",
-
"MSXML2.XMLHttp", "Microsoft.XMLHttp"
-
];
-
}
-
for (var i = 0; i < versoes.length; i++){
-
try{
-
return new ActiveXObject(versoes[i]);
-
}catch (e) {}
-
}
-
throw new Error("Seu browser nao suporta AJAX");
-
}
Primeiro ela testa se o browser suporta o XMLHttpRequest e cria se o suportar.. se não ele cria um array com várias versões do XMLHttp para browsers mais antigos(IE). E fica em um loop até conseguir criar um objeto, se não criar nenhum ele retorna a mensagem de erro.
Resumindo: a função testa as possibilidades do browser de criar o objeto XMLHttp. Se for o IE 6.0 ele cria o MSXML2.XMLHttp.5.0 e assim por diante.
Usando o XMLHttp
O objeto XMLHttp tem um método que a mais imporante, a open(). Ela tem 3 parâmetros que precisamos saber:
- Tipo da requisição: sintrg que indique o tipo: get ou post
- URL: string com a url que você quer fazer a requisição
- Async: boolean que indica se o modo da requisição seja feito assincronamente(não sei escrever essa palavra
)
O ultimo parâmetro é o mais importante.. ele que vai dizer se a sua requisição é AJAX mesmo ou não. Se ele for true, a requisição é feita em tempo real. Já se você colocar false, a requisição é feita e o resto da página só é loadada quando a requisição retornar algo ou terminar.
Exemplo:
-
var XMLHttp = criaXMLHttp();
-
XMLHttp.open("get", "info.txt", true);
Outro evento importante no XMLHttp é o onreadystatechange. O XMLHttp tem uma propriedade chamada readyState que muda conforme a requisição é recebida. Existem 5 estados para o readyState:
- 0(Não Iniciado): O Objeto foi criado mas o método open() não foi chamado ainda.
- 1(Carregando): O método open() foi chamado mas a requisição não foi enviada ainda.
- 2(Carregado): A requisição foi enviada.
- 3(Incompleto): Uma parte da resposta do servidor foi recebida.
- 4(Completo): Todos as informações foram recebidas e a conexão foi fechada com sucesso.
Toda vez que a propriedade do readyState for mudada, o evento onreadystatechange é disparado. Por causa das diferentes implementações dos browsers, a propriedade do readyState não funciona corretamente em todos os browsers. O unico modo para cross-browser é usando o valor 0, 1 e 4 para o readyState. Mas na maioria dos casos você usará apenas o estado 4 mesmo.
Depois de tudo isso temos que realmente enviar a requisição com o método send(). Quando utilizamos a requisição por GET nós não precisamos passar nenhum parâmetro no send(). Depois quando vermos com POST aí iremos usar mais profundamente. ![]()
Exemplo:
-
var XMLHttp = criaXMLHttp();
-
XMLHttp.open("get", "info.txt", true);
-
XMLHttp.onreadystatechange = function () {
-
if (XMLHttp.readyState == 4)
-
alert("EEE primeiro teste com AJAX!! :)");
-
};
-
XMLHttp.send();
Tá bom, mas e agora? Enviei tudo, recebi e pronto. Cadê minha informação?
Ta certo, agora é bem simples, existe uma propriedade no XMLHttp que ele tem o retorno do http request, o responseText(no nosso caso, poderia ser responseXML). Lembram da primeira parte do tutorial? Então, agora vamos usar ela.
Primeiro vamos testar se a informação retornada veio com sucesso (200). Para testarmos o status do retorno existe a propriedade status do XMLHttp. Tudo muito simples não? Então olha o exemplo:
-
if (XMLHttp.status == 200)
-
alert("O retorno foi: " + XMLHttp.responseText);
-
else
-
alert("O retorno foi: " + XMLHttp.statusText);
Beleza. Até aí vimos exemplo bem bobos, apenas para intendermos como funciona as coisas.
Agora sim vamos ver como fica uma aplicação com AJAX e PHP.
Já temos a função que retorna o Objeto XMLHttp, então vamos fazer a partir dela.
Agora vamos para o código HTML.
Criamos duas divs. Uma vai exibir o resultado e outra vai ser o campo onde você coloca o id para fazer a pesquisa.
Agora, na função lerId() temos que pegar o valor do campo id e enviar ele na requisição usando GET e depois disso, recebemos o valor e exibimos na div resultado.
Fica assim:
-
function lerId() {
-
var id = document.getElementById("id").value;
-
var divInfo = document.getElementById("resultado");
-
var XMLHttp = criaXMLHttp();
-
XMLHttp.open("get", "lerId.php?id=" + id, true);
-
XMLHttp.onreadystatechange = function () {
-
if (XMLHttp.readyState == 4)
-
if (XMLHttp.status == 200){
-
divInfo.innerHTML = XMLHttp.responseText;
-
} else {
-
divInfo.innerHTML = "Um erro ocorreu" + XMLHttp.statusText;
-
}
-
};
-
XMLHttp.send(null);
-
}
Como já vimos como funciona a requisição XMLHttp não vamos ter muita dificuldade de entender essa. A unica diferença com o exemplo é que nós passamos um parâmetro para a página pegaId.php e exibir o resultado no div resultado.
Agora vamos criar a página pegaId.php que irá ler o id enviado pela requisição Http e retornar o status.
lerId.php:
-
<?php
-
// mudamos o tipo de arquivo.. ao invez de php irá retornar um texto normal
-
// recebe o id que veio pelo parametro usando o método GET
-
$id = $_GET["id"];
-
$resultado = "";
-
// isso agora é um exemplo, você tem que aplicar a conexão e a consulta sql à sua necessidade
-
$BDUsuario = "seu usuario ou root";
-
$BDSenha = "senha do usuario";
-
$BDServidor = "localhost normalmente ou o servidor de banco de dados";
-
$BancoDeDados = "nome do seu banco de dados";
-
if ($resultado = $mysql_fetch_array($sql))
-
$resultado = "ID Encontrado
-
\n
-
Nome: " . $resultado[‘nome’];
-
echo $resultado;
-
?>
Agora o seu primeiro programa com AJAX está escrito.. bem simples não?
Ele só recebe o id que veio por GET, procura no banco de dados, e exibe o nome da pessoa referente ao id(exemplo apenas)..
A unica coisa que pode ficar meio no ar é a questão do header e do echo no final. O header serve para fazer com que o retorno do arquivo fique em formato texto e não em outro tipo(como html, php). Pois nós usamos o XMLHttp.responseText. Se você colocar alguma tag html, na pagina principal, onde o script é rodado, irá funcionar o html, pois a página é html. Agora se você rodar o lerId.php ele irá exibir como se fosse um texto normal.
O echo serve apenas para exibir o resultado. Todo o resultado que você quer que seja exibido no cliente você tem que exibir em seu script php, pois o XMLHttp.responseText pega justamente o que a página php(server-side) exibe, no caso um texto.
Terminamos por hoje nossa aula de AJAX com PHP parte 2.
Na proxima aula vamos ver como funciona a requisição pelo método POST.
Dúvidas podem comentar.
Abraços
Engatinhando com AJAX e PHP. Parte 1
Ajude a Combater o Spam! Clique aqui!
Esse é meu primeiro tutorial sobre AJAX e espero que não seja o único.
[update 03/10/07]
Parte 2 do tutorial AJAX + PHP
Parte 3 do tutorial AJAX + PHP
[/update]
Como esse tutorial é bem básico, para quem está começando com AJAX, eu vou esplicar explicar coisas bem básicas. Desde como funciona o protocolo HTTP e um exemplo de AJAX.
Para que você possa usufruir ao máximo do tutorial, você necessita de conhecimentos de HTML, JavaScript e PHP.
Vamos ver aqui então: Como funciona um HTTP request, um HTTP response, técnicas utilizadas e como comunicar o cliente com o servidor.
HTTP Resquests
O formato de um HTTP request é assim:
<requeste-line>
<headers>
<blank line>
[<request-body>]
A primeira linha(<requeste-line>) necessita da indicação do tipo do request, diretório de acesso eda versão do HTTP. Já no <headers> indica informações adicionais para o server. Depois a <blank line>, é seguida do <request-body> que é opcional.
Não vou ficar explicando muito aqui, pois não é o foco do nosso tutorial. Agora vou mostrar um exemplo prático de como o browser envia o HTTP request:
GET /?cod=1 HTTP/1.1
Host: www.felipetonello.com
User-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1) Gecko/20060601 Firefox/2.0 (Ubuntu-edgy)
Connection: Keep-Alive
Explicando resumidamente: Na primeira linha vimos que usamos o tipo GET seguido da / quer dizer que irá acessar ao diretório root do server com o parametro cod=1 e em seguida da versão do HTTP. Depois os cabeçalhos que são auto-explicativo.
Quem usa PHP a um tempo conhece bem esses headers.
Então vimos como o browser se comunica com os servidores por meio do HTTP(Hypertext Transfer Protocol).
HTTP Responses
Agora vamos ver como o servidor responde, quando recebe um request, por meio do HTTP.
<status-line>
<headers>
<blank line>
[<response-body>]
O formato é bem parecido, apenas muda a primeira e ultima linha. Na primeira linha ele retorna a versão do HTTP e o status da resposta. Já na ultima ele retorna o corpo da resposta. Exemplo:
HTTP/1.1 200 OK
Date: Sat, 11 Nov 2006 23:59:59 GMT
Content-Type: text/html;charset=UTF-8
Content-Length: 122
<html>
<head>
<title>Felipe Tonello</title>
</head>
<body>
<!-- Aqui vem o corpo -->
</body>
</hmtl>
Na primeira linha temos a versão do HTTP em seguida do status(200). Os cabeçalhos e depois a resposta que no caso foi como um text/html.
Os status mais comuns são:
- 200 (OK): arquivo encontrado com sucesso.
- 304 (NOT MODIFIED): O arquivo não foi modificado desde o ultimo request. Isso é mais utilizado em browsers com mecanismos de cache.
- 401 (UNAUTHORIZED): Cliente não tem autorização para acessar o arquivo. Normalmente isso irá fazer com que o browser pergunte por usuário e senha para logar no servidor.
- 403 (FORBIDDEN): O Cliente falhou na autorização. Normalmente acontece quando você falha na autorização depois de um erro 401.
- 404 (NOT FOUND): Quando o arquivo não existe na localização informada.
Nesse tutorial vocês entenderam como funciona o protocolo HTTP para se comunidar entre servidor e cliente.
Para não ficar muito grande vou separar em 2 partes. Na proxima parte vamos ver um exemplo de comunicação cliente-servidor usando AJAX.
Até mais. ![]()
Instalando LAMPP(Linux + Apache + MySQL + PHP + Perl). Mais facil impossivel!
Ajude a Combater o Spam! Clique aqui!
Alguns programadores sabendo da “dificuldade” para instalar o lampp (compilar mysql, php etc..) criaram um XAMPP.
Resumindo ele é um programa q instala tudo que falei no tópico, Apache, MySQL, PHP e Perl, fora as bibliotecas mais usadas e etc…
Vamos lá..
Primeiro baixe a ultima versão do download do xampp(no caso 1.6.4):
http://www.apachefriends.org/download.php?xampp-linux-1.6.4.tar.gz
depois abra o terminal e digite:
sudo tar xvfz xampp-linux-1.6.4.tar.gz -C /opt
só utilize este comando para instlar, não use nenhum outro descompactador nada…
e se você ja tiver instalado xampp outra vez, ele sobre escreve…
ele vai instalar tudo na pasta /opt/lampp
