Extjs

Tpicos Avanados em Computao
Prof. Dr. Wagner J. Dizer

wagner@unilins.edu.br
Lins-SP, Agosto de 2012
Apresentao da Disciplina
EMENTA
Tpicos relacionados com inovaes tecnologias decorrentes de pesquisas de vanguarda e da evoluo apurada na rea. O estado da Arte da Tecnologia.
CRITRIOS DE APROVEITAMENTO:
Provas: peso 8.0 (oito) Trabalhos: peso 2.0 (dois)
Bibliografia
Livro Texto: 1. PHP 4: A Bblia; Converse, Tim et al; Ed. Campus; 1 edio; 2001; 5 exemplares. 2. Use a Cabea: PHP e MySQL; Beighley, Linn; Ed. Alta Books; 1 edio; 2010; 10 exemplares. 3. Ajax (ASYNCHRONOUS JAVASCRIPT AND XML); Soares, Walace; Ed. rica; 1 edio; 2006; 10 exemplares. Complementar: 4. Profissional PHP: Programando; Castagneto, Jesus et al; Ed. Makron Books; 1 edio; 2001; 1 exemplar. 5. PHP e MySQL: Desenvolvimento Web; Welling, Luke et al; Ed. Campus; 1 edio; 2001; 1 exemplar. 6. Programando em PHP: Conceitos e Aplicaes; Soares, Walace; Ed. rica; 1 edio; 2000; 5 exemplares. 7. Fundamentos de PHP; Meloni, Julie C.; Ed. Cincia Moderna; 1 edio; 2000; 5 exemplares. 8. Guia de Consulta Rpida: Integrando PHP com MySQL; Stoco, Lucio M.; Ed. Novatec; 1 edio; 2000; 5 exemplares.
Roteiro das Aulas

Instalao e Configuraes Bsicas Introduo Linguagem PHP Exemplos de Programas Conexo com Banco de Dados Estudos de Casos
Instalao e Configuraes Bsicas

Softwares Necessrios:
PHP (http://www.php.org/) Apache (http://www.apache.org/) MySQL (http://www.mysql.org/)
EasyPHP (http://www.easyphp.org/)
EasyPHP um sistema indicado para os usurios que no tm instalado no sistema nenhum dos programas necessrios para programar em PHP (Apache, PHP e MySQL)
Notepad++ (http://notepad-plus-plus.org/ )
Interface de instalao EasyPHP
Seqncia para instalao: 1. 2. 3. 4. 5. 6. 7. Tela de boas vindas ... Termos de uso da licena ... Informao sobre o uso ... Pasta para instao ... Nome da atalho no menu ... Pronto para instalao ... Instalao Completa!
Para carregar o EasyPHP

(C:\Arquivos de programas\EasyPHP-5.3.3\EasyPHP-5.3.3.exe)
cone do programa
Menu para iniciar o EasyPHP
Interface do EasyPHP
7
Endereo para acesso via browser
http://localhost/ ou http://127.0.0.1/
ATENO: Dependendo do verso, necessrio indicar a porta. Ex.: http://127.0.0.1:8888/
Pasta Base
Pasta Base o local onde os programas PHP devero ser salvos. nesse local que o Apache ir buscar os scripts para serem interpretados. Pela instalao padro, a pasta base ser: C:\Arquivos de programas\EasyPHP-5.3.3\www possvel redefinir a pasta base editando o arquivo httpd.conf, atravs da diretiva: DocumentRoot Nesse arquivo tambm possvel configurar o nome do arquivo default a ser carregado: DirectoryIndex index.php index.html index.htm
9
EasyPHP home
http://localhost/home
A partir da pgina principal do EasyPHP possvel: - Criar um Alias (apelido) indicando onde os scripts estaro gravados, como uma alternativa para a pasta base padro. - Ver informaes sobre as configuraes do PHP - Acessar o PhpMyAdmin para administrar bases de dados no MySQL. - Ler os termos de licena de todos os softwares oferecidos no pacote.
10
Introduo Linguagem PHP

Personal Home Page; Criao de Websites dinmicos; Usa scripts embutidos dentro de pginas Html; Combinao de linguagem de programao e servidor de aplicaes; interpretado e no compilado (Apache); Cdigo executado no servidor; Baseado na linguagem C; case sensitive; Compatvel com vrias plataformas; Suporte para vrios Banco de Dados
11
Esquema do Funcionamento
Internet
usurio servidor pgina PHP
pgina html
base de dados
12
Primeiro Script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Aprendendo PHP</title> </head> <body>
<?php $texto = "Primeiro Script"; echo $texto; ?>

</body> </html>
13
Detalhes do Primeiro Exemplo

Esse cdigo precisar ser salvo em um arquivo com a extenso .PHP na pasta base definida no servidor Apache. Para acess-lo, use: http://<ip>:<porta>/<alias>/<arquivo.php> Por exemplo: http://127.0.0.1:8888/php/exemplo1.php No exemplo, criada uma varivel chamada $texto e atribudo o valor Primeiro Script, que posteriormente ser exibido pelo browser. Toda varivel em PHP iniciada por $. No h necessidade de declarar o tipo de varivel. Quando a pgina carregada, o script PHP interpretado pelo Apache e substitudo pelo resultado gerado puramente em Html. Isso pode ser verificado a partir do browser no menu: Exibir / Cdigo fonte
14
Utilizando Formulrios em HTML

<html> <head><title>Formulrio em Html</title></head> <body> <form> Digite uma frase: <input type="text" name="frase"> <input type="submit" value="Enviar"> </form> <hr><br> <?php if (!empty($_REQUEST["frase"])) { $frase = $_REQUEST["frase"]; echo "Voc digitou: <b>" .$frase. "</b>"; } ?> </body> </html>
15
Detalhes do Segundo Exemplo

empty retorna se a varivel passada no parmetro vale null ou .
null indica varivel no declarada e indica que varivel tem valor vazio.
$_REQUEST retorna o valor contido num campo do formulrio.

necessrio que a propriedade NAME do INPUT do formulrio HMTL tenha o mesmo nome do parmetro usado em $_REQUEST.
$_REQUEST requisita valores enviados pelos mtodos GET e POST.

Para especificar apenas um dos mtodos, utilize $_GET e $_POST.
A instruo if usada para garantir que nada seja apresentado quando a pgina for carregada pela primeira vez. possvel atribuir o valor do INPUT direto para uma varivel do PHP.
preciso configurar register_globals = On no arquivo PHP.INI e reiniciar o servidor Apache. Por questes de segurana, esta opo est desabilitada a partir do PHP 6.
16
Tipos de Campos num Formulrio

<form> Caixa de texto: <input type=text name=text_name><br><br> Check Box: <input type=checkbox name=checkbox_name><br><br> Radio:<br> Valor 1<input type=radio name=radio_name value=valor1 checked><br> Valor 2<input type=radio name=radio_name value=valor2><br><br> Select:<br><select name=select_name> <option value=opcao1>Opo 1</option> <option value=opcao2>Opo 2</option> <option value=opcao3>Opo 3</option> </select><br><br> Area de texto:<br> <textarea name=textarea_name></textarea><br> <input type=submit value="Enviar"> </form> <br><hr><br> <?php @$text_name = $_REQUEST["text_name"]; @$checkbox_name = $_REQUEST["checkbox_name"]; @$radio_name = $_REQUEST["radio_name"]; @$select_name = $_REQUEST["select_name"]; @$textarea_name = $_REQUEST["textarea_name"]; echo "Text: " .$text_name. "<br>"; echo "CheckBox: " .$checkbox_name. "<br>"; echo "Radio: " .$radio_name. "<br>"; echo "Select: " .$select_name. "<br>"; echo "Textarea:<br>" .nl2br($textarea_name). "<br>"; ?> O @ serve para omitir a mensagem de aviso (warning) quando a varivel no existir 17
Desvio Condicional - if
<?php if(!empty($_GET["sexo"])) { $sexo = $_GET["sexo"]; if ($sexo == "M") echo "Sexo masculino"; else if($sexo == "F") echo "Sexo feminino"; } ?> <br><br> <form method="GET" action=""> <input type="radio" name="sexo" value="M">Masculino<br> <input type="radio" name="sexo" value="F">Feminino<br><br> <input type="submit" value="Enviar"> </form>
Se uma condio if possuir 2 ou mais comando preciso coloc-los entre chaves. { e } representam, respectivamente, begin e end.
18
Lao de Repetio - for

<html> <head><title>Tabuada</title></head> <body> <?php $n = 5; for($i=1; $i<=10; $i++) { $r = $n * $i; echo $n." x " .$i. " = " .$r. "<br>"; } ?> </body> </html>
Altere o exemplo para que a escolha da tabuada a ser exibida seja feita atravs de um formulrio.
19
Lao de Repetio - while

<?php $inicio = microtime(); $i=1; while ($i<=1000) { echo "escrevendo linha ".$i."<br>"; $i++; } $final = microtime(); $tempo = $final - $inicio; echo "<BR>Pgina gerada em " .$tempo. " segundos."; ?>
20
10
Incluso de outros scripts

A funo include permite que o contedo de outro arquivo seja includo dentro do arquivo atual.
<!- data.php --> <html><body> <?php $data = date("d/m/Y"); echo "Hoje " .$data. "<br>"; ?> </body></html>
 <html><body> <?php echo "Seja bem-vindo!!!<br>"; include("data.php"); ?> </body></html>
21
Uso de Vetor (array)

<?php $nome = array("Joao","Carlos","Marcos"); $nome[] = "Edson"; $idade[0] = 20; $idade[1] = 30; $idade[2] = 27; $idade[3] = 19; //$idade = array(20,30,27,19); for($a = 0; $a < count($nome); $a++){ echo "A idade de " .$nome[$a]. " " .$idade[$a]. " anos<br>"; } ?>
Um array inicia na posio 0 (zero). A funo count retorna a quantidade de elementos de um array.
22
11
Uso de Sesso
O uso de sesso permite a criao de variveis acessveis por todo o sistema enquanto uma sesso estiver aberta. As variveis de sesso so independentes para cada usurio conectado.
 <?php session_start(); echo "Pagina #1"; $_SESSION["x"] = "PHP"; echo "<br><a href=\"page2.php\">page 2</a>"; ?>  <?php session_start(); echo "Pagina #2"; echo "<br>Valor da varivel de sesso x: " .$_SESSION["x"]; ?>
23
Exerccio - Calculadora
Elaborar uma calculadora simples com as 4 operaes bsicas. O usurio deve informar 2 nmeros e o operador (+ - * / )
24
12
Exerccio Calculadora com login

Modificar a calculadora de forma que somente usurios que conheam a senha possam utiliz-la.
Utilizar 3 arquivos:
calc_login.php formulrio para fazer login calc_logout.php finalizar o uso calc_senha calculadora que solicita o login
27
Exerccios
1. 2. 3. 4. 5. 6. 7. 8. Apresentar os nmeros pares entre 1 e 100. Apresentar os anos bissextos entre um intervalo informado pelo usurio. Apresentar os 10 primeiros termos da srie de Fibonacci. Solicitar um valor e verificar se um nmero primo. Criar um programa para ler um nmero de 1 a 12 e apresentar o respectivo ms por extenso. Criar um programa para ler uma data em formato dd/mm/yyyy. Por exemplo: 21/03/2012 -> 21 de maro de 2012. Criar um programa para ler um nmero entre 1 e 100 e apresent-lo por extenso. Criar um gerador automtico de curriculum. O usurio deve informar: nome, dados pessoais, objetivos, experincia profissional, formao acadmica e conhecimentos gerais. O usurio tambm dever escolher a cor do texto e do fundo do site. O programa deve gerar um curriculum em formato .html.
32
13
Trabalho Lanchonete
(individual)
Elaborar uma pgina em PHP para montar um lanche e calcular o valor a ser cobrado do cliente.
44
Utilizando Banco de Dados

Essencialmente, um sistema comercial s tem real utilidade se conseguir armazenar e recuperar informaes atravs de uma base de dados.
PASSOS: 1. Abrir uma conexo 2. Executar uma instruo SQL 3. Processar o resultado 4. Fechar a conexo
Alm dos comandos da linguagem PHP, de extrema importncia conhecer a linguagem SQL.
45
14
Principais funes para MySQL

mysql_connect conecta ao BD, indicando: IP, usurio e senha mysql_select_db seleciona o BD a ser utilizado mysql_query executa uma consulta SQL mysql_fetch_array retorna um registro contido na consulta mysql_result retorna um campo contido na consulta mysql_num_rows retorna a quantidade de registros localizados mysql_close fecha a conexo com o BD
46
Verificando a conexo com o BD

<?php if (!$link) { die("Falha ao conectar: " . mysql_error()); } else { echo "Conexo bem sucedida"; mysql_close($link); } ?>
IP USURIO SENHA
@$link = mysql_connect("127.0.0.1", "root", "");
47
15
Uso de PHP com outros SGBDs

Basicamente, para usar PHP com outros bancos, preciso configurar o arquivo: C:\wamp\Apache2\bin\PHP.INI Depois, retire o comentrio (;) da extenso a ser utilizada. Por exemplo, para Interbase:
;extension=php_interbase.dll
Na programao, troque os prefixos mysql_ das funes por ibase_ para utilizar o Interbase. Nem todas funes disponveis para MySQL funcionam para os demais bancos.
48
Banco de Dados
Banco de Dados
CREATE DATABASE IF NOT EXISTS db_aula; USE db_aula;
Tabela CONTATO
CREATE TABLE IF NOT EXISTS tb_contato( cod_cont integer not null auto_increment, nome varchar(50), endereco varchar(60), cidade varchar(40), data_nasc date, fone varchar(15), PRIMARY KEY(cod_cont) );
Incluso de dados
INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc) VALUES('Jonatas','Rua da Glria,12','Lins','3533-1234','1972-03-20'); INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc) VALUES('Raquel','R. 7 Setembro,55','Ponga','3523-0022','1973-05-15'); INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc) VALUES('Marcos','Av.Saudade,275','Lins','3532-3344','1980-12-25'); INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc) VALUES('Ana','R. das Flores,99','Lins','3523-9999','1984-01-05'); COMMIT; 49
16
Listar registros do BD
<?php $link = mysql_connect("127.0.0.1","root",""); mysql_select_db("db_aula"); $sql = "SELECT cod_cont, nome, endereco, cidade, fone, data_nasc FROM tb_contato"; $resultado = mysql_query($sql); while($registro = mysql_fetch_array($resultado)){ echo $registro["cod_cont"] . " | " . $registro["nome"] . " | " . $registro["endereco"] . " | " . $registro["cidade"] . " | " . $registro["fone"] . " | " . $registro["data_nasc"] . "<br>"; } mysql_close($link); ?>
50
Exerccios
1. 2. 3. 4. 5. 6. 7. Alterar o programa anterior para que a listagem seja exibida em formato de tabela. Fazer com que a relao de registros cadastrados seja exibida num relatrio zebrado. Permitir que usurio escolha o campo de deseja para ordenao dos registros. Adicionar um campo para que o usurio digite parte do nome a ser consultado. Apresentar, ao final da listagem, a quantidade total de registros da agenda. Apresentar os dados com paginao, mostrando 10 registros de cada vez. Apresentar os registros utilizando uma tableless (tabela feita com folha de estilo)
51
17
Estudo de Caso: Agenda Eletrnica

Objetivo:
Desenvolver uma agenda eletrnica.
Requisitos:
O mdulo de agenda deve ser um CRUD, ou seja, deve permitir consultar, cadastrar, alterar e excluir registros de pessoas. Para cada registro, deve-se armazenar: codigo, nome, endereo, cidade, telefone e data de nascimento. Todas as funcionalidades da agenda devem ser acessadas atravs de um menu de opes.
Lista de Eventos
No Evento
01 02 03 04 Listar Contatos Cadastrar Contato Alterar Contato Excluir Contato
Descrio
Listar a relao de contatos da agenda Cadastrar dados pessoais de um contato Alterar dados de um contato Excluir fisicamente os registros
Ator
Administrador Administrador Administrador Administrador
53
18
Menu
 <a href="listar.php">Listar</a> | <a href="inserir.php">Inserir</a> | <a href="alterar.php">Alterar</a> | <a href="excluir.php">Excluir</a> <hr>
 <?php include "menu.php"; ?>
54
Listar registros do BD
 <?php include "menu.php"; $link = mysql_connect("127.0.0.1","root",""); mysql_select_db("db_aula"); $sql = "SELECT cod_cont, nome, endereco, cidade, fone, data_nasc FROM tb_contato"; $rs = mysql_query($sql); while($r = mysql_fetch_array($rs)){ echo $r["cod_cont"] . " | " . $r["nome"] . " | " . $r["endereco"] . " | " . $r["cidade"] . " | " . $r["fone"] . " | " . $r["data_nasc"] . "<br>"; } mysql_close($link); ?>
55
19
Inserir novos registros no BD

Faremos a incluso de dados em 2 passos: 1. Formulrio para digitar os dados 2. Programa para obter os dados do formulrio e gravar no banco de dados
<!- inserir.php --> <?php include "menu.php"; ?> <form method="GET" action="inserir2.php"> Nome: <input type="text" name="nome"> <br> Endereo: <input type="text" name="endereco"> <br> Cidade: <input type="text" name="cidade"> <br> <br> Telefone: <input type="text" name="fone"> Data Nasc.: <input type="text" name="data_nasc"><br> <br><input type="submit" value="Gravar"> </form>
56
Inserir
(Cont. 2/2)
<!- inserir2.php --> <?php include "menu.php"; // recebe os parmetros do formulrio @$nome = $_GET["nome"]; @$endereco = $_GET["endereco"]; @$cidade = $_GET["cidade"]; @$fone = $_GET["fone"]; @$data_nasc = $_GET["data_nasc"]; $data_nasc = implode('-',array_reverse(explode('/',$data_nasc))); //conecta e insere no banco de dados $link = mysql_connect("127.0.0.1","root",""); mysql_select_db("db_aula"); $sql = "INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc) VALUES('$nome','$endereco','$cidade','$fone','$data_nasc')"; //echo $sql."<br>"; $status = mysql_query($sql); if($status == 1) echo "Sucesso ao inserir registro!"; else if ($status == 0 ) echo "Erro ao inserir!"; mysql_close($link); ?> 57
20
Alterar dados no BD
<!- alterar.php --> <?php include "menu.php"; $link = mysql_connect("127.0.0.1","root",""); mysql_select_db("db_aula"); $sql = "SELECT cod_cont, nome FROM tb_contato"; $rs = mysql_query($sql); while($r=mysql_fetch_array($rs)){ echo "<a href=alterar2.php?cod_cont=".$r["cod_cont"].">" .$r["nome"]."</a><br>"; } mysql_close($link); ?>
58
Alterar
<?php
(Cont. 2/3)
 include "menu.php"; $cod_cont = $_GET["cod_cont"]; $link = mysql_connect("127.0.0.1","root",""); mysql_select_db("db_aula"); $sql = "SELECT * FROM tb_contato WHERE cod_cont=".$cod_cont; $rs = mysql_query($sql); $r = mysql_fetch_array($rs); $r[5] = implode('/',array_reverse(explode('-',$r[5]))); mysql_close($link); ?> <form method="GET" action="alterar3.php"> Cdigo:<input type="text" name="cod_cont" value="<?php echo $r[0]; ?>" readonly><br> Nome: <input type="text" name="nome" value="<?php echo $r[1]; ?>"><br> Endereo: <input type="text" name="endereco" value="<?php echo $r[2]; ?>"><br> Cidade: <input type="text" name="cidade" value="<?php echo $r[3]; ?>"><br> Telefone: <input type="text" name="fone" value="<?php echo $r[4]; ?>"><br> Data Nasc.: <input type="text" name="data_nasc" value="<?php echo $r[5]; ?>"><br> <br><input type="submit" value="Atualizar"> </form> 59
21
Alterar
(Cont. 3/3)
<!- alterar3.php --> <?php include "menu.php"; @$cod_cont = $_GET["cod_cont"]; @$nome = $_GET["nome"]; @$endereco = $_GET["endereco"]; @$cidade = $_GET["cidade"]; @$fone = $_GET["fone"]; @$data_nasc = $_GET["data_nasc"]; $data_nasc = implode('-',array_reverse(explode('/',$data_nasc))); $link = mysql_connect("127.0.0.1","root",""); mysql_select_db("db_aula"); $sql = "UPDATE tb_contato SET nome='$nome', endereco='$endereco', cidade='$cidade', fone='$fone', data_nasc='$data_nasc' WHERE cod_cont=$cod_cont"; $status = mysql_query($sql); if ($status==0) echo "Erro ao atualizar.<br>"; else if ($status==1) echo "Atualizado com sucesso.<br>"; mysql_close($link); ?> 60
Excluir registros do BD
<!- excluir.php --> <?php include "menu.php"; $link = mysql_connect("127.0.0.1","root",""); mysql_select_db("db_aula"); if (!empty($_GET["cod_cont"])) { $codigos = implode(", ", $_GET["cod_cont"]); $sql = "DELETE FROM tb_contato WHERE cod_cont IN (".$codigos.")"; $status = mysql_query($sql); if ($status==0) echo "Erro ao excluir.<br>"; } ?> <form method="GET" action=""> <?php $sql = "SELECT cod_cont, nome FROM tb_contato"; $rs = mysql_query($sql); while($r=mysql_fetch_array($rs)){ echo "<input type=checkbox name=cod_cont[] value=".$r["cod_cont"].">" .$r["nome"]."<br>"; } mysql_close($link); ?> <br><input type="submit" value="Excluir"></form>
61
22
Controle de Acesso
Da forma que fizemos, nosso CRUD est funcionando. Contudo, qualquer pessoa que conhea o endereo da Agenda Eletrnica ser capaz de acessar o sistema.
Tabela USUARIO
CREATE TABLE IF NOT EXISTS tb_usuario( cod_usu integer not null auto_increment, usuario varchar(30) UNIQUE not null, senha varchar(30) not null, PRIMARY KEY(cod_usu) ); INSERT INTO tb_usuario(usuario, senha) VALUES('admin','master'); Commit;
62
login.php
(1/2)
<?php session_start(); @$usuario = $_POST['usuario']; @$senha = $_POST['senha']; if(!empty($usuario) AND !empty($senha)) { $link = mysql_connect("127.0.0.1", "root", ""); mysql_select_db("db_aula"); $sql = "SELECT cod_usu FROM tb_usuario WHERE usuario = '$usuario' AND senha = '$senha'"; $rs = mysql_query($sql); if(!empty($rs) AND mysql_num_rows($rs)==1) { $r = mysql_fetch_array($rs); $_SESSION['cod_usu'] = $r['cod_usu']; } mysql_close($link); }
63
23
login.php
(2/2)
if(!empty($_SESSION['cod_usu'])) { ?> <script>location='menu.php';</script> <?php exit; } else { ?> <form method="POST" action=""> Usurio: <input type="text" name="usuario"><br> Senha: <input type="password" name="senha"><br> <input type="submit" value="Entrar"> </form> <?php } ?>
64
logout.php
<?php session_start(); $_SESSION['login'] = null; ?> <script>location='menu.php';</script>
65
24
menu.php
<?php session_start(); if(empty($_SESSION['cod_usu'])) { ?> <script>location='login.php';</script> <?php exit; } ?> <a href="listar.php">Listar</a> | <a href="inserir.php">Inserir</a> | <a href="alterar.php">Alterar</a> | <a href="excluir.php">Excluir</a> | <a href="logout.php">Logout</a> <hr>
66
Agenda Eletrnica verso 2.0
Organizao dos arquivos: conexao.php grid.php form.php salvar.php excluir.php index.php - conexo com o BD para todos os arquivos - tela principal para gerenciamento - formulrio para inserir e alterar - responsvel por inserir e atualizar no DB - responsvel pela excluso de registros - arquivo inicial que direciona para o grid
67
25
conexao.php
 <?php $link = mysql_connect("127.0.0.1","root",""); mysql_select_db("db_aula"); ?>
68
grid.php (1/3)
<?php include "conexao.php"; @$filtro = trim(addslashes($_GET['filtro'])); $sql = "SELECT cod_cont, nome, endereco, cidade, fone DATE_FORMAT(data_nasc,'%d/%m/%Y') data FROM tb_contato WHERE nome LIKE '$filtro%'"; $rs = mysql_query($sql); echo '<table border=1> <th bgcolor=#EEEEEE>Gerenciar Contatos</th><tr><td> <table border=0> <tr> <td width= "20"> </td> <td width= "20"> </td> <td width= "40"><b>ID</td> <td width="200"><b>Nome</td> <td width="220"><b>Endereo</td> <td width="120"><b>Cidade</td> <td width="110"><b>Cidade</td> <td width= "80"><b>Data Nasc.<td> </tr>';
69
26
grid.php (2/3)
if(empty($rs) OR mysql_num_rows($rs)==0) { echo '<tr><td colspan=8 align=center>Nenhum contato encontrado</td></tr>'; } else { while($r = mysql_fetch_array($rs)){ echo "<tr> <td><a href=\"excluir.php?codigo=".$r['cod_cont']."\" onClick=\"return confirm('Confirma a excluso?');\"> <img src=\"./img/excluir.png\" border=0 alt=excluir></a> </td> <td><a href=\"form.php?codigo=".$r['cod_cont']."\"> <img src=\"./img/alterar.png\" border=0 alt=alterar></a> </td> <td>".$r['cod_cont']."</td> <td>".$r['nome']."</td> <td>".$r['endereco']."</td> <td>".$r['cidade']."</td> <td>".$r['data']."</td> </tr>"; } }
70
grid.php (3/3)
echo "</table></td></tr>"; echo "<tr><td><table width=100% border=0><tr><td> <input type=button value=Novo onClick=\"location='form.php';\"></td> <form><td align=right>Pesquisar por: <input name=filtro> <input type=submit value=Buscar></td></form></tr></table>"; echo "</td></tr></table>"; mysql_close($link); ?>
71
27
salvar.php (1/2)
<?php include "conexao.php"; @$codigo = $_GET["cod_cont"]; @$nome = $_GET["nome"]; @$endereco = $_GET["endereco"]; @$cidade = $_GET["cidade"]; @$fone = $_GET["fone"]; @$data_nasc = $_GET["data_nasc"]; if(!empty($data_nasc)) $data_nasc = implode('-',array_reverse(explode('/',$data_nasc))); if(empty($codigo)) { $sql = "INSERT INTO tb_contato(nome, endereco, cidade, fone, data_nasc) VALUES('$nome', '$endereco', '$cidade', '$fone', '$data_nasc')"; } else { $sql = "UPDATE tb_contato SET nome = '$nome', endereco = '$endereco', cidade = '$cidade', fone = '$fone', data_nasc = '$data_nasc' WHERE cod_cont = $codigo"; }
72
salvar.php (2/2)
//echo $sql."<br>"; $status = mysql_query($sql); if($status==1) $msg = "Sucesso ao salvar registro"; else $msg = "Erro ao salvar registro"; mysql_close($link); ?> <script> alert('<?php echo $msg; ?>'); location = 'grid.php'; </script>
73
28
excluir.php (2/2)
<?php include "conexao.php"; $codigo = $_GET["codigo"]; $sql = "DELETE FROM tb_contato WHERE cod_cont = $codigo"; $status = mysql_query($sql); if($status==1) $msg = "Sucesso ao excluir registro"; else $msg = "Erro ao excluir registro"; mysql_close($link); ?> <script> alert('<?php echo $msg; ?>'); location = 'grid.php'; </script>
74
index.php
<?php include "grid.php"; ?>
75
29
Trabalho: Cadastro de Cidades

(individual)
Objetivo:
Criar um mdulo para cadastro de cidades.
Requisitos:
Criar um CRUD para gerenciar cidades. De cada cidade deve-se armazenar o nome e o estado. Os estados devero estar previamente cadastrados numa tabela.
Banco de Dados
Tabela tb_estado
CREATE TABLE IF NOT EXISTS tb_estado( sigla char(2) not null, nome varchar(40), PRIMARY KEY(sigla) );
Tabela tb_cidade
CREATE TABLE IF NOT EXISTS tb_cidade( id integer not null auto_increment, sigla char(2), nome varchar(40), PRIMARY KEY(id), FOREIGN KEY(sigla) REFERENCES tb_estado );
Incluso de estados
INSERT INSERT INSERT INSERT INSERT INSERT INSERT ... COMMIT; 77 INTO INTO INTO INTO INTO INTO INTO tb_estado tb_estado tb_estado tb_estado tb_estado tb_estado tb_estado VALUES VALUES VALUES VALUES VALUES VALUES VALUES ('SP', ('RJ', ('MG', ('ES', ('RS', ('SC', ('PR', 'So Paulo'); 'Rio de Janeiro'); 'Minas Gerais'); 'Esprito Santo'); 'Rio Grande do Sul'); 'Santa Catarina'); 'Paran');
30
Telas do mdulo de cidades
Organizao dos arquivos: conexao.php - conexo com o BD para todos os arquivos grid.php - tela principal para gerenciamento form.php - formulrio para inserir e alterar excluir.php - responsvel pela excluso de registros salvar.php - responsvel por inserir e atualizar no DB index.php - arquivo inicial que direciona para o grid 78
grid.php (1/2)
 <table border=1> <th bgcolor=#EEEEEE>Gerenciar Cidades</th> <tr><td> <table border=0> <tr><td width=20> </td><td width=20> </td> <td width= 40><b>ID</td> <td width=300><b>Cidade</td> <td width= 50><b>Estado</td></tr> <?php include "conexao.php"; @$filtro = trim(addslashes($_GET['filtro'])); $sql = "SELECT a.id, a.nome, b.nome estado FROM tb_cidade a LEFT JOIN tb_estado b ON a.sigla = b.sigla WHERE a.nome LIKE '$filtro%' ORDER BY a.nome"; $rs = mysql_query($sql); if(empty($rs) OR mysql_num_rows($rs)==0) { echo "<tr><td colspan=5 align=center>Nenhum registro localizado</td></tr>"; } else {
79
31
grid.php (2/2)
while($r = mysql_fetch_array($rs)){ echo "<tr> <td><a href=\"excluir.php?id=".$r['id']."\" onClick=\"return confirm('Confirma a excluso?');\"> <img src=\"./img/excluir.png\" border=0 alt=excluir></a></td> <td><a href=\"form.php?id=".$r['id']."\"> <img src=\"./img/alterar.png\" border=0 alt=alterar></a></td> <td>".$r['id']."</td> <td>".$r['nome']."</td> <td>".$r['estado']."</td> </tr>"; } } mysql_close($link); ?> </table></td></tr> <tr><td> <table width="100%" border=0><tr> <td><input type=button value=Novo onClick="location='form.php';"></td><form> <td align=right>Pesquisar por: <input name=filtro> <input type=submit value=Buscar></td></form></tr> </table> </td></tr> </table> 80
form.php (1/2)
 <?php $r = array(); @$r['id'] = $_GET['id']; $r['nome'] = null; $r['sigla'] = "SP"; include "conexao.php"; if(!empty($r['id'])) { $sql = "SELECT id,nome,sigla FROM tb_cidade WHERE id=".$r['id']; $rs = mysql_query($sql); $r = mysql_fetch_array($rs); } ?> <table border=1> <th bgcolor=#EEEEEE>Formulrio de Cidades</th> <tr><form action="salvar.php"><td> <table border=0> <tr><td>Cdigo:</td><td> <input type=text name=id value="<?php echo $r['id']; ?>" readonly></td></tr> <tr><td>Cidade:</td><td> <input type=text name=nome value="<?php echo $r['nome']; ?>"></td></tr>
81
32
form.php (2/2)
<tr><td>Estado:</td><td> <select name="sigla"> <?php $sql2 = "SELECT sigla, nome FROM tb_estado ORDER BY nome"; $rs2 = mysql_query($sql2); while($r2 = mysql_fetch_array($rs2)) { ?> <option value="<?php echo $r2['sigla']; ?>" <?php if($r['sigla']==$r2['sigla']) echo " SELECTED"; ?>> <?php echo $r2['nome']; ?></option> <?php } ?> </select> </td></tr> </table> </td></tr> <tr><td> <table width=100% border=0> <tr><td><input type=button value=Cancelar onClick="location='grid.php';"></td> <td align=right><input type=submit value=Salvar></td></form></tr> </table> </td></tr> </table> <?php mysql_close($link); ?>
82
salvar.php
 <?php include "conexao.php"; @$id = $_GET["id"]; @$nome = $_GET["nome"]; @$sigla = $_GET["sigla"]; if(empty($id)) { $sql = "INSERT INTO tb_cidade(nome,sigla) VALUES('$nome','$sigla')"; } else { $sql = "UPDATE tb_cidade SET nome='$nome', sigla='$sigla' WHERE id=$id"; } //echo $sql."<br>"; $status = mysql_query($sql); if($status==1) $msg = "Sucesso ao salvar registro"; else $msg = "Erro ao salvar registro"; mysql_close($link); ?> <script> alert('<?php echo $msg; ?>'); location = 'grid.php'; </script> 83
33
excluir.php
 <?php include "conexao.php"; $id = $_GET["id"]; $sql = "DELETE FROM tb_cidade WHERE id = $id"; $status = mysql_query($sql); if($status==1) $msg = "Sucesso ao excluir registro"; else $msg = "Erro ao excluir registro"; mysql_close($link); ?> <script> alert('<?php echo $msg; ?>'); location = 'grid.php'; </script>
84
Conceitos sobre Orientao a Objetos

Um objeto qualquer coisa (concreta ou abstrata) que pode ser representada por atributos e operaes. Uma classe uma abstrao de um objeto. O objeto uma instncia de uma classe. Atributo sinnimo de campo e armazena informaes sobre as caractersticas do objeto. Um mtodo, ou operao, uma rotina que executada por um objeto ao receber uma mensagem. Mtodos so anlogos funes ou procedimentos da programao estruturada. O envio de mensagens (chamada de mtodos) pode alterar o estado de um objeto. A herana permite o reuso de cdigo de forma hierrquica. Polimorfismo permite criar diferentes mtodos usando um mesmo nome. O mtodo certo a ser invocado ir depender do contexto. Encapsulamento uma forma de proteger informaes de um objeto, trabalhando como uma caixa preta. Associao descreve a ligao entre instncias de objetos. Agregao e Composio so tipos especiais de associaes.
85
34
Criao da Classe Pessoa em PHP

 <?php class PESSOA { private $pes_nome; private $pes_sexo; private $pes_nasc; public function setar($nome,$sexo,$nasc) { $this->pes_nome = $nome; $this->pes_sexo = $sexo; $this->pes_nasc = $nasc; } public function obterNome() { return $this->pes_nome; } public function obterSexo() { return $this->pes_sexo; } public function obterNascimento() { return $this->pes_nasc; } } ?> 86
Instncias da Classe Pessoa

 <?php include "pessoa.class.php"; ?> <html> <head><title>Main :: Classe PESSOA</title></head> <body> <?php $uma_pessoa = new PESSOA; $outra_pessoa = new PESSOA; $uma_pessoa->setar("Joo da Silva","M","25/07/1982"); $outra_pessoa->setar("Jos de Sousa","M","15/05/1978"); echo echo echo echo echo echo echo echo echo echo ?> </body> </html> "<br>Dados da primeira pessoa:"; "<br>Nome: " .$uma_pessoa->obterNome(); "<br>Sexo: "; $uma_pessoa->obterSexo()=="M"?"Masculino":"Feminino"; "<br>Data Nasc.: " .$uma_pessoa->obterNascimento() . "<br>"; "<br>Dados da segunda pessoa:"; "<br>Nome: " .$outra_pessoa->obterNome(); "<br>Sexo: "; $outra_pessoa->obterSexo()=="M"?"Masculino":"Feminino"; "<br>Data Nasc.: " .$outra_pessoa->obterNascimento() . "<br>";
87
35
Herana em PHP
 <?php class PESSOA { private $pes_nome; private $pes_sexo; private $pes_nasc; public function setar($nome,$sexo,$nasc){ $this->pes_nome = $nome; $this->pes_sexo = $sexo; $this->pes_nasc = $nasc; } public function obterNome() { return $this->pes_nome; } public function obterSexo() { return $this->pes_sexo; } public function obterNascimento() { return $this->pes_nasc; } } ?> }  include "pessoa.class.php"; class FUNCIONARIO extends PESSOA { private $fun_cargo; private $fun_salario; public function setar($nome,$sexo,$nasc, $cargo,$salario) { PESSOA::setar($nome, $sexo, $nasc); $this->fun_cargo = $cargo; $this->fun_salario = $salario; } function obterCargo() { return $this->fun_cargo; } function obterSalario() { return $this->fun_salario; } function reajustarSalario($aumento) { $this->fun_salario += $aumento; }
88
Instncias da Classe Funcionario

 <?php include "funcionario.class.php"; ?> <html> <head> <title>Main :: Classe FUNCIONARIO</title> </head> <body> <?php $um_func = new FUNCIONARIO; $um_func->setar("Carlos Garcia","M","22/02/1975","Gerente",3500.00); $um_func->reajustarSalario(500.00); echo echo echo echo echo echo echo ?> </body> </html> 89 "<br>Dados do Funcionario:"; "<br>Nome: " .$um_func->obterNome(); "<br>Sexo: "; $um_func->obterSexo()=="M"?"Masculino":"Feminino"; "<br>Data Nasc.: " .$um_func->obterNascimento() . "<br>"; "Cargo: ". $um_func->obterCargo(); "Salrio: R$ ". number_format($um_func->obterSalario(),2);
36
Construtores e Destrutores
 <?php class myClass { function __construct() { echo "Primeira classe construda <br />"; } function operacoes() { echo "Realizando Operaes <br />"; } function __destruct() { echo "Primeira classe destruda <br />"; } } $obj = new myClass(); $obj->operacoes(); ?>
Sada: Primeira classe construda Realizando Operaes Primeira classe destruda

90
Base para criar um CRUD

<?php class crud { function __construct() { @$action = $_GET['action']; if($action=='grid') $this->grid(); else if($action=='form') $this->form(); else if($action=='save') $this->save(); else if($action=='delete') $this->delete(); else $this->grid(); } private function grid() { echo "grid"; } private function form() { echo "form"; }
(1/2)
91
37
Base para criar um CRUD

private echo } private echo } } ?> <a href="?action=grid">GRID</a> | <a href="?action=form">FORM</a> | <a href="?action=save">SAVE</a> | <a href="?action=delete">DELETE</a> <hr> <?php new crud(); ?> function save() { "save"; function delete() { "delete";
(2/2)
92
Classe genrica para database

Essa classe permitir:
Melhor organizao do cdigo. Reuso de cdigo. Estender e/ou melhorar funes do PHP. Tornar mais transparente o uso do BD. Permitir a troca do SGBD com facilidade.
93
38
database.php
(1/3)
<?php class database { private $link; private $database; private $ip = "127.0.0.1"; private $user = "root"; private $pass = ""; private $db = "db_aula"; function __construct($flag=false){ if($flag==true){ $this->connect(); } } function __destruct() { $this->close(); } protected function connect(){ $this->link = mysql_connect($this->ip, $this->user, $this->pass); $this->database = mysql_select_db($this->db); }
94
database.php
(2/3)
protected function close(){ $this->database = null; if(!empty($this->link)) @mysql_close($this->link); } protected function query($sql){ return mysql_query($sql); } protected function execute($sql){ $sql = utf8_decode($sql); return $this->query($sql) ? 1 : 0; } protected function affected_rows(){ return mysql_affected_rows(); } protected function insert_id(){ return mysql_insert_id(); } protected function num_rows($rs){ return empty($rs) ? 0 : mysql_num_rows($rs); }
95
39
database.php
(3/3)
protected function result($sql,$index=0) { $rs = $this->query($sql); return ($this->num_rows($rs)>0) ? mysql_result($rs,$index) : null; } protected function fetch_array($rs){ return empty($rs) ? null : mysql_fetch_array($rs); } protected function select_id($sql){ $rs = $this->query($sql); return $this->fetch_array($rs); } protected function select_all($sql){ $dados = array(); $rs = $this->query($sql); while($r = $this->fetch_array($rs)){ $dados[] = $r; } return $dados; } } // fim da classe database ?>
96
Criando um CRUD completo

Agora iremos juntar o uso da classe genrica para banco de dados com a estrutura geral para a criao de CRUD proposta anteriormente. Com isso, todas as funcionalidades de um mdulo ficaro num mesmo arquivo e o mtodo construtor se encarregar de definir qual ao dever ser tomada.
97
40
Banco de Dados
Tabela PRODUTO
CREATE TABLE IF NOT EXISTS tb_produto ( cod_prod int(11) NOT NULL AUTO_INCREMENT, descricao varchar(60) NOT NULL, preco decimal(8,2) NOT NULL, PRIMARY KEY (cod_prod) );
98
Layout das Telas
99
41
produto.php
(1/7)
<?php require_once "database.php"; class produto extends database { function __construct() { @$this->action = $_GET['action']; if($this->action=='grid') $this->grid(); else if($this->action=='form') $this->form(); else if($this->action=='save') $this->save(); else if($this->action=='delete') $this->delete(); else $this->grid(); }
100
produto.php
(2/7)
private function grid() { $sql = "SELECT cod_prod, descricao, preco FROM tb_produto ORDER BY cod_prod"; $this->connect(); $dados = $this->select_all($sql); ?> <table border="1"> <th bgcolor=#EEEEEE>Gerenciar Agenda</th> <tr><td> <table border="0"> <tr> <td> </td><td> </td> <td width= "80"><b>Cdigo</b></td> <td width="200"><b>Descrio</b></td> <td width="120" align="right"><b>Preo</b></td> </tr> <?php if(empty($dados)) {?> <tr><td>Nenhum registro localizado.</td></tr> <?php } else { $tam = count($dados); for($i=0; $i<$tam; $i++) {
101
42
produto.php
(3/7)
$r = $dados[$i]; $r['preco'] = "R$ ".number_format($r['preco'],2,',','.'); ?> <tr> <td><a href="?action=delete&cod_prod= <?php echo $r['cod_prod']; ?>"> <img src="./img/excluir.png" border="0"></a></td> <td><a href="?action=form&cod_prod= <?php echo $r['cod_prod']; ?>"> <img src="./img/alterar.png" border="0"></a></td> <td align="center"><?php echo $r['cod_prod']; ?></td> <td><?php echo $r['descricao']; ?></td> <td align="right"><?php echo $r['preco']; ?></td> </tr> <?php } } ?> </table> </td></tr> <tr><td colspan="5" align="left"> <input type=button value=Novo onClick="location='?action=form';"> </td></tr></table><?php }
102
produto.php
(4/7)
private function form() { @$r['cod_prod'] = $_GET['cod_prod']; $r['descricao'] = null; $r['preco'] = null; if(!empty($r['cod_prod'])) { $this->connect(); $sql = "SELECT * FROM tb_produto WHERE cod_prod = ".$r['cod_prod']; $r = $this->select_id($sql); } ?> <table border=1> <th bgcolor=#EEEEEE>Formulrio de Produtos</th> <tr> <td> <table border="0"> <form method="POST" action="?action=save"> <tr> <td>Cdigo:</td> <td><input type="text" name="cod_prod" READONLY value="<?php echo $r['cod_prod']; ?>"></td> </tr>
103
43
produto.php
(5/7)
<tr> <td>Descrio:</td> <td><input type="text" name="descricao" value="<?php echo $r['descricao']; ?>"></td> </tr> <tr> <td>Preo:</td> <td><input type="text" name="preco" value="<?php echo $r['preco']; ?>"></td> </tr> <tr> <td><input type="submit" value="Salvar"></td> <td align="right"><input type="button" value="Cancelar" onClick="location='?action=grid';"></td> </tr> </form> </table> </td> </tr> </table> <?php }
104
produto.php
(6/7)
private function save() { $p = (object) $_POST; $p->preco = str_replace(",", ".", $p->preco); if(empty($p->cod_prod)) { $sql = "INSERT INTO tb_produto(descricao, preco) VALUES('".$p->descricao."',".$p->preco.")"; } else { $sql = "UPDATE tb_produto SET descricao = '".$p->descricao."', preco=".$p->preco." WHERE cod_prod = ".$p->cod_prod; } $this->connect(); $status = $this->execute($sql); if($status==1) $msg = "Sucesso ao gravar registro."; else $msg = "Erro ao gravar registro."; ?> <script> alert('<?php echo $msg; ?>'); location="?action=grid"; </script> <?php }
105
44
produto.php
(7/7)
private function delete() { $cod_prod = $_GET['cod_prod']; $sql = "DELETE FROM tb_produto WHERE cod_prod = ".$cod_prod; $this->connect(); $status = $this->execute($sql); $msg = ($status==1) ? "Sucesso ao excluir registro." : "Erro ao excluir registro."; ?> <script> alert('<?php echo $msg; ?>'); location="?action=grid"; </script> <?php } } $p = new produto(); ?>
106
Exerccios
1. Modificar o mdulo de produto de forma que seja possvel fazer upload de fotos dos produtos. As fotos podem ficar armazenadas dentro do banco de dados (maior segurana) ou numa pasta externa (maior agilidade), vinculando-se o nome do arquivo PK do registro.
107
45
Mudanas no construtor ...

function __construct() { @$this->action = $_GET['action']; if($this->action=='grid') $this->grid(); else if($this->action=='form') $this->form(); else if($this->action=='save') $this->save(); else if($this->action=='delete') $this->delete(); else if($this->action=='file') $this->file(); else if($this->action=='upload') $this->upload(); else $this->grid(); action photo ser o formulrio } para envio da foto.
action upload receber o arquivo postado e gravar no servidor.
108
Mudanas no grid ...

private function grid() { ... <tr> <td> </td> <td> </td> <td> </td> ... <tr> <td><a href="?action=delete&cod_prod= <?php echo $r['cod_prod']; ?>"> <img src="./img/excluir.png" border="0"></a></td> <td><a href="?action=form&cod_prod= <?php echo $r['cod_prod']; ?>"> <img src="./img/alterar.png" border="0"></a></td> <td><a href="?action=file&cod_prod= <?php echo $r['cod_prod']; ?>"> <img src="./img/upload.png" border="0"></a></td> ... }
Adicionar uma coluna para opo de upload de foto.
109
46
Exerccios
2. Criar um mdulo de controle de acesso para que somente usurios autorizados possam acessar o mdulo de produtos. O mdulo deve ser criado baseado em programao orientada a objetos.
114
Exerccios
3. Criar um mdulo para uma vitrine virtual, na qual qualquer o visitante possa consultar os produtos. Deve existir um campo para consulta por descrio e o resultado deve ser exibido com paginao.
115
47
Exerccios
4. Criar um mdulo para carrinho de compras nos moldes de uma loja virtual. O usurio poder adicionar seus produtos nesse carrinho.
116
Programao em 3 Camadas
A programao em 3 Camadas - MVC (Model, View e Controller) uma tcnica que consiste em separar a programao em trs partes responsveis por:
Exibir as informaes (view) Controlar as regras de negcio (controller) Acessar o banco de dados (model)
117
48
MVC - Funcionamento
1. A camada de Viso solicita as informaes para a camada de Controle 2. A camada de Controle aplica as regras de negcio e aciona a camada de Dados.
3. A camada de Dados acessa o Banco de Dados e retorna o resultado obtido para a camada de Controle.
Viso (View)
1 4
Controle (Controller)
2 3
Dados (Model)
4. A camada de Controle repassa os dados prontos para a camada de Viso, que finalmente exibe na tela.
118
MVC Principais Vantagens

Organizao
Separao lgica das funcionalidades
Manuteno
O cdigo fica mais organizado
Produtividade
possvel ter mais de um programador trabalhando simultaneamente num mesmo mdulo
Reuso de cdigo
possvel substituir uma camada sem fazer modificaes nas demais. possvel ter mais de uma camada de viso compartilhando as camadas de controle e de dados.
119
49
Banco de Dados
Banco de Dados CREATE DATABASE IF NOT EXISTS db_aula; USE db_aula; Tabela CLIENTE CREATE TABLE IF NOT EXISTS tb_cliente( cod_cli integer not null auto_increment, nome varchar(80), fone varchar(20), PRIMARY KEY(cod_cli) ); Incluso de dados INSERT INTO tb_cliente(nome,fone) VALUES ('Enzo', ('Renan', ('Igor', ('Hiago', COMMIT;
120
'(14) 3333-3333'), '(19) 4444-4444'), '(19) 5555-5555'), '(19) 2222-2222');
('Gustavo', '(48) 9999-9999'),
MVC para listagem simples
(1/2)
<?php class cliente { function __construct() { $this->view(); } public function view() { $dados = $this->controller(); if(empty($dados)) { echo "Nenhum registro localizado!"; } else { $qtde = count($dados); for($i=0; $i<$qtde; $i++) { $r = $dados[$i]; echo $r["cod_cli"] . " | " . $r["nome"] . " | " . $r["fone"] . "<br />"; } } echo '<hr /><form>Pesquisar por: <input name="filtro"> <input type="submit" value="Buscar"></form>'; }
121
50
MVC para listagem simples
(2/2)
public function controller() { @$filtro = addslashes(trim($_GET['filtro'])); return $this->model($filtro); } public function model($filtro) { $link = mysql_connect("127.0.0.1", "root", ""); mysql_select_db("db_aula"); $sql = "SELECT cod_cli, nome, fone FROM tb_cliente WHERE nome LIKE '$filtro%'"; $rs = mysql_query($sql); $dados = Array(); if(!empty($rs) AND mysql_num_rows($rs)>0) { while($r = mysql_fetch_array($rs)) { $dados[] = $r; } } return $dados; } } $c = new cliente(); ?>
122
Duas vises compartilhando as camadas de controle e de dados
Vamos modificar a classe de clientes criando duas verses de listagem da camada de viso: web e mobile. As camadas de controle e de dados devem ser compartilhadas pelas 2 vises.
index.php (detectar o dispositivo utilizado)
123
51
Aparncia de cada viso:

viewMobile viewWeb
Normalmente, a verso Web no tem a opo para selecionar a verso Mobile 124
index.php
<script> (screen.width<700) ? location="cliente.php?versao=mobile" : location="cliente.php?versao=web"; </script>
Verifica se a resoluo e redireciona para a verso correta.
125
52
cliente.php
(1/3)
<link rel="stylesheet" type="text/css" href="cliente.css" /> <?php class cliente { function __construct() { @$versao = $_GET['versao']; $versao=="mobile" ? $this->viewMobile() : $this->viewWeb(); } public function viewWeb() { $dados = $this->controller(); if(empty($dados)) { echo "Nenhum registro localizado!"; } else { $qtde = count($dados); for($i=0; $i<$qtde; $i++) { $r = $dados[$i]; echo '<div class="cliente_web">#'.$r["cod_cli"]."<br />". $r["nome"]."<br />".$r["fone"].'</div>'; } }
126
cliente.php
(2/3)
echo '<form style="clear:both; text-align=center;">Pesquisar por: <input name="filtro"><input type="submit" value="Buscar"> </form>'; echo '<div class="versao_web"> <span class="disable">Web | </span> <a href="?versao=mobile">Mobile</a> </div>'; } public function viewMobile() { $dados = $this->controller(); if(empty($dados)) { echo "Nenhum registro localizado!"; } else { $qtde = count($dados); for($i=0; $i<$qtde; $i++) { $r = $dados[$i]; echo '<div class="cliente_mobile">'. $r["nome"] . '<br />' . $r["fone"] . '</div>'; } }
127
53
cliente.php
(3/3)
echo '<form>Pesquisar: <input name="filtro"> <input type="submit" value="Buscar"></form>'; echo '<div class="versao_mobile"><a href="?versao=web">Web</a> <span class="disable"> | Mobile</span>'; } public function controller() { ... } public function model($filtro) { ... } } $c = new cliente(); ?>
128
cliente.css
body { font-family: verdana, arial; color: #0033AA; } a { text-decoration: none; color: #0033AA; } .cliente_mobile { border-top: solid 1px #0033AA; border-left: solid 1px #0033AA; margin-bottom: 10px; padding: 3px; width: 300px; } .versao_mobile { border-top: solid 1px #0033AA; width: 300px; text-align: center; } .cliente_web { float: left; border: solid 1px #0033AA; margin: 5px; padding: 7px; width: 150px; height: 80px; text-align: center; background-color: #C6E2FF; } .versao_web { border-top: solid 1px #0033AA; width: 100%; text-align: center; } .disable { color: #999999; }
129
54
MVC separado em 3 classes

Agora iremos refazer o mesmo programa, mas separando as camadas em 3 classes (separadas em 3 arquivos) Vantagens:
Cada camada torna-se independente, podendo-se substituir/atualizar apenas a camada desejada. Permite que mais de um programador possa trabalhar simultaneamente num mesmo mdulo, cada um manipulando um arquivo. possvel ter mais de uma camada de viso Por exemplo, uma view pode apresentar a listagem para PC e outra view pode ser criada para dispositivos mveis.
130
cliente.view.php
<?php include "cliente.controller.php"; class clienteView { public function listar() { $c = new clienteController(); $dados = $c->listar(); if(empty($dados)) { echo "Nenhum registro localizado!"; } else { $qtde = count($dados); for($i=0; $i<$qtde; $i++) { $r = $dados[$i]; echo $r["cod_cli"]." | ".$r["nome"]." | ".$r["fone"]."<br />"; } } echo '<hr /><form>Pesquisar por: <input name="filtro"> <input type="submit" value="Buscar"></form>'; } } $v = new clienteView(); $v->listar(); ?>
131
55
cliente.controller.php
<?php include "cliente.model.php"; class clienteController { public function listar() { @$filtro = addslashes(trim($_GET['filtro'])); $m = new clienteModel(); return $m->listar($filtro); } } ?>
132
cliente.model.php
<?php class clienteModel { public function listar($filtro) { $link = mysql_connect("127.0.0.1", "root", ""); mysql_select_db("db_aula"); $sql = "SELECT cod_cli, nome, fone FROM tb_cliente WHERE nome LIKE '$filtro%'"; $rs = mysql_query($sql); $dados = Array(); if(!empty($rs) AND mysql_num_rows($rs)>0) { while($r = mysql_fetch_array($rs)) { $dados[] = $r; } } return $dados; } } ?>
133
56
Independncia entre as Camadas

Cada camada cumpre sua funo de forma independente
As camadas de controle e de dados no sabem com os dados so apresentados. As camadas de viso e de controle no sabe qual banco de dados est sendo usado. As camadas de viso e de dados no sabem como os dados so validados.
A atualizao de uma camada independente

Se desejar trocar o banco de dados MySQL por Oracle, basta substituir o arquivo cliente.model.php. Se desejar criar uma verso para celular, basta criar um novo arquivo clienteMobile.view.php.
Para cada classe criado um mtodo listar, cada um cumprindo seu papel na respectiva camada.
134
Exerccios
1. Usando MVC, criar uma listagem de livros com os campos: cod_livro, titulo, autor e ano (de publicao). 2. Acrescentar a capa do livro na exibio da listagem. 3. Criar uma segunda viso para apresentar a listagem em dispositivos mveis. 4. Substituir a camada de dados para que seja utilizado outro SGBD no lugar do MySQL.
135
57
EXTJS
Framework para RIA (Rich Internet Applications) Biblioteca JavaScript cross-browser
Camada de Viso (MVC) Suporta diversas linguagens (integrao via JSON) Utiliza JS, XML, JSON, CSS e AJAX Interfaces baseadas em janelas e grids Licena GPL ou licena comercial (U$ 329,00)
136
Carregando o ExtJS:
<link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css"> <script type="text/javascript" src="./extjs/ext-all.js"></script>
ext-all.css
contm os estilos que fazem a ligao do HTML gerado pelo ExtJS com a Skin, a qual contm inmeras linhas de estilos e ligaes com imagens.
ext-all.js
contm o cdigo de todos os componentes visuais e no visuais da biblioteca.
137
58
Banco de Dados
CREATE DATABASE IF NOT EXISTS db_aula; USE db_aula; CREATE TABLE IF NOT EXISTS tb_empresas ( codigo integer not null auto_increment primary key, empresa varchar(50), valor decimal(8,2), variacao decimal(6,2), data date, ativo integer, check(ativo in(0,1)) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_swedish_ci AUTO_INCREMENT=11; INSERT INTO tb_empresas(codigo,empresa,valor,variacao,data,ativo) VALUES ( 1, '3m Co' , 71.72, 0.03, '2011-09-10', 1), ( 2, 'Alcoa Inc' , 29.01, 1.47, '2011-09-09', 1), ( 3, 'Altria Group Inc' , 83.81, 0.34, '2011-09-08', 0), ( 4, 'American Express Company' , 52.55, 0.02, '2011-09-07', 1), ( 5, 'American International Group, Inc.' , 64.13, 0.49, '2011-09-06', 1), ( 6, 'AT&T Inc.' , 31.61, -1.54, '2011-09-05', 1), ( 7, 'Boeing Co.' , 75.43, 0.71, '2011-09-04', 1), ( 8, 'Caterpillar Inc.' , 67.27, 1.39, '2011-09-03', 1), ( 9, 'Citigroup, Inc.' , 49.37, 0.04, '2011-09-02', 1), (10, 'E.I. du Pont de Nemours and Company', 40.48, 1.28, '2011-09-01', 1); COMMIT; 138
Criando a janela do grid

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./ext-4.1.1a/resources/css/ext-all.css" /> <script src="./ext-4.1.1a/ext-all.js"></script> </head> <body> <script> Ext.onReady(function(){ var winGrid = Ext.create('widget.window', { title: 'Empresas', maximizable: true, closable: true, closeAction: 'hide', width: 500, minWidth: 300, height: 300 }); winGrid.show(); }); Ext.onReady indica que j est pronto. </script> Ext.create usado para instanciar objetos. </body> show() o mtodo para janela. </html>
139
59
Criando o grid
(1/3)
<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./ext-4.1.1a/resources/css/ext-all.css" /> <script src="./ext-4.1.1a/ext-all.js"></script> </head> <body> <script> Ext.onReady(function(){ Ext.define('Empresa', { extend: 'Ext.data.Model', fields: [ {name: 'codigo', type: {name: 'empresa', type: {name: 'valor', type: {name: 'variacao', type: {name: 'data', type: {name: 'ativo', type: ] });
'int'}, 'string'}, 'float'}, 'float'}, 'date', dateFormat: 'Y-m-d'}, 'boolean'}
140
Criando o grid
(2/3)
var store = Ext.create('Ext.data.Store', { model: 'Empresa', autoLoad: true, typ indica que a requisio proxy: { usar ajax. type: 'ajax', url indica o programa que ir url: 'listagem_simples.php', processar a chamada. reader: { json o formato dos dados. type: 'json', root indica que a raiz do root: 'dados' retorno chama-se dados. } } }); var grid = Ext.create('Ext.grid.Panel', { border: false, store: store, columns: [ { text: 'Cdigo', width: 60, dataIndex: 'codigo' }, { text: 'Empresa', flex: 1, dataIndex: 'empresa' }, { text: 'Valor', width: 75, dataIndex: 'valor' }, { text: 'Variao', width: 75, dataIndex: 'variacao' }, { text: 'Data', width: 85, dataIndex: 'data' }, { text: 'Situao', width: 60, dataIndex: 'ativo' } ] });
141
60
Criando o grid
(3/3)
var winGrid = Ext.create('widget.window', { title: 'Empresas', layout: 'fit', maximizable: true, collapsible: true, closable: true, closeAction: 'hide', width: 500, minWidth: 300, height: 300, items: grid }).show(); }); </script> </body> </html>
142
listagem_simples.php
<?php $link = mysql_connect("127.0.0.1", "root", ""); $db = mysql_select_db("db_aula"); $sql $rs = "SELECT codigo, empresa, valor, variacao, data, ativo FROM tb_empresas"; = mysql_query($sql); $dados = array(); while($obj = mysql_fetch_object($rs)){ $obj->empresa = utf8_encode($obj->empresa); $dados[] = $obj; } mysql_close($link); echo json_encode(array("dados" => $dados)); ?>
143
61
Formatando os campos do grid
144
Renderizando os campos
(1/3)
columns: Vamos atualizar as colunas [{ do grid, adicionando as formataes dos campos. text: 'Cdigo', width: 60, dataIndex: 'codigo', align: 'right' },{ text: 'Empresa', flex: 1, dataIndex: 'empresa', renderer: Ext.util.Format.uppercase },{ text: 'Valor', width: 75, dataIndex: 'valor', align: 'right', renderer: function(val) { return 'R$ ' + Ext.util.Format.number(val); } },{
145
62
(2/3)
text: 'Variao', width: 75, dataIndex: 'variacao', align: 'center', renderer: function(val) { if (val >= 0) { return '<span style="color:green;">' + val + '%</span>'; } else { return '<span style="color:red;">' + val + '%</span>'; } } },{ text: 'Data', width: 85, dataIndex: 'data', align: 'center', renderer: Ext.util.Format.dateRenderer('d/m/Y') },{
146
(3/3)
text: 'Situao', width: 60, dataIndex: 'ativo', align: 'center', renderer: function(val){ icone = (val==1) ? './img/ativo.gif' : './img/inativo.gif'; return '<img src="' + icone + '" style="width:12px; height12px;">'; } }]
147
63
Ordenao
148
Grid com ordenao

var store = Ext.create('Ext.data.Store', { model: 'Empresa', autoLoad: true, remoteSort: true, sorters: [{ property: 'codigo', direction: 'ASC' }], proxy: { type: 'ajax', url: 'listagem_ordenacao.php', reader: { type: 'json', root: 'dados' } } });
property indica o campo padro para ordenar direction indica se ser crescente (ASC) ou decrescente (DESC). 149
64
listagem_ordenacao.php
<?php @$sort = $_REQUEST['sort']; if(empty($sort)) { $sort->property = 'codigo'; $sort->direction = 'ASC'; } else { $sorters = json_decode(stripslashes($sort)); $sort = $sorters[0]; } $link = mysql_connect("127.0.0.1", "root", ""); $db = mysql_select_db("db_aula"); $sql = "SELECT codigo, empresa, valor, variacao, data, ativo FROM tb_empresas ORDER BY $sort->property $sort->direction"; $rs = mysql_query($sql); $dados = array(); while($obj = mysql_fetch_object($rs)){ $obj->empresa = utf8_encode($obj->empresa); $dados[] = $obj; } mysql_close($link); echo json_encode(array("dados" => $dados)); ?>
150
Paginao
151
65
Grid com paginao

var store = Ext.create('Ext.data.Store', { model: 'Empresa', autoLoad: true, pageSize: 5, proxy: { type: 'ajax', url: 'listagem_paginacao.php', reader: { totalProperty: 'total', type: 'json', root: 'dados' } } }); var grid = Ext.create('Ext.grid.Panel', { bbar: Ext.create('Ext.PagingToolbar', { store: store, displayInfo: true, displayMsg: 'Exibindo {0} - {1} de {2}', beforePageText : 'Pgina', afterPageText : 'de {0}', emptyMsg: "Nenhum registro localizado" }), ... });
152 pageSize indica a quantidade de registros por pgina. totalProperty indica o campo que retorn o total de registros da tabela. bbar a barra de ferramentas inferior.
listagem_paginacao.php
<?php $limit = $_REQUEST['limit']; $start = $_REQUEST['start']; $link = mysql_connect("127.0.0.1", "root", ""); $db = mysql_select_db("db_aula"); $sql = "SELECT COUNT(*) FROM tb_empresas"; $rs = mysql_query($sql); $total = mysql_result($rs,0); $sql = "SELECT codigo, empresa, valor, variacao, data, ativo FROM tb_empresas LIMIT $start, $limit";
$rs = mysql_query($sql); $dados = array(); while($obj = mysql_fetch_object($rs)){ $obj->empresa = utf8_encode($obj->empresa); $dados[] = $obj; } mysql_close($link); echo json_encode(array("dados" => $dados, "total" => $total)); ?>
153
66
Consulta com filtro
154
Grid com filtro

<head> <style>.filter{background-image: url('./img/filter.gif')}</style> ... var grid = Ext.create('Ext.grid.Panel', { tbar: Ext.create('Ext.toolbar.Toolbar', { items: [ '->', 'Pesquisar por: ', { id: 'filtro', xtype: 'textfield', width: 100 },{ text:'Filtrar', iconCls: 'filter', handler:function() { store.reload({ params: { 'filtro': Ext.getCmp('filtro').getValue() } }) } }] }), reload recarrega o store. handler ao a ser executada ao clicar no boto. ... params indica os parmetros passados ao store. });
155
67
listagem_filtro.php
<?php @$filtro = trim(addslashes($_REQUEST['filtro'])); $link = mysql_connect("127.0.0.1", "root", ""); $db = mysql_select_db("db_aula"); $sql = "SELECT codigo, empresa, valor, variacao, data, ativo FROM tb_empresas WHERE empresa LIKE '$filtro%'";
$rs = mysql_query($sql); $dados = array(); while($obj = mysql_fetch_object($rs)){ $obj->empresa = utf8_encode($obj->empresa); $dados[] = $obj; } mysql_close($link); echo json_encode(array("dados" => $dados)); ?>
156
Exerccio
Criar um grid para apresentar as empresas que permita ordenar, paginar e filtrar simultaneamente.
Basicamente, iremos juntar todos os recursos vistos at aqui num nico programa.
157
68
Formulrio
Muitas formataes e validaes de campos em formulrios so realizadas automaticamente pelo EXTJS.
158
formulario.php
(1/6)
locale para definir o idioma das
mensagens padres do EXTJS. <!doctype html> Ext.form.Panel o componente <html lang="pt-BR"> para criao de formulrios. <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./ext-4.1.1a/resources/css/ext-all.css" /> <script src="./ext-4.1.1a/ext-all.js"></script> <script src="./ext-4.1.1a/locale/ext-lang-pt_BR.js"></script> <style> .save{background-image: url('./img/save.png')} .cancel{background-image: url('./img/cancel.png')} </style> </head> <body> <script> Ext.onReady(function(){ var form = Ext.create('Ext.form.Panel', { frame:true, bodyStyle:'padding:5px 5px 0', baseCls: 'x-plain',
159
69
formulario.php
(2/6)
fieldDefaults: { fieldDefaults valor padro para allowBlank: false, os campos do formulrio. labelAlign: 'left', allowBlank indica se o campo labelWidth: 80, pode ser vazio. msgTarget exibe as mensagens width: 200, de erro na lateral. labelSeparator: ':', hidden indica campo oculto anchor: '100%', xtype define o tipo de campo msgTarget: 'side' }, items: [{ name: 'codigo', allowBlank: true, hidden: true },{ name: 'empresa', xtype: 'textfield', fieldLabel: 'Empresa', emptyText:'Digite o nome da empresa', maxLength: 50, maxLengthText: 'A empresa deve ter no mximo 50 caracteres.' },{
160
formulario.php
},{
(3/6)
name: 'valor', xtype: 'numberfield', hideTrigger: true, fieldLabel: 'Valor' name: 'variacao', xtype: 'numberfield', value: 0, minValue: -100, maxValue: 100, allowDecimals: true, decimalPrecision: 2, step: 0.01, fieldLabel: 'Variao' },{ name: 'data', xtype: 'datefield', fieldLabel: 'Data' },{
161
70
formulario.php
(4/6)
name: 'ativo', xtype: 'checkbox', inputValue: 1, checked: true, fieldLabel: 'Situao' }] }); var winForm = Ext.create('widget.window', { title: 'Formulrio', layout: 'fit', resizable: false, modal: true, closable: true, closeAction: 'hide', width: 350, border: false, items: form, buttonAlign:'center',
162
formulario.php
(5/6)
buttons: [{ text: 'Salvar', iconCls: 'save', scale: 'medium', handler: function() { if(form.getForm().isValid()) { winForm.el.mask('Salvando...', 'x-mask-loading'); form.getForm().submit({ url: 'insert.php', method: 'POST', success: function(form, action){ Ext.Msg.alert('SUCESSO', 'Registro salvo com sucesso!'); winForm.el.unmask(); form.reset(); }, failure: function(form, action){ winForm.el.unmask(); Ext.Msg.alert('ERRO', 'Falha ao salvar registro'); } }); } }
163
71
formulario.php
(6/6)
},{ text: 'Cancelar', iconCls: 'cancel', scale: 'medium', handler: function() { form.reset(); } }] }).show(); }); </script> </body> </html>
164
insert.php
<?php @$empresa = trim(addslashes($_REQUEST['empresa'])); @$valor = $_REQUEST['valor']; @$variacao = $_REQUEST['variacao']; @$data = $_REQUEST['data']; @$ativo = empty($_REQUEST['ativo']) ? 0 : 1; if(!empty($data)) $data = "'".implode('-',array_reverse(explode('/',$data)))."'"; $link = mysql_connect("127.0.0.1", "root", ""); $db = mysql_select_db("db_aula"); $sql = "INSERT INTO tb_empresas(empresa, valor, variacao, data, ativo) VALUES('$empresa', $valor, $variacao, $data, $ativo)"; $status = mysql_query($sql); mysql_close($link); $msg = ($status==1) ? 'Sucesso ao inserir registro' : 'Erro ao inserir registro'; echo json_encode(array('success'=>$status, 'msg'=> utf8_encode($msg))); ?>
165
72
Criando um CRUD
Agora iremos juntar o grid e o formulrio, de forma que poderemos fazer as 4 operaes (select, insert, update, delete)
166
crud.php
(1/9)
<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./ext-4.1.1a/resources/css/ext-all.css" /> <script src="./ext-4.1.1a/ext-all.js"></script> <script src="./ext-4.1.1a/locale/ext-lang-pt_BR.js"></script> <style> .insert{background-image: url('./img/insert.png')} .update{background-image: url('./img/update.png')} .delete{background-image: url('./img/delete.png')} .save {background-image: url('./img/save.png' )} .cancel{background-image: url('./img/cancel.png')} </style> </head> <body> <script>
167
73
crud.php
(2/9)
Ext.onReady(function(){ Ext.define('Empresa', { extend: 'Ext.data.Model', fields: [ {name: 'codigo', type: 'int'}, {name: 'empresa', type: 'string'}, {name: 'valor', type: 'float'}, {name: 'variacao', type: 'float'}, {name: 'data', type: 'date', dateFormat: 'Y-m-d'}, {name: 'ativo', type: 'boolean'} ] }); var store = Ext.create('Ext.data.Store', { model: 'Empresa', autoLoad: true, proxy: { type: 'ajax', url: 'select.php', reader: { type: 'json', root: 'dados' } } });
168
crud.php
(3/9)
var grid = Ext.create('Ext.grid.Panel', { border: false, store: store, columns: [ { text: 'Cdigo', width: 60, dataIndex: 'codigo' { text: 'Empresa', flex: 1, dataIndex: 'empresa' { text: 'Valor', width: 75, dataIndex: 'valor' { text: 'Variao', width: 75, dataIndex: 'variacao' { text: 'Data', width: 85, dataIndex: 'data' { text: 'Situao', width: 60, dataIndex: 'ativo' ], tbar: Ext.create('Ext.toolbar.Toolbar', { items: [{ text: 'Incluir', iconCls: 'insert', handler: function() { winForm.action = 'insert'; winForm.setTitle('Form [Inserindo]'); winForm.show(); form.getForm().reset(); } },{
}, }, }, }, }, }
169
74
crud.php
(4/9)
text: 'Alterar', iconCls: 'update', handler: function() { if(grid.getSelectionModel().hasSelection()){ var record = grid.getSelectionModel().getSelection(); form.getForm().loadRecord(record[0]); winForm.action = 'update'; winForm.setTitle('Form [Alterando]'); winForm.show(); }else{ Ext.Msg.alert('AVISO','Selecione o registro para alterar.'); } } },{ text: 'Apagar', iconCls: 'delete', handler: function() { if(grid.getSelectionModel().hasSelection()){ var record = grid.getSelectionModel().getSelection(); Ext.Msg.confirm( 'Ateno', 'Confirma a excluso do registro selecionado?', function(btn){ if(btn == 'yes'){
170
crud.php
(5/9)
Ext.Ajax.request({ url: 'delete.php', params: {codigo: record[0].data.codigo}, success: function(r){ var obj = Ext.decode(r.responseText); if(obj.success){ store.load(); } else{ Ext.Msg.alert('ERRO',obj.msg); } }, failure: function(){ Ext.Msg.alert('Erro no servidor.') } });
} }); }else{ Ext.Msg.alert('AVISO','Selecione o registro para apagar.'); } } }] }) });
171
75
crud.php
(6/9)
var winGrid = Ext.create('widget.window', { title: 'Empresas', layout: 'fit', maximizable: true, closable: true, closeAction: 'hide', width: 500, minWidth: 300, height: 300, items: grid }).show(); var form = Ext.create('Ext.form.Panel', { frame:true, bodyStyle:'padding:5px 5px 0', baseCls: 'x-plain', fieldDefaults: { allowBlank: false, labelAlign: 'left', labelWidth: 80, width: 200, labelSeparator: ':', anchor: '100%', msgTarget: 'side' },
172
crud.php
(7/9)
items: [ { name:'codigo', xtype:'numberfield', allowBlank:true, hidden:true }, { name:'empresa', xtype:'textfield', fieldLabel:'Empresa' }, { name:'valor', xtype:'numberfield', hideTrigger:true, fieldLabel:'Valor'}, { name: 'variacao', xtype: 'numberfield', fieldLabel: 'Variao' }, { name:'data', xtype:'datefield', fieldLabel:'Data' }, { name:'ativo', xtype:'checkbox', fieldLabel:'Situao', checked:true } ] }); var winForm = Ext.create('widget.window', { title: 'Formulrio', layout: 'fit', resizable: false, modal: true, closable: true, closeAction: 'hide', width: 350, border: false, items: form, buttonAlign:'center',
173
76
crud.php
(8/9)
buttons: [{ text: 'Salvar', iconCls: 'save', scale: 'medium', handler: function() { if(form.getForm().isValid()) { winForm.el.mask('Salvando...', 'x-mask-loading'); form.getForm().submit({ url: winForm.action + '.php', method: 'POST', success: function(form, action){ Ext.Msg.alert('SUCESSO', action.result.msg); winForm.el.unmask(); form.reset(); winForm.hide(); store.reload(); }, failure: function(form, action){ winForm.el.unmask(); Ext.Msg.alert('ERRO', action.result.msg); } }); } }
174
crud.php
(9/9)
},{ text: 'Cancelar', iconCls: 'cancel', scale: 'medium', handler: function() { winForm.hide(); } }] }); }); </script> </body> </html>
175
77
select.php
<?php $link = mysql_connect("127.0.0.1", "root", ""); $db = mysql_select_db("db_aula"); $sql $rs = "SELECT codigo, empresa, valor, variacao, data, ativo FROM tb_empresas"; = mysql_query($sql); $dados = array(); if(!empty($rs) && mysql_num_rows($rs)>0) { while($obj = mysql_fetch_object($rs)){ $obj->empresa = utf8_encode($obj->empresa); $dados[] = $obj; } } mysql_close($link); echo json_encode(array("dados" => $dados)); ?>
176
insert.php
<?php @$empresa = trim(addslashes($_REQUEST['empresa'])); @$valor = $_REQUEST['valor']; @$variacao = $_REQUEST['variacao']; @$data = $_REQUEST['data']; @$ativo = empty($_REQUEST['ativo']) ? 0 : 1; if(!empty($data)) $data = "'".implode('-',array_reverse(explode('/',$data)))."'"; $link = mysql_connect("127.0.0.1", "root", ""); $db = mysql_select_db("db_aula"); $sql = "INSERT INTO tb_empresas(empresa, valor, variacao, data, ativo) VALUES('$empresa', $valor, $variacao, $data, $ativo)"; $status = mysql_query($sql); mysql_close($link); $msg = ($status==1) ? 'Sucesso ao inserir registro' : 'Erro ao inserir registro'; echo json_encode(array('success'=>$status, 'msg'=> utf8_encode($msg))); ?>
177
78
update.php
<?php @$codigo = $_REQUEST['codigo']; @$empresa = trim(addslashes($_REQUEST['empresa'])); @$valor = $_REQUEST['valor']; @$variacao = $_REQUEST['variacao']; @$data = $_REQUEST['data']; @$ativo = empty($_REQUEST['ativo']) ? 0 : 1; if(!empty($data)) $data = "'".implode('-',array_reverse(explode('/',$data)))."'"; $link = mysql_connect("127.0.0.1", "root", ""); $db = mysql_select_db("db_aula"); $sql = "UPDATE tb_empresas SET empresa='$empresa',valor=$valor,variacao=$variacao,data=$data,ativo=$ativo WHERE codigo = $codigo"; $status = mysql_query($sql); mysql_close($link); $msg = ($status==1) ? 'Sucesso ao inserir registro' : 'Erro ao inserir registro'; echo json_encode(array('success'=>$status, 'msg'=> utf8_encode($msg))); ?>
178
delete.php
<?php @$codigo = $_REQUEST['codigo']; $link = mysql_connect("127.0.0.1", "root", ""); $db = mysql_select_db("db_aula"); $sql = "DELETE FROM tb_empresas WHERE codigo = $codigo"; $status = mysql_query($sql); mysql_close($link); $msg = ($status==1) ? 'Sucesso ao apagar registro' : 'Erro ao apagar registro'; echo json_encode(array('success'=>$status, 'msg'=> utf8_encode($msg))); ?>
179
79
Melhorando o cdigo PHP

Agora, iremos voltar a trabalhar com POO no PHP. Para isso, iremos criar uma classe empresa que far as 4 operaes do CRUD. O acionamento das funcionalidades ser feito atravs do mtodo construtor, que dever receber a ao a ser executada.
180
Ajustes no EXTJS
// SELECT var store = Ext.create('Ext.data.Store', { model: 'Empresa', autoLoad: true, proxy: { type: 'ajax', url: 'empresa.php', extraParams: { action: 'select' }, ...
// INSERT e UPDATE form.getForm().submit({ url: 'empresa.php', params: { action: winForm.action }, ...
// DELETE Ext.Ajax.request({ url: 'empresa.php', params: {codigo: record[0].data.codigo, action: 'delete'}, ...
181
80
empresa.php
<?php class empresa {
(1/5)
function __construct() { mysql_connect("127.0.0.1", "root", ""); mysql_select_db("db_aula"); @$action = $_REQUEST['action']; if($action=='select') $this->select(); else if($action=='insert') $this->insert(); else if($action=='update') $this->update(); else if($action=='delete') $this->delete(); } function __destruct() { mysql_close(); }
182
empresa.php
private function select() {
(2/5)
$sql = "SELECT codigo, empresa, valor, variacao, data, ativo FROM tb_empresas"; $rs = mysql_query($sql); $dados = array(); if(!empty($rs) AND mysql_num_rows($rs)>0) { while($obj = mysql_fetch_object($rs)){ $obj->empresa = utf8_encode($obj->empresa); $dados[] = $obj; } } echo json_encode(array("dados" => $dados)); }
183
81
empresa.php
private function insert() {
(3/5)
@$empresa = trim(addslashes($_REQUEST['empresa'])); @$valor = $_REQUEST['valor']; @$variacao = $_REQUEST['variacao']; @$data = $_REQUEST['data']; @$ativo = empty($_REQUEST['ativo']) ? 0 : 1;
if(!empty($data)) $data = "'".implode('-',array_reverse(explode('/',$data)))."'";
$sql = "INSERT INTO tb_empresas(empresa, valor, variacao, data, ativo) VALUES('$empresa', $valor, $variacao, $data, $ativo)"; $status = mysql_query($sql); $msg = ($status==1) ? 'Sucesso ao inserir registro' : 'Erro ao inserir registro'; echo json_encode(array('success'=>$status, 'msg'=> utf8_encode($msg))); }
184
empresa.php
(4/5)
private function update() { @$codigo = $_REQUEST['codigo']; @$empresa = trim(addslashes($_REQUEST['empresa'])); @$valor = $_REQUEST['valor']; @$variacao = $_REQUEST['variacao']; @$data = $_REQUEST['data']; @$ativo = empty($_REQUEST['ativo']) ? 0 : 1;
if(!empty($data)) $data = "'".implode('-',array_reverse(explode('/',$data)))."'";
$sql = "UPDATE tb_empresas SET empresa='$empresa', valor=$valor, variacao=$variacao, data=$data, ativo=$ativo WHERE codigo = $codigo"; $status = mysql_query($sql); $msg = ($status==1) ? 'Sucesso ao atualizar registro' : 'Erro ao atualizar registro'; echo json_encode(array('success'=>$status, 'msg'=> utf8_encode($msg))); }
185
82
empresa.php
(5/5)
private function delete() { @$codigo = $_REQUEST['codigo']; $sql = "DELETE FROM tb_empresas WHERE codigo = $codigo"; $status = mysql_query($sql); $msg = ($status==1) ? 'Sucesso ao apagar registro' : 'Erro ao apagar registro'; echo json_encode(array('success'=>$status, 'msg'=> utf8_encode($msg))); } } new empresa(); ?>
186
Modelo MVC + POO herana

class coreView class coreController class coreModel class moduleView class moduleController class moduleModel
Esta proposta unifica as vantagens de cada padro, gerando um modelo organizado, robusto e de alta produtividade.
187
83
Exemplo MVC + POO herana
coreView.js
empresaView.js
coreController.php
empresaController.php
coreModel.php
empresaModel.php
188
Criando as 3 classes do CORE
As 3 classes a seguir serviro de base para todos os grids a serem criados.

coreView.js coreController.php coreModel.php
189
84
coreView.js
Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.form.*' ]);
(1/4)
Ext.define('Ext.grid.coreView', { extend: 'Ext.util.Observable', constructor: function(){ this.callParent(); Ext.QuickTips.init(); Ext.BLANK_IMAGE_URL = '../img/s.gif'; this.initStore(); this.initGrid(); },
190
coreView.js
(2/4)
initStore: function() { Ext.define('Ext.grid.Model', { extend: 'Ext.data.Model', fields: this.fields }); this.store = Ext.create('Ext.data.Store', { model: 'Ext.grid.Model', autoLoad: true, proxy: { type: 'ajax', url: this.url, actionMethods: 'POST', extraParams: { action: 'select' }, reader: { type: 'json', root: 'dados' } } }); },
191
85
coreView.js
(3/4)
initGrid: function() { this.tbar = Ext.create('Ext.toolbar.Toolbar', { items: [ '->', 'Pesquisar por: ', { id: this.filterId, xtype: 'textfield', width: 100, scope: this },{ text:'Filtrar', iconCls: 'filter', handler: this.filter, scope: this }] }); this.grid = Ext.create('Ext.grid.Panel', { border: false, store: this.store, columns: this.columns });
192
coreView.js
(4/4)
this.winGrid = Ext.create('widget.window', { title: this.title, items: this.grid, layout: 'fit', maximizable: true, closable: true, closeAction: 'hide', width: this.width ? this.width : 500, height: this.height ? this.height : 300, minWidth: 300, minHeight: 200, tbar: this.tbar }); }, filter: function() { this.store.reload({ params: { filter: Ext.getCmp(''+this.filterId+'').getValue() } }) } });
193
86
coreController.php
<?php class coreController { function getString($field) { return @trim(addslashes($_REQUEST[$field])); } } ?>
194
coreModel.php
<?php class coreModel { private $ip private $user private $pwd private $db = = = = "127.0.0.1"; "root"; ""; "db_aula";
(1/2)
function __construct() { @mysql_connect($this->ip, $this->user, $this->pwd); @mysql_select_db($this->db); } function __destruct() { @mysql_close(); } public function query($sql) { return mysql_query($sql); }
195
87
coreModel.php
(2/2)
public function num_rows($rs) { $r = mysql_num_rows($rs); return $r; } public function fetch_object($rs) { return mysql_fetch_object($rs); } public function select_all($sql) { $rs = $this->query($sql); $total = empty($rs) ? 0 : $this->num_rows($rs); $dados = null; if(!empty($rs) AND ($total>0)) { while($r = $this->fetch_object($rs)) { $dados[] = array_map('utf8_encode',(array) $r); } } return $dados; } } ?>
196
Criando o grid para empresas

Agora que j temos nossas 3 classes bases, iremos efetivamente criar o grid. Ficar muito claro a diminuio de cdigo e o aumento de produtividade. Todos os demais mdulos iro compartilhar das classes bases (CORE).
197
88
empresaView.js
(1/3)
Ext.define('Ext.grid.empresaView', { extend: 'Ext.grid.coreView', url: './empresaController.php', title: 'Gerenciar Empresas', filterId: 'filterEmpresa', fields: [ {name: 'codigo', type: 'int'}, {name: 'empresa', type: 'string'}, {name: 'valor', type: 'float'}, {name: 'variacao', type: 'float'}, {name: 'data', type: 'date', dateFormat: 'Y-m-d'}, {name: 'ativo', type: 'bool'} ], columns: [{ text: 'Cdigo', width: 60, align: 'right', dataIndex: 'codigo' },{ text: 'Empresa',
198
empresaView.js
},{
(2/3)
flex: 1, dataIndex: 'empresa', renderer: Ext.util.Format.uppercase text: 'Valor', width: 75, align: 'right', dataIndex: 'valor', renderer: function(val) { return 'R$ ' + Ext.util.Format.number(val); } },{ text: 'Variao', width: 75, align: 'center', dataIndex: 'variacao', renderer: function(val) { if (val >= 0) { return '<span style="color:green;">' + val + '%</span>'; } else {
199
89
empresaView.js
} } },{
(3/3)
return '<span style="color:red;">' + val + '%</span>';
text: 'Data', width: 85, dataIndex: 'data', align: 'center', renderer: Ext.util.Format.dateRenderer('d/m/Y') },{ text: 'Situao', width: 60, dataIndex: 'ativo', align: 'center', renderer: function(val){ classe = (val==1) ? 'active' : 'inactive'; return '<div class='+classe+'></div>'; } }] });
200
empresaController.php
<?php require_once('coreController.php'); require_once('empresaModel.php'); class empresaController extends coreController { function __construct() { @$action = $_REQUEST['action']; if($action=='select') $this->select(); } private function select() { $filter = $this->getString('filter'); $m = new empresaModel(); $dados = $m->select($filter); echo json_encode(array('dados' => $dados)); } } new empresaController(); ?>
201
90
empresaModel.php
<?php require_once('coreModel.php'); class empresaModel extends coreModel { function __construct() { parent::__construct(); } public function select($filter) { $sql = "SELECT codigo, empresa, valor, variacao, data, ativo FROM tb_empresas WHERE empresa LIKE '$filter%'"; return $this->select_all($sql); } } ?>
202
Criando o arquivo index.html

<!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="../ext-4.1.1a/resources/css/ext-all.css" /> <script src="../ext-4.1.1a/ext-all.js"></script> <link rel="stylesheet" href="./css/icones.css" /> </head> <body> <script> Ext.Loader.setConfig({enabled:true}); Ext.Loader.setPath('Ext.grid','.'); Ext.onReady(function(){ var objEmpresa = new Ext.create("Ext.grid.empresaView"); objEmpresa.winGrid.show(); }); </script> </body> </html>
203
91
Trabalho: Troca de Mensagens

(individual ou em dupla)
Elaborar um sistema para troca de mensagens on-line entre usurios. Para ter acesso ao sistema, o usurio dever realizar login. Qualquer usurio poder se cadastrar. O sistema deve permitir o envio de mensagens sempre direcionadas a um outro usurio. O usurio poder visualizar tanto suas mensagens enviadas, quando as suas mensagens recebidas.
204
Troca de Mensagens
(cont.)
205
92
Troca de Mensagens
(cont.)
CREATE DATABASE IF NOT EXISTS db_aula; USE db_aula; CREATE TABLE IF NOT EXISTS tb_usuario( id integer not null primary key auto_increment, nome varchar(40) not null UNIQUE, senha varchar(40) not null ); CREATE TABLE IF NOT EXISTS tb_mensagem( id integer not null primary key auto_increment, remetente integer not null, destinatario integer not null, mensagem varchar(140), data_hora datetime, foreign key(remetente) references tb_usuario(id), foreign key(destinatario) references tb_usuario(id) );
206
Trabalho
(1/4)
Elaborar um mdulo de controle de acesso, no qual seja necessrio informar o nome e a senha para ter acesso ao sistema. Novos usurios tambm podero se cadastrar, mas no se deve aceitar nome de usurio repetido.
207
93
Trabalho
(2/4)
Ao entrar no sistema, deve-se exibir 2 abas para mensagens recebidas e enviadas. Na aba Enviadas, deve-se exibir todas as mensagens postadas pelo usurio ordenando pelas mensagens mais recentes.
208
Trabalho
(3/4)
O boto Nova deve abrir um formulrio para envio de uma nova mensagem. O campo para do formulrio deve ser carregado com um combo com todos os usurios cadastrados, exceto o prprio usurio conectado.
209
94
Trabalho
(4/4)
Na aba Recebidas, deve-se listar todas as mensagens recebidas, ordenadas pelas mais recentes. O boto Atualizar deve verificar novas mensagens. E a opo Atualizao automtica dever atualizar a tela a cada 5 minutos.
210
Bibliografia
Livro Texto: 1. PHP 4: A Bblia; Converse, Tim et al; Ed. Campus; 1 edio; 2001; 5 exemplares. 2. Use a Cabea: PHP e MySQL; Beighley, Linn; Ed. Alta Books; 1 edio; 2010; 10 exemplares. 3. Ajax (ASYNCHRONOUS JAVASCRIPT AND XML); Soares, Walace; Ed. rica; 1 edio; 2006; 10 exemplares. Complementar: 4. Profissional PHP: Programando; Castagneto, Jesus et al; Ed. Makron Books; 1 edio; 2001; 1 exemplar. 5. PHP e MySQL: Desenvolvimento Web; Welling, Luke et al; Ed. Campus; 1 edio; 2001; 1 exemplar. 6. Programando em PHP: Conceitos e Aplicaes; Soares, Walace; Ed. rica; 1 edio; 2000; 5 exemplares. 7. Fundamentos de PHP; Meloni, Julie C.; Ed. Cincia Moderna; 1 edio; 2000; 5 exemplares. 8. Guia de Consulta Rpida: Integrando PHP com MySQL; Stoco, Lucio M.; Ed. Novatec; 1 edio; 2000; 5 exemplares.
211
95

Extjs

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Extjs

Transféré par

Droits d'auteur :

Formats disponibles

Tpicos Avanados em Computao

Prof. Dr. Wagner J. Dizer

Lins-SP, Agosto de 2012

Roteiro das Aulas

Instalao e Configuraes Bsicas

Interface de instalao EasyPHP

Para carregar o EasyPHP

Menu para iniciar o EasyPHP

Endereo para acesso via browser

ATENO: Dependendo do verso, necessrio indicar a porta. Ex.: http://127.0.0.1:8888/

Introduo Linguagem PHP

<?php $texto = "Primeiro Script"; echo $texto; ?>

Detalhes do Primeiro Exemplo

Utilizando Formulrios em HTML

Detalhes do Segundo Exemplo

$_REQUEST retorna o valor contido num campo do formulrio.

$_REQUEST requisita valores enviados pelos mtodos GET e POST.

Tipos de Campos num Formulrio

Lao de Repetio - for

Lao de Repetio - while

Incluso de outros scripts

Uso de Vetor (array)

Exerccio Calculadora com login

Utilizando Banco de Dados

Principais funes para MySQL

Verificando a conexo com o BD

@$link = mysql_connect("127.0.0.1", "root", "");

Uso de PHP com outros SGBDs

Estudo de Caso: Agenda Eletrnica

<?php include "menu.php"; ?>

Inserir novos registros no BD

Agenda Eletrnica verso 2.0

<?php $link = mysql_connect("127.0.0.1","root",""); mysql_select_db("db_aula"); ?>

<?php include "grid.php"; ?>

Trabalho: Cadastro de Cidades

Telas do mdulo de cidades

Conceitos sobre Orientao a Objetos

Criao da Classe Pessoa em PHP

Instncias da Classe Pessoa

Instncias da Classe Funcionario

Sada: Primeira classe construda Realizando Operaes Primeira classe destruda

Base para criar um CRUD

Base para criar um CRUD

Classe genrica para database

Criando um CRUD completo

Layout das Telas

Mudanas no construtor ...

Mudanas no grid ...

MVC Principais Vantagens

'(14) 3333-3333'), '(19) 4444-4444'), '(19) 5555-5555'), '(19) 2222-2222');

('Gustavo', '(48) 9999-9999'),

MVC para listagem simples

MVC para listagem simples

Duas vises compartilhando as camadas de controle e de dados

Aparncia de cada viso:

Verifica se a resoluo e redireciona para a verso correta.

MVC separado em 3 classes

Independncia entre as Camadas

A atualizao de uma camada independente

Criando a janela do grid

'int'}, 'string'}, 'float'}, 'float'}, 'date', dateFormat: 'Y-m-d'}, 'boolean'}

Formatando os campos do grid

Grid com ordenao