A sua loja Virtual passo a passo

A sua loja Virtual - Estrutura e Funcionamento da página principal

Agora vamos mostrar a nossa loja virtual em funcionamento e explicar os principais conceitos empregados nos arquivos de scripts ASP utilizados.

Para criar uma loja virtual usando ASP .NET acompanhe o curso no link :

ASP .NET - Criando um site completo com carrinho de compras (Curso)

Criando a estrutura da página principal - Index.htm

O arquivo index.htm é o arquivo que inicia o site da loja virtual ele é um arquivo que possui código html/dhtml e scripts JavaScript. Para visualizar como a página foi construída abra-a usando o FrontPage . Sua estrutura foi montada usando tabelas. A estrutura principal da página index.htm é composta pelos seguintes elementos:

Os arquivos de imagem GIF : tit_pesquisa.gif , bt_ok.gif e aprenda_asp.gif. Para inserir as imagens nas respectivas linhas da tabela selecione as seguintes opções do menu : Inserir -> Figura -> Do arquivo... informando a seguir o nome da figura que quer exibir.
O formulário para pesquisa contendo: o campo id - para informar a palavra chave , e o campo categoria referente as opções de seleção disponíveis.

Para construir o formulário usado na página index.htm siga o roteiro:

Para inserir o campo de nome id - Selecione as seguintes opções do menu Inserir->Formulário->Caixa de Texto de uma linha
Para inserir o campo de nome categoria - Selecione as seguintes opções do menu Inserir->Formulário-> Menu Suspenso removendo a seguir os botões Submeter e Redefinir
Para inserir as opções no menu suspenso - Todos, Autor, Asssunto e Título - clique com o botão direito sobre a caixa de seleção e Selecione a opção Propriedades do campo de formulário. Você verá a tela abaixo.

Inserindo as opções no menu suspenso

Informe o nome do campo na caixa de texto Nome e clique no botão Adicionar para inserir as opções conforme mostra a figura. Pronto os campos do formulário usado no arquivo index.htm estão criados.

Iniciando a loja virtual

Inicie o Internet Explorer ou Netscape e na caixa de texto Endereço informe o nome do seu servidor virtual seguido da localização dos arquivos usados. Para o exemplo do livro foi utilizado o nome http://macorati/loja - onde macorati é o nome do servidor virtual da máquina onde nosso site foi testado e loja o nosso diretório de trabalho.

Assim , você verá o endereço http://macorati/loja em todos os exemplos do livro. Você deve ajustar o endereço para o utilizado em sua máquina.

A tela inicial gerada por index.htm é a seguinte:

Fig 1.0 - Tela Inicial da Loja Virtual

Embora seja uma página simples , podemos encontrar nela as principais características de uma página para Loja Virtual:

A identificação da Empresa - Nome e copyright
Pesquisa de produtos com opções fornecidas pelo cliente - O cliente pode fazer a pesquisa informando um nome , com no mínimo dois caracteres (se informar somente um caractere o sistema emite uma mensagem ao cliente), na caixa de texto , selecionando a seguir se deseja que a pesquisa seja feita por : Autor , Assunto , Título ou Todos.
Link Cadastro do usuário - Chama a página identifica.asp que verifica se o cliente possui e-mail e senhas cadastradas. Para novos clientes é exibido o formulário de cadastramento.
Link para entrar em contato com a empresa via e-mail
Link para lançamentos.
Exibição de novo produto da empresa.

O código do arquivo de script index.htm é o seguinte:

<HTML><HEAD><TITLE>a sua loja virtual</TITLE>
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>
<META content="Microsoft FrontPage 4.0" name=GENERATOR><STYLE>.copyright {
	COLOR: #ced6e8; FONT-WEIGHT: normal; TEXT-DECORATION: none
}
<STYLE>
.branco {COLOR: #ffffff; FONT-WEIGHT: normal; TEXT-DECORATION: none }
.preto  {COLOR: #000000; FONT-WEIGHT: normal; TEXT-DECORATION: none }
A:hover {TEXT-DECORATION: underline}
</STYLE>

</HEAD>
<BODY bgColor=#ffffff link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<TABLE border=0 cellPadding=1 cellSpacing=0 width="654">
  <TBODY>
  <TR>
    <TD bgcolor="#FFFFFF" width="650">
      <p align="center"><b><font color="#008080" size="5" face="Verdana">JcmSoft
      - A sua Loja Virtual</font></b>
    </TD></TR>
  <tr>
    <TD align=middle bgColor=#008080 width="650">
      <p align="center"><B><FONT color=#FFFFFF 
      face=arial size=-2>Copyright JcmSoft. Todos os direitos reservados</FONT></B></p>
    </TD>
  </tr>
  <TR>
    <TD bgcolor="#FFFFFF" width="650">&nbsp;</TD></TR></TBODY></TABLE>
<TABLE border=0 cellPadding=0 cellSpacing=0 width="654">
 <TBODY>
 <TR>
 <TD bgColor=#008080 vAlign=top width=131 rowspan="2">
 <SCRIPT language=JavaScript>
/************************************************
* function isEmpty
* Verifica se um campo está vazio
************************************************/               
function isEmpty(s) {
	return ((s == null) || (s.length == 0));
}

/************************************************
* function AvisoInvalido
* Gera um alert para o usuário 
* volta o foco p/campo
* Parâmetros: theField - campo do formulário com problema
*        warnText - texto a ser mostrado no alert
************************************************/
function AvisoInvalido (theField, warnText) {
	theField.focus()
	theField.select()
	alert(warnText)
	return false
}

/************************************************
* function valida
* Faz a validação do formulário preenchido
************************************************/
function valida() {
	var tamanho_pesquisa = new String()
	tamanho_pesquisa = document.pesquisa.id.value
	
	if(tamanho_pesquisa.length < 2)
	{
	avisoInvalido(document.pesquisa.id,'ATENÇÃO: Sua pesquisa deve conter no mínimo 2 caracteres!\n\n');
		return false;
	}
}
</SCRIPT>

<SCRIPT>
function pesquisa(){
window.open('ajuda.htm','explica','toolbar=no,location=no,directories=no,status=no,menubar=no,_

scrollbars=no,resizable=no,copyhistory=no,width=270,height=310,top=40,left=150');
}
</SCRIPT>
      <TABLE border=0 cellPadding=0 cellSpacing=0 width=131>
        <FORM action=catalogo.asp method=POST name=pesquisa onsubmit="return valida()">
        <TBODY>
        <TR>
          <TD align=middle colSpan=2 width=120><A href="javascript:pesquisa()"><IMG border=0 
            src="tit_pesquisa.gif" vspace=7 width="109" height="13"></A></TD>
        </TR>
        <TR>
          <TD><IMG border=0 height=59 
            src="../transp.gif" width=1></TD>
          <TD align=middle>
            <TABLE border=0 cellPadding=1 cellSpacing=0 width=105>
              <TBODY>
              <TR>
                <TD colSpan=2><INPUT name=id size=13></TD></TR>
              <TR>
                <TD><SELECT name=categoria size="1"> <OPTION selected>Todos<OPTION>Autor<OPTION>Assunto
                    <option>Titulo</option>
                  </SELECT></TD>
                <TD vAlign=bottom><INPUT border=0 
                  src="bt_ok.gif" 
              type=image width="19" height="19"></TD></TR></TBODY></TABLE></TD></TR>
     </FORM></TBODY></TABLE><BR>
      <table border="0" width="100%" cellspacing="0" cellpadding="0">
        <tr>
          <td width="100%">
            <hr color="#FFFFFF">
          </td>
        </tr>
        <tr>
          <td width="100%">
            <p align="center"><b><font face="Verdana" size="1" color="#FFFFFF">

<a href="http://macorati/loja/identifica.asp">Cadastro</a></font></b></td>
        </tr>
        <tr>
          <td width="100%">
            <hr color="#FFFFFF">
          </td>
        </tr>
        <tr>
          <td width="100%">
            <p align="center"><b><font face="Verdana" size="1" color="#FFFFFF"><a href="http://">Contato</a></font>

</b></td>
        </tr>
        <tr>
          <td width="100%">
            <hr color="#FFFFFF">
          </td>
        </tr>
        <tr>
          <td width="100%">
            <p align="center"><b><font face="Verdana" size="1" color="#FFFFFF">

<a href="http://macorati/loja/novidades.asp">Lançamentos</a>

</font></b></td>
        </tr>
        <tr>
          <td width="100%">
            <hr color="#FFFFFF">
          </td>
        </tr>
      </table>
    </TD>
    <TD vAlign=top width="403" bgcolor="#FFFFFF" rowspan="2">
    &nbsp;
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;
    <p>&nbsp;
    </TD>
    <TD vAlign=top width="116" bgcolor="#808080">
    <p align="center"><font face="Verdana" size="1" color="#FFFFFF"><span style="background-color: #008080">

<b>lançamento</b>

</span></font></p>
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
      <tr>
        <td width="100%">
          <p align="center"><img border="0" src="aprenda_asp.gif" width="98" height="250"></td>
      </tr>
      <tr>
        <td width="100%">
          <p align="center"><font face="Verdana" size="1" color="#FFFFFF">Série
          Aprenda Rápido</font></td>
      </tr>
    </table>
    </TD>
  </TR>
  <TR>
    <TD vAlign=top width="116" bgcolor="#808080">
    &nbsp;
    </TD>
  </TR></TBODY></TABLE>
</BODY></HTML>
<script language="JavaScript">
<!--
	// Coloca foco no primeiro campo do formulário
	document.pesquisa.id.focus();
// -->
</script>

Para facilitar a compreensão e a identificação do código iremos usar a seguinte notação nos código exibidos:

Texto em azul indica uma função ou procedure JavaScript ou VBScript ou ainda uma chamada a uma função/procedure.
Texto em verde indica código usado em formulários ou código DHTML
Texto em preto indica código HTML

Vamos analisar as partes principais do código usado no nosso arquivo index.htm:

1-) O código abaixo é codigo DHTML onde definimos um estilo para o nosso texto:

}
<STYLE>
.branco {COLOR: #ffffff; FONT-WEIGHT: normal; TEXT-DECORATION: none }
.preto {COLOR: #000000; FONT-WEIGHT: normal; TEXT-DECORATION: none }
A:hover {TEXT-DECORATION: underline}
</STYLE>

2-) A seguir temos o seguinte código de script : <SCRIPT language=JavaScript>
indicando que iremos usar a linguagem JavaScript em nosso código. As funções JavaScript: usadas nesta página são:

Nome da Função	Descrição
isEmpty	verifica se um campo esta vazio. Recebe o parâmetro s que é o campo a ser verificado.
AvisoInvalido	Gera um aviso para o usuário e volta o foco para o campo. Recebe dois parâmetros: thefield - o campo em questão warntext - o texto de aviso
valida	Faz a validação do formulário preenchido. Verifica se o tamanho da string de pesquisa possui mais de dois caracteres. Em caso positivo invoca a função AvisoInvalido.
pesquisa	Mostra o arquivo de ajuda: ajuda.htm

3-) O código abaixo é um script Java que coloca o foco no primeiro campo do formulário toda a vez que a página é carregada.

O funcionamento da página index.htm

Se o usuário clicar na imagem tit_pesquisa.gif (logo de interrogação e da palavra Pesquisa) ocorre uma chamada á função pesquisa() como indicado no código abaixo:

A seguir a função abre uma janela e exibe o arquivo ajuda.htm ao usuário. Veja código a seguir:

<SCRIPT>
function pesquisa(){
window.open('ajuda.htm','explica','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,_

copyhistory=no,width=270,height=310,top=40,left=150');
}
</SCRIPT>

Para realizar uma pesquisa o usuário irá informar a palavra chave , selecionar qual a opção para pesquisa: Todos, Autor, Título ou Assunto e clicar no botão OK. A função valida() é chamada e verifica se o numero de caracteres da palavra chave é menor que 2 . Em caso positivo é exibida uma mensagem de alerta ao usuário caso contrário o arquivo catálogo.asp é carregado. Veja o código para o formulário abaixo:

A instrução acima indica que temos um formulário que chama a página catalogo.asp após fazer a validação da pesquisa. Em um formulário os campos recebem nomes para que possam ser identificados. O primeiro campo refere-se a palavra chave que deve ser informada , para receber uma entrada e identificar o respectivo campo usamos a instrução a seguir : <INPUT name=id size=13> que define o nome do campo como id com tamanho de até 13 caracteres.

O outro campo do nosso formulário é o campo que permite a escolha da categoria da nossa pesquisa. Aqui temos uma relação com as opções predeterminadas. O código para identificar este campo é o seguinte:

<OPTION selected>Todos

<OPTION>Autor

<OPTION>Assunto

<option>Titulo

</option></SELECT>

Temos no código o campo definido com o nome de categoria e tamanho de 1 e as opções para seleção com a opção Todos selecionada . Veremos mais a frente por que usamos nomes para identificar os campos do formulário.

A última opção ativa em nossa página ocorre quando o usuário clica no link Cadastro. Este link chama a página identifica.asp que procede com identificação do usuário no sistema. O código é exibido a seguir:

<a href="http://macorati/loja/identifica.asp">Cadastro</a>

O arquivo Global.asa

Não podemos esquecer de mencionar o arquivo Global.asa , pois ele é fundamental para o funcionamento da nossa loja virtual. Pois nele usamos o código que irá nos conectar ao nosso banco de dados. Iremos usar o arquivo Global.asa para criar variáveis que sejam visíveis em toda nossa aplicação - a variável conecta_bd e variáveis que deverão existir enquanto a sessão do usuário existir - as variáveis ClienteID , ClienteNome e PedidoID .

Os objetos Session e Application permitem a criação e o acesso a essas variáveis e juntamente com um arquivo especial chamado Global.asa permitem uma configuração da aplicação quando da ocorrência dos eventos : inicar sessão/encerrar sessão e iniciar aplicaçao /encerrar aplicação. O código do nosso arquivo Global.asa é dado a seguir:

<SCRIPT LANGUAGE=VBScript RUNAT=Server>
Option Explicit

Sub Application_OnStart
'Caminho do banco de dados em seu sistema
Application("conecta_bd")="DBQ=c:\inetpub\wwwroot\loja\esoft.mdb;DRIVER={Microsoft Access Driver (*.mdb)}"
End Sub

Sub Session_OnStart
'tempo máximo inatividade da sessão
Session.Timeout = 10 ' minutos
'Inicializa variáveis da sessão
Session("ClienteID") = 0 ' cliente nao identificado
Session("ClienteNome") = "" ' cliente nao identificado
Session("PedidoId")=0 'cliente nao tem pedido feito ainda
End Sub
</SCRIPT>

O arquivo Global.asa inicia a variável de aplicação – Application("conecta_bd") – atribuindo á mesma o caminho do banco de dados e o provedor OLE DB usado na conexão , montando assim uma string de conexão que será utilizada por todas as rotinas dos demais arquivos do projeto que necessitam abrir a base de dados esoft.mdb. A variável a nível de aplicação é visível por todas os arquivos de scritps do projeto.

Ao invés de um provedor OLE DB podemos usar um drive ODBC ou um DSN- Data Source Name - para fazer a conexão com a base de dados. No nosso caso usamos um driver ODBC para acessar uma base de dados Access por isto temos:

Application("conecta_bd")="DBQ=c:\inetpub\wwwroot\loja\esoft.mdb;DRIVER={Microsoft Access Driver (*.mdb)}"

A seguir as variáveis de sessão que identificam o usuário são inicializadas. Para cada usuário que acessar o site pela primeira vez e até dez minutos após o usuário abandonar a sessão elas permanecem na memória do servidor.

O arquivo Global.asa é um arquivo texto que pode ser criado em qualquer editor de textos e só pode haver um único arquivo Global.asa por diretório virtual ou aplicação ASP.

Parte Anterior Próxima parte

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Veja mais sistemas completos para a plataforma .NET no Super DVD .NET , confira...
Curso Básico VB .NET - Vídeo Aulas

Quer aprender C# ??

Chegou o Super DVD C# com exclusivo material de suporte e vídeo aulas com curso básico sobre C#.
Curso C# Basico - Video Aulas

Quer aprender os conceitos da Programação Orientada a objetos ?

Curso Fundamentos da Programação Orientada a Objetos com VB .NET

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Curso - Gerando Relatórios com o ReportViewer no VS 2013 - Vídeo Aulas

Quer aprender a criar aplicações Web Dinâmicas usando a ASP .NET MVC 5 ?

Curso ASP .NET MVC 5 - Vídeo Aulas

Gostou ? Compartilhe no Facebook Compartilhe no Twitter

Referências:

José Carlos Macoratti