O GUIA PRÁTICO DO DREAMWEAVER CS3

CENTRO ATLÂNTICO O GUIA PRÁTICO DO DREAMWEAVER CS3 com PHP, JAVASCRIPT E AJAX

PEDRO REMOALDO O GUIA PRÁTICO DO DREAMWEAVER CS3 com PHP, JAVASCRIPT E AJAX Portugal/2008

Reservados todos os direitos por Centro Atlântico, Lda. Qualquer reprodução, incluindo fotocópia, só pode ser feita com autorização expressa dos editores da obra. O GUIA PRÁTICO DO DREAMWEAVER CS3 COM PHP, JAVASCRIPT E AJAX Colecção: Tecnologias Autor: Pedro Remoaldo Direcção gráfica: Centro Atlântico Revisão técnica: Centro Atlântico Capa: Paulo Buchinho Centro Atlântico, Lda., 2008 Av. Dr. Carlos Bacelar, 968 Escr. 1 A 4764-901 V. N. Famalicão Rua da Misericórdia, 76 1200-273 Lisboa Portugal Tel. 808 20 22 21 geral@centroatlantico.pt www.centroatlantico.pt Impressão e acabamento: Inova 1ª edição: Fevereiro de 2008 ISBN: 978-989-615-058-7 Depósito legal: 271.471/08 Marcas registadas: Todos os termos mencionados neste livro conhecidos como sendo marcas registadas de produtos e serviços foram apropriadamente capitalizados. A utilização de um termo neste livro não deve ser encarada como afectando a validade de alguma marca registada de produto ou serviço. O Editor e o Autor não se responsabilizam por possíveis danos morais ou físicos causados pelas instruções contidas no livro nem por endereços Internet que não correspondam às Home- -Pages pretendidas. O Guia Prático do Dreamweaver CS3 com PHP, JavaScript e Ajax é uma publicação independente não filiada na Adobe Systems Incorporated.

ÍNDICE Prefácio 21 Introdução 21 Público-alvo e pré-requisitos 21 Características principais do livro 22 Convenções usadas 22 Visão geral e Organização 23 Sobre o Autor 27 1 Desenvolvimento de sites Web 29 1.1 Páginas estáticas 29 1.2 Páginas interactivas 30 1.3 Tecnologias client-side 31 1.3.1 Camada conteúdo HTML 33 1.3.2 Camada apresentação CSS 33 1.3.3 Camada comportamento JavaScript 34 1.4 JavaScript 35 1.4.1 ECMAScript (ECMA-262) 36 1.4.2 A evolução da linguagem JavaScript 36 1.4.3 Desactivar o client-side scripting 37 1.5 DHTML e DOM Scripting 37 1.6 Páginas dinâmicas 38

8 O GUIA PRÁTICO DO DREAMWEAVER CS3 COM PHP, JAVASCRIPT E AJAX 1.6.1 Metodologia das três camadas 40 1.6.2 Tecnologias 42 1.6.3 Ambientes de desenvolvimento e produção 43 1.7 Apache, PHP e MySQL 44 1.7.1 Apache 44 1.7.2 PHP 45 1.7.3 MySQL 47 1.8 Ajax 48 1.8.1 AJAX no Dreamweaver CS3 49 2 Definição de sites no Dreamweaver 51 2.1 Criação de um site Dreamweaver 51 2.1.1 Atribuição de um nome ao site 54 2.1.2 Selecção da tecnologia de servidor 54 2.1.3 Edição de ficheiros 55 2.1.4 Servidores locais, remotos e de teste 55 2.1.5 URL Prefix 61 2.1.6 Remote site 63 2.1.7 Root folders 64 2.1.8 Trabalhar num ambiente colaborativo 64 2.1.9 Confirmação das selecções efectuadas 65 2.2 Testar o site 66 2.3 Alteração de um site 69 2.3.1 Local Info 69 2.3.2 Remote Info 70 2.3.3 Testing Server 71 2.4 Editar um remote site 72 2.5 Gestão de ficheiros 73 2.5.1 Abrir, manipular e localizar ficheiros 73 2.5.2 Check in e check out de ficheiros 78 2.5.3 Obter e enviar ficheiros 79 2.5.4 Sincronizar ficheiros 82 2.5.5 Trabalhar com um mapa do site 84 2.5.6 Site cloaking 86 2.5.7 Design Notes 87 2.6 Gestão de sites 89

ÍNDICE 9 3 Trabalhar com código no Dreamweaver 91 3.1 Code View 91 3.1.1 Code Hints 93 3.2 Design View 95 3.3 Split View 96 3.4 Code Inspector 97 3.5 Coder Layout versus Designer Layout 98 3.6 Coding toolbar 99 3.7 Outras opções para formatação do código 106 3.7.1 Word Wrap 106 3.7.2 Syntax coloring 107 3.7.3 Hidden Characters 108 3.7.4 Indentação 108 3.7.5 Formatação de código 110 3.7.6 Opções de Code Rewriting 110 3.7.7 Tipos de letra 111 3.8 Outras operações 112 3.8.1 Pesquisar 112 3.8.2 Imprimir o código 112 3.9 Utilizar um editor de código externo 113 3.10 Painel Snippets 114 3.10.1 Adicionar um novo snippet 115 3.10.2 Inserir um snippet na página 118 3.10.3 Editar um snippet existente 118 3.10.4 Eliminar um Snippet 119 3.10.5 Partilhar um snippet 119 3.10.6 Associar atalhos por teclado a snippets 119 3.11 Utilizar a Code Reference 121 4 A linguagem JavaScript 123 4.1 Utilizar JavaScript em páginas Web 123 4.2 Regras sintácticas da linguagem JavaScript 125 4.3 Utilização de comentários 126 4.4 Variáveis 127 4.4.1 Atribuição de valores a variáveis 128

10 O GUIA PRÁTICO DO DREAMWEAVER CS3 COM PHP, JAVASCRIPT E AJAX 4.5 Tipos de dados 128 4.5.1 Dados booleanos 128 4.5.2 Dados numéricos inteiros 129 4.5.3 Dados numéricos de vírgula flutuante 129 4.5.4 Sequências de caracteres 129 4.6 Apresentar informação no browser 130 4.7 Operadores 131 4.7.1 Operadores aritméticos 131 4.7.2 Concatenação de strings 131 4.8 Estruturas de controlo 132 4.8.1 if 132 4.8.2 Expressões e condições 134 4.8.3 switch 136 4.8.4 while 137 4.8.5 do while 138 4.8.6 for 138 4.9 Funções 139 4.9.1 Definir e invocar uma função 139 4.9.2 Utilização de parâmetros 140 4.9.3 Valores de retorno 141 4.9.4 Funções internas 141 4.10 Esfera de acção (scope) 142 4.11 Objectos 143 4.11.1 Conceitos básicos 143 4.11.2 Objectos predefinidos 144 4.11.3 Criação de classes e instanciação de objectos 144 4.11.4 Manipulação de objectos 145 4.12 O objecto array 146 4.12.1 Métodos 147 4.13 O objecto String 148 4.14 O objecto Math 151 4.14.1 Propriedades 152 4.14.2 Métodos 152 4.15 O objecto Date 154 4.16 O objecto RegExp 155 4.17 Tratamento e depuração de erros 157 4.17.1 O comando try catch 157 4.17.2 Excepções e o comando throw 158 4.17.3 O evento onerror 158

ÍNDICE 11 4.17.4 Utilização de comentários 159 4.17.5 Depuração de erros utilizando browsers 160 5 Document Object Model 161 5.1 Evolução e versões do DOM 163 5.2 Nós e estrutura da árvore do DOM 163 5.3 Aceder aos nós 165 5.3.1 Utilizar o DOM Level 0 165 5.3.2 Utilizar o W3C DOM 166 5.4 Navegar a árvore DOM 168 5.4.1 Localizar um pai 169 5.4.2 Localizar filhos 169 5.4.3 Localizar irmãos 170 5.5 Obter informação 170 5.5.1 Obter o valor de um atributo 171 5.6 Atribuir valores 172 5.7 Mudar estilos 173 5.7.1 Alterar estilos recorrendo a classes 174 5.8 Inserir e remover elementos na árvore DOM 175 5.9 Propriedades do objecto document 177 5.10 Browser Object Model 178 5.10.1 O objecto window 179 5.10.2 Dimensões do ecrã e da janela do browser 179 5.10.3 Mover, redimensionar e fazer scrolling da janela 180 5.10.4 Focus e blur 181 5.10.5 Trabalhar com janelas de pop-up 181 5.10.6 Navegação 183 5.10.7 O objecto navigator 184 5.10.8 alert, confirm e prompt 185 6 Eventos 187 6.1 Eventos e event handlers 188 6.1.1 Eventos disponíveis 188 6.1.2 Criar event handlers 190 6.1.3 Acções por omissão e valores de retorno 192 6.1.4 Invocar explicitamente os event handlers 193

12 O GUIA PRÁTICO DO DREAMWEAVER CS3 COM PHP, JAVASCRIPT E AJAX 6.1.5 Problemas com os event handlers 194 6.2 Event listeners 195 6.3 Eventos no Dreamweaver 196 6.4 Exemplos 196 6.4.1 Combinar eventos com CSS 198 7 JavaScript no Dreamweaver CS3 203 7.1 Inserir scripts 203 7.1.1 No script 206 7.1.2 Secção Head 207 7.1.3 Eventos 208 7.2 Alterar um script 209 7.3 Ficheiros Javascript externos 210 7.3.1 Visualizar páginas no Internet Explorer 212 7.4 Ajuda sobre o JavaScript 213 7.5 Snippets JavaScript 213 8 Behaviors 215 8.1 Behaviors, eventos e acções 215 8.2 Utilizar behaviors 215 8.2.1 O painel BEHAVIORS 216 8.2.2 Criar uma behavior 217 8.2.3 Gerir eventos 218 8.2.4 Invocar funções personalizadas 220 8.3 Swap Image e Swap Image Restore 220 8.3.1 Swap Image Restore 222 8.3.2 Preload Images 222 8.3.3 Rollover Image 223 8.3.4 Exemplo 224 8.4 Call JavaScript 228 8.5 Trabalhar com janelas de pop-up 229 8.6 Show-Hide Elements 236 8.7 Set Text 241 8.7.1 Set Text of Container 241 8.7.2 Set Text of Frame 243

ÍNDICE 13 8.7.3 Set Text of Status Bar 244 8.7.4 Set Text of Text Field 245 8.8 Check Plugin 246 8.9 Go to URL 247 8.10 Drag AP Element 248 8.11 Pop-up message 260 8.12 Spry Effects 260 8.12.1 Appear/Fade 261 8.12.2 Blind 263 8.12.3 Grow/Shrink 263 8.12.4 Highlight 264 8.12.5 Shake 265 8.12.6 Slide 266 8.12.7 Squish 267 8.13 Behaviors deprecated 267 8.14 Utilizar outras behaviors 267 8.14.1 Instalar behaviors 270 9 Elementos de navegação 271 9.1 Navigation Bar 271 9.1.1 Set Nav Bar 274 9.2 Jump Menu e Jump Menu Go 276 9.3 Spry Widgets 278 9.4 Spry Menu Bar 280 9.4.1 Alterar o aspecto de uma Spry Menu Bar 285 9.4.2 Remover uma SPRY MENU BAR 290 9.5 Spry Tabbed Panel 290 9.5.1 Formatar os painéis 292 9.6 Spry Accordion Panel 295 9.6.1 Formatar um Spry Accordion Panel 299 9.7 Spry Collapsible Panel 301 9.7.1 Formatar a aparência de um SPRY COLLAPSIBLE PANEL 303

14 O GUIA PRÁTICO DO DREAMWEAVER CS3 COM PHP, JAVASCRIPT E AJAX 10 Trabalhar com Formulários 307 10.1 Validate Form 307 10.2 Validação com widgets Spry 309 10.2.1 Utilizar widgets de validação com tabelas 312 10.3 Spry Validation Text Field 313 10.3.1 Preview States 315 10.3.2 Criar padrões personalizados de validação 316 10.3.3 Alterar a aparência dos campos e das mensagens 317 10.4 Spry Validation Textarea 317 10.4.1 Alterar a aparência dos campos e das mensagens 320 10.5 Spry Validation Checkbox 320 10.5.1 Alterar a aparência das mensagens 322 10.6 Spry Validation Select 322 10.6.1 Alterar a aparência dos campos e das mensagens 324 10.7 Utilizar JavaScript para aceder aos campos dos formulários 324 10.7.1 Melhorar a behavior Validate Form 328 10.7.2 Interacção entre campos de um formulário 329 11 Animação e timelines 335 11.1 Timelines 336 11.1.1 Algumas regras 337 11.2 O painel TIMELINES 337 11.3 Adicionar elementos AP e imagens ao painel TIMELINES 340 11.4 Criar animações 341 11.4.1 Alterar as sequências de animação 343 11.4.2 Adicionar keyframes 343 11.4.3 Remover elementos da timeline 345 11.4.4 Mudar a velocidade da animação 345 11.5 Gravar o caminho de um elemento AP 346 11.6 Desencadear behaviors nas timelines 347 11.7 Criar um slideshow 351 11.8 Utilizar múltiplas timelines 354 11.9 Copiar e colar animações 355 11.10 Aplicar uma sequência de animação a um objecto diferente 356

ÍNDICE 15 12 Instalar o Apache, PHP e MySQL 357 12.1 Apache 357 12.1.1 Instalação do Apache 357 12.1.2 Testar a instalação do Apache em Windows 361 12.1.3 Ficheiros de configuração 362 12.1.4 Aplicar alterações 363 12.2 PHP 364 12.2.1 Instalar o PHP em Windows 365 12.2.2 Ficheiro de configuração php.ini 367 12.3 MySQL 369 12.3.1 Instalação em Windows 370 12.3.2 Configuração 371 12.3.3 Executar o MySQL como um serviço Windows 373 12.3.4 Testar a instalação MySQL 374 12.3.5 Configurar o PHP para trabalhar com o MySQL 375 12.4 Pacotes integrados 375 13 A linguagem PHP 377 13.1 Utilizar PHP em páginas Web 377 13.2 Utilização de comentários 379 13.3 Variáveis 379 13.4 Tipos de dados 380 13.5 Apresentar informação no browser 381 13.6 Operadores 383 13.7 Estruturas de controlo 384 13.8 Arrays 386 13.9 Funções 388 13.10 Esfera de acção (scope) 390 13.10.1 Variáveis locais (local variables) 390 13.10.2 Variáveis globais (global variables) 391 13.10.3 Parâmetros de funções (function parameters) 392 13.10.4 Variáveis estáticas (static variables) 392 13.10.5 Variáveis superglobais 393 13.11 Formulários e querystrings 394 13.11.1 Querystrings 395 13.12 Inclusão de ficheiros 396

16 O GUIA PRÁTICO DO DREAMWEAVER CS3 COM PHP, JAVASCRIPT E AJAX 13.13 Objectos 397 13.14 XML 399 14 Trabalhar com PHP no Dreamweaver 401 14.1 Server behaviors 401 14.2 Objectos PHP 403 14.2.1 Form Variables 404 14.2.2 URL Variables 405 14.2.3 Session Variables 405 14.2.4 Cookie Variables 405 14.2.5 Include 406 14.2.6 Require 406 14.2.7 PHP Page Encoding 407 14.2.8 Code Block 407 14.2.9 Echo 407 14.2.10 Comentários 408 14.2.11 If e Else 408 15 Criar e utilizar bases de dados 409 15.1 Administração do MySQL 409 15.1.1 Ferramentas da linha de comandos 409 15.1.2 Ferramentas gráficas 410 15.1.3 MySQL Administrator 412 15.1.4 MySQL Query Browser 413 15.1.5 phpmyadmin 414 15.1.6 MySQL Workbench 418 15.2 Criar bases de dados e tabelas 418 15.2.1 Utilizar o MySQL Administrator 419 15.2.2 Utilizar o phpmyadmin para criar tabelas 425 15.3 Tipos de dados 426 15.4 Conversão de bases de dados 430 15.4.1 MySQL Migration Toolkit 430 15.5 Listar o conteúdo das tabelas 437 15.5.1 MySQL Query Browser 437 15.5.2 phpmyadmin 442 15.6 Cópias das bases de dados 444 15.6.1 Utilizando a linha de comandos 444

ÍNDICE 17 15.6.2 Utilizando o MySQL Administrator 444 15.6.3 Utilizando o phpmyadmin 447 15.7 Definição de utilizadores e permissões 449 15.7.1 MySQL Administrator 449 15.7.2 Utilitário mysql 452 15.8 Estabelecer ligações com o MySQL a partir do Dreamweaver 453 16 Aceder a dados de uma base de dados MySQL utilizando PHP 459 16.1 Criar um recordset 459 16.1.1 Código produzido pelo Dreamweaver 462 16.1.2 Apresentar dados numa página 463 16.1.3 Paginação dos resultados 470 16.1.4 Informação sobre os resultados 478 16.1.5 Seleccionar uma página de resultados 480 16.2 Criar uma relação mestre-detalhe 482 16.2.1 Página Mestre 482 16.2.2 Página Detalhe 485 16.2.3 Processo automático 488 16.2.4 Funcionalidades adicionais 489 16.3 Pesquisar informação 491 16.3.1 Apresentação dos resultados 493 16.3.2 Funcionalidades adicionais 498 16.4 Elementos dinâmicos 505 16.4.1 Lista de países 506 16.4.2 Produzir os resultados 512 17 Manipular dados 517 17.1 Inserção de dados 517 17.1.1 Criação do formulário de inserção de dados 517 17.1.2 Código produzido pelo Dreamweaver 522 17.1.3 Validação dos dados introduzidos 523 17.2 Actualização de dados 528 17.2.1 Selecção dos dados a serem alterados 529 17.2.2 Apresentar os dados a serem alterados 530 17.2.3 Testar o formulário 531 17.2.4 Update Record 532

18 O GUIA PRÁTICO DO DREAMWEAVER CS3 COM PHP, JAVASCRIPT E AJAX 17.2.5 Código produzido pelo Dreamweaver 533 17.2.6 Alterações ao formulário 534 17.2.7 Validação dos dados alterados 535 17.2.8 Cancelar a alteração dos dados 535 17.3 Eliminação de dados 536 18 Autenticação de utilizadores 541 18.1 Base de dados com informação sobre os utilizadores 542 18.2 Página inicial 544 18.3 Registo de utilizadores 544 18.3.1 Formulário de registo 545 18.3.2 Validação do preenchimento dos campos 546 18.3.3 Alterações de funcionamento 547 18.3.4 Inserir os dados na base de dados 547 18.3.5 Testar a introdução de valores em PHP 548 18.3.6 Testar a existência de valores na tabela de utilizadores 551 18.3.7 Gestão de erros 553 18.3.8 Determinar o código de utilizador 556 18.4 Autenticação de utilizadores 557 18.4.1 Validar o utilizador 558 18.4.2 Campos de preenchimento obrigatório 559 18.4.3 Gestão de erros 560 18.4.4 Código produzido pela server behavior Log In User 561 18.4.5 Sessões 563 18.4.6 Alterações à página index.php 564 18.5 Logout 566 18.6 Restringir o acesso às páginas do sítio Web 568 18.6.1 Restringir acesso a áreas de páginas 571 18.7 Editar os dados do utilizador 571 18.7.1 Gestão dos erros 577 18.7.2 Validação dos valores introduzidos no formulário 582 18.7.3 Alteração da palavra-passe 584 18.8 Validação automática do utilizador 586 18.8.1 Utilização de cookies 586

ÍNDICE 19 19 Utilização avançada do PHP 591 19.1 Upload de ficheiros e utilização de imagens 591 19.1.1 Criação das tabelas 592 19.1.2 Criação da página autores.php 594 19.1.3 Criação da página livros.php 597 19.1.4 Página com informação sobre os livros 609 19.2 Utilização de correio-electrónico 618 19.2.1 Esqueci-me da palavra-passe 618 19.2.2 Activação de contas em sítios Web 625 19.2.3 Newsletters 632 19.3 Dreamweaver Developer Toolbox 633 20 AJAX 637 20.1 XML 638 20.1.1 Criar um ficheiro XML 640 20.1.2 Formatar dados XML com XSLT 642 20.2 Integrar dados XML numa página utilizando a Spry framework 647 20.2.1 Estabelecer uma ligação com dados XML 648 20.2.2 Definir regiões Spry 655 20.2.3 Associar elementos à página 657 20.2.4 Repetir dados 660 20.2.5 Trabalhar com tabelas Spry 665 20.2.6 Adicionar uma Detail Region 670 20.2.7 Elementos XML Nested 672 20.3 Gerar XML dinamicamente utilizando PHP 672 20.3.1 Utilizar ficheiros XML dinâmicos com a Spry framework 676

Prefácio Introdução O desenvolvimento de sítios Web, partilhado, entre outros, por informáticos, designers, arquitectos de informação e profissionais de marketing, tem sido uma das actividades que mais alterações tem sofrido ao longo dos seus poucos anos de existência. As páginas Web foram sempre evoluindo, passando de estáticas para interactivas e depois para dinâmicas, podendo ser personalizadas por utilizador e suportadas por sofisticados acessos a bases de dados. Originalmente criadas em simples editores de texto, com o desenvolvimento das tecnologias utilizadas para a criação de páginas cada vez mais complexas foram surgindo aplicações para simplificar o trabalho dos Web Designers e dos Web Developers. O Adobe Dreamweaver é uma das aplicações que, ao longo de diversas versões, soube acompanhar a evolução dos sítios Web. Considerado, durante bastante tempo, uma ferramenta para Web Designers, o Dreamweaver tem vindo a apresentar argumentos para a sua utilização no desenvolvimento de sofisticados sites interactivos e dinâmicos. A integração e suporte de tecnologias como o JavaScript, o ASP, o ASP.NET, o PHP, o JSP e o Coldfusion, acelerou a sua divulgação e utilização ao nível profissional. Com a versão CS3 a integração da Spry framework tornou mais fácil a criação de interfaces sofisticadas e interactivas com recurso a JavaScript e ao AJAX. Mas o Dreamweaver é apenas uma das ferramentas que têm de ser utilizadas para o desenvolvimento de sítios Web. É necessária a utilização de servidores Web e servidores aplicacionais, linguagens de programação e sistemas de gestão de bases de dados. Nesse sentido, nada melhor do que recorrer à oferta open-source (código aberto) que lidera neste momento o mercado aplicacional Web: Apache, PHP e MySQL. Público-alvo e pré-requisitos Este livro é destinado a todos os Web Developers, existentes ou potenciais, que pretendam utilizar tecnologias recentes na criação de sítios Web interactivos e dinâmicos. Tem também interesse para os Web Designers que queiram evoluir para a área das tecnologias server-side.

22 O GUIA PRÁTICO DO DREAMWEAVER CS3 COM PHP, JAVASCRIPT E AJAX Embora seja recomendada alguma experiência ao nível do desenho de páginas Web, da utilização de linguagens de programação e da manipulação de bases de dados, o livro pretende ser acessível a qualquer pessoa que tenha interesse no desenvolvimento de sítios Web. Características principais do livro Neste livro todos os capítulos tentam ter uma componente prática, mesmo aqueles em que são apresentadas, de forma mais teórica, as tecnologias que vão ser utilizadas. Existem diversos projectos práticos, do tipo exercício guiado, em que o leitor pode reproduzir, passo-a-passo, a demonstração ou projecto a desenvolver. Todos os capítulos encontram-se profusamente ilustrados. Este aspecto é considerado fundamental de forma a melhor guiar o leitor na reprodução dos passos a efectuar em cada projecto. Os ficheiros dos exemplos práticos encontram-se disponíveis para os leitores. Veja na página 28 como pode ter acesso a esses ficheiros. Convenções usadas Este livro utiliza diversas convenções com vista a facilitar a assimilação da informação: Termos em inglês são apresentados, de uma forma geral, em itálico: " Utilizando as server behaviors, que são " "... não aparecerá nenhuma lista de pop-up." O código encontra-se formatado em Courier New: <?php require_once('connections/ligacao.php');?> <?php $maxrows_rsclientes = 10; $pagenum_rsclientes = 0; As alterações a serem efectuadas no código são assinaladas a negrito: mysql_select_db($database_ligacao, $ligacao); $query_rsclientes = "SELECT CódigoDoCliente, NomeDaEmpresa, País FROM clientes"; $query_limit_rsclientes = sprintf("%s LIMIT %d, %d", $query_rsclientes, $startrow_rsclientes, $maxrows_rsclientes); $rsclientes = mysql_query($query_limit_rsclientes, $ligacaobd) or die(mysql_error()); $row_rsclientes = mysql_fetch_assoc($rsclientes);

PREFÁCIO 23 O acesso a opções de menus ou de caixas de diálogo é formatado em letras maiúsculas pequenas. O carácter ">" é utilizado para separar o menu da opção: "... seleccionamos a opção INSERT > DATA OBJECTS > DYNAMIC DATA > DYNAMIC TABLE" Combinações de teclas são identificadas através do carácter "+". Por exemplo, CTRL+TAB significa pressionar a tecla "Control" e, mantendo esta tecla premida, de seguida premir a tecla Tab, soltando depois as duas teclas. Visão geral e Organização Este livro está organizado em vinte capítulos: Capítulo 1 Desenvolvimento de sites Web. Apresentação dos conceitos de páginas estáticas, interactivas e dinâmicas, e das tecnologias e metodologias utilizadas no desenvolvimento de páginas e sites Web. Capítulo 2 Definição de sites no Dreamweaver. Descreve a definição e gestão de sites no Dreamweaver CS3, a gestão de ficheiros e o trabalho em equipa. Capítulo 3 Trabalhar com código no Dreamweaver. Apresenta as funcionalidades existentes no Dreamweaver que facilitam o trabalho do Web Developer na produção de código JavaScript e PHP. Capítulo 4 A linguagem JavaScript. Introduz a linguagem JavaScript, apresentando a respectiva sintaxe, a utilização de variáveis, as estruturas de controlo do fluxo de programa, os operadores, as funções e o tratamento e depuração de erros. Aborda-se também a programação orientada para objectos e os diversos objectos internos do JavaScript. Capítulo 5 Document Object Model. Aborda o modelo de objectos utilizado pelo JavaScript para referenciar e manipular os elementos HTML existentes numa página Web. Fala-se também sobre a interacção entre o JavaScript e as CSS. Capítulo 6 Eventos. Enumera os eventos disponíveis numa página Web e a resposta que pode ser definida para esses eventos através de event handlers e de event listeners. Capítulo 7 JavaScript no Dreamweaver CS3. Neste capítulo são apresentadas as capacidades inatas do Dreamweaver para trabalhar com o JavaScript. Capítulo 8 Behaviors. Explica as behaviors JavaScript que estão disponíveis no Dreamweaver para a criação de páginas interactivas.

24 O GUIA PRÁTICO DO DREAMWEAVER CS3 COM PHP, JAVASCRIPT E AJAX Capítulo 9 Elementos de navegação. São apresentadas as behaviors JavaScript e os widgets Spry que permitem criar elementos de navegação, nomeadamente navigation bars, jump menus, pop-up menus e painéis. Capítulo 10 Trabalhar com formulários. Aborda a utilização de formulários em páginas Web relativamente à validação da informação introduzida pelo utilizador. São apresentados os widgets Spry Validation. Capítulo 11 Animação e timelines. Apresenta as possibilidades de animação de elementos HTML, nomeadamente elementos AP, por parte do JavaScript. Capítulo 12 Instalar o Apache, PHP e MySQL. Instalação e configuração do Apache, PHP e MySQL e abordagem dos pacotes integrados existentes no mercado. Capítulo 13 A linguagem PHP. Introduz a linguagem PHP, apresentando a respectiva sintaxe, a utilização de variáveis, as estruturas de controlo do fluxo de programa, os operadores e as funções. Aborda-se também a programação orientada para objectos e a interacção com ficheiros XML. Capítulo 14 Trabalhar com PHP no Dreamweaver. Neste capítulo são apresentadas as funcionalidades do Dreamweaver para trabalhar com o PHP, quer seja ao nível das server behaviors ou da utilização de código. Capítulo 15 Criar e utilizar bases de dados. Fornece os procedimentos necessários para criar e utilizar bases de dados, e apresenta as ferramentas que podem ser utilizadas para efectuar essas operações bem como para administrar, extrair e manipular dados em bases de dados MySQL. Capítulo 16 Aceder a dados de uma base de dados MySQL utilizando PHP. Introduz as server behaviors do Dreamweaver que permitem o acesso, por parte do PHP, a bases de dados MySQL, para a extracção e pesquisa de dados. Capítulo 17 Manipular dados. Apresenta as três operações inserção, alteração e eliminação utilizadas na manipulação de dados em bases de dados MySQL, recorrendo a páginas PHP. Capítulo 18 Autenticação de utilizadores. Aborda o problema dos acessos não autorizados a sítios Web, com a criação de uma infraestrutura de autenticação de utilizadores e de controlo de acessos a páginas Web.

PREFÁCIO 25 Capítulo 19 Utilização avançada do PHP. Partindo dos conceitos apresentados nos capítulos anteriores, faz uma exploração de áreas mais avançadas, nomeadamente a transferência (upload) de ficheiros, a utilização de imagens e o envio de mensagens de correio-electrónico. Capítulo 20 AJAX. Este capítulo introduz o AJAX, um conjunto de tecnologias que está a revolucionar o desenho de sites e que é muito utilizado pelos sites da Web 2.0. Aborda-se também o XML/XSLT e a interacção entre o AJAX e o PHP.

19 Utilização avançada do PHP Nos capítulos anteriores exploramos as operações básicas que são utilizadas num sítio Web dinâmico, como o acesso e manipulação de dados, bem como a autenticação de utilizadores. Podemos agora criar páginas mais complexas e explorar outras áreas do desenvolvimento de páginas com o PHP. 19.1 Upload de ficheiros e utilização de imagens Vamos ao site do Centro Atlântico (http://www.centroatlantico.pt) buscar imagens para realizarmos um exemplo de upload (transferência para o servidor) de ficheiros e de utilização de imagens em páginas. Clicámos no lado esquerdo no link SOFTWARE OBRIGATÓRIO na área COLECÇÕES, e no início da página temos capas de livros:

592 O GUIA PRÁTICO DO DREAMWEAVER CS3 COM PHP, JAVASCRIPT E AJAX Com o botão do lado direito (e utilizando a opção SAVE PICTURE AS [GUARDAR IMAGEM COMO]) vamos guardar as oito capas de livros no nosso disco numa pasta dentro do site. Pode manter os nomes originais das imagens. 19.1.1 Criação das tabelas Agora acedemos ao MySQL Administrator para criar a tabela livros (na base de dados dados) que vai conter a informação sobre os livros: Utilizou-se um tipo de dados SMALLINT para a coluna numpaginas já que este tipo de dados possui um intervalo de valores de 0 a 65.535 quando é utilizado UNSIGNED (isto é, sem sinal), o que é suficiente. O tipo de dados TINYINT não pode ser utilizado porque o intervalo de valores é 0 a 255, e um livro pode ter mais de 255 páginas. Quanto à coluna preco, utiliza-se o tipo de dados DECIMAL(5,2) que permite valores até 999,99, utilizando inteiros com até três algarismos além de 2 casas decimais (o primeiro valor, 5, corresponde ao número de algarismos utilizados). Caso pretendêssemos manter a lógica das colecções do Centro Atlântico, teríamos de introduzir um campo codcoleccao na tabela livros e criar uma tabela coleccoes com dois campos: codcoleccao e nomecoleccao. Utilizamos uma coluna auto-incrementável para o código do livro, mas também seria possível utilizar a coluna isbn como chave primária da tabela já que este valor é único para cada livro e portanto nunca se repete. Outra informação que poderíamos armazenar na tabela livros seria a data da edição do livro.

19. UTILIZAÇÃO AVANÇADA DO PHP 593 Poderá pensar que nos esquecemos de criar uma coluna para o autor do livro, mas como pode existir mais de um autor por livro, não é adequado criar esse tipo de coluna na tabela livros. Vamos então criar uma tabela autores que conterá o nome de cada autor do Centro Atlântico (embora possa ter mais informação): Para associar cada autor a um livro recorremos a outra tabela, livros_autores,

594 O GUIA PRÁTICO DO DREAMWEAVER CS3 COM PHP, JAVASCRIPT E AJAX que possui uma chave primária composta por duas colunas (clique no losango para transformar em chave a coluna codautor), cada uma das quais, individualmente, é chave primária nas tabelas livros e autores, respectivamente. 19.1.2 Criação da página autores.php Temos de criar duas páginas Web uma para inserir autores e outra para inserir os livros. Não vamos estar muito preocupados com a parte estética nem com detalhes, por isso a nossa página autores.php terá o seguinte aspecto: O campo utilizado chama-se nomeautor e possui um CHAR WITDTH e um MAX CHARS de 50, enquanto o formulário tem o nome forminsere. Adicionamos agora uma server behavior INSERT RECORD:

19. UTILIZAÇÃO AVANÇADA DO PHP 595 Dado que a coluna codautor da tabela autores é auto-incrementável, apenas utilizamos o campo nomeautor nesta server behavior. 19.1.2.1 Mensagem de sucesso Inserimos também o seguinte código, <td width="590" valign="top" class="celdir"><h2>registo de autores</h2> <?php if ((isset($_get['sucesso'])) && ($_GET['sucesso']=="sim")){?> <p align="left">autor inserido com sucesso.</p> <?php }?> <form action="<?php echo $editformaction;?>" method="post" name="forminsere" id="forminsere"> de forma a fornecer ao utilizador o feedback relativo à inserção do autor. Na server behavior INSERT RECORD tínhamos passado um parâmetro sucesso, com o valor sim. 19.1.2.2 Controlar valores repetidos Outra operação que temos de efectuar é evitar a introdução de nomes repetidos de autores. Vamos então recorrer à server behavior USER AUTHENTICATION > CHECK NEW USERNAME: Embora esta server behavior tenha sido desenhada para testar a existência de utilizadores quando estes se registam, também é possível utilizá-la em outras situações. Para que o utilizador seja informado do erro, vamos mais uma vez acrescentar código, <td width="590" valign="top" class="celdir"><h2>registo de autores</h2> <?php if ((isset($_get['sucesso'])) && ($_GET['sucesso']=="sim")){?> <p align="left">autor inserido com sucesso.</p> <?php } if (isset($_get['requsername'])) {

596 O GUIA PRÁTICO DO DREAMWEAVER CS3 COM PHP, JAVASCRIPT E AJAX?> <p align="left" class="mensagem">o autor '<?php echo $_GET['requsername'];?>' já existe na base de dados!</p> <?php }?> <form action="<?php echo $editformaction;?>" method="post" name="forminsere" id="forminsere"> de forma a produzir a seguinte mensagem de erro: Aproveitamo-nos assim do parâmetro de querystring requsername que a server behavior CHECK NEW USERNAME cria automaticamente sempre que o autor já exista na respectiva tabela. Não se esqueça de associar uma behavior VALIDATE FORM ao formulário forminsere para obrigar ao preenchimento do campo nomeautor. Poderá também efectuar uma validação idêntica no código PHP. Outra possibilidade é colocar o cursor automaticamente no campo nomeautor sempre que a página é invocada recorrendo mais uma vez a código Javascript (document.getelementbyid('nomeautor').focus();) no evento onload da etiqueta <body>. Introduzimos agora alguns autores dos livros da colecção Software Obrigatório:

19. UTILIZAÇÃO AVANÇADA DO PHP 597 O facto de podemos utilizar esta página para introduzir diversos autores faz com que sejam acrescentados sucessivamente vários parâmetros sucesso, o que poderá trazer alguns problemas caso façamos a inserção de muitos autores numa única sessão de trabalho: Além disso o parâmetro requsername também permanecerá na querystring caso se tenha enganado e tenha introduzido um autor repetido. Para evitar este comportamento remova, ou coloque em comentário (utilizando /* no início e */ no fim), o seguinte código: Ao fazer esta operação, a server behavior INSERT FORM deixará de aparecer no separador SERVER BEHAVIORS do painel APPLICATION e a server behavior CHECK NEW USERNAME aparecerá com um ponto de exclamação. 19.1.3 Criação da página livros.php Passemos agora à página livros.php que tem, para já, o seguinte aspecto: Atribua aos campos os mesmos nomes das colunas correspondentes da tabela livros. Os valores de CHAR WIDTH e MAX CHARS também devem ser idênticos aos tamanhos das colunas. O campo numpaginas deverá ter um

598 O GUIA PRÁTICO DO DREAMWEAVER CS3 COM PHP, JAVASCRIPT E AJAX tamanho de 4 caracteres (para permitir livros com páginas até 9999) e o campo preco um tamanho de 6 caracteres (para permitir preços até 999,99 ). Na área AUTORES colocamos um LIST/MENU de nome autores, seguido de um botão com o VALUE + e uma ACTION do tipo NONE, de um botão com o VALUE - e uma ACTION do tipo NONE, e finalmente um LIST/MENU do tipo MENU com uma altura de 3 linhas (atributo HEIGHT) e um TYPE LIST, com o nome autores_livro. O botão + vai permitir passar o autor seleccionado no campo autores para o campo autores_livro, enquanto o botão - remove da lista autores_ livro o autor seleccionado nessa lista. O campo CAPA é do tipo FILE FIELD. 19.1.3.1 Gestão dos autores do livro O campo autores é preenchido automaticamente com o conteúdo da tabela autores utilizando o seguinte recordset: Seleccione depois o LIST/MENU autores e clique no botão DYNAMIC no PROPERTY INSPECTOR, preenchendo a janela que aparece com os seguintes valores:

19. UTILIZAÇÃO AVANÇADA DO PHP 599 Repare que os valores (VALUES) no List/Menu vão ser os códigos dos autores, enquanto o texto que é apresentado (LABELS) corresponde aos nomes. Introduzimos uma opção estática com o valor 0 (dado que nunca existirá um código de autor com este valor) e o LABEL -- Seleccione um autor --. Para criar a funcionalidade dos botões + e - é necessário recorrer ao Javascript. Veja como fazê-lo no capítulo 10 - FORMULÁRIOS (mas exactamente em 10.7.2 INTERACÇÃO ENTRE CAMPOS DE UM FORMULÁRIO). Outro campo especial do formulário existente na página livros.php é o campo capa que utiliza um campo do tipo FILE FIELD. O campo vai servir para o envio da imagem da capa do livro para o servidor Web, se bem que a imagem não vá ser armazenada na base de dados. Esta operação de transferência de ficheiros para o servidor tem o nome de upload. A introdução do campo do tipo FILE FIELD altera o atributo enctype do formulário para "multipart/ form-data", o que permite o envio de ficheiros para o servidor. 19.1.3.2 Validação dos dados inseridos no formulário Agora que já temos os campos criados e a funcionar correctamente, vamos utilizar uma behavior VALIDATE FORM para validar o preenchimento dos campos (não se esqueça de seleccionar em primeiro lugar o formulário no TAG SELECTOR):

600 O GUIA PRÁTICO DO DREAMWEAVER CS3 COM PHP, JAVASCRIPT E AJAX Active a checkbox REQUIRED para todos os campos e no caso dos campos numpaginas, preco e edicao também active a opção NUMBER para só permitir a introdução de algarismos. Mas esta behavior não permite validar o preenchimento dos campos autores_livro e capa, que também são obrigatórios, por isso vamos ter de a alterar. Localize o seguinte código, e insira o seguinte código entre a chaveta e o comando if (errors): if (document.getelementbyid("autores_livro").length==0) { errors += '- o campo "autores" é de preenchimento obrigatório.\n'; } if (document.getelementbyid('capa').value=="") { errors += '- o campo "capa" é de preenchimento obrigatório.'; } if (errors) alert('the following error(s) occurred:\n'+errors); document.mm_returnvalue = (errors == ''); } } </script> Claro está que pode aproveitar para mudar as outras mensagens de erro para português. Podia também ter recorrido a widgets SPRY VALIDATION (ver capítulo 10) para efectuar uma validação mais sofisticada. 19.1.3.3 Obter os autores de cada livro Tal como está a nossa página Web, para que se possa guardar os autores de cada livro na tabela livros_autores é necessário que o utilizador seleccione todos os autores na lista autores_livro para que eles possam ser lidos pelo PHP. Mas essa é uma operação que não é muito lógico que se tenha de pedir aos utilizadores. Para evitar isto, vamos acrescentar à nossa página um campo escondido (hidden field) de nome lista_autores na parte de baixo do formulário), </table> <input name="lista_autores" type="hidden" id="lista_autores" /> </form>