IntroduçãoMeu nome é Diogo Romano Souza, essa minha primeira coluna no MXstudio, certa vez entrei em uma loja virtual, notando que cada vez que atualizava a página, os produtos mudavam, bom até ai não é mistério para ninguém. Ai pensei, por que não fazer uma vitrine dinâmica de exibição onde de forma aleatória os produtos fossem escolhidos e exibidos. Pré-requisitoMacromedia ColdFusion MX 7 ObjetivoMostrar 10 produtos de forma simples, auto-suficiente e versátil. Conceitos- Muda de 30 em 30 segundos. Arquivos do exemplo: Vitrine.cfm ConteúdoVamos ao trabalho: Vamos construir o vitrine.cfm. Esse sistema é muito simples e podem ser usadas várias formas para fazê-lo. Escolhi o <CFIF> , mas pode ser usado o <CFCASE> também. <!— INICIANDO COM UM EFEITO BLEND, SÓ PARA EFEITO ESTÉTICO, ESSE EFEITO SÓ FUNCIONA NO IE 5.1+ —> <!— VAMOS INICIAR RANDOMIZANDO E ESCOLHENDO 1 ITEM ENTRE 5 —> <cfset destaque = RandRange(1,5)> <!— SE O DESTAQUE FOR 1 EXECUTA A QUERY —> <cfif #destaque# EQ 1> <cfquery datasource=”#DSN#” name=”mproduto”> Select * from categoria where categoria = ‘Contabilidade’ order by nome </cfquery> <!— MAS SE O A VARIAVEL #DESTAQUE# IGUAL A 2 EXECUTE A QUERY 2 —> <cfelseif #destaque# EQ 2> <cfquery datasource=”#DSN#” name=”mproduto”> Select * from categoria where categoria = ‘Apostila’ order by nome </cfquery> <!— MAS SE O A VARIAVEL #DESTAQUE# IGUAL A 3 EXECUTE A QUERY 3 —> <cfelseif #destaque# EQ 3> <cfquery datasource=”#DSN#” name=”mproduto”> Select * from categoria where categoria = ‘Matematica’ order by nome </cfquery> <!— MAS SE O A VARIAVEL #DESTAQUE# IGUAL A 4 EXECUTE A QUERY 4 —> <cfelseif #destaque# EQ 4> <cfquery datasource=”#DSN#” name=”mproduto”> Select * from categoria where categoria = ‘LOGICA’ order by nome </cfquery> <!— MAS SE O A VARIAVEL #DESTAQUE# IGUAL A 5 EXECUTE A QUERY 5 —> <cfelseif #destaque# EQ 5> <cfquery datasource=”#DSN#” name=”mproduto”> Select * from categoria where categoria = ‘Portugues’ order by nome </cfquery> </cfif> <!— PARA DAR UM EFEITO ONMOUSEOVER VAMOS ESCOLHER UMA COR —> <cfset bgcolor=”F1F1F1″> <!— VAMOS CRIAR UM REFRESH DE 30 EM 30 SEGUNDOS —> <META HTTP-EQUIV=”REFRESH” CONTENT=”30; URL=red_prods.cfm”> <table class=”style1″> <tr> <!— SE A QUERY MPRODUTO RESULTAR EM MENOS DE 6 ITENS —> <cfif mproduto.recordcount LT 6> <!— VAI PARA O SITE DE REFRESH —> <cflocation url=”red_prods.cfm”> <cfelse> <!— SENÃO EXIBE OS 10 PRIMEIROS RESULTADOS ORDENADOS POR NOME LADO A LADO—> <cfoutput query=”Mproduto” maxrows=”10″> <td> <br> <!— AQUI EXECUTAMOS O EFEITO ONMOUSEOVER – à <table width=”303″ border=”0″ cellpadding=”0″ cellspacing=”0″ bgcolor=”##F1F1F1″ onMouseOut=”this.bgColor=’###bgcolor#’” onMouseOver=”this.bgColor=’##BBBBBB’”> <tr> <td width=”113″ rowspan=”3″ ><div align=”center”><img src=”Administrador/adm_cat_padrao/# fotos#” width=”90″ height=”80″></div></td> <td width=”180″><font size=”1″ face=”Verdana, Arial, Helvetica, sans-serif”># nome#</font></td> </tr> <tr> <td></td> </tr> <tr> <td><strong><font color=”red” size=”1″ face=”Verdana, Arial, Helvetica, sans-serif”>#Dollarformat(preco)#</font></strong></td> </tr> </table> </td> <!— SE O RESTO DA DIVISÃO POR 2 FOR 0 —> <cfif Mproduto.CurrentRow MOD 2 IS 0> </tr> <tr> </tr></cfif> </cfoutput> </cfif> </table> Agora vamos dar início ao red_prods.cfm . Tudo que ele faz é montar um caminho que recarrega automaticamente a pag vitrine.cfm, mesmo que o visitante não clique em nada. <html xmlns=”http://www.w3.org/1999/xhtml “> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ /> <title> red_prods </title> <style type=”text/css”> <!– body { background-color: #CAEEFF; } –> </style> </head> <body> <p align=”center” class=”style26″>Escolhendo mais produtos, arguarde 3 segundos, por favor.</p> <p align=”center” class=”style26″><img src=”loading.gif ” width=”78″ height=”7″ /></p> <META HTTP-EQUIV=”REFRESH” CONTENT=”3; URL= vitrine.cfm”> </body> </html> Lembro que recebi muitos e-mails perguntando como eu fazia esse efeito, perguntavam se era AJAX, quando eu falei que era um truque com IFRAME e Random ficaram surpresos. Pode-se utilizar o próprio vitrine.cfm ou como eu recomendo o iframe desta forma: Crie um arquivo HTM ou CFM e cole esse iframe, pode ser executado remotamente de um servidor para outro também, basta mudar o “src”. <iframe width=”640″ height=”550″ src=”vitrine.cfm ” scrolling=”auto” frameborder=”0″></iframe>
Para ver o exemplo funcionando: www.casadosconcursos-rj.com.br Grande abraço! |
Assine o Feed de Comtentários ou URL de Trackback
