parte 4 - eisnt.org · + php + mysql + adt. projecto para ser entregue nesta quarta fase: Área...
TRANSCRIPT
Financiado pelo FSE Pág: 1
DREAMWEAVER
ECommerce DW
Seja bem-vindo ao nosso novo curso ECOMMERCE DESENVOLVIMENTO COM DREAMWEAVER
+ PHP + MYSQL + ADT.
PROJECTO PARA SER ENTREGUE NESTA QUARTA FASE: Área cliente (continuação).
PARTE 4
Vamos continuar a trabalhar com o modelo.
O rodapé ficará com o campo
O cabeçalho com o campo
Copiamos a imagem bg.gif da pasta upload para imagens da raiz, vai funcionar como fundo.
15
Financiado pelo FSE Pág: 2
DREAMWEAVER
Vamos agora fazer de maneira que ao clicar na categoria, apareça os produtos referentes á
mesma.
Em primeiro lugar vamos guardar o modelo.php em categorias.php.
Apaga-se a imagem das categorias.
Criamos um recordset.
Vamos abrir o estilos.css e criamos uma nova regra:
Financiado pelo FSE Pág: 3
DREAMWEAVER
Dentro da div vamos aplicar esta regra.
Divida a primeira célula em duas linhas.
Financiado pelo FSE Pág: 4
DREAMWEAVER
Não se esqueça da imageplaceholder.
Imagem dinâmica
CENTRAR A IMAGEM.
CENTRAR O PREÇO.
TEXTO EM NEGRITO.
REPEAT REGION(5).
Financiado pelo FSE Pág: 5
DREAMWEAVER
Na última coluna, vamos colocar uma tabela com 3 colunas e 1 coluna
Vamos criar uma nova regra classe botao_detalhe
Financiado pelo FSE Pág: 6
DREAMWEAVER
Edite a regra e altere o align “center” e Box padding “3”
Criamos um novo estilo:
Aplicamos ao preço.
Novo estilo:
Financiado pelo FSE Pág: 7
DREAMWEAVER
Vamos agora fazer um efeito de Over:
Financiado pelo FSE Pág: 8
DREAMWEAVER
Vamos reduzir a apresentação dos produtos de forma a aparecer grupos de 3 produtos por
página.
Para isso alteramos o repeat region para 3 registos.(categorias.php)
Depois da tabela e antes do DIV vamos colocar um espaço.
Agora sim nesse espaço vamos colocar o navegador de registos com imagens.
Financiado pelo FSE Pág: 9
DREAMWEAVER
Agora vamos trabalhar a parte do detalhe do produto.
Guardamos o ficheiro modelo.php como detalhes.php
Apagamos o conteúdo do DIV
De seguida criamos um RecordSet:
Criamos uma tabela com 2 linhas e 1 coluna (100px).
1º linha -> Image Placeholder
2º linha ->
Na imagem colocamos uma imagem e centre:
Financiado pelo FSE Pág: 10
DREAMWEAVER
centro o preço e aplique a classe “cor_preco”.
Substituir a imagem pela imagem em PHP(dinâmica).
SHIFT-ENTER, cinco vezes e na segunda linha colocamos o campo produto e na quarta linha
o campo descricao.
Falta tratar o botão COMPRAR.
Para isso vamos verificar a tabela produtos, o campo preco alteramos para decimal 15,2.
De seguida vamos implementar o código paypal:
Financiado pelo FSE Pág: 11
DREAMWEAVER
Temos três variáveis: id, produto e preço.
Agora temos que colocar no cabeçalho do código antes do código html da página de detalhe
dessas variáveis:
Agora podemos testar:
Financiado pelo FSE Pág: 12
DREAMWEAVER
Financiado pelo FSE Pág: 13
DREAMWEAVER
Desta maneira temos incluido o botão de paypal, que para todos os efeitos é o nosso
carrinho de compras, com todas as vantagens possiveis, isto é, vendas para todo o mundo
com um sistema seguro “https”.
Financiado pelo FSE Pág: 14
DREAMWEAVER
Estivemos a trabalhar com o nosso carrinho de compras PAYPAL.
Agora vamos programar o nosso link das novidades.
Abrimos o ficheiro novo_novidades.php e alteramos produtos.php para detalhes.php
Agora vamos trabalhar no botão COMPRAR, para isso gravamos um ficheiro com base no
modelo.php com o nome comprar.php
Copiamos todo o código PayPal excepto a linha da imagem.
Para além deste código temos que copiar o outro código das três variáveis, colocando antes
da tag <HTML>.
Acrescente o botão PAYPAL.
Financiado pelo FSE Pág: 15
DREAMWEAVER
Temos que criar um recordset.
E acrescente o seguinte texto:
Temos que criar uma página index.php(será o inicio da nossa página).
Gravamos o modelo.php como index.php
Agora vamos alterar no novo_menu.php, alteramos:
Também temosde alterar o link da imagem de contacto para isso alteramos o
novo_contacto.php, no entanto antes vamos criar com base no modelo.php o ficheiro
contacto.php
E apagamos a imagem.
Financiado pelo FSE Pág: 16
DREAMWEAVER
Agora sim no ficheiro novo_contacto.php colocamos o link:
Estamos na reta final, falta tratar do formulário CONTACTO.
Copiamos o código <form> e </form> do ficheiro contacto.html para o nosso ficheiro
contacto.php.
Para que o email chegue ao seu destinatário teremos de ter um servidor que não proíba o
envio de mails, isto é, muitas vezes os gratuitos não funcionam.
Para isso, temos três ficheiros que vamos precisar:
Contacto.html, enviado.php e form.php
Terminamos o nosso projecto, com sucesso.
Parabéns.