mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos

Transcrição

1 Programando em PHP Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora. O diretório raíz será o próprio diretório do apache acrescido de uma pasta calculadora, portanto, nossa raiz será /srv/www/default/html/calculadora. Para criar o diretório no local correto, digite os comandos abaixo: mkdir /srv/www/default/html/calculadora A partir daí, teremos mais duas estruturas: o diretório imagens responsável pelo armazenamento de todas as figuras do site, e o diretório blocos para guardar os blocos padronizados do site, como por exemplo, o cabeçalho. Para a criação dessa estrutura, execute: mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos Vamos para a criação do cabeçalho. Todos os códigos pertinentes ao PHP estarão limitados pelas diretivas e, para representar, respectivamente, o início e o fim do código. Vamos então criar o arquivo. Para facilitar os próximos comandos, vamos entrar no diretório da calculadora. O seguindo comando é inicializa o editor de texto vi e consequentemente cria o arquivo de cabeçalho chamado header.php. cd /srv/www/default/html/calculadora/ vi blocos/header.php Nosso arquivo de cabeçalho ficará análogo ao apresentado abaixo. header.php echo "<table bgcolor=#e1e1e1 width=400>"; echo " <td width=50 align=center>"; echo " <img src=\"imagens/calculadora.jpg\">"; echo " <td width=300 align=center>"; echo " <big><big><b>calculadora</b>";

2 echo " <td width=50 align=center>"; echo " <img src=\"imagens/calculadora.jpg\">"; echo "</table>"; Comandos PHP e HTML Em primeiro lugar, devemos estudar a função do comando echo. O PHP, roda apenas no servidor. Uma requisição cliente à um arquivo PHP executa o código no servidor e este por sua vez, monta dinamicamente o site de acordo com o comportamento do código. A sintaxe echo adiciona o parâmetro indicado na frente (limitado por aspas duplas) à página que será exibida no cliente. Ou seja, na segunda linha do código acima, o PHP adicionará na página a sintaxe html referente a criação de uma tabela. Neste arquivo existem diversos comandos html. O primeiro deles, conforme mencionado, inicia uma tabela. Observe que os códigos html, na grande maioria, contem diretivas (tags) de abertura e fechamento. As tags são envolvidas pelos sinais de menor (<) e maior (>). A de arbertura contem apenas o comando específico e a de fechamento possui, após ao sinal de menor uma barra (indicador de fechamento). Observe que na penúltima linha temos a tag de fechamento da tabela. Vamos agora as diretivas: bgcolor indica a cor de fundo da tabela. A cor será formada por uma seqüência de três valores exadecimais variando de 00 a FF. Temos respectivamente as cores vermelho, verde e azul (padrão RGB). Devemos iniciar a seqüência com uma tralha. width indica o comprimento da tabela, em pixels. <tr> inicia uma linha que deve ser finalizada com </tr>. <td> inicia uma coluna que também deve ser fechada. Observe que as colunas também adotam o parâmetro de comprimento. align define o tipo de alinhamento do componente inserido dentro da coluna. O valor center indica que ele ficará no centro. Pode se valorar este campo com left e right, para posicionamento na esquerda e direita. <img src= > indica uma figura (posicionada em src) a ser inserida na página. Observe que, a sintaxe de src obriga o uso de aspas duplas, mas que o comando echo também o faz. Para que as aspas do src não finalizem a limitação do comando echo, iremos inserir uma contra barra (\) antes das aspas isso permite inserir uma aspas na página pelo comando echo. <big> aumenta o tamanho da fonte a ser mostrada. <b> define a fonte como negrito.

3 Por conveniência, vamos iniciar a construção da página principal (index.php). Deve se destacar que por default o Apache não reconhece o arquivo index.php como inicial. Vamos adicioná lo na diretiva DirectoryIndex do arquivo /etc/apache/conf/httpd.conf. Inicialmente, nosso index ficará conforme apresentado abaixo. <html> <head> <title> :: Calculadora em PHP :: </title> </head> <body> require("blocos/header.php"); </body> </html> Comandos PHP e HTML Para inserir nosso cabeçalho na página principal, iremos adotar o comando require. Todos as páginas HTML são limitadas pelas tags html. O head contém os dados de cabeçalho da página HTML, como o título, definido neste exemplo (title). Todos os comandos que serão mostrados no navegador estarão dispostos no corpo do site (body). Vamos visualizar o site. Lembre se de que o Apache deve estar rodando (service httpd start). Abra o navegador e digite localhost/calculadora/. Será exibida uma página similar a mostrada na figura abaixo. Observe que o arquivo index.php não foi inserido, mas por default, selecionado.

4 Vamos agora a criação do corpo da calculadora. Este arquivo será chamado de calcular.php. vi /blocos/calcular.php Este arquivo será formado de dois campos de texto (o input do formulário padrão do html) e um botão para executar os cálculos. O arquivo ficará conforme mostrado abaixo. Inicialmente a calculadora só realizará a soma de dois números. calcular.php $value1 = $_GET['v1']; $value2 = $_GET['v2']; $result = $value1 + $value2; echo "<form method=get action=\" >"; echo " <table width=400 bgcolor=#e1e1e1>"; echo " <td width=100>número 1</td>"; echo " <td width=20></td>"; echo " <td width=100>número 2</td>"; echo " <td width=20></td>"; echo " <td width=100>resulado</td>"; echo " <td width=100>"; echo " <input size=10 type=text name=v1 value=".$value1.">"; echo " <td width=20>+</td>"; echo " <td width=100>"; echo " <input size=10 type=text name=v2 value=".$value2.">"; echo " <td width=20>=</td>"; echo " <td width=100><b>".$result."</b></td>"; echo " <td colspan=5 align=right><hr>"; echo " <input type=submit value=\"calcular\">"; echo " </table>"; echo "</form>"; Antes da explicação do código, vamos relembrar alguns conceitos sobre o método GET utilizado neste exemplo. O formulário (indicado pelas tags <form> e </form>) está associado com algum tipo de requisição: geralmente GET ou POST. O modelo apresentado neste exemplo trabalha

5 com uma requisição GET (definida pelo parâmetro METHOD) e por isso envia alguns dados (na verdade, componentes do formulário input, por exemplo) para o arquivo (definido na cláusula ACTION na abertura do formulário) hospedado no servidor. O arquivo apontado recebe não trata, de forma esplícita, os valores do método GET. Na verdade ele REQUIRE o arquivo calcular.php que por sua vez, recebe os dados com um comando específico do PHP: $_GET[]; Isso implica numa modificação no arquivo index.php. Este comando recebe como parâmetro o nome da variável enviada para o servidor. Observe que o nome é exatamente o atributo NAME dos INPUTs do formulário HTML: v1 e v2. Outra noção importante sobre a requisição GET é referente à forma de envio dos dados. Todos os valores são postados pela URL (arquivo apontado pelo ACTION) acrescida de um separador padrão (?) e das variáveis com seus respectivos valores. Isso implica na formação da seguinte URL (depois de pressionado o botão CALCULAR): Até o limitador?, temos o endereço do arquivo. Adiante temos a referência da primeira variável (v1) conforme o nome do primeiro input e o sinal de igual (=) seguido do valor da variável (neste caso, 4). Para separar as variáveis, o método GET utiliza o separador &. Por fim temos a delcaração de v2 seguida de seu valor 4. Fica destinado ao leitor realizar o seguinte teste óbvio: O quê aparecerá na tela se digitarmos a seguinte URL no navegador: A partir desta última questão, torna se claro a impossibilidade de envio de senhas e/ou dados pessoais (como CPF) pelo método GET, pois esses estarão obrigatoriamente sujeitos a visibilidade pela URL da página destino. Para tal tratamento, em estudos posteriores, utilizaremos o POST. Comandos PHP e HTML Inicialmente temos o recebimento dos valores v1 e v2 postados pelo GET e guardados nas variáveis $value1 e $value2, respectivamente. A seguir, declaramos a variável $result e armazenamos a soma das duas variáveis. A primeira sintaxe de escrita no navegador define o escopo do formulário.

6 Conforme dito, method indica o tipo de método e action o arquivo que receberá a requisição. Adiante temos a sintaxe de definição da tabela. O primeiro item GUI (graphical user interface) uma caixa de texto aparasse na primeira coluna da segunda linha da tabela. Sua sintaxe é iniciada pela tag input. A cláusula size indica o tamanho da caixa. type indica o tipo de input, neste caso, texto (text). name é quem define o nome da variável relacionada ao item. O arquivo que receber a requisição deste formulário deverá apontar para este indicador se quiser recuperar seu valor (conforme este próprio arquivo realiza no início do código). Por fim, temos o comando value que define um valor para ser escrito dentro da caixa de texto. Neste caso, usamos o valor que está agregado à variável $value1. O comportamento do input v2 é análogo ao anterior. Observe que a quinta coluna desta mesma linha exibe o valor de $result. Nossa última observação centra se em torno da última linha da tabela. colspan é uma tag HTML que indica o número de colunas que está única coluna ocupa. Isso implica que, neste caso, a coluna em questão aborda as cinco colunas da tabela. <hr> exibe uma linha na tela. <input type=submit value=\"calcular\"> define um item do formulário do tipo submit, ou seja, realiza a requisição method. Seu formato é de um botão valorado com a palavra calcular. A penúltima linha do código finaliza a definição do formulário. Deveremos modificar o arquivo index.php para que o mesmo carregue a página descrita anteriormente (calcular.php). index.php <html> <head> <title> :: Calculadora em PHP :: </title> </head> <body> require("blocos/header.php"); require("blocos/calcular.php"); </body> </html> Por fim, nossa calculadora simples está pronta. Observe que ela só é capaz de somar e que comporta exclusivamente dois elementos. Ao final da edição deste último código (na verdade, reajuste do arquivo index.php), abra o navegador e digite para que sejá

7 exibida a tela principal, conforme abaixo. Fica a cargo do leitor implementar outras calculadoras que possibilitem os cálculos de subtração, divisão e multiplicação.