Microsoft Windows 7 Configuração do IIS e Ligação ODBC Microsoft Access 2007 Criação da Base de Dados, Tabelas e Relações Adobe Photpshop CS4 Manipulação das Imagens utilizadas no site Adobe Illustrator CS4 Criação do Layout das páginas do site Adobe Flash CS4 1 Criação dos Botões e Caixas de Destaque Adobe Dreamweaver CS4 Criação e configuração do site(localhost), Páginas, Recordset e Formulários de Dados Microsoft ASP Ligação dinâmica do site(cliente-servidor) JavaScript Scripts diversos (Validações, Data do Sistema, etc.) Adobe InDesign CS4 Criação do relatório final do site(pdf)
Criação da Base de Dados,Tabelas e Relações Microsoft Access CS4 1. Criação de uma nova Base de Dados definida como: bd_site_loja.mdb 2. Criação das Tabelas: Produtos, Marcas, Famílias, Sub-Famílias, Opiniões, Utilizadores, Cesto, Cesto-Produtos. 3. Definição das Chaves Primárias e Secundárias e respectivas Relações. 2 4. Copiar a Base de Bados para a pasta do site: inetpub\wwwroot\site_loja\. 5. Criar uma nova pasta designada imagens na pasta do site: inetpub\wwwroot\site_loja\imagens, para armazenar as imagens que serão vizualizadas no site. Na tabela Produtos estão definidos os campos pro_img_gr e pro_img_pq onde estão inseridos os caminhos e nomes dos ficheiros de imagem.
Ligação ODBC As BD não comunicam directamente com a aplicação web, é por esse motivo necessário um interface que funcione como um intérprete entre a BD e as aplicações. Existem três interfaces mais comuns (ODBC, OLE DB e JDBC). Neste projecto foi utilizado ODBC. ODBC (Open DataBase Connectivity) The Microsoft Open Database Connectivity (ODBC) interface is a C programming language interface that makes it possible for applications to access data from a variety of database management systems (DBMSs). 3 1. Painel de Controlo 2. Sistema e Segurança 3. Ferramentas Administrativas 4. Data Sources (ODBC)
5. No DNS de utilizador seleccionar Microsoft Acces Driver(*.mdb *.accdb). 4 6. Clicar em Adicionar - Seleccionar, na pasta do site, seleccionar a Base de Dados criada no MS Access bd_site_loja.mdb.
Definir um Site Adobe DreamWeaver CS4 1. Menu Site 2. Novo Site 3. Local Info(Nome do Site, Root Folder, Images Folder, HTTP Adress) 5 4. Remote Info(Access, Remote Folder)
5. Testing Server(Server model-javascript, Access, Testing Server Folder, URL). 6
Definição do Index Adobe DreamWeaver CS4 / Flash CS4 1. Nova Página em ASP - JavaScript. 2. Criar Botões e Destaques em Adobe Flash CS4 3. Inserir Cabeçalho, Botões e Destaques na tabela com as seguintes dimensões. Cabeçalho 1024 x 200px Botão1 146 x 50 px Botão2 146 x 50 px Botão3 146 x 50 px Botão4 146 x 50 px Botão5 146 x 50 px Botão6 146 x 50 px Botão7 146 x 50 px Caixa Procura 300 x 30px Logout 130 x 30px Botão Base de Dados 280 x 30px Botão Cesto Compras 280 x 30px 7 Destaque1 250 x 300px Destaque2 250 x 300px Destaque3 250 x 300px Destaque4 250 x 300px Destaque5 250 x 300px Destaque6 250 x 300px
4. Rodapé <hr width= 1024 align= center /> <div align= center style= font-family:arial, Helvetica, sans-serif ><a href= informatica.asp target= _self > Informática</a> <a href= foto_video.asp target= _self >Foto & Vídeo</a> <a href= musica.asp target= _self >Música</a> <a href= imagem_som.asp target= _self >Imagem & Som</ a> <a href= filmes.asp target= _self >Filmes</a> <a href= telemoveis.asp target= _ self >Telemóveis</a> <a href= login.asp target= _self >Login</a> <a href= base_ dados.asp target= _self >Base de Dados</a> <a href= cesto_compras.asp target= _self >Cesto de Compras</a></div> <div align= center ><img src= imagens\cartoes.jpg /></div> 5. Index Final. 8
Conexão entre o DreamWeaver e a Base de Dados Adobe DreamWeaver CS4 1. Menu Window - DataBases - +. 2. Data Source Name(DSN) 3. Preencher o nome da Conexão e estabelecer a ligação ODBC. 9 4. Clicar no botão Test, para testar a ligação. 5. OK para concluir a conexão.
Login / Logout Adobe DreamWeaver CS4 1. O botão LOGIN direcciona para a página de Login. 2. Inserir os dados do utilizador, Login e Password. 3. Caso seja um novo utilizador clicar no botão Inserir Novo Login. 10 4. Os dados dos utilizadores (Guest) são necessários para o acesso à página do Cesto de Compras e para inclusão de comentários sobre os produtos. E na secção de Base de Dados (Administrador) para gerir o conteúdo dinâmico do site: Incluir, Alterar e Excluir(Produtos, Marcas, Famílias, Sub-Famílias). 5. As restantes páginas são de livre navegação. 6. Para efectuar o Logout, clicar no link Logout posicionado abaixo dos botões em qualquer página do site.
Área Exclusiva a Administradores 1. Esta área é restricta à Login de Administrador(access level), para a gestão do conteúdo dinâmico do site. 11 2. Consoante ao botão clicado o site é direccionado para a execução de: Incluir, Alterar e Excluir(Produtos, Marcas, Famílias, Sub-Famílias e Utilizadores).
Consulta de Produtos 1. Esta página de Consulta de Produtos é comum para todo o site. 2. A primeira filtragem acontece quando um dos botões é clicado (Família) (Informática, Foto & Vídeo, Música, Imagem & Som, Filmes e Telemóveis) 12 3. Caso o utilizador deseje mais uma filtragem dentro da Família, foi criada uma Caixa de Selecção com as Categorias (Sub-Famílias) relativas a cada Família. 4. Para ter informações detalhadas sobre os produtos clicar em +info na linha relativa ao produto. 5. Para adicionar ao cesto de compras clicar em +cesto na linha relativa ao produto. 6. A navegação dentre os itens encontrados (5 itens por página) é feito através dos botões Página Anterior e Próxima Página.
Consulta de Produtos 1. A Consulta de Produtos também pode ser efectuada a partir de qualquer página do site através do campo procurar situado abaixo da barra dos botões. 13 2. Esta pesquisa é efectuada em toda a tabela de produtos independentemente da família ou sub-família do produto. 3. A filtragem é feita através de comandos SQL e da variável inserida no campo de pesquisa.
Objectivo, Público-Alvo, Conclusão 14 O objectivo na criação deste site foi meramente com fins de estudo e pesquisa no desenvolvimento da linguagem ASP e JavaScript. O tema escolhido foi uma loja online onde é possível consultar os produtos disponíveis e simular compras através de um cesto de compras. Efectuar Login e Logout dos utilizadores e fornecer acesso dinâmico para a secção administrativa do site, onde é possível inserir, actualizar e excluir registos das tabelas com restrição através do nível de acesso dos utilizadores. Por ser um loja online de variados produtos, não foi definido um público-alvo podendo atingir a todos os interessados em compras online. Achei muito interessante o desafio de construir um site dinâmico em ASP e encontrei algumas dificuldades na filtragem das tabelas através do SQL, o que proporcionou uma elevação de conhecimento, pois tive que perder muitas horas em pesquisas e testes até conseguir resolver e perceber estas questões. Não é um site muito apelativo a nível de design, pois a minha preocupação inicial era fazer um site funcional e de fácil navegabilidade, o que penso ter conseguido. Todas os itens e objectivos propostos pelo formador a serem inseridos no site foram cumpridos e penso ter conseguido agregar mais algumas funcionalidades e aplicações que não eram pedidas, mas que deixaram o site mais funcional e completo, nomeadamente, a pesquisa através de um campo disponível em todas as páginas do site, que é feita através de variáveis e comandos SQL, a junção de várias tabelas para apresentação de consultas, a selecção de itens listados através do repeat-region, o preenchimento automatizado de campos de formulários baseados em dados de utilizadores logados, data do sistema entre outros. Para mim foi muito compensadora esta proposta de projecto, pois consegui superar os meus objectivos iniciais, desenvolvi novas técnicas e percebi melhor a funcionalidade do ASP, JavaScript e SQL.
15