Como Criar Sites | Aprenda grátis como fazer seu site » php

Criando layout tableless (div), com Ajax.

Raoni Novellino — Tue, 05 Jan 2010 20:09:39 +0000

Vamos fazer um site com Ajax, e para quem não souber o que é Ajax, vai um breve comentário.

Ajax significa Asynchronous Javascript And XML. Quer dizer que Ajax nada mais é do que uma capacidade (ferramenta, biblioteca), de fazer com que, em Javascript, eu possa fazer requisições HTTP (e, dependendo do navegador, posso fazer outros tipo de conexões). As requisições que o Ajax faz, podem ser síncronas ou assíncronas. Se for síncrona, o script ficará esperando o retorno da requisição para continuar a executar o seu código. Se for assíncrona, o script enviará a requisição e continuará a sua execução normalmente, e o retorno dessa requisição deverá ser tratado por uma outra função.

O XML nem sempre é usado para trafegar as informações em Ajax, mas como o nome já pegou, então ficou assim mesmo, mas podemos utilizar qualquer tipo de protocolo texto (como JSON), para trafegar as informações via Ajax.

O principal motivo para desenvolver uma página (web site) com Ajax, é faze-la ficar mais interativa com o usuário, mais dinâmica e criativa.

Para saber um pouco mais sobre Ajax, acesse AJAX (programação).

O Código HTML do Layout em Div

Vamos pegar o layout do post Definindo um Layout de Website sem Tabelas (Tableless), e retirar a parte mais a direita dele, para que a parte do meio do layout, contenha somente o menu e o miolo.

O código ficará como abaixo (arquivo index.html):





Exemplo Estrutura de Site Tableless









	
		Logo

		Aqui pode ser uma imagem de background e um texto.
	

	
		
			
				Principal
				Empresa
				Produtos

				Serviços
				Contato
			
		

		
			Seção 1
			Seção 2

			Seção 3
		

		
	

	
		
			Av. xxx yyy zzz, No 765

			Manaus - AM - CEP: 89000-000

			Email: seuemail@seudominio.com.br

Maiores explicações sobre o layout, pode encontrar no link passado para o post.

As únicas mudanças foram a parte direita do layout que foi deletada, os menus agora são links (tag com atributo onclick para chamada do Javascript), e foi inserida uma linha chamando o script script.js. Esse script contém a programação em Javascript para fazer a requisição em Ajax.

Uma outra mudança foi no arquivo de folhas de estilo estilo.css. Ele está sem os estilos da parte direita do layout e foi adicionado uma classe, para a frase que indica que o Ajax está carregando uma página, no nosso caso, a frase é simplesmente “Carregando…”, mas a classe está vazia, adicione os estilos que achar necessário.

O Código Javascript

O código Javascript precisa fazer tudo que o navegador faz automáticamente quando se coloca um link no web site: enviar a requisição, esperar pela resposta, pegar a resposta quando essa estiver pronta, tratar a resposta e exibir o que for necessário.

O código do arquivo script.js vai abaixo:

function getNewHttpRequest() {
	try {
		xmlhttp = new XMLHttpRequest();
	} catch(ee) {
		try {
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch(e) {
			try {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch(E) {
				xmlhttp = false;
			}
		}
	}

	return(xmlhttp);
}

oAjax = getNewHttpRequest();

//Fila de conexões
fila = [];
ifila = 0;

// funcao para altear o conteudo do miolo
function ajaxHTMLmiolo(id, conteudo) {
	ajaxHTML(id, 'conteudo.php?conteudo='+conteudo);
}

//Executa a próxima conexão da fila
function ajaxRun() {
	//Abre a conexão
	oAjax.open("GET", fila[ifila][1], true);
	//Função para tratamento do retorno
	oAjax.onreadystatechange = function() {
		if (oAjax.readyState == 4) {
			//Mostra o HTML recebido
			retorno = unescape(oAjax.responseText.replace(/\+/g, " "));
			document.getElementById(fila[ifila][0]).innerHTML = retorno;
			//Roda o próximo
			ifila++;
			if(ifila < fila.length) setTimeout("ajaxRun()", 20);
		}
	};

	//Executa
	oAjax.send(null);
}

function ajaxHTML(id, url) {
	//Carregando...
	document.getElementById(id).innerHTML=""+"Carregando...";
	//Adiciona à fila
	fila[fila.length] = [id, url];
	//Se não há conexões pendentes, executa
	if((ifila+1) == fila.length) ajaxRun();
}

Agora vamos as explicações.

Começando pela função getNewHttpRequest, que não recebe parâmetro, e retorna um objeto XMLHTTP. Esse objeto é o responsável pelas requisições que iremos fazer. Os blocos try {…} catch() {…}, tentam pegar o objeto XMLHTTP de várias formas, por causa das várias formas de pegar esse objeto de navegadores diferentes. Se não conseguir nenhuma, retorna false.

Abaixo pego o objeto XMLHTTP e coloco na variável oAjax e logo abaixo defino as minhas variáveis da fila de requisições.

Por que uma fila de requisições?

Tenho uma fila de requisições para organizar as minhas requisições Ajax, pois sem ela, se o usuário clicar em vários links antes de esperar a resposta de uma requisição, ou eu tenho que instanciar vários objetos do Ajax (XMLHTML), ou vai dar um erro no script que executa a requisição, quando uma outra requisição é feita antes de esperar a primeira terminar. A fila resolve esse problema, pois somente uma requisição é feita por vez, e se houver outra requisição na fila, ela é chamada logo após a requisição atual terminar.

A função ajaxHTMLmiolo serve para fazer uma requisição em Ajax que pega o conteúdo do miolo da página, que é o conteúdo da tag div que tem o atributo id igual a miolo, nesse layout é onde o conteúdo do web site será exibido. Essa função recebe dois argumentos, o primeiro é o id do elemento que vai ser exibido o resultado da requisição, o segundo é uma string que é enviada para o servidor para saber qual conteúdo buscar para exibir. Ela chama a função genérica de requisição Ajax, a ajaxHTML, que recebe o id do elemento que vais ser alterado e a URL que vai ser requisitada.

A função ajaxHTML coloca uma requisição na fila de requisições e tenta fazer essa requisição, se a fila estiver vazia, chamando a função ajaxRun, se não estiver vazia, ela não faz nada, pois assim que for a vez da requisição colocada, ela será feita.

A função ajaxRun pega a requisição que está na vez, na fila de requisições, e a executa, pelo método GET. A linha

	oAjax.open("GET", fila[ifila][1], true);

diz que é para abrir a conexão com a URL que está na fila, pelo método GET. O último parâmetro quer dizer que essa requisição tem que ser feita pelo modo assíncrono. Se o último parâmetro for false, a requisição seria feita no modo síncrono.

Para saber mais sobre o método GET, acesse Como Funciona os Métodos GET e POST – Diferenças.

Na linha

	oAjax.onreadystatechange = function() {

estou informando ao objeto que a função seguinte é a função que eu quero que ele execute quando o estado da minha requisição mudar. Essa função normalmente é chamada de função de callback, ela fica esperando algum evento acontecer para executar, sem interromper a execução do código. Nesse caso, ela espera o evento de alteração de estado da requisição ocorrer para ser chamada, logo, ela provavelmente será chamada mais de uma vez, pois durante uma requisição o estado muda algumas vezes.

Essa função de callback vai testar se o estado atual da requisição é o estado que eu quero, com a linha:

		if (oAjax.readyState == 4) {

O estado do objeto Ajax que eu quero é igual a 4, que é o estado onde a resposta foi lida por completo. Para ver uma lista dos estados do objeto Ajax, acesse XMLHttpRequest.

Após a resposta estar pronta, eu a pego e coloco em uma variável, fazendo uma substituição de todos os sinais de “mais” (’+'), por um espaço em branco. Se faz essa substituição, pois a resposta vem codificada como URL, e nessa codificação, os espaços são convertidos em sinais de “mais” (’+'). A linha que faz isso é a linha abaixo:

		retorno = unescape(oAjax.responseText.replace(/\+/g, " "));
		document.getElementById(fila[ifila][0]).innerHTML = retorno;

A outra linha pega o elemento que tem o atributo id igual ao que foi passado para a requisição e coloca a resposta como conteúdo desse elemento, no caso do elemento em questão (div), faz o conteúdo ser exibido, mas pode ser feito para qualquer tipo de conteúdo, até um campo hidden (escondido) ou para preencher um selectbox.

		ifila++;
		if(ifila < fila.length) setTimeout("ajaxRun()", 20);

As linhas acima fazem o controle da fila, a primeira incrementa a posição da fila, fazendo a próxima requisição ser lida, se houver. A segunda linha verifica se o tamanho da fila é maior que a posição atual de leitura da fila, se for, é porque ainda existe requisição a ser feita, então ele programa um timer para em 20 milisegundos, para ser executada essa requisição.

Aqui termina a função de callback, ela será executada após o envio da requisição.

A última linha da função ajaxRun

	oAjax.send(null);

faz com que a requisição seja feita (enviada). O parâmetro dela, passado como null, indica que não estou enviando nada na requisição, porque já enviei o que eu queria pela URL passada.

O Código PHP

O código em PHP serve para fornecer o conteúdo requisitado pelo Ajax, perceba que a nossa URL da requisição Ajax tem como endereço o arquivo conteudo.php, lá na função ajaxHTMLmiolo, e o código desse arquivo (conteudo.php), vai abaixo:

Ele simplesmente pega o valor do “conteudo”, que foi passado pelo método GET (olha novamente a URL passada na função ajaxHTMLmiolo), e compara com as strings acima. Cada if faz ele colocar na variável $fileToRead um caminho para um arquivo. Na penúltima linha ele joga todo o conteúdo do arquivo para a variável $conteudoArquivo, e na última linha ele codifica para URL e imprime na “tela” com a função print. A impressão na tela, é a resposta que o Ajax pega. QUALQUER coisa que você imprima na tela, vai ser o retorno da sua requisição Ajax, até mesmo se der um erro no script PHP, caso esteja configurado para exibir o erro na tela, o Ajax vai pegar como retorno.

Não vou colocar o conteúdo dos arquivos HTML de resposta, mas você pode ver o exemplo todo rodando em http://www.comocriarsites.com/exemplos/SiteTablelessAjax/. Lá você mesmo pode pegar os arquivos HTML.

Iniciando programação HTML/PHP – Ferramentas

Raoni Novellino — Tue, 29 Dec 2009 19:25:14 +0000

Para tem um bom início com programação HTML/PHP, devemos ter boas ferramentas de trabalho e também saber do que precisamos para começar.

Esse post vai explicar um pouco sobre cada programa necessário para o desenvolvimento em PHP.

O PHP – Hypertext Preprocessor

Para programar em PHP, assim como em qualquer outra linguagem, precisamos do “compilador”, ou no caso do PHP, que é uma linguagem script, precisamos do processador do script, que executa o código fonte. Esse processador é o próprio PHP, Hypertext Preprocessor, ou Pré-Processador de Hipertexto, que processa dados vindo de páginas Web em um servidor.

O PHP pode também ser executado em uma linha de comando, e também pode ser usado para aplicações desktop (PHP/GTK), mas esse post se limitará a falar sobre o PHP executando em um servidor, processando páginas Web (Web Sites).

O PHP pode ser baixado em http://www.php.net ou http://www.php.net/downloads.php para ir direto a página de downloads.

No momento da escrita desse post, a última versão do PHP é a 5.3.1. Para baixar para o Linux, pegue o código fonte e compile. Para o Windows, o PHP se dividiu em Thread-Safe e Non-Thread-Safe, e também em 2 versões de compiladores diferentes, uma com o Visual Studio 6 (VC6) e outra com o Visual Studio 2008 (VC9).

Se você está usando o Apache no Windows, utilize a versão VC6, que é a compilada no Visual Studio 6. Se você estiver utilizando o IIS – Internet Infomation Service, que é o servidor HTTP da Microsoft, utilize a versão do VC9 do PHP. Esse post não vai mostrar como instalar o PHP no IIS e recomendação é utilizar o Apache HTTP Server.

A diferença entre as versões Thread-Safe e Non-Thread-Safe podem ser vistas em Difference between PHP thread safe and non thread safe binaries, mas basicamente, a versão Non-Thread-Safe, serve para deixar o PHP mais rápido em servidores HTTP para Windows, leia o artigo do link.

O Servidor HTTP – Apache

O PHP por si só, não serve como servidor de páginas da Web (Servidor HTTP), ele precisa ser instalado em um servidor HTTP para funcionar para esse propósito. Um dos servidores mais conhecidos no mercado é o Apache, da Apache Software Foundation, e ele é open-source, ou seja, tem o código-fonte aberto, para que quiser, poder baixar o fonte e modifica-lo ao seu bel prazer.

Para baixar o Apache HTTP Server, você deve entrar em http://www.apache.org ou http://httpd.apache.org para ir direto ao projeto do servidor HTTP.

O Apache HTTP Server tem 3 versões estáveis, no momento da escrita desse post: a versão 1.x.x (atualmente 1.3.41), a versão 2.0.x (atualmente 2.0.63) e a versão 2.2.x (atualmente 2.2.14). Todas essas versões funcionam muito bem. Eles mantem essas 3 versões por questão de compatibilidade com vários outros programas que utilizam uma dessas versões mas não utilizam as outras.

Eu recomendo baixar a versão 2.2.x, ela está bem legal e nunca me deu problema. Baixe o pacote binário com instalador MSI para Windows, e para o Linux, baixe o código fonte e compile, ou utilize alguma ferramenta (APT ou algo similar, dependendo do seu Linux), para instalar o apache.

Eclipse IDE PDT – PHP Development Tools

O Eclipse IDE para PHP é uma ferramenta muito boa, tanto para escrever o código PHP, quanto para o HTML, CSS e Javascript. Ele tem um extra: pode fazer debug de código PHP.

Você pode baixar ele em http://www.eclipse.org/pdt/, ou a versão dele com o Zend em http://www.zend.com/community/pdt?ecl=EclipseZend.

O Eclipse é só descompactar e começar a usar, criar um projeto e já pode rodar com CTRL+F11.

O Banco de Dados MySQL

Se você precisa de um banco de dados confiável, rápido e robusto, o MySQL é a solução. Ele tem o código aberto também, então você pode baixar e, se precisar de uma nova funcionalidade, é só meter a mão na massa.

O MySQL pode ser baixado em http://www.mysql.com/, a versão da comunidade.

Para gerenciar o MySQL, eu recomendo o SQLyog, que é um frontend para o MySQL muito bom. Ele tem uma versão FULL e uma versão da comunidade. A versão da comunidade já faz muita coisa, mas para quem quer realmente trabalhar com o MySQL, a versão FULL vale a pena. Ele pode ser baixado em http://webyog.com/en/.

Com esse conjunto de ferramentas, você estará muito bem armado para programar em PHP, rápido e fácil.

Fazendo Formulário HTML (Como Fazer Fomulário HTML) – Form

Raoni Novellino — Tue, 29 Dec 2009 15:41:12 +0000

Para que serve um formulário? Um formulário serve para o usuário interagir de alguma forma com o site, enviando informações, escolhendo ou selecionando certas funções do site ou entrar em contato com o criador ou dono do site.

Como posso fazer um fomulário HTML? O HTML tem alguns elemento que ajudam na criação de formulários e na interação usuário-website. Esses elemento apresentam diversas formas de apresentar ao usuário informações que o site quer que o usuário preencha, selecione ou marque. Para quem programa em outras linguagens, os elementos HTML para fazer formulário são os padrões, de caixa de texto, seleção de um ou vários em uma lista, marcar opções e também escrever textos em várias linhas.

Vamos ver como fazer o elemento Form (tag

Vamos ver alguns atributos da tag de fomulário

Action

- O atributo action da tag diz para onde o formulário deve ser enviado. O valor desse atributo é o endereço, estático ou relativo, de onde está a página que vai tratar esse formulário.

Method

- O method diz como enviar os dados do formulário, pode ser pelo método GET ou POST. Se você não especificar o método (atributo method), o padrão é o GET.

Para saber mais sobre os métodos GET e POST acesse Como Funciona os Métodos GET e POST – Diferenças.

Name

- Esse atributo nomeia o fomulário , fazendo ele poder ser identificado por folhas de estilo e scripts (como Javascript). Esse atributo está em desuso, é utilizado somente para compatibilidade com códigos HTML antigos e os códigos HTML novos devem utilizar o atributo id.

Id

- Esse atributo pode ser utilizado em qualquer elemento HTML, ele define uma identificação única para o elemento HTML e deve ser único em um documento.

Target

- Indica onde o resultado da submissão do formulário HTML será exibida. Pode ser o nome de um frame (ou iframe, tag ), ou uma janela, ou uma dessas seguintes constantes:

– _blank – O resultado do formulário HTML é exibido em uma janela nova e sem nome. alguns navegadores deixam a opção para o usuário, de exibir esse resultado em uma nova aba.

– _self – Exibe a página referenciada na mesma página ou no mesmo frame que o link ou formulário está. Essa é a opção padrão.

- _parent – Exibe a página referenciada no frame pai do frame que o link ou formulário está. Se o frame não tiver frame pai, essa opção fica igual a opção “_self“.

- _top – Exibe a página referenciada na tela inteira do navegador, cancelando qualquer frame que a página anterior continha.

Enctype

- Esse atributo diz como o formulário HTML vai codificar os dados enviados. Se você não quiser enviar nenhum arquivo (upload) para o servidor, você pode não colocar esse atributo no seu formulário HTML (form), que ele vai ficar com o valor padrão, que vai funcionar normal.

Os valores para esse atributo podem ser:

- application/x-www-form-urlencoded – Esse é o valor padrão, se você quiser saber como os dados são codificados, entre em http://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.1.

- multipart/form-data – Se você quer fazer envio de arquivos (upload), via formulário HTML, você deve utilizar esse valor para o atributo Enctype. O valor padrão não é suficiente para enviar grandes quantidades de dados binários. Esse valor deve ser utilizado quando desejas enviar arquivos, dados binários ou caracteres não ASCII.

Para outros valores desse atributo, consulte: http://www.w3.org/TR/html401/types.html#type-content-type.

Accept

- Esse atributo define quais tipos de conteúdo (content types), que o servidor vai processar corretamente. Colocam-se os tipos separados por vírgula.

O atributo accept especifica que tipos de arquivos (), o navegador deve filtrar, para não enviar arquivos para o servidor que não seja correspondente a um dos tipos especificados nesse atributo.

Se você quiser uma lista dos tipos (MIME types) de conteúdo, entre em: http://www.w3.org/TR/html401/references.html#ref-MIMETYPES e em: http://www.iana.org/assignments/media-types/

Accept-charset

- Esse atributo define qual tipo de codificação de caracteres (charset) o servidor vai identificar os dados enviados pelo formulário HTML.

Para ver uma lista de codificação de caracteres (charset), acesse: http://www.w3.org/TR/html401/references.html#ref-CHARSETS.

Até a data de escrita desse post, e mesmo sem testar, o Internet Explorer não aceita esse atributo.

Exemplo de Formulário HTML ()

Vamos ver um exemplo simples do uso de formulário HTML. O exemplo irá mostrar alguns campos, onde todos devem ser preenchidos para o envio do formulário. Se algum campo não for preenchido, aparece uma mensagem de erro no campo que não foi preenchido.

O nosso arquivo para executar esse código é o contato.php.

O Arquivo contato.php.

Nesse arquivo temos o nosso código PHP que processa o fomulário HTML quando ele é enviado.

 0) { // o formulário foi enviado
	$nome = $_POST["nome"];
	$email = $_POST["email"];
	$telefone = $_POST["telefone"];
	$departamento = $_POST["departamento"];
	$mensagem = $_POST["mensagem"];

	if((strlen($nome) > 0) && (strlen($email) > 0) && (strlen($telefone) > 0) &&
		(strlen($departamento) > 0) && (strlen($mensagem) > 0)) { // todos os dados preenchidos
		print("Dados do Formulário:
");
		print("Nome:".$nome."
");
		print("Email:".$email."
");
		print("Telefone:".$telefone."
");
		print("Departamento:".$departamento."
");
		print("Mensagem:".$mensagem."
");
	}
	else { // nem todos os dados preenchidos, voltar para o formulário
		// dizer em msg de erro o que falta no formulário
		if(strlen($nome) == 0)
			$erro_nome = "O campo Nome deve ser preenchido";
		if(strlen($email) == 0)
			$erro_email = "O campo Email deve ser preenchido";
		if(strlen($telefone) == 0)
			$erro_telefone = "O campo Telefone deve ser preenchido";
		if(strlen($departamento) == 0)
			$erro_departamento = "O campo Departamento deve ser preenchido";
		if(strlen($mensagem) == 0)
			$erro_mensagem = "O campo Mensagem deve ser preenchido";

		// colocando o departamento selecionado como selecionado
		$$departamento = "selected=\"true\"";

		require("contatoform.php");
	}
}
else { // o formulário não foi enviado
	require("contatoform.php");
}

?>

Onde tem a chamada do array $_POST, pegamos os dados enviados do formulário, pelo método POST. Para pegar os dados enviados pelo método GET, utilizamos o array $_GET. No nosso exemplo, somente enviamos dados pelo método POST, então somente utilizaremos o array $_POST.

No array $_POST, temos todos os nomes das variáveis que enviamos do formulário, como chaves do array (array associativo), e seus valores como os valores do formulário. Se temos um campo tipo text, com nome “email” (name=”email”), e enviamos esse formulário pelo método POST, teremos no PHP, o array $_POST["email"] com o valor do que foi escrito no campo email.

No nosso exemplo, se o formulário foi enviado, ele pega todos os valores que foram enviados e testa, para ver se algum está em branco (com número de caracteres igual a zero). Se todos estiverem preenchidos, o programa mostra eles na tela. Se algum não tiver sido preenchido, o programa testa para ver quais não foram preenchidos e seta uma mensagem de erro personalizada para cada campo não preenchido, e volta a mostrar o fomulário.

A linha que faz o campo selecionável (selecbox) ficar como estava quando foi enviado, merece um pouco mais de explicação. A linha é a seguinte: $$departamento = “selected=\”true\”";. Ela está simplesmente, colocando na variável com o nome do valor da variável $departamento, o valor “selected=\”true\”". Por exemplo, se a minha variável $departamento for igual a “comercial”, depois de executar essa linha, eu terei uma variável $comercial com o valor igual a “selected=\”true\”". Isso tudo para, no arquivo HTML, eu poder selecionar automaticamente o que foi estava selecionado no fomulário, no campo de seleção (selectbox). Vamos entender isso mais a frente.

O Arquivo contatoform.php.

Nesse arquivo tem o nosso formulário em HTML e um pouco de PHP para deixar o formulário mais dinâmico.

Exemplo de Formulário HTML/PHP
Nome:

Email:

Telefone:

Departamento:

Mensagem:

<?php echo($mensagem); ?>

/

Esse arquivo simplesmente define 5 campos e um botão de submeter o formulário, sendo que um desses campos é um campo selecionável (selectbox).

Todos eles tem no atributo value, um trecho de código em PHP, por isso precisamos que a extensão desse arquivo seja reconhecida como extensão para processamento do PHP. Esse trecho serve para definir no formulário HTML, caso de erro, o que o usuário já tinha escrito antes, porque sem isso o fomulário viria todo em branco novamente, e isso é ruim, pois se eu errei somente uma coisinha no fomulário, e ele voltar em branco, terei que preenche-lo todo novamente.

No caso do selecbox, eu tenho que fazer com que a seleção do usuário volte a aparecer se o formulário der erro, então coloco um trecho PHP exibindo uma variável com o nome do value da opção (option) em questão, para no script de processamento, ele tratar isso, como foi explicado no arquivo contato.php.

Podes perceber que tenho várias classes de folha de estilo no documento, e o documento também chama um arquivo de folha de estilo, que eu colocarei somente para mostrar a mensagem de erro em destaque.

O Arquivo estilo.css

Esse arquivo é bem simples, abaixo o código:

.msg_erro { color: red; font-weight: bold; }

Com essa classe eu destaco as minhas mensagens de erro.

O Exemplo Pronto

Você pode ver esse exemplo pronto em http://www.comocriarsites.com/exemplos/formulariohtmlsimples/.