DreamWeaver Avançado PHP -...

34
Financiado pelo FSE DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos) (Desenvolvimento Sites Dinâmicos)

Transcript of DreamWeaver Avançado PHP -...

Page 1: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

(Desenvolvimento Sites Dinâmicos)

Page 2: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 1

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

Índice

1.INTRODUÇÃO ...................................................................................................................................... 2

1.2. ESTRUTURA DE DIRECTÓRIOS: ................................................................................................................... 3

1.3. CONFIGURANDO O DREAMWEAVER: .......................................................................................................... 3

2. CRIAÇÃO DE MÓDULOS ...................................................................................................................... 6

2.1. LIVRO DE VISITAS .................................................................................................................................... 6

2.1.1 Configurando a Base de Dados ................................................................................................... 6

2.1.2 Criar o formulário ....................................................................................................................... 8

2.1.3 Criar o formulário ....................................................................................................................... 9

2.1.4 Mostrando os dados ao utilizador ............................................................................................ 10

2.1.5 Administrar o seu livro de visitas .............................................................................................. 13

2.1.6 Formulário de Registo ............................................................................................................... 14

2.1.7 Listar mensagens ...................................................................................................................... 16

2.1.8 Formulário de Alteração ........................................................................................................... 17

2.1.9 Eliminar registos ....................................................................................................................... 19

2.2 VOTAÇÃO ............................................................................................................................................ 20

2.2.1 Formulário para receber os votos ............................................................................................. 21

2.2.2 Página de resultados................................................................................................................. 22

2.3 NOTÍCIAS ............................................................................................................................................. 26

2.3.1 Formulário registo notícia ......................................................................................................... 27

2.3.2 Lista Notícias ............................................................................................................................. 27

2.3.3 Detalhes Notícias ...................................................................................................................... 30

2.4 SISTEMA DE LOGIN ................................................................................................................................ 31

2.4.1 Formulário de Login .................................................................................................................. 31

2. 4.2 Proteger a sua página .............................................................................................................. 32

2. 4.3 Fazer Logoff ............................................................................................................................. 33

Page 3: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 2

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

1.Introduçã o

Em primeiro lugar gostaria de deixar bem claro que este manual é de carácter académico

servindo de guia para formandos/alunos dos cursos modulares em informática da EISNT

desenvolverem os seus trabalhos de conclusão de curso.

Neste manual irei demonstrar através de exemplos práticos como desenvolver um site

dinâmico com php e mysql utilizando o IDE do Dreamweaver. O manual guiará o leitor ao

desenvolvimento de um SGC (Sistema Gestão de conteúdo) para um site.

Autor: Engº Fernando Miranda - Professor de Informática

E-mail: [email protected]

Linguagem utilizada: PHP

SGBD – Mysql

IDE – Dreamweaver (qualquer versão)

XAMPP - Xampp for Windows Version 1.7.2

Antes de começar execute o Dreamweaver e o XAMPP. O XAMPP surgirá no canto inferior do

ecrã:

Clicando neste ícone surgirá a lista abaixo: Admin do Apache é a aplicação de gestão do

XAMPP, o directório raiz do nosso servidor “c:\xampp\htdocs” (http://localhost/), é neste local

que iremos testar nossas aplicações. PhpMyAdmin é o gestor do mysql onde criaremos as

nossas bases de dados e das nossas tabelas e por fim temos o directório htdocs criaremos a

nossa estrutura de pastas para os ficheiros.

Page 4: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 3

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

1.2. Estrutura de directórios:

O XAMPP é um programa que nos disponibiliza o ambiente adequado para o teste das nossas

aplicações com PHP e Mysql.

Aceda ao directório do xampp em c:\xampp\htdocs e crie a estrutura de pastas do nosso SGC

baseado na figura abaixo:

Explicando: A pasta ProjectoPW é nossa pasta raiz, a pasta admin conterá todos os nossos módulos, já a

pasta imagens conterá as imagens do site.

1.3. Configurando o Dreamweaver:

Agora iremos criar um novo site no Dreamweaver. Criar um novo site significa configurá-lo

para trabalharmos com recursos avançados como tecnologias como o php, asp, jsp, etc.

Veja na figura a abaixo como configurá-lo:

No menu site clique em New Site...

Clique no separador Advanced. Agora iremos configurar a opção Local Info. Preencha os

campos como na figura abaixo.

Page 5: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 4

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

Explicando:

Site name: Nome do site do nosso projecto. Local root folder: Pasta raiz local do nosso

projecto. Default images folder: Pasta padrão de imagens do projecto. Em Remote Info

preencha os campos como na figura abaixo:

DICA: Navegue pelas pastas amarelas para poder configurar os caminhos com mais precisão.

Agora configuramos o servidor de teste(Testing Server) como na figura abaixo:

Page 6: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 5

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

Depois de configura-lo clique em ok. Se aparecer uma mensagem clique também em ok.

Obs: Não esqueçam de sempre realizar um backup das configurações do site do

Dreamweaver exportando-as.

Veja como exportar:

Seleccione o nome do projecto depois clique em exportar e grave-o em local seguro.

Page 7: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 6

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

2. Criãçã o de mo dulos

Durante este manual estaremos criando diversos módulos que serão utilizados no nosso site.

2.1. Livro de visitas

O primeiro será um Livro de Visitas que se propõe a receber opiniões, sugestões e críticas de

visitantes do site.

2.1.1 Configurando a Base de Dados

Para construir a nossa aplicação teremos que criar uma base de dados, base de dados essa que

será utilizado em todo o nosso projecto. Veja como criar a nossa base de dados. Entre no

phpmyadmin através do XAMPP:

Surgirá no seu navegador padrão o seguinte ecrã:

No campo acima digite o nome da base de dados: projectopw e clique em criar. Ou se preferir

utilizar o SQL clique neste ícone. Após surgir uma janela digite o código abaixo:

CREATE DATABASE projectopw

Page 8: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 7

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

Após criar a base de dados clique na base de dados e depois em SQL e digite o código abaixo e

clique em executar:

CREATE TABLE livro_visitas(

idlivro_visitas int( 11 ) NOT NULL AUTO_INCREMENT ,

nome varchar( 50 ) NOT NULL ,

email varchar( 30 ) NOT NULL ,

mensagem varchar( 100 ) NOT NULL ,

STATUS char( 1 ) NOT NULL ,

PRIMARY KEY ( idlivro_visitas )

Após executar o código SQL você poderá ver a tabela criada.

Dica: Não esqueça de fazer o backup das tabelas do banco de dados.

Page 9: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 8

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

2.1.2 Criar o formulário

No dreamweaver crie um novo documento php e clique em create de um título para seu

documento e grave-o na pasta admin/livro_visitas (se a pasta não existir crie) com o nome de

livro_visitas.php:

Agora vamos criar uma nova conexão com a base de dados que será utilizado por todos os

nossos exemplos neste tutorial:

No lado direito do Dreamweaver procure pela caixa Application depois no separador

databases e clique no sinal de + que surgirá o ecrã abaixo. Clique agora em MYSQL Connection

Surgirá o seguinte ecrã:

Preencha conforme a figura acima observando para as configurações do seu servidor. Como

padrão o servidor vem com utilizador: root e sem senha. Clique em select para seleccionar a

tabela projectopw. Clique em test para testar se a conexão foi feita. Surgirá o seguinte ecrã de

confirmação:

Finalmente clique em ok. Agora já tem uma conexão criada com a base de dados.

Perceba que foram criados os seguintes directórios dentro da sua pasta raiz. Veja a figura

abaixo:

Page 10: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 9

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados na aplicação gerados pelo

Dreamweaver. A pasta Connections contém o ficheiro de conexão com a base de dados que será instanciado em

todos os nossos ficheiros php.

2.1.3 Criar o formulário

No separador data clique em Record Insertion Form Wizard. Veja a figura abaixo:

Depois surgirá o seguinte ecrã:

Preencha os campos como no exemplo da figura acima seguindo estas alterações: No campo

idlivro_visitas escolha o Display as para Hidden field. Os campos nome e email mantenham o

Display as Text field. Em mensagem modifique o display as para Text área. Finalmente em

status escolha Hidden field e em Default value preencha com a letra ‘s’ sem as aspas.

(Estamos utilizando um controle para dizer á base de dados que todas as mensagens estarão

ativas(s) ou inativas(n). Explicando: Conection: nome da conexão. Table: tabela a qual se quer gerar o formulário. After

inserting, go to: ficheiro que será chamado quando o formulário for enviado. Form fields: Campos dos formulário.

Label: Rótulo de cada campo do formulário. Display as: Tipo de campo. Submit as: tipo de dado que está a ser

enviado. Default value: valor padrão para os campos.

Finalmente clique em ok. Surgirá o seguinte formulário gerado automaticamente pelo

Dreamweaver. Modifique o nome do botão que está em inglês na barra de propriedades para

o nome enviar.

Page 11: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 10

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

Agora será capaz de enviar as informações digitadas neste formulário para a base de dados.

Perceba após ser submetido o formulário retornará para ele mesmo com os campos vazios.

Isto foi configurado no campo After inserting, go to do exemplo anterior.

2.1.4 Mostrando os dados ao utilizador

Agora precisamos mostrar os dados registados pelos visitantes. Mostraremos todos os registos

na parte inferior do formulário. Mas para isso devemos criar uma consulta á base de

dados. No canto direito clique em Application > bindings. Clique no sinal de + e em Recordset

(Query). Veja a figura abaixo:

Surgirá este ecrã: Preencha os campos conforme a figura abaixo:

Explicando: Name: Nome da consulta. Connection: nome da conexão. Table: nome da tabela a qual se

quer consultar. Columns: Colunas da tabela que serão afetadas. Filter: filtro de dados

Sort: Ordenação dos dados.

Agora com a consulta pronta vamos mostrar os dados abaixo do formulário. Para isso clique no

separador bindigns clique no sinal de + e clique e arraste cada item com o raio para o ecrã.

Page 12: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 11

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

Agora clique em F12 para visualizar no navegador. Perceba que se registarmos vários registos

veremos que apenas o primeiro registro foi mostrado. Verifique na sua base de dados em

PhpMyAdmin.

Na verdade queremos que todos os registos sejam seleccionados ou uma quantidade deles.

Para que isso ocorra devemos utilizar outro recurso do Dreamweaver que é o repeat region.

Primeiro seleccione todas as três consultas: nome, e-mail e mensagem.

DICA: Acrescente uma barra horizontal <hr /> no fina das três consultas indicadas pela seta.

Page 13: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 12

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

Agora clique em repeat region que está localizado no separador data. Depois surgirá a ecrã

acima e marque a opção All records. As consultas ficarão seleccionadas conforme a figura

abaixo contornadas por Repeat. Veja abaixo:

Pronto! Agora verá que todos os registos aparecerão. Veja agora no seu navegador. Veja

também que a barra horizontal se repetiu.

Page 14: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 13

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

2.1.5 Administrar o seu livro de visitas

Para administrarmos o nosso livro de visitas iremos criar os seguintes ficheiros php. Guarde

estes ficheiros na pasta admin/livro_visitas.

registarLivroVisitas.php

alterarLivroVisitas.php

listarLivroVisitas.php

mensagemResposta.php

index.php

Explicando: O ficheiro registarLivroVisitas.php será utilizado pelo administrador para registar

novas mensagens. O ficheiro alterarLivroVisitas.php será utilizado pelo administrador para

alterarmos os dados já registados. O ficheiro listarLivroVisitas.php será utilizado para listar

todas as mensagens já registadas. O ficheiro mensagemResposta.php será a mensagem que irá

aparecer após cada processo: inserção, alteração, eliminação. Este ficheiro terá o seguinte

código e design: O ficheiro index.html será utilizado para proteger o nosso directório. Quando

tentarem listar os nossos ficheiros eles não serão mostrados. Surgirá uma página em branco.

Page 15: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 14

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

Acima temos um modelo do mensagemResposta.php. Utilizei o código javascript no link voltar

para retorna a página anterior.

2.1.6 Formulário de Registo

Agora iremos configurar o ficheiro cadastarLivroVisitas.php ficheiro que será utilizado pelo

administrador para registar novas mensagens do livro de visitas. Para isso repita o mesmo

procedimento de criação de formulário anterior porém com algumas modificações.

Veja a figura abaixo:

Clique no separador data e depois escolha Record Insertion Form Wizard.

Surgirá o seguinte ecrã:

Page 16: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 15

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

Preencha os campos como na figura acima. Agora deverá modificar algumas opções em

Display as. Clicando na lista do form fields idlivro_visitas modifique o Display as para Hidden

field.

Façam também a modificação do campo mensagem para Text área e status para menu. No

caso do menu aparecerá o seguinte botão(Menu Proerties...).

Clique nele e surgirá o ecrã abaixo. Preencha como é mostrado e clique em ok. E finalmente

em ok para finalizar.

Modifique o nome do botão para registar. Veja a figura abaixo o formulário está pronto e o

menu de status criado. Este menu servirá para controlar se as mensagens registadas estarão

ativas ou não. Perceba também que o formulário que criamos anteriormente para o nosso

livro de visitas não possui esta opção, porque não definimos nenhuma restrição na visualização

das informações. A opção está como padrão status ‘s’ ou seja, ativo.

Page 17: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 16

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

2.1.7 Listar mensagens

Agora iremos criar a nossa lista que conterá todas as mensagens já registadas. Para isso vá até

ao ficheiro listarLivroVisitas.php e criamos uma nova consulta. No canto direito clique em

Application (caso não apareça poderá ativa-lo no menu window >> aplication) depois clique

no separador bindings. Agora clique no sinal de + depois em RecordSet(Query). Veja a figura

abaixo:

Preencha conforme a figura acima.

Agora volte novamente ao separador data e clique em Dynamic table:

Agora preencha o formulário igual à figura abaixo e clique em ok:

Veja que surgiu uma tabela como na figura abaixo:

Page 18: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 17

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

2.1.8 Formulário de Alteração

Continuando iremos criar o formulário que será utilizado para alterar os dados do nosso livro

de visitas. Para isso crie uma nova consulta na página alterarLivroVisitas.php e preencha o

formulário como no exemplo abaixo:

Explicando: Filter idlivro_visitas é o identificador do filtro, URL Parameter (vai utilizar o método

GET do php para aceder ao registo pelo idlivro_visitas). Então clique em ok.

Agora vamos criar o formulário. Clique novamente no separador data depois em Record

Update Form Wizard. Dica: Atenção para não confundir insert record em vez de Update

record

Modifique o formulário de acordo o apresentado na figura abaixo:

Page 19: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 18

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

Não esqueça de modificar o display as para os campos; mensagem para textarea, o campo

status para menu. No caso do menu faça novamente a configuração do menu. Veja abaixo:

Depois clique em ok. Surgirá o formulário de alteração de dados. Modifique o botão para

alterar.

Veja como ficou:

Agora iremos configurar a lista para podermos escolher o registo que queremos modificar.

Volte a listarLivroVisitas.php e escolha um dos campos para servir como link.

Escolhi o idlivro_visitas. Clique nele depois vá até a barra de propriedades e clique na pasta

amarela do link. Veja a figura abaixo:

Clique nesta pasta.

Surgirá a janela abaixo. Marque a opção data source, depois clique em idlivro_visitas. Surgirá

logo abaixo no campo URL o endereço que deve ser modificado para:

alterarLivroVisitas.php?idlivro_visitas=<?php echo

$row_consultaLivroVisitas['idlivro_visitas']; ?>

Page 20: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 19

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

Clique em F12 e veja no seu navegador que temos agora um link que aponta uma referência

baseada num parâmetro URL (GET) para o formulário de alteração.

Clicando neste link será direccionado para o formulário mostrando o registo escolhido.

2.1.9 Eliminar registos

Agora iremos criar a eliminação de registos. Abra novamente a o ficheiro listarLivroVisitas.php.

Crie uma nova coluna e escreva eliminar.

Crie um link para ele clicando em link na barra de propriedades. Preencha o campo com o

código:

listarLivroVisitas.php?idlivro_visitas=<?php echo $row_consultaLivroVisitas['idlivro_visitas'];

?>

Page 21: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 20

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

Agora iremos criar a consulta de eliminação. Para isso volte ao separador data e depois em

delete record

Surgirá a janela abaixo. Preencha conforme a figura e clique em ok.

Agora o nosso livro de visitas está pronto! Podemos realizar as operações de inserir, listar,

actualizar e apagar registos no nosso livro de visitas.

2.2 Votação

Neste manual iremos desenvolver uma votação baseada em dados vindos da base de dados

mysql. Vamos começar. Primeiro crie uma nova pasta com o nome de votacao dentro da pasta

admin.

Veja a figura abaixo:

Agora crie a seguinte tabela dentro da nosso base de dados projetopw:

CREATE TABLE votacao (

Id int(9) NOT NULL auto_increment,

resp char(1) default '0',

PRIMARY KEY (id))

Page 22: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 21

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

2.2.1 Formulário para receber os votos

Após criar a nossa tabela crie no Dreamweaver uma nova página php e guarde-a com o nome

votacao.php dentro da pasta admin/votacao. Nesta página crie três linhas e uma coluna.

Clique na terceira linha da tabela depois vá até a data depois em insert form wizard.

Vamos então configurar nossa tabela que será nosso formulário de criação (inserção) da

votação.

Em "Connection:" a sua conexão ao db , em "Table:" sua tabela, em "Afther inserting, go to:" a

página com o resultado da votação (que será criada depois) , em "Form fields:" Na coluna

id, utilize o DISPLAY AS Hidden Field, devido não haver necessidade que este campo apareça

para o utilizador final. E no campo resp, utilize DISLPLAY AS Radio Group, configurando sua

propriedade:

Page 23: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 22

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

Depois clique em ok e finalmente em ok para gerar o seu formulário. Agora realizaremos

pequenas modificações no nosso formulário. Deixe com a figura abaixo:

2.2.2 Página de resultados

Vamos agora criar a página de resultados (resposta.php já definida na figura anterior). Crie

uma página php contendo 06 linhas e duas colunas e guarde-a na pasta admin/votacao.

Na última linha da coluna vamos inserir o total dos votos, da seguinte maneira: No painel

Application >> Server Behaviors >> Bindings crie uma nova consulta à base de dados.

Page 24: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 23

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

Ainda no painel Application>> Server Behaviors > Display Record Count > Display Total

Records.

Veja a figura abaixo:

Surgirá a janela abaixo. Depois clique em ok. :

Escreva a frase “Total de votos:”

Page 25: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 24

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

Agora vamos configurar voto a voto. Ainda no ficheiro resposta.php e pelo Painel Server

Behavior, crie um Recordset para o voto Bom (consulta_voto_bom):

Preencha o formulário conforme a figura abaixo:

Note que criei um Filter para o campo resp, determinando Entered Value sendo 1, mesmo

valor determinado no Radio Group Properties. Repita fazendo mais dois Recordsets usando o

nome consulta_voto_razoavel com o filtro resp=2 (entered value) e consulta_voto_mau com o

filtro resp=3 (entered value). Confira o Painel Bindings:

Agora vamos tornar a nossa votação mais profissional, informando em porcentagem o total de

votos. Para tal crie no Fireworks 3 png com tamanho 2 x 10 em três cores diferentes, uma para

cada opção (azul.png , vermelho.png e amarelo.png) guardando na raiz da pasta que contém

sua votação admin/votacao.

No ficheiro resposta.php, seleccione a célula ao lado de BOM e na Barra PHP clique no

separador server behaviors depois escolha Display Record Count > Display Total Records.

Na janela que surgirá escolha consulta_voto_bom e clique em ok.

Page 26: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 25

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

Agora clicando nesta célula vá até o split do dreamweaver troque o seguinte código:

Para este:

Explicando a alteração no código: $v1: Estou atribuindo á variável v1 o cálculo da percentagem

($totalRows_consulta_voto_bom*100/$totalRows_consulta_total_votos), consulta_voto_bom

(recordset que filtra todos os votos bons), $totalRows_consulta_total_votos (contador que

soma a quantidade de votos), number_format (formata o resultado sem casas decimais 0) e

echo "<img src='azul.png' width='$v1' height='10'> $v1" ( Irá criar no ecrã um gráfico usando

azul.png, e usando a variável $v1 como delimitadora do tamanho).

Repita a operação para as outras duas respostas mudando as variáveis e os png’s com a cor.

Veja os códigos abaixo:

<?php

$v2 = number_format($totalRows_consulta_voto_razoavel*100/$totalRows_ConsultaVotos);

echo "<img src=amarelo.png width='$v2' height='10'>$v2%";

?>

<?php

$v3 = number_format($totalRows_consulta_voto_mau*100/$totalRows_ConsultaVotos);

echo "<img src=vermelho.png width='$v3' height='10'>$v3%";

?>

Page 27: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 26

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

Abra agora o ficheiro votacao.php e clique em F12 para visualizar a sua votacao. Vote e veja

os resultados.

Espero que tenham gostado.

Resultado final:

2.3 Notícias

Agora iremos criar um sistema de publicação de notícias para o nosso projeto. Para isso crie

uma nova pasta dentro do directório admin/noticia e crie a tabela notícia utilizando o SQL

abaixo, na nossa base de dados projetopw.

CREATE TABLE noticia(

idnoticia int( 11 ) NOT NULL AUTO_INCREMENT ,

titulo_noticia varchar( 100 ) NOT NULL ,

data_noticia varchar( 8 ) NOT NULL ,

texto_noticia text NOT NULL ,

autor_noticia varchar( 50 ) NULL ,

status_noticia char( 1 ) NULL ,

PRIMARY KEY ( idnoticia ) );

Page 28: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 27

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

2.3.1 Formulário registo notícia

Depois no Dreamweaver crie um novo documento php e guarde-o na pasta admin/noticia com

o nome inserirNoticia.php. Agora vá ao separador data depois em Record Insertion Form

Wizard para criarmos o nosso formulário de inserção de notícias. Observe que o procedimento

é o mesmo feito anteriormente para a criação de formulários para inserção de dados.

Configure desta forma: em idnoticia escolha em Display as: Hidden field, titulo_noticia escolha

text field, data_noticia escolha Hidden field e coloque o seguinte código: <?php echo

date('d/m/y') ?> . Em texto_noticia escolha Text área e em autor_noticia escolha Text Field

e finalmente em status_noticia escolha menu e depois preencha conforme a figura ao lado.

Após clicar em ok surgirá o formulário de registo. Realize as alterações para que tenha a

seguinte aparência.

2.3.2 Lista Notícias

Agora iremos criar a listagem das notícias que irá aparecer para o utilizador do site. Para isso

crie um novo ficheiro php e guarde-o na mesma pasta admin/noticia com o nome

shownoticia.php. Crie um recordset consultanoticia.

Page 29: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 28

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

Configure de acordo a figura acima. Perceba que o sort cria uma filtro para listar as notícias por

ordem de inserção o mais recente primeiro. Depois clique em ok.

Agora iremos criar a nossa lista. Para isso clique no separador Bindings e veja a nossa consulta

e os valores marcados com o símbolo de um raio.

Clique e arraste o campo titulo_noticia dê um espaço ou coloque um traço ( - ) para separar e

depois arraste o campo data_noticia para a área de design. Agora para termos uma lista não

ordenada seleccione ambos os campos e clique na barra de propriedades em Unordered

List(Lista não ordenada). Veja a figura.

Page 30: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 29

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

Agora aproveitando que está seleccionado clique em Repeat Region para criarmos uma

repetição dos nossos registos.

Veja como ficou. Perceba que os campos ficaram contornados por um rectângulo de título

Repeat

Clique F12 para testar no seu navegador.

Agora iremos criar a página de detalhes das notícias. Ao clicar na data da notícia será mostrada

a notícia completa. Para isso vamos criar primeiro o nosso link na data.

Seleccione o campo data depois vá até a barra de propriedades e clique no campo link digite o

seguinte código:

viewnoticia.php?idnoticia=<?php echo $row_consultanoticia['idnoticia']; ?>

Page 31: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 30

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

2.3.3 Detalhes Notícias

Após isso iremos criar o ficheiro viewnoticia.php e guarde-o no diretório admin/noticia.

Neste ficheiro crie um novo recordset com o nome consultanoticia e preencha conforme a

figura abaixo:

Depois no separador Bindings clique e arraste os seguintes campos. Veja a figura abaixo:

Depois volte ao ficheiro shownoticia.php e clique em F12 e veja o resultado final no seu

navegador.

Clique na data e veja o resultado dos detalhes da notícia.

Page 32: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 31

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

2.4 Sistema de Login

Neste manual iremos desenvolver um simples sistema de login e senha para proteger os

nossos ficheiros. Para isso crie uma nova tabela na nossa base de dados. Execute o seguinte

comando SQL:

CREATE TABLE utilizador(

id_utilizador int(11) not null auto_increment,

email varchar(50) not null,

senha varchar(10) not null,

status char(1) not null,

primary key (id_utilizador));

INSERT INTO utilizador (id_utilizador,email,senha,status)

VALUES (‘NULL’,'[email protected]', '123', 's');

Agora no dreamweaver crie um novo ficheiro php e guarde-o com o nome de index.php e

titulo Login na pasta admin. Crie também um novo ficheiro php e guarde-o também na pasta

admin com o nome de index2.php e titulo Área restrita e digite o seguinte texto neste arquivo:

Área restrita.

2.4.1 Formulário de Login

Agora com o ficheiro index.php aberto vamos criar um formulário com uma tabela dentro com

a seguinte configuração:

Page 33: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 32

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

No campo login coloque o Textfield como login e no campo senha coloque o Textfield como

senha e modifique o nome do botão para entrar.

Após isso clique no separador Data depois em Login In User.

Preencha o formulário de acordo a figura:

Explicando: O campo If login suceeds, go to: index2.php – é o ficheiro que será mostrado

após o login do utilizador e o campo If login fails, go to: index.php - é o ficheiro que será

mostrado se houver alguma falha ou login errado.

Veja o resultado do ecrã de login:

2. 4.2 Proteger a sua página

Agora temos que realizar em cada ficheiro que queremos proteger a seguinte acção.

Abra o ficheiro index2.php e clique no separador Data depois escolha Restrict Access To Page

para proteger sua página.

Page 34: DreamWeaver Avançado PHP - eisnt.orgeisnt.org/fernando/dreamweaver/material_diverso/Manual_DreamWeave… · Explicando: a pasta _mmServerScripts estão armazenadas os scripts utilizados

Financiado pelo FSE Pág: 33

DreamWeaver Avançado – PHP + MySQL (Desenvolvimento Sites Dinâmicos)

Preencha de acordo a figura acima.

2. 4.3 Fazer Logoff

Agora iremos criar um link para sair da página restrita e destruir a nossa sessão. No ficheiro

index2.php aberto digite a palavra sair.

Seleccione-a e clique no separador Data depois em Log Out User(fazer loggof)

Preencha o formulário de acordo a figura acima e clique em ok. Teste o arquivo index.php

clicando em F12 no seu navegador com o utilizador e senha previamente registado.

Login: [email protected] e senha: 123.