PTTutoriais

PHP, Introdução ao PHP

Aug 23, 2008 PHP Deixe um comentários

Neste artigo pretendo fazer uma breve apresentação do php, bem como algumas das suas características. É um artigo voltado para aqueles que estão agora a ter um primeiro contacto com esta linguagem, por curiosidade ou necessidades de funcionalidade para as suas páginas web.

A palavra chave que define melhor o sucesso de uma página web é o seu grau de interactividade, a página será mais atractiva se o visitante puder interagir com ela e não simplesmente absorver a informação em bruto.
Uma das linguagens utilizadas para criar esta “rotina” é o PHP (PHP: Hypertext Preprocessor”). Exemplos vivos deste tipo de interactividade são alguns sistemas de forum, sistemas de Leilões, etc.

Para melhor perceber o que é realmente o PHP, primeiro teremos de focar dois elementos chave relativamente aos tipos de linguagem usados na Internet: as linguagens baseadas no cliente ( o browser, por exemplo o internet explorer ou o netscape) e as linguagens baseadas no servidor.
No primeiro caso a execução das tarefas é realizada no computador do visitante; no segundo as tarefas são executadas no servidor web. O PHP pertence ao segundo grupo.

Imaginemos que visita uma página, com vista a subscrever um serviço ou simplesmente pedir informações, e que se depara com um formulário com vários campos (nome, email, comentários).
Preenche todos os campos e clica no botão “enviar”.
Poderão então surgir dois tipos de comportamento:

• O seu cliente de e-mail (outlook, outlook express, eudora) abre e visualiza aquilo que escreveu no formulário no corpo da mensagem que irá enviar. Esta é uma forma de processar as informações recorrendo a uma linguagem baseada no cliente, ou seja a execução da tarefa é efectuada pelo seu computador ( um exemplo deste tipo de linguagens é o javascript).

• Na janela do seu browser aparece o seguinte texto: “Mensagem enviada com sucesso! Obrigado”. Tal significa que a sua mensagem foi processada e enviada ao seu destinatário recorrendo ao servidor web, através de funções que poderão ter sido funções de PHP (também são usadas outras linguagens como o perl, que serviu de base para o php, ou o cgi).

Esta é uma forma de processar, ou melhor dizendo interpretar as informações utilizando uma linguagem baseada no servidor.

Assim, o facto de o php ser uma linguagem baseada no servidor abre caminho a inúmeras e diversas funcionalidades, como interacção com bases de dados (o SQL ou o MSAccess), bases de dados estas que permitem armazenar e exibir informações quando estas são solicitadas; quando visita um forum, participa, ou simplesmente visualiza as mensagens publicadas estará com certeza a visualizar ou armazenar informação na base de dados do servidor.

Para explanar todas as inúmeras vantagens oferecidas por esta linguagem “open source” (sim não tem de pagar nada para poder trabalhar em php, nem de comprar programas ou licenças; pode usar um simples ficheiro de texto para fazer as primeiras experiencias) teriamos de explorar alguns exemplos de códigos, o que tornaria este artigo demasiado extenso e eventualmente hermético para quem está a ter um primeiro contacto com este tipo de informação.

Assim sendo as principais vantagens do PHP são as de tornar o seu site mais dinâmico, facilmente actualizável, visualizável em qualquer tipo de PC não é necessário instalar nada para poder ver páginas em PHP, e principalmente é a interacção simples, leve e cinérgica que se pode criar entre o visitante da página e o seu webmaster.

Prever imagens com Javascript

Aug 23, 2008 Javascript Deixe um comentários

Objectivo

O objectivo deste tutorial é explicar como criar uma lista de opções de imagens em que o visitante do nosso site possa escolher cada hipótese e ter um preview da imagem seleccionada.

Para tal vamos usar Javascript para criar o efeito.

Começo por explicar primeiro o HTML em que consiste numa forma e de uma imagem, e de seguida explico o Javascript que não passa de uma pequena função para mudar de imagem cada vez que o visitante selecciona uma nova opção.

Para veres o que queremos criar basta seguir o link.

O HTML

O HTML é simples e consiste apenas de uma forma com uma lista e as várias hipóteses que o visitante tem.

<form name="SelecionarImagem">
<select name="ImagemEscolha" onChange="ImagemSelecionada()">
<option value="contribuinte.jpg">Imagem Um</option>
<option value="membro.jpg">Imagem Dois</option>
<option value="membrodomes.jpg">Imagem Tres</option>
</select>
</form>
<img src="images/icons/admin.jpg" id="imagemmudar">

O primeiro passo é criar uma forma e dar o nome de SelecionarImagem.

De seguida criamos uma lista com as várias hipóteses que o visitante tem, neste caso tem três imagens que pode escolher, em cada hipótese dá-mos o valor da imagem.

Também dá-mos um nome para esta lista ImagemEscolha.

Uma parte importante neste código é:

onChange="ImagemSelecionada()"

Isto serve para cada vez que o visitante seleccione uma hipótese chama a nossa função em Javascript, essa função é a que troca as imagens para o visitante ver um preview.

Por fim temos uma imagem, com a primeira escolha disponível. Esta imagem ira mudar-se sempre que o visitante seleccione outra hipótese, não esquecer o id imagemmudar.

O Javascript

O Javascript consiste numa pequena função que a única coisa que faz e agarrar no valor da hipótese escolhida e trocar a imagem para o visitante ver o preview.

<script language="javascript">
function ImagemSelecionada(){
var ImagemSelecionada = document.SelecionarImagem.ImagemEscolha;
var ImagemMostrar = ImagemSelecionada.options[ImagemSelecionada.selectedIndex].value
document.getElementById("imagemmudar").src = "images/icons/"+ImagemMostrar+""
}
</script>

Primeira passo que fazemos é criar uma função entre as tags headers do html, de seguida declaramos uma variável ImagemSelecionada para agarrar todas as opções disponíveis.

Basicamente esta linha funciona:

var ImagemSelecionada  //Declarar variável
document.SelecionarImagem.ImagemEscolha //Document.NomeQueDemosAForma.NomeDoSelect

A segunda linha é uma nova variável que guarda a escolha do visitante e o seu valor:

var ImagemMostrar  //Declarar variável
ImagemSelecionada.options[ImagemSelecionada.selectedIndex].value  //Serve para guardar o valor escolhido.

Por fim só resta trocar a imagem para isso:

Basicamente esta linha funciona:

document.getElementById("imagemmudar").src = "images/icons/"+ImagemMostrar+""

getElementById serve para agarrar o elemento que queremos modificar, como o elemento e uma imagem de seguida usamos .src, para modificarmos a imagem.
De seguida e só por a path onde as nossas imagens estão e a variável do valor da imagem.

Conclusão

E pronto esta feito, como vimos não e assim tão complicado.
Este exemplo foi testado em IE6, Firefox e Opera e resulta perfeitamente e podemos ver a ser usado aqui.