JavaScript - Aula06

ELFS, 2003 164

6. Introdução à Linguagem PHP

w A comunicação na Web exige dois agentes: o cliente web e o servidor web. O cliente requer informação (a partir de uma página HTML acessada pelo navegador) e o servidor fornece a informação requerida. Isto é feito na webpor meio de fluxos de textos que atendem ao protocolo HTTP (Hypertext Transfer Protocol). O cliente requer uma informação ao servidor, o servidor reconhece a requisição do cliente e gera um conteúdo correspondente (na forma de um texto HTML) e devolve este conteúdo como resposta ao cliente, que o visualiza no navegador.

w Os programas JavaScripts são interpretados diretamente pelo navegador (ou seja, pelo próprio cliente). Neste caso, dizemos que a programação web éfeita pelo lado do cliente (client-side programming).

Navegador Servidor Web

Gerador de

Conteúdo

requisição

resposta

Cliente Servidor

ELFS, 2003 165

Introdução à Linguagem PHP

w No caso da linguagem PHP, a programação é interpretada pelo servidor que, a partir de um gerador de conteúdo (o interpretador da linguagem PHP) produz uma página HTML que é então devolvida ao cliente. Neste caso, dizemos que a programação é pelo lado do servidor (server-side programming).

w Assim, no caso da linguagem JavaScript, os programas fazem parte do documento HTML que está sendo visualizado no navegador (pois o próprio navegador tem que interpretá-los) sendo, portanto, possível ao cliente ter acesso ao código-fonte destes programas.

w No caso da linguagem PHP, a página que está sendo visualizada no navegador é o resultado da interpretação do programa-fonte pelo gerador de conteúdo do servidor, ou seja, a partir do código-fonte de um programa PHP é gerada um documento HTML correspondente (que não inclui o código-fonte). Assim, a programação pelo lado do servidor "esconde do cliente" os detalhes de programação.

w Nesta disciplina vamos usar o pacote PHP Triad for Windows, que inclui o servidor web Apache, o gerenciador de bancos de dados relacionais MySQL, e o interpretador da linguagem PHP. Este pacote irá criar uma pasta C:\apacheonde serão instalados todos estes componentes. Dentro desta pasta, serácriada a pasta htdocs como diretório padrão para os documentos web(arquivos HTML e arquivos PHP).

ELFS, 2003 166


w Para testar se o servidor Apache e o interpretador PHP estão funcionando, copie o arquivo a seguir para a pasta C:\apache\htdocs:

w Agora, aponte o navegador para: http://localhost/aula06_01.phpO resultado deve ser como o mostrado abaixo.

<?php$txt1 = "O servidor Apache";$txt2 = "o interpretador PHP";$txt3 = "estão prontos para o trabalho!!";echo "<h1><a href=http://www.apache.org> $txt1 </a><br>";echo "e<br><a href=http://www.php.org> $txt2 </a></h1>";echo "<h2><div style='color:red'> $txt3 </div></h2>";

?>

aula06_01.php

ELFS, 2003 167


w O código PHP também pode ser incluído como scripts em um documento HTML (como em JavaScript). É preciso, no entanto, usar a extensão .php para o nome do documento. Exemplo:

w Execute no navegador http://localhost/aula06_02.php. Clique com o botão direito sobre a página exibida e escolha a opção "Exibir código-fonte" para se certificar de que o script PHP não fica disponível ao cliente.

w O importante, com a linguagem PHP, é a possibilidade de construção de páginas dinâmicas (páginas cujo conteúdo dependem de uma interação com o usuário). Para isto, vamos usar o gerenciador de bancos de dados MySQL.

<html><body><?php

$txt1 = "O servidor Apache";$txt2 = "o interpretador PHP";$txt3 = "estão prontos para o trabalho!!";echo "<h1><a href=http://www.apache.org1> $txt1 </a><br>";echo "e<br><a href=http://www.php.org1> $txt2 </a></h1>";echo "<h2><div style='color:red'> $txt3 </div></h2>";

?></body></html>

aula06_02.php

ELFS, 2003 168


w Como padrão, a instalação do MySQL cria o usuário root que não requer senha. É papel do administrador dos bancos de dados acrescentar novos usuários e suas permissões de uso. Vamos criar o banco de dados dai para o usuário root. Para isto, digite em uma janela de comandos: mysqladmin -u root create dai

w Em seguida, vamos criar a tabela alunos do banco de dados dai, a partir dos seguintes comandos SQL:

w Salve o arquivo alunos.sql em uma [pasta]. Para incluir a tabela alunos no banco de dados dai, digite o comando:mysql -u root dai < [pasta]\alunos.sql

w Para verificar que tudo foi criado apropriadamente, vamos usar o monitor MySQL.

CREATE TABLE alunos ( num int(5) NOT NULL, nome varchar(20), sobrenome varchar(20), PRIMARY KEY (num), UNIQUE (num));

INSERT INTO alunos VALUES (99060,'Luis','Nascimento'); INSERT INTO alunos VALUES (99059,'Cristiane','Silva'); INSERT INTO alunos VALUES (99057,'Victor','Silva');INSERT INTO alunos VALUES (99044,'Mariana','Peixoto');INSERT INTO alunos VALUES (99036,'Filipe','Domiciano');

alunos.sql

ELFS, 2003 169


w Digite na janela de comandos: mysql -u root

w Digite, então, os comandos a seguir (note que o ponto-e-vírgula é necessário) e verifique a resposta dada pelo monitor MySQL:show databases;use dai;show tables;desc alunos;select * from alunos;

Para sair do monitor, digite: quit

w Outra forma de verificar bancos de dados e tabelas é com o programa winmysqladmin.

w Vamos agora usar o banco de dados dai para criar um programa PHP para mostrar, inserir, alterar e excluir linhas da tabela alunos.

ELFS, 2003 170


w Para isto, vamos considerar o seguinte documento HTML: <html><head><title>Edição de Tabelas com PHP</title></head><body><form name="EdTab" action="aula06_03.php" method="post"><h1>Alunos de DAI</h1><p>Número: <input type="text" name="edNum" size="10" maxlength="5"></p><p>Nome: <input type="text" name="edNome" size="30" maxlength="20"></p><p>Sobrenome: <input type="text" name="edSobre" size="30"

maxlength="20"></p><br><p>Operação:

<input type="radio" name="Escolha" value="1" checked>Listar</input><input type="radio" name="Escolha" value="2">Incluir</input><input type="radio" name="Escolha" value="3">Alterar</input><input type="radio" name="Escolha" value="4">Excluir</input>

</p><input type="reset" value="Limpar"><input type="submit" value="Executar"></form></body></html>

aula06_03.htm

ELFS, 2003 171


w Considere o seguinte script PHP:

<?php// Edição de tabela de banco de dados.

/* Note que comentários podem ser feitos tambémde forma a ocupar diversas linhas.Neste caso, basta usar os delimitadoresde início e fim de comentário. */

// *********************************************************

aula06_03.php

Note que, neste formulário, o usuário deverá escolher uma das operações e clicar no botão Executar. Com isto será executado (no lado servidor) o script aula06_03.php, que construirá uma página de resposta à requisição do usuário.

Note, no documento HTML, que estão definidos os identificadores: edNum, edNome e edSobre(nomes das caixas de edição) e também o identificador Escolha (identifica qual operação foi escolhida pelo usuário).

ELFS, 2003 172


function listagem($conecta){

$sql = "select * from alunos";

$query = mysql_db_query("dai", $sql, $conecta);

echo("<h1>Listagem de Alunos</h1>");echo("<table border width=50%");echo("<tr><th>Número</th><th>Nome</th><th>Sobrenome</th></tr>");

while ($result = mysql_fetch_array($query)){

echo("<tr>");echo("<td>" . $result["num"] . "</td>");echo("<td>" . $result["nome"] . "</td>");echo("<td>" . $result["sobrenome"] . "</td>");echo("</tr>");

}

mysql_free_result($query);}

// *********************************************************

Sempre que o comando SQL resultar em uma tabela(como no caso de um select), os recursos de memória alocados à variável que armazena os resultados da consulta (no caso, a variável $query) devem ser liberados com a função mysql_free_result.

A função mysql_fecth_array retorna uma linha da tabela (ou zero, caso não existam mais linhas). Note que os campos que compõem a linha são acessados como "índices".

Variáveis definidas dentro de funções em um script PHP são consideradas variáveis locais, a menos que sejam declaradas com o qualificador global.

ELFS, 2003 173


function incluir($conecta,$edNum,$edNome,$edSobre){

$sql = "insert into alunos (num,nome,sobrenome) values " ."( $edNum, '$edNome', '$edSobre' )";


echo("<h1>Inclusão de Alunos</h1>");if ($query){

echo("Aluno $edNome incluído na tabela!");}else{

echo("Erro na inclusão " . mysql_error() . "\n");}

}

// *********************************************************function encontrar($conecta,$edNum){

$sql = "select * from alunos where num = $edNum";


Note que o ponto ( . ) é o operador de concatenaçãode strings.

Note que se o nome de uma variável aparece em um string, ele será automaticamente substituído pelo valor da variável.

ELFS, 2003 174


$result = mysql_fetch_array($query);if ($result["num"] == 0){

echo("<h1>Aluno $edNum não existe!!!</h1>");$cod = 0;

}else{

$cod = 1;}

mysql_free_result($query);return $cod;

}

// *********************************************************function alterar($conecta,$edNum,$edNome,$edSobre){

echo("<h1>Alteração de Alunos</h1>");

if (encontrar($conecta,$edNum) == 1){

$sql = "update alunos set nome = '$edNome', sobrenome = '$edSobre' " ."where num = $edNum";

Note que se um campo da tabela for do tipo varchar, o valor do campo deve ser delimitado por aspas ou por apóstrofos (é o caso dos campos nome e sobrenome, da tabela alunos). Para campos numéricos, o valor não precisa estar delimitado por aspas ou por apóstrofos (é o caso do campo num).

ELFS, 2003 175



if ($query){

echo("Aluno $edNum alterado!");}else{

echo("Erro na alteração " . mysql_error() . "\n");}

}}

// *********************************************************function excluir($conecta,$edNum){

echo("<h1>Exclusão de Alunos</h1>");

if (encontrar($conecta,$edNum) == 1){

$sql = "delete from alunos where num = $edNum";


ELFS, 2003 176


if ($query){

echo("Aluno $edNum excluído da tabela!");}else{

echo("Erro na exclusão " . mysql_error() . "\n");}

}}

// *********************************************************//// Aqui começa o script principal//// *********************************************************$conecta = mysql_connect("localhost","root");if ($conecta){

switch ($Escolha){

case "1": listagem($conecta);break;

Note que o script principal tem acesso aos identificadoresdefinidos no documento HTML que chamou o script. Estes identificadores são tratados como variáveis (como é o caso de $Escolha). Note que a linguagem PHP faz distinção entre letras maiúsculas e minúsculas.

ELFS, 2003 177


case "2": incluir($conecta,$edNum,$edNome,$edSobre);break;

case "3": alterar($conecta,$edNum,$edNome,$edSobre);break;

case "4": excluir($conecta,$edNum);break;

default:echo("Operacao [" . $Escolha . "] nao reconhecida");break;

}}else{

echo("Erro na conexão " . mysql_error() . "\n");}

mysql_close($conecta); ?>

Note que a função mysql_error() retorna, como um string, a mensagem de erro correspondente a uma operação SQL inválida. Isto ajuda na depuração do script PHP.

Observe que é necessário passar como parâmetrosde função os identificadores definidos no documento HTML, caso a função necessite de seus valores.

ELFS, 2003 178


w Devido à característica de ser processado pelo lado do servidor, um programa PHP não consegue interagir com os usuários depois que as páginas HTML são montadas e enviadas ao navegador. Entretanto, muitas vezes é preciso realizar tarefas na própria página como, por exemplo: validação de campos digitados pelo usuário, preenchimento dinâmico de listas com base em parâmetros informados na página, abertura de novas janelas, redirecionamento para outras páginas. Nestes casos, é mais interessante utilizar JavaScript.

w Considere, por exemplo, que no formulário de edição da tabela alunosdesejamos garantir que o usuário digitou o número do aluno como uma sequência de 5 dígitos e que os dois primeiros dígitos devem ser iguais a "98" ou "99", antes que este dado seja enviado ao script PHP. Neste caso, podemos rescrever o documento HTML que define o formulário como:

<html><head><title>Edição de Tabelas com PHP</title><SCRIPT language="JavaScript">function verifica_numero(valor){

if (valor.length != 5)alert("Digite um número de 5 dígitos");

aula06_04.htm

Os acréscimos ao documento aula06_03.htm aparecem em destaque.

ELFS, 2003 179


ano = valor.substr(0,2);if (ano != "98" && ano != "99")

alert("Os dois primeiros dígitos devem ser '98' ou '99'");num = valor.substr(2,3);ok = true;for (i = 0; i < 3; i++){

if ( isNaN(num.substr(i,1)) )ok = false;

}if (!ok)

alert("O número do aluno deve conter apenas dígitos!");}</SCRIPT></head><body><form name="EdTab" action="aula06_03.php" method="post"><h1>Alunos de DAI</h1><p>Número:

<input type="text" name="edNum" size="10" maxlength="5"onchange="verifica_numero(edNum.value);"></p>

<p>Nome: <input type="text" name="edNome" size="30" maxlength="20"></p>

<p>Sobrenome:

ELFS, 2003 180

w Considere o seguinte formulário HTML, cujo código é apresentado a seguir. Neste formulário, quando o usuário clicar no botão Enviar, dependento da opção de cadastro, será chamado o script cad_cliente.php ou o script cad_fornece.php.


<input type="text" name="edSobre" size="30" maxlength="20"></p><br><p>Operação:

<input type="radio" name="Escolha" value="1" checked>Listar</input><input type="radio" name="Escolha" value="2">Incluir</input><input type="radio" name="Escolha" value="3">Alterar</input><input type="radio" name="Escolha" value="4">Excluir</input>

</p><input type="reset" value="Limpar"><input type="submit" value="Executar"></form></body></html>

ELFS, 2003 181


<html><head><title>PHP e JavaScript</title><SCRIPT language="JavaScript">

function mostra_estado(){

var estados = new Array("SP - São Paulo","RJ - Rio de Janeiro","MG - Minas Gerais","ES - Espírito Santo","RS - Rio Grande do Sul","CE - Ceará","GO - Goiás","AM - Amazonas");

for (i = 0; i < estados.length; i++)if ( document.cadastro.estado.value == estados[i].substr(0,2) )

document.cadastro.nomest.value = estados[i].substr(5,30);}

function verifica(){

var erro = "Foram encontrados os seguintes erros: ";

aula06_05.htm

ELFS, 2003 182


var ok = true;

if ( document.cadastro.nome.value.length == 0 ){

erro += "\n - O nome deve ser informado";ok = false;

}

if ( document.cadastro.email.value.length == 0 ){

erro += "\n - O e-mail deve ser informado";ok = false;

}

if ( !ok )alert(erro);

elseif ( documento.cadastro.tipo[0].cheched )

document.cadastro.action = "cad_cliente.php";else

document.cadastro.action = "cad_fornece.php";return ok;

}</SCRIPT>

aula06_05.htm

ELFS, 2003 183


</head><body onLoad="mostra_estado();"><h1>Cadastro de Clientes e Fornecedores</h1><form name="cadastro" action="????.php" onSubmit="return verifica();"><p>Nome: <input name="nome" type="text" size="30"></p><p>E-mail: <input name="email" type="text" size="30"></p><p>Estado:

<select name="estado" size="1" onChange="mostra_estado();"><option value="SP">SP</option><option value="RJ">RJ</option><option value="MG">MG</option><option value="ES">ES</option><option value="RS">RS</option><option value="CE">CE</option><option value="GO">GO</option><option value="AM">AM</option>

</select><input name="nomest" type="text" size="30"></p>

<p>Cadastro: <input name="tipo" type="radio" value="1" checked>Cliente<input name="tipo" type="radio" value="2">Fornecedor</p>

<input name="enviar" type="submit" value=" Enviar "></form></body></html>

aula06_05.htm

ELFS, 2003 184


w Exercício: Considerando o formulário dado em aula06_05.htm, escreva:a) Uma função verifica_email para testar a validade do e-mail digitado.

Considere que um e-mail válido é da forma: ***@***.com.br, onde *** representa um string qualquer.

b) Os scripts cad_cliente.php e cad_fornece.php. Considere um novo banco de dados cadastros, contendo as tabelas clientes e fornecedores. Crie o banco de dados e as estruturas das tabelas usando o monitor MySQL.

Geração de código JavaScript com PHPw Com scripts PHP é possível a geração de códigos JavaScript dinâmicos. Por

exemplo:

<html><head><title>Gerando JavaScript com PHP</title></head><body><script language="JavaScript"><?php

$data = date("d/m/Y",time());echo "alert('Data atual = $data');";

?></script></body></html>

aula06_06.php

Note que este script PHP irá completar o código JavaScript do documento HTML que será enviado ao cliente. Execute este script e clique com o botão direito sobre a página exibida e selecione a opção Exibir código-fonte para verificar o documento enviado ao cliente.

ELFS, 2003 185


w Evidentemente, a partir de scripts PHP é possível a geração de código JavaScript muito mais sofisticado. Como o código JavaScript é um texto, em princípio, não existem limites para a geração deste código a partir de um script PHP.

w Uma outra aplicação de scripts PHP é na autenticação de usuários (que, evidentemente, não pode ser feita por código JavaScript, pois o programa-fonte estaria disponível a qualquer cliente). Considere, por exemplo, o seguinte documento HTML:

<html><head><title>Autenticação de Usuário</title></head><body><h1>Autenticação</h1><form name="usuario" action="autoriza.php"><p>Login: <input name="login" type="text" size="20"></p><p>Senha: <input name="senha" type="password" size="20"></p><input name="entrar" type="submit" value=" Entrar "></form></body></html>

aula06_07.htm

ELFS, 2003 186


w Vamos considerar que as senhas dos usuários estão armazenadas na tabela senhas do banco de dados usuarios. Vamos considerar a criação desta tabela a partir dos seguintes comandos SQL:

w O script autoriza.php pode ser escrito como:

CREATE TABLE senhas ( login varchar(20), senha varchar(20), UNIQUE (login) );

INSERT INTO senhas VALUES ('Senne','feg2003');

senhas.sql

<?php// *********************************************************//// Um script simples de autenticação de usuários//// *********************************************************$conecta = mysql_connect("localhost","root");if ($conecta){

$sql = "select * from senhas where login = '$login'"; $query = mysql_db_query("usuarios", $sql, $conecta);$result = mysql_fetch_array($query);

autoriza.php

ELFS, 2003 187


if ($result["login"] != $login){

echo("<h1>Usuário $login não cadastrado!!!</h1>");}else{

if ($result["senha"] != $senha){

echo("<h1>Senha não confere</h1>");}else{

echo "<META HTTP-EQUIV='REFRESH' CONTENT=\"0;URL='http://www.feg.unesp.br'\">";

}}mysql_free_result($query);

}else{

echo("Erro na conexão " . mysql_error() . "\n");}mysql_close($conecta);

?>

O tag META pode ser usado para identificar propriedades de um documento HTML (autor, data de expiração, lista de palavras-chave, etc.) e para especificar um cabeçalho HTTP a ser passado ao navegador, permitindo que uma URL seja carregada.

Note o uso da barra invertida ( \ ) para poder incluir o caractere aspas ( " ) dentro de um string.

JavaScript - Aula06

Documents

Transcript of JavaScript - Aula06