Adobe® Dreamweaver® CS4

Importante

Para que a página não fique extensa visualmente, cada capítulo estará dentro de um spoiler.

Em função das enúmeras imagens no decorrer do tutorial, todas elas estarão escondidas por trás de um botão clicável, bem como, evitar a quebra de layout.

Se você é principiante neste programa, não comece este tutorial sem passar primeiro pelo Tutorial - Adobe® Dreamweaver® CS4 - HTML Básico, que pode ser acessado clicando aqui.

Depois de termos passado pelo tutorial do HTML básico no Dreamweaver, iremos aprender neste tutorial a criar páginas dinâmicas, no modo mais básico possível para que os capítulos não fiquem exaustivos, já que iremos trabalhar muito com banco de dados e comportamentos do servidor local (isso mesmo, iremos aprender a fazer o nosso computador simular um servidor de páginas no formato ASP VBScript).

Porque adotamos o ASP e não o PHP (por exemplo)?

Porque a maioria dos usuários usam o Windows como o seu SO (sistema operacional) padrão, e o formato ASP VBScript é da Microsoft. Com isso poderemos trabalhar com o banco de dados Microsoft Office Access, o banco de dados mais fácil de usar.

Se fosse simular um servidor PHP no seu computador, seria necessário instalar o SO Linux e trabalhar com códigos nas páginas. Além de ter que trabalhar com um banco de dados de grande porte, o que não é o objetivo deste tutorial. Já que iremos aprender a dinamizar uma página na maior parte recorrendo ao modo design e trabalhar com um banco de dados que faz tudo automaticamente.

Índice

Criando um Banco de Dados e DSN

Como Criar um Alias no IIS e Criando um Site ASP VBScript

Connection String e Recordset

Insert Record (enviar para o seu banco de dados)

Dynamic Text (ver os dados)

Update Record (atualizar os dados)

Delete Record (remover os dados)

User Authentication (usuários e senhas)

Restrict e Log Out (restringir uma página dependente da identificação e sair da página)

Criando um novo DSN e um novo Alias

Template e CSS no ASP VBScript

Criando um Sistema de Busca

Formulário Pré-Definido

Imagens Dinâmicas

Clique aqui para baixar o Adobe® Dreamweaver® CS4, faça o seu cadastro gratuitamente na Adobe para ter acesso aos downloads gratuitos para testes, e usufrua desse produto por 30 dias.

Criando um Banco de Dados e DSN

Antes de criarmos o nosso primeiro ASP precisamos fazer o nosso computador simular um servidor de banco de dados da Microsoft. São quatros etapas, duas etapas serão feita neste capítulo.

A primeira será como criar um banco de dados.

Para que possamos armazenar informações enviadas pelos visitantes de um site, devemos ter um banco de dados no qual podemos efetuar gravações de registros, organizar dados, emitir relatórios, apagar registros e alterar os registros.

Um banco de dados que é de uso simples é o Microsoft Access, como foi dito na introdução deste tutorial, veja abaixo como se cria um banco de dados.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_db1.jpg" title="" >

Se a pasta criada para os sites, do tutorial anterior, estiver ainda ativa, crie uma pasta dados.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_db2.jpg" title="" >

Dentro dela clique com o botão direito do mouse e vá em Novo => Microsoft Office Access [versão do seu Access] Banco de Dados.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_db3.jpg" title="" >

Não renomeie ainda, você (assim como eu) deve estar usando uma versão superior a versão 2000. Clique nele para abrir e em seguida salvar com o formato da Microsoft Office 2000 (sempre bom usar a versão inferior, facilitando aqueles que ainda não atualizaram os seus softwares da Microsoft).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_db4.jpg" title="" >

Faça uma coisa qualquer para o arquivo ser alterado, criar uma nova tabela por exemplo.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_db5.jpg" title="" >

Agora vá em Salvar como e salve o banco de dados acessível aos dependentes do Access 2000.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_db6.jpg" title="" >

Pode fechar a tabela criada, salve o seu banco de dados como dados.mdb.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_db7.jpg" title="" >

Pode apagar o outro e abra o seu novo banco de dados (dados.mdb). Crie uma tabela em branco no modo design (a mais fácil de praticar) e coloque em Nome do campo id (identificação), com o Tipo de dados em Numeração Automática (pois é uma id).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_db8.jpg" title="" >

Clique ao lado esquerdo de id com o botão direito do mouse e escolha Chave Primária.

Chave Primária (Primary Key): Conjunto de campos (pode ser um somente) de uma tabela que estão preenchidos com valores diferentes em cada registro. Este(s) campo(s) pode ser usado para identificação do registro.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_db9.jpg" title="" >

Crie mais quatro campos: nome, email, sexo, e mensagem. Todos com o tipo Texto. Clique com o botão direito no título da tabela (que ainda não foi definido um nome para ela) e salve-a.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_db10.jpg" title="" >

Irá pedir um nome para a tabela, nomeie como cadastro e dê OK.

Vamos agora para a segunda etapa: criar um DSN

Temos duas formas de acessar um banco de dados criado no Microsoft Access, utilizando o Dreamweaver, uma é utilizando um DSN (Data Source Name Nome da fonte de dados), e a outra é a DSN-Less, ou seja, sem utilizar um DSN, ensinarei a utilizar essa opção mais adiante.

O DSN pode ser equiparado a um atalho, pois basta indicarmos ao Dreamweaver qual o nome do DSN e ele automaticamente saberá em qual pasta o arquivo com o banco de dados se encontra, facilitando o trabalho do desenvolvedor, porém para que possamos desfrutar dessa facilidade, devemos antes de criar o site, criar o banco de dados (o que já foi feito) e o seu DSN.

Para criar um DSN, que só funcionará no seu computador, ou seja, se você copiar os arquivos de seu site para outro computador, não será possível acessar seu banco de dados, ao menos que nesse outro computador você crie novamente um DSN.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_db11.jpg]" title="" >

Para isso vá ao Painel de controle do seu Windows (existem várias maneiras de ir ao Painel de controle uma delas é pelo seu Windows Explorer mas o mais comum é indo no menu: Iniciar => Configurações => Painel de controle.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_db12.jpg" title="" >

Entre em Ferramentas Administrativas (suponha que o seu Windows seja o Windows 2000 ou Windows XP, ainda está cedo para eu adotar o Windows atual...).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_db13.jpg" title="" >

Entre em Fontes de Dados (ODBC), ele é o administrador de fonte de dados (ODBC Open Database Connectivity).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_db14.jpg" title="" >

Na janela que se abre escolha a aba Fonte de dados de sistema que ainda não possui Fonte de dados de sistema, clique em Adicionar.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_db15.jpg" title="" >

Escolha: Microsoft Access Driver (*.mdb) e clique em Concluir, será aberta outra janela com as configurações do DSN.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_db16.jpg" title="" >

No campo nome da fonte de dados, coloque o nome que você quer para chamar o seu DSN, o campo descrição é opcional e pode ser deixado em branco, na seção banco de dados, clique no botão selecionar e escolha a pasta e o arquivo onde estão os seus dados.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_db17.jpg" title="" >

Após isso clique no botão OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_db18.jpg" title="" >

Mais um OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_db19.jpg" title="" >

Feche o administrador de fonte de dados (ODBC), agora seu DSN já está criado podendo ser alterado ou removido a qualquer momento.

Como Criar um Alias no IIS e Criando um Site ASP VBScript

Vamos para a terceira etapa: configurar o IIS.

Se não tiver o IIS no seu computador, que está dentro de Ferramentas Administrativas do seu Painel de controle, coloque o cd de instalação do seu Windows e instale os programas adicionais.

Vimos que ao instalarmos o IIS, é criada uma pasta padrão no caminho C:\Inetpub\wwwroot, onde devem ser colocadas todas as pastas com os sites existentes no computador, mas por questão de organização poderá ser necessária a criação de uma pasta com algum site, fora dessa pasta padrão, portanto é preciso criar um alias no IIS Internet Information Services, que é responsável pelo processamento das páginas ASP. Para criar o alias, é preciso acessamos o painel de controle do IIS.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_iis1.jpg" title="" >

Ainda em Ferramentas Administrativas, acesse o Internet Information Services (ou Gerenciador dos Serviços de Internet, no Windows 2000 professional).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_iis2.jpg" title="" >

Clique com o botão direito no item Site da Web padrão.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_iis3.jpg" title="" >

Escolha a opção Novo => Diretório Virtual...

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_iis4.jpg" title="" >

Clique em Avançar.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_iis5.jpg" title="" >

Digite o nome do alias que você quer que apareça no Internet Explorer após o endereço http://localhost/ (eu escolhi conexoes, sem o ~).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_iis6.jpg" title="" >

Depois de definido o nome do alias, especifique qual será a pasta a ser mapeada, ou seja, a pasta onde estão os arquivos do seu site, clique no botão Avançar.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_iis7.jpg" title="" >

Agora é hora escolher as permissões da pasta onde os arquivos estão, deixe as opções Leitura, Executar Scripts e Gravação, marcadas para que os arquivos possam ser executados e os dados possam ser gravados no banco de dados.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_iis8.jpg" title="" >

Clique em Concluir e agora já está criado o seu alias.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_iis9.jpg" title="" >

O banco de dados que você criou já foi adicionado ao seu alias.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_iis10.jpg" title="" >

O endereço a ser digitado ao seu alias, no caso o http://localhost/conexões. Note que estão sendo exibidos os arquivos que estão na pasta dados (por enquanto só o nosso banco de dados) por ainda não termos uma índex nessa pasta.

Agora nós iremos para a quarta e última etapa antes de criarmos as nossas páginas em ASP: criar um site para os seus ASPs e para o seu banco de dados.

Abra o Dreamweaver e clique em Dreamweaver Site ou vá em Site => New Site...

Adotaremos o modo Basic (básico).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_iis11.jpg" title="" >

De preferência deixe o seu site com o mesmo nome da pasta em que está o seu banco de dados (sem acentos e espaços) e clique em Next (eu criei um site dados).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_iis12.jpg" title="" >

Clique em Yes, I want to use a server technology e escolha o ASP VBScript. Clique em Next.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_iis13.jpg" title="" >

Deixe marcada a primeira opção já que os sites serão testados no computador local, localize a pasta do seu site e clique em Next.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_iis14.jpg" title="" >

Digite o endereço do seu alias (no caso o meu é http://localhost/conexões) e clique em Test URL para ver se obteve êxito.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_iis15.jpg" title="" >

Se apareceu essa mensagem, foi criado com sucesso. Dê OK e clique em Next.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_iis16.jpg" title="" >

Vai perguntar se deseja posteriormente copiar o arquivo editado para outra máquina. Como o tutorial não vai disponibilizar servidor ASP, clique em No (não) e Next.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_iis17.jpg" title="" >

Confira os dados e clique em Done para finalizar.

As quatro etapas já estão prontas, já podemos criar os nossos arquivos em ASP.

Connection String e Recordset

Finalmente iremos criar o nosso primeiro ASP.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_app1.jpg" title="" >

Abra o Dreamweaver e em Create New clique em ASP VBScript.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_app2.jpg" title="" >

Vamos ativar o painel do banco de dados, vá ao menu Windows e escolha o Server Behaviors (o atalho é Ctrl F9) ou um dos dois acima deste.

Como havia prometido que mais adiante iria ensinar a criar uma conexão sem DSN, vamos a ela.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_app3.jpg" title="" >

Para criar uma conexão sem DSN, ou seja, conectando a página diretamente com o banco de dados, você deverá escolher no painel do banco de dados a aba Databases e clicar no +.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_app4.jpg" title="" >

Escolha a opção Custom Connection String.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_app5.jpg" title="" >

No campo Connection name deve ser colocado o nome que vai identificar pois você poderá utilizar mais de uma conexão com banco de dados. Em Connection String, deve ser inserida a String de conexão,

que segue um padrão mundial, no formato informado abaixo:

Provider=Microsoft.JET.OLEdb.4.0;Data source=Unidade:\pasta(s)\arquivo.mdb

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_app6.jpg" title="" >

No caso aqui o Unidade:\pasta(s)\arquivo.mdb será D:\Meus documentos\sites\dados\dados.mdb. Deixe marcada a segunda alternativa Using driver on this machine e clique em Test para checar a conexão com o seu banco de dados.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_app7.jpg" title="" >

Se obteve êxito, clique em OK e mais um OK em seguida.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_app8.jpg" title="" >

A conexão foi criada.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_app9.jpg" title="" >

Dentro dela está o nosso banco de dados com a nossa tabela criada no Access.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_app10.jpg" title="" >

Uma pasta com a nossa Connection String foi criada, dentro dela um arquivo ASP com o nome da conexão criada.

Feito a conexão agora iremos executar a consulta de dados: o Recordset.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_app11.jpg" title="" >

Clique na aba Server Behaviors e em + escolha o Recordset (Query).

Name: O nome como será identificado o Recordset.

Connnection: A conexão que será usada por esse recordset, caso a conexão não tenha sido criada, basta clicar no botão Define... e definir a conexão.

Table: Selecione a tabela do banco de dados onde as informações deverão ser buscadas.

Columns: Quais serão as colunas do banco de dados que serão utilizadas na consulta, caso não sejam necessárias todas as colunas, deverá ser marcada a opção Selected e escolhidos os nomes das colunas pressionando as teclas Shift ou Ctrl.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_app12.jpg" title="" >

Filter: Poderá ser escolhida uma coluna que servirá de filtro para os dados que virão da tabela, por exemplo,

selecionar todos os clientes de nome Eduardo. Deverão ser selecionadas as

opções indicadas. Deixe em None.

Obs: Em uma tabela pode-se ter várias IDs com o mesmo nome, mas nenhum nome pode ter a mesma ID, por isso que ela é do tipo numeração automática, pois a ID não se repete.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_app13.jpg" title="dwcs4asp_app13" >

Sort: Esta opção define como serão mostrados os dados de acordo com o campo em ordem ascending (crescente) ou descending (decrescente).

Pode dar OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_app14.jpg" title="" >

O Recordset foi criado.

Insert Record (enviar para o seu banco de dados)

Chegou a hora de montarmos o nosso formulário, ferramenta explorada no tutorial anterior, e dessa vez iremos fazer ele funcionar.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_insertrecord1.jpg" title="" >

Clique em Form para o formulário ser criado.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_insertrecord2.jpg" title="" >

Chame o Text Field.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_insertrecord3.jpg" title="" >

Em ID coloque o nome de um campo da tabela cadastro, do nosso banco de dados (dados.mdb), no caso o campo nome. Em Label coloque Nome para identificar o referido Text Field no formulário e dê OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_insertrecord4.jpg" title="" >

Text Field criado.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_insertrecord5.jpg" title="" >

Checando a ID, que está como nome.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_insertrecord6.jpg" title="" >

Repita o procedimento com o campo email.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_insertrecord7.jpg" title="" >

Crie uma tabela com duas colunas e digite Sexo na coluna da esquerda. Ative a célula da direita e chame o Radio Group.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_insertrecord8.jpg" title="" >

Em Name o nome do campo sexo da tabela cadastro, em Radio buttons atribua as Labels Masculino e Feminino, com os Values M e F (abreviatura de cada sexo) e pode dar OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_insertrecord9.jpg" title="" >

Insira um Text Field para a Mensagem, do campo mensagem, e selecione ele para mudar as sua propriedades, que está como Single line (uma linha só para os textos), para Multi line (várias linhas). Você pode definir o máximo de caracteres permitidos em Char width e o limite de linhas em Num lines.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_insertrecord10.jpg" title="" >

E finalmente vamos criar um botão que enviará as informações para o nosso banco de dados. Clique em Button.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_insertrecord11.jpg" title="" >

Mude o Value para Enviar para não ficar em inglês.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_insertrecord12.jpg" title="" >

Se quiser centralizar fica a seu critério.

Selecione o formulário (representado por uma moldura vermelha) e verá as opções de método, no Method.

Default: Método padrão.

GET: Transmitir os dados, mostrando-os na barra de endereço.

POST: Transmitir os dados, sem que o usuário veja os dados digitados.

No caso de em formulários de cadastros, é altamente recomendável usar o método POST, principalmente se pedir a sua senha. Se estiver como GET, todos os seus dados estarão salvos na barra de endereço, o que resultará em roubo de dados e/ou senhas.

A importância do GET é para a coleta de informações, por exemplo, você vai no Google procurar por Chaves, a busca digitada estará na barra de endereço e o Google vai trazer para a página todo assunto relacionado ao digitado (http://www.google.com.br/search?hl=pt-BR&rlz=1R2SKPB_pt-BRBR338&q=Chaves&btnG=Pesquisar&meta=lr=lang_pt).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_insertrecord13.jpg" title="" >

Deixe no método POST.

Já fizemos a conexão direta com o banco de dados, usando o Connection String, inserimos o Recordset para fazer consulta dos nossos dados, e agora só falta gravar as informações no nosso banco de dados, ou seja, ao clicar em enviar redirecionarmos para o nosso data base.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_insertrecord14.jpg" title="" >

Em Server Behaviors clique no + e escolha Insert Record (gravar inserção).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_insertrecord15.jpg" title="" >

Escolha a conexoes em Connection, em Insert into table a tabela cadastro (só temos essa mesmo por enquanto), em After inserting, go to (após clicar em enviar deverá ir para alguma página) escolha cadastro.asp (ou seja, continuará na mesma página, mas com o formulário em branco para novos cadastros) e dê OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_insertrecord16.jpg" title="" >

F12 para visualizar no navegador e testemos o nosso formulário, depois de preenchido clique em Enviar.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_insertrecord17.jpg" title="" >

Fazendo um novo cadastro.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_insertrecord18.jpg" title="" >

E mais um, agora do sexo feminino.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_insertrecord19.jpg" title="" >

Voltando ao nosso Recordset (é só dar dois cliques nele) e clicando em Test (Test SQL Statement), podemos ver as informações enviadas para o nosso banco de dados.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_insertrecord20.jpg" title="" >

Conferindo também pelo dados.mdb, abrindo a tabela cadastro.

No próximo capítulo criaremos uma página que visualizará os dados, sem a necessidade de recorrer ao MDB e/ou Test SQL Statement.

Dynamic Text (ver os dados)

Nós já criamos uma página para enviar os dados, agora criaremos uma página para ver os dados. Com isso o usuário final poderá atuar nessa área sem a necessidade de entrar no banco de dados do sistema (se não houvesse esse recurso, imagine o desastre que um usuário final poderia causar...).

Crie um novo ASP VBScript e salve como ver_dados.asp.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_dynamictext1.jpg" title="" >

Em Server Behaviors insira um Recordset.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_dynamictext2.jpg" title="" >

Feito isso, digite Nome: e clique ao lado. Volte ao Server Behaviors e escolha Dynamic Text (texto dinâmico).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_dynamictext3.jpg" title="" >

E atribua a ação à coluna nome.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_dynamictext4.jpg" title="dwcs4asp_dynamictext4" >

Faça o mesmo com o E-mail:.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_dynamictext5.jpg" title="" >

Com o Sexo:.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_dynamictext6.jpg" title="" >

E com a Mensagem:.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_dynamictext7.jpg" title="" >

F12 e verá que a sua página está exibindo o primeiro cadastro dos três cadastros feito no capítulo anterior.

Fica faltando uma ação que permita visualizar vários dados em uma página, aí que entra o Repeat Region (repetir a região).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_dynamictext8.jpg" title="" >

Selecione a região a ser repetida e vá em Server Behaviors, inserindo o Repeat Region.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_dynamictext9.jpg" title="" >

Como só temos um Recordset nesse arquivo, não será preciso escolher. Em Show (mostrar) está indicando exibir até 10 dados, você pode diminuir ou aumentar esse número. Para deixar ilimitado, basta marcar a opção All records. Feito isso pode dar OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_dynamictext10.jpg" title="" >

Deixe uma linha em branco abaixo do último texto dinâmico, para que os dados não fiquem todos juntos. F12.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_dynamictext11.jpg" title="" >

Todos os cadastros sendo exibido.

Update Record (atualizar os dados)

Com o intuito de facilitar a vida do usuário final, já aprendemos a configurar uma página que envia os dados e uma página que visualiza os dados diretamente do seu banco de dados. Neste capítulo iremos aprender a criar uma página que vai alterar os dados de uma ID.

Ainda no arquivo ver_dados.asp dê um espaço após o texto dinâmico do Nome: e coloque uma \. Dê outro espaço e digite Alterar.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_update1.jpg" title="" >

Selecione a palavra digitada para ser linkada, mas o link será atribuído de uma forma diferente da que estávamos acostumados a fazer: vá à Server Behaviors e clique em Go To Detail Page (vá para o detalhe da página).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_update2.jpg" title="" >

Em Detail Page a gente localizaria a página desejada, mas como ela ainda não foi criada, digite alter_dados.asp que criaremos essa página mais adiante (não invente de criar com outro nome da que você atribuiu em Detail Page). Certifique-se de que em Column está apontando para a coluna id e pode dar OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_update3.jpg" title="" >

Ctrl N para criar um novo arquivo e em Page Type (tipo de página) escolha o ASP VBScript antes de clicar em Create.

Se não quiser fazer todos os campos do formulário novamente, copie o formulário do arquivo cadastro.asp e cole no seu novo arquivo.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_update4.jpg" title="" >

Selecione o antigo botão Enviar e em Value mude para Enviar Modificado.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_update5.jpg" title="" >

Insira um novo Recordset e renomeie para alterar. Acompanhe a figura, principalmente no Filter (filtro) que deve apontar para a coluna id. Clique em Test para certificar que fez tudo corretamente.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_update6.jpg" title="" >

Digite a ID 2 e dê OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_update7.jpg" title="" >

Retornaram os dados do segundo cadastro. Dê OK no Test SQL Statement e OK no Recordet.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_update8.jpg" title="" >

Agora iremos ativar a ação que vai permitir ao usuário final alterar um dado na própria página: vá em Server Behaviors e clique em Update Record (atualizar gravação).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_update9.jpg" title="" >

Em Unique key column escolha a nossa chave primária id e em After updating, go to (depois de atualizar ir para) localize o arquivo ver_dados.asp antes de dar OK.

O formulário já está pronto, o Update Record foi ativado. Só fica faltando os dados serem exibidos no formulário ao clicar em Alterar, senão será exibido um formulário em branco.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_update10.jpg" title="" >

Para isso vamos selecionar cada formulário [a começar pelo rótulo (TextField) do Nome:] e clicar no símbolo do trovão Bind do Dynamic Source ao lado de Init val.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_update11.jpg" title="" >

Aponte para a coluna nome antes de dar OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_update12.jpg" title="" >

O mesmo em email.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_update13.jpg" title="" >

Selecione o Radio Button do sexo M, e o botão do trovão estará um pouco diferente. Enfim, clique nele.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_update14.jpg" title="" >

Estando M selecionado, clique no ícone do trovão.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_update15.jpg" title="" >

E aponte para sexo. Faça o mesmo no sexo F.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_update16.jpg" title="" >

E por fim a coluna mensagem antes de dar F12 na página ver_dados.asp (lembre-se de salvar as páginas primeiro).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_update17.jpg" title="" >

Clique em Alterar do terceiro cadastro.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_update18.jpg" title="" >

Foi encaminhado para a ID 3, com os dados prontos para ser alterado.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_update19.jpg" title="" >

Após feito algumas modificações, clique em Enviar Modificado.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_update20.jpg" title="" >

O cadastro 3 foi atualizado, como pode conferir tanto na página do usuário final como no próprio banco de dados.

Delete Record (remover os dados)

Ainda na página ver_dados.asp iremos adicionar mais uma ação: Delete Record (apagar uma gravação).

Clique com o mouse abaixo de Mensagem: e insira um botão.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_delete1.jpg" title="" >

Como ainda não foi criado um formulário nessa página, clique em Yes para ser adicionado um formulário.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_delete2.jpg" title="" >

Clique no botão e em Value digite Apagar.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_delete3.jpg" title="" >

Vá à Server Behaviors e insira a ação Delete Record.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_delete4.jpg" title="" >

Em Connection a sua conexão com o banco de dados (conexoes) e em Unique key column a chave id. O resto deixa como está e dê OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_delete5.jpg" title="" >

F12 e apague um dos cadastros, clicando em Apagar.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_delete6.jpg" title="" >

Ação efetuada com êxito, tanto na página que visualiza os dados, como também no nosso banco de dados.

User Authentication (usuários e senhas)

Ficou faltando um link que levará para a página dos cadastros efetuados (ver_dados.asp), mas ao invés de fazer um link direto, vamos redirecionar-lo para uma página que solicitará o nome de usuário e a senha para prosseguir.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_user1.jpg" title="" >

Abra o arquivo cadastro.asp e coloque abaixo do formulário um link que solicitará a sua identificação.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_user2.jpg" title="" >

Abra o seu banco de dados (dados.mdb) e crie uma nova tabela no modo de Design. Com as colunas id (primary key), login e senha. Todas do modo Texto. Feche a tabela.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_user3.jpg" title="" >

Salve a tabela como login.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_user4.jpg" title="" >

Dê um duplo-clique na nova tabela e atribua na coluna login muricy e na senha baralho.

Crie um novo arquivo login.asp e insira um novo Recordset de nome loginsenha.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_user5.jpg" title="" >

Agora temos duas tabelas no Recordset, escolha a tabela login e dê OK.

Crie um novo formulário, insira dois TextField e um botão.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_user6.jpg" title="" >

No primeiro TextField nomeie como login.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_user7.jpg" title="" >

No segundo TextField nomeie como senha e marque a opção password para que os caracteres reais não sejam exibidos ao digitar a senha.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_user8.jpg" title="" >

No botão, em Value, digite Entrar.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_user9.jpg" title="" >

Vá para Server Behaviors e: User Authentication (autenticação do usuário) => Log in User (logar usuário).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_user10.jpg" title="" >

Em Username field e Password field os respectivos TextField que você inseriu, a tabela é login (não diga), as colunas (Username column, e Password column) são login e senha, a página que será redirecionada se a autenticação tiver sido efetuada com êxito (If login succeeds, go to) é a página ver_dados.asp, se tiver errado (If login fails, go to) digite a página a ser criada em seguida error.asp; pode dar OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_user11.jpg" title="" >

Ctrl S para salvar as configurações atuais e Ctrl Shif S para salvar o arquivo login.asp como error.asp (assim não precisa configurar tudo de novo...).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_user12.jpg" title="" >

Mude o título de exibição e coloque um aviso de que o nome de usuário ou senha estão incorretos.

Salve todos os arquivos e volte para o arquivo cadastro.asp antes de dar F12.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_user13.jpg" title="" >

Clique no link abaixo para se identificar.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_user14.jpg" title="" >

Digite o nome de usuário e a senha corretamente (muricy e baralho), clique em Entrar.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_user15.jpg" title="" >

Foi para a página dos cadastros feitos, volte para a página login.asp.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_user16.jpg" title="" >

Digite o nome de usuário ou a senha errada (eu só troquei o b pelo c...).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_user17.jpg" title="" >

Digite o nome de usuário e/ou a senha errada novamente (digitei carvalho na senha).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_user18.jpg" title="" >

Repetiu a página, agora identifique-se.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_user19.jpg" title="" >

Você teve o acesso a página ver_dados.asp.

Restrict e Log Out (restringir uma página dependente da identificação e sair da página)

Apesar de só irmos para a página ver_dados.asp se a identificação estiver correta, se colarmos o link localhost/conexoes/ver_dados.asp na barra de endereço a página se abrirá normalmente, o que implicaria em risco de invasão, pois a página não está totalmente protegida.

Para que isso não ocorra, nós temos que inserir uma ação que impedirá o acesso se não estiver logado.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_logoff1.jpg" title="" >

Abra o arquivo error.asp e salve como forbidden.asp. Mude o aviso para acesso proibido ou uso exclusivo dos usuários logados ou acesso restrito para os usuários...

Feche esse arquivo e abra o arquivo ver_dados.asp.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_logoff2.jpg" title="" >

Server Behaviors = > User Authentication => Restrict Acess To Page (restringir o acesso da página).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_logoff3.jpg" title="" >

Localize a página forbidden.asp para ser redirecionado para ela se você tentar entrar em ver_dados.asp sem se identificar e pode dar OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_logoff4.jpg" title="" >

Crie uma tabela com uma única célula acima da sua Repeat Region e clique na célula. Agora vá em Server Behaviors = > User Authentication => Log Out User (sair do usuário).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_logoff5.jpg" title="" >

Um link será criado automaticamente, localize a página cadastro.asp para ser redirecionado à ela após sair do usuário. Pode dar OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_logoff6.jpg" title="" >

O seu Log out foi criado, F12.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_logoff7.jpg" title="" >

Já foi redirecionado para a página forbidden.asp. Tente entrar a força colocando na barra de endereço o link localhost/conexoes/ver_dados.asp.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_logoff8.jpg" title="" >

Não deu, e na barra de endereço retornou localhost/conexoes/forbidden.asp?accessdenied=/conexoes/ver_dados.asp (access denied é proibido o acesso).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_logoff9.jpg" title="" >

Identifique-se então

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_logoff10.jpg" title="" >

Agora sim. Volte à página anterior.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_logoff11.jpg" title="" >

Agora cole o endereço localhost/conexoes/ver_dados.asp.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_logoff12.jpg" title="" >

E você teve acesso, mas se clicar em Log out perderá o acesso. Faça isso.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_logoff13.jpg" title="" >

Você está de volta à página de cadastro, volte para o arquivo ver_dados.asp.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_logoff14.jpg" title="" >

Renomeie o Log out para Sair e F12.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_logoff15.jpg" title="" >

Por ter se deslogado, você está sem acesso a página ver_dados.asp. Experimente entrar com o usuário e/ou senha incorretos (dessa vez coloquei o nome de usuário errado).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_logoff16.jpg" title="" >

Voltou para a página error.asp, identifique-se.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_logoff17.jpg" title="" >

Pode sair a hora que quiser.

Criando um novo DSN e um novo Alias

Agora iremos criar um novo site.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4_newalias1.jpg" title="" >

Crie na pasta sites a pasta videogame.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4_newalias2.jpg" title="" >

Crie um novo banco de dados e salve como console.mdb no formato da versão 2000.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4_newalias3.jpg" title="" >

Crie uma tabela em Design com as colunas id de Numeração Automática, console e preco (sem cedilha) ambas do modo Texto. Feche a tabela e salve-a como consoles.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4_newalias4.jpg" title="" >

Na certa você se esqueceu de definir a coluna id como a Primary Key, ao salvar a tabela irá perguntar se deseja criar uma chave primária. Clique em sim e a coluna id será a Primary Key (se não houver uma coluna de numeração automática, será criado automaticamente uma de nome Código).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4_newalias5.jpg" title="" >

Dê um duplo-clique na nova tabela e atribua na coluna console três modelos de console: Wii, Playstation 3, xBox 360; os seus respectivos preços na coluna preco: R$ 1.999,99, R$ 1.400,00, R$ 1.164,42.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4_newalias6.jpg" title="" >

Crie uma nova tabela no modo Design com as colunas: id Primary Key de Numeração Automática, nome, email, mensagem; no modo Texto. Salve a coluna como contato.

Vamos criar um novo DSN? Caso não recorde o procedimento, clique .

Localize o seu banco de dados console.mdb.

Agora temos dois DSN. Criemos um novo alias (caso não se lembre, clique [url=").

Nomeie o alias como dados.

E localize a pasta videogame.

O novo alias já foi criado.

Checando os arquivos do alias conexoes.

Vamos criar um novo site, no modo Basic, de nome videogame e clique em Next.

Clique em Yes, I want to use a server technology e escolha o ASP VBScript. Clique em Next.

Deixe marcada a primeira opção e localize a pasta do seu site (videogame), clique em Next.

Digite o endereço do seu novo alias (http://localhost/dados/) e clique em Test URL para ver se obteve êxito. Se sim, clique em Next.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4_newalias17.jpg" title="" >

Clique em No antes de Next.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4_newalias18.jpg" title="" >

Confira as informações e clique em Done.

Template e CSS no ASP VBScript

Não muda muita coisa, mas é importante constar.

Tendo criado o site videogame, crie um novo ASP VBScript, mas não salve o arquivo ainda.

Embora nós tenhamos criado um DSN anteriormente, nós tínhamos optado por acessar o nosso banco de dados sem o DSN, usando a Custom Connection String. Dessa vez iremos acessar o novo banco de dados pelo nosso novo DSN.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_css1.jpg" title="" >

Vá em Databases e escolha Data Source Name (DSN).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_css2.jpg" title="" >

Em Connection name coloque dados, escolha o DSN console e clique em Test.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_css3.jpg" title="" >

Se obteve êxito, clique em OK e feche o DSN.

Crie uma pasta images dentro da pasta videogame e salve dentro da nova pasta o http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/videogame.jpg do site videogame. Feito isso crie uma tabela com três linhas e uma coluna, leve a imagem videogame.jpg para a primeira célula.

Crie na segunda célula as seções: Página Principal, Fale Conosco*, e Login.

* Em um site estático nós estávamos acostumados a colocar como link de Contato ou Fale Conosco um endereço de e-mail. Em um site dinâmico (principalmente um e-commerce) é recomendado criar uma página com formulário onde o visitante coloca o seu nome, o seu e-mail, e manda a sua mensagem. A partir de agora acostumemos a trabalhar dessa forma, tudo bem?

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_css4.jpg" title="" >

Clique na terceira célula e vá ao menu: Insert => Template Objects => Editable Region (ou Ctrl Alt V), nomeie como Forms antes de dar OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_css5.jpg" title="" >

Vá ao menu: File => Save as Template... e salve como guia. Vamos continuar trabalhando nele ainda.

Agora o DWT tem uma extensão ASP (no caso guia.dwt.asp)

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_css6.jpg" title="" >

Vamos criar um novo arquivo CSS de nome fundo1.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_css7.jpg" title="" >

Salve como estilos.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_css8.jpg" title="" >

Clique na categoria Background (plano de fundo) e escolha em Background-color a cor #036 antes de clicar em Apply (aplicar) e/ou dar OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_css9.jpg" title="" >

Clique fora da tabela e aplique o estilo fundo1 para mudar a cor de fundo da página.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_css10.jpg" title="" >

Criemos um novo estilo: texto_branco_negrito_12.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_css11.jpg" title="" >

Acompanhe a figura e dê OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_css12.jpg" title="" >

Selecione todos os textos do template e aplique o novo estilo de texto.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_css13.jpg" title="" >

Deixe os estilos de links: a:link, a:visited, e a:active de cor cinza.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_css14.jpg" title="" >

A cor sugerida é a #CCC.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_css15.jpg" title="" >

E o link a:hover de cor vermelha #F00.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_css16.jpg" title="" >

Selecione a seção Página Principal e atribua o link default.asp (no HTML a gente salvava como index.html, no ASP a página padrão, como já diz o nome, é a default.asp). Em Fale Conosco será contato.asp e em Login será login.asp.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_css17.jpg" title="" >

Vamos criar um novo estilo de plano de fundo, de nome fundo2.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_css18.jpg" title="" >

O texto será da mesma cor do link rollover (#F00).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_css19.jpg" title="" >

E o plano de fundo de cor #FFC.

Feche o CSS (depois a gente cria mais estilos) e feche o template.

Criando um Sistema de Busca

É muito fácil, basta filtrar a coluna desejada no Recordset da página de resultados da busca.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_busca1.jpg" title="" >

Em tempo, Ctrl N para criar um novo arquivo e escolha o arquivo baseado no template guia (irá abrir como uma página ASP VBScript), salve como default.asp.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_busca2.jpg" title="" >

Crie um formulário e insira um TextField aplicando o estilo fundo2, renomeando o TextField para busca.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_busca3.jpg" title="" >

Crie um novo estilo de nome botao com a fonte Arial e a cor #00F, passe para a categoria Backgroud.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_busca4.jpg" title="" >

Em Background-color escolha a cor #0FF e pode dar OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_busca5.jpg" title="" >

Crie um botão, atribuindo no Value Buscar e em Class o estilo botao.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_busca6.jpg" title="" >

Selecione o seu formulário e atribua em Action a página busca.asp, que será ainda criada, e o Method deverá ser GET para exibir os dados na barra de endereço.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_busca7.jpg" title="" >

Crie um novo arquivo ASP VBScripit baseado nesse template e crie uma tabela com 3 linhas e duas colunas. Preencha conforme mostra a figura, não se esquecendo de atribuir o estilo de texto nas células.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_busca8.jpg" title="" >

Crie um Recordset de nome buscar, apontando para a tabela consoles. Em Filter escolha a coluna console e a URL Parameter será o nome do nosso TextField busca. Pode dar OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_busca9.jpg" title="" >

Agora iremos inserir o Dynamic Text nas células, mas de uma forma diferente: pegando o atalho pela aba Bindings.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_busca10.jpg" title="" >

Clique no ícone de trovão da coluna console e arraste para a segunda coluna de Consoles:.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_busca11.jpg" title="" >

Faça o mesmo com o preço na segunda coluna de Preços:.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_busca12.jpg" title="" >

Copie todo o formulário da página default.asp e cole abaixo da tabela de busca.asp. Mude o texto da primeira célula para nova busca, com a frase à seu gosto.

Salve essa página e a página default.asp, F12 na mesma.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_busca13.jpg" title="" >

Digite o vídeo game Xbox 360 (não há diferenças entre letras maiúsculas e minúsculas) no TextFiel e clique em Buscar.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_busca14.jpg" title="" >

Retornou o produto com o seu respectivo preço, e na barra de endereço os dados da busca digitada (lembre-se que em caso de usuário e senha, não se deve deixar no Method GET em hipótese alguma).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_busca15.jpg" title="" >

Localize o Wii para saber o seu preço.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_busca16.jpg" title="" >

Retornou o preço do Wii (2000 contos...). Vamos ver o preço do Playstation 3.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_busca17.jpg" title="" >

Feito.

Em caso de mais de um resultado da busca é só selecionar as células com o nome do produto e preço junto com seu Dynamic Text. Feito isso insira o Repeat Region e em Recordset deixar o Sort apontando para a coluna id como Descending (descendente) para que sejam exibidos primeiro os resultados recentes.

Formulário Pré-Definido

Antes de prosseguir, só um lembrete:

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_wizard1.jpg" title="" >

É possível converter um HTML em ASP (seja um HTML existente, ou um untitled). Com a aba Server Behaviors ativa, clique em Choose a document type (escolher um tipo de documento).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_wizard2.jpg" title="" >

Escolha um tipo (de preferência o próprio ASP VBScript) e dê OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_wizard3.jpg" title="" >

Ele já foi convertido em ASP VBScript. Em caso de um HTML existente, não se esqueça de salvá-lo.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_wizard4.jpg" title="" >

Crie um arquivo contato.asp sobre o nosso template e insira um Recordset de nome contato da tabela contato.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_wizard5.jpg" title="" >

No painel Insert, mude de Forms para Data (depois a gente volta para Forms).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_wizard6.jpg" title="" >

Nós iremos montar um formulário pré-definido, clique em Insert Record e escolha Record Insertion Form Wizard.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_wizard7.jpg" title="" >

Escolha a tabela contato e remova a coluna id.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_wizard8.jpg" title="" >

Os labels também estão pré-definidos (no exemplo eu só modifiquei o Email: acrescentando um - ficando E-mail:) pode dar OK e o seu formulário está completo.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_wizard9.jpg" title="" >

Agora é só aplicar os estilos CSS e fazer umas modificações.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_wizard10.jpg" title="" >

Abra o banco de dados console.mdb e crie uma nova tabela acesso com as colunas: id (Primary Key) de Numeração Automática, usuario, e senha; como Texto.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_wizard11.jpg" title="" >

Feche a tabela, salve-a, e abra-a para adicionar na coluna usuario o nome spider e na coluna senha o nome vice antes de fechar o banco de dados.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_wizard12.jpg" title="" >

Crie um novo arquivo login.asp sobre o template e insira um Recordset loginsenha apontando para a tabela acesso antes de dar OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_wizard13.jpg" title="" >

Server Behaviors => User Authentication => Log In User. A página após a identificação ainda será criada, não crie com um nome diferente da indicada na figura.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_wizard14.jpg" title="" >

Crie o arquivo ver_mensagem.asp e insira uma tabela como indicada na figura. Insira um Recordset de nome contato apontando para a tabela contato.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_wizard15.jpg" title="" >

Dynamic Text: nome, email, e mensagem; nas sua respectivas células. Selecione todas essas células (menos a primeira) e Repeat Region nelas.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_wizard16.jpg" title="" >

Volte para contato.asp e F12. Mande uma mensagem.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_wizard17.jpg" title="" >

Mande outra.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_wizard18.jpg" title="" >

Clique em Login.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_wizard19.jpg" title="" >

Identifique-se (embora a página não esteja restrita ainda).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_wizard20.jpg" title="" >

Apesar de a célula vazia também ter sido selecionada, por ser um conjunto vazio, acabou não separando uma região da outra.

Imagens Dinâmicas

Salve na pasta images as imagens http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/zeldatp.jpg, http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/sonic.jpg e http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/galaxy1.jpg. Abra o seu banco de dados console.mdb.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_simg1.jpg" title="" >

Crie uma nova tabela destaques com as colunas id (Primary Key) de Numeração Automática, e images do tipo Texto.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_simg2.jpg" title="" >

Feche ela e abra novamente, atribuindo a URL das imagens (no caso aqui foi http://localhost/dados/images/zeldatp.jpg, http://localhost/dados/images/sonic.jpg e http://localhost/dados/images/galaxy1.jpg ). Por URL também é possível inserir uma URL válida externa. Feche o seu banco de dados e abra o default.asp.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_simg3.jpg" title="" >

E finalmente insira um Recordset. Nomeie como destaques, o mesmo nome da tabela para qual será apontada e dê OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_simg4.jpg" title="" >

Insira uma tabela abaixo com duas linhas, clique na segunda célula e vá ao menu: Insert => Image (Ctrl Alt I).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_simg5.jpg" title="" >

Em Select file name from, escolha o Data sources (fonte de dados).

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_simg6.jpg" title="" >

E clique no símbolo do trovão images antes de dar OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_simg7.jpg" title="" >

Para que não seja exibida só a primeira imagem do banco de dados, Repeat Region no ícone selecionado.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_simg8.jpg" title="" >

Por padrão pode repetir até dez regiões, mas você pode aumentar ou reduzir, bem como, exibir todas as regiões clicando em All Records. Vamos deixar como está, pode dar OK e F12.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_simg9.jpg" title="" >

Está sendo exibido os três jogos destaques do Wii.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_simg10.jpg" title="" >

Digamos que o Super Mario Galaxy está em falta, volte ao Repeat Region e diminua para 2 antes de dar OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/aspvbscript/dwcs4asp_simg11.jpg" title="" >

Está sendo exibido os dois primeiros destaques.

Este tutorial foi baseado no programa Adobe Dreamweaver CS4, de modo que, nas próximas versões a serem lançadas, eu postarei aqui o que mudou.

Sempre que surgir uma dúvida com o que eu ensinei, poste aqui.

Quem quiser colaborar e ensinar algo que eu não coloquei (posteriormente não aprendi) fique a vontade e dê a sua participação.

Quem for colaborar, não importa a versão do Dreamweaver que esteja usando. Se houver algum diferencial, eu postarei onde e como é feito na versão atual.

Quando eu tiver um tempo livre, procurarei aprender mais coisas para ensinar aqui futuramente.

A gente se vê no tutorial básico do Adobe Fireworks, uma ferramenta muito importante para edições de páginas na web.