Tutorial Dreamweaver Avançado PDF

DREAMWEAVER AVANADO DESENVOLVENDO SITES DINMICOS
Autor: Professor Gustavo Linhares Llis Frota

Professor de Informtica do IFNMG Campus Januria
Setembro de 2010
1

DESENVOLVIMENTO DE SITES DINMICOS
COM ADOBE DREAMWEAVER


Setembro de 2010
2
INDICE

1. Introduo ................................................................................................................................................. 3
2. Estrutura de diretrios: ......................................................................................................................... 4
3. Configurando o Dreamweaver:............................................................................................................. 4
1. Criao de mdulos .................................................................................................................................. 7
2.1 Livro de visitas.................................................................................................................................. 7
2.1.1 Configurando o banco de dados.................................................................................................. 7
2.1.2 Criando o formulrio .................................................................................................................... 9
2.1.3 Criando o formulrio .................................................................................................................. 10
2.1.5 Administrando seu livro de visitas.............................................................................................. 15
2.2. Enquete .......................................................................................................................................... 25
2.2.1 Formulrio para recebe os votos ............................................................................................... 25
2.2.2 Pgina de resultados ................................................................................................................. 28
2.3 Notcias........................................................................................................................................... 33
2.3.1 Formulrio Cadastro de Notcias........................................................................................... 34
2.3.2 Lista de Notcias .................................................................................................................... 35
2.3.3 Detalhes das notcias ............................................................................................................ 37
2.4 Sistema de Login............................................................................................................................ 39
2.4.1 Formulrio de Login................................................................................................................... 39
2.4.2 Protegendo sua pgina.............................................................................................................. 41
2.4.3 Fazendo Logoff .......................................................................................................................... 41
2.5 Galeria de fotos dinmica............................................................................................................... 42
2.5.1 Formulrio de cadastro de fotos ................................................................................................ 43
2.5.2 Configurando o lbum de fotos.................................................................................................. 48

Setembro de 2010
3

1. Introduo

Em primeiro lugar gostaria de deixar bem claro que este tutorial de carter acadmico servindo
de guia para alunos dos cursos tcnicos em informtica do IFNMG desenvolverem seus trabalhos
de concluso de curso. Podendo ser utilizado tambm por qualquer outra pessoa restringindo a
sua utilizao a rea de educao.

Neste tutorial irei demonstrar atravs de exemplos prticos como desenvolver um site dinmico
com php e mysql utilizando o IDE do Dreamweaver. O tutorial guiar o leitor ao desenvolvimento
de um SGC(Sistema Gerenciador de contedo) para um site.

Autor: Gustavo Linhares Llis Frota - Professor de Informtica da IFNMG Campus Januria
E-mail: gustavo.frota@ifnmg.edu.br
Linguagem utilizada: PHP
SGBD Mysql
IDE Dreamweaver (qualquer verso)
LAMP - WampServer 2.0

Antes de comear execute o Dreamweaver e o WampServer. O Wamp surgir no canto inferior da
tela:

Clicando neste cone sugira a lista abaixo: Localhost o diretrio raiz do nosso servidor, neste
local que iremos testar nossas aplicaes. PhpMyAdmin o gerenciador do mysql onde criaremos
nossa base de dados e nossas tabelas e por fim temos o diretrio www onde criaremos nossa
estrutura de pastas para os arquivos.


Setembro de 2010
4

2. Estrutura de diretrios:

O WampeServer um programa que nos disponibiliza o ambiente adequado para o teste das
nossas aplicaes com PHP e Mysql.

Acesse o diretrio do wamp em c://wamp/www e Crie a estrutura de pastas do nosso SGC
baseado na figura abaixo:

Explicando: A pasta ProjetoPW nossa pasta raiz, a pasta admin conter todos os nossos
mdulos, j a pasta imagens conter as imagens dos site.

3. Configurando o Dreamweaver:

Agora iremos criar um novo site no Dreamweaver. Criar um novo site significa configur-lo para
trabalharmos com recursos avanados como tecnologias como o php, asp, jsp etc.
Veja na figura a abaixo como configur-lo:

No menu site clique em New Site...


Setembro de 2010
5

Clique na aba Advanced. Agora iremos configura a opo Local Info. Preencha os campos como
na figura abaixo.

Explicando: Site name: Nome do site do nosso projeto. Local root folder: Pasta raiz local do
nosso projeto Default images folder: Pasta padro de imagens do projeto. Em Remote Info
preencha os campos como na figura abaixo:


Setembro de 2010
6

DICA: Navegue pelas pastas amarelas para poder configurar os caminhos com mais preciso.

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


Setembro de 2010
7

Depois de configura-lo clique em ok. Se aparecer uma mensagem clique tambm em ok

Obs: No esqueam de sempre realizar um backup das configuraes do site do Dreamweaver
exportando-as.

Veja como exportar: Selecione o nome do projeto depois clique em exportar e salve-o em um local
seguro.

1. Criao de mdulos

Durante este tutorial estaremos criando diversos mdulos que sero utilizados em nosso site.
2.1 Livro de visitas

O primeiro ser um Livro de Visitas que se prope a receber opinies, sugestes e crticas de
visitantes do site.

2.1.1 Configurando o banco de dados

Para construir nossa aplicao teremos que criar um banco de dados, banco de dados este que
ser utilizado em todo o nosso projeto. Veja como criar nosso banco de dados. Entre no
phpmyadmin atravs do wampserver:


Setembro de 2010
8
Sugira no seu navegador padro a seguinte tela:

No campo acima digite o nome da base de dados: projetopw e clique em criar. Ou se preferir
utilizar o SQL clique neste cone. Aps sugir uma janela digite o cdigo abaixo:

CREATE DATABASE projetopw

Aps criar a base de dados clique na base de dados e depois em SQL e digite o cdigo 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 )
)

Aps executar o cdigo SQL voc poder ver a tabela criada.


Setembro de 2010
9

Dica: No esquea de fazer o backup das tabelas do banco de dados.

2.1.2 Criando o formulrio

No dreamweaver crie um novo documento php e clique em create de um titulo para seu
documento e salve-o na pasta admin/livro_visitas (se a pasta no existir crie) com o nome de
livro_visitas.php:

Agora vamos criar uma nova conexo com o banco de dados que ser utilizado por tordos os
nossos exemplos neste tutorial:
No lado direito do Dreamweaver procure pela caixa Application depois na aba databases e clique
no sinal de + que surgir a tela abaixo. Clique agora em MYSQL Connection

Surgir a seguinte tela:

Preencha conforme a figura acima observando para as configuraes do seu servidor. Como
padro o servidor vem com usurio: root e sem senha. Clique em select para selecionar a tabela
projetopw. Clique em test para testar se a conexo foi feita. Surgir a seguinte tela de
confirmao:

Setembro de 2010
10

Finalmente clique em ok. Agora voc j tem uma conexo criada com o banco de dados.
Perceba que foram criados os seguintes diretrios dentro da sua pata raiz. Veja a figura abaixo:

Explicando: a pasta _mmServerScripts esto armazenadas os scripts utilizados na aplicao
gerados pelo Dreamweaver. A pasta Connections contm o arquivo de conexo com o banco de
dados que ser instanciado em todos os nossos arquivos php.

2.1.3 Criando o formulrio

Na aba data clique em Record Insertion Form Wizard. Veja a figura abaixo:

Depois surgir a seguinte tela:


Setembro de 2010
11

Preencha os campos como no exemplo da figura acima seguindo estas alteraes: 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 ao banco de dados que todas as mensagens estaro ativas(s) ou
inativas(n).

Explicando: Conection: nome da conexo. Table: tabela a qual se quer gerar o formulrio. After
inserting, go to: arquivo que ser chamado quando o formulrio for enviado. Form fields:
Campos dos formulrio. Label: Rtulo de cada campo do formulrio. Display as: Tipo de campo.
Submit as: tipo de dado que est sendo enviado. Default value: valor padro para os campos.

Finalmente clique em ok. Sugira o seguinte formulrio gerado automaticamente pelo
Dreamweaver. Modifique o nome do boto que est em ingls na barra de propriedades para o
nome enviar.

Agora voc ser capaz de enviar as informaes digitadas neste formulrio para o banco de
dados. Perceba aps ser submetido o formulrio 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 usurio.

Agora precisamos mostrar dos os dados cadastrados pelos visitantes. Mostraremos todos os
registros na parte inferior do formulrio. Mas para isso devemos criar uma consulta ao banco de
dados. No canto direito clique em Application > bindings. Clique no sinal de + e em Recordset
(Query). Veja a figura abaixo:


Setembro de 2010
12

Surgir esta tela: Preencha os campos conforme a figura abaixo:

Explicando: Name: Nome da consulta. Connection: nome da conexo. Table: nome da tabela a
qual se quer consultar. Columns: Colunas da tabela que sero afetadas. Filter: filtro de dados
Sort: Ordenao dos dados.

Agora com a consulta pronta vamos mostrar os dados abaixo do formulrio. Para isso clique na
aba bindigns clique no sinal de + e clique e arraste cada item com o raio para a tela.


Setembro de 2010
13

Agora clique em F12 para visualizar no navegador. Perceba que se cadastrarmos vrios registros
veremos que apenas o primeiro registro foi mostrado. Verifique no seu banco de dados em
PhpMyAdmin.

Na verdade queremos que todos os registros sejam selecionados ou uma quantidade deles.
Para que isso ocorra devemos utilizar outro recurso do Dreamweaver que o repeat region.
Primeiro selecione todas as trs consultas: nome, e-mail e mensagem.
DICA: Acrescente uma barra horizontal <hr /> no final das trs consultas indicadas pela
seta.


Setembro de 2010
14

Agora clique em repeat region que est localizado na aba data. Depois surgir a tela acima e
marque a opo All records. As consultas ficaro selecionadas conforme a figura abaixo
contornadas por Repeat. Veja abaixo:

Pronto! Agora voc ver que todos os registros aparecero. Veja agora no seu navegador. Veja
tambm que a barra horizontal se repetil.


Setembro de 2010
15

2.1.5 Administrando seu livro de visitas

Para administrarmos nosso livro de visitas iremos criar os seguintes arquivos php. Salve estes
arquivos na pasta admin/livro_visitas.

cadastrarLivroVisitas.php
alterarLivroVisitas.php
listaLivroVisitas.php
mensagemResposta.php
index.html

Explicando: O arquivo cadastrarLivroVisitas.php ser utilizado pelo administrador para
cadastrar novas mensagens. O arquivo alterarLivroVisitas.php ser utilizado pelo administrador
para alterarmos os dados j postados. O arquivo listaLivroVisitas.php ser utilizado para listar
todas as mensagens j postadas. O arquivo mensagemResposta.php ser a mensagem que ir
aparecer aps cada processo: incluso, alterao, excluso. Este arquivo ter o seguinte cdigo e
designer: O arquivo index.html ser utilizado para proteger o nosso diretrio. Quando tentarem
listar nossos arquivos eles no sero mostrados. Surgir uma pagina em branco.


Setembro de 2010
16

Acima temos um modelo do mensagemResposta.php. Utilizei o cdigo javascript no link voltar
para retorna a pgina anterior.

2.1.6 Formulrio de Cadastro.

Agora iremos configurar o arquivo cadastarLivroVisitas.php arquivo que ser utilizado pelo
administrador para postar novas mensagens do livro de visitas. Para isso repita o mesmo
procedimento de criao de formulrio anterior porm com algumas modificaes.
Veja a figura abaixo:
Clique na aba data e depois escolha Record Insertion Form Wizard.

Surgir a seguinte tela:


Setembro de 2010
17

Preencha os campos como na figura acima. Agora voc dever modificar algumas opes em
Display as. Clicando na lista do form fields idlivro_visitas modifique o Display as para Hidden field

Faam tambm a modificao do campo mensagem para Text rea e status para menu. No caso
do menu voc ver a seguinte boto(Menu Proerties...).

Clique nele e surgir a tela abaixo. Preencha como mostrado e clique em ok. E finalmente em ok
para finalizar.


Setembro de 2010
18

Modifique o nome do boto para cadastrar. Veja a figura abaixo o formulrio pronto e o menu de
status criado. Este menu servir para controlar se as mensagem postadas estaro ativas ou no.
Perceba tambm que o formulrio que criamos anteriormente para o nosso livro de visitas no
possui esta opo, porque no definimos nenhuma restrio na visualizao das informaes. A
opo est como padro status s ou seja, ativo.

2.1.7 Lista de Mensagens

Agora iremos criar nossa lista que conter todas as mensagens j postadas. Para isso v at o
arquivo listaLivroVisitas.php e criamos uma nova consulta. No canto direito clique em Application
(caso no aparea voc poder ativa-lo no menu window >> aplication) depois clique na aba
bindings. Agora clique no sinal de + depois em RecordSet(Query). Veja a figura abaixo:


Setembro de 2010
19

Preencha conforme a figura acima.
Agora volte novamente a aba data e clique em Dynamic table:

Agora preencha o formulrio igual figura abaixo e clique em ok:

Veja que surgiu um tabela como na figura abaixo:

Setembro de 2010
20

2.1.8 Formulrio de Alterao

Continuando iremos criar o formulrio que ser utilizado para alterar os dados do nosso livro de
visitas. Para isso crie uma nova consulta na pgina alterarLivroVisitas.php e preencha o
formulrio como no exemplo abaixo:

Explicando: Filter idlivro_visitas o identificador do filtro, URL Parameter(vai utilizar o mtodo
GET do php para acessar o registro pelo idlivro_visitas). Ento clique em ok.

Agora vamos criar o formulrio. Clique novamente na aba data depois em Record Update Form
Wizard. Dica: Ateno para no confundir insert record em vez de Update record

Modifique o formulrio de acordo o apresentado na figura abaixo:


Setembro de 2010
21

No esquea de modificar o display as para os campos; mensagem para textarea, o campo status
para menu. No caso do menu faa novamente a configurao do menu. Veja abaixo:

Depois clique em ok. Surgir o formulrio de alterao de dados. Modifique o boto para alterar.
Veja como ficou:

Setembro de 2010
22

Agora iremos configura a lista para podermos escolher o registro que queremos modificar. Volte a
listaLivroVisitas.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 opo data source, depois clique em idlivro_visitas. Surgir logo
abaixo no campo URL o endereo que deve ser modificado para:

alterarLivroVisitas.php?idlivro_visitas=<? alterarLivroVisitas.php?idlivro_visitas=<? alterarLivroVisitas.php?idlivro_visitas=<? alterarLivroVisitas.php?idlivro_visitas=<? php echo php echo php echo php echo
$row_ConsultaLivroVisitas['idlivro_visitas']; ?> $row_ConsultaLivroVisitas['idlivro_visitas']; ?> $row_ConsultaLivroVisitas['idlivro_visitas']; ?> $row_ConsultaLivroVisitas['idlivro_visitas']; ?>


Setembro de 2010
23

Clique em F12 e veja no seu navegador que temos agora um link que aponta uma referncia
baseada num parmetro URL (GET) para o formulrio de alterao.

Clicando neste link voc ser direcionado para o formulrio mostrando o registro escolhido.

2.1.9 Excluindo registros

Agora iremos criar a excluso de registros. Abra novamente a o arquivo listaLivroVisitas.php.
Crie uma nova coluna e escreva excluir.

Setembro de 2010
24

Crie um link para ele clicando em link na barra de propriedades. Preencha o campo com o cdigo:
lista lista lista listaLivroVisitas.php?idlivro_visitas=<? php echo LivroVisitas.php?idlivro_visitas=<? php echo LivroVisitas.php?idlivro_visitas=<? php echo LivroVisitas.php?idlivro_visitas=<? php echo
$row_ConsultaLivroVisitas['idlivro_visitas']; ?> $row_ConsultaLivroVisitas['idlivro_visitas']; ?> $row_ConsultaLivroVisitas['idlivro_visitas']; ?> $row_ConsultaLivroVisitas['idlivro_visitas']; ?>

Agora iremos criar a consulta de excluso. Para isso volte a aba data e depois em delete record


Setembro de 2010
25
Surgir a janela abaixo. Preencha conforme a figura e clique em ok.

Agora nosso livro de visitas est pronto! Podemos realizar as operaes de cadastrar, listar,
atualizar e deletar registros em nosso livro de visitas.

2.2. Enquete

Data: 29/09/2010

Neste tutorial iremos desenvolver uma enqute baseada em dados vindos do banco de dados
mysql.
Vamos comear. Primeiro crie uma nova pasta com o nome de enquete dentro da pasta admin.

Agora crie a seguinte tabela dentro do nosso banco projetopw:

CREATE TABLE enquete (
Id int(9) NOT NULL auto_increment,
resp char(1) default '0',
PRIMARY KEY (id))

2.2.1 Formulrio para recebe os votos

Aps criar nossa tabela crie no Dreamweaver uma nova pgina php e salve-a com o nome
enquete.php dentro da pasta admin/enquete. Nesta pgina crie trs linhas e uma coluna.


Setembro de 2010
26

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

Vamos ento configurar nossa tabela que ser nosso formulrio de criao (insero) da enquete.
Em "Connection:" a sua conexo ao db , em "Table:" sua tabela , em "Afther inserting, go to:" a
pgina com o resultado da enqute(que ser criada depois) , em "Form fields:" Na coluna id,
utilize o DISPLAY AS Hidden Field, devido no haver necessidade que este campo aparea para
o usurio final. E no campo resp, utilize DISLPLAY AS Radio Group, configurando sua
propriedade:


Setembro de 2010
27

Depois clique em ok e finalmente em ok para gerar seu formulrio. Agora realizaremos pequenas
modificaes em nosso formulrio. Deixe com a figura abaixo:


Setembro de 2010
28

2.2.2 Pgina de resultados

Vamos agora criar a pgina de resultados(resposta.php j definida na figura anterior). Crie uma
pgina php contendo 06 linhas e duas colunas e salve-a na pasta admin/enqute.

Na ltima linha da coluna vamos inserir o total dos votos, da seguinte maneira: No painel
Application >> Server Behaviors >> Bindings crie uma nova consulta ao banco de dados.


Setembro de 2010
29

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

Surgir a janela abaixo. Depois clique em ok. :


Setembro de 2010
30
Escreva a frase Total de votos:

Agora vamos configurar voto a voto. Ainda no arquivo resposta.php e pelo Painel Server Behavior,
crie um Recordset para o voto timo (consulta_voto_otimo):
Preencha o formulrio 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_bom com o filtro resp=2 (entered value) e consulta_voto_ruim com o filtro resp=3
(entered value). Confira o Painel Bindings:


Setembro de 2010
31

Agora vamos tornar nossa enquete mais profissional , informando em porcentagem o total de
votos. Para tal crie no Fireworks 3 png com tamanho 2 x 10 em trs cores diferentes , uma para
cada opo (azul.png , vermelho.png e amarelo.png) salvando na raiz da pasta que contm sua
enqute admin/enquete.

No arquivo resposta.php, selecione a clula ao lado de timo e na Barra PHP clique a aba server
behaviors depois escolha Display Record Count > Display Total Records.

Na janela que surgir escolha consulta_voto_otimo e clique em ok.


Setembro de 2010
32

Agora clicando nesta celular v at o split do dreamweaver troque o seguinte cdigo:

Por este:

Explicando a alterao no cdigo: $v1: Estou atribuindo varivel v1 o clculo da porcentagem
($totalRows_consulta_voto_otimo*100 / $totalRows_consulta_total_votos), consulta_voto_otimo
(recordset que filtra todos os votos otimos), $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 na tela um grfico usando azul.png, e
usando a varivel $v1 como delimitadora do tamanho).

Repita a operao para as outras duas respostas mudando as variveis e os pngs com a
cor. Veja os cdigos abaixo:

Setembro de 2010
33

<? <? <? <?php php php php
$v $v $v $v2 22 2 = = = =
number_format($totalRows_consulta_voto_ number_format($totalRows_consulta_voto_ number_format($totalRows_consulta_voto_ number_format($totalRows_consulta_voto_bom bom bom bom*100/$totalRows_Consulta *100/$totalRows_Consulta *100/$totalRows_Consulta *100/$totalRows_Consulta
Votos); Votos); Votos); Votos);
echo "<img src= echo "<img src= echo "<img src= echo "<img src=amarelo amarelo amarelo amarelo.png width='$v .png width='$v .png width='$v .png width='$v2 22 2' height='10'>$v ' height='10'>$v ' height='10'>$v ' height='10'>$v2 22 2%"; %"; %"; %";

?> ?> ?> ?>

<?php <?php <?php <?php
$v3 = $v3 = $v3 = $v3 =
number_format($totalRows_consulta_voto_ number_format($totalRows_consulta_voto_ number_format($totalRows_consulta_voto_ number_format($totalRows_consulta_voto_ruim ruim ruim ruim*100/$totalRows_Consult *100/$totalRows_Consult *100/$totalRows_Consult *100/$totalRows_Consult
aVotos); aVotos); aVotos); aVotos);
echo "<img sr echo "<img sr echo "<img sr echo "<img src=vermelho.png width='$v3' height='10'>$v3%"; c=vermelho.png width='$v3' height='10'>$v3%"; c=vermelho.png width='$v3' height='10'>$v3%"; c=vermelho.png width='$v3' height='10'>$v3%";

?> ?> ?> ?>

Abra agora o arquivo enquete.php e clique em F12 para visualizar sua enqute. Vote e veja os
resultados.
Espero que tenham gostado.
Resultado final:

DICA: No esqueam de fazer backup dos arquivos e banco de dados. At o prximo artigo.
2.3 Notcias
Agora iremos criar um sistema de publicao de notcias para o nosso projeto. Para isso crie uma
nova pasta dentro do diretrio admin/noticia e crie a tabela notcia utilizando o SQL abaixo em
nosso banco de dados projetopw.

Setembro de 2010
34
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_noticiachar( 1 ) NULL ,
PRIMARY KEY ( idnoticia )
);

2.3.1 Formulrio Cadastro de Notcias

Depois no Dreamweaver crie um novo documento php e salve-o na pasta admin/noticia com o
nome cadastroNoticia.php. Agora v na aba data depois em Record Insertion Form Wizard para
criarmos nosso formulrio de postagem de notcias. Observe que o procedimento o mesmo feito
anteriormente para a criao de formulrios para insero 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 cdigo: <?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.


Setembro de 2010
35

Aps clicar em ok surgir o formulrio de cadastro. Realize as alteraes para que tenha a
seguinte aparncia.

2.3.2 Lista de Notcias

Agora iremos cria a lista de notcias que ir aparecer para o usurio do site. Para isso crie um
novo arquivo php e salve-o na mesma pasta admin/noticia com o nome shownoticia.php. Crie
um recordset consultanoticia.

Configure de acordo a figura acima. Perceba que em sort crie uma filtro para lista as notcias em
ordem de postagem o mais recente primeiro. Depois clique em ok.

Setembro de 2010
36
Agora iremos criar nossa lista. Para isso clique na aba Bindings e veja nossa consulta e os valores
setados com o smbolo de um raio.

Clique e arraste o campo titulo_noticia d um espao ou coloque um trao ( - ) para separar e
depois arraste o campo data_noticia para a rea de design. Agora para termos uma lista no
ordenada selecione ambos os campos e clique na barra de propriedades em Unordered List(Lista
no ordenada). Veja a figura.

Agora aproveitando que est selecionado clique em Repeat Region para criarmos uma repetio
dos nossos registros.


Setembro de 2010
37

Veja como ficou. Perceba que os campos ficaram contornados por um retngulo de ttulo Reapet

Clique F12 para testar no seu navegador.

Agora iremos criar a pgina de detalhes das notcias. Ao clicar na data da notcia ser mostrada a
notcia completa. Para isso vamos criar primeiro nosso link na data.
Selecione o campo data depois v at a barra de propriedades e clique e no campo digite o
seguinte cdigo:

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

2.3.3 Detalhes das notcias

Aps isso iremos criar o arquivo viewnoticia.php e salve-o no diretrio admin/noticia.
Neste arquivo crie um novo recordset com o nome consultanoticia e preencha conforme a figura
abaixo:


Setembro de 2010
38

Depois na aba Bindings clique e arrastes os seguintes campos. Veja a figura abaixo:

Depois volte a arquivo shownoticia.php e clique em F12 e veja o resultado final no seu navegador.
Clique na data e veja o resultado dos detalhes da notcia.


Setembro de 2010
39
2.4 Sistema de Login

Neste tutorial iremos desenvolver um simples sistema de login e senha para proteger nossos
arquivos. Para isso crie uma nova tabela em nosso banco de dados. Execute o seguinte SQL:

CREATE TABLE usuario(
id_usuario int(11) not null auto_increment,
email varchar(50) not null,
senha varchar(10) not null,
status char(1) not null,
primary key (id_usuario));

INSERT INTO usuario (id_usuario,email,senha,status)
VALUES (NULL,'seuemail@yahoo.com.br', '123', 's');

Agora no dreamweaver crie um novo arquivo php e salve-o com o nome de index.php e titulo
Login na pasta admin. Crie tambm um novo arquivo php e salve-o tambm 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 Formulrio de Login

Agora com o arquivo index.php aberto vamos criar um formulrio com uma tabela dentro com a
seguinte configurao:


Setembro de 2010
40

No campo login coloque o Textfield como login e no campo senha coloque o Textfield como
senha e modifique o nome do boto para entrar.

Aps isso clique na aba Data depois em Login In User.

Preencha o formulrio de acordo a figura:


Setembro de 2010
41
Explicando: O campo If login suceeds, go to: index2.php o arquivo que ser mostrado aps o
login do usurio e o campo If login fails, go to: index.php - o arquivo que ser mostrado se
houver alguma falha ou login errado.

Veja o resultado da tela de login:

2.4.2 Protegendo sua pgina

Agora temos que realizar em cada arquivo que queremos proteger a seguinte ao.

Abra o arquivo index2.php e clique na aba Data depois escolha Restrict Access To Page para
proteger sua pgina.

Preencha de acordo a figura acima.
2.4.3 Fazendo Logoff

Agora iremos criar um link para sair da pgina restrita e destruir nossa sesso. No arquivo
index2.php aberto digite a palavra sair.


Setembro de 2010
42

Selecione-a e clique v a aba Data depois em Log Out User(fazer loggof)

Preencha o formulrio de acordo a figura acima e clique em ok. Teste o arquivo index.php clicando
em F12 no seu navegador com o usurio e senha previamente cadastrados. Login:
seuemail@yahoo.com.br e senha: 123.

2.5 Galeria de fotos dinmica

Iremos agora desenvolver uma galeria de fotos dinmica utilizando a biblioteca jquery lightbox no
Dreamweaver com php e mysql. Para isso iremos precisar de alguns arquivos:
A barra developer Toolbox foi disponibilizada em sala de aula. Descompacte o arquivo e
instale a extenso.

Aps instalar sua barra developer voc ver no dreamweaver a seguinte barra:

Os arquivos da biblioteca Jquery foram disponibilizados em sala de aula. Descompacte o
arquivo na pasta admin/album(se a pasta no existir crie-a). Aps descompactar voc ter
os seguintes arquivos.


Setembro de 2010
43

Explicando: a pasta fotos_para_upload arquivo que contm as fotos para upload do nosso
lbum. A pasta jquery_lightbox-05. pasta que conter os arquivos da biblioteca lighbox. E o
ltimo o arquivo utilizado para ativar o efeito lightbox.

Agora teremos que criar nossa tabela album dentro do nosso banco de dados projetopw.
Para isso digite o seguinte cdigo SQL e execute-o no seu PhpMyAdmin.

CREATE TABLE album(
id int( 11 ) NOT NULL AUTO_INCREMENT,
foto varchar( 100 ) NOT NULL ,
PRIMARY KEY ( id )
)

Depois no Dreamweaver crie um novo documento php e salve-o com o nome index.php na pasta
admin/album.
OBS: previamente j havamos criado um projeto de site no dreamwaver e a conexo com o
banco de dados projetopw.

2.5.1 Formulrio de cadastro de fotos

Com o arquivo index.php aberto clique na barra developer toolbox e depois em Insert Record
Form Wizard.

E configure como a figura abaixo e clique em next:


Setembro de 2010
44

Clique em next.


Setembro de 2010
45

Agora clique em finish. E surgir este formulrio.

Para que o formulrio funcione clique no campo do formulrio depois v at application e clique na
barra server behaviors e sinal de + depois em Developer Toolbox >> File Upload >> Upload and
Resize Image:


Setembro de 2010
46

Surgir a seguinte janela. Preencha como a figura abaixo:

Perceba que o campo Upload folder colocamos o nome da pasta onde as fotos iro aps o
upload. Se esta pasta no existir crie-a.
Na opo resize image voc poder definir o tamanho que a imagem ter aps upload. No nosso
caso deixe desmarcada.

Agora na aba file voc poder definir o tamanho e as extenses de imagens que podem ser feitas
upload. Preecha como na figura abaixo e depois clique em ok.

Setembro de 2010
47

Agora teste no seu navegador e faa o cadastro de algumas fotos contidas na pasta
fotos_para_upload.

Veja que as fotos foram inseridas no banco de dados e os arquivos na pasta fotos:


Setembro de 2010
48
2.5.2 Configurando o lbum de fotos

Agora iremos criar o arquivo que ir mostras as fotos. Para isso crie um novo arquivo php e salve-
o com o nome de mostrar.php na pasta admin/album.
Crie uma nova consulta(RecordSet) clicando na aba application depois na aba biding e no sinal de
+.

Preencha o formulrio como na figura abaixo depois clique em ok.

Agora crie uma tabela de acordo as configuraes da figura abaixo:


Setembro de 2010
49

Centralize a tabela na barra de propriedades.
Agora dentro da tabela iremos inserir uma imagem dinmica. Para isso clique no cone de imagem

Clique em Data source.


Setembro de 2010
50

Depois no recordset clique em foto e ok e ok novamente(se aparecer uma mensagem).

Agora clique na imagem e personalize o tamanho para 100x100 px.

Agora devemos configurar o caminho da foto. Perceba que as fotos esto armazenadas na pasta
foto por isso devemos acrescente no cdigo a seguir o caminho da pasta fotos.

fotos/<?php echo $row_consultaalbum['foto']; ?>

Agora iremos inserir um link dinmico na foto. Siga o procedimento anterior da insero da foto
dinmica. Para isso clique na pasta do link.


Setembro de 2010
51

Escolha data source depois clique em foto e em ok

Mude novamente o cdigo do link para :

fotos/<?php echo $row_consultaalbum['foto']; ?>

Agora selecione a imagem e centralize-a. No momento que voc centraliza a imagem ela gera
uma div. Esta div ser utlizada para ativa o efeito lightbox.

Veja:


Setembro de 2010
52

Agora iremos ativar a galeria. Para isso v at a pasta jquery-lightbox-0.5 e copie os arquivos:

Para a pasta admin/album.
Depois abra oarquivo cdigo para ativa o jQuery.txt e copie todo cdigo e cole-o entre as tag
<head></head> do arquivo index.php

Observer o cdigo do lightbox chamada atravs do nome gallery. Observe a figura abaixo:

Agora voltando ao designer clique na tag da div e de o nome de gallery. Veja:

E veja que aps isso ele j aplicou o efeito.

Setembro de 2010
53

Agora d um espao aps a imagem:

E selecione a imagem e v em repeat region.

E marque todos(All records).

Depois clique em ok e visualize no seu navegador. Veja como ficou.


Setembro de 2010
54

Tutorial Dreamweaver Avançado PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tutorial Dreamweaver Avançado PDF

Enviado por

Direitos autorais:

Formatos disponíveis

DREAMWEAVER AVANADO DESENVOLVENDO SITES DINMICOS

Autor: Professor Gustavo Linhares Llis Frota

Você também pode gostar